@extends('layouts.default')

@section('title')
    Decision 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">Decision 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>Decision Number</label></div>
                                    <div class="col-md-9">
                                        <select class="form-control decision_number select2" name="decision_number">
                                            <option value="">Select Decision Number</option>
                                            @foreach($decision_numbers as $data)
                                                <option
                                                    value="{{$data->decision_number}}">{{$data->decision_number}}</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>Nothi No</label></div>--}}
{{--                                    <div class="col-md-9">--}}
{{--                                        <input class="form-control" name="nothi_no" id="nothi_no" type="text">--}}
{{--                                    </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/decision-list')}}">
                                    <button type="reset" 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>Decision No</th>
                            <th>Agenda</th>
                            <th>Nothi No</th>
                            <th>Date</th>
                            <th>Attachment</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: true,
                lengthMenu: [[5, 10, 20, -1], [5, 10, 20, 'All']],
                ajax: { url: '{{ route('decisionDataTable') }}',
                    type:'POST', headers:{  'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    "datatype": "json",
                    data: function (d) {
                        d.decision_number = $('.decision_number').val();
                        d.from_date = $('input[name=from_date]').val();
                        d.to_date = $('input[name=to_date]').val();
                        d.nothi_no = $('#nothi_no').val();
                    }
                },
                "columns": [
                    {"data": 'DT_RowIndex', "name": 'DT_RowIndex',  orderable: false, searchable: false},
                    {"data": "decision_number", name: 'decision_number',  orderable: false, searchable: true},
                    {"data": "agenda", name: 'agenda',  orderable: false, searchable: true},
                    {"data": "nothi_no", name: 'nothi_no',  orderable: false, searchable: true},
                    {"data": "meeting_date", name: 'meeting_date',  orderable: false, searchable: false},
                    {"data": "attachment", name: 'attachment',  orderable: false, searchable: false},
                ],

                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) {
                 $(".decision_number").val('').trigger('change')
                 $('input[name=from_date]').val('');
                 $('input[name=to_date]').val('');
                 $('#nothi_no').val('');
                oTable.draw();
                e.preventDefault();
            });
        });
    </script>
@endsection