@php
    use \App\Enums\Order\OrderStatusEnum;
@endphp

<div class="card">
    <div class="card-body">
        <div class="row">
            <div class="col-md-12">
                <div class="custom-control custom-switch">
                    <input type="hidden" name="isTest" value="0">
                    <input type="checkbox" value="1" class="custom-control-input" name="isTest" id="isTest">
                    <label class="custom-control-label" for="isTest">Show test orders</label>
                </div>
                <span class="small text-muted">
                   Display test orders for:
                   <b> {!! implode(', ', config('mail.test_emails')) !!} </b>
                </span>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <table id="orders-dt" class="table dt-responsive nowrap">
            <thead>
            <tr>
                <th>ID</th>
                <th>HID</th>
                <th>User</th>
                <th>Company</th>
                <th>Payment</th>
                <th>Shipping</th>
                <th>Address</th>
                <th>
                    <select id="statusFilter" class="form-control form-control-sm">
                        <option value="0" selected>Visi</option>
                        @foreach(OrderStatusEnum::cases() as $case)
                            <option value="{{ $case->value }}" {{ !$case->is_active() ? 'disabled' : '' }}>
                                {{ $case->title() }}
                            </option>
                        @endforeach
                    </select>
                </th>
                <th>Price</th>
                <th>Created</th>
                <th>Action</th>
            </tr>
            <tfoot>
            <tr>
                <th>ID</th>
                <th>HID</th>
                <th>User</th>
                <th>Company</th>
                <th>Payment</th>
                <th>Shipping</th>
                <th>Address</th>
                <th>Status</th>
                <th>Price</th>
                <th>Created</th>
                <th>Action</th>
            </tr>
            </tfoot>
        </table>
    </div>
</div>

@push('script')

    <script>

        $(function () {

            let isTestEl = $('#isTest');
            let orderDataTableEl = $('#orders-dt');
            let orderStatusFilter = $('#statusFilter');

            // Function to update the DataTable based on the checkbox state
            function updateDataTable(includeTestOrders) {

                console.log('updateDataTable');

                let dt_config = {

                    ajax: '{{ route('admin.datatable.orders', ['shop' => $shop, 'user' => $user ?? null]) }}' + '?include_test_orders=' + includeTestOrders + '&filter[status]=' + orderStatusFilter.val(),

                    columns: [
                        {
                            width:     '45',
                            name:      'id',
                            data:      'order_id',
                            className: 'dt-body-center'
                        },
                        {
                            width:     '25',
                            name:      'h_id',
                            data:      'order_h_id',
                            className: 'dt-body-center'
                        },
                        {
                            width:     '120',
                            name:      'user_name',
                            data:      'order_user',
                            className: ''
                        },
                        {
                            width:     '120',
                            name:      'company_name',
                            data:      'order_company',
                            className: ''
                        },
                        {
                            width:     '80',
                            name:      'cart.paymentMethod.title',
                            data:      'order_payment',
                            className: 'dt-body-center'
                        },
                        {
                            width:     '80',
                            name:      'cart.shippingMethod.title',
                            data:      'order_shipping',
                            className: 'dt-body-center'
                        },
                        {
                            width: '80',
                            name:  'cart.shippingAddress.country_id',
                            data:  'order_shipping_address',
                        },
                        {
                            width:      '120',
                            name:       'status',
                            data:       'order_status',
                            className:  'dt-body-center',
                            orderable:  false,
                            searchable: false,
                        },
                        {
                            width:     '50',
                            name:      'total_price_with_tax',
                            data:      'order_total_price_with_tax',
                            className: 'dt-body-center'
                        },
                        {
                            width:     '60',
                            name:      'created_at',
                            data:      'order_created_at',
                            className: 'dt-body-center'
                        },
                        {
                            width:      '50',
                            name:       'action',
                            data:       'order_action',
                            className:  'dt-body-center',
                            orderable:  false,
                            searchable: false,
                        },
                    ],
                };

                // Initialize DataTable or destroy and reinitialize it if it already exists
                if ($.fn.DataTable.isDataTable('#orders-dt')) {
                    orderDataTableEl.DataTable().clear();
                    orderDataTableEl.DataTable().destroy();
                }

                orderDataTableEl.DataTable({...dt_config, ...window.globalDataTableConfig});

                $.cookie('include_test_orders', includeTestOrders, {expires: 365});
                $.cookie('order_filter_status', orderStatusFilter.val(), {expires: 365});
            }

            // Check if there's a 'includeTestOrders' cookie
            let previousIncludeTestOrders = $.cookie('include_test_orders') === undefined ? 0 : $.cookie('include_test_orders');

            isTestEl.prop('checked', previousIncludeTestOrders === '1');

            if ($.cookie('order_filter_status')) {
                orderStatusFilter.val($.cookie('order_filter_status'));
            }

            updateDataTable(previousIncludeTestOrders);

            // Listen for changes to the checkbox
            isTestEl.on('change', function () {
                // Get the checkbox state (1 for checked, 0 for unchecked)
                let includeTestOrders = this.checked ? 1 : 0;
                // Update the DataTable and sessionStorage
                updateDataTable(includeTestOrders);
            });

            // Listen for changes to the checkbox
            orderStatusFilter.on('change', function () {
                updateDataTable(previousIncludeTestOrders);
            });
        });

    </script>

@endpush