@extends('layouts.app')
@section('title', 'Assess – ' . $student->name)
@section('content')

@php
    $profile = $student->studentProfile;
@endphp

<a href="{{ route('ci.student.profile', $student) }}" class="text-muted text-decoration-none small d-inline-flex align-items-center gap-1 mb-2">
    <i class="bi bi-chevron-left"></i> {{ $student->name }}
</a>

{{-- ── Who / what ─────────────────────────────────────────────────────── --}}
<div class="card mb-3">
    <div class="card-body d-flex flex-wrap align-items-center gap-3">
        @if($profile?->photo_path)
        <img src="{{ asset('storage/' . $profile->photo_path) }}" class="student-avatar" style="width:48px;height:48px" alt="">
        @else
        <span class="student-avatar d-inline-flex align-items-center justify-content-center" style="width:48px;height:48px">
            {{ strtoupper(mb_substr($student->name, 0, 1)) }}
        </span>
        @endif

        <div class="flex-grow-1 min-w-0">
            <div class="fw-bold">{{ $student->name }}</div>
            <div class="small text-muted">
                {{ $profile?->student_id ?: '—' }} · {{ $semester->name }}
            </div>
        </div>

        <div class="text-end">
            <div class="small text-muted">Current progress</div>
            <div class="fw-bold">{{ $progress['passed'] }}/{{ $progress['total'] }}
                <span class="text-muted fw-normal small">({{ $progress['percent'] }}%)</span>
            </div>
        </div>
    </div>
</div>

{{-- ── Score guide ────────────────────────────────────────────────────── --}}
<div class="card mb-3">
    <div class="card-body py-2 d-flex flex-wrap align-items-center gap-2 small">
        <span class="fw-semibold me-1">Score guide:</span>
        @foreach(array_reverse(config('assessment.score_labels'), true) as $value => $label)
        <span class="text-nowrap"><span class="badge score-{{ $value }}">{{ $value }}</span> {{ $label }}</span>
        @endforeach
        <span class="text-nowrap"><span class="badge score-na">NA</span> Not applicable</span>
        <span class="ms-auto text-muted">Pass mark is {{ config('assessment.pass_score') }}.</span>
    </div>
</div>

{{-- ── Toolbar ────────────────────────────────────────────────────────── --}}
<div class="proc-toolbar card mb-3">
    <div class="card-body py-2 d-flex flex-wrap align-items-center gap-2">
        <div class="proc-search flex-grow-1">
            <i class="bi bi-search"></i>
            <input type="search" id="procSearch" class="form-control" placeholder="Search procedures…" autocomplete="off">
        </div>

        <div class="btn-group btn-group-sm proc-filters" role="group">
            <button type="button" class="btn btn-outline-secondary active" data-filter="all">All</button>
            <button type="button" class="btn btn-outline-secondary" data-filter="pending">Not assessed</button>
            <button type="button" class="btn btn-outline-secondary" data-filter="retry">Retry</button>
            <button type="button" class="btn btn-outline-secondary" data-filter="passed">Passed</button>
        </div>

        <div class="btn-group btn-group-sm" role="group">
            <button type="button" class="btn btn-outline-secondary" id="expandAll" title="Expand all"><i class="bi bi-arrows-expand"></i></button>
            <button type="button" class="btn btn-outline-secondary" id="collapseAll" title="Collapse all"><i class="bi bi-arrows-collapse"></i></button>
        </div>
    </div>
    <div class="proc-resultbar d-none" id="resultBar"></div>
</div>

<form method="POST" action="{{ route('ci.student.assess.store', [$student, $semester]) }}" id="assessForm">
    @csrf

    @if($compulsoryRoots->isNotEmpty())
    <section data-section>
        <h6 class="proc-section-title"><i class="bi bi-star-fill text-warning"></i> Compulsory Procedures</h6>
        @php $rootNum = 0; @endphp
        @foreach($compulsoryRoots as $root)
            @php $rootNum++; @endphp
            @include('ci._assess-group', ['root' => $root, 'rootNum' => $rootNum, 'allowNA' => false, 'latestMap' => $latestMap])
        @endforeach
    </section>
    @endif

    @if($optionalRoots->isNotEmpty())
    <section data-section class="mt-4">
        <h6 class="proc-section-title"><i class="bi bi-bookmark-fill text-info"></i> Optional Procedures</h6>
        @php $rootNum = 0; @endphp
        @foreach($optionalRoots as $root)
            @php $rootNum++; @endphp
            @include('ci._assess-group', ['root' => $root, 'rootNum' => $rootNum, 'allowNA' => true, 'latestMap' => $latestMap])
        @endforeach
    </section>
    @endif

    <div id="noResults" class="text-center text-muted py-5 d-none">
        <i class="bi bi-search d-block fs-3 mb-2 opacity-50"></i>No procedures match your search.
    </div>

    {{-- Sticky save bar --}}
    <div class="assess-savebar no-print">
        <div class="assess-savebar-inner">
            <span class="small">
                <strong id="scoredCount">0</strong> scored
                <span class="text-muted d-none d-sm-inline">· dated {{ now()->format('d M Y') }}</span>
            </span>
            <button type="button" class="btn btn-sm btn-outline-secondary ms-auto" id="clearAll" hidden>
                Clear all
            </button>
            <button type="submit" class="btn btn-success" id="saveBtn" disabled>
                <i class="bi bi-check2-circle me-1"></i>Save assessments
            </button>
        </div>
    </div>
</form>

@push('scripts')
<script>
(function () {
    const form      = document.getElementById('assessForm');
    const search    = document.getElementById('procSearch');
    const filters   = document.querySelectorAll('.proc-filters [data-filter]');
    const groups    = Array.from(document.querySelectorAll('[data-group]'));
    const resultBar = document.getElementById('resultBar');
    const noResults = document.getElementById('noResults');
    const counter   = document.getElementById('scoredCount');
    const saveBtn   = document.getElementById('saveBtn');
    const clearAll  = document.getElementById('clearAll');
    let state = 'all';
    let saving = false;

    // ── Scoring ──────────────────────────────────────────────────────────
    // A score and NA are mutually exclusive; both live in the same row.
    form.addEventListener('change', e => {
        const input = e.target;
        if (!input.classList.contains('score-input')) return;

        const row = input.closest('.assess-row');
        if (!row) return;

        if (input.type === 'radio' && input.checked) {
            const na = row.querySelector('input[type="checkbox"].score-input');
            if (na) na.checked = false;
        }
        if (input.type === 'checkbox' && input.checked) {
            row.querySelectorAll('input[type="radio"].score-input').forEach(r => { r.checked = false; });
        }
        syncRow(row);
        updateCount();
    });

    form.addEventListener('click', e => {
        const btn = e.target.closest('[data-clear]');
        if (!btn) return;
        const row = btn.closest('.assess-row');
        row.querySelectorAll('.score-input').forEach(i => { i.checked = false; });
        const remarks = row.querySelector('select');
        if (remarks) remarks.value = '';
        syncRow(row);
        updateCount();
    });

    function rowScored(row) {
        return Array.from(row.querySelectorAll('.score-input')).some(i => i.checked);
    }

    function syncRow(row) {
        const scored = rowScored(row);
        row.classList.toggle('is-scored', scored);
        const clearBtn = row.querySelector('[data-clear]');
        if (clearBtn) clearBtn.hidden = !scored;
    }

    function updateCount() {
        const n = Array.from(document.querySelectorAll('.assess-row')).filter(rowScored).length;
        counter.textContent = n;
        saveBtn.disabled = n === 0;
        clearAll.hidden = n === 0;
    }

    clearAll.addEventListener('click', () => {
        document.querySelectorAll('.assess-row').forEach(row => {
            row.querySelectorAll('.score-input').forEach(i => { i.checked = false; });
            const remarks = row.querySelector('select');
            if (remarks) remarks.value = '';
            syncRow(row);
        });
        updateCount();
    });

    // ── Search & filter ──────────────────────────────────────────────────
    function apply() {
        const term = (search.value || '').trim().toLowerCase();
        let shown = 0, total = 0;

        groups.forEach(group => {
            let visible = 0;
            group.querySelectorAll('.proc-item').forEach(row => {
                total++;
                const ok = (!term || row.dataset.name.includes(term))
                        && (state === 'all' || row.dataset.state === state);
                row.classList.toggle('d-none', !ok);
                if (ok) { visible++; shown++; }
            });

            const empty = group.querySelector('.proc-empty');
            const table = group.querySelector('.table-responsive');
            empty?.classList.toggle('d-none', visible !== 0);
            table?.classList.toggle('d-none', visible === 0);

            const filtering = term || state !== 'all';
            group.classList.toggle('d-none', filtering && visible === 0);
            if (filtering && visible > 0) open(group, true);
        });

        document.querySelectorAll('[data-section]').forEach(section => {
            const any = Array.from(section.querySelectorAll('[data-group]')).some(g => !g.classList.contains('d-none'));
            section.classList.toggle('d-none', !any);
        });

        const filtering = term || state !== 'all';
        resultBar.textContent = shown + ' of ' + total + ' procedures shown';
        resultBar.classList.toggle('d-none', !filtering);
        noResults.classList.toggle('d-none', shown !== 0);
    }

    function open(group, shouldOpen) {
        const panel = group.querySelector('.collapse');
        const header = group.querySelector('.proc-group-header');
        panel?.classList.toggle('show', shouldOpen);
        header?.setAttribute('aria-expanded', String(shouldOpen));
    }

    search.addEventListener('input', apply);
    filters.forEach(btn => btn.addEventListener('click', () => {
        filters.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        state = btn.dataset.filter;
        apply();
    }));

    document.getElementById('expandAll').addEventListener('click', () => groups.forEach(g => open(g, true)));
    document.getElementById('collapseAll').addEventListener('click', () => groups.forEach(g => open(g, false)));

    groups.forEach(group => {
        const panel = group.querySelector('.collapse');
        panel?.addEventListener('shown.bs.collapse', () => open(group, true));
        panel?.addEventListener('hidden.bs.collapse', () => open(group, false));
    });

    // ── Guard against losing work ────────────────────────────────────────
    form.addEventListener('submit', () => {
        saving = true;
        saveBtn.disabled = true;
        saveBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Saving…';
    });

    window.addEventListener('beforeunload', e => {
        if (saving) return;
        if (Array.from(document.querySelectorAll('.assess-row')).some(rowScored)) {
            e.preventDefault();
            e.returnValue = '';
        }
    });

    updateCount();
})();
</script>
@endpush
@endsection