{# app/templates/vendor/invoices.html #}
{% extends "vendor/base.html" %}

{% block title %}Invoices{% endblock %}

{% block alpine_data %}vendorInvoices(){% endblock %}

{% block extra_scripts %}
<script src="/static/vendor/js/invoices.js"></script>
{% endblock %}

{% block content %}
<!-- Page Header -->
<div class="flex items-center justify-between my-6">
    <div>
        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
            Invoices
        </h2>
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
            Create and manage invoices for your orders
        </p>
    </div>
    <div class="flex gap-2">
        <button
            @click="openCreateModal()"
            :disabled="!hasSettings"
            class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed"
            :title="!hasSettings ? 'Configure invoice settings first' : 'Create new invoice'"
        >
            <span x-html="$icon('plus', 'w-4 h-4 mr-2')"></span>
            Create Invoice
        </button>
        <button
            @click="refreshData()"
            :disabled="loading"
            class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-300 transition-colors duration-150 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none disabled:opacity-50"
        >
            <span x-show="!loading" x-html="$icon('refresh', 'w-4 h-4 mr-2')"></span>
            <span x-show="loading" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
            Refresh
        </button>
    </div>
</div>

<!-- Success Message -->
<div x-show="successMessage" x-transition class="mb-6 p-4 bg-green-100 dark:bg-green-900/30 border border-green-400 dark:border-green-600 text-green-700 dark:text-green-300 rounded-lg flex items-start">
    <span x-html="$icon('check-circle', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
    <div>
        <p class="font-semibold" x-text="successMessage"></p>
    </div>
    <button @click="successMessage = ''" class="ml-auto text-green-700 dark:text-green-300 hover:text-green-900">
        <span x-html="$icon('x', 'w-4 h-4')"></span>
    </button>
</div>

<!-- Error Message -->
<div x-show="error" x-transition class="mb-6 p-4 bg-red-100 dark:bg-red-900/30 border border-red-400 dark:border-red-600 text-red-700 dark:text-red-300 rounded-lg flex items-start">
    <span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
    <div>
        <p class="font-semibold">Error</p>
        <p class="text-sm" x-text="error"></p>
    </div>
    <button @click="error = ''" class="ml-auto text-red-700 dark:text-red-300 hover:text-red-900">
        <span x-html="$icon('x', 'w-4 h-4')"></span>
    </button>
</div>

<!-- Settings Warning -->
<div x-show="!hasSettings && !loading" x-transition class="mb-6 p-4 bg-yellow-100 dark:bg-yellow-900/30 border border-yellow-400 dark:border-yellow-600 text-yellow-700 dark:text-yellow-300 rounded-lg">
    <div class="flex items-start">
        <span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
        <div class="flex-1">
            <p class="font-semibold">Invoice Settings Required</p>
            <p class="text-sm mt-1">Configure your company details and invoice preferences before creating invoices.</p>
            <button
                @click="activeTab = 'settings'"
                class="mt-3 inline-flex items-center px-3 py-1.5 text-sm font-medium text-yellow-800 bg-yellow-200 rounded-lg hover:bg-yellow-300"
            >
                <span x-html="$icon('cog', 'w-4 h-4 mr-2')"></span>
                Configure Settings
            </button>
        </div>
    </div>
</div>

<!-- Tabs -->
<div class="mb-6">
    <div class="flex border-b border-gray-200 dark:border-gray-700">
        <button
            @click="activeTab = 'invoices'"
            :class="activeTab === 'invoices' ? 'border-purple-600 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'"
            class="px-4 py-2 text-sm font-medium border-b-2 transition-colors"
        >
            <span class="flex items-center">
                <span x-html="$icon('document-text', 'w-4 h-4 mr-2')"></span>
                Invoices
                <span x-show="stats.total_invoices > 0" class="ml-2 px-2 py-0.5 text-xs bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-300 rounded-full" x-text="stats.total_invoices"></span>
            </span>
        </button>
        <button
            @click="activeTab = 'settings'"
            :class="activeTab === 'settings' ? 'border-purple-600 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'"
            class="px-4 py-2 text-sm font-medium border-b-2 transition-colors"
        >
            <span class="flex items-center">
                <span x-html="$icon('cog', 'w-4 h-4 mr-2')"></span>
                Settings
                <span x-show="!hasSettings" class="ml-2 w-2 h-2 bg-yellow-500 rounded-full"></span>
            </span>
        </button>
    </div>
</div>

<!-- Invoices Tab -->
<div x-show="activeTab === 'invoices'" x-transition>
    <!-- Stats Cards -->
    <div class="grid gap-6 mb-8 md:grid-cols-4">
        <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
            <div class="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:bg-blue-900">
                <span x-html="$icon('document-text', 'w-5 h-5')"></span>
            </div>
            <div>
                <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Total Invoices</p>
                <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.total_invoices"></p>
            </div>
        </div>
        <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
            <div class="p-3 mr-4 text-gray-500 bg-gray-100 rounded-full dark:bg-gray-700">
                <span x-html="$icon('pencil', 'w-5 h-5')"></span>
            </div>
            <div>
                <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Draft</p>
                <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.draft_count"></p>
            </div>
        </div>
        <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
            <div class="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:bg-orange-900">
                <span x-html="$icon('paper-airplane', 'w-5 h-5')"></span>
            </div>
            <div>
                <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Issued</p>
                <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.issued_count"></p>
            </div>
        </div>
        <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
            <div class="p-3 mr-4 text-green-500 bg-green-100 rounded-full dark:bg-green-900">
                <span x-html="$icon('check-circle', 'w-5 h-5')"></span>
            </div>
            <div>
                <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Paid</p>
                <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.paid_count"></p>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="mb-4 flex flex-wrap gap-4">
        <select
            x-model="filters.status"
            @change="loadInvoices()"
            class="px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
        >
            <option value="">All Status</option>
            <option value="draft">Draft</option>
            <option value="issued">Issued</option>
            <option value="paid">Paid</option>
            <option value="cancelled">Cancelled</option>
        </select>
    </div>

    <!-- Invoices Table -->
    <div class="w-full overflow-hidden rounded-lg shadow-xs">
        <div class="w-full overflow-x-auto">
            <table class="w-full whitespace-no-wrap">
                <thead>
                    <tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
                        <th class="px-4 py-3">Invoice #</th>
                        <th class="px-4 py-3">Customer</th>
                        <th class="px-4 py-3">Date</th>
                        <th class="px-4 py-3">Amount</th>
                        <th class="px-4 py-3">Status</th>
                        <th class="px-4 py-3">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                    <template x-if="loading && invoices.length === 0">
                        <tr>
                            <td colspan="6" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
                                <span x-html="$icon('spinner', 'w-6 h-6 mx-auto mb-2')"></span>
                                <p>Loading invoices...</p>
                            </td>
                        </tr>
                    </template>
                    <template x-if="!loading && invoices.length === 0">
                        <tr>
                            <td colspan="6" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
                                <span x-html="$icon('document-text', 'w-12 h-12 mx-auto mb-2 text-gray-300')"></span>
                                <p class="font-medium">No invoices yet</p>
                                <p class="text-sm mt-1" x-show="hasSettings">Click "Create Invoice" to generate your first invoice</p>
                                <p class="text-sm mt-1" x-show="!hasSettings">Configure invoice settings first to get started</p>
                            </td>
                        </tr>
                    </template>
                    <template x-for="invoice in invoices" :key="invoice.id">
                        <tr class="text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">
                            <td class="px-4 py-3">
                                <div class="flex items-center text-sm">
                                    <div>
                                        <p class="font-semibold" x-text="invoice.invoice_number"></p>
                                        <p class="text-xs text-gray-500" x-text="'Order #' + (invoice.order_id || 'N/A')"></p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-4 py-3 text-sm">
                                <p x-text="invoice.buyer_name || 'N/A'"></p>
                            </td>
                            <td class="px-4 py-3 text-sm">
                                <span x-text="formatDate(invoice.invoice_date)"></span>
                            </td>
                            <td class="px-4 py-3 text-sm font-semibold">
                                <span x-text="formatCurrency(invoice.total_cents, invoice.currency)"></span>
                            </td>
                            <td class="px-4 py-3 text-xs">
                                <span
                                    class="px-2 py-1 font-semibold leading-tight rounded-full"
                                    :class="{
                                        'text-gray-700 bg-gray-100 dark:bg-gray-700 dark:text-gray-300': invoice.status === 'draft',
                                        'text-orange-700 bg-orange-100 dark:bg-orange-700 dark:text-orange-100': invoice.status === 'issued',
                                        'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100': invoice.status === 'paid',
                                        'text-red-700 bg-red-100 dark:bg-red-700 dark:text-red-100': invoice.status === 'cancelled'
                                    }"
                                    x-text="invoice.status.toUpperCase()"
                                ></span>
                            </td>
                            <td class="px-4 py-3">
                                <div class="flex items-center space-x-2 text-sm">
                                    <button
                                        @click="downloadPDF(invoice)"
                                        class="flex items-center justify-center px-2 py-1 text-sm text-purple-600 transition-colors duration-150 rounded-md hover:bg-purple-100 dark:hover:bg-purple-900"
                                        title="Download PDF"
                                    >
                                        <span x-html="$icon('download', 'w-4 h-4')"></span>
                                    </button>
                                    <button
                                        x-show="invoice.status === 'draft'"
                                        @click="updateStatus(invoice, 'issued')"
                                        class="flex items-center justify-center px-2 py-1 text-sm text-blue-600 transition-colors duration-150 rounded-md hover:bg-blue-100 dark:hover:bg-blue-900"
                                        title="Mark as Issued"
                                    >
                                        <span x-html="$icon('paper-airplane', 'w-4 h-4')"></span>
                                    </button>
                                    <button
                                        x-show="invoice.status === 'issued'"
                                        @click="updateStatus(invoice, 'paid')"
                                        class="flex items-center justify-center px-2 py-1 text-sm text-green-600 transition-colors duration-150 rounded-md hover:bg-green-100 dark:hover:bg-green-900"
                                        title="Mark as Paid"
                                    >
                                        <span x-html="$icon('check', 'w-4 h-4')"></span>
                                    </button>
                                    <button
                                        x-show="invoice.status !== 'cancelled' && invoice.status !== 'paid'"
                                        @click="updateStatus(invoice, 'cancelled')"
                                        class="flex items-center justify-center px-2 py-1 text-sm text-red-600 transition-colors duration-150 rounded-md hover:bg-red-100 dark:hover:bg-red-900"
                                        title="Cancel Invoice"
                                    >
                                        <span x-html="$icon('x', 'w-4 h-4')"></span>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
        <!-- Pagination -->
        <div x-show="totalInvoices > perPage" class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 bg-gray-50 sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-800">
            <span class="flex items-center col-span-3">
                Showing <span x-text="((page - 1) * perPage) + 1" class="mx-1"></span>-<span x-text="Math.min(page * perPage, totalInvoices)" class="mx-1"></span> of <span x-text="totalInvoices" class="mx-1"></span>
            </span>
            <span class="col-span-2"></span>
            <span class="flex col-span-4 mt-2 sm:mt-auto sm:justify-end">
                <nav aria-label="Table navigation">
                    <ul class="inline-flex items-center">
                        <li>
                            <button
                                @click="page--; loadInvoices()"
                                :disabled="page <= 1"
                                class="px-3 py-1 rounded-md rounded-l-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
                            >
                                <span x-html="$icon('chevron-left', 'w-4 h-4')"></span>
                            </button>
                        </li>
                        <li>
                            <button
                                @click="page++; loadInvoices()"
                                :disabled="page * perPage >= totalInvoices"
                                class="px-3 py-1 rounded-md rounded-r-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
                            >
                                <span x-html="$icon('chevron-right', 'w-4 h-4')"></span>
                            </button>
                        </li>
                    </ul>
                </nav>
            </span>
        </div>
    </div>
</div>

<!-- Settings Tab -->
<div x-show="activeTab === 'settings'" x-transition>
    <div class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
        <div class="p-6">
            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
                Invoice Settings
            </h3>
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">
                Configure your company details and preferences for invoice generation.
            </p>

            <form @submit.prevent="saveSettings()">
                <!-- Company Information -->
                <div class="mb-8">
                    <h4 class="text-md font-medium text-gray-700 dark:text-gray-300 mb-4 pb-2 border-b dark:border-gray-700">
                        Company Information
                    </h4>
                    <div class="grid gap-6 md:grid-cols-2">
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                                Company Name <span class="text-red-500">*</span>
                            </label>
                            <input
                                type="text"
                                x-model="settingsForm.company_name"
                                required
                                placeholder="Your Company S.A."
                                class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
                            />
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                                Address
                            </label>
                            <input
                                type="text"
                                x-model="settingsForm.company_address"
                                placeholder="123 Main Street"
                                class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
                            />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                                City
                            </label>
                            <input
                                type="text"
                                x-model="settingsForm.company_city"
                                placeholder="Luxembourg"
                                class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
                            />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                                Postal Code
                            </label>
                            <input
                                type="text"
                                x-model="settingsForm.company_postal_code"
                                placeholder="L-1234"
                                class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
                            />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                                Country
                            </label>
                            <select
                                x-model="settingsForm.company_country"
                                class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
                            >
                                <option value="LU">Luxembourg</option>
                                <option value="DE">Germany</option>
                                <option value="FR">France</option>
                                <option value="BE">Belgium</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                                VAT Number
                            </label>
                            <input
                                type="text"
                                x-model="settingsForm.vat_number"
                                placeholder="LU12345678"
                                class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
                            />
                        </div>
                    </div>
                </div>

                <!-- Invoice Numbering -->
                <div class="mb-8">
                    <h4 class="text-md font-medium text-gray-700 dark:text-gray-300 mb-4 pb-2 border-b dark:border-gray-700">
                        Invoice Numbering
                    </h4>
                    <div class="grid gap-6 md:grid-cols-2">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                                Invoice Prefix
                            </label>
                            <input
                                type="text"
                                x-model="settingsForm.invoice_prefix"
                                placeholder="INV"
                                class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
                            />
                            <p class="mt-1 text-xs text-gray-500">Example: INV-2024-00001</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                                Default VAT Rate (%)
                            </label>
                            <select
                                x-model="settingsForm.default_vat_rate"
                                class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
                            >
                                <option value="17.00">17% (Standard)</option>
                                <option value="14.00">14% (Intermediate)</option>
                                <option value="8.00">8% (Reduced)</option>
                                <option value="3.00">3% (Super-reduced)</option>
                                <option value="0.00">0% (Exempt)</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Bank Details -->
                <div class="mb-8">
                    <h4 class="text-md font-medium text-gray-700 dark:text-gray-300 mb-4 pb-2 border-b dark:border-gray-700">
                        Bank Details
                    </h4>
                    <div class="grid gap-6 md:grid-cols-2">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                                Bank Name
                            </label>
                            <input
                                type="text"
                                x-model="settingsForm.bank_name"
                                placeholder="BCEE Luxembourg"
                                class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
                            />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                                IBAN
                            </label>
                            <input
                                type="text"
                                x-model="settingsForm.bank_iban"
                                placeholder="LU00 0000 0000 0000 0000"
                                class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
                            />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                                BIC/SWIFT
                            </label>
                            <input
                                type="text"
                                x-model="settingsForm.bank_bic"
                                placeholder="BCEELULL"
                                class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
                            />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                                Payment Terms
                            </label>
                            <input
                                type="text"
                                x-model="settingsForm.payment_terms"
                                placeholder="Net 30 days"
                                class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
                            />
                        </div>
                    </div>
                </div>

                <!-- Footer -->
                <div class="mb-8">
                    <h4 class="text-md font-medium text-gray-700 dark:text-gray-300 mb-4 pb-2 border-b dark:border-gray-700">
                        Invoice Footer
                    </h4>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                            Footer Text
                        </label>
                        <textarea
                            x-model="settingsForm.footer_text"
                            rows="3"
                            placeholder="Thank you for your business!"
                            class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
                        ></textarea>
                    </div>
                </div>

                <!-- Save Button -->
                <div class="flex justify-end">
                    <button
                        type="submit"
                        :disabled="savingSettings"
                        class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
                    >
                        <span x-show="!savingSettings" x-html="$icon('save', 'w-4 h-4 mr-2')"></span>
                        <span x-show="savingSettings" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
                        <span x-text="savingSettings ? 'Saving...' : 'Save Settings'"></span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Create Invoice Modal -->
<div
    x-show="showCreateModal"
    x-transition:enter="transition ease-out duration-150"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-in duration-150"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    class="fixed inset-0 z-30 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
    @click.self="showCreateModal = false"
>
    <div
        x-transition:enter="transition ease-out duration-150"
        x-transition:enter-start="opacity-0 transform translate-y-1/2"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0 transform translate-y-1/2"
        class="w-full px-6 py-4 overflow-hidden bg-white rounded-t-lg dark:bg-gray-800 sm:rounded-lg sm:m-4 sm:max-w-md"
        @click.stop
    >
        <header class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Create Invoice</h3>
            <button @click="showCreateModal = false" class="text-gray-400 hover:text-gray-600">
                <span x-html="$icon('x', 'w-5 h-5')"></span>
            </button>
        </header>

        <form @submit.prevent="createInvoice()">
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                    Order ID <span class="text-red-500">*</span>
                </label>
                <input
                    type="number"
                    x-model="createForm.order_id"
                    required
                    placeholder="Enter order ID"
                    class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
                />
                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                    Enter the order ID to generate an invoice for
                </p>
            </div>

            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                    Notes (Optional)
                </label>
                <textarea
                    x-model="createForm.notes"
                    rows="3"
                    placeholder="Any additional notes for the invoice..."
                    class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
                ></textarea>
            </div>

            <div class="flex justify-end gap-3">
                <button
                    type="button"
                    @click="showCreateModal = false"
                    class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50"
                >
                    Cancel
                </button>
                <button
                    type="submit"
                    :disabled="creatingInvoice"
                    class="flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50"
                >
                    <span x-show="creatingInvoice" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
                    <span x-text="creatingInvoice ? 'Creating...' : 'Create Invoice'"></span>
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}