@extends('layouts.finance')

@section('title', 'New Client Invoice')
@section('subtitle', 'Bill a client for work done')

@section('content')
    <section class="card">
        <div class="section-head">
            <h2>New Invoice</h2>
            <a class="btn" href="{{ route('clients.invoices') }}">Back</a>
        </div>
        <div class="card-pad">
            @if($clients->isEmpty())
                <p class="muted">
                    No active clients yet. <a href="{{ route('clients.create') }}">Add a client</a> first.
                </p>
            @else
                <form method="POST" action="{{ route('clients.invoices.store') }}">
                    @csrf

                    <div class="row-form">
                        <div>
                            <label class="label">Client <span style="color:#ef4444">*</span></label>
                            <select class="field" name="client_id" id="invoiceClient" required>
                                <option value="">Select a client</option>
                                @foreach($clients as $client)
                                    <option value="{{ $client->id }}"
                                            data-currency="{{ $client->currency }}"
                                            data-rate="{{ $client->default_rate ? (float) $client->default_rate : '' }}"
                                            data-work="{{ $client->work_details }}"
                                            @selected(old('client_id', $selectedClient?->id) == $client->id)>
                                        {{ $client->displayName() }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="label">Invoice Number <span style="color:#ef4444">*</span></label>
                            <input class="field" name="invoice_number" value="{{ old('invoice_number', $invoiceNumber) }}" required maxlength="100">
                        </div>
                        <div>
                            <label class="label">Currency <span style="color:#ef4444">*</span></label>
                            <select class="field" name="currency" id="invoiceCurrency" required>
                                @foreach($currencies as $currency)
                                    <option value="{{ $currency }}" @selected(old('currency', $selectedClient?->currency) === $currency)>{{ $currency }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="row-form">
                        <div>
                            <label class="label">Issue Date <span style="color:#ef4444">*</span></label>
                            <input class="field" type="date" name="issue_date" value="{{ old('issue_date', now()->format('Y-m-d')) }}" required>
                        </div>
                        <div>
                            <label class="label">Due Date <span style="color:#ef4444">*</span></label>
                            <input class="field" type="date" name="due_date" value="{{ old('due_date', now()->addDays(14)->format('Y-m-d')) }}" required>
                        </div>
                        <div>
                            <label class="label">Conversion Rate</label>
                            <input class="field" type="number" step="0.00000001" min="0" name="conversion_rate" value="{{ old('conversion_rate') }}">
                            <div class="text-xs muted">Only needed for non-PKR invoices.</div>
                        </div>
                    </div>

                    <div class="section-title mt">Work Items</div>
                    <table id="invoiceItems">
                        <thead>
                        <tr>
                            <th>Description <span style="color:#ef4444">*</span></th>
                            <th style="width:120px">Quantity</th>
                            <th style="width:180px">Amount <span style="color:#ef4444">*</span></th>
                            <th style="width:60px"></th>
                        </tr>
                        </thead>
                        <tbody>
                        @php
                            $rows = old('items', [['product_name' => $selectedClient?->work_details, 'voucher_count' => 1, 'amount' => $selectedClient?->default_rate]]);
                        @endphp
                        @foreach($rows as $index => $row)
                            <tr>
                                <td><input class="field" name="items[{{ $index }}][product_name]" value="{{ $row['product_name'] ?? '' }}" required maxlength="255"></td>
                                <td><input class="field" type="number" min="1" max="1000000" name="items[{{ $index }}][voucher_count]" value="{{ $row['voucher_count'] ?? 1 }}" required></td>
                                <td><input class="field right" type="number" step="0.01" min="0" name="items[{{ $index }}][amount]" value="{{ $row['amount'] ?? '' }}" required></td>
                                <td><button type="button" class="btn btn-sm btn-danger" data-remove-item>×</button></td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                    <button type="button" class="btn btn-sm mt" id="addInvoiceItem">+ Add Line</button>

                    <div class="mt">
                        <label class="label">Notes</label>
                        <textarea class="field" name="notes" rows="3" maxlength="2000">{{ old('notes') }}</textarea>
                    </div>

                    <div class="mt">
                        <button class="btn btn-primary">Create Invoice</button>
                    </div>
                </form>

                <script>
                    (function () {
                        var table = document.querySelector('#invoiceItems tbody');
                        var addButton = document.getElementById('addInvoiceItem');
                        var client = document.getElementById('invoiceClient');
                        var currency = document.getElementById('invoiceCurrency');

                        // Line indexes must stay unique; reusing one would make the
                        // later row overwrite the earlier one on submit.
                        var nextIndex = table.querySelectorAll('tr').length;

                        addButton.addEventListener('click', function () {
                            var row = document.createElement('tr');
                            row.innerHTML =
                                '<td><input class="field" name="items[' + nextIndex + '][product_name]" required maxlength="255"></td>' +
                                '<td><input class="field" type="number" min="1" max="1000000" name="items[' + nextIndex + '][voucher_count]" value="1" required></td>' +
                                '<td><input class="field right" type="number" step="0.01" min="0" name="items[' + nextIndex + '][amount]" required></td>' +
                                '<td><button type="button" class="btn btn-sm btn-danger" data-remove-item>×</button></td>';
                            table.appendChild(row);
                            nextIndex++;
                        });

                        table.addEventListener('click', function (event) {
                            if (!event.target.matches('[data-remove-item]')) return;
                            // Always leave one line — an invoice needs at least one item.
                            if (table.querySelectorAll('tr').length <= 1) return;
                            event.target.closest('tr').remove();
                        });

                        client.addEventListener('change', function () {
                            var option = client.options[client.selectedIndex];
                            if (!option || !option.value) return;

                            if (option.dataset.currency) currency.value = option.dataset.currency;

                            var firstDescription = table.querySelector('input[name$="[product_name]"]');
                            var firstAmount = table.querySelector('input[name$="[amount]"]');
                            if (firstDescription && !firstDescription.value) firstDescription.value = option.dataset.work || '';
                            if (firstAmount && !firstAmount.value) firstAmount.value = option.dataset.rate || '';
                        });
                    })();
                </script>
            @endif
        </div>
    </section>
@endsection