@extends('layouts.admin')

@section('title', setting('school_name', 'ShulePoint') . ' | Admit Learner')
@section('page-title', 'Admit Learner')

@section('content')
<form method="POST" action="{{ route('learners.store') }}" id="admitForm" enctype="multipart/form-data" novalidate>
    @csrf
    <div class="row">
        {{-- Main form column --}}
        <div class="col-lg-8">
            {{-- 1. Identity --}}
            <div class="card card-outline card-primary shadow-sm learner-card">
                <div class="card-header">
                    <h3 class="card-title"><span class="step-num">1</span> Learner identity</h3>
                    <div class="card-tools"><small class="text-muted"><span class="text-danger">*</span> required</small></div>
                </div>
                <div class="card-body">
                    @if($multiEnabled ?? false)
                        <div class="row">
                            <div class="col-md-6">
                                <label class="fld-label">School <span class="text-danger">*</span></label>
                                @if((auth()->user()->role ?? '') === 'admin')
                                    <select name="school_id" id="fSchool" class="form-control form-control-sm @error('school_id') is-invalid @enderror" required>
                                        <option value="">— Select school —</option>
                                        @foreach($schools as $s)
                                            <option value="{{ $s->id }}" @selected((string) old('school_id', $defaultSchoolId ?? '') === (string) $s->id)>{{ $s->name }}</option>
                                        @endforeach
                                    </select>
                                    @error('school_id')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                                @else
                                    <input type="text" class="form-control form-control-sm" value="{{ \App\Support\CurrentSchool::model()?->name ?? setting('school_name', 'ShulePoint') }}" disabled>
                                    <small class="form-text text-muted">Admitted into your school automatically.</small>
                                @endif
                            </div>
                        </div>
                    @endif
                    <div class="row{{ ($multiEnabled ?? false) ? ' mt-2' : '' }}">
                        <div class="col-md-4">
                            <label class="fld-label">Admission no <span class="text-danger">*</span></label>
                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-id-card"></i></span></div>
                                <input name="admission_no" value="{{ old('admission_no') }}" required
                                       class="form-control @error('admission_no') is-invalid @enderror" placeholder="e.g. ZIL/001" autofocus>
                            </div>
                            @error('admission_no')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                        <div class="col-md-4">
                            <label class="fld-label">UPI</label>
                            <input name="upi" value="{{ old('upi') }}" class="form-control form-control-sm @error('upi') is-invalid @enderror" placeholder="Learner UPI">
                            @error('upi')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                        <div class="col-md-4">
                            <label class="fld-label">NEMIS</label>
                            <input name="nemis" value="{{ old('nemis') }}" class="form-control form-control-sm @error('nemis') is-invalid @enderror" placeholder="NEMIS no">
                            @error('nemis')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-md-6">
                            <label class="fld-label"><i class="fas fa-fingerprint mr-1"></i>Biometric ID <small class="text-muted">(User ID on the ZKTeco scanner)</small></label>
                            <input name="biometric_id" value="{{ old('biometric_id') }}" class="form-control form-control-sm @error('biometric_id') is-invalid @enderror" placeholder="e.g. 104">
                            @error('biometric_id')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                            <small class="text-muted d-block mt-1">Must match the enrolment number on the <a href="{{ route('devices.index') }}">biometric device</a>.</small>
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-md-6">
                            <label class="fld-label">First name <span class="text-danger">*</span></label>
                            <input name="first_name" id="fFirst" value="{{ old('first_name') }}" required
                                   class="form-control form-control-sm @error('first_name') is-invalid @enderror" placeholder="e.g. Amina">
                            @error('first_name')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="fld-label">Last name <span class="text-danger">*</span></label>
                            <input name="last_name" id="fLast" value="{{ old('last_name') }}" required
                                   class="form-control form-control-sm @error('last_name') is-invalid @enderror" placeholder="e.g. Njeri">
                            @error('last_name')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-md-6">
                            <label class="fld-label">Gender</label>
                            <div class="gender-pick" role="radiogroup" aria-label="Gender">
                                @foreach(['male' => 'Male', 'female' => 'Female', 'other' => 'Other'] as $val => $label)
                                    <label class="gender-opt {{ old('gender') === $val ? 'checked' : '' }}">
                                        <input type="radio" name="gender" value="{{ $val }}" @checked(old('gender') === $val)>
                                        <i class="fas {{ $val === 'male' ? 'fa-mars' : ($val === 'female' ? 'fa-venus' : 'fa-genderless') }} mr-1"></i>{{ $label }}
                                    </label>
                                @endforeach
                            </div>
                            @error('gender')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="fld-label">Date of birth</label>
                            <input type="date" name="dob" value="{{ old('dob') }}" class="form-control form-control-sm @error('dob') is-invalid @enderror">
                            @error('dob')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-md-6">
                            <label class="fld-label">Passport photo <small class="text-muted">(used as avatar)</small></label>
                            <div class="custom-file">
                                <input type="file" name="photo" id="fPhoto" accept=".jpg,.jpeg,.png,.webp" class="custom-file-input @error('photo') is-invalid @enderror">
                                <label class="custom-file-label" for="fPhoto" id="photoLabel">Choose photo…</label>
                            </div>
                            @error('photo')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                            <small class="text-muted d-block mt-1">JPG, PNG or WebP · max 2 MB</small>
                        </div>
                        <div class="col-md-6 d-flex align-items-center">
                            <img id="photoThumb" class="img-circle elevation-2 d-none" style="width:56px;height:56px;object-fit:cover;" alt="Passport preview">
                            <small class="text-muted ml-2" id="photoHint">No photo selected</small>
                        </div>
                    </div>
                </div>
            </div>

            {{-- 2. Placement --}}
            <div class="card card-outline card-primary shadow-sm learner-card">
                <div class="card-header"><h3 class="card-title"><span class="step-num">2</span> Academic placement</h3></div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <label class="fld-label">Grade level</label>
                            <select name="grade_level_id" id="fGrade" class="form-control form-control-sm @error('grade_level_id') is-invalid @enderror">
                                <option value="">— Select grade —</option>
                                @foreach($grades as $g)
                                    <option value="{{ $g->id }}" @selected((string) old('grade_level_id') === (string) $g->id)>{{ $g->name }}@if($g->stage) ({{ $g->stage }})@endif</option>
                                @endforeach
                            </select>
                            @error('grade_level_id')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="fld-label">Class</label>
                            <select name="school_class_id" id="fClass" class="form-control form-control-sm @error('school_class_id') is-invalid @enderror">
                                <option value="">— Select class —</option>
                                @foreach($classes as $c)
                                    <option value="{{ $c->id }}" @selected((string) old('school_class_id') === (string) $c->id)>{{ $c->name }}</option>
                                @endforeach
                            </select>
                            @error('school_class_id')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-md-4">
                            <label class="fld-label">House</label>
                            <input name="house" value="{{ old('house') }}" class="form-control form-control-sm" placeholder="e.g. Lion">
                        </div>
                        <div class="col-md-8">
                            <label class="fld-label">Transport route <small class="text-muted">(fee added to invoice)</small></label>
                            <select name="transport_route_id" id="fRoute" class="form-control form-control-sm @error('transport_route_id') is-invalid @enderror">
                                <option value="">— No transport —</option>
                                @foreach($transportRoutes as $r)
                                    <option value="{{ $r->id }}" data-price="{{ $r->price }}" @selected((string) old('transport_route_id') === (string) $r->id)>{{ $r->name }}{{ $r->term ? ' · '.$r->term : '' }} — KES {{ number_format($r->price, 2) }}</option>
                                @endforeach
                            </select>
                            @error('transport_route_id')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                            <small class="form-text text-muted" id="routeFeeHint"></small>
                        </div>
                        <div class="col-md-4">
                            <label class="fld-label">Status <span class="text-danger">*</span></label>
                            <select name="status" id="fStatus" class="form-control form-control-sm @error('status') is-invalid @enderror" required>
                                @foreach(['active' => 'Active', 'alumni' => 'Alumni', 'transferred' => 'Transferred'] as $val => $label)
                                    <option value="{{ $val }}" @selected(old('status', 'active') === $val)>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="fld-label">Admission date</label>
                            <input type="date" name="admission_date" value="{{ old('admission_date', date('Y-m-d')) }}" class="form-control form-control-sm">
                        </div>
                    </div>
                </div>
            </div>

            {{-- 3. Guardian --}}
            <div class="card card-outline card-primary shadow-sm learner-card">
                <div class="card-header"><h3 class="card-title"><span class="step-num">3</span> Guardian &amp; contact</h3></div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <label class="fld-label">Guardian name</label>
                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-user-shield"></i></span></div>
                                <input name="guardian_name" value="{{ old('guardian_name') }}" class="form-control" placeholder="e.g. Mary Njeri">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="fld-label">Guardian phone <span class="text-danger">*</span></label>
                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-phone"></i></span></div>
                                <input name="guardian_phone" required value="{{ old('guardian_phone') }}" class="form-control @error('guardian_phone') is-invalid @enderror" placeholder="e.g. 0712 345 678">
                                <small class="text-muted">Kenyan mobile: 0712…, +254…, 254… or 712…</small>
                                @error('guardian_phone')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                            </div>
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-md-6">
                            <label class="fld-label">Guardian email</label>
                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-envelope"></i></span></div>
                                <input type="email" name="guardian_email" value="{{ old('guardian_email') }}" class="form-control" placeholder="guardian@example.com">
                            </div>
                            @error('guardian_email')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="fld-label">Address</label>
                            <textarea name="address" rows="1" class="form-control form-control-sm" placeholder="Estate / town / notes">{{ old('address') }}</textarea>
                        </div>
                    </div>
                </div>
                <div class="card-footer admit-footer">
                    <label class="mb-0 small text-muted"><input type="checkbox" name="_another" value="1" @checked(old('_another'))> Admit another after saving</label>
                    <div>
                        <a href="{{ route('learners.index') }}" class="btn btn-sm btn-outline-secondary">Cancel</a>
                        <button type="reset" class="btn btn-sm btn-light border">Reset</button>
                        <button type="submit" class="btn btn-sm btn-primary"><i class="fas fa-check mr-1"></i> Admit learner</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Preview column --}}
        <div class="col-lg-4">
            <div class="card shadow-sm learner-card">
                <div class="card-header"><h3 class="card-title"><i class="fas fa-eye mr-1"></i> Live preview</h3></div>
                <div class="card-body text-center">
                    <img id="pvPhoto" class="img-circle elevation-2 mx-auto d-none" style="width:64px;height:64px;object-fit:cover;" alt="Learner photo">
                    <span class="learner-avatar avatar-lg mx-auto" id="pvAvatar">?</span>
                    <h5 class="mt-2 mb-0" id="pvName">New learner</h5>
                    <div class="mt-1"><span class="adm-chip" id="pvAdm">—</span></div>
                    <div class="mt-2">
                        <span class="class-pill" id="pvClass">No class</span>
                        <div class="small text-muted mt-1" id="pvGrade">No grade</div>
                    </div>
                    <div class="mt-2"><span class="status-pill ok" id="pvStatus"><span class="dot"></span><span id="pvStatusTx">Active</span></span></div>
                </div>
            </div>

            <div class="card shadow-sm learner-card">
                <div class="card-header"><h3 class="card-title"><i class="fas fa-tasks mr-1"></i> Completion</h3></div>
                <div class="card-body py-2">
                    <div class="progress progress-sm mb-2"><div class="progress-bar bg-primary" id="doneBar" style="width:0%"></div></div>
                    <small class="text-muted" id="doneTx">Fill the required fields to admit.</small>
                </div>
            </div>

            <div class="card shadow-sm learner-card">
                <div class="card-body">
                    <p class="small text-muted mb-2"><i class="fas fa-bolt mr-1 text-warning"></i> Admitting many learners? Use CSV import instead.</p>
                    <div class="d-flex">
                        <a href="{{ route('learners.index') }}" class="btn btn-sm btn-outline-secondary mr-1"><i class="fas fa-arrow-left mr-1"></i> Register</a>
                        <a href="{{ route('academics.index') }}" class="btn btn-sm btn-outline-primary">Classes &amp; CBE</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection



@push('scripts')
<script>
(function () {
    var fFirst = document.getElementById('fFirst');
    var fLast = document.getElementById('fLast');
    var pvAvatar = document.getElementById('pvAvatar');
    var pvName = document.getElementById('pvName');
    var admInput = document.querySelector('input[name="admission_no"]');
    var pvAdm = document.getElementById('pvAdm');
    var fClass = document.getElementById('fClass');
    var fGrade = document.getElementById('fGrade');
    var fStatus = document.getElementById('fStatus');
    var pvClass = document.getElementById('pvClass');
    var pvGrade = document.getElementById('pvGrade');
    var pvStatus = document.getElementById('pvStatus');
    var pvStatusTx = document.getElementById('pvStatusTx');
    var doneBar = document.getElementById('doneBar');
    var doneTx = document.getElementById('doneTx');

    function initials() {
        var a = (fFirst.value || '').trim().charAt(0);
        var b = (fLast.value || '').trim().charAt(0);
        return ((a + b) || '?').toUpperCase();
    }
    function hue() {
        var s = (fFirst.value || '') + (fLast.value || '');
        var h = 0;
        for (var i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) % 360;
        return h;
    }
    function refresh() {
        pvAvatar.textContent = initials();
        var h = hue();
        pvAvatar.style.background = 'linear-gradient(135deg, hsl(' + h + ',60%,45%), hsl(' + ((h + 40) % 360) + ',65%,32%))';
        var name = ((fFirst.value || '') + ' ' + (fLast.value || '')).trim();
        pvName.textContent = name || 'New learner';
        pvAdm.textContent = admInput.value.trim() || '—';
        pvClass.textContent = fClass.options[fClass.selectedIndex] ? fClass.options[fClass.selectedIndex].text.replace(/^— | —$/g, '') : 'No class';
        if (!fClass.value) pvClass.textContent = 'No class';
        pvGrade.textContent = fGrade.value ? fGrade.options[fGrade.selectedIndex].text : 'No grade';
        var st = fStatus.value || 'active';
        pvStatusTx.textContent = st.charAt(0).toUpperCase() + st.slice(1);
        pvStatus.className = 'status-pill ' + (st === 'active' ? 'ok' : (st === 'alumni' ? 'muted' : 'warn'));

        var req = [admInput, fFirst, fLast];
        var done = req.filter(function (el) { return el.value.trim() !== ''; }).length + (fClass.value ? 0.5 : 0) + (fGrade.value ? 0.5 : 0);
        var pct = Math.round(done / 4 * 100);
        doneBar.style.width = pct + '%';
        doneTx.textContent = pct === 100 ? 'Ready to admit.' : pct + '% complete — admission no + names are required.';
    }
    [fFirst, fLast, admInput, fClass, fGrade, fStatus].forEach(function (el) {
        el.addEventListener('input', refresh);
        el.addEventListener('change', refresh);
    });
    var fRoute = document.getElementById('fRoute');
    var routeHint = document.getElementById('routeFeeHint');
    function refreshRoute() {
        if (!fRoute || !routeHint) return;
        var opt = fRoute.options[fRoute.selectedIndex];
        var price = opt && opt.dataset ? opt.dataset.price : '';
        routeHint.textContent = price ? 'KES ' + Number(price).toFixed(2) + ' will be added to the learner invoice.' : '';
    }
    if (fRoute) { fRoute.addEventListener('change', refreshRoute); refreshRoute(); }
    var fSchool = document.getElementById('fSchool');
    var fGradeC = document.getElementById('fGrade');
    var fClassC = document.getElementById('fClass');
    function fillSelect(sel, items, textFn, keep) {
        if (!sel) return;
        var cur = keep || sel.value;
        sel.innerHTML = '';
        var empty = document.createElement('option');
        empty.value = '';
        empty.textContent = sel === fRoute ? '— No transport —' : '— Select —';
        sel.appendChild(empty);
        items.forEach(function (it) {
            var o = document.createElement('option');
            o.value = it.id;
            o.textContent = textFn(it);
            if (it.price !== undefined) o.dataset.price = it.price;
            if (String(it.id) === String(cur)) o.selected = true;
            sel.appendChild(o);
        });
    }
    if (fSchool) {
        fSchool.addEventListener('change', function () {
            if (!fSchool.value) return;
            fetch(@json(route('learners.form-options')) + '?school_id=' + encodeURIComponent(fSchool.value), { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                .then(function (r) { return r.ok ? r.json() : null; })
                .then(function (d) {
                    if (!d) return;
                    fillSelect(fGradeC, d.grades || [], function (g) { return g.name + (g.stage ? ' (' + g.stage + ')' : ''); });
                    fillSelect(fClassC, d.classes || [], function (c) { return c.name; });
                    fillSelect(fRoute, d.routes || [], function (r) { return r.name + (r.term ? ' · ' + r.term : '') + ' — KES ' + Number(r.price).toFixed(2); }, '');
                    refreshRoute();
                })
                .catch(function () {});
        });
    }
    document.querySelectorAll('.gender-opt input').forEach(function (r) {
        r.addEventListener('change', function () {
            document.querySelectorAll('.gender-opt').forEach(function (o) { o.classList.remove('checked'); });
            if (r.checked) r.closest('.gender-opt').classList.add('checked');
        });
    });
    var fPhoto = document.getElementById('fPhoto');
    if (fPhoto) {
        fPhoto.addEventListener('change', function () {
            var file = this.files && this.files[0];
            var label = document.getElementById('photoLabel');
            if (label) label.textContent = file ? file.name : 'Choose photo…';
            var thumb = document.getElementById('photoThumb');
            var hint = document.getElementById('photoHint');
            var pvPhoto = document.getElementById('pvPhoto');
            if (file) {
                var url = URL.createObjectURL(file);
                if (thumb) { thumb.src = url; thumb.classList.remove('d-none'); }
                if (hint) hint.textContent = file.name;
                if (pvPhoto) { pvPhoto.src = url; pvPhoto.classList.remove('d-none'); }
                pvAvatar.classList.add('d-none');
            } else {
                if (thumb) thumb.classList.add('d-none');
                if (hint) hint.textContent = 'No photo selected';
                if (pvPhoto) pvPhoto.classList.add('d-none');
                pvAvatar.classList.remove('d-none');
            }
        });
    }
    refresh();
})();
</script>
@endpush