@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">Orders   &nbsp;&nbsp;&nbsp;</h5>
        <div  class="card-body">

            <form id="filterForm">
                @csrf
                @method('POST')
                <div class="row mb-3">
                    <div class="col-md-2">
                        <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-2">
                        <label for="date_to" class="form-label">Date To :</label>
                        <input type="text" class="form-control" id="date_to" name="date_to" />
                    </div>
                    <div class="col-md-3">
                        <label for="date_from" class="form-label">Order Status :</label>
                        <select id="statuss" name="status" class="form-select">
                            <option value=""> --- Select Status ---</option>
                            <option value="PENDING">Pending</option>
                            <option value="CONFIRMED">Confirmed</option>
                            <option value="IN_PROGRESS">In Progress</option>
                            <option value="SHIPPED">Shipped</option>
                            <option value="DELIVERED">Delivered</option>
                            <option value="CANCELLED">Cancelled</option>
                        </select>
                    </div>
                    <div class="col-md-5">
                        <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>
                        <button type="button" id="export" class="btn btn-primary mt-4"><i class="bx bx-download"></i></button>
                        <!-- <a href="{{ route('orders.export') }}" type="button" id="export" class="btn btn-primary mt-4"><i class="bx bx-download"></i></a> -->
                    </div>
                </div>
            </form>

            <div class="table-responsive text-nowrap">
                <table class="table table-bordered data-table" id="order_table">
                <thead>
                    <tr>
                        <th>Sr No.</th>
                        <th>Name</th>
                        <th>Invoice Number</th>
                        <th>Total Amount</th>
                        <th>Discount Code</th>
                        <th>Discount Type</th>
                        <th>Discount Price</th>
                        <th>GST</th>
                        <th>Shipping Charges</th>
                        <th>Status</th>
                        <th>Create At</th>
                        <th>View</th>
                    </tr>
                </thead>
                <tbody>
                    
                </tbody>
                </table>
            </div>
        </div>
    </div>
    </div>
</div>

@endsection

@section('script')
<script type="text/javascript">

    var table = $('#order_table').DataTable({
        processing: true,
        serverSide: true,
        stateSave: true,
        stateSaveParams: function(settings,data){
        data.date_from = $('#date_from').val()
        data.date_to = $('#date_to').val()
        data.status = $('#statuss').val()
        },
        stateLoadParams: function(settings,data){
            $('#date_from').val(data.date_from)
            $('#date_to').val(data.date_to)
            $('#statuss').val(data.status)
        },
        ajax: {
            url: "{{ route('orders.index') }}",
            "data": function ( d ) {
                d.date_from = $('#date_from').val();
                d.date_to = $('#date_to').val();
                d.status = $('#statuss').val();
            }
        },
        order: [[0, 'desc']],
        columns: [
            {data: 'DT_RowIndex', name: 'id'},
            {data: 'name', name: 'users.full_name'},
            {data: 'invoice_number', name: 'invoice_number'},
            {data: 'total_amount', name: 'total_amount'},
            {data: 'discount_code', name: 'discount_code'},
            {data: 'discount_type', name: 'discount_type'},
            {data: 'discount_price', name: 'discount_price'},
            {data: 'gst_amount', name: 'gst_amount'},
            {data: 'shipping_charge', name: 'shipping_charge'},
            {data: 'status', name: 'status'},
            {data: 'created_at', name: 'created_at'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ]
    });

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

    $('#reset').click(function(){
        $('#date_from').val('');
        $('#date_to').val('');
        $('#statuss').val('');
        $('#order_table').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);
        }
    });

    $('#export').click(function() {
        var formData = $('#filterForm').serialize(); 
        var date = new Date();
        var today_date = date.getDate()+"/"+(date.getMonth()+1)+"/"+date.getFullYear();
        $.ajax({
            url: '{{ route("orders.export") }}',
            method: 'POST',
            data: formData,
            success: function(response) {
                var link = document.createElement('a');
                link.href = 'data:text/csv;charset=utf-8,' + encodeURIComponent(response);
                link.download = 'orders_'+ today_date +'.csv';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
        });
    });

</script>
@endsection