@section("title", "BizMan | Invoice Detail")

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

    <div>
        <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
            <!-- Back Button -->
            <div class="mb-6">
                <a href="{{ route('invoices.index') }}" 
                   class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 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="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                    </svg>
                    Kembali
                </a>
            </div>

            <!-- Invoice Card -->
            <div class="bg-white rounded-lg shadow-lg p-8" id="invoice-content">
                <!-- Header -->
                <div class="flex justify-between items-start mb-8">
                    <div>
                        <h1 class="text-3xl font-bold text-gray-800 mb-2">PROFORMA INVOICE</h1>
                        <p class="text-gray-600">{{ $invoice->invoice_number }}</p>
                    </div>
                    <div class="text-right">
                        <p class="font-semibold text-gray-800">Your Company Name</p>
                        <p class="text-gray-600">company@example.com</p>
                        <p class="text-gray-600">+62 123 4567 890</p>
                    </div>
                </div>

                <!-- Bill To & Invoice Info -->
                <div class="flex justify-between mb-8">
                    <div>
                        <p class="font-semibold text-gray-800 mb-2">Bill To:</p>
                        <p class="text-gray-700 font-medium">{{ $invoice->customer->name }}</p>
                        <p class="text-gray-600">{{ $invoice->customer->email }}</p>
                        @if($invoice->customer->address)
                        <p class="text-gray-600">{{ $invoice->customer->address }}</p>
                        @endif
                    </div>
                    <div class="text-right space-y-2">
                        <div>
                            <span class="text-gray-600">Invoice Date:</span>
                            <span class="ml-8 text-gray-800">{{ $invoice->invoice_date->format('d/m/Y') }}</span>
                        </div>
                        <div>
                            <span class="text-gray-600">Due Date:</span>
                            <span class="ml-8 text-gray-800">{{ $invoice->due_date->format('d/m/Y') }}</span>
                        </div>
                        <div>
                            <span class="text-gray-600">Status:</span>
                            @if($invoice->status == 'paid')
                                <span class="ml-8 px-3 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                                    paid
                                </span>
                            @elseif($invoice->status == 'sent')
                                <span class="ml-8 px-3 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
                                    sent
                                </span>
                            @elseif($invoice->status == 'draft')
                                <span class="ml-8 px-3 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800">
                                    draft
                                </span>
                            @elseif($invoice->status == 'overdue')
                                <span class="ml-8 px-3 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">
                                    overdue
                                </span>
                            @else
                                <span class="ml-8 px-3 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">
                                    cancelled
                                </span>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Items Table -->
                <div class="bg-gray-50 rounded-lg overflow-hidden mb-6">
                    <table class="w-full">
                        <thead class="bg-gray-100">
                            <tr>
                                <th class="text-left py-3 px-4 font-semibold text-gray-700">Description</th>
                                <th class="text-center py-3 px-4 font-semibold text-gray-700">Qty</th>
                                <th class="text-right py-3 px-4 font-semibold text-gray-700">Unit Price</th>
                                <th class="text-right py-3 px-4 font-semibold text-gray-700">Total</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white">
                            <tr class="border-b border-gray-200">
                                <td class="py-4 px-4 text-gray-800">
                                    {{ $invoice->quotation->items->first()->item_name ?? 'Service' }} - {{ $invoice->paymentTerm->term_name }}
                                </td>
                                <td class="py-4 px-4 text-center text-gray-800">1</td>
                                <td class="py-4 px-4 text-right text-gray-800">Rp {{ number_format($invoice->amount, 0, ',', '.') }}</td>
                                <td class="py-4 px-4 text-right text-gray-800">Rp {{ number_format($invoice->amount, 0, ',', '.') }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- Summary -->
                <div class="flex justify-end mb-8">
                    <div class="w-80">
                        <div class="flex justify-between py-2 border-b border-gray-200">
                            <span class="text-gray-600">Subtotal:</span>
                            <span class="text-gray-800">Rp {{ number_format($invoice->amount, 0, ',', '.') }}</span>
                        </div>
                        <div class="flex justify-between py-2 border-b border-gray-200">
                            <span class="text-gray-600">Tax:</span>
                            <span class="text-gray-800">Rp {{ number_format($invoice->amount * $invoice->quotation->tax_percentage / 100, 0, ',', '.') }}</span>
                        </div>
                        <div class="flex justify-between py-3 font-semibold text-lg">
                            <span class="text-gray-800">Total:</span>
                            <span class="text-gray-800">Rp {{ number_format($invoice->amount + ($invoice->amount * $invoice->quotation->tax_percentage / 100), 0, ',', '.') }}</span>
                        </div>
                    </div>
                </div>

                <!-- Payment Status (if partially paid) -->
                @if($invoice->paid_amount > 0 && $invoice->balance > 0)
                <div class="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                    <h3 class="font-semibold text-gray-800 mb-3">Payment Status</h3>
                    <div class="grid grid-cols-3 gap-4 text-sm">
                        <div>
                            <p class="text-gray-600">Total Amount</p>
                            <p class="text-lg font-semibold text-gray-900">Rp {{ number_format($invoice->amount, 0, ',', '.') }}</p>
                        </div>
                        <div>
                            <p class="text-gray-600">Paid Amount</p>
                            <p class="text-lg font-semibold text-green-600">Rp {{ number_format($invoice->paid_amount, 0, ',', '.') }}</p>
                        </div>
                        <div>
                            <p class="text-gray-600">Balance</p>
                            <p class="text-lg font-semibold text-red-600">Rp {{ number_format($invoice->balance, 0, ',', '.') }}</p>
                        </div>
                    </div>
                    <div class="mt-3">
                        <div class="w-full bg-gray-200 rounded-full h-2">
                            <div class="bg-blue-600 h-2 rounded-full transition-all" style="width: {{ $invoice->payment_progress }}%"></div>
                        </div>
                        <p class="text-sm text-gray-600 mt-1">Payment Progress: {{ number_format($invoice->payment_progress, 1) }}%</p>
                    </div>
                </div>
                @endif

                <!-- Notes -->
                @if($invoice->notes)
                <div class="mb-6">
                    <h3 class="font-semibold text-gray-800 mb-2">Notes:</h3>
                    <p class="text-gray-600 whitespace-pre-line">{{ $invoice->notes }}</p>
                </div>
                @endif

                <!-- Payment Term Info -->
                <div class="mb-6 p-4 bg-gray-50 rounded-lg">
                    <h3 class="font-semibold text-gray-800 mb-2">Payment Term Information</h3>
                    <div class="grid grid-cols-3 gap-4 text-sm">
                        <div>
                            <p class="text-gray-600">Term Name</p>
                            <p class="font-medium text-gray-900">{{ $invoice->paymentTerm->term_name }}</p>
                        </div>
                        <div>
                            <p class="text-gray-600">Term Type</p>
                            <p class="font-medium text-gray-900">{{ ucwords(str_replace('_', ' ', $invoice->paymentTerm->term_type)) }}</p>
                        </div>
                        <div>
                            <p class="text-gray-600">Percentage</p>
                            <p class="font-medium text-gray-900">{{ $invoice->paymentTerm->percentage }}%</p>
                        </div>
                    </div>
                    @if($invoice->paymentTerm->milestone_description)
                    <div class="mt-3 pt-3 border-t border-gray-200">
                        <p class="text-gray-600 text-sm">Milestone</p>
                        <p class="text-gray-900">{{ $invoice->paymentTerm->milestone_description }}</p>
                    </div>
                    @endif
                </div>

                <!-- Related Quotation Info -->
                <div class="mb-6 p-4 bg-gray-50 rounded-lg">
                    <h3 class="font-semibold text-gray-800 mb-2">Related Quotation</h3>
                    <div class="flex justify-between items-center">
                        <div>
                            <p class="text-gray-600 text-sm">Quotation Number</p>
                            <p class="font-medium text-gray-900">{{ $invoice->quotation->quotation_number }}</p>
                        </div>
                        <a href="{{ route('quotations.show', $invoice->quotation->id) }}" 
                           class="text-blue-600 hover:text-blue-800 text-sm font-medium">
                            View Quotation →
                        </a>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="flex gap-3 print:hidden">
                    <a href="{{ route('invoices.index') }}" 
                       class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition">
                        Close
                    </a>
                    <button onclick="window.print()" 
                            class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
                        Download PDF
                    </button>
                    
                    @if($invoice->status !== 'paid' && $invoice->status !== 'cancelled')
                        <button onclick="recordPayment()" 
                                class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition flex items-center gap-2">
                            <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="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"></path>
                            </svg>
                            Record Payment
                        </button>
                    @endif

                    @if($invoice->status === 'draft')
                        <button onclick="sendInvoice()" 
                                class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center gap-2">
                            <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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
                            </svg>
                            Send Invoice
                        </button>
                    @endif
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        // Record Payment
        function recordPayment() {
            const balance = {{ $invoice->balance }};
            const invoiceId = {{ $invoice->id }};

            Swal.fire({
                title: 'Record Payment',
                html: `
                    <div class="text-left space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Amount</label>
                            <input type="number" id="payment_amount" step="0.01" max="${balance}" 
                                   value="${balance}"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg">
                            <p class="text-sm text-gray-500 mt-1">Balance: Rp ${balance.toLocaleString('id-ID')}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Payment Date</label>
                            <input type="date" id="payment_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">Payment Method</label>
                            <select id="payment_method" class="w-full px-3 py-2 border border-gray-300 rounded-lg">
                                <option value="bank_transfer">Bank Transfer</option>
                                <option value="cash">Cash</option>
                                <option value="credit_card">Credit Card</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Notes (Optional)</label>
                            <textarea id="payment_notes" rows="2" 
                                      class="w-full px-3 py-2 border border-gray-300 rounded-lg"
                                      placeholder="Payment notes..."></textarea>
                        </div>
                    </div>
                `,
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Record',
                cancelButtonText: 'Cancel',
                preConfirm: () => {
                    const amount = parseFloat(document.getElementById('payment_amount').value);
                    const paymentDate = document.getElementById('payment_date').value;
                    const paymentMethod = document.getElementById('payment_method').value;
                    const notes = document.getElementById('payment_notes').value;

                    if (!amount || amount <= 0) {
                        Swal.showValidationMessage('Amount must be greater than 0');
                        return false;
                    }
                    if (amount > balance) {
                        Swal.showValidationMessage('Amount exceeds balance');
                        return false;
                    }
                    if (!paymentDate) {
                        Swal.showValidationMessage('Payment date is required');
                        return false;
                    }

                    return { amount, paymentDate, paymentMethod, notes };
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = `/invoices/${invoiceId}/payment`;
                    
                    const csrfToken = document.createElement('input');
                    csrfToken.type = 'hidden';
                    csrfToken.name = '_token';
                    csrfToken.value = '{{ csrf_token() }}';
                    
                    const amountField = document.createElement('input');
                    amountField.type = 'hidden';
                    amountField.name = 'amount';
                    amountField.value = result.value.amount;
                    
                    const dateField = document.createElement('input');
                    dateField.type = 'hidden';
                    dateField.name = 'payment_date';
                    dateField.value = result.value.paymentDate;

                    const methodField = document.createElement('input');
                    methodField.type = 'hidden';
                    methodField.name = 'payment_method';
                    methodField.value = result.value.paymentMethod;

                    const notesField = document.createElement('input');
                    notesField.type = 'hidden';
                    notesField.name = 'notes';
                    notesField.value = result.value.notes;
                    
                    form.appendChild(csrfToken);
                    form.appendChild(amountField);
                    form.appendChild(dateField);
                    form.appendChild(methodField);
                    form.appendChild(notesField);
                    document.body.appendChild(form);
                    form.submit();
                }
            });
        }

        // Send Invoice
        function sendInvoice() {
            Swal.fire({
                title: 'Send Invoice',
                text: 'Are you sure you want to send this invoice?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, Send!',
                cancelButtonText: 'Cancel'
            }).then((result) => {
                if (result.isConfirmed) {
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = `/invoices/{{ $invoice->id }}/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 = 'sent';
                    
                    form.appendChild(csrfToken);
                    form.appendChild(methodField);
                    form.appendChild(statusField);
                    document.body.appendChild(form);
                    form.submit();
                }
            });
        }
    </script>

    <style>
        @media print {
            body * {
                visibility: hidden;
            }
            #invoice-content, #invoice-content * {
                visibility: visible;
            }
            #invoice-content {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
            }
            .print\:hidden {
                display: none !important;
            }
        }
    </style>
    @endpush
</x-app-layout>