@extends('layouts.finance.finance')

@section('content')
    <div class="p-6 bg-gray-50 min-h-screen">

        <div class="mb-6">
            <h1 class="text-2xl font-bold text-gray-900">Create New Invoice</h1>
            <p class="text-sm text-gray-500">Generate and email an invoice for steel supply/tasks.</p>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 max-w-4xl">

            {{-- ERROR NOTIFICATION BOX --}}
            @if ($errors->any())
                <div class="mb-6 p-4 bg-red-50 border-l-4 border-red-500 text-red-700 rounded-r-lg">
                    <p class="font-bold mb-1">Please fix the following errors:</p>
                    <ul class="list-disc ml-5 text-sm">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            @if (session('error'))
                <div class="mb-6 p-4 bg-red-50 border-l-4 border-red-500 text-red-700 rounded-r-lg">
                    {{ session('error') }}
                </div>
            @endif

            <form action="{{ route('finance.invoice.store') }}" method="POST" id="invoiceForm">
                @csrf

                <h2 class="text-lg font-bold text-gray-800 mb-4 border-b pb-2">1. Project & Client Details</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">

                    {{-- Project Dropdown --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Select Project (Optional)</label>
                        <select name="project_id" id="project_id"
                            class="w-full border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500">
                            <option value="">-- Choose a Project --</option>
                            @foreach($projects as $project)
                                <option value="{{ $project->id }}" {{ request()->query('project_id') == $project->id ? 'selected' : '' }}>
                                    {{ $project->title }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Invoice Type (Proforma or Tax) --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Invoice Type</label>
                        <select name="invoice_type" id="invoice_type"
                            class="w-full border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500"
                            required>
                            <option value="tax_invoice">Tax Invoice</option>
                            <option value="proforma_invoice">Proforma Invoice</option>
                        </select>
                    </div>

                    {{-- Client Details --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Client Name</label>
                        <input type="text" name="client_name" id="client_name"
                            class="w-full border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500"
                            placeholder="Enter or auto-filled" required>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Client Email (For PDF Delivery)</label>
                        <input type="email" name="client_email" id="client_email"
                            class="w-full border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500"
                            placeholder="Enter or auto-filled" required>
                    </div>
                </div>

                {{-- Order Items Table (Hidden by default, populated via AJAX) --}}
                <div id="order_items_section" class="mb-8 hidden">
                    <h2 class="text-lg font-bold text-gray-800 mb-4 border-b pb-2">Available Project Items</h2>
                    <div class="border border-gray-200 rounded-lg overflow-hidden shadow-sm">
                        <table class="w-full text-left text-sm whitespace-nowrap">
                            <thead class="bg-gray-50 text-gray-600">
                                <tr>
                                    <th class="px-4 py-3 border-b">Item Name</th>
                                    <th class="px-4 py-3 border-b">Unit</th>
                                    <th class="px-4 py-3 border-b">Qty</th>
                                    <th class="px-4 py-3 border-b">Rate (₹)</th>
                                    <th class="px-4 py-3 border-b">Total (₹)</th>
                                    <th class="px-4 py-3 border-b">Action</th>
                                </tr>
                            </thead>
                            <tbody id="order_items_tbody" class="divide-y divide-gray-100 bg-white">
                                <!-- Dynamic JS Rows Go Here -->
                            </tbody>
                        </table>
                    </div>
                </div>

                {{-- NEW: Added flex box to align heading and manual button --}}
                <div class="flex items-center justify-between mb-4 border-b pb-2">
                    <h2 class="text-lg font-bold text-gray-800">2. Invoice Details (Selected Items)</h2>
                    <button type="button" onclick="addManualItem()"
                        class="text-sm bg-green-100 text-green-700 px-4 py-2 rounded-lg hover:bg-green-200 font-bold transition-colors shadow-sm flex items-center gap-1">
                        + Add Manual Item
                    </button>
                </div>

                {{-- Dynamic Container for Appended Items --}}
                <div class="border border-gray-200 rounded-lg overflow-hidden shadow-sm mb-6">
                    <table class="w-full text-left text-sm whitespace-nowrap">
                        <thead class="bg-gray-50 text-gray-600">
                            <tr>
                                <th class="px-4 py-3 border-b">Description</th>
                                <th class="px-4 py-3 border-b w-32">Qty (MT)</th>
                                <th class="px-4 py-3 border-b w-40">Rate (₹)</th>
                                <th class="px-4 py-3 border-b w-24">GST (%)</th>
                                <th class="px-4 py-3 border-b w-20 text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody id="selected_invoice_items" class="divide-y divide-gray-100 bg-white">
                            <tr id="empty_state_row">
                                <td colspan="5" class="px-4 py-6 text-center text-gray-400">
                                    No items selected yet. Click "Use for Invoice" above or "+ Add Manual Item".
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="flex items-center justify-end gap-4 mt-8 pt-4 border-t border-gray-100">
                    <a href="{{ url()->previous() }}"
                        class="text-sm font-medium text-gray-600 hover:text-gray-900">Cancel</a>
                    <button type="submit"
                        class="px-6 py-2 bg-[#2E72C3] text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors shadow-sm flex items-center gap-2">
                        Next: Generate & Send PDF
                        <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="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                        </svg>
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- JavaScript for AJAX Auto-fill and Dynamic Invoice Rows --}}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const projectSelect = document.getElementById('project_id');
            const clientNameInput = document.getElementById('client_name');
            const clientEmailInput = document.getElementById('client_email');

            const orderItemsSection = document.getElementById('order_items_section');
            const orderItemsTbody = document.getElementById('order_items_tbody');

            // Handle Project Selection and fetch BOM details via AJAX
            projectSelect.addEventListener('change', function () {
                const projectId = this.value;

                if (projectId) {
                    clientNameInput.value = 'Loading...';
                    clientEmailInput.value = 'Loading...';
                    orderItemsSection.classList.add('hidden');

                    fetch(`/finance/api/project-details/${projectId}`)
                        .then(response => response.json())
                        .then(data => {
                            clientNameInput.value = data.client_name || '';
                            clientEmailInput.value = data.client_email || '';

                            orderItemsTbody.innerHTML = '';
                            if (data.order_items && data.order_items.length > 0) {
                                orderItemsSection.classList.remove('hidden');

                                data.order_items.forEach(item => {
                                    const safeName = item.name.replace(/'/g, "\\'").replace(/"/g, '&quot;');
                                    const row = `
                                                <tr class="hover:bg-gray-50 transition-colors">
                                                    <td class="px-4 py-3">${item.name}</td>
                                                    <td class="px-4 py-3">${item.unit}</td>
                                                    <td class="px-4 py-3 font-medium">${item.quantity}</td>
                                                    <td class="px-4 py-3">₹${item.rate}</td>
                                                    <td class="px-4 py-3 text-green-700 font-medium">₹${item.total}</td>
                                                    <td class="px-4 py-3">
                                                        <button type="button" 
                                                            class="text-xs bg-blue-100 text-blue-700 px-3 py-1.5 rounded hover:bg-blue-200 font-medium transition-colors"
                                                            onclick="fillInvoiceFields('${safeName}', ${item.quantity}, ${item.rate})">
                                                            Use for Invoice
                                                        </button>
                                                    </td>
                                                </tr>
                                            `;
                                    orderItemsTbody.insertAdjacentHTML('beforeend', row);
                                });
                            }
                        })
                        .catch(error => {
                            console.error('Error fetching data:', error);
                            clientNameInput.value = '';
                            clientEmailInput.value = '';
                        });
                } else {
                    clientNameInput.value = '';
                    clientEmailInput.value = '';
                    orderItemsSection.classList.add('hidden');
                }
            });

            if (projectSelect.value) {
                projectSelect.dispatchEvent(new Event('change'));
            }
        });

        // Appends a row using data fetched from the project
        function fillInvoiceFields(name, qty, rate) {
            const selectedItemsTbody = document.getElementById('selected_invoice_items');
            const emptyState = document.getElementById('empty_state_row');

            if (emptyState) {
                emptyState.remove();
            }

            const index = Date.now();

            // Note: Added [] to the name attributes so Laravel receives them as arrays
            const newRow = `
                        <tr class="hover:bg-gray-50 transition-colors" id="row_${index}">
                            <td class="px-4 py-2">
                                <input type="text" name="task_description[]" value="${name}" 
                                       class="w-full border-gray-300 rounded shadow-sm focus:ring-blue-500" required>
                            </td>
                            <td class="px-4 py-2">
                                <input type="number" step="0.01" name="quantity_mt[]" value="${qty}" 
                                       class="w-full border-gray-300 rounded shadow-sm focus:ring-blue-500" required>
                            </td>
                            <td class="px-4 py-2">
                                <input type="number" step="0.01" name="rate_per_mt[]" value="${rate}" 
                                       class="w-full border-gray-300 rounded shadow-sm focus:ring-blue-500" required>
                            </td>
                            <td class="px-4 py-2">
                                <input type="number" step="0.01" name="gst_rate[]" value="18" 
                                       class="w-full border-gray-300 rounded shadow-sm focus:ring-blue-500" required>
                            </td>
                            <td class="px-4 py-2 text-center">
                                <button type="button" onclick="document.getElementById('row_${index}').remove()" 
                                        class="text-red-500 hover:text-red-700 font-bold text-lg" title="Remove Item">
                                    &times;
                                </button>
                            </td>
                        </tr>
                    `;

            selectedItemsTbody.insertAdjacentHTML('beforeend', newRow);
        }

        // NEW: Appends a blank row for manual entry
        function addManualItem() {
            const selectedItemsTbody = document.getElementById('selected_invoice_items');
            const emptyState = document.getElementById('empty_state_row');

            if (emptyState) {
                emptyState.remove();
            }

            const index = Date.now();

            const newRow = `
                        <tr class="hover:bg-gray-50 transition-colors bg-green-50/30" id="row_${index}">
                            <td class="px-4 py-2">
                                <input type="text" name="task_description[]" placeholder="Enter item description..." 
                                       class="w-full border-gray-300 rounded shadow-sm focus:ring-blue-500" required>
                            </td>
                            <td class="px-4 py-2">
                                <input type="number" step="0.01" name="quantity_mt[]" placeholder="0.00" 
                                       class="w-full border-gray-300 rounded shadow-sm focus:ring-blue-500" required>
                            </td>
                            <td class="px-4 py-2">
                                <input type="number" step="0.01" name="rate_per_mt[]" placeholder="0.00" 
                                       class="w-full border-gray-300 rounded shadow-sm focus:ring-blue-500" required>
                            </td>
                            <td class="px-4 py-2">
                                <input type="number" step="0.01" name="gst_rate[]" value="18" 
                                       class="w-full border-gray-300 rounded shadow-sm focus:ring-blue-500" required>
                            </td>
                            <td class="px-4 py-2 text-center">
                                <button type="button" onclick="document.getElementById('row_${index}').remove()" 
                                        class="text-red-500 hover:text-red-700 font-bold text-lg" title="Remove Item">
                                    &times;
                                </button>
                            </td>
                        </tr>
                    `;

            selectedItemsTbody.insertAdjacentHTML('beforeend', newRow);
        }
    </script>
@endsection