@extends('layouts.app')

@section('title', 'Edit Invoice')

@section('content')
    <div class="px-4 py-6 sm:px-0">
        <div class="mb-6">
            <h1 class="text-3xl font-bold text-gray-900">Edit Invoice</h1>
            <p class="text-gray-600">Update the invoice details below</p>
        </div>

        <form action="{{ route('invoices.update', $invoice) }}" method="POST" id="invoiceForm">
            @csrf
            @method('PUT')

            <div class="bg-white shadow rounded-lg overflow-hidden">
                <!-- Basic Information -->
                <div class="p-6 border-b border-gray-200">
                    <h2 class="text-lg font-medium text-gray-900 mb-4">Basic Information</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="client_id" class="block text-sm font-medium text-gray-700">Client *</label>
                            <select name="client_id" id="client_id" required
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <option value="">Select Client</option>
                                @foreach ($clients as $client)
                                    <option value="{{ $client->id }}"
                                        {{ old('client_id', $invoice->client_id) == $client->id ? 'selected' : '' }}>
                                        {{ $client->company_name }} - {{ $client->contact_person_name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('client_id')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="company_id" class="block text-sm font-medium text-gray-700">Company *</label>
                            <select name="company_id" id="company_id" required
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <option value="">Select Company</option>
                                @foreach ($companies as $company)
                                    <option value="{{ $company->id }}"
                                        {{ old('company_id', $invoice->company_id) == $company->id ? 'selected' : '' }}>
                                        {{ $company->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('company_id')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="invoice_date" class="block text-sm font-medium text-gray-700">Invoice Date *</label>
                            <input type="date" name="invoice_date" id="invoice_date" required
                                value="{{ old('invoice_date', $invoice->invoice_date->format('Y-m-d')) }}"
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @error('invoice_date')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="status" class="block text-sm font-medium text-gray-700">Status *</label>
                            <select name="status" id="status" required
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <option value="draft" {{ old('status', $invoice->status) == 'draft' ? 'selected' : '' }}>
                                    Draft</option>
                                <option value="sent" {{ old('status', $invoice->status) == 'sent' ? 'selected' : '' }}>
                                    Sent</option>
                                <option value="paid" {{ old('status', $invoice->status) == 'paid' ? 'selected' : '' }}>
                                    Paid</option>
                                <option value="overdue"
                                    {{ old('status', $invoice->status) == 'overdue' ? 'selected' : '' }}>Overdue</option>
                            </select>
                            @error('status')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="md:col-span-2">
                            <label for="notes" class="block text-sm font-medium text-gray-700">Notes</label>
                            <textarea name="notes" id="notes" rows="3"
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">{{ old('notes', $invoice->notes) }}</textarea>
                            @error('notes')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Line Items -->
                <div class="p-6 border-b border-gray-200">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-lg font-medium text-gray-900">Line Items</h2>
                        <button type="button" id="addItem"
                            class="bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700">
                            <i class="fas fa-plus mr-1"></i> Add Item
                        </button>
                    </div>

                    <div id="lineItems">
                        @foreach ($invoice->lineItems as $index => $item)
                            <div class="line-item grid grid-cols-12 gap-4 mb-4 items-end">
                                <input type="hidden" name="items[{{ $index }}][id]" value="{{ $item->id }}">
                                <div class="col-span-3">
                                    <label class="block text-sm font-medium text-gray-700">Item Name *</label>
                                    <input type="text" name="items[{{ $index }}][item_name]" required
                                        value="{{ old('items.' . $index . '.item_name', $item->item_name) }}"
                                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                </div>
                                <div class="col-span-3">
                                    <label class="block text-sm font-medium text-gray-700">Description</label>
                                    <textarea name="items[{{ $index }}][description]" rows="2"
                                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">{{ old('items.' . $index . '.description', $item->description) }}</textarea>
                                </div>
                                <div class="col-span-2">
                                    <label class="block text-sm font-medium text-gray-700">Price *</label>
                                    <input type="number" name="items[{{ $index }}][price_per_unit]" required
                                        step="0.01" min="0"
                                        value="{{ old('items.' . $index . '.price_per_unit', $item->price_per_unit) }}"
                                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 item-price">
                                </div>
                                <div class="col-span-2">
                                    <label class="block text-sm font-medium text-gray-700">UOM *</label>
                                    <input type="text" name="items[{{ $index }}][uom]" required
                                        value="{{ old('items.' . $index . '.uom', $item->uom) }}"
                                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                </div>
                                <div class="col-span-1">
                                    <label class="block text-sm font-medium text-gray-700">Qty *</label>
                                    <input type="number" name="items[{{ $index }}][quantity]" required
                                        step="0.01" min="0.01"
                                        value="{{ old('items.' . $index . '.quantity', $item->quantity) }}"
                                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 item-quantity">
                                </div>
                                <div class="col-span-1">
                                    <button type="button"
                                        class="remove-item text-red-600 hover:text-red-900 {{ $index === 0 ? 'text-gray-400' : '' }}"
                                        {{ $index === 0 ? 'disabled' : '' }}>
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="mt-4 text-right">
                        <strong>Grand Total: $<span
                                id="grandTotal">{{ number_format($invoice->grand_total, 2) }}</span></strong>
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="p-6 bg-gray-50 flex justify-end space-x-3">
                    <a href="{{ route('invoices.index') }}"
                        class="bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400">
                        Cancel
                    </a>
                    <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700">
                        Update Invoice
                    </button>
                </div>
            </div>
        </form>
    </div>

    <script>
        let itemCount = {{ $invoice->lineItems->count() }};

        document.getElementById('addItem').addEventListener('click', function() {
            const lineItems = document.getElementById('lineItems');
            const newItem = document.createElement('div');
            newItem.className = 'line-item grid grid-cols-12 gap-4 mb-4 items-end';
            newItem.innerHTML = `
        <div class="col-span-3">
            <input type="text" name="items[${itemCount}][item_name]" required
                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
        </div>
        <div class="col-span-3">
            <textarea name="items[${itemCount}][description]" rows="2"
                      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
        </div>
        <div class="col-span-2">
            <input type="number" name="items[${itemCount}][price_per_unit]" required step="0.01" min="0"
                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 item-price">
        </div>
        <div class="col-span-2">
            <input type="text" name="items[${itemCount}][uom]" required
                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
        </div>
        <div class="col-span-1">
            <input type="number" name="items[${itemCount}][quantity]" required step="0.01" min="0.01"
                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 item-quantity">
        </div>
        <div class="col-span-1">
            <button type="button" class="remove-item text-red-600 hover:text-red-900">
                <i class="fas fa-trash"></i>
            </button>
        </div>
    `;
            lineItems.appendChild(newItem);
            itemCount++;

            updateRemoveButtons();
            attachEventListeners();
        });

        function updateRemoveButtons() {
            const removeButtons = document.querySelectorAll('.remove-item');
            removeButtons.forEach((button, index) => {
                if (index === 0) {
                    button.disabled = true;
                    button.classList.add('text-gray-400');
                    button.classList.remove('text-red-600', 'hover:text-red-900');
                } else {
                    button.disabled = false;
                    button.classList.remove('text-gray-400');
                    button.classList.add('text-red-600', 'hover:text-red-900');
                }
            });
        }

        function attachEventListeners() {
            document.querySelectorAll('.remove-item').forEach(button => {
                button.addEventListener('click', function() {
                    if (!this.disabled) {
                        this.closest('.line-item').remove();
                        calculateGrandTotal();
                    }
                });
            });

            document.querySelectorAll('.item-price, .item-quantity').forEach(input => {
                input.addEventListener('input', calculateGrandTotal);
            });
        }

        function calculateGrandTotal() {
            let grandTotal = 0;
            document.querySelectorAll('.line-item').forEach(item => {
                const price = parseFloat(item.querySelector('.item-price').value) || 0;
                const quantity = parseFloat(item.querySelector('.item-quantity').value) || 0;
                grandTotal += price * quantity;
            });
            document.getElementById('grandTotal').textContent = grandTotal.toFixed(2);
        }

        updateRemoveButtons();
        attachEventListeners();
        calculateGrandTotal();
    </script>
@endsection