@push('styles')
    <!-- Load DataTables CSS -->
    <link href="{{ asset('backend/assets/css/jquery.dataTables.min.css') }}" rel="stylesheet">
@endpush

<div>

    <div class="flex gap-3 flex-wrap justify-between items-center">
        <h2>{{ trans('backend::translate.Latest Orders') }}</h2>
        <div>
            <a class="btn btn-primary" href="{{ route('user.orders.index') }}">
                {{ trans('backend::translate.See all orders') }}
            </a>
        </div>
    </div>

    <!-- Filter Tabs -->
    <x-backend::datatable-filter-tabs :tabs="[
        'all' => ['label' => trans('backend::translate.All Orders'), 'count' => 0],
        'pending' => ['label' => trans('backend::translate.Pending'), 'count' => 0],
        'processing' => ['label' => trans('backend::translate.Processing'), 'count' => 0],
        'shipped' => ['label' => trans('backend::translate.Shipped'), 'count' => 0],
        'delivered' => ['label' => trans('backend::translate.Delivered'), 'count' => 0],
        'cancelled' => ['label' => trans('backend::translate.Cancelled'), 'count' => 0],
        'refunded' => ['label' => trans('backend::translate.Refunded'), 'count' => 0],
    ]" />

    <!-- Main DataTable -->
    <x-backend::datatable-table tableId="orders-table" :columns="[
        [
            'key' => 'order_number',
            'label' => trans('backend::translate.Order Number'),
            'sortable' => true,
            'class' => 'col-order-number',
        ],
        [
            'key' => 'customer',
            'label' => trans('backend::translate.Customer'),
            'sortable' => false,
            'class' => 'col-customer',
        ],
        [
            'key' => 'total_amount',
            'label' => trans('backend::translate.Total Amount'),
            'sortable' => true,
            'class' => 'col-total',
        ],
        [
            'key' => 'items_count',
            'label' => trans('backend::translate.Items'),
            'sortable' => false,
            'class' => 'col-items',
        ],
        [
            'key' => 'status',
            'label' => trans('backend::translate.Status'),
            'sortable' => true,
            'class' => 'col-status',
        ],
        [
            'key' => 'payment_status',
            'label' => trans('backend::translate.Payment Status'),
            'sortable' => true,
            'class' => 'col-payment-status',
        ],
        [
            'key' => 'created_at',
            'label' => trans('backend::translate.Order Date'),
            'sortable' => true,
            'class' => 'col-date',
        ],
        [
            'key' => 'actions',
            'label' => trans('backend::translate.Actions'),
            'sortable' => false,
            'class' => 'col-actions w-[150px]',
        ],
    ]" />

    <!-- Empty State -->
    <div id="empty-state" style="display: none;">
        <x-backend::datatable-empty-state :title="trans('backend::translate.No orders found')" :description="trans('backend::translate.No results found for your current search or filter criteria.')" :actionText="trans('backend::translate.Clear Filters')" :actionUrl="'#'" />
    </div>

    <!-- Bulk Actions Modal -->
    <x-backend::datatable-bulk-actions-modal :actions="[
        'mark_processing' => trans('backend::translate.Mark as Processing'),
        'mark_shipped' => trans('backend::translate.Mark as Shipped'),
        'mark_delivered' => trans('backend::translate.Mark as Delivered'),
        'cancel_orders' => trans('backend::translate.Cancel Orders'),
    ]" />

    <!-- Order Detail Modal -->
    <div id="order-detail-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
        <div class="flex items-center justify-center min-h-screen px-4">
            <div class="bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
                <div class="p-6">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-lg font-semibold">Order Details</h3>
                        <button type="button" class="text-gray-400 hover:text-gray-600" onclick="closeOrderModal()">
                            <span class="sr-only">Close</span>
                            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                        </button>
                    </div>
                    <div id="order-detail-content">
                        <!-- Order details will be loaded here -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Status Update Modal  -->
    <div id="status-update-modal"
        class="modal-overlay !hidden opacity-0 transition-opacity duration-300 w-screen h-screen bg-black/30 flex justify-center items-center fixed top-0 left-0 z-50">
        <div
            class="modal-content w-full max-w-[390px] h-fit max-h-[90vh] bg-white rounded-2xl px-9 pt-16 pb-10 overflow-y-auto relative">
            <!-- Close Button -->
            <button
                class="modal-close size-10 rounded-lg bg-gray hover:bg-error text-headline hover:text-white flex justify-center items-center absolute top-4 right-4 transition-all duration-300">
                <!-- SVG icon -->
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M16.9531 7.05029L7.05363 16.9498" stroke="currentColor" stroke-width="1.5"
                        stroke-linecap="round" />
                    <path d="M7.05078 7.05029L16.9503 16.9498" stroke="currentColor" stroke-width="1.5"
                        stroke-linecap="round" />
                </svg>
            </button>

            <h3 class="text-lg font-semibold mb-4">Update Order Status</h3>
            <form id="status-update-form">
                <div class="mb-4">
                    <select id="order-status" name="status" class="form-select w-full">
                        <option value="pending">Pending</option>
                        <option value="processing">Processing</option>
                        <option value="shipped">Shipped</option>
                        <option value="delivered">Delivered</option>
                        <option value="cancelled">Cancelled</option>
                        <option value="refunded">Refunded</option>
                    </select>
                </div>
                <div class="flex justify-between gap-2 mt-10">
                    <div>
                        <button type="button"
                            class="btn btn-primary modal-ok cursor-pointer bg-error/5 border-error/5 text-headline">Cancel</button>
                    </div>
                    <div>
                        <button type="submit" class="btn btn-primary">Update Status</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>


@push('scripts')
    <!-- Load jQuery and DataTables -->
    <script src="{{ asset('backend/assets/js/jquery-3.7.1.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/jquery.dataTables.min.js') }}"></script>

    <script>
        let ordersTable;
        let selectedIds = [];
        let currentOrderId = null;

        $(document).ready(function() {
            // Initialize DataTable
            ordersTable = $('#orders-table').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                dom: 't',
                paging: false,
                order: [
                    [7, 'desc']
                ],
                ajax: {
                    url: '{{ route('user.dashboard') }}',
                    data: function(d) {
                        d.status = $('.filter-tab.text-main').data('filter') || 'all';
                        d.payment_status = $('select[name="payment_status"]').val();
                        d.date_from = $('input[name="date_from"]').val();
                        d.date_to = $('input[name="date_to"]').val();
                        d.search = $('input[type="search"]').val();
                    }
                },
                columns: [{
                        data: 'order_number',
                        name: 'order_number',
                        orderable: true
                    },
                    {
                        data: 'user',
                        name: 'user',
                        orderable: false,
                        render: function(data, type, row) {
                            return data.name + '<br><small class="text-gray-500">' + data.email +
                                '</small>';
                        }
                    },
                    {
                        data: 'total_amount',
                        name: 'total_amount',
                        orderable: true
                    },
                    {
                        data: 'items_count',
                        name: 'items_count',
                        orderable: false
                    },
                    {
                        data: 'status',
                        name: 'status',
                        orderable: true
                    },
                    {
                        data: 'payment_status',
                        name: 'payment_status',
                        orderable: true
                    },
                    {
                        data: 'created_at',
                        name: 'created_at',
                        orderable: true
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ],
                language: {
                    processing: '<div class="flex justify-center items-center py-8"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-main"></div></div>',
                    emptyTable: '',
                    info: '',
                    lengthMenu: '',
                    search: ''
                }
            });

            // Update status counts
            ordersTable.on('xhr.dt', function(e, settings, json, xhr) {
                if (json.statusCounts) {
                    updateStatusCounts(json.statusCounts);
                }
            });

            // Filter tab clicks
            $(document).on('click', '.filter-tab', function(e) {
                e.preventDefault();
                $('.filter-tab').removeClass('text-main before:block').addClass(
                    'text-paragraph before:hidden');
                $(this).removeClass('text-paragraph before:hidden').addClass('text-main before:block');
                ordersTable.ajax.reload();
            });

            // Filter changes
            $(document).on('change',
                'select[name="payment_status"], input[name="date_from"], input[name="date_to"]',
                function() {
                    ordersTable.ajax.reload();
                });

            // Order detail click
            $(document).on('click', '.show-btn', function(e) {
                e.preventDefault();
                let orderId = $(this).data('id');
                window.location.href = '{{ route('user.orders.show.invoice', ':id') }}'.replace(':id',
                    orderId);
            });

            // Edit status click
            $(document).on('click', '.edit-btn', function(e) {
                e.preventDefault();
                currentOrderId = $(this).data('id');
                initModal('status-update-modal').showModal()
            });

            // Cancel order click
            $(document).on('click', '.cancel-btn', function(e) {
                e.preventDefault();
                let orderId = $(this).data('id');

                Swal.fire({
                    title: "Are you sure you want to cancel this order?",
                    showCancelButton: true,
                    confirmButtonText: "Yes, cancel it!",
                    denyButtonText: "Close",
                }).then((result) => {
                    if (result.isConfirmed) {
                        updateOrderStatus(orderId, 'cancelled');
                    }
                });

            });

            // Status update form submit
            $('#status-update-form').on('submit', function(e) {
                e.preventDefault();
                if (currentOrderId) {
                    let status = $('#order-status').val();
                    updateOrderStatus(currentOrderId, status);
                }
            });

            // Bulk actions
            $(document).on('click', '.bulk-action-btn', function() {
                let action = $(this).data('action');
                let selectedRows = ordersTable.rows({
                    selected: true
                }).data();
                let ids = [];

                selectedRows.each(function(row) {
                    ids.push(row.id);
                });

                if (ids.length === 0) {
                    alert('Please select at least one order.');
                    return;
                }

                if (confirm('Are you sure you want to perform this action on ' + ids.length +
                        ' order(s)?')) {
                    performBulkAction(action, ids);
                }
            });
        });

        function updateStatusCounts(counts) {
            Object.keys(counts).forEach(function(status) {
                let $tab = $('.filter-tab[data-filter="' + status + '"]');
                if ($tab.length) {
                    let $badge = $tab.find('.filter-count');
                    if ($badge.length) {
                        $badge.text(counts[status]);
                    }
                }
            });
        }

        function updateOrderStatus(orderId, status) {
            $.ajax({
                url: '{{ route('user.orders.update-status', ':id') }}'.replace(':id', orderId),
                method: 'POST',
                data: {
                    status: status,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        ordersTable.ajax.reload();
                        initModal('status-update-modal').hideModal()
                        toastr.success(response.message);
                    } else {
                        toastr.error(response.message);
                    }
                },
                error: function() {
                    toastr.error('Failed to update order status.');
                }
            });
        }

        function performBulkAction(action, ids) {
            $.ajax({
                url: '{{ route('user.orders.bulk-action') }}',
                method: 'POST',
                data: {
                    action: action,
                    ids: ids.join(','),
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        ordersTable.ajax.reload();
                        toastr.success(response.message);
                    } else {
                        toastr.error(response.message);
                    }
                },
                error: function() {
                    toastr.error('Bulk action failed.');
                }
            });
        }

        function closeOrderModal() {
            $('#order-detail-modal').addClass('hidden');
        }

        function closeStatusModal() {
            initModal('status-update-modal').hideModal()
            currentOrderId = null;
        }
    </script>
@endpush