@extends('layouts.default')

@section('title')
    Board Meeting Request
@endsection

@section('header-style')

@endsection

@section('content')
    <div class="card" style="display: block">
        <div class="card-header border-bottom">
            <h6 class="float-left text-uppercase">{{isset($data->meeting_req_id)?' Edit' : 'Add '}} Board Meeting Request</h6>
        </div>
        <div class="card-body ">
            <div class="card-text">
                <form method="POST" action="{{route(isset($data->meeting_req_id)?'boardMeetingRequestUpdate':'boardMeetingRequestAdd')}}" id="request_form">
                    {!! csrf_field() !!}
                    <div class="row">
                        <input type="hidden" name="meeting_req_id" id="meeting_req_id" value="{{ old('meeting_req_id',isset($data->meeting_req_id)?$data->meeting_req_id:'') }}">
                        <div class="col-md-6">
                            <div class="row form-group my-1">
                                <div class="col-md-2"><label class="input-required" for="subject">Subject</label></div>
                                <div class="col-md-10">
                                    <input type="text" name="subject" id="subject" placeholder="Subject" value="{{ old('subject',isset($data->subject)?$data->subject:'') }}" class="form-control text-uppercase" autocomplete="off">
                                    <input type="hidden" name="status" id="status" class="form-control text-uppercase" value="P">
                                    @if ($errors->has('subject'))
                                        <span class="help-block">{{ $errors->first('subject') }}</span>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="row my-1">
                                <div class="col-md-2"><label for="description">Description</label></div>
                                <div class="col-md-10">
                                            <textarea id="description" name="description" placeholder="Description" rows="3"  wrap="soft" class="form-control ext-uppercase">{{ old('description', isset($data->description)?$data->description:'') }}</textarea>
                                    @if ($errors->has('description'))
                                        <span class="help-block">{{ $errors->first('description') }}</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row my-1 ">
                        <div class="col-md-12 d-flex justify-content-end">
                            <button type="submit" name="save" class="btn btn btn-dark shadow mr-1 mb-1">{{isset($data->meeting_req_id)?'Update': 'Save'}}</button>
                            @if(isset($data->meeting_req_id))
                                <a href="{{route('boardMeetingRequest')}}"><button type="button" class="btn btn btn-outline-dark  mb-1 ">Cancel</button></a>
                            @else
                                <button type="reset" class="btn btn btn-outline-dark  mb-1 ">Reset</button>
                            @endif
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="card">
        <h6 class="card-header border-bottom text-uppercase">Board Meeting Request List</h6>
        <div class="card-body">
            <div class="card-text">
                <form method="GET" id="search-form" role="form" style="display: none">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label for="search_subject" class="col-md-2 col-form-label">Subject</label>
                                <div class="col-md-10">
                                    <input type="text" id="search_subject" name="subject2" placeholder="Enter subject" class="form-control">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group row">
                                <label for="search_status" class="col-md-4 col-form-label">Request Status</label>
                                <div class="col-md-8">
                                    <select id="search_status" class="form-control status" name="status">
                                        <option value="">-- Please select an option --</option>
                                        <option value="A">Approved</option>
                                        <option value="I">Inactive</option>
                                        <option value="P">Pending</option>
                                        <option value="C">Complete</option>
                                        <option value="R">Rejected</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <button type="submit" class="btn btn-primary" onclick="loadTable()">Search</button>
                            <button type="reset" class="btn btn btn-outline-dark">Reset</button>
                        </div>
                    </div>
                </form>
                <div class="table-responsive requiredPerson">
                    <table class="table table-sm datatable mdl-data-table dataTable">
                        <thead>
                        <tr>
                            <th>SL</th>
                            <th>SUBJECT</th>
                            <th>EMPLOYEE</th>
                            <th>DEPARTMENT</th>
                            <th>REQUESTED AT</th>
                            <th>REQUEST STATUS</th>
                            <th>MEETING STATUS</th>
                            <th>ACTIONS</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
@endsection
@section('footer-script')
    <script>
        $(document).ready(function () {
            var oTable = $('.datatable').DataTable({
                processing: true,
                serverSide: true,
                pageLength: 10,
                scrollY: 50,
                initComplete: function (settings, json) {
                    $('body').find('.dataTables_scrollBody').css("height", "auto");
                    $('body').find('.dataTables_scrollBody').css("max-height", "400px");
                },
                lengthMenu: [[5, 10, 20, -1], [5, 10, 20, 'All']],
                ajax: {

                    url: '{{ route('all-request-list') }}',
                    type:'POST', headers:{  'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    data: function (d) {
                        d.subject = $('input[name=subject2]').val().toUpperCase();
                        d.request_user_id = $('.request_user_id2').val();
                        d.status = $('.status').val();
                    },
                    "datatype": "json",
                },
                "columns": [
                    {"data": 'DT_RowIndex', "name": 'DT_RowIndex',  orderable: false, searchable: false},
                    {"data": "subject"},
                    {"data": "employee", orderable: false, searchable: false},
                    {"data": "department", orderable: false, searchable: false},
                    {"data": "created_at"},
                    {"data": "status"},
                    {"data": "meeting_status"},
                    {data: 'action', name: 'action', 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();
            });


        });

    </script>
@endsection