@extends('app.dashboard')

@section('content')
<div class="page-wrapper">
    <!-- Page Content-->
    <div class="page-content pr-5 pl-5">
        <div class="container-fluid mt-2">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card" style="border-top:4px solid blue">
                            <div class="card-body">
                                <h4> Data Range Order Filter </h4>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="card">
                                        <div class="card-body">
                                            <form method="POST" action="{{route('date_range_order_report')}}" id="order_form">
                                                @csrf
                                                <div class="row mb-2">
                                                    <div class="col-lg-3">
                                                        <label><b>Select Date Range</b><span
                                                                style="color:red;">&nbsp;*</span>
                                                        </label><br>
                                                        <input type="text" class="form-control datepick"
                                                            name="date_range" id="daterange1">
                                                    </div>
                                                    <div class="col-lg-1">
                                                        <input class="btn btn-success" style="margin-top:28px" type="submit" name="filter"
                                                            id="filter" value="Get Data" />
                                                    </div>
                                                    <div class="col-lg-1">
                                                        <input class="btn btn-success" style="margin-top:28px" type="submit" name="download"
                                                            id="download" value="Export to Excel" />
                                                    </div>
                                                </div>
                                            </form>
                                            <div class="p-4 table-responsive">
                                                <table id="datatable" class="table table-bordered nowrap"
                                                    style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                                    <thead>
                                                        <tr>
                                                            <th>APP #</th>
                                                            <th>Property Address</th>
                                                            <th>Property City</th>
                                                            <th>State</th>
                                                            <th>Status</th>
                                                            <th>Received at</th>
                                                            <th>Completed at</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
$(document).ready(function () {
    var dataTable = $('#datatable').DataTable();

    // Handle form submission with AJAX for "Get Data" button
    $('#filter').click(function (e) {
        e.preventDefault();
        submitFormWithAjax();
    });

    // Handle normal form submission for "Export to Excel" button
    $('#download').click(function () {
        // Just let the form submit normally
    });

    function submitFormWithAjax() {
        let date_range = $('#daterange1').val();
        $.ajax({
            type: 'POST',
            url: $('#order_form').attr('action'),
            data: {
                _token: "{{csrf_token()}}",
                date_range: date_range,
                filter: "filter"
            },
            success: function (response) {
                dataTable.clear().draw();
                response.orders.forEach(function (order) {
                    dataTable.row.add([
                        order.order_number,
                        order.property_addressline1,
                        order.property_city,
                        order.short_code,
                        order.status_type,
                        order.created_at ? new Date(order.created_at).toLocaleDateString() : null,
                        order.completion_date ? new Date(order.completion_date).toLocaleDateString() : null,
                    ]).draw();
                });
            },
            error: function (error) {
                console.error('Error:', error);
            }
        });
    }
});
</script>
<!-- end page-wrapper -->
@endsection