@extends('layouts.app')

@section('title', 'Academic Year Details')

@section('content')

@php
    $today = now();

    $totalDays = $academicYear->start_date->diffInDays($academicYear->end_date) + 1;

    $elapsedDays = 0;
    $remainingDays = $totalDays;

    if ($today->between($academicYear->start_date, $academicYear->end_date)) {
        $elapsedDays = $academicYear->start_date->diffInDays($today) + 1;
        $remainingDays = max($academicYear->end_date->diffInDays($today), 0);
    } elseif ($today->greaterThan($academicYear->end_date)) {
        $elapsedDays = $totalDays;
        $remainingDays = 0;
    }

    $progress = $totalDays > 0
        ? min(round(($elapsedDays / $totalDays) * 100, 1), 100)
        : 0;

    $hasStarted = $today->greaterThanOrEqualTo($academicYear->start_date);
    $hasEnded = $today->greaterThan($academicYear->end_date);

    if ($hasEnded) {
        $periodStatus = 'Completed';
        $periodBadge = 'badge-secondary';
    } elseif ($hasStarted) {
        $periodStatus = 'In Progress';
        $periodBadge = 'badge-success';
    } else {
        $periodStatus = 'Upcoming';
        $periodBadge = 'badge-info';
    }
@endphp


<div class="space-y-5">

    {{-- ============================================================
        Page Header
    ============================================================ --}}
    <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">

        <div class="flex items-start gap-3">

            <a
                href="{{ route('academic-years.index') }}"
                class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border bg-card text-muted transition hover:bg-background hover:text-text"
                title="Back"
            >
                <i class="fa-solid fa-arrow-left text-sm"></i>
            </a>

            <div>

                <div class="flex flex-wrap items-center gap-2">

                    <h1 class="text-xl font-semibold text-text">
                        {{ $academicYear->name }}
                    </h1>

                    @if($academicYear->is_current)
                        <span class="badge-info">
                            <i class="fa-solid fa-circle-check mr-1"></i>
                            Current
                        </span>
                    @endif

                    @if($academicYear->is_active)
                        <span class="badge-success">
                            Active
                        </span>
                    @else
                        <span class="badge-danger">
                            Inactive
                        </span>
                    @endif

                </div>

                <p class="mt-1 text-sm text-muted">
                    Academic year information and session overview.
                </p>

            </div>

        </div>


        <div class="flex flex-wrap items-center gap-2">

            <a
                href="{{ route('academic-years.index') }}"
                class="btn btn-secondary"
            >
                <i class="fa-solid fa-list"></i>
                All Academic Years
            </a>

            @can('academic-years.edit')
                <a
                    href="{{ route('academic-years.edit', $academicYear) }}"
                    class="btn btn-primary"
                >
                    <i class="fa-solid fa-pen"></i>
                    Edit Academic Year
                </a>
            @endcan

        </div>

    </div>


    {{-- ============================================================
        Summary Cards
    ============================================================ --}}
    <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">

        {{-- Start Date --}}
        <div class="card p-4">

            <div class="flex items-center gap-3">

                <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
                    <i class="fa-regular fa-calendar"></i>
                </div>

                <div class="min-w-0">

                    <p class="text-xs font-medium text-muted">
                        Start Date
                    </p>

                    <p class="mt-1 truncate text-sm font-semibold text-text">
                        {{ $academicYear->start_date->format('d M Y') }}
                    </p>

                </div>

            </div>

        </div>


        {{-- End Date --}}
        <div class="card p-4">

            <div class="flex items-center gap-3">

                <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-infoLight text-info">
                    <i class="fa-regular fa-calendar-check"></i>
                </div>

                <div class="min-w-0">

                    <p class="text-xs font-medium text-muted">
                        End Date
                    </p>

                    <p class="mt-1 truncate text-sm font-semibold text-text">
                        {{ $academicYear->end_date->format('d M Y') }}
                    </p>

                </div>

            </div>

        </div>


        {{-- Duration --}}
        <div class="card p-4">

            <div class="flex items-center gap-3">

                <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-warningLight text-warning">
                    <i class="fa-regular fa-clock"></i>
                </div>

                <div class="min-w-0">

                    <p class="text-xs font-medium text-muted">
                        Duration
                    </p>

                    <p class="mt-1 text-sm font-semibold text-text">
                        {{ number_format($totalDays) }} days
                    </p>

                </div>

            </div>

        </div>


        {{-- Period Status --}}
        <div class="card p-4">

            <div class="flex items-center gap-3">

                <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-successLight text-success">
                    <i class="fa-solid fa-chart-line"></i>
                </div>

                <div class="min-w-0">

                    <p class="text-xs font-medium text-muted">
                        Period Status
                    </p>

                    <div class="mt-1">
                        <span class="{{ $periodBadge }}">
                            {{ $periodStatus }}
                        </span>
                    </div>

                </div>

            </div>

        </div>

    </div>


    {{-- ============================================================
        Main Information
    ============================================================ --}}
    <div class="grid grid-cols-12 gap-5">

        {{-- Academic Year Details --}}
        <div class="card col-span-12 overflow-hidden xl:col-span-8">

            <div class="border-b border-border px-5 py-4">

                <h2 class="text-base font-semibold text-text">
                    Academic Year Information
                </h2>

                <p class="mt-1 text-xs text-muted">
                    General information about this academic session.
                </p>

            </div>


            <div class="p-5">

                <dl class="grid grid-cols-1 gap-x-8 gap-y-5 sm:grid-cols-2">

                    {{-- Name --}}
                    <div>

                        <dt class="text-xs font-medium text-muted">
                            Academic Year
                        </dt>

                        <dd class="mt-1.5 text-sm font-medium text-text">
                            {{ $academicYear->name }}
                        </dd>

                    </div>


                    {{-- Status --}}
                    <div>

                        <dt class="text-xs font-medium text-muted">
                            Record Status
                        </dt>

                        <dd class="mt-1.5">

                            @if($academicYear->is_active)

                                <span class="badge-success">
                                    <span class="mr-1.5 h-1.5 w-1.5 rounded-full bg-success"></span>
                                    Active
                                </span>

                            @else

                                <span class="badge-danger">
                                    <span class="mr-1.5 h-1.5 w-1.5 rounded-full bg-danger"></span>
                                    Inactive
                                </span>

                            @endif

                        </dd>

                    </div>


                    {{-- Start Date --}}
                    <div>

                        <dt class="text-xs font-medium text-muted">
                            Start Date
                        </dt>

                        <dd class="mt-1.5 text-sm font-medium text-text">
                            {{ $academicYear->start_date->format('l, d F Y') }}
                        </dd>

                    </div>


                    {{-- End Date --}}
                    <div>

                        <dt class="text-xs font-medium text-muted">
                            End Date
                        </dt>

                        <dd class="mt-1.5 text-sm font-medium text-text">
                            {{ $academicYear->end_date->format('l, d F Y') }}
                        </dd>

                    </div>


                    {{-- Duration --}}
                    <div>

                        <dt class="text-xs font-medium text-muted">
                            Total Duration
                        </dt>

                        <dd class="mt-1.5 text-sm font-medium text-text">
                            {{ number_format($totalDays) }} days
                        </dd>

                    </div>


                    {{-- Current --}}
                    <div>

                        <dt class="text-xs font-medium text-muted">
                            Current Academic Year
                        </dt>

                        <dd class="mt-1.5">

                            @if($academicYear->is_current)

                                <span class="badge-info">
                                    <i class="fa-solid fa-check mr-1"></i>
                                    Yes
                                </span>

                            @else

                                <span class="text-sm font-medium text-text">
                                    No
                                </span>

                            @endif

                        </dd>

                    </div>


                    {{-- Created --}}
                    <div>

                        <dt class="text-xs font-medium text-muted">
                            Created At
                        </dt>

                        <dd class="mt-1.5 text-sm font-medium text-text">
                            {{ $academicYear->created_at?->format('d M Y, h:i A') ?? '—' }}
                        </dd>

                    </div>


                    {{-- Last Updated --}}
                    <div>

                        <dt class="text-xs font-medium text-muted">
                            Last Updated
                        </dt>

                        <dd class="mt-1.5 text-sm font-medium text-text">
                            {{ $academicYear->updated_at?->format('d M Y, h:i A') ?? '—' }}
                        </dd>

                    </div>

                </dl>

            </div>

        </div>


        {{-- ========================================================
            Session Status
        ======================================================== --}}
        <div class="card col-span-12 overflow-hidden xl:col-span-4">

            <div class="border-b border-border px-5 py-4">

                <h2 class="text-base font-semibold text-text">
                    Session Progress
                </h2>

                <p class="mt-1 text-xs text-muted">
                    Current progress of this academic year.
                </p>

            </div>


            <div class="p-5">

                {{-- Percentage --}}
                <div class="flex items-end justify-between gap-4">

                    <div>

                        <p class="text-xs font-medium text-muted">
                            Progress
                        </p>

                        <p class="mt-1 text-2xl font-semibold text-text">
                            {{ number_format($progress, 1) }}%
                        </p>

                    </div>

                    <span class="{{ $periodBadge }}">
                        {{ $periodStatus }}
                    </span>

                </div>


                {{-- Progress Bar --}}
                <div class="mt-5">

                    <div class="h-2 overflow-hidden rounded-full bg-background">

                        <div
                            class="h-full rounded-full bg-primary transition-all"
                            style="width: {{ $progress }}%"
                        ></div>

                    </div>

                </div>


                {{-- Stats --}}
                <div class="mt-5 grid grid-cols-2 gap-3">

                    <div class="rounded-lg border border-border bg-background/50 p-3">

                        <p class="text-xs text-muted">
                            Elapsed
                        </p>

                        <p class="mt-1 text-sm font-semibold text-text">
                            {{ number_format($elapsedDays) }} days
                        </p>

                    </div>


                    <div class="rounded-lg border border-border bg-background/50 p-3">

                        <p class="text-xs text-muted">
                            Remaining
                        </p>

                        <p class="mt-1 text-sm font-semibold text-text">
                            {{ number_format($remainingDays) }} days
                        </p>

                    </div>

                </div>


                {{-- Timeline --}}
                <div class="mt-5 border-t border-border pt-5">

                    <div class="space-y-4">

                        {{-- Start --}}
                        <div class="flex gap-3">

                            <div class="flex flex-col items-center">

                                <div class="flex h-7 w-7 items-center justify-center rounded-full bg-successLight text-success">
                                    <i class="fa-solid fa-check text-[10px]"></i>
                                </div>

                                <div class="mt-1 h-full w-px bg-border"></div>

                            </div>

                            <div class="pb-3">

                                <p class="text-sm font-medium text-text">
                                    Academic Year Starts
                                </p>

                                <p class="mt-0.5 text-xs text-muted">
                                    {{ $academicYear->start_date->format('d M Y') }}
                                </p>

                            </div>

                        </div>


                        {{-- Current --}}
                        @if(!$hasEnded && $hasStarted)

                            <div class="flex gap-3">

                                <div class="flex flex-col items-center">

                                    <div class="flex h-7 w-7 items-center justify-center rounded-full bg-infoLight text-info">
                                        <span class="h-2 w-2 rounded-full bg-info"></span>
                                    </div>

                                    <div class="mt-1 h-full w-px bg-border"></div>

                                </div>

                                <div class="pb-3">

                                    <p class="text-sm font-medium text-text">
                                        Today
                                    </p>

                                    <p class="mt-0.5 text-xs text-muted">
                                        {{ now()->format('d M Y') }}
                                    </p>

                                </div>

                            </div>

                        @endif


                        {{-- End --}}
                        <div class="flex gap-3">

                            <div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-background text-muted">
                                <i class="fa-solid fa-flag-checkered text-[10px]"></i>
                            </div>

                            <div>

                                <p class="text-sm font-medium text-text">
                                    Academic Year Ends
                                </p>

                                <p class="mt-0.5 text-xs text-muted">
                                    {{ $academicYear->end_date->format('d M Y') }}
                                </p>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>


    {{-- ============================================================
        Related Academic Information
    ============================================================ --}}
    <div class="grid grid-cols-12 gap-5">

        {{-- Academic Structure --}}
        <div class="card col-span-12 overflow-hidden lg:col-span-6">

            <div class="border-b border-border px-5 py-4">

                <h2 class="text-base font-semibold text-text">
                    Academic Structure
                </h2>

                <p class="mt-1 text-xs text-muted">
                    Related records for this academic session.
                </p>

            </div>


            <div class="divide-y divide-border">

                {{-- Classes --}}
                <div class="flex items-center gap-4 px-5 py-4">

                    <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
                        <i class="fa-solid fa-school"></i>
                    </div>

                    <div class="min-w-0 flex-1">

                        <p class="text-sm font-medium text-text">
                            School Classes
                        </p>

                        <p class="mt-0.5 text-xs text-muted">
                            Classes configured for the school
                        </p>

                    </div>

                    @can('school-classes.view')
                        <a
                            href="{{ route('school-classes.index') }}"
                            class="flex h-8 w-8 items-center justify-center rounded-lg text-muted transition hover:bg-background hover:text-primary"
                            title="View classes"
                        >
                            <i class="fa-solid fa-arrow-right text-xs"></i>
                        </a>
                    @endcan

                </div>


                {{-- Sections --}}
                <div class="flex items-center gap-4 px-5 py-4">

                    <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-infoLight text-info">
                        <i class="fa-solid fa-layer-group"></i>
                    </div>

                    <div class="min-w-0 flex-1">

                        <p class="text-sm font-medium text-text">
                            Sections
                        </p>

                        <p class="mt-0.5 text-xs text-muted">
                            Class section configuration
                        </p>

                    </div>

                    @can('sections.view')
                        <a
                            href="{{ route('sections.index') }}"
                            class="flex h-8 w-8 items-center justify-center rounded-lg text-muted transition hover:bg-background hover:text-primary"
                            title="View sections"
                        >
                            <i class="fa-solid fa-arrow-right text-xs"></i>
                        </a>
                    @endcan

                </div>


                {{-- Holidays --}}
                <div class="flex items-center gap-4 px-5 py-4">

                    <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-warningLight text-warning">
                        <i class="fa-regular fa-calendar-xmark"></i>
                    </div>

                    <div class="min-w-0 flex-1">

                        <p class="text-sm font-medium text-text">
                            Holidays
                        </p>

                        <p class="mt-0.5 text-xs text-muted">
                            Holidays within this academic period
                        </p>

                    </div>

                    @can('holidays.view')
                        <a
                            href="{{ route('holidays.index') }}"
                            class="flex h-8 w-8 items-center justify-center rounded-lg text-muted transition hover:bg-background hover:text-primary"
                            title="View holidays"
                        >
                            <i class="fa-solid fa-arrow-right text-xs"></i>
                        </a>
                    @endcan

                </div>

            </div>

        </div>


        {{-- Record Management --}}
        <div class="card col-span-12 overflow-hidden lg:col-span-6">

            <div class="border-b border-border px-5 py-4">

                <h2 class="text-base font-semibold text-text">
                    Record Management
                </h2>

                <p class="mt-1 text-xs text-muted">
                    Manage this academic year record.
                </p>

            </div>


            <div class="p-5">

                <div class="space-y-3">

                    @can('academic-years.edit')

                        <a
                            href="{{ route('academic-years.edit', $academicYear) }}"
                            class="flex items-center gap-4 rounded-lg border border-border p-4 transition hover:bg-background"
                        >

                            <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
                                <i class="fa-solid fa-pen"></i>
                            </div>

                            <div class="min-w-0 flex-1">

                                <p class="text-sm font-medium text-text">
                                    Edit Academic Year
                                </p>

                                <p class="mt-0.5 text-xs text-muted">
                                    Update dates, status and academic year information.
                                </p>

                            </div>

                            <i class="fa-solid fa-chevron-right text-xs text-muted"></i>

                        </a>

                    @endcan


                    @can('academic-years.delete')

                        @if(!$academicYear->is_current)

                            <form
                                action="{{ route('academic-years.destroy', $academicYear) }}"
                                method="POST"
                                id="delete-academic-year-form"
                            >
                                @csrf
                                @method('DELETE')

                                <button
                                    type="submit"
                                    class="flex w-full items-center gap-4 rounded-lg border border-danger/20 p-4 text-left transition hover:bg-dangerLight"
                                >

                                    <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-dangerLight text-danger">
                                        <i class="fa-regular fa-trash-can"></i>
                                    </div>

                                    <div class="min-w-0 flex-1">

                                        <p class="text-sm font-medium text-danger">
                                            Delete Academic Year
                                        </p>

                                        <p class="mt-0.5 text-xs text-muted">
                                            Permanently remove this academic year record.
                                        </p>

                                    </div>

                                    <i class="fa-solid fa-chevron-right text-xs text-danger"></i>

                                </button>

                            </form>

                        @else

                            <div class="flex items-start gap-3 rounded-lg border border-info/20 bg-infoLight p-4">

                                <i class="fa-solid fa-circle-info mt-0.5 text-info"></i>

                                <div>

                                    <p class="text-sm font-medium text-text">
                                        Current academic year
                                    </p>

                                    <p class="mt-1 text-xs leading-5 text-muted">
                                        The current academic year should not be deleted. Set another academic year as current before removing this record.
                                    </p>

                                </div>

                            </div>

                        @endif

                    @endcan

                </div>

            </div>

        </div>

    </div>

</div>

@endsection


@push('scripts')

<script>
document.addEventListener('DOMContentLoaded', function () {

    const deleteForm = document.getElementById('delete-academic-year-form');

    if (deleteForm) {

        deleteForm.addEventListener('submit', function (event) {

            const confirmed = window.confirm(
                'Are you sure you want to delete this academic year? This action cannot be undone.'
            );

            if (!confirmed) {
                event.preventDefault();
            }

        });

    }

});
</script>

@endpush