@extends('layouts.app')

@section('title', 'Promissory Notes')

@section('content')
    <div class="flex flex-col gap-6">
        <div>
            <h1 class="text-lg font-semibold">Promissory Notes</h1>
            <p class="text-xs text-muted-foreground">Track parent promises to pay fees by a given date</p>
        </div>

        <div class="grid grid-cols-3 gap-3">
            <div class="rounded-xl border border-border bg-card p-3">
                <p class="text-xs text-muted-foreground">Pending</p>
                <p class="text-lg font-semibold tabular-nums text-amber-600">KES {{ number_format($totals['pending'], 2) }}</p>
            </div>
            <div class="rounded-xl border border-border bg-card p-3">
                <p class="text-xs text-muted-foreground">Overdue</p>
                <p class="text-lg font-semibold tabular-nums text-destructive">KES {{ number_format($totals['overdue'], 2) }}</p>
            </div>
            <div class="rounded-xl border border-border bg-card p-3">
                <p class="text-xs text-muted-foreground">Honoured</p>
                <p class="text-lg font-semibold tabular-nums text-primary">KES {{ number_format($totals['honoured'], 2) }}</p>
            </div>
        </div>

        <details class="rounded-xl border border-border bg-card p-4">
            <summary class="cursor-pointer text-sm font-semibold text-muted-foreground hover:text-foreground">+ New Promissory Note</summary>
            <form method="post" action="{{ route('finance.notes.store') }}" class="mt-4 grid gap-3 md:grid-cols-2">
                @csrf
                <label class="text-xs text-muted-foreground">Student
                    <select name="student_id" id="note-student" required class="mt-1 h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none">
                        <option value="">Select student...</option>
                        @foreach ($students as $s)
                            <option value="{{ $s->id }}" data-parent="{{ $s->parent_name ?: 'Parent' }}" data-phone="{{ $s->parent_phone ?: '0700000000' }}" data-name="{{ $s->full_name }}" data-adm="{{ $s->admission_no }}">
                                {{ $s->full_name }} ({{ $s->admission_no }})
                            </option>
                        @endforeach
                    </select>
                </label>
                <label class="text-xs text-muted-foreground">Amount
                    <input type="number" name="amount" min="1" required class="mt-1 h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                </label>
                <label class="text-xs text-muted-foreground">Promised Date
                    <input type="date" name="promised_date" required class="mt-1 h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none">
                </label>
                <label class="text-xs text-muted-foreground">Parent / Phone
                    <input type="text" name="parent_name" id="note-parent" placeholder="Parent name" class="mt-1 h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none">
                </label>
                <label class="text-xs text-muted-foreground">Remarks
                    <input type="text" name="remarks" placeholder="e.g. Promise for Term 1 balance" class="mt-1 h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none">
                </label>
                <div class="flex items-end">
                    <button class="h-9 rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90">Create Note</button>
                </div>
            </form>
        </details>

        <section class="rounded-xl border border-border bg-card p-4">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b text-xs uppercase text-muted-foreground">
                        <th class="px-3 py-2 text-left font-medium">Student</th>
                        <th class="px-3 py-2 text-left font-medium">Parent</th>
                        <th class="px-3 py-2 text-right font-medium">Amount</th>
                        <th class="px-3 py-2 text-left font-medium">Promised</th>
                        <th class="px-3 py-2 text-left font-medium">Status</th>
                        <th class="px-3 py-2 text-right font-medium">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($notes as $n)
                        <tr class="border-b">
                            <td class="px-3 py-2">
                                <span class="font-medium">{{ $n->student_name }}</span>
                                <span class="block text-xs text-muted-foreground">{{ $n->admission_no }}</span>
                            </td>
                            <td class="px-3 py-2">
                                {{ $n->parent_name }}
                                <span class="block text-xs text-muted-foreground">{{ $n->parent_phone }}</span>
                            </td>
                            <td class="px-3 py-2 text-right tabular-nums">KES {{ number_format($n->amount, 2) }}</td>
                            <td class="px-3 py-2">{{ $n->promised_date }}</td>
                            <td class="px-3 py-2">
                                @php $c = match ($n->status) { 'Honoured' => 'text-primary', 'Overdue' => 'text-destructive', 'Cancelled' => 'text-muted-foreground', default => 'text-amber-600' }; @endphp
                                <span class="{{ $c }} text-xs font-medium">{{ $n->status }}</span>
                            </td>
                            <td class="px-3 py-2">
                                <div class="flex justify-end gap-2 text-xs">
                                    @if ($n->status === 'Pending' || $n->status === 'Expiring')
                                        <form method="post" action="{{ route('finance.notes.reconcile', $n->id) }}">
                                            @csrf
                                            <button class="rounded-lg border border-primary/40 px-2 py-1 text-primary hover:bg-primary/10">Reconcile</button>
                                        </form>
                                    @endif
                                    <form method="post" action="{{ route('finance.notes.delete', $n->id) }}" onsubmit="return confirm('Delete this note?')">
                                        @csrf @method('DELETE')
                                        <button class="rounded-lg border border-destructive/40 px-2 py-1 text-destructive hover:bg-destructive/10">Delete</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </section>
    </div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const sel = document.getElementById('note-student');
        const parent = document.getElementById('note-parent');
        if (sel && parent) {
            sel.addEventListener('change', () => {
                const o = sel.selectedOptions[0];
                if (o) parent.value = o.dataset.parent;
            });
        }
    });
</script>
@endpush