@php
    use App\Enums\Payments\OrderType;
    use App\Enums\InvoiceStatus;
@endphp
@forelse($invoices as $invoice)
    <tr>
        <td class="fs-9 ps-2 align-middle">
            <div class="form-check mb-0 fs-8">
                <input class="form-check-input" type="checkbox" />
            </div>
        </td>
        <td class="numb align-middle text-body-quaternary fs-9 ps-2 fw-semibold">{{ $loop->iteration }}</td>
        <td class="number align-middle ps-2">
            @isset($invoice->order)
                <button type="button" class="dropdown-item preview-btn"
                        onclick="window.dispatchEvent(new CustomEvent('open-order-preview', { detail: { orderId: {{ $invoice->order->id }} } }))">
                    <i class="fas fa-eye me-2"></i>
                    <div class="d-flex flex-column">
                        <span class="fw-bold">{{ $invoice->compact_invoice_number }}</span>
                        <small class="text-muted">{{ $invoice->year_month_display }}</small>
                    </div>
                </button>
            @else
                <a class="d-flex align-items-center text-body" href="{{ route('invoices.show', encrypt($invoice->id)) }}">
                    <div class="d-flex flex-column">
                        <span class="fw-bold">{{ $invoice->compact_invoice_number }}</span>
                        <small class="text-muted">{{ $invoice->year_month_display }}</small>
                    </div>
                </a>
            @endisset
        </td>
        <td class="order-type align-middle text-muted ps-2">
            {{ ucfirst($invoice->order?->order_type ?? 'N/A') }}
        </td>
        <td class="customer align-middle white-space-nowrap ps-2">
            @if($invoice->order?->customer)
                <a class="d-flex align-items-center text-body" href="#">
                    <div class="avatar avatar-m">
                        <div class="avatar-name rounded-circle">
                            <span>{{ mb_substr($invoice->order->customer?->name ?? 'N', 0, 1) }}</span>
                        </div>
                    </div>
                    <h6 class="mb-0 ms-3 text-body">{{ $invoice->order->customer?->name ?? 'No customer' }}</h6>
                </a>
            @else
                <div class="text-body-secondary">N/A</div>
            @endif
        </td>
        <td class="customer align-middle white-space-nowrap ps-2">
            @if($invoice->order?->delivery)
                @if($invoice->order->delivery->is_in_store_pickup)
                    <div class="d-flex align-items-center text-body-tertiary">
                        <span class="fas fa-store me-2"></span>
                        <span class="fw-semibold">In-Store Pickup</span>
                    </div>
                @elseif($invoice->order->delivery->name)
                    <a class="d-flex align-items-center text-body" href="#">
                        <div class="avatar avatar-m">
                            <div class="avatar-name rounded-circle">
                                <span>{{ mb_substr($invoice->order->delivery->name, 0, 1) }}</span>
                            </div>
                        </div>
                        <h6 class="mb-0 ms-3 text-body">{{ $invoice->order->delivery->name }}</h6>
                    </a>
                @else
                    <div class="text-body-secondary">N/A</div>
                @endif
            @else
                <div class="text-body-secondary">N/A</div>
            @endif
        </td>
        <td class="status align-middle ps-2">
            <div class="dropdown">
                <button class="btn btn-sm dropdown-toggle status-badge text-white {{ $invoice->status->badgeClass() }}"
                        type="button"
                        id="statusDropdown-{{ $invoice->id }}"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        data-current-status="{{ $invoice->status->value }}">
                    {{ Str::headline($invoice->status->value) }}
                    <i class="fas fa-chevron-down align-self-end"></i>
                </button>
                <ul class="dropdown-menu" aria-labelledby="statusDropdown-{{ $invoice->id }}">
                    @foreach(App\Enums\InvoiceStatus::cases() as $status)
                        @if($status->value !== $invoice->status->value)
                            <li>
                                <a class="dropdown-item status-option"
                                   href="#"
                                   data-invoice-id="{{ $invoice->id }}"
                                   data-new-status="{{ $status->value }}"
                                   data-status-display="{{ Str::headline($status->value) }}">
                                    <span class="badge {{ $status->badgeClass() }} me-2"></span>
                                    {{ Str::headline($status->value) }}
                                </a>
                            </li>
                        @endif
                    @endforeach
                </ul>
            </div>
        </td>
        <td class="time align-middle text-body-tertiary ps-2">
            {{ $invoice->order?->formatted_order_date }}
        </td>
        <td class="time align-middle text-body-tertiary ps-2">
            {{ $invoice->order?->formatted_delivery_date }}
        </td>
        <td class="align-middle text-center ps-2">
            <div class="dropdown d-inline-block">
                <!-- Dropdown Trigger (3 dots icon) -->
                <button class="btn btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fas fa-ellipsis-v"></i>
                </button>

                <!-- Dropdown Menu -->
                <ul class="dropdown-menu dropdown-menu-end">
                    <!-- Pay Now Button (Conditional) -->
                    @if($invoice->order && $invoice->order->order_type !== OrderType::Wired->value && $invoice->order->order_type !== OrderType::Web->value)
                        @isset($invoice->status->value)
                            @if($invoice->status->value === 'open')
                                <li>
                                    <button class="dropdown-item"
                                            data-bs-toggle="modal"
                                            data-bs-target="#paymentModal"
                                            data-invoice-number="{{ $invoice->compact_invoice_number }}"
                                            data-amount="{{ $invoice->order->total }}">
                                        <i class="fas fa-money-bill-wave me-2"></i> Pay Now
                                    </button>
                                </li>
                            @endif
                        @endisset
                    @endif

                    <!-- View/Edit Order Buttons -->
                    @isset($invoice->order)
                        <li>
                            <button class="dropdown-item preview-btn"
                                    onclick="window.dispatchEvent(new CustomEvent('open-order-preview', { detail: { orderId: {{ $invoice->order->id }} } }))">
                                <i class="fas fa-eye me-2"></i> Preview
                            </button>
                        </li>
                        <li>
                            <a target="_blank" class="dropdown-item" href="{{ route('invoices.show', encrypt($invoice->id)) }}">
                                <i class="fas fa-file-invoice me-2"></i> View Invoice
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="{{ route('orders.edit', ['order' => $invoice->order]) }}">
                                <i class="fas fa-edit me-2"></i> Edit Order
                            </a>
                        </li>
                    @else
                        <li>
                            <a class="dropdown-item" href="{{ route('orders.create', ['secure_id' => encrypt($invoice->id)]) }}">
                                <i class="fas fa-plus-circle me-2"></i> Add Order
                            </a>
                        </li>
                    @endisset

                    <!-- Recipe Actions (Conditional) -->
                    @if ($invoice->status === InvoiceStatus::Completed)
                        @if ($invoice->flowerRecipe)
                            <li>
                                <a class="dropdown-item" href="{{ route('recipes.show', encrypt($invoice->id)) }}">
                                    <i class="fas fa-book-open me-2"></i> View Recipe
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="{{ route('recipes.edit', [encrypt($invoice->id), $invoice->flowerRecipe]) }}">
                                    <i class="fas fa-pencil-alt me-2"></i> Edit Recipe
                                </a>
                            </li>
                        @else
                            <li>
                                <a class="dropdown-item" href="{{ route('recipes.create', encrypt($invoice->id)) }}">
                                    <i class="fas fa-clipboard-list me-2"></i> Log Recipe
                                </a>
                            </li>
                        @endif
                    @endif

                    @if($invoice->order && $invoice->order->order_type === OrderType::Phone->value)
                        <li>
                            <button class="dropdown-item send-email-btn"
                                    data-bs-toggle="modal"
                                    data-bs-target="#emailConfirmationModal"
                                    data-invoice-id="{{ $invoice->id }}"
                                    data-customer-name="{{ $invoice->order->customer->name ?? '' }}"
                                    data-customer-email="{{ $invoice->order->customer->email ?? '' }}">
                                <i class="fas fa-paper-plane me-2"></i> Send Confirmation
                            </button>
                        </li>
                    @endif
                </ul>
            </div>
        </td>
    </tr>
@empty
    <tr><td colspan="10" class="text-center">No invoice logged.</td></tr>
@endforelse

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Use event delegation for dynamic elements
            document.addEventListener('click', function(e) {
                const statusOption = e.target.closest('.status-option');
                if (statusOption) {
                    e.preventDefault();
                    e.stopPropagation();

                    const invoiceId = statusOption.getAttribute('data-invoice-id');
                    const newStatus = statusOption.getAttribute('data-new-status');
                    const newStatusDisplay = statusOption.getAttribute('data-status-display');

                    // Get current status from the dropdown button
                    const dropdownButton = document.querySelector(`#statusDropdown-${invoiceId}`);
                    const currentStatus = dropdownButton ? dropdownButton.getAttribute('data-current-status') : 'unknown';
                    const currentStatusDisplay = dropdownButton ? dropdownButton.textContent.trim() : 'Unknown';

                    // Show enhanced confirmation dialog
                    Swal.fire({
                        title: 'Confirm Status Change',
                        html: `
                            <div class="text-start">
                                <p>Are you sure you want to change this invoice status?</p>
                                <div class="status-change-preview">
                                    <span class="badge ${getBadgeClassForStatus(currentStatus)} me-2">${currentStatusDisplay}</span>
                                    <span class="status-change-arrow">→</span>
                                    <span class="badge ${getBadgeClassForStatus(newStatus)}">${newStatusDisplay}</span>
                                </div>
                                ${getStatusChangeSideEffects(newStatus, currentStatus)}
                            </div>
                        `,
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonText: 'Update Status',
                        cancelButtonText: 'Cancel',
                        confirmButtonColor: '#0d6efd',
                        width: '500px',
                        reverseButtons: true
                    }).then((result) => {
                        if (result.isConfirmed) {
                            updateInvoiceStatus(invoiceId, newStatus, currentStatus, newStatusDisplay, dropdownButton);
                        }
                    });
                }
            });

            async function updateInvoiceStatus(invoiceId, newStatus, previousStatus, statusDisplay, dropdownButton) {
                try {
                    // Show loading state
                    if (dropdownButton) {
                        const originalContent = dropdownButton.innerHTML;
                        dropdownButton.disabled = true;
                        dropdownButton.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Updating...';

                        // Add loading animation
                        dropdownButton.classList.add('status-changing');
                    }

                    const response = await axios.post('/invoices/update-status', {
                        invoice_id: parseInt(invoiceId), // Ensure integer
                        new_status: newStatus, // String value
                        _token: '{{ csrf_token() }}'
                    });

                    if (response.data.success) {
                        const sideEffects = response.data.data?.side_effects || {};

                        // Update the UI
                        updateStatusRow(invoiceId, newStatus, previousStatus, statusDisplay);

                        // Show success message with side effects
                        let successMessage = `Status updated from ${formatStatusText(previousStatus)} to ${statusDisplay}`;

                        // Add side effect information if any
                        if (sideEffects.delivery_triggered) {
                            successMessage += '<br><small class="text-success">✓ Delivery team notified</small>';
                        }
                        if (sideEffects.order_status_updated) {
                            successMessage += '<br><small class="text-success">✓ Order status updated</small>';
                        }
                        if (sideEffects.refund_initiated) {
                            successMessage += '<br><small class="text-warning">✓ Refund processing initiated</small>';
                        }
                        if (sideEffects.email_sent) {
                            successMessage += '<br><small class="text-info">✓ Email confirmation sent</small>';
                        }
                        if (sideEffects.completion_processed) {
                            successMessage += '<br><small class="text-success">✓ Order completion processed</small>';
                        }

                        Swal.fire({
                            icon: 'success',
                            title: 'Status Updated',
                            html: successMessage,
                            timer: 4000,
                            showConfirmButton: false
                        });

                        // Refresh dashboard activities if on dashboard
                        refreshDashboardActivities();

                    } else {
                        throw new Error(response.data.message);
                    }
                } catch (error) {
                    console.error('Status update error:', error);

                    let errorMessage = 'Failed to update status';
                    if (error.response?.data?.message) {
                        errorMessage = error.response.data.message;
                    } else if (error.message) {
                        errorMessage = error.message;
                    }

                    Swal.fire({
                        icon: 'error',
                        title: 'Update Failed',
                        text: errorMessage,
                        timer: 4000,
                        showConfirmButton: true
                    });
                } finally {
                    // Restore button state
                    if (dropdownButton) {
                        dropdownButton.disabled = false;
                        dropdownButton.classList.remove('status-changing');
                    }
                }
            }

            function updateStatusRow(invoiceId, newStatus, previousStatus, statusDisplay) {
                const dropdownButton = document.querySelector(`#statusDropdown-${invoiceId}`);
                const dropdownMenu = dropdownButton?.nextElementSibling;

                if (!dropdownButton || !dropdownMenu) return;

                // 1. Update button text and appearance
                dropdownButton.textContent = statusDisplay;
                dropdownButton.setAttribute('data-current-status', newStatus);
                updateButtonClass(dropdownButton, newStatus);

                // 2. Update dropdown options
                updateDropdownOptions(dropdownMenu, newStatus, previousStatus, invoiceId);

                // 3. Update timestamp if needed
                updateTimestampCell(invoiceId);

                // 4. Close the dropdown
                const dropdownInstance = bootstrap.Dropdown.getInstance(dropdownButton);
                if (dropdownInstance) {
                    dropdownInstance.hide();
                }
            }

            function updateButtonClass(button, status) {
                // Remove all existing status classes
                const classesToRemove = [
                    'bg-secondary', 'bg-primary', 'bg-success', 'bg-warning',
                    'bg-info', 'bg-danger', 'text-dark'
                ];
                button.classList.remove(...classesToRemove);

                // Add new status class
                const statusClass = getBadgeClassForStatus(status);
                button.classList.add(...statusClass.split(' '));

                // Add animation effect
                button.style.transform = 'scale(1.05)';
                setTimeout(() => {
                    button.style.transform = 'scale(1)';
                }, 300);
            }

            function updateDropdownOptions(menu, newStatus, previousStatus, invoiceId) {
                // Remove the selected option (the one that was just clicked)
                const selectedOption = menu.querySelector(`.status-option[data-new-status="${newStatus}"]`);
                if (selectedOption) {
                    selectedOption.remove();
                }

                // Add back the previous status option
                const previousStatusItem = document.createElement('li');
                previousStatusItem.innerHTML = `
                    <a class="dropdown-item status-option"
                       href="#"
                       data-invoice-id="${invoiceId}"
                       data-new-status="${previousStatus}"
                       data-status-display="${formatStatusText(previousStatus)}">
                        <span class="badge ${getBadgeClassForStatus(previousStatus)} me-2"></span>
                        ${formatStatusText(previousStatus)}
                    </a>
                `;
                menu.appendChild(previousStatusItem);
            }

            function updateTimestampCell(invoiceId) {
                const row = document.querySelector(`#statusDropdown-${invoiceId}`)?.closest('tr');
                if (row) {
                    const timeCells = row.querySelectorAll('.time');
                    if (timeCells.length > 1) {
                        // Update the "updated at" cell (assuming it's the second time cell)
                        const now = new Date();
                        timeCells[1].textContent = now.toLocaleDateString('en-US', {
                            month: 'short',
                            day: 'numeric',
                            year: 'numeric'
                        });
                    }
                }
            }

            function getStatusChangeSideEffects(newStatus, currentStatus) {
                const effects = {
                    'out_for_delivery': `
                        <div class="mt-3 p-2 bg-light border rounded">
                            <small class="text-primary">
                                <i class="fas fa-truck me-1"></i>
                                <strong>Side Effects:</strong>
                            </small>
                            <ul class="side-effects-list">
                                <li><i class="fas fa-bell text-primary"></i> Delivery team will be notified</li>
                                <li><i class="fas fa-sync-alt text-primary"></i> Order status will be updated</li>
                                <li><i class="fas fa-clipboard-check text-primary"></i> Delivery preparation started</li>
                            </ul>
                        </div>
                    `,
                    'completed': `
                        <div class="mt-3 p-2 bg-light border rounded">
                            <small class="text-success">
                                <i class="fas fa-check-circle me-1"></i>
                                <strong>Side Effects:</strong>
                            </small>
                            <ul class="side-effects-list">
                                <li><i class="fas fa-flag-checkered text-success"></i> Order will be marked as completed</li>
                                <li><i class="fas fa-envelope text-success"></i> Customer confirmation may be sent</li>
                                <li><i class="fas fa-chart-line text-success"></i> Analytics will be updated</li>
                            </ul>
                        </div>
                    `,
                    'cancelled': `
                        <div class="mt-3 p-2 bg-light border rounded">
                            <small class="text-danger">
                                <i class="fas fa-times-circle me-1"></i>
                                <strong>Side Effects:</strong>
                            </small>
                            <ul class="side-effects-list">
                                <li><i class="fas fa-ban text-danger"></i> Order will be cancelled</li>
                                <li><i class="fas fa-money-bill-wave text-danger"></i> Refund may be processed if payment was made</li>
                                <li><i class="fas fa-database text-danger"></i> Inventory may be updated</li>
                            </ul>
                        </div>
                    `,
                    'email_sent': `
                        <div class="mt-3 p-2 bg-light border rounded">
                            <small class="text-info">
                                <i class="fas fa-envelope me-1"></i>
                                <strong>Side Effects:</strong>
                            </small>
                            <ul class="side-effects-list">
                                <li><i class="fas fa-paper-plane text-info"></i> Email confirmation will be sent to customer</li>
                                <li><i class="fas fa-clock text-info"></i> Email tracking will be initiated</li>
                            </ul>
                        </div>
                    `,
                    'in_design': `
                        <div class="mt-3 p-2 bg-light border rounded">
                            <small class="text-warning">
                                <i class="fas fa-palette me-1"></i>
                                <strong>Side Effects:</strong>
                            </small>
                            <ul class="side-effects-list">
                                <li><i class="fas fa-paint-brush text-warning"></i> Design team will be notified</li>
                                <li><i class="fas fa-clock text-warning"></i> Design workflow will be initiated</li>
                            </ul>
                        </div>
                    `,
                    'confirmed': `
                        <div class="mt-3 p-2 bg-light border rounded">
                            <small class="text-success">
                                <i class="fas fa-check me-1"></i>
                                <strong>Side Effects:</strong>
                            </small>
                            <ul class="side-effects-list">
                                <li><i class="fas fa-thumbs-up text-success"></i> Order will be confirmed</li>
                                <li><i class="fas fa-cogs text-success"></i> Production may be scheduled</li>
                            </ul>
                        </div>
                    `
                };

                return effects[newStatus] || '';
            }

            function formatStatusText(status) {
                return status.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
            }

            function getBadgeClassForStatus(status) {
                const statusClasses = {
                    'created': 'bg-secondary',
                    'open': 'bg-primary',
                    'confirmed': 'bg-success',
                    'in_design': 'bg-warning text-dark',
                    'out_for_delivery': 'bg-info',
                    'email_sent': 'bg-info',
                    'completed': 'bg-success',
                    'cancelled': 'bg-danger'
                };
                return statusClasses[status] || 'bg-secondary';
            }

            function refreshDashboardActivities() {
                // If we're on a dashboard page, refresh the activities section
                const activitiesContainer = document.querySelector('[data-activity-container]');
                if (activitiesContainer) {
                    // Dispatch event to refresh activities
                    window.dispatchEvent(new CustomEvent('refreshActivities'));
                }

                // Also refresh the invoice table to ensure counts are updated
                setTimeout(() => {
                    if (typeof FilterManager !== 'undefined' && FilterManager.handleFilterChange) {
                        FilterManager.handleFilterChange();
                    }
                }, 1000);
            }

            function showToast(type, message) {
                const Toast = Swal.mixin({
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 3000,
                    timerProgressBar: true,
                    didOpen: (toast) => {
                        toast.addEventListener('mouseenter', Swal.stopTimer);
                        toast.addEventListener('mouseleave', Swal.resumeTimer);
                    }
                });

                Toast.fire({
                    icon: type,
                    title: message
                });
            }
        });
    </script>
@endpush