@extends('layouts.app')

@section('content')

<div class="card-header"><span><a href="{{ route('dashboard') }}">{{ __('Dashboard') }}</a></span> >
    <span>{{ __('Form Responses') }}</span></div>
<div class="card-body dashboard-card">

    <!------- Filter data by Datewise----->
    <div class="row search-form">
        <div class="col-md-10">

            <form id="form" action="{{ route('formdata.search') }}" method="POST">
                @csrf
                <div class="row">
                    <div class="ml-2">
                        <span>Select Range</span>
                    </div>
                    <div class="ml-2">
                        <input type="date" name="from_date" id="from_date" class="form-control"
                            value="{{ $from_date??'' }}" />
                    </div>

                    <div class="ml-2">
                        <input type="date" name="to_date" id="to_date" class="form-control" value="{{ $to_date??'' }}"
                            />
                    </div>
                    <div class="ml-2">
                        <button type="submit" class="btn">Search</button>
                    </div>
                    <div class="ml-2">
                        <button type="button" class="btn refresh_btn"><i class="fa fa-refresh" aria-hidden="true"></i>
                        </button>
                    </div>
                </div>
            </form>

        </div>
        <!------- Export data in table----->
        <div class="col-md-2">
            <form id="form" action="{{ route('formdata.export') }}" method="get">
                @csrf
            <input type="hidden" name="from_date" id="export_from_date" class="form-control"
                            value="{{ $from_date??'' }}"  />
            <input type="hidden" name="to_date" id="export_to_date" class="form-control" value="{{ $to_date??'' }}"
                             />
            <button type="submit" class="btn" id="export_btn">Export</button>
            </form>
        </div>
    </div>


    <!------- Data table----->
    <div class="row mt-4">
        <div class="col-12 table-responsive">
            <table class="table table-bordered datatable">
                <thead>
                    <tr>
                        <th width="3%">Sl.No</th>
                        <th width="7%">UniqueID</th>
                        <th width="25%">Name</th>
                        <th width="15%">Phone</th>
                        <th width="15%">Q-ID</th>
                        <th width="20%">Email</th>
                        <th width="15%">Created At</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>


@endsection

@section('scripts')
<script type="text/javascript">
    var _token = $('meta[name="csrf-token"]').attr('content');

    $(function () {

        var from_date = $('#from_date').val();
        var to_date = $('#to_date').val();

        var table = $('.datatable').DataTable({
            processing: true,
            serverSide: true,

            ajax: {
                "url": "{{ route('formdata.post') }}",
                "dataType": "json",
                method: "POST",
                data: {
                    from_date: from_date,
                    to_date: to_date,
                    _token: _token
                },
            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'unique_id',
                    name: 'unique_id'
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'phone',
                    name: 'phone'
                },
                {
                    data: 'q_id',
                    name: 'q_id'
                },
                {
                    data: 'email',
                    name: 'email'
                },
                {
                    data: 'created_date',
                    name: 'created_date'
                },
                // {
                //     data: 'action',
                //     name: 'action',
                //     orderable: false,
                //     searchable: false
                // },
            ],
            'columnDefs': [
                    {
                        "targets": 0, 
                        "className": "text-center"
                }
            ]
        });

        // Refresh date range
        $( ".refresh_btn" ).on( "click", function() {
            $('#from_date').val("");
            $('#to_date').val("");
        });

    });

</script>
@endsection