@extends('layouts.default')

@section('title')
    Visit  List
@endsection

@section('header-style')
    <!--Load custom style link or css-->

@endsection

@section('content')
    <!-- List table -->
    <div class="card">
        <div class="card-header border-bottom bg-primary bg-light">
            <h4 class="card-title">Visit List</h4>
        </div>
        <div class="card-content mt-2">
            <div class="card-body">
                <div class="card-content  border-bottom  pb-2">
                    <form method="POST" id="search-form" role="form">

                        <div class="row">
                            <div class="col-md-4">
                                <div class="row my-1">
                                    <div class="col-md-3"><label>Visit Name</label></div>
                                    <div class="col-md-9">
                                        <input type="text" name="visit_name" class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="row my-1">
                                    <div class="col-md-3"><label>Visit Type</label></div>
                                    <div class="col-md-9">
                                        <select class="form-control visit_type" name="visit_type">
                                            <option value="">Select Visit Type</option>
                                            @foreach($activities as $activity)
                                                <option
                                                    value="{{$activity->activity_id}}">{{$activity->activity_name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="row my-1">
                                    <div class="col-md-3"><label>Status</label></div>
                                    <div class="col-md-9">
                                        <select class="form-control status" name="status">
                                            <option value="">Select Status</option>
                                            <option value="P">Pending</option>
                                            <option value="A">Approved</option>
                                            <option value="C">Completed</option>
                                            <option value="R">Reject</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="row my-1">
                                    <div class="col-md-3"><label>From Date</label></div>
                                    <div class="col-md-9">
                                        <div class="input-group date datePiker" id="from-date"
                                             data-target-input="nearest">
                                            <input type="text" autocomplete="off"
                                                   class="form-control datetimepicker-input"
                                                   value="{{ old('from_date' ) }}" name="from_date"
                                                   data-toggle="datetimepicker"
                                                   data-target="#from-date" onautocomplete="off"/>
                                            <div class="input-group-append" data-target="#from-date"
                                                 data-toggle="datetimepicker">
                                                <div class="input-group-text"><i class="bx bxs-calendar"></i></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="row my-1">
                                    <div class="col-md-3"><label>To date</label></div>
                                    <div class="col-md-9">
                                        <div class="input-group date datePiker" id="to-date"
                                             data-target-input="nearest">
                                            <input type="text" autocomplete="off"
                                                   class="form-control datetimepicker-input"
                                                   value="{{ old('to_date' ) }}" name="to_date"
                                                   data-toggle="datetimepicker"
                                                   data-target="#to-date" onautocomplete="off"/>
                                            <div class="input-group-append" data-target="#to-date"
                                                 data-toggle="datetimepicker">
                                                <div class="input-group-text"><i class="bx bxs-calendar"></i></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="my-1 d-flex justify-content-end col p-0">
                                <button type="submit" class="btn btn btn-dark shadow mr-1 mb-1">Search</button>
                                <button type="reset" class="btn btn btn-outline-dark mr-1 mb-1">Reset</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="table-responsive">
                    <table class="table table-sm datatable mdl-data-table dataTable">
                        <thead>
                        <tr>
                            <th>SL</th>
                            <th>Visit Type</th>
                            <th>Visit Name</th>
                            <th>Visit Time</th>
                            <th>Unavailable Time</th>
                            <th>Country</th>
                            <th>Status</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!--/ List table -->

@endsection

@section('footer-script')

    <!--Load custom script-->
    <script>
        $(document).ready(function () {
            var oTable = $('.datatable').DataTable({
                processing: true,
                serverSide: true,
                pageLength: 20,
                bFilter: false,
                lengthMenu: [[5, 10, 20, -1], [5, 10, 20, 'All']],
                ajax: {
                    type:'POST', headers:{  'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    url: '{{ route('chairmanVisitData') }}',
                    data: function (d) {
                        d.visit_name = $('input[name=visit_name]').val();
                        d.visit_type = $('.visit_type').val();
                        d.from_date = $('input[name=from_date]').val();
                        d.to_date = $('input[name=to_date]').val();
                        d.priority = $('.priority_id').val();
                        d.status = $('.status').val();
                    }
                },
                "columns": [
                    {"data": 'DT_RowIndex', "name": 'DT_RowIndex' },
                    {"data": "activity_type.activity_name"},
                    {"data": "visit_name"},
                    {"data": "visit_time"},
                    {"data": "unavailable_time"},
                    {"data": "country"},
                    {"data": "status"},
                ],

                language: {
                    paginate: {
                        next: '<i class="bx bx-chevron-right">',
                        previous: '<i class="bx bx-chevron-left">'
                    }
                }
            });
            $('#search-form').on('submit', function (e) {
                oTable.draw();
                e.preventDefault();
            });
        });
    </script>
@endsection