@extends('layouts.cashier')
@section('title','New Fee Entry')
@section('breadcrumb')<li class="breadcrumb-item active">New Fee Entry</li>@endsection
@section('cashier-content')

@php
    $selectedInstitute = $institutes->count() === 1 ? $institutes->first() : null;
@endphp

{{-- HEADER --}}
<div class="card border-0 shadow-sm mb-4">
    <div class="card-body" style="background:linear-gradient(135deg, rgba(30,58,95,.10), rgba(25,135,84,.10));">
        <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
            <div>
                <div class="fw-bold" style="color:#1e3a5f;font-size:1.15rem">
                    <i class="fas fa-cash-register me-2 text-success"></i>Fee Collection Desk
                </div>
                <div class="text-muted small">
                    Pick a student → verify due → record payment → auto-generate receipt.
                </div>
            </div>
            <div class="d-flex gap-2 flex-wrap">
                <div class="px-3 py-2 rounded border bg-white">
                    <div class="small text-muted">Students (matched)</div>
                    <div class="fw-bold">{{ $students->total() }}</div>
                </div>
                <div class="px-3 py-2 rounded border bg-white">
                    <div class="small text-muted">Institute</div>
                    <div class="fw-bold">{{ $selectedInstitute?->name ?? '—' }}</div>
                </div>
                <div class="px-3 py-2 rounded border bg-white">
                    <div class="small text-muted">Date</div>
                    <div class="fw-bold">{{ now()->format('d M Y') }}</div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-4">
    {{-- LEFT: STUDENT PICKER --}}
    <div class="col-xl-7">
        <div class="card border-0 shadow-sm">
            <div class="card-header border-0 bg-white">
                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                    <div class="fw-bold" style="color:#1e3a5f"><i class="fas fa-user-check me-2 text-primary"></i>Select Student</div>
                    <div class="small text-muted">Click any row to auto-fill payment panel</div>
                </div>
            </div>

            <div class="card-body">
                <form method="GET" action="{{ route('cashier.fees.create') }}" class="row g-2 align-items-end mb-3">
                    <div class="col-md-6">
                        <label class="form-label small text-muted mb-1">Search</label>
                        <div class="input-group">
                            <span class="input-group-text bg-white"><i class="fas fa-search text-muted"></i></span>
                            <input type="text" name="search" class="form-control" placeholder="Name / Enrollment / Phone" value="{{ request('search') }}">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label small text-muted mb-1">Institute</label>
                        @if($selectedInstitute)
                            <input type="hidden" name="institute_id" value="{{ $selectedInstitute->id }}">
                            <input type="text" class="form-control" value="{{ $selectedInstitute->name }}" readonly>
                        @else
                            <select name="institute_id" class="form-select">
                                <option value="">All Institutes</option>
                                @foreach($institutes as $inst)
                                    <option value="{{ $inst->id }}" {{ request('institute_id')==$inst->id?'selected':'' }}>{{ $inst->name }}</option>
                                @endforeach
                            </select>
                        @endif
                    </div>
                    <div class="col-md-2 d-flex gap-2">
                        <button type="submit" class="btn btn-primary w-100"><i class="fas fa-filter me-1"></i>Go</button>
                        <a href="{{ route('cashier.fees.create') }}" class="btn btn-outline-secondary"><i class="fas fa-undo"></i></a>
                    </div>
                </form>

                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Enrollment</th>
                                <th>Student</th>
                                <th>Course</th>
                                <th class="text-end">Total</th>
                                <th class="text-end">Paid</th>
                                <th class="text-end">Due</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                        @forelse($students as $s)
                            @php
                                $fee  = (float) (optional($s->feeStructure)->total_course_fee ?? 0);
                                $paid = (float) $s->feePayments->sum('amount_paid');
                                $due  = $fee - $paid;
                            @endphp
                            <tr class="student-row"
                                data-id="{{ $s->id }}"
                                data-name="{{ $s->name }}"
                                data-enrollment="{{ $s->enrollment_no }}"
                                data-fee="{{ $fee }}"
                                data-paid="{{ $paid }}"
                                data-due="{{ $due }}"
                                data-course="{{ optional($s->course)->name }}"
                                data-institute="{{ optional($s->institute)->name }}"
                                style="cursor:pointer">
                                <td><span class="badge bg-dark-subtle text-dark border font-monospace">{{ $s->enrollment_no }}</span></td>
                                <td>
                                    <div class="fw-semibold">{{ $s->name }}</div>
                                    <div class="small text-muted">{{ optional($s->institute)->name ?? '—' }}</div>
                                </td>
                                <td class="small">{{ optional($s->course)->name ?? '—' }}</td>
                                <td class="text-end small">₹{{ number_format($fee, 0) }}</td>
                                <td class="text-end small text-success">₹{{ number_format($paid, 0) }}</td>
                                <td class="text-end">
                                    @if($due > 0)
                                        <span class="badge bg-danger-subtle text-danger border">₹{{ number_format($due, 0) }}</span>
                                    @else
                                        <span class="badge bg-success-subtle text-success border">Paid</span>
                                    @endif
                                </td>
                                <td class="text-end">
                                    <button type="button" class="btn btn-sm btn-primary select-student-btn">
                                        <i class="fas fa-arrow-right me-1"></i>Select
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="7" class="text-center py-4 text-muted">No students found.</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="mt-3">{{ $students->withQueryString()->links() }}</div>
            </div>
        </div>
    </div>

    {{-- RIGHT: PAYMENT PANEL --}}
    <div class="col-xl-5">
        <div class="card border-0 shadow-sm position-sticky" style="top: 90px;">
            <div class="card-header border-0" style="background:linear-gradient(135deg, rgba(25,135,84,.12), rgba(255,255,255,1));">
                <div class="d-flex align-items-center justify-content-between">
                    <div class="fw-bold" style="color:#1e3a5f"><i class="fas fa-money-check-alt me-2 text-success"></i>Record Payment</div>
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="changeStudentBtn"><i class="fas fa-exchange-alt me-1"></i>Change</button>
                </div>
                <div class="small text-muted mt-1">Receipt will be generated automatically after saving.</div>
            </div>

            <div class="card-body" id="paymentCard" style="display:none">
                <div class="alert alert-info py-2 mb-3" id="studentInfo"></div>
                <form method="POST" action="{{ route('cashier.fees.store') }}">
                    @csrf
                    <input type="hidden" name="student_id" id="student_id">

                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label fw-semibold">Academic Session *</label>
                            <select name="academic_session_id" class="form-select" required>
                                <option value="">Select Session</option>
                                @foreach($sessions as $s)
                                    <option value="{{ $s->id }}" {{ $s->is_active?'selected':'' }}>{{ $s->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-12">
                            <label class="form-label fw-semibold">Amount Paid *</label>
                            <div class="input-group input-group-lg">
                                <span class="input-group-text">₹</span>
                                <input type="number" name="amount_paid" id="amount_paid" class="form-control" step="0.01" min="1" required>
                            </div>
                            <div class="form-text">Tip: click a student row to auto-fill due amount.</div>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Payment Mode *</label>
                            <select name="payment_mode" class="form-select" id="paymentMode" required>
                                @foreach(['Cash','Online','Cheque','DD'] as $m)<option value="{{ $m }}">{{ $m }}</option>@endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Payment Date *</label>
                            <input type="date" name="payment_date" class="form-control" value="{{ date('Y-m-d') }}" required>
                        </div>

                        <div class="col-md-6" id="chequeField" style="display:none">
                            <label class="form-label fw-semibold">Cheque/DD No</label>
                            <input type="text" name="cheque_no" class="form-control">
                        </div>
                        <div class="col-md-6" id="bankField" style="display:none">
                            <label class="form-label fw-semibold">Bank Name</label>
                            <input type="text" name="bank_name" class="form-control">
                        </div>

                        <div class="col-12">
                            <label class="form-label fw-semibold">Remarks</label>
                            <textarea name="remarks" class="form-control" rows="2" placeholder="Optional note for this transaction..."></textarea>
                        </div>
                    </div>

                    <div class="mt-4 d-grid gap-2">
                        <button type="submit" class="btn btn-success btn-lg">
                            <i class="fas fa-save me-1"></i>Save Payment
                        </button>
                        <a href="{{ route('cashier.dashboard') }}" class="btn btn-outline-secondary">Back</a>
                    </div>
                </form>
            </div>

            <div class="card-body" id="paymentPlaceholder">
                <div class="text-center py-4">
                    <div class="mb-2" style="font-size:2rem;color:#198754"><i class="fas fa-hand-pointer"></i></div>
                    <div class="fw-bold" style="color:#1e3a5f">Select a student to begin</div>
                    <div class="small text-muted mt-1">Click any row on the left to load payment details here.</div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- PAYMENT FORM (hidden until student selected) --}}
@endsection
@push('scripts')
<script>
$(function(){
    // Select student from table row
    $(document).on('click', '.select-student-btn, .student-row td:not(:last-child)', function(){
        const row = $(this).closest('.student-row');
        const id         = row.data('id');
        const name       = row.data('name');
        const enrollment = row.data('enrollment');
        const fee        = row.data('fee');
        const paid       = row.data('paid');
        const due        = row.data('due');
        const course     = row.data('course');
        const institute  = row.data('institute');

        $('#student_id').val(id);
        $('#studentInfo').html(
            '<strong>' + name + '</strong> (' + enrollment + ') &nbsp;|&nbsp; ' +
            institute + ' &nbsp;|&nbsp; ' + course +
            '<br>Total Fee: <strong>₹' + Number(fee).toLocaleString('en-IN') + '</strong>' +
            ' &nbsp; Paid: <strong class="text-success">₹' + Number(paid).toLocaleString('en-IN') + '</strong>' +
            ' &nbsp; Due: <strong class="text-danger">₹' + Number(due).toLocaleString('en-IN') + '</strong>'
        );
        $('#amount_paid').val(due > 0 ? due : '');
        $('#paymentPlaceholder').hide();
        $('#paymentCard').show();
        $('html, body').animate({scrollTop: $('#paymentCard').offset().top - 110}, 250);
    });

    // Change student button
    $('#changeStudentBtn').on('click', function(){
        $('#paymentCard').hide();
        $('#paymentPlaceholder').show();
        $('html, body').animate({scrollTop: 0}, 250);
    });

    // Show/hide cheque fields
    $('#paymentMode').on('change', function(){
        const m = $(this).val();
        $('#chequeField, #bankField').toggle(m === 'Cheque' || m === 'DD');
    }).trigger('change');
});
</script>
@endpush