@php
    use App\Enums\Payments\OrderType;
    use App\Enums\InvoiceStatus;
@endphp
@forelse($invoices as $invoice)
    @php
        $statusColorMap = [
            'created' => 'bg-zinc-500/10 text-zinc-600 dark:text-zinc-400 border border-zinc-500/20',
            'open' => 'bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 border border-indigo-500/20',
            'confirmed' => 'bg-teal-500/10 text-teal-600 dark:text-teal-400 border border-teal-500/20',
            'in-design' => 'bg-orange-500/10 text-orange-600 dark:text-orange-400 border border-orange-500/20',
            'in_design' => 'bg-orange-500/10 text-orange-600 dark:text-orange-400 border border-orange-500/20',
            'out-for-delivery' => 'bg-sky-500/10 text-sky-600 dark:text-sky-400 border border-sky-500/20',
            'out_for_delivery' => 'bg-sky-500/10 text-sky-600 dark:text-sky-400 border border-sky-500/20',
            'email_sent' => 'bg-sky-500/10 text-sky-600 dark:text-sky-400 border border-sky-500/20',
            'completed' => 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20',
            'paid' => 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20',
            'cancelled' => 'bg-rose-500/10 text-rose-600 dark:text-rose-400 border border-rose-500/20',
        ];
        $currentStatusClass = $statusColorMap[$invoice->status->value] ?? 'bg-zinc-500/10 text-zinc-600 border border-zinc-500/20';
    @endphp
    <tr class="group hover:bg-zinc-50/50 dark:hover:bg-zinc-950/30 transition-colors {{ $invoice->sale ? 'sale-tracker-processed' : '' }}">
        <td class="py-4 px-4 align-middle text-center group-[.sale-tracker-processed]:border-l-4 group-[.sale-tracker-processed]:border-emerald-500">
            <input class="rounded border-zinc-300 dark:border-zinc-700 text-emerald-600 focus:ring-emerald-500 bg-zinc-50 dark:bg-zinc-950 h-4 w-4" type="checkbox" />
        </td>
        <td class="py-4 px-4 numb align-middle text-zinc-400 dark:text-zinc-500 font-semibold">{{ $loop->iteration }}</td>
        <td class="py-4 px-4 number align-middle">
            @isset($invoice->order)
                <button type="button" class="text-left font-bold text-zinc-900 dark:text-white hover:text-emerald-600 dark:hover:text-emerald-400 transition preview-btn cursor-pointer block"
                        onclick="window.dispatchEvent(new CustomEvent('open-order-preview', { detail: { orderId: {{ $invoice->order->id }} } }))">
                    <span class="block">{{ $invoice->compact_invoice_number }}</span>
                    <span class="block text-xs font-normal text-zinc-500 dark:text-zinc-400 mt-0.5">{{ $invoice->year_month_display }}</span>
                </button>
            @else
                <a class="block text-zinc-900 dark:text-white hover:text-emerald-600 dark:hover:text-emerald-400 transition cursor-pointer" href="{{ route('invoices.show', encrypt($invoice->id)) }}">
                    <span class="block font-bold">{{ $invoice->compact_invoice_number }}</span>
                    <span class="block text-xs text-zinc-500 dark:text-zinc-400 mt-0.5">{{ $invoice->year_month_display }}</span>
                </a>
            @endisset
        </td>
        <td class="py-4 px-4 order-type align-middle text-zinc-500 dark:text-zinc-450 font-medium">
            {{ Str::headline($invoice->order?->order_type?->value ?? 'N/A') }}
        </td>
        <td class="py-4 px-4 customer align-middle whitespace-nowrap">
            @if($invoice->order?->customer)
                <div class="flex items-center">
                    <div class="h-8 w-8 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 flex items-center justify-center font-bold text-xs uppercase shadow-sm">
                        {{ mb_substr($invoice->order->customer?->name ?? 'N', 0, 1) }}
                    </div>
                    <span class="ml-3 font-semibold text-zinc-900 dark:text-zinc-155">{{ $invoice->order->customer?->name ?? 'No customer' }}</span>
                </div>
            @else
                <span class="text-zinc-400">N/A</span>
            @endif
        </td>
        <td class="py-4 px-4 customer align-middle whitespace-nowrap">
            @if($invoice->order?->delivery)
                @if($invoice->order->delivery->is_in_store_pickup)
                    <div class="flex items-center text-zinc-500">
                        <span class="uil uil-store mr-2 text-zinc-400"></span>
                        <span class="font-medium text-xs">In-Store Pickup</span>
                    </div>
                @elseif($invoice->order->delivery->name)
                    <div class="flex items-center">
                        <div class="h-8 w-8 rounded-full bg-amber-500/10 text-amber-600 dark:text-amber-400 flex items-center justify-center font-bold text-xs uppercase shadow-sm">
                            {{ mb_substr($invoice->order->delivery->name, 0, 1) }}
                        </div>
                        <span class="ml-3 font-semibold text-zinc-900 dark:text-zinc-155">{{ $invoice->order->delivery->name }}</span>
                    </div>
                @else
                    <span class="text-zinc-400">N/A</span>
                @endif
            @else
                <span class="text-zinc-400">N/A</span>
            @endif
        </td>
        <td class="py-4 px-4 status align-middle">
            <div class="relative dropdown" x-data="{ open: false }" @click.outside="open = false" @close-dropdown="open = false">
                <button class="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-semibold rounded-full shadow-sm transition-all status-badge {{ $currentStatusClass }} cursor-pointer"
                        type="button"
                        id="statusDropdown-{{ $invoice->id }}"
                        @click="open = !open"
                        data-current-status="{{ $invoice->status->value }}">
                    {{ Str::headline($invoice->status->value) }}
                    <svg class="w-3 h-3 opacity-60 ml-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </button>
                <ul class="dropdown-menu-end absolute z-30 mt-1 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-xl shadow-xl py-1 w-44" 
                    x-show="open" 
                    x-transition:enter="transition ease-out duration-100"
                    x-transition:enter-start="opacity-0 scale-95"
                    x-transition:enter-end="opacity-100 scale-100"
                    x-transition:leave="transition ease-in duration-75"
                    x-transition:leave-start="opacity-100 scale-100"
                    x-transition:leave-end="opacity-0 scale-95"
                    style="display: none;"
                    aria-labelledby="statusDropdown-{{ $invoice->id }}">
                    @foreach(App\Enums\InvoiceStatus::cases() as $status)
                        @if($status->value !== $invoice->status->value)
                            <li>
                                <a class="flex items-center px-4 py-2.5 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-900 status-option cursor-pointer"
                                   @click.prevent="open = false"
                                   data-invoice-id="{{ $invoice->id }}"
                                   data-new-status="{{ $status->value }}"
                                   data-status-display="{{ Str::headline($status->value) }}">
                                    @php
                                        $dotColorMap = [
                                            'created' => 'bg-zinc-500',
                                            'open' => 'bg-indigo-500',
                                            'confirmed' => 'bg-teal-500',
                                            'in-design' => 'bg-orange-500',
                                            'in_design' => 'bg-orange-500',
                                            'out-for-delivery' => 'bg-sky-500',
                                            'out_for_delivery' => 'bg-sky-500',
                                            'email_sent' => 'bg-sky-500',
                                            'completed' => 'bg-emerald-500',
                                            'paid' => 'bg-emerald-500',
                                            'cancelled' => 'bg-rose-500',
                                        ];
                                    @endphp
                                    <span class="w-2 h-2 rounded-full mr-2.5 {{ $dotColorMap[$status->value] ?? 'bg-zinc-500' }}"></span>
                                    {{ Str::headline($status->value) }}
                                </a>
                            </li>
                        @endif
                    @endforeach
                </ul>
            </div>
        </td>
        <td class="py-4 px-4 time align-middle text-zinc-500 dark:text-zinc-400" data-order="{{ $invoice->order?->order_date?->timestamp ?? 0 }}">
            {{ $invoice->order?->formatted_order_date }}
        </td>
        <td class="py-4 px-4 time align-middle text-zinc-500 dark:text-zinc-400" data-order="{{ $invoice->order?->delivery_date?->timestamp ?? 0 }}">
            {{ $invoice->order?->formatted_delivery_date }}
        </td>
        <td class="py-4 px-4 align-middle text-center relative">
            <div x-data="{ open: false }" @click.outside="open = false" class="inline-block text-left relative">
                <!-- Dropdown Trigger (3 dots icon) -->
                <button @click="open = !open" class="p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-lg transition-colors text-zinc-500 dark:text-zinc-400 cursor-pointer" type="button" aria-expanded="false">
                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
                    </svg>
                </button>

                <!-- Dropdown Menu -->
                <ul x-show="open" 
                    x-transition:enter="transition ease-out duration-100"
                    x-transition:enter-start="opacity-0 scale-95"
                    x-transition:enter-end="opacity-100 scale-100"
                    x-transition:leave="transition ease-in duration-75"
                    x-transition:leave-start="opacity-100 scale-100"
                    x-transition:leave-end="opacity-0 scale-95"
                    style="display: none;"
                    class="absolute right-0 mt-2 z-40 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-xl shadow-xl py-1 w-56">
                    <!-- Pay Now Button (Conditional) -->
                    @if($invoice->order && $invoice->order->order_type && !in_array($invoice->order->order_type, [OrderType::Wired->value, OrderType::Web->value]))
                        @isset($invoice->status->value)
                            @php
                                // Check if payment is needed: invoice is open AND order is not fully paid
                                $needsPayment = in_array($invoice->status->value, ['open', 'confirmed', 'in-design', 'in_design'])
                                    && !$invoice->order->isPaid()
                                    && $invoice->order->total > 0;
                            @endphp
                            @if($needsPayment)
                                <li>
                                    <button class="flex items-center px-4 py-2.5 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-colors w-full text-left font-medium cursor-pointer"
                                            @click="window.dispatchEvent(new CustomEvent('open-payment-modal', { detail: { invoiceNumber: '{{ $invoice->compact_invoice_number }}', amount: '{{ $invoice->order->total }}' } }))">
                                        <svg class="w-4 h-4 mr-2.5 text-zinc-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" /></svg> Pay Now
                                    </button>
                                </li>
                            @endif
                        @endisset
                    @endif

                    <!-- View/Edit Order Buttons -->
                    @isset($invoice->order)
                        <li>
                            <button class="flex items-center px-4 py-2.5 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-colors w-full text-left font-medium cursor-pointer preview-btn"
                                            @click="window.dispatchEvent(new CustomEvent('open-order-preview', { detail: { orderId: {{ $invoice->order->id }} } }))">
                                        <svg class="w-4 h-4 mr-2.5 text-zinc-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg> Preview
                            </button>
                        </li>
                        <li>
                            <a target="_blank" class="flex items-center px-4 py-2.5 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-colors w-full text-left font-medium cursor-pointer" href="{{ route('invoices.show', encrypt($invoice->id)) }}">
                                <svg class="w-4 h-4 mr-2.5 text-zinc-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg> View Invoice
                            </a>
                        </li>
                        <li>
                            <a class="flex items-center px-4 py-2.5 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-colors w-full text-left font-medium cursor-pointer" href="{{ route('orders.edit', ['order' => $invoice->order]) }}">
                                <svg class="w-4 h-4 mr-2.5 text-zinc-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg> Edit Order
                            </a>
                        </li>
                        <li class="h-px bg-zinc-150 dark:bg-zinc-800 my-1"></li>
                        @if($invoice->sale)
                            <li>
                                <a class="flex items-center px-4 py-2.5 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-colors w-full text-left font-medium cursor-pointer" href="{{ route('sales.edit', [$invoice->sale, 'redirect_to' => 'invoices']) }}">
                                    <svg class="w-4 h-4 mr-2.5 text-zinc-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" /></svg> View Sale Record
                                </a>
                            </li>
                        @else
                            <li>
                                <a class="flex items-center px-4 py-2.5 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-colors w-full text-left font-medium cursor-pointer" href="{{ route('sales.create', ['invoice_id' => $invoice->id, 'redirect_to' => 'invoices']) }}">
                                    <svg class="w-4 h-4 mr-2.5 text-zinc-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> Add to Sales
                                </a>
                            </li>
                        @endif
                    @else
                        <li>
                            <a class="flex items-center px-4 py-2.5 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-colors w-full text-left font-medium cursor-pointer" href="{{ route('orders.create', ['secure_id' => encrypt($invoice->id)]) }}">
                                <svg class="w-4 h-4 mr-2.5 text-zinc-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> Add Order
                            </a>
                        </li>
                    @endisset

                    <!-- Recipe Actions (Conditional) -->
                    @if ($invoice->status === InvoiceStatus::Completed)
                        @if ($invoice->flowerRecipe)
                            <li>
                                <a class="flex items-center px-4 py-2.5 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-colors w-full text-left font-medium cursor-pointer" href="{{ route('recipes.show', encrypt($invoice->id)) }}">
                                    <svg class="w-4 h-4 mr-2.5 text-zinc-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" /></svg> View Recipe
                                </a>
                            </li>
                            <li>
                                <a class="flex items-center px-4 py-2.5 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-colors w-full text-left font-medium cursor-pointer" href="{{ route('recipes.edit', [encrypt($invoice->id), $invoice->flowerRecipe]) }}">
                                    <svg class="w-4 h-4 mr-2.5 text-zinc-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" /></svg> Edit Recipe
                                </a>
                            </li>
                        @else
                            <li>
                                <a class="flex items-center px-4 py-2.5 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-colors w-full text-left font-medium cursor-pointer" href="{{ route('recipes.create', encrypt($invoice->id)) }}">
                                    <svg class="w-4 h-4 mr-2.5 text-zinc-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" /></svg> Log Recipe
                                </a>
                            </li>
                        @endif
                    @endif

                    @if($invoice->order && in_array($invoice->order->order_type, [OrderType::Phone->value, OrderType::Email->value]))
                        <li>
                            <button class="flex items-center px-4 py-2.5 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-colors w-full text-left font-medium cursor-pointer send-email-btn"
                                    @click="window.dispatchEvent(new CustomEvent('open-email-modal', { detail: { invoiceId: {{ $invoice->id }}, customerName: '{{ addslashes($invoice->order->customer->name ?? '') }}', customerEmail: '{{ $invoice->order->customer->email ?? '' }}' } }))">
                                <svg class="w-4 h-4 mr-2.5 text-zinc-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" /></svg> Send Confirmation
                            </button>
                        </li>
                        @if(in_array($invoice->status->value, ['open', 'confirmed', 'in-design', 'in_design']) && !$invoice->order->isPaid())
                            <li>
                                <button class="flex items-center px-4 py-2.5 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-colors w-full text-left font-medium cursor-pointer send-payment-link-btn"
                                        data-invoice-id="{{ $invoice->id }}"
                                        onclick="sendPaymentLink({{ $invoice->id }}, this)">
                                    <svg class="w-4 h-4 mr-2.5 text-zinc-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg> Send Payment Link
                                </button>
                            </li>
                        @endif
                    @endif
                </ul>
            </div>
        </td>
    </tr>
@empty
    <tr><td colspan="10" class="py-8 text-center text-zinc-500 dark:text-zinc-500 font-medium">No invoice logged.</td></tr>
@endforelse

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Function to send payment link
            window.sendPaymentLink = async function(invoiceId, button) {
                try {
                    // Show immediate loading state with Swal since dropdown closes
                    window.showSwal({
                        title: 'Sending Payment Link',
                        html: 'Please wait while we generate the link and notify the customer...',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    const originalContent = button.innerHTML;
                    button.disabled = true;
                    button.innerHTML = '<span class="animate-spin inline-block w-4 h-4 border-2 border-current border-t-transparent rounded-full mr-2"></span>Sending...';

                    const response = await axios.post(`/invoices/${invoiceId}/send-payment-link`, {
                        _token: '{{ csrf_token() }}'
                    });

                    if (response.data.success) {
                        window.showToast('success', 'Payment link has been sent to the customer.');
                    } else {
                        throw new Error(response.data.message || 'Failed to send payment link');
                    }
                } catch (error) {
                    console.error('Payment link error:', error);

                    let errorTitle = 'Error';
                    let errorText = error.message || 'An unexpected error occurred.';

                    // Handle common mail issues specifically
                    if (errorText.includes('401') || errorText.includes('Forbidden')) {
                        errorTitle = 'Mail Configuration Error';
                        errorText = 'The email system (Mailgun) returned a 401 Forbidden error. This usually means the API key or domain configuration is invalid. Please check your .env settings.';
                    }

                    window.showSwal({
                        icon: 'error',
                        title: errorTitle,
                        text: errorText,
                    });
                } finally {
                    button.disabled = false;
                    button.innerHTML = '<i class="uil uil-link mr-2.5"></i> Send Payment Link';
                }
            };

            // 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
                    window.showSwal({
                        title: 'Confirm Status Change',
                        html: `
                            <div class="text-start space-y-4">
                                <p class="text-zinc-650 dark:text-zinc-400">Are you sure you want to change this invoice status?</p>
                                <div class="flex items-center gap-3 py-2 px-3 bg-zinc-50 dark:bg-zinc-950 border border-zinc-150 dark:border-zinc-800 rounded-lg">
                                    <span class="inline-flex px-2.5 py-1 text-xs font-semibold rounded-full ${getBadgeClassForStatus(currentStatus)}">${currentStatusDisplay}</span>
                                    <span class="text-zinc-400 font-bold">→</span>
                                    <span class="inline-flex px-2.5 py-1 text-xs font-semibold rounded-full ${getBadgeClassForStatus(newStatus)}">${newStatusDisplay}</span>
                                </div>
                                ${getStatusChangeSideEffects(newStatus, currentStatus)}
                            </div>
                        `,
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonText: 'Update Status',
                        cancelButtonText: 'Cancel',
                        confirmButtonColor: '#059669', // Emerald 600
                        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) {
                        dropdownButton.disabled = true;
                        dropdownButton.innerHTML = '<span class="animate-spin inline-block w-3.5 h-3.5 border-2 border-current border-t-transparent rounded-full mr-1.5"></span>Updating...';
                        dropdownButton.classList.add('status-changing');
                    }

                    const response = await axios.post('/invoices/update-status', {
                        invoice_id: parseInt(invoiceId),
                        new_status: newStatus,
                        _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-emerald-600 dark:text-emerald-450">✓ Delivery team notified</small>';
                        }
                        if (sideEffects.order_status_updated) {
                            successMessage += '<br><small class="text-emerald-600 dark:text-emerald-450">✓ Order status updated</small>';
                        }
                        if (sideEffects.refund_initiated) {
                            successMessage += '<br><small class="text-amber-600 dark:text-amber-450">✓ Refund processing initiated</small>';
                        }
                        if (sideEffects.email_sent) {
                            successMessage += '<br><small class="text-sky-650 dark:text-sky-450">✓ Email confirmation sent</small>';
                        }
                        if (sideEffects.completion_processed) {
                            successMessage += '<br><small class="text-emerald-600 dark:text-emerald-450">✓ Order completion processed</small>';
                        }

                        window.showSwal({
                            icon: 'success',
                            title: 'Status Updated',
                            html: successMessage,
                            timer: 4000
                        });

                        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;
                    }

                    window.showSwal({
                        icon: 'error',
                        title: 'Update Failed',
                        text: errorMessage
                    });
                } finally {
                    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 using Alpine event
                dropdownButton.dispatchEvent(new Event('close-dropdown', { bubbles: true }));
            }

            function updateButtonClass(button, status) {
                button.className = button.className.replace(/\b(bg|text|border|ring)-\S+/g, '');
                button.classList.add('inline-flex', 'items-center', 'gap-1.5', 'px-2.5', 'py-1.5', 'text-xs', 'font-semibold', 'rounded-full', 'shadow-sm', 'transition-all', 'status-badge');

                const statusClass = getBadgeClassForStatus(status);
                button.classList.add(...statusClass.split(' '));

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

            function updateDropdownOptions(menu, newStatus, previousStatus, invoiceId) {
                const selectedOption = menu.querySelector(`.status-option[data-new-status="${newStatus}"]`);
                if (selectedOption) {
                    selectedOption.remove();
                }

                const previousStatusItem = document.createElement('li');
                const previousStatusDisplay = formatStatusText(previousStatus);
                const colorMap = {
                    'created': 'bg-zinc-500',
                    'open': 'bg-indigo-500',
                    'confirmed': 'bg-teal-500',
                    'in-design': 'bg-orange-500',
                    'in_design': 'bg-orange-500',
                    'out-for-delivery': 'bg-sky-500',
                    'out_for_delivery': 'bg-sky-500',
                    'email_sent': 'bg-sky-500',
                    'completed': 'bg-emerald-500',
                    'paid': 'bg-emerald-500',
                    'cancelled': 'bg-rose-500'
                };
                const colorClass = colorMap[previousStatus] || 'bg-zinc-500';

                previousStatusItem.innerHTML = `
                    <a class="flex items-center px-4 py-2.5 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-900 status-option cursor-pointer"
                       href="#"
                       data-invoice-id="${invoiceId}"
                       data-new-status="${previousStatus}"
                       data-status-display="${previousStatusDisplay}">
                        <span class="w-2 h-2 rounded-full mr-2.5 ${colorClass}"></span>
                        ${previousStatusDisplay}
                    </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) {
                        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-3 bg-zinc-50 dark:bg-zinc-950 border border-zinc-150 dark:border-zinc-800 rounded-lg">
                            <small class="text-emerald-600 dark:text-emerald-450 font-bold block mb-1.5">
                                <span class="uil uil-truck mr-1"></span> Side Effects:
                            </small>
                            <ul class="space-y-1 text-xs text-zinc-500 dark:text-zinc-400">
                                <li class="flex items-center gap-1.5"><span class="uil uil-bell text-emerald-500 text-[10px]"></span> Delivery team will be notified</li>
                                <li class="flex items-center gap-1.5"><span class="uil uil-sync text-emerald-500 text-[10px]"></span> Order status will be updated</li>
                                <li class="flex items-center gap-1.5"><span class="uil uil-clipboard-notes text-emerald-500 text-[10px]"></span> Delivery preparation started</li>
                            </ul>
                        </div>
                    `,
                    'completed': `
                        <div class="mt-3 p-3 bg-zinc-50 dark:bg-zinc-950 border border-zinc-150 dark:border-zinc-800 rounded-lg">
                            <small class="text-emerald-600 dark:text-emerald-450 font-bold block mb-1.5">
                                <span class="uil uil-check-circle mr-1"></span> Side Effects:
                            </small>
                            <ul class="space-y-1 text-xs text-zinc-500 dark:text-zinc-400">
                                <li class="flex items-center gap-1.5"><span class="uil uil-flag text-emerald-500 text-[10px]"></span> Order will be marked as completed</li>
                                <li class="flex items-center gap-1.5"><span class="uil uil-envelope text-emerald-500 text-[10px]"></span> Customer confirmation may be sent</li>
                                <li class="flex items-center gap-1.5"><span class="uil uil-chart-line text-emerald-500 text-[10px]"></span> Analytics will be updated</li>
                            </ul>
                        </div>
                    `,
                    'cancelled': `
                        <div class="mt-3 p-3 bg-zinc-50 dark:bg-zinc-950 border border-zinc-150 dark:border-zinc-800 rounded-lg">
                            <small class="text-rose-600 dark:text-rose-450 font-bold block mb-1.5">
                                <span class="uil uil-times-circle mr-1"></span> Side Effects:
                            </small>
                            <ul class="space-y-1 text-xs text-zinc-500 dark:text-zinc-400">
                                <li class="flex items-center gap-1.5"><span class="uil uil-ban text-rose-500 text-[10px]"></span> Order will be cancelled</li>
                                <li class="flex items-center gap-1.5"><span class="uil uil-money-bill text-rose-500 text-[10px]"></span> Refund may be processed if payment was made</li>
                                <li class="flex items-center gap-1.5"><span class="uil uil-database text-rose-500 text-[10px]"></span> Inventory may be updated</li>
                            </ul>
                        </div>
                    `,
                    'email_sent': `
                        <div class="mt-3 p-3 bg-zinc-50 dark:bg-zinc-950 border border-zinc-150 dark:border-zinc-800 rounded-lg">
                            <small class="text-sky-600 dark:text-sky-450 font-bold block mb-1.5">
                                <span class="uil uil-envelope mr-1"></span> Side Effects:
                            </small>
                            <ul class="space-y-1 text-xs text-zinc-500 dark:text-zinc-400">
                                <li class="flex items-center gap-1.5"><span class="uil uil-message text-sky-500 text-[10px]"></span> Email confirmation will be sent to customer</li>
                                <li class="flex items-center gap-1.5"><span class="uil uil-clock text-sky-500 text-[10px]"></span> Email tracking will be initiated</li>
                            </ul>
                        </div>
                    `,
                    'in_design': `
                        <div class="mt-3 p-3 bg-zinc-50 dark:bg-zinc-950 border border-zinc-150 dark:border-zinc-800 rounded-lg">
                            <small class="text-amber-600 dark:text-amber-450 font-bold block mb-1.5">
                                <span class="uil uil-palette mr-1"></span> Side Effects:
                            </small>
                            <ul class="space-y-1 text-xs text-zinc-500 dark:text-zinc-400">
                                <li class="flex items-center gap-1.5"><span class="uil uil-brush-alt text-amber-500 text-[10px]"></span> Design team will be notified</li>
                                <li class="flex items-center gap-1.5"><span class="uil uil-clock text-amber-500 text-[10px]"></span> Design workflow will be initiated</li>
                            </ul>
                        </div>
                    `,
                    'confirmed': `
                        <div class="mt-3 p-3 bg-zinc-50 dark:bg-zinc-950 border border-zinc-150 dark:border-zinc-800 rounded-lg">
                            <small class="text-emerald-600 dark:text-emerald-450 font-bold block mb-1.5">
                                <span class="uil uil-check mr-1"></span> Side Effects:
                            </small>
                            <ul class="space-y-1 text-xs text-zinc-500 dark:text-zinc-400">
                                <li class="flex items-center gap-1.5"><span class="uil uil-thumbs-up text-emerald-500 text-[10px]"></span> Order will be confirmed</li>
                                <li class="flex items-center gap-1.5"><span class="uil uil-cogs text-emerald-500 text-[10px]"></span> Production may be scheduled</li>
                            </ul>
                        </div>
                    `
                };

                return effects[newStatus] || '';
            }

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

            window.getBadgeClassForStatus = function(status) {
                const statusClasses = {
                    'created': 'bg-zinc-500/10 text-zinc-650 dark:text-zinc-400 border border-zinc-500/20',
                    'open': 'bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 border border-indigo-500/20',
                    'confirmed': 'bg-teal-500/10 text-teal-600 dark:text-teal-400 border border-teal-500/20',
                    'in-design': 'bg-orange-500/10 text-orange-600 dark:text-orange-400 border border-orange-500/20',
                    'in_design': 'bg-orange-500/10 text-orange-600 dark:text-orange-400 border border-orange-500/20',
                    'out-for-delivery': 'bg-sky-500/10 text-sky-600 dark:text-sky-400 border border-sky-500/20',
                    'out_for_delivery': 'bg-sky-500/10 text-sky-600 dark:text-sky-400 border border-sky-500/20',
                    'email_sent': 'bg-sky-500/10 text-sky-600 dark:text-sky-400 border border-sky-500/20',
                    'completed': 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20',
                    'paid': 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20',
                    'cancelled': 'bg-rose-500/10 text-rose-600 dark:text-rose-400 border border-rose-500/20'
                };
                return statusClasses[status] || 'bg-zinc-500/10 text-zinc-650 border border-zinc-500/20';
            }

            function refreshDashboardActivities() {
                const activitiesContainer = document.querySelector('[data-activity-container]');
                if (activitiesContainer) {
                    window.dispatchEvent(new CustomEvent('refreshActivities'));
                }

                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