@extends('admin.layouts.contentLayoutMaster')

@section('title','Sample-List')

@section('vendor-styles')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/pickers/pickadate/pickadate.css')}}">
@endsection

@section('page-styles')

@endsection

@section('content')

{{-- search bar --}}
<section id="basic-input">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <form action="">
                    <div class="card-header">
                        <h4 class="card-title">搜尋</h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <!-- 文字 -->
                                    <fieldset class="form-group">
                                        <label for="keyword">文字</label> 
                                        <input class="form-control" id="keyword" name="keyword" placeholder="關鍵字" type="text">
                                    </fieldset>
                                    
                                    <!-- 日期 -->
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-1">
                                                <h6>開始日期</h6>
                                                <fieldset class="form-group position-relative has-icon-left">
                                                    <input class="form-control pickadate-months-year" placeholder="Select Date" type="text">
                                                    <div class="form-control-position">
                                                        <i class='bx bx-calendar'></i>
                                                    </div>
                                                </fieldset>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-1">
                                                <h6>結束日期</h6>
                                                <fieldset class="form-group position-relative has-icon-left">
                                                    <input class="form-control pickadate-months-year" placeholder="Select Date" type="text">
                                                    <div class="form-control-position">
                                                        <i class='bx bx-calendar'></i>
                                                    </div>
                                                </fieldset>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h6>下拉式選單</h6>
                                    <fieldset class="form-group">
                                        <select class="form-control" id="basicSelect">
                                            <option>
                                            </option>
                                            <option>
                                                IT
                                            </option>
                                            <option>
                                                Blade Runner
                                            </option>
                                            <option>
                                                Thor Ragnarok
                                            </option>
                                        </select>
                                    </fieldset>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="d-flex justify-content-end">
                            <button class="btn btn-primary glow mr-1 mb-1" type="button">Search</button> 
                            <button class="btn btn-light glow mr-1 mb-1" type="button">Clear</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>



<section>
    <div class="row" id="table-hover-row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">列表</h4>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        
                    </div>
                    
                    <!-- table hover -->
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                        <thead>
                            <tr>
                            <th>NAME</th>
                            <th>RATE</th>
                            <th>SKILL</th>
                            <th>TYPE</th>
                            <th>LOCATION</th>
                            <th>ACTION</th>
                            </tr>
                        </thead>
                        <tbody>
                            @for ($i=1;$i<=10;$i++)
                                <tr>
                                    <td class="text-bold-500">Michael Right</td>
                                    <td>$15/hr</td>
                                    <td class="text-bold-500">UI/UX</td>
                                    <td>Remote</td>
                                    <td>Austin,Taxes</td>
                                    <td>
                                        <!-- 檢視 -->
                                        <a href="javascript:;">
                                            <i class="badge-circle badge-circle-light-secondary bx bx-detail font-medium-1" title="查看"></i>
                                        </a>

                                        <!-- 編輯 -->
                                        <a href="javascript:;">
                                            <i class="badge-circle badge-circle-light-secondary bx bx-edit font-medium-1 mb-2 mr-1" title="編輯"></i>
                                        </a>

                                        <!-- 刪除 -->
                                        <a href="javascript:;">
                                            <i class="badge-circle badge-circle-light-secondary bx bx-trash font-medium-1" title="刪除"></i>
                                        </a>
                                    </td>
                                </tr>
                            @endfor
                        </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- pagination -->
                <div class="card-footer">
                    <nav aria-label="Page navigation example ">
                        <ul class="pagination justify-content-center mt-2 ">
                            <li class="page-item previous disabled">
                                <a class="page-link" href="#">
                                    <i class="bx bx-chevron-left"></i>
                                </a>
                            </li>
                            <li class="page-item active" aria-current="page"><a class="page-link" href="#">1</a></li>
                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item"><a class="page-link" href="#">4</a></li>
                            <li class="page-item"><a class="page-link" href="#">5</a></li>
                            <li class="page-item"><a class="page-link" href="#">6</a></li>
                            <li class="page-item"><a class="page-link" href="#">7</a></li>
                            <li class="page-item next"><a class="page-link" href="#">
                                <i class="bx bx-chevron-right"></i>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>

            </div>
        </div>
    </div>
</section>
@endsection

@section('vendor-scripts')
<script src="{{asset('vendors/js/pickers/pickadate/picker.js')}}"></script>
<script src="{{asset('vendors/js/pickers/pickadate/picker.date.js')}}"></script>
<script src="{{asset('vendors/js/pickers/pickadate/picker.time.js')}}"></script>
@endsection

@section('page-scripts')
<script>
    
    $('.pickadate-months-year').pickadate({
        selectYears: true,
        selectMonths: true
    });
</script>
@endsection