@extends('layouts.student')
@section('title','Select Subjects')

@section('content')
<h5 class="fw-bold mb-4">Subject Selection</h5>

@foreach($openSessions as $session)
@php $sessionSelections = $selections[$session->id] ?? collect(); @endphp

<div class="card dashboard-card mb-4">
    <div class="card-header bg-white border-bottom py-3">
        <h6 class="fw-bold mb-0">{{ $session->title }}</h6>
    </div>
    <div class="card-body p-4">

        @if($sessionSelections->count() > 0)
            {{-- Already selected --}}
            <div class="alert alert-success">
                <i class="bi bi-check-circle me-2"></i>
                <strong>Subjects selected for this session:</strong>
                <ul class="mb-0 mt-2">
                    @foreach($sessionSelections as $sel)
                        <li>
                            {{ $sel->subject->name }}
                            @if($sel->is_compulsory)
                                <span class="badge bg-warning text-dark ms-1">Compulsory</span>
                            @endif
                        </li>
                    @endforeach
                </ul>
            </div>
            <a href="{{ route('student.exam.instructions', $session) }}" class="btn btn-primary">
                <i class="bi bi-play-fill me-1"></i>Proceed to Exam
            </a>

        @else
            {{-- Selection form --}}
            <div class="alert alert-info py-2 small mb-4">
                <i class="bi bi-info-circle me-1"></i>
                <strong>Use of English</strong> is compulsory and automatically included.
                Select <strong>3 more subjects</strong> below.
            </div>

            <form method="POST" action="{{ route('student.subjects.store') }}">
                @csrf
                <input type="hidden" name="exam_session_id" value="{{ $session->id }}">

                <div class="row g-3 mb-4">
                    @foreach($subjects->where('is_compulsory', 0) as $subject)
                    <div class="col-6 col-md-4 col-lg-3">
                        <label class="subject-card d-flex align-items-center gap-2 p-3 rounded border cursor-pointer w-100">
                            <input type="checkbox" name="subject_ids[]"
                                   value="{{ $subject->id }}" class="subject-check form-check-input mt-0">
                            <div>
                                <div class="fw-semibold small">{{ $subject->name }}</div>
                                <div class="text-muted" style="font-size:0.7rem">{{ $subject->code }}</div>
                            </div>
                        </label>
                    </div>
                    @endforeach
                </div>

                <div class="d-flex align-items-center gap-3">
                    <button type="submit" class="btn btn-primary px-4" id="submitBtn" disabled>
                        <i class="bi bi-check-lg me-1"></i>Confirm Subjects
                    </button>
                    <span class="text-muted small" id="selectionCount">Select exactly 3 subjects</span>
                </div>
            </form>
        @endif
    </div>
</div>
@endforeach

@if($openSessions->isEmpty())
    <div class="card dashboard-card text-center py-5 text-muted">
        <i class="bi bi-calendar-x" style="font-size:3rem"></i>
        <p class="mt-2">No exam sessions are currently open.</p>
    </div>
@endif
@endsection

@push('styles')
<style>
.subject-card { transition: all 0.15s; cursor: pointer; }
.subject-card:hover { border-color: #003580 !important; background: #f0f5ff; }
.subject-card.selected { border-color: #003580 !important; background: #e8f0fe; }
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function () {
    $('.subject-check').on('change', function () {
        const checked = $('.subject-check:checked').length;
        const btn = $('#submitBtn');
        const label = $('#selectionCount');

        $(this).closest('.subject-card').toggleClass('selected', $(this).is(':checked'));

        if (checked > 3) { $(this).prop('checked', false); $(this).closest('.subject-card').removeClass('selected'); return; }

        btn.prop('disabled', checked !== 3);
        if (checked === 3) label.html('<span class="text-success fw-semibold"><i class="bi bi-check-circle me-1"></i>3 subjects selected — ready!</span>');
        else label.text(`Select exactly 3 subjects (${checked}/3 selected)`);
    });
});
</script>
@endpush