@extends('layouts.examiner')
@section('title', 'Add New Candidates')

@section('content')
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">Add New Candidates</h1>
    <a href="{{ route('examiner.candidates.index') }}" class="btn btn-sm btn-secondary">
        <i class="fas fa-arrow-left mr-1"></i> Back to List
    </a>
</div>

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show">
        <i class="fas fa-check-circle mr-1"></i> {{ session('success') }}
        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
    </div>
@endif
@if($errors->any())
    <div class="alert alert-danger alert-dismissible fade show">
        <i class="fas fa-exclamation-circle mr-1"></i> {{ $errors->first() }}
        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
    </div>
@endif

<form method="POST" action="{{ route('examiner.candidates.store-bulk') }}" id="bulk-form">
@csrf

<div class="row">

    {{-- ── Left column: session / dept selectors ── --}}
    <div class="col-lg-3 mb-4">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Details</h6>
            </div>
            <div class="card-body">

                <div class="form-group">
                    <label class="small font-weight-bold">ACADEMIC SESSION <span class="text-danger">*</span></label>
                    <select name="session_id" id="session_id" class="form-control" required>
                        <option value="">— Select —</option>
                        @foreach($sessions as $s)
                            <option value="{{ $s->id }}" {{ old('session_id') == $s->id ? 'selected' : '' }}>
                                {{ $s->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group">
                    <label class="small font-weight-bold">FACULTY</label>
                    <select id="faculty_id" class="form-control">
                        <option value="">— Select —</option>
                        @foreach($faculties as $f)
                            <option value="{{ $f->id }}">{{ $f->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group">
                    <label class="small font-weight-bold">DEPARTMENT <span class="text-danger">*</span></label>
                    <select name="department_id" id="department_id" class="form-control" required>
                        <option value="">— Select Faculty First —</option>
                    </select>
                </div>

                <div class="form-group">
                    <label class="small font-weight-bold">PROGRAMME</label>
                    <select name="programme_id" id="programme_id" class="form-control">
                        <option value="">— Select Department First —</option>
                    </select>
                </div>

                <div class="form-group">
                    <label class="small font-weight-bold">DEGREE</label>
                    <select name="degree_id" id="degree_id" class="form-control">
                        <option value="">— Select —</option>
                        @foreach($degrees as $deg)
                            <option value="{{ $deg->id }}" {{ old('degree_id') == $deg->id ? 'selected' : '' }}>
                                {{ $deg->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

            </div>
        </div>
    </div>

    {{-- ── Right column: 30-row entry table ── --}}
    <div class="col-lg-9 mb-4">
        <div class="card shadow mb-4">
            <div class="card-header py-3 d-flex justify-content-between align-items-center">
                <h6 class="m-0 font-weight-bold text-primary">Enter Candidate Info</h6>
                <div class="d-flex align-items-center gap-2">
                    <span class="badge badge-secondary mr-2" id="filled-count">0 / 30 filled</span>
                    <button type="button" class="btn btn-sm btn-outline-primary" data-toggle="modal" data-target="#searchModal">
                        <i class="fas fa-search mr-1"></i> Search Candidates
                    </button>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-bordered table-sm mb-0" id="entry-table">
                        <thead class="thead-light">
                            <tr>
                                <th style="width:36px;">#</th>
                                <th style="width:160px;">REG. NO.</th>
                                <th>NAME <small class="text-muted">(Surname First)</small></th>
                                <th style="width:100px;">JAMB SCORE</th>
                                <th style="width:110px;">GENDER</th>
                            </tr>
                        </thead>
                        <tbody>
                            @for($i = 1; $i <= 30; $i++)
                            <tr>
                                <td class="text-center text-muted align-middle small">{{ $i }}</td>
                                <td>
                                    <input type="text" name="candidate_reg{{ $i }}"
                                           class="form-control form-control-sm candidate-reg"
                                           placeholder="REG/YEAR/NO"
                                           style="text-transform:uppercase;">
                                </td>
                                <td>
                                    <input type="text" name="candidate_name{{ $i }}"
                                           class="form-control form-control-sm candidate-name"
                                           placeholder="SURNAME FIRSTNAME OTHERNAME">
                                </td>
                                <td>
                                    <input type="text" name="jamb{{ $i }}"
                                           class="form-control form-control-sm"
                                           placeholder="e.g. 240">
                                </td>
                                <td>
                                    <select name="gender{{ $i }}" class="form-control form-control-sm">
                                        <option value="">—</option>
                                        <option value="Male">Male</option>
                                        <option value="Female">Female</option>
                                    </select>
                                </td>
                            </tr>
                            @endfor
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer text-right">
                <button type="submit" class="btn btn-primary" id="submit-btn">
                    <i class="fas fa-save mr-1"></i> Submit and Continue
                </button>
            </div>
        </div>
    </div>

</div>
</form>
@endsection

{{-- ── Candidate search modal ─────────────────────────────────────── --}}
<div class="modal fade" id="searchModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-search mr-2"></i> Search Candidates</h5>
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <div class="modal-body">
                <div class="input-group mb-3">
                    <input type="text" id="global-search-input" class="form-control"
                           placeholder="Type reg no, surname or firstname…" autocomplete="off">
                    <div class="input-group-append">
                        <button class="btn btn-primary" id="global-search-btn" type="button">
                            <i class="fas fa-search"></i> Search
                        </button>
                    </div>
                </div>
                <div id="search-results">
                    <p class="text-muted small">Enter at least 2 characters and click Search.</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
$(function () {

    var SEARCH_URL = '{{ route('examiner.ajax.candidate-search') }}';
    var DEPT_URL   = '{{ url('examiner/ajax/departments-by-faculty') }}';
    var PROG_URL   = '{{ url('examiner/ajax/programmes-by-department') }}';

    // ── Faculty → Departments cascade ───────────────────────────
    $('#faculty_id').on('change', function () {
        var facId = $(this).val();
        var $dept = $('#department_id');
        var $prog = $('#programme_id');
        $dept.html('<option value="">Loading…</option>').prop('disabled', true);
        $prog.html('<option value="">— Select Department First —</option>');
        if (!facId) { $dept.html('<option value="">— Select Faculty First —</option>').prop('disabled', false); return; }
        $.getJSON(DEPT_URL + '/' + facId, function (data) {
            var opts = '<option value="">— Select —</option>';
            $.each(data, function (_, d) { opts += '<option value="' + d.id + '">' + d.name + '</option>'; });
            $dept.html(opts).prop('disabled', false);
        });
    });

    // ── Department → Programmes cascade ─────────────────────────
    $('#department_id').on('change', function () {
        var deptId = $(this).val();
        var $prog  = $('#programme_id');
        $prog.html('<option value="">Loading…</option>').prop('disabled', true);
        if (!deptId) { $prog.html('<option value="">— Select Department First —</option>').prop('disabled', false); return; }
        $.getJSON(PROG_URL + '/' + deptId, function (data) {
            var opts = '<option value="">— Select —</option>';
            $.each(data, function (_, p) { opts += '<option value="' + p.id + '">' + p.name + '</option>'; });
            $prog.html(opts).prop('disabled', false);
        });
    });

    // ── Per-row reg_no auto-fill ─────────────────────────────────
    // When the examiner finishes typing a reg_no in a row and tabs out,
    // look up that candidate in the DB and pre-fill name + gender.
    $(document).on('blur', '.candidate-reg', function () {
        var $row  = $(this).closest('tr');
        var regNo = $(this).val().trim().toUpperCase();
        var $name = $row.find('.candidate-name');
        if (!regNo || $name.val().trim()) return; // skip if name already entered
        $.getJSON(SEARCH_URL, { q: regNo }, function (data) {
            if (data.length === 1 && data[0].reg_no === regNo) {
                var c = data[0];
                $name.val(c.name);
                $row.find('select[name^="gender"]').val(c.gender || '');
                $row.find('input[name^="jamb"]').val(c.jamb_score || '');
                updateCount();
            }
        });
    });

    // ── Global search modal ──────────────────────────────────────
    function doSearch() {
        var q = $('#global-search-input').val().trim();
        if (q.length < 2) { $('#search-results').html('<p class="text-muted small">Enter at least 2 characters.</p>'); return; }
        $('#search-results').html('<p class="text-muted small"><i class="fas fa-spinner fa-spin mr-1"></i> Searching…</p>');
        $.getJSON(SEARCH_URL, { q: q }, function (data) {
            if (!data.length) { $('#search-results').html('<p class="text-muted small">No candidates found.</p>'); return; }
            var html = '<table class="table table-sm table-bordered mb-0"><thead class="thead-light"><tr>'
                + '<th>Reg No</th><th>Name</th><th>Gender</th><th>JAMB</th><th></th></tr></thead><tbody>';
            $.each(data, function (_, c) {
                html += '<tr>'
                    + '<td><code>' + c.reg_no + '</code></td>'
                    + '<td>' + c.name + '</td>'
                    + '<td>' + (c.gender || '—') + '</td>'
                    + '<td>' + (c.jamb_score || '—') + '</td>'
                    + '<td><button type="button" class="btn btn-xs btn-primary btn-add-result" '
                    + 'data-reg="' + c.reg_no + '" data-name="' + c.name + '" '
                    + 'data-gender="' + (c.gender || '') + '" data-jamb="' + (c.jamb_score || '') + '">'
                    + '<i class="fas fa-plus"></i> Add</button></td>'
                    + '</tr>';
            });
            html += '</tbody></table>';
            $('#search-results').html(html);
        });
    }

    $('#global-search-btn').on('click', doSearch);
    $('#global-search-input').on('keypress', function (e) { if (e.which === 13) { e.preventDefault(); doSearch(); } });

    // "Add" button in modal results → fill next empty row
    $(document).on('click', '.btn-add-result', function () {
        var reg    = $(this).data('reg');
        var name   = $(this).data('name');
        var gender = $(this).data('gender');
        var jamb   = $(this).data('jamb');
        var filled = false;
        $('#entry-table tbody tr').each(function () {
            var $regInput = $(this).find('.candidate-reg');
            if (!$regInput.val().trim()) {
                $regInput.val(reg);
                $(this).find('.candidate-name').val(name);
                $(this).find('select[name^="gender"]').val(gender);
                $(this).find('input[name^="jamb"]').val(jamb);
                filled = true;
                updateCount();
                return false; // break
            }
        });
        if (!filled) { alert('All 30 rows are already filled.'); }
        else { $(this).closest('tr').addClass('table-success').find('button').prop('disabled', true).text('Added'); }
    });

    // ── Clear modal state on close ───────────────────────────────
    $('#searchModal').on('hidden.bs.modal', function () {
        $('#global-search-input').val('');
        $('#search-results').html('<p class="text-muted small">Enter at least 2 characters and click Search.</p>');
    });

    // ── Filled-row counter ───────────────────────────────────────
    function updateCount() {
        var n = 0;
        $('.candidate-reg').each(function () { if ($(this).val().trim()) n++; });
        $('#filled-count').text(n + ' / 30 filled');
    }
    $(document).on('input', '.candidate-reg, .candidate-name', updateCount);

    // ── Auto-uppercase reg inputs ────────────────────────────────
    $(document).on('input', '.candidate-reg', function () { this.value = this.value.toUpperCase(); });

    // ── Guard: at least one row before submit ────────────────────
    $('#bulk-form').on('submit', function (e) {
        var filled = 0;
        $('.candidate-reg').each(function () { if ($(this).val().trim()) filled++; });
        if (filled === 0) { e.preventDefault(); alert('Please enter at least one candidate before submitting.'); }
    });

});
</script>
@endpush