@section("title", "BizMan | Quotations")

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Quotations Management') }}
        </h2>
        <p class="text-gray-500 text-sm">{{ date('l, d M Y') }}</p>
    </x-slot>

    <div>
        <div class="max-w-7xl flex flex-col gap-5 mx-auto sm:px-6 lg:px-8">
            <div class="flex items-center justify-between gap-2">
                <div class="flex flex-col gap-1">
                    <p class="font-semibold text-3xl max-sm:text-2xl text-black">Quotations Management</p>
                    <p>Kelola quotation/penawaran harga</p>
                </div>
                <a href="{{ route('quotations.create') }}"
                    class="bg-blue-500 whitespace-nowrap hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                    Add New Quotation
                </a>
            </div>

            <div class="w-full">
                <form action="{{ route('quotations.index') }}" method="GET" class="w-full">
                    <div class="relative w-full">
                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                            </svg>
                        </div>
                        <input type="text" name="search" id="search"
                            style="padding-left: 3rem; padding-right: 3rem;"
                            class="w-full py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
                            placeholder="Search Quotation.." value="{{ request('search') }}">

                        @if (request('search'))
                            <button type="button"
                                onclick="document.getElementById('search').value=''; this.parentElement.parentElement.submit();"
                                class="absolute inset-y-0 right-3 flex items-center pr-3 text-gray-400 hover:text-gray-600">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                            </button>
                        @endif
                    </div>
                </form>
            </div>

            @if (session('success'))
                <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
                    {{ session('success') }}
                </div>
            @endif

            @if (session('error'))
                <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                    {{ session('error') }}
                </div>
            @endif

            <!-- Quotation Cards -->
            <div class="flex flex-col gap-4">
                @foreach ($quotations as $quotation)
                    <div
                        class="bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-shadow p-6">
                        <!-- Header Section -->
                        <div class="flex justify-between items-start mb-4">
                            <div class="flex-1">
                                <div class="flex items-center justify-between mb-2">
                                    <h3 class="text-xl font-semibold text-gray-900">{{ $quotation->quotation_number }}
                                    </h3>
                                    <div class="flex items-center gap-3">
                                        <span class="text-xl font-bold text-gray-900">Rp
                                            {{ number_format($quotation->total, 0, ',', '.') }}</span>
                                        @if ($quotation->status == 'accepted')
                                            <span
                                                class="px-3 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                                                accepted
                                            </span>
                                        @elseif($quotation->status == 'draft')
                                            <span
                                                class="px-3 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800">
                                                draft
                                            </span>
                                        @elseif($quotation->status == 'sent')
                                            <span
                                                class="px-3 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
                                                sent
                                            </span>
                                        @else
                                            <span
                                                class="px-3 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">
                                                rejected
                                            </span>
                                        @endif
                                    </div>
                                </div>
                                <p class="text-gray-900 font-medium text-base">{{ $quotation->customer->name }}</p>
                                <p class="text-gray-500 text-sm">{{ $quotation->customer->email }}</p>
                            </div>
                        </div>

                        <!-- Info Grid -->
                        <div class="grid grid-cols-4 gap-4 mb-4">
                            <div>
                                <p class="text-sm text-gray-500 mb-1">Tanggal</p>
                                <p class="text-sm font-medium text-gray-900">
                                    {{ \Carbon\Carbon::parse($quotation->quotation_date)->format('d/m/Y') }}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500 mb-1">Valid Hingga</p>
                                <p class="text-sm font-medium text-gray-900">
                                    {{ \Carbon\Carbon::parse($quotation->valid_until)->format('d/m/Y') }}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500 mb-1">Items</p>
                                <p class="text-sm font-medium text-gray-900">{{ $quotation->items->count() }}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500 mb-1">Subtotal</p>
                                <p class="text-sm font-medium text-gray-900">Rp
                                    {{ number_format($quotation->subtotal, 0, ',', '.') }}</p>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="flex justify-between items-center pt-4 border-t border-gray-200">
                            <div class="flex gap-2">
                                <a href="{{ route('quotations.show', $quotation->id) }}"
                                    class="inline-flex items-center gap-2 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm font-medium rounded-lg transition-colors">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                        <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">
                                        </path>
                                    </svg>
                                    Preview
                                </a>

                                @if ($quotation->status == 'accepted')
                                    <!-- Button Create Payment Terms -->
                                    <button
                                        onclick="openPaymentTermModal({{ $quotation->id }}, {{ $quotation->total }})"
                                        class="inline-flex items-center gap-2 px-4 py-2 bg-green-500 hover:bg-green-600 text-white text-sm font-medium rounded-lg transition-colors">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                                        </svg>
                                        Payment Terms
                                    </button>

                                    <!-- Button View Payment Terms -->
                                    <button onclick="viewPaymentTerms({{ $quotation->id }})"
                                        class="inline-flex items-center gap-2 px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white text-sm font-medium rounded-lg transition-colors">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <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 2">
                                            </path>
                                        </svg>
                                        View Terms
                                    </button>
                                @elseif($quotation->status == 'draft')
                                    <!-- Button Change Status -->
                                    <button onclick="changeStatus({{ $quotation->id }}, 'sent')"
                                        class="inline-flex items-center gap-2 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm font-medium rounded-lg transition-colors">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
                                        </svg>
                                        Send
                                    </button>
                                @elseif($quotation->status == 'sent')
                                    <button onclick="changeStatus({{ $quotation->id }}, 'accepted')"
                                        class="inline-flex items-center gap-2 px-4 py-2 bg-green-500 hover:bg-green-600 text-white text-sm font-medium rounded-lg transition-colors">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M5 13l4 4L19 7"></path>
                                        </svg>
                                        Accept
                                    </button>
                                    <button onclick="changeStatus({{ $quotation->id }}, 'rejected')"
                                        class="inline-flex items-center gap-2 px-4 py-2 bg-red-500 hover:bg-red-600 text-white text-sm font-medium rounded-lg transition-colors">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M6 18L18 6M6 6l12 12"></path>
                                        </svg>
                                        Reject
                                    </button>
                                @endif
                            </div>

                            @if ($quotation->status == 'draft' || $quotation->status == 'rejected')
                                <div class="flex gap-2">
                                    <form action="{{ route('quotations.destroy', $quotation->id) }}" method="POST"
                                        class="delete-form inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="button"
                                            class="delete-btn inline-flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-red-50 text-gray-700 hover:text-red-600 text-sm font-medium rounded-lg transition-colors"
                                            data-quotation="{{ $quotation->quotation_number }}">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor"
                                                viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16">
                                                </path>
                                            </svg>
                                            Hapus
                                        </button>
                                    </form>
                                </div>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Modal Create Payment Term -->
    <div id="paymentTermModal"
        class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
        <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-xl font-semibold text-gray-900">Create Payment Terms</h3>
                <button onclick="closePaymentTermModal()" class="text-gray-400 hover:text-gray-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>

            <form id="paymentTermForm" method="POST" action="{{ route('payment-terms.store') }}">
                @csrf
                <input type="hidden" name="quotation_id" id="modal_quotation_id">
                <input type="hidden" name="amount" id="modal_amount">

                <div class="space-y-4">
                    <!-- Term Type -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Term Type</label>
                        <select name="term_type" id="term_type" required
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="full_payment">Full Payment</option>
                            <option value="down_payment">Down Payment</option>
                            <option value="progress_payment" selected>Progress Payment</option>
                            <option value="milestone_payment">Milestone Payment</option>
                            <option value="final_payment">Final Payment</option>
                        </select>
                    </div>

                    <!-- Term Name -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Term Name</label>
                        <input type="text" name="term_name" required placeholder="e.g., Down Payment 30%"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>

                    <!-- Percentage -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Percentage (%)</label>
                        <input type="number" name="percentage" id="percentage" required step="0.01"
                            min="0" max="100" placeholder="30.00" onchange="calculateAmount()"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <p class="text-sm text-gray-500 mt-1">Amount: Rp <span id="calculated_amount">0</span></p>
                    </div>

                    <!-- Milestone Description -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Milestone Description
                            (Optional)</label>
                        <textarea name="milestone_description" rows="3"
                            placeholder="Describe the milestone or condition for this payment..."
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
                    </div>

                    <!-- Due Date -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Due Date (Optional)</label>
                        <input type="date" name="due_date"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>

                    <!-- Sort Order -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Sort Order</label>
                        <input type="number" name="sort_order" value="1" required min="1"
                            placeholder="1"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>

                    <!-- Notes -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Notes (Optional)</label>
                        <textarea name="notes" rows="2" placeholder="Additional notes..."
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
                    </div>
                </div>

                <div class="flex justify-end gap-3 mt-6">
                    <button type="button" onclick="closePaymentTermModal()"
                        class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition">
                        Cancel
                    </button>
                    <button type="submit"
                        class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                        Create Payment Term
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Modal View Payment Terms -->
    <div id="viewPaymentTermsModal"
        class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
        <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-4/5 lg:w-3/4 shadow-lg rounded-md bg-white">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-xl font-semibold text-gray-900">Payment Terms List</h3>
                <button onclick="closeViewPaymentTermsModal()" class="text-gray-400 hover:text-gray-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>

            <div id="paymentTermsList" class="space-y-3">
                <!-- Payment terms will be loaded here via AJAX -->
            </div>
        </div>
    </div>

    @push('scripts')
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script>
            let quotationTotal = 0;

            // Delete Quotation
            document.addEventListener('DOMContentLoaded', function() {
                document.querySelectorAll('.delete-btn').forEach(button => {
                    button.addEventListener('click', function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        const form = this.closest('.delete-form');
                        const quotationNumber = this.getAttribute('data-quotation');

                        Swal.fire({
                            title: 'Apakah Anda yakin?',
                            text: `Anda akan menghapus quotation "${quotationNumber}". Tindakan ini tidak dapat dibatalkan!`,
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#d33',
                            cancelButtonColor: '#3085d6',
                            confirmButtonText: 'Ya, hapus!',
                            cancelButtonText: 'Batal'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                form.submit();
                            }
                        });
                    });
                });
            });

            // Change Status
            function changeStatus(quotationId, status) {
                const statusText = {
                    'sent': 'Kirim',
                    'accepted': 'Terima',
                    'rejected': 'Tolak'
                };

                Swal.fire({
                    title: 'Ubah Status',
                    text: `Apakah Anda yakin ingin ${statusText[status].toLowerCase()} quotation ini?`,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Ya, ' + statusText[status] + '!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Create form and submit
                        const form = document.createElement('form');
                        form.method = 'POST';
                        form.action = `/quotations/${quotationId}/change-status`;

                        const csrfToken = document.createElement('input');
                        csrfToken.type = 'hidden';
                        csrfToken.name = '_token';
                        csrfToken.value = '{{ csrf_token() }}';

                        const methodField = document.createElement('input');
                        methodField.type = 'hidden';
                        methodField.name = '_method';
                        methodField.value = 'PATCH';

                        const statusField = document.createElement('input');
                        statusField.type = 'hidden';
                        statusField.name = 'status';
                        statusField.value = status;

                        form.appendChild(csrfToken);
                        form.appendChild(methodField);
                        form.appendChild(statusField);
                        document.body.appendChild(form);
                        form.submit();
                    }
                });
            }

            // Payment Term Modal Functions
            function openPaymentTermModal(quotationId, total) {
                quotationTotal = total;
                document.getElementById('modal_quotation_id').value = quotationId;
                document.getElementById('paymentTermModal').classList.remove('hidden');
            }

            function closePaymentTermModal() {
                document.getElementById('paymentTermModal').classList.add('hidden');
                document.getElementById('paymentTermForm').reset();
            }

            function calculateAmount() {
                const percentage = parseFloat(document.getElementById('percentage').value) || 0;
                const amount = (quotationTotal * percentage) / 100;
                document.getElementById('calculated_amount').textContent = amount.toLocaleString('id-ID');
                document.getElementById('modal_amount').value = amount;
            }

            // View Payment Terms
            function viewPaymentTerms(quotationId) {
                document.getElementById('viewPaymentTermsModal').classList.remove('hidden');

                // Fetch payment terms via AJAX
                fetch(`/quotations/${quotationId}/payment-terms`)
                    .then(response => response.json())
                    .then(data => {
                        const container = document.getElementById('paymentTermsList');

                        if (data.length === 0) {
                            container.innerHTML = '<p class="text-gray-500 text-center py-8">Belum ada payment terms.</p>';
                            return;
                        }

                        let html = '<div class="space-y-3">';
                        data.forEach((term, index) => {
                            const statusColors = {
                                'pending': 'bg-gray-100 text-gray-800',
                                'invoiced': 'bg-blue-100 text-blue-800',
                                'paid': 'bg-green-100 text-green-800',
                                'cancelled': 'bg-red-100 text-red-800'
                            };

                            html += `
                                <div class="border border-gray-200 rounded-lg p-4">
                                    <div class="flex justify-between items-start mb-2">
                                        <div>
                                            <h4 class="font-semibold text-gray-900">${term.term_name}</h4>
                                            <p class="text-sm text-gray-500">${term.term_type.replace('_', ' ').toUpperCase()}</p>
                                        </div>
                                        <div class="flex items-center gap-2">
                                            <span class="px-3 py-1 text-xs font-semibold rounded-full ${statusColors[term.status]}">
                                                ${term.status}
                                            </span>
                                            ${term.status === 'pending' ? `
                                                                        <button onclick="generateInvoice(${term.id}, ${quotationId})" 
                                                                                class="px-3 py-1 text-xs font-semibold bg-blue-500 hover:bg-blue-600 text-white rounded transition">
                                                                            Generate Invoice
                                                                        </button>
                                                                    ` : ''}
                                        </div>
                                    </div>
                                    <div class="grid grid-cols-2 gap-4 text-sm">
                                        <div>
                                            <p class="text-gray-500">Percentage</p>
                                            <p class="font-medium">${term.percentage}%</p>
                                        </div>
                                        <div>
                                            <p class="text-gray-500">Amount</p>
                                            <p class="font-medium">Rp ${parseFloat(term.amount).toLocaleString('id-ID')}</p>
                                        </div>
                                        ${term.due_date ? `
                                                                <div>
                                                                    <p class="text-gray-500">Due Date</p>
                                                                    <p class="font-medium">${new Date(term.due_date).toLocaleDateString('id-ID')}</p>
                                                                </div>` : ''}
                                        <div>
                                            <p class="text-gray-500">Sort Order</p>
                                            <p class="font-medium">#${term.sort_order}</p>
                                        </div>
                                    </div>
                                    ${term.milestone_description ? `
                                                            <div class="mt-2 pt-2 border-t border-gray-200">
                                                                <p class="text-sm text-gray-500">Milestone</p>
                                                                <p class="text-sm text-gray-700">${term.milestone_description}</p>
                                                            </div>` : ''}
                                    ${term.notes ? `
                                                            <div class="mt-2 pt-2 border-t border-gray-200">
                                                                <p class="text-sm text-gray-500">Notes</p>
                                                                <p class="text-sm text-gray-700">${term.notes}</p>
                                                            </div>` : ''}
                                </div>
                            `;
                        });
                        html += '</div>';

                        container.innerHTML = html;
                    })
                    .catch(error => {
                        document.getElementById('paymentTermsList').innerHTML =
                            '<p class="text-red-500 text-center py-8">Error loading payment terms.</p>';
                    });
            }

            // Generate Invoice from Payment Term
            function generateInvoice(paymentTermId, quotationId) {
                Swal.fire({
                    title: 'Generate Invoice',
                    html: `
                        <div class="text-left space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Invoice Date</label>
                                <input type="date" id="invoice_date" value="${new Date().toISOString().split('T')[0]}" 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Due Date</label>
                                <input type="date" id="due_date" 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Notes (Optional)</label>
                                <textarea id="invoice_notes" rows="3" 
                                          class="w-full px-3 py-2 border border-gray-300 rounded-lg"
                                          placeholder="Additional notes for this invoice..."></textarea>
                            </div>
                        </div>
                    `,
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Generate',
                    cancelButtonText: 'Cancel',
                    preConfirm: () => {
                        const invoiceDate = document.getElementById('invoice_date').value;
                        const dueDate = document.getElementById('due_date').value;
                        const notes = document.getElementById('invoice_notes').value;

                        if (!invoiceDate) {
                            Swal.showValidationMessage('Invoice date is required');
                            return false;
                        }
                        if (!dueDate) {
                            Swal.showValidationMessage('Due date is required');
                            return false;
                        }
                        if (new Date(dueDate) < new Date(invoiceDate)) {
                            Swal.showValidationMessage('Due date must be after invoice date');
                            return false;
                        }

                        return {
                            invoiceDate,
                            dueDate,
                            notes
                        };
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Create form and submit
                        const form = document.createElement('form');
                        form.method = 'POST';
                        form.action = '/invoices/generate';

                        const csrfToken = document.createElement('input');
                        csrfToken.type = 'hidden';
                        csrfToken.name = '_token';
                        csrfToken.value = '{{ csrf_token() }}';

                        const paymentTermField = document.createElement('input');
                        paymentTermField.type = 'hidden';
                        paymentTermField.name = 'payment_term_id';
                        paymentTermField.value = paymentTermId;

                        const quotationField = document.createElement('input');
                        quotationField.type = 'hidden';
                        quotationField.name = 'quotation_id';
                        quotationField.value = quotationId;

                        const invoiceDateField = document.createElement('input');
                        invoiceDateField.type = 'hidden';
                        invoiceDateField.name = 'invoice_date';
                        invoiceDateField.value = result.value.invoiceDate;

                        const dueDateField = document.createElement('input');
                        dueDateField.type = 'hidden';
                        dueDateField.name = 'due_date';
                        dueDateField.value = result.value.dueDate;

                        const notesField = document.createElement('input');
                        notesField.type = 'hidden';
                        notesField.name = 'notes';
                        notesField.value = result.value.notes;

                        form.appendChild(csrfToken);
                        form.appendChild(paymentTermField);
                        form.appendChild(quotationField);
                        form.appendChild(invoiceDateField);
                        form.appendChild(dueDateField);
                        form.appendChild(notesField);
                        document.body.appendChild(form);
                        form.submit();
                    }
                });
            }

            function closeViewPaymentTermsModal() {
                document.getElementById('viewPaymentTermsModal').classList.add('hidden');
            }
        </script>
    @endpush
</x-app-layout>