@extends('layouts.default')

@section('title')
    Meeting  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">Meeting 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>Meeting Name</label></div>
                                    <div class="col-md-9">
                                        <input type="text" name="meeting_name" class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="row my-1">
                                    <div class="col-md-3"><label>Meeting Type</label></div>
                                    <div class="col-md-9">
                                        <select class="form-control meeting_type" name="meeting_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>
                                <a href="{{url('/meeting/setup-data-list')}}">
                                    <button type="button" id="resetBtn" class="btn btn btn-outline-dark mr-1 mb-1">Reset</button>
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="table-responsive">
                    <table class="table table-sm datatable mdl-data-table dataTable">
                        <thead>
                        <tr>
                            <th>SL</th>
                            <th>Meeting Type</th>
                            <th>Meeting Name</th>
                            <th>Meeting Date</th>
                            <th>Start Time</th>
                            <th>End Time</th>
                            <th>Chairperson</th>
                            <th>Location</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,
                bFilter: false,
                lengthMenu: [[5, 10, 20, -1], [5, 10, 20, 'All']],
                ajax: { url: '{{ route('meetingRequestDataSetup') }}',
                    type:'POST', headers:{  'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    data: function (d) {
                        d.meeting_name = $('input[name=meeting_name]').val();
                        d.meeting_type = $('.meeting_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();
                    },
                    "datatype": "json",
                },
                "columns": [
                    {"data": 'DT_RowIndex', "name": 'DT_RowIndex',  orderable: false, searchable: false},
                    {"data": "activity_type.activity_name",  orderable: false, searchable: false},
                    {"data": "meeting_name"},
                    {"data": "meeting_date"},
                    {"data": "start_time"},
                    {"data": "end_time"},
                    {"data": "chairman",  orderable: false, searchable: false},
                    {"data": "meeting_location"},
                    {"data": "priority",  orderable: false, searchable: false},
                    {"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();
            });

            /*$('#resetBtn').click( function (e) {
                $('input[name=meeting_name]').val('');
                $('.meeting_type').val('');
                $('input[name=from_date]').val('');
                $('input[name=to_date]').val('');
                $('.priority_id').val('');
                $('.status').val('');
                oTable.draw();
                e.preventDefault();
            });*/
        });
    </script>
@endsection