@extends('layouts.app')
@section('title', 'Academic Sessions')
@section('breadcrumb', 'Academic › Sessions & Terms')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="fw-bold mb-0" style="color:#0f3d23;">
            <i class="bi bi-calendar3 me-2" style="color:#c9a94d;"></i>Academic Sessions & Terms
        </h4>
        <p class="text-muted mb-0" style="font-size:.85rem;">
            {{ $school->name }} — Create academic years and their terms
        </p>
    </div>
    <button class="btn" style="background:#1a6b3c; color:#fff; border-radius:8px;"
            data-bs-toggle="modal" data-bs-target="#createSessionModal">
        <i class="bi bi-plus-lg me-1"></i>New Session
    </button>
</div>

{{-- Info box for first-time setup --}}
@if($sessions->isEmpty())
<div class="alert" style="background:#fff3cd; border-left:4px solid #c9a94d; border-radius:8px;">
    <h6 class="fw-bold"><i class="bi bi-lightbulb me-1"></i>Getting Started</h6>
    <p class="mb-0" style="font-size:.88rem;">
        Create your first academic session (e.g. <strong>2024/2025</strong>) then add 3 terms within it.
        This unlocks student enrollment, grade entry and report cards.
    </p>
</div>
@endif

@forelse($sessions as $session)
<div class="card table-card mb-4">
    <div class="card-header py-3 d-flex justify-content-between align-items-center"
         style="background:{{ $session->is_current ? '#f0faf3' : '#f8f9fa' }};
                border-left: 4px solid {{ $session->is_current ? '#1a6b3c' : '#ccc' }};">
        <div>
            <span class="fw-bold fs-6">{{ $session->name }}</span>
            @if($session->is_current)
            <span class="badge ms-2" style="background:#1a6b3c; color:#fff; font-size:.72rem;">
                <i class="bi bi-check-circle me-1"></i>Current Session
            </span>
            @endif
            <div class="text-muted mt-1" style="font-size:.78rem;">
                {{ $session->start_date->format('M d, Y') }} — {{ $session->end_date->format('M d, Y') }}
                &bull; {{ $session->enrollments_count }} enrollment(s)
            </div>
        </div>
        <div class="d-flex gap-2">
            @if(!$session->is_current)
            <form action="{{ route('school.academic.sessions.set-current', $session) }}" method="POST">
                @csrf
                <button type="submit" class="btn btn-sm btn-outline-success" style="border-radius:6px;"
                        onclick="return confirm('Set {{ $session->name }} as the current active session?')">
                    <i class="bi bi-pin me-1"></i>Set Current
                </button>
            </form>
            @endif
            <button class="btn btn-sm btn-outline-secondary" style="border-radius:6px;"
                    data-bs-toggle="modal" data-bs-target="#addTermModal{{ $session->id }}">
                <i class="bi bi-plus me-1"></i>Add Term
            </button>
        </div>
    </div>

    {{-- Terms --}}
    <div class="card-body p-0">
        @if($session->terms->isEmpty())
        <div class="text-center py-4 text-muted" style="font-size:.85rem;">
            <i class="bi bi-calendar-x me-1"></i>No terms added yet.
            <a href="#" data-bs-toggle="modal" data-bs-target="#addTermModal{{ $session->id }}">Add First Term</a>
        </div>
        @else
        <div class="table-responsive">
            <table class="table table-hover mb-0 align-middle" style="font-size:.85rem;">
                <thead>
                    <tr><th>Term</th><th>Dates</th><th>Status</th><th>Results</th><th>Actions</th></tr>
                </thead>
                <tbody>
                    @foreach($session->terms->sortBy('term_number') as $term)
                    <tr>
                        <td class="fw-semibold">{{ $term->name }}</td>
                        <td class="text-muted">
                            {{ $term->start_date->format('M d') }} — {{ $term->end_date->format('M d, Y') }}
                        </td>
                        <td>
                            @if($term->is_current)
                            <span class="badge badge-status-active" style="font-size:.72rem;">
                                <i class="bi bi-broadcast me-1"></i>Current Term
                            </span>
                            @else
                            <span class="badge bg-light text-dark" style="font-size:.72rem;">Inactive</span>
                            @endif
                        </td>
                        <td>
                            @if($term->results_published)
                            <span class="badge badge-status-completed" style="font-size:.72rem;">
                                <i class="bi bi-check me-1"></i>Published
                            </span>
                            @else
                            <span class="badge bg-light text-dark" style="font-size:.72rem;">Not Published</span>
                            @endif
                        </td>
                        <td>
                            <div class="d-flex gap-1">
                                @if(!$term->is_current)
                                <form action="{{ route('school.academic.terms.set-current', $term) }}" method="POST" class="d-inline">
                                    @csrf
                                    <button class="btn btn-sm btn-outline-success" title="Set as current term">
                                        <i class="bi bi-pin"></i>
                                    </button>
                                </form>
                                @endif
                                @if(!$term->results_published)
                                <form action="{{ route('school.academic.terms.publish', $term) }}" method="POST" class="d-inline">
                                    @csrf
                                    <button class="btn btn-sm btn-outline-primary" title="Publish results"
                                            onclick="return confirm('Publish results for {{ $term->name }}? Students will be able to view them.')">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                </form>
                                @endif
                                <a href="{{ route('school.grades.result-sheet', ['class_arm_id' => optional($school->currentSession?->classArms->first())->id, 'term_id' => $term->id]) }}"
                                   class="btn btn-sm btn-outline-secondary" title="View result sheet">
                                    <i class="bi bi-table"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @endif
    </div>
</div>

{{-- Add Term Modal (one per session) --}}
<div class="modal fade" id="addTermModal{{ $session->id }}" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background:#0f3d23; color:#fff;">
                <h5 class="modal-title">
                    <i class="bi bi-calendar-plus me-2"></i>Add Term to {{ $session->name }}
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('school.academic.terms.store') }}" method="POST">
            @csrf
            <input type="hidden" name="academic_session_id" value="{{ $session->id }}">
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-md-7">
                        <label class="form-label fw-semibold">Term Name <span class="text-danger">*</span></label>
                        <select name="name" class="form-select" required>
                            <option value="">— Select —</option>
                            <option value="First Term">First Term</option>
                            <option value="Second Term">Second Term</option>
                            <option value="Third Term">Third Term</option>
                        </select>
                    </div>
                    <div class="col-md-5">
                        <label class="form-label fw-semibold">Term Number <span class="text-danger">*</span></label>
                        <select name="term_number" class="form-select" required>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Start Date <span class="text-danger">*</span></label>
                        <input type="date" name="start_date" class="form-control" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">End Date <span class="text-danger">*</span></label>
                        <input type="date" name="end_date" class="form-control" required>
                    </div>
                    <div class="col-12">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="is_current" value="1" id="isCurrent{{ $session->id }}">
                            <label class="form-check-label" for="isCurrent{{ $session->id }}">
                                Set as current active term
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn" style="background:#1a6b3c; color:#fff;">Add Term</button>
            </div>
            </form>
        </div>
    </div>
</div>
@empty
<div class="card table-card">
    <div class="card-body text-center py-5 text-muted">
        <i class="bi bi-calendar3 fs-2 d-block mb-2"></i>
        No academic sessions yet. Create your first session to get started.
    </div>
</div>
@endforelse

{{-- Create Session Modal --}}
<div class="modal fade" id="createSessionModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background:#0f3d23; color:#fff;">
                <h5 class="modal-title"><i class="bi bi-calendar-plus me-2"></i>New Academic Session</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('school.academic.sessions.store') }}" method="POST">
            @csrf
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label fw-semibold">Session Name <span class="text-danger">*</span></label>
                    <input type="text" name="name" class="form-control" required
                           placeholder="e.g. 2024/2025" pattern="^\d{4}\/\d{4}$"
                           title="Format: YYYY/YYYY e.g. 2024/2025">
                    <div class="form-text">Format: 2024/2025</div>
                </div>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Start Date <span class="text-danger">*</span></label>
                        <input type="date" name="start_date" class="form-control" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">End Date <span class="text-danger">*</span></label>
                        <input type="date" name="end_date" class="form-control" required>
                    </div>
                </div>
                <div class="mt-3">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="is_current" value="1" id="sessionIsCurrent" checked>
                        <label class="form-check-label" for="sessionIsCurrent">
                            Set as current active session
                        </label>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn" style="background:#1a6b3c; color:#fff;">
                    <i class="bi bi-check me-1"></i>Create Session
                </button>
            </div>
            </form>
        </div>
    </div>
</div>
@endsection