@extends('layouts.default')

@section('title')
    Appointment Request 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">Appointment Request 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>Agenda</label></div>
                                    <div class="col-md-9">
                                        <input type="text" name="agenda" class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="row my-1">
                                    <div class="col-md-3"><label>Appointment Type</label></div>
                                    <div class="col-md-9">
                                        <select class="form-control appointment_type" name="appointment_type">
                                            <option value="">Select Meeting</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>Priority</label></div>
                                    <div class="col-md-9">
                                        <select class="form-control priority_id" name="priority_id">
                                            <option value="">Select Priority</option>
                                            @foreach($priorities as $priority)
                                                <option
                                                    value="{{$priority->priority_id}}">{{$priority->priority_name}}</option>
                                            @endforeach
                                        </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 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>
                        <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>
            <div class="card-body card-dashboard">
                <div class="table-responsive">
                    <table class="table table-sm datatable">
                        <thead>
                        <tr>
                            <th>SL</th>
                            <th>Request By</th>
                            <th>Agenda</th>
                            <th>Date</th>
                            <th>Start Time</th>
                            <th>End Time</th>
                            <th>Duration</th>
                            <th>Priority</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,
                lengthMenu: [[5, 10, 20, -1], [5, 10, 20, 'All']],
                bFilter: false,
                ajax: {
                    type:'POST', headers:{  'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    url: '{{ route('appointmentGetDataRequest') }}',
                    data: function (d) {
                        d.agenda = $('input[name=agenda]').val();
                        d.appointment_type = $('.appointment_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": "requested_by"},
                    {"data": "agenda"},
                    {"data": "appointment_date"},
                    {"data": "apointmnet_start_time"},
                    {"data": "apointmnet_end_time"},
                    {"data": "duration"},
                    {"data": "priority"},
                    {"data": "status"}
                ]
            });
            $('#search-form').on('submit', function (e) {
                oTable.draw();
                e.preventDefault();
            });
        });
    </script>
@endsection