@include('Admin.layouts.app')
@include('Admin.layouts.sidebar')

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


@section('title', 'Orders')

<!-- Begin Page Content -->
<div class="container-fluid">

    <!-- Page Heading -->
    <h1 class="page-title h3 mb-2 text-gray-800">Orders
        <a href="{{route('admin.order.form')}}" class="btn-gazna"
           style="text-decoration:none;height:50px;font-size:14px;">Add Order</a>
    </h1>

    <!-- DataTales Example -->
    <div class="innerpagedetails orderListingPage card shadow mb-4">
        <div class="card-header py-3">
            <h6>Orders Listings</h6>
        </div>
        @if(session('done'))
            <div class="alert alert-success">
                {{ session('done') }}
            </div>
        @endif


        <div class="card-body">
            <div class="row dFilter">
                <div class="col-lg-3">
                    <div class="form-group" style="margin: 10px 0;">
                        <strong>Date Filter:</strong>
                        <input type="text" name="daterange" class="form-control" value=""/>
                    </div>
                </div>
                <div class="col-lg-9">
                    <button class="btn-gazna filter mt-4"
                            style="text-decoration:none;width:90px; height:50px; font-size:14px; margin: 10px 0;">Filter
                    </button>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-bordered" id="laravel_datatable" width="100%" cellspacing="0">
                    <thead>
                    <tr>
                        <th>S.No</th>
                        <th>Order #</th>
                        <th>Name</th>
                        <th>Address</th>
                        <th>Phone</th>
                        <th>Amount</th>
                        <th>Status</th>
                        <th>Date</th>
                        <th width="105px">Action</th>

                    </tr>
                    </thead>


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

</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->


<script src="//code.jquery.com/jquery-3.5.1.js"></script>
<script src="//cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>
<!-- jQuery UI -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script>
    $(document).ready(function () {
        $('input[name="daterange"]').daterangepicker({
            startDate: moment(),
            endDate: moment()
        });
        var table = $('#laravel_datatable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('admin.orders') }}",
                data: function (d) {
                    d.from_date = $('input[name="daterange"]').data('daterangepicker').startDate.format('YYYY-MM-DD');
                    d.to_date = $('input[name="daterange"]').data('daterangepicker').endDate.format('YYYY-MM-DD');
                }
            },
            columns: [
                {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                {data: 'id', name: 'id'},
                {data: 'customer_name', name: 'customer_name', searchable: true},
                {data: 'delivery_address', name: 'delivery_address', searchable: true},
                {data: 'phone', name: 'phone', searchable: true},
                {data: 'total', name: 'total', searchable: true},
                {data: 'order_status', name: 'order_status', searchable: true},
                {data: 'created_at', name: 'created_at', searchable: true},
                {data: 'action', name: 'action', orderable: false, searchable: false}


            ]
        });


        // Custom search event for delivery_address column
        $('#data-table_filter input[type="search"]').on('keyup', function () {
            table.column(2).search(this.value).draw();
            table.column(3).search(this.value).draw();
        });
        $(".filter").click(function () {
            table.draw();
        });
    });
</script>

@include('Admin.layouts.footer')
@include('Admin.layouts.modal')