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

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Invoices 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">Invoices Management</p>
                    <p>Kelola invoice/tagihan pembayaran</p>
                </div>
            </div>
            
            <div class="w-full">
                <form action="{{ route('invoices.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 Invoice.." 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

            <!-- Invoice Cards -->
            <div class="flex flex-col gap-4">
                @forelse($invoices as $invoice)
                <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">{{ $invoice->invoice_number }}</h3>
                                <div class="flex items-center gap-3">
                                    <div class="text-right">
                                        <p class="text-sm text-gray-500">Amount</p>
                                        <p class="text-xl font-bold text-gray-900">Rp {{ number_format($invoice->amount, 0, ',', '.') }}</p>
                                    </div>
                                    @if($invoice->status == 'paid')
                                        <span class="px-3 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                                            Lunas
                                        </span>
                                    @elseif($invoice->status == 'sent')
                                        <span class="px-3 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
                                            Terkirim
                                        </span>
                                    @elseif($invoice->status == 'draft')
                                        <span class="px-3 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800">
                                            Draft
                                        </span>
                                    @elseif($invoice->status == 'overdue')
                                        <span class="px-3 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">
                                            Terlambat
                                        </span>
                                    @else
                                        <span class="px-3 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">
                                            Dibatalkan
                                        </span>
                                    @endif
                                </div>
                            </div>
                            <p class="text-gray-900 font-medium text-base">{{ $invoice->customer->name }}</p>
                            <p class="text-gray-500 text-sm">{{ $invoice->customer->email }}</p>
                            <p class="text-gray-500 text-sm mt-1">Quotation: {{ $invoice->quotation->quotation_number }}</p>
                        </div>
                    </div>

                    <!-- Payment Progress -->
                    @if($invoice->status !== 'cancelled' && $invoice->balance > 0)
                    <div class="mb-4">
                        <div class="flex justify-between text-sm mb-1">
                            <span class="text-gray-600">Payment Progress</span>
                            <span class="text-gray-900 font-medium">{{ number_format($invoice->payment_progress, 1) }}%</span>
                        </div>
                        <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>
                        <div class="flex justify-between text-xs mt-1 text-gray-500">
                            <span>Paid: Rp {{ number_format($invoice->paid_amount, 0, ',', '.') }}</span>
                            <span>Balance: Rp {{ number_format($invoice->balance, 0, ',', '.') }}</span>
                        </div>
                    </div>
                    @endif

                    <!-- Info Grid -->
                    <div class="grid grid-cols-4 gap-4 mb-4">
                        <div>
                            <p class="text-sm text-gray-500 mb-1">Invoice Date</p>
                            <p class="text-sm font-medium text-gray-900">{{ $invoice->invoice_date->format('d/m/Y') }}</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 mb-1">Due Date</p>
                            <p class="text-sm font-medium text-gray-900">{{ $invoice->due_date->format('d/m/Y') }}</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 mb-1">Payment Term</p>
                            <p class="text-sm font-medium text-gray-900">{{ $invoice->paymentTerm->term_name }}</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 mb-1">Term Type</p>
                            <p class="text-sm font-medium text-gray-900">{{ ucwords(str_replace('_', ' ', $invoice->paymentTerm->term_type)) }}</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('invoices.show', $invoice->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>
                                View
                            </a>

                            @if($invoice->status !== 'paid' && $invoice->status !== 'cancelled')
                                <button onclick="recordPayment({{ $invoice->id }}, {{ $invoice->balance }})" 
                                        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="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="changeInvoiceStatus({{ $invoice->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>
                            @endif
                        </div>
                        
                        <div class="flex gap-2">
                            @if($invoice->status !== 'paid' && $invoice->status !== 'sent')
                                <form action="{{ route('invoices.destroy', $invoice->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-invoice="{{ $invoice->invoice_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>
                                        Delete
                                    </button>
                                </form>
                            @endif
                        </div>
                    </div>
                </div>
                @empty
                <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-8 text-center">
                    <p class="text-gray-500">Belum ada invoice.</p>
                </div>
                @endforelse
            </div>
        </div>
    </div>

    @push('scripts')
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script>
            // Delete Invoice
            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 invoiceNumber = this.getAttribute('data-invoice');

                        Swal.fire({
                            title: 'Apakah Anda yakin?',
                            text: `Anda akan menghapus invoice "${invoiceNumber}". 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 Invoice Status
            function changeInvoiceStatus(invoiceId, status) {
                Swal.fire({
                    title: 'Ubah Status Invoice',
                    text: 'Apakah Anda yakin ingin mengirim invoice ini?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Ya, Kirim!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        const form = document.createElement('form');
                        form.method = 'POST';
                        form.action = `/invoices/${invoiceId}/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();
                    }
                });
            }

            // Record Payment
            function recordPayment(invoiceId, balance) {
                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();
                    }
                });
            }
        </script>
    @endpush
</x-app-layout>