@extends('admin.admin_app')

@section('content')
<div class="content-wrapper">

    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="card">
        <h5 class="card-header">Contact Us Requests   &nbsp;&nbsp;&nbsp;
        </h5>
        <div  class="card-body">

            <form>
                <div class="row mb-3">
                    <div class="col-md-3">
                        <label for="date_from" class="form-label">Date From :</label>
                        <input type="text" class="form-control" id="date_from" name="date_from" />
                    </div>
                    <div class="col-md-3">
                        <label for="date_from" class="form-label">Date To :</label>
                        <input type="text" class="form-control" id="date_to" name="date_to" />
                    </div>
                    <div class="col-md-4">
                        <button type="button" id="get_data" name="submit" class="btn btn-primary mt-4">Apply</button>
                        <button type="button" id="reset" class="btn btn-primary mt-4"><i class="bx bx-reset"></i></button>
                    </div>
                </div>
            </form>

            <div class="table-responsive text-nowrap">
                <table class="table table-bordered data-table" id="request">
                
                <thead>
                    <tr>
                        <th>Sr No.</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Message</th>
                        <th>Create At</th>
                    </tr>
                </thead>
                <tbody>
                    
                </tbody>
                </table>
            </div>
        </div>
    </div>
    </div>
</div>

<div class="modal fade" id="view_modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <!-- <h5 class="modal-title" id="modalCenterTitle">Subject</h5> -->
                <!-- <button
                type="button"
                class="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
                ></button> -->
            </div>
            <div class="modal-body">
                <h5>Subject</h5>
                <p id="fetch_sub"></p>
                
                <h5>Message</h5>
                <p id="fetch_msg"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                Close
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script type="text/javascript">
    
    var table = $('#request').DataTable({
        processing: true,
        serverSide: true,
        stateSave: true,
        stateSaveParams: function(settings,data){
            data.date_from = $('#date_from').val()
            data.date_to = $('#date_to').val()
        },
        stateLoadParams: function(settings,data){
            $('#date_from').val(data.date_from)
            $('#date_to').val(data.date_to)
        },
        "ajax": {
            "url" : "{{ route('users.contact') }}",
            "data": function ( d ) {
                d.date_from = $('#date_from').val();
                d.date_to = $('#date_to').val();
            }
        },
        order: [[0, 'desc']],
        columns: [
            {data: 'DT_RowIndex', name: 'id'},
            {data: 'name', name: 'name'},
            {data: 'email', name: 'email'},
            {data: 'sub', name: 'sub'},
            {data: 'created_at', name: 'created_at'}
        ]
    });

    $(document).on('click', '#get_data', function () {
        table.ajax.reload();
    });

    $(document).on('click','#reset', function(){
        $('#date_from').val('');
        $('#date_to').val('');
        $('#request').dataTable().fnDraw();
    })

    $("#date_from").datepicker({
        numberOfMonths: 1,
        dateFormat: "yy-mm-dd",
        onSelect: function (selected) {
            var dt = new Date(selected);
            dt.setDate(dt.getDate() + 1);
            $("#date_to").datepicker("option", "minDate",dt);
        }
    });
    $("#date_to").datepicker({
        numberOfMonths: 1,
        dateFormat: "yy-mm-dd",
        onSelect: function (selected) {
            var dt = new Date(selected);
            dt.setDate(dt.getDate() - 1);
            $("#date_from").datepicker("option", "maxDate",dt);
        }
    });

    $(document).on('click', '#show_detail', function(event) {
    var sid = $(this).attr('data-id');
    $.ajax({
        url : "{{ route('contact.subject') }}",
        type: "POST",
        data : {sid:sid,"_token": "{{ csrf_token() }}"},
        dataType : 'JSON',
        success: function(result) {
            $('#view_modal').modal("show");
            $('#fetch_sub').html(result.subject.subject).show();
            $('#fetch_msg').html(result.subject.message).show();
        }
    });
  });
</script>
@endsection