@extends('layouts.app')

@section('content')

    @include('layouts.messages.flush-message')

    <!--End Bread Crumb And Title Section -->

    <div class="m-portlet m-portlet--mobile">


        @component('layouts.breadcrumb')

            @slot('heading') {{$project}} Reservations @endslot

        @endcomponent


        <div class="m-portlet__body">

            <div class="row">
                <div class="col-sm-6  mb-5 mt-3">
                    <label>From date: </label>
                    <input class="datepicker" placeholder="From date" name="startDate" id="startDate"
                           data-date-format="mm/dd/yyyy">
                </div>

                <div class="col-sm-6  mb-5 mt-3">
                    <label>To date: </label>
                    <input class="datepicker" placeholder="From date" name="endDate" id="endDate"
                           data-date-format="mm/dd/yyyy">
                </div>

            </div>
            <!--begin: Datatable -->

            <table class="table table-striped- table-bordered table-hover table-checkable" id="datatable">

                <thead>

                <tr>
                    <th>Id</th>
                    <th>Project</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Mobile</th>
                    <th>Country</th>
                    <th>Created At</th>
                </tr>

                </thead>

            </table>

        </div>

    </div>



@endsection

@section('js')

    @include('layouts.datatable')
    <script>

        var table = $('#datatable').DataTable({
            dom: 'Bfrtip',
            processing: true,
            serverSide: true,
            pageLength: 100,
            order: [0, 'id'],
            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],

            ajax: {
                url: '{!! route('reservationsList',[$project]) !!}',
                type: "GET",
                data: function (d) {
                    // read start date from the element
                    d.from = $('#startDate').val();
                    // read end date from the element
                    d.to = $('#endDate').val();
                }
            },
            columns: [
                {
                    data: 'DT_RowIndex',
                    orderable: false,
                },
                {data: 'project', name: 'project'},
                {data: 'name', name: 'name'},
                {data: 'email', name: 'email'},
                {data: 'phone', name: 'phone'},
                {data: 'country', name: 'country'},
                {data: 'created_at', name: 'created_at'},
            ],
            buttons: [
                'copy', 'excel', {extend: 'pdf',text: 'PDF',exportOptions: {columns: ':visible'},
                    customize: function (doc) {
                        doc.defaultStyle.font = 'Arial';
                        doc.defaultStyle.direction = 'rtl'},},
            ],

        });

        // set a common class for both id
        $('.datepicker').datepicker({
            dateFormat: 'yy-mm-dd'
        });

        // set on change datepicker
        $('.datepicker').on('change', function () {
            from = $("#startDate").val();
            to = $("#endDate").val();
            $('#datatable').DataTable().draw(false);
        });

    </script>

@endsection