@extends('layout.master', ['headerTitle' => 'Order List'])

@section('style')
    <link href="{{ asset('assets/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.2.0/sweetalert2.min.css">
@endsection

@section('body')
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <div class="container-xxl" id="kt_content_container">
            <div class="card card-flush">
                <div class="card-header pt-7" id="kt_chat_contacts_header">

                </div>
                <div class="card-body pt-5">
                    <div class="row">
                        <div class="col-3">
                            <label class="fs-6 fw-bold form-label mt-3">
                                Start Date
                            </label>
                            <input type="date" id="start_date" class="form-control" name="start_date" />
                        </div>
                        <div class="col-3">
                            <label class="fs-6 fw-bold form-label mt-3">
                                End Date
                            </label>
                            <input type="date" id="end_date" class="form-control" name="start_date" />
                        </div>
                        <div class="col-3">
                            <label class="fs-6 fw-bold form-label mt-3">
                                Company
                            </label>
                            <select class="form-select form-select-solid" id="company_id" name="company_id">
                                <option value="">Select Company</option>
                                @foreach ($companies as $company)
                                    <option value="{{ $company->id }}">{{ $company->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-3">
                            <label class="fs-6 fw-bold form-label mt-3">
                                Status
                            </label>
                            <select class="form-select form-select-solid" id="status" name="status">
                                <option value="">Select Status</option>
                                @php
                                    $statuses = [
                                        ['id' => 0, 'name' => 'Pending'],
                                        ['id' => 1, 'name' => 'In progress'],
                                        ['id' => 2, 'name' => 'Completed'],
                                        ['id' => 3, 'name' => 'Disputed'],
                                    ];
                                @endphp
                                @foreach ($statuses as $status)
                                    <option value="{{ $status['id'] }}">{{ $status['name'] }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <table class="table align-middle table-row-dashed fs-6 gy-5" id="listDataTable">
                        <thead>
                            <tr
                                class="text-start
                            text-muted fw-bolder fs-7 text-uppercase gs-0">
                                <th>Order ID</th>
                                <th>Company Name</th>
                                <th>Date Placed</th>
                                <th>Status</th>
                                <th>Estimated Completion Time</th>
                                <th>Container Details</th>
                            </tr>
                        </thead>
                        <tbody class="fw-bold text-gray-600">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="orderModal" tabindex="-1" aria-labelledby="orderModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="orderModalLabel">Order Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script src="{{ asset('assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
    <script src="{{ asset('assets/js/custom/apps/ecommerce/sales/listing.js') }}"></script>
    <script src="{{ asset('assets/js/widgets.bundle.js') }}"></script>
    <script src="{{ asset('assets/js/custom/widgets.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.2.0/sweetalert2.all.min.js"></script>

    <script>
        var _token = "{{ csrf_token() }}";
        $(document).ready(function() {
            load_datatable();
        });

        function clear_data_table(ele) {
            $(ele).DataTable().clear().destroy();
        }

        function reload_data_table(ele) {
            $(ele).DataTable().ajax.reload();
        }

        $('#start_date, #end_date, #company_id, #status').on('change', function() {
            clear_data_table("#listDataTable");
            setTimeout(() => {
                load_datatable();
            }, 500);
        });

        function load_datatable() {
            var start_date = $('#start_date').val();
            var end_date = $('#end_date').val();
            var company_id = $('#company_id').val();
            var status = $('#status').val();

            $('#listDataTable').DataTable({
                "pageLength": 50,
                "lengthMenu": [10, 20, 50, 100, 200],
                "language": {
                    "lengthMenu": '_MENU_',
                    "sSearch": "",
                    "searchPlaceholder": "Search records"
                },
                "processing": true,
                "serverSide": true,
                "ajax": {
                    url: '{{ route('order_status_report_datatable') }}',
                    type: "GET",
                    data: {
                        start_date: start_date,
                        end_date: end_date,
                        company_id: company_id,
                        status: status
                    }
                },
                "columnDefs": [{
                    "orderable": false,
                    "targets": [5]
                }],
                "order": [
                    [1, 'desc']
                ],
            });
        }

        function open_order_modal(self) {
            let order_unique_id = $(self).data('order_unique_id');
            // ajax call to get order details
            $.ajax({
                method: 'GET',
                url: "{{ route('getOrderReportDetails') }}",
                data: {
                    order_unique_id: order_unique_id
                },
                headers: {
                    'x-csrf-token': _token
                },
                success: function(result) {
                    console.log('Order Details:', result);
                    $('#orderModal .modal-body').html(result.html);
                    $('#orderModal').modal('show');
                },
                error: function(xhr) {
                    var errorMessage = 'An unexpected error occurred.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }
                    console.log('Error Response:', xhr
                        .responseJSON); // Log the full error response for debugging
                    swal({
                        title: 'Error!',
                        text: errorMessage,
                        icon: 'error',
                    });
                }
            });
        }
    </script>
@endpush