@extends('layouts.app')
@section('title', 'Raise Credit Note | ' . $invoice->invoice_number)
@section('content')

<div class="max-w-2xl mx-auto">
    <div class="flex items-center gap-3 mb-5">
        <a href="{{ route('billing.credit-notes.index') }}" class="btn-secondary text-xs">← Back</a>
        <div>
            <h1 class="text-base font-bold text-gray-900">Raise Credit Note</h1>
            <p class="text-xs text-gray-400">Invoice {{ $invoice->invoice_number }} · {{ $invoice->patient->full_name ?? '' }}</p>
        </div>
    </div>

    {{-- Invoice summary --}}
    <div class="bg-white rounded-xl border shadow-sm p-5 mb-5">
        <h3 class="text-xs font-bold text-gray-500 uppercase mb-3">Invoice Summary</h3>
        <div class="grid grid-cols-3 gap-4 text-sm mb-4">
            <div><p class="text-xs text-gray-400">Total Charged</p><p class="font-bold">KES {{ number_format($invoice->total_amount) }}</p></div>
            <div><p class="text-xs text-gray-400">Amount Paid</p><p class="font-bold text-green-600">KES {{ number_format($invoice->amount_paid) }}</p></div>
            <div><p class="text-xs text-gray-400">Balance</p><p class="font-bold text-red-600">KES {{ number_format($invoice->balance) }}</p></div>
        </div>
        {{-- Line items --}}
        <table class="w-full text-xs">
            <thead class="bg-gray-50"><tr>
                <th class="table-header">#</th>
                <th class="table-header">Description</th>
                <th class="table-header">Category</th>
                <th class="table-header text-right">Total (KES)</th>
            </tr></thead>
            <tbody>
            @foreach($invoice->items->where('total', '>', 0) as $item)
            <tr class="border-b border-gray-50">
                <td class="table-cell text-gray-400">{{ $item->id }}</td>
                <td class="table-cell font-medium">{{ $item->description }}</td>
                <td class="table-cell text-gray-500">{{ $item->category }}</td>
                <td class="table-cell text-right font-semibold">{{ number_format($item->total) }}</td>
            </tr>
            @endforeach
            </tbody>
        </table>
    </div>

    {{-- Credit note form --}}
    <div class="bg-white rounded-xl border shadow-sm p-5">
        <h3 class="text-xs font-bold text-gray-500 uppercase mb-4">Credit Note Details</h3>

        @if($errors->any())
        <div class="bg-red-50 border border-red-200 rounded-lg p-3 mb-4">
            <ul class="text-xs text-red-700 space-y-1">@foreach($errors->all() as $e)<li>▸ {{ $e }}</li>@endforeach</ul>
        </div>
        @endif

        <form method="POST" action="{{ route('billing.credit-notes.store') }}">
            @csrf
            <input type="hidden" name="invoice_id" value="{{ $invoice->id }}">

            <div class="space-y-4">

                {{-- Specific line item (optional) --}}
                <div>
                    <label class="form-label">
                        Related Line Item
                        <span class="text-gray-400 font-normal">(optional | select to tie the credit to a specific charge)</span>
                    </label>
                    <select name="invoice_item_id" class="form-input text-sm" id="itemSelect" onchange="prefillAmount(this)">
                        <option value="">| Whole invoice / not item-specific |</option>
                        @foreach($invoice->items->where('total', '>', 0) as $item)
                        <option value="{{ $item->id }}" data-total="{{ $item->total }}" {{ old('invoice_item_id') == $item->id ? 'selected' : '' }}>
                            {{ $item->description }} | KES {{ number_format($item->total) }}
                        </option>
                        @endforeach
                    </select>
                </div>

                {{-- Reason --}}
                <div>
                    <label class="form-label">Reason <span class="text-red-500">*</span></label>
                    <select name="reason" required class="form-input text-sm" id="reasonSelect" onchange="toggleOtherReason(this)">
                        <option value="">Select a reason…</option>
                        @foreach($reasons as $key => $label)
                        <option value="{{ $label }}" {{ old('reason') === $label ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>

                {{-- Full description --}}
                <div>
                    <label class="form-label">
                        Full Description
                        <span class="text-gray-400 font-normal">(required when reason is "Other"; otherwise optional)</span>
                    </label>
                    <textarea name="description" rows="3" class="form-input text-sm" id="descField"
                        placeholder="Explain the billing error in detail | include any reference numbers, dates, or staff involved…">{{ old('description') }}</textarea>
                </div>

                {{-- Amount --}}
                <div class="max-w-xs">
                    <label class="form-label">Credit Amount (KES) <span class="text-red-500">*</span></label>
                    <input type="number" name="amount" id="amountField" step="0.01" min="0.01"
                        max="{{ $invoice->total_amount }}"
                        value="{{ old('amount') }}"
                        required class="form-input text-sm"
                        placeholder="0.00">
                    <p class="text-xs text-gray-400 mt-1">Maximum: KES {{ number_format($invoice->total_amount) }}</p>
                </div>

            </div>

            {{-- Warning --}}
            <div class="bg-amber-50 border border-amber-200 rounded-lg p-3 mt-5 text-xs text-amber-800">
                <p class="font-semibold mb-1">Before submitting:</p>
                <ul class="space-y-0.5 list-disc list-inside">
                    <li>This request will go to a Finance User or Hospital Admin for approval.</li>
                    <li>The credit is not applied to the invoice until it is approved <em>and</em> applied.</li>
                    <li>You cannot approve a credit note you raised (four-eyes rule).</li>
                </ul>
            </div>

            <div class="flex gap-3 mt-5">
                <button type="submit" class="btn-primary text-sm px-6">Submit for Approval</button>
                <a href="{{ route('billing.credit-notes.index') }}" class="btn-secondary text-sm px-5">Cancel</a>
            </div>
        </form>
    </div>
</div>

@endsection
@section('scripts')
<script>
function prefillAmount(select) {
    const opt = select.options[select.selectedIndex];
    const total = parseFloat(opt.dataset.total || 0);
    if (total > 0) document.getElementById('amountField').value = total.toFixed(2);
}
function toggleOtherReason(select) {
    const desc = document.getElementById('descField');
    if (select.value.toLowerCase().includes('other')) {
        desc.setAttribute('required', 'required');
        desc.placeholder = 'Required: describe the billing error in detail…';
    } else {
        desc.removeAttribute('required');
        desc.placeholder = 'Explain the billing error in detail…';
    }
}
</script>
@endsection