@extends('user::layouts.backend-master')
@section('breadcrumb_title', trans('backend::translate.All Orders'))

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

@section('content')
    <div class="bg-white rounded-lg border border-border p-6 w-full">
        <!-- Header -->
        <div class="flex justify-between items-center">
            <div>
                <h1 class="text-2xl font-bold text-headline">{{ trans('backend::translate.Order Items Management') }}</h1>
                <p class="text-paragraph">{{ trans('backend::translate.Manage and track individual order items') }}</p>
            </div>
        </div>

        <!-- Filter Tabs -->
        <x-backend::datatable-filter-tabs :tabs="[
            'all' => ['label' => trans('backend::translate.All Items'), '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="order-items-table" :columns="[
            [
                'key' => 'product_name',
                'label' => trans('backend::translate.Product'),
                'sortable' => true,
                'class' => 'col-product',
            ],
            [
                'key' => 'order',
                'label' => trans('backend::translate.Order'),
                'sortable' => false,
                'class' => 'col-order',
            ],
            [
                'key' => 'quantity',
                'label' => trans('backend::translate.Quantity'),
                'sortable' => true,
                'class' => 'col-quantity',
            ],
            [
                'key' => 'unit_price',
                'label' => trans('backend::translate.Unit Price'),
                'sortable' => true,
                'class' => 'col-unit-price',
            ],
            [
                'key' => 'total_price',
                'label' => trans('backend::translate.Total Price'),
                'sortable' => true,
                'class' => 'col-total-price',
            ],
            [
                'key' => 'options',
                'label' => trans('backend::translate.Options'),
                'sortable' => false,
                'class' => 'col-options',
            ],
            [
                'key' => 'status',
                'label' => trans('backend::translate.Status'),
                'sortable' => true,
                'class' => 'col-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 order items found')" :description="trans('backend::translate.No results found for your current search or filter criteria.')" :actionText="trans('backend::translate.Clear Filters')" :actionUrl="'#'" />
        </div>

        <div class="hidden">
            <!-- Pagination -->
            <x-backend::datatable-pagination :showPageLength="true" :pageLength="10" :pageLengthOptions="[10, 25, 50, 100]" :showInfo="true"
                :showControls="true" :responsive="true" />
        </div>

    </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_items' => trans('backend::translate.Cancel Items'),
    ]" />

    <div id="item-detail-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-[700px] h-fit max-h-[90vh] bg-white rounded-2xl px-9 pt-10 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>

            <div class="flex justify-between items-center mb-4">
                <h3 class="text-xl font-semibold">Order Item Details</h3>
            </div>
            <div id="item-detail-content">
                <!-- Order item details will be loaded here -->
            </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>

            <div>
                <h3 class="text-lg font-semibold mb-4">Update Item Status</h3>
                <form id="status-update-form">
                    <div class="mb-4">
                        <select id="item-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">
                        <button type="button" class="btn btn-secondary" onclick="closeStatusModal()">Cancel</button>
                        <button type="submit" class="btn btn-primary">Update Status</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@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 orderItemsTable;
        let selectedIds = [];
        let currentItemId = null;

        $(document).ready(function() {
            // Initialize DataTable
            orderItemsTable = $('#order-items-table').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                paging: false,
                dom: 't',
                pageLength: 10,
                order: [
                    [8, 'desc']
                ],
                ajax: {
                    url: '{{ route('admin.order-items.index') }}',
                    data: function(d) {
                        d.status = $('.filter-tab.text-main').data('filter') || 'all';
                        d.order_id = $('select[name="order_id"]').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: 'product_name',
                        name: 'product_name',
                        orderable: true
                    },
                    {
                        data: 'order',
                        name: 'order',
                        orderable: false,
                        render: function(data, type, row) {
                            return data.order_number + '<br><small class="text-gray-500">' + data
                                .customer + '</small>';
                        }
                    },
                    {
                        data: 'quantity',
                        name: 'quantity',
                        orderable: true
                    },
                    {
                        data: 'unit_price',
                        name: 'unit_price',
                        orderable: true
                    },
                    {
                        data: 'total_price',
                        name: 'total_price',
                        orderable: true
                    },
                    {
                        data: 'product_options',
                        name: 'product_options',
                        orderable: false
                    },
                    {
                        data: 'status',
                        name: 'status',
                        orderable: true
                    },
                    {
                        data: 'created_at',
                        name: 'created_at',
                        orderable: true
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ],
                language: {
                    processing: 'Processing...',
                    search: 'Search order items:',
                    lengthMenu: 'Show _MENU_ items per page',
                    info: 'Showing _START_ to _END_ of _TOTAL_ items',
                    infoEmpty: 'No order items available',
                    infoFiltered: '(filtered from _MAX_ total items)',
                    paginate: {
                        first: 'First',
                        last: 'Last',
                        next: 'Next',
                        previous: 'Previous'
                    }
                }
            });

            // Update status counts
            orderItemsTable.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');
                orderItemsTable.ajax.reload();
            });

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

            // Item detail click
            $(document).on('click', '.show-btn', function(e) {
                e.preventDefault();
                let itemId = $(this).data('id');
                showItemDetail(itemId);
            });

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

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

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

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

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

                if (confirm('Are you sure you want to perform this action on ' + ids.length +
                        ' item(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 showItemDetail(itemId) {
            $.ajax({
                url: '{{ route('admin.order-items.show', ':id') }}'.replace(':id', itemId),
                method: 'GET',
                success: function(response) {
                    if (response.success) {
                        let item = response.orderItem;
                        let html = `
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <h4 class="font-semibold mb-3">Product Information</h4>
                                    <div class="space-y-2">
                                        <p><strong>Product Name:</strong> ${item.product_name}</p>
                                        <p><strong>SKU:</strong> ${item.product_sku || 'N/A'}</p>
                                        <p><strong>Description:</strong> ${item.product_description || 'N/A'}</p>
                                        <p><strong>Quantity:</strong> ${item.quantity}</p>
                                        <p><strong>Unit Price:</strong> ${item.unit_price}</p>
                                        <p><strong>Final Price:</strong> ${item.final_price}</p>
                                        <p><strong>Total Price:</strong> ${item.total_price}</p>
                                        <p><strong>Status:</strong> <span class="badge">${item.status}</span></p>
                                    </div>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-3">Order Information</h4>
                                    <div class="space-y-2">
                                        <p><strong>Order Number:</strong> ${item.order.order_number}</p>
                                        <p><strong>Customer:</strong> ${item.order.customer.name} (${item.order.customer.email})</p>
                                        <p><strong>Order Date:</strong> ${item.created_at}</p>
                                        ${item.shipped_at ? '<p><strong>Shipped At:</strong> ' + item.shipped_at + '</p>' : ''}
                                        ${item.delivered_at ? '<p><strong>Delivered At:</strong> ' + item.delivered_at + '</p>' : ''}
                                        ${item.cancelled_at ? '<p><strong>Cancelled At:</strong> ' + item.cancelled_at + '</p>' : ''}
                                    </div>
                                </div>
                            </div>
                        `;

                        if (item.product_options && Object.keys(item.product_options).length > 0) {
                            html += `
                                <div class="mt-6">
                                    <h4 class="font-semibold mb-3">Product Options</h4>
                                    <div class="space-y-2">
                            `;

                            Object.keys(item.product_options).forEach(function(key) {
                                html += `<p><strong>${key}:</strong> ${item.product_options[key]}</p>`;
                            });

                            html += `
                                    </div>
                                </div>
                            `;
                        }

                        $('#item-detail-content').html(html);
                        initModal('item-detail-modal').showModal();

                    }
                },
                error: function() {
                    toastr.error('Failed to load item details.');
                }
            });
        }

        function updateItemStatus(itemId, status) {
            $.ajax({
                url: '{{ route('admin.order-items.update-status', ':id') }}'.replace(':id', itemId),
                method: 'POST',
                data: {
                    status: status,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        initModal('status-update-modal').hideModal()
                        orderItemsTable.ajax.reload();
                        toastr.success(response.message);

                    } else {
                        toastr.error(response.message);
                    }
                },
                error: function() {
                    toastr.error('Failed to update item status.');
                }
            });
        }

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

        function closeItemModal() {
            initModal('item-detail-modal').hideModal()
        }

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