@extends('layouts.app')

@section('title', $section->name)

@section('content')

@php
    $studentsCount = (int) ($section->students_count ?? 0);
    $teacherAssignmentsCount = (int) ($section->teacher_assignments_count ?? 0);
    $attendancesCount = (int) ($section->attendances_count ?? 0);

    $capacity = (int) $section->capacity;

    $availableSeats = max(
        0,
        $capacity - $studentsCount
    );

    $occupancyPercentage = $capacity > 0
        ? min(
            100,
            round(($studentsCount / $capacity) * 100)
        )
        : 0;

    $isFull = $capacity > 0 &&
        $studentsCount >= $capacity;

    $isNearlyFull = ! $isFull &&
        $occupancyPercentage >= 80;

    $hasRelatedRecords =
        $studentsCount > 0 ||
        $teacherAssignmentsCount > 0 ||
        $attendancesCount > 0;
@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('sections.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 to sections"
            >
                <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">
                        {{ $section->name }}
                    </h1>


                    @if($section->code)

                        <span class="rounded-lg bg-background px-2 py-1 text-xs font-medium text-muted">
                            {{ $section->code }}
                        </span>

                    @endif


                    @if($section->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

                </div>


                <p class="mt-1 text-sm text-muted">

                    @if($section->schoolClass)

                        {{ $section->schoolClass->name }}

                        @if($section->schoolClass->academicYear)
                            · {{ $section->schoolClass->academicYear->name }}
                        @endif

                    @else

                        Section information and academic configuration.

                    @endif

                </p>

            </div>

        </div>


        {{-- ========================================================
            Header Actions
        ======================================================== --}}
        <div class="flex flex-wrap items-center gap-2">

            <a
                href="{{ route('sections.index') }}"
                class="btn btn-secondary"
            >
                <i class="fa-solid fa-list"></i>
                <span>All Sections</span>
            </a>


            @can('sections.edit')

                <a
                    href="{{ route('sections.edit', $section) }}"
                    class="btn btn-primary"
                >
                    <i class="fa-solid fa-pen"></i>
                    <span>Edit Section</span>
                </a>

            @endcan

        </div>

    </div>


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

        {{-- Students --}}
        <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-solid fa-user-graduate"></i>
                </div>

                <div>

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

                    <p class="mt-1 text-lg font-semibold text-text">
                        {{ number_format($studentsCount) }}
                    </p>

                </div>

            </div>

        </div>


        {{-- Capacity --}}
        <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-solid fa-users"></i>
                </div>

                <div>

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

                    <p class="mt-1 text-lg font-semibold text-text">
                        {{ number_format($capacity) }}
                    </p>

                </div>

            </div>

        </div>


        {{-- Available Seats --}}
        <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
                    @if($isFull)
                        bg-dangerLight text-danger
                    @elseif($isNearlyFull)
                        bg-warningLight text-warning
                    @else
                        bg-successLight text-success
                    @endif
                ">

                    <i class="fa-solid fa-chair"></i>

                </div>

                <div>

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

                    <p class="
                        mt-1 text-lg font-semibold
                        @if($isFull)
                            text-danger
                        @elseif($isNearlyFull)
                            text-warning
                        @else
                            text-text
                        @endif
                    ">
                        {{ number_format($availableSeats) }}
                    </p>

                </div>

            </div>

        </div>


        {{-- Occupancy --}}
        <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
                    @if($isFull)
                        bg-dangerLight text-danger
                    @elseif($isNearlyFull)
                        bg-warningLight text-warning
                    @else
                        bg-successLight text-success
                    @endif
                ">

                    <i class="fa-solid fa-chart-pie"></i>

                </div>

                <div>

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

                    <p class="mt-1 text-lg font-semibold text-text">
                        {{ $occupancyPercentage }}%
                    </p>

                </div>

            </div>

        </div>

    </div>


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

        {{-- ========================================================
            Section Information
        ======================================================== --}}
        <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">
                    Section Information
                </h2>

                <p class="mt-1 text-xs text-muted">
                    General section details and configuration.
                </p>

            </div>


            <div class="p-5">

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

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

                        <dt class="text-xs font-medium text-muted">
                            Section Name
                        </dt>

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

                    </div>


                    {{-- Code --}}
                    <div>

                        <dt class="text-xs font-medium text-muted">
                            Section Code
                        </dt>

                        <dd class="mt-1.5 text-sm font-medium text-text">
                            {{ $section->code ?: '—' }}
                        </dd>

                    </div>


                    {{-- Class --}}
                    <div>

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

                        <dd class="mt-1.5">

                            @if($section->schoolClass)

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

                                    @can('school-classes.view')

                                        <a
                                            href="{{ route('school-classes.show', $section->schoolClass) }}"
                                            class="text-sm font-medium text-text transition hover:text-primary"
                                        >
                                            {{ $section->schoolClass->name }}
                                        </a>

                                    @else

                                        <span class="text-sm font-medium text-text">
                                            {{ $section->schoolClass->name }}
                                        </span>

                                    @endcan


                                    @if($section->schoolClass->code)

                                        <span class="rounded-lg bg-background px-2 py-1 text-xs text-muted">
                                            {{ $section->schoolClass->code }}
                                        </span>

                                    @endif

                                </div>

                            @else

                                <span class="text-sm text-muted">
                                    —
                                </span>

                            @endif

                        </dd>

                    </div>


                    {{-- Academic Year --}}
                    <div>

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

                        <dd class="mt-1.5">

                            @if($section->schoolClass?->academicYear)

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

                                    <span class="text-sm font-medium text-text">
                                        {{ $section->schoolClass->academicYear->name }}
                                    </span>

                                    @if($section->schoolClass->academicYear->is_current)

                                        <span class="badge-info">
                                            Current
                                        </span>

                                    @endif

                                </div>

                            @else

                                <span class="text-sm text-muted">
                                    —
                                </span>

                            @endif

                        </dd>

                    </div>


                    {{-- Capacity --}}
                    <div>

                        <dt class="text-xs font-medium text-muted">
                            Student Capacity
                        </dt>

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

                    </div>


                    {{-- Display Order --}}
                    <div>

                        <dt class="text-xs font-medium text-muted">
                            Display Order
                        </dt>

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

                    </div>


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

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

                        <dd class="mt-1.5">

                            @if($section->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>


                    {{-- Record ID --}}
                    <div>

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

                        <dd class="mt-1.5 text-sm font-medium text-text">
                            #{{ $section->id }}
                        </dd>

                    </div>

                </dl>


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

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

                    @if($section->description)

                        <p class="mt-2 whitespace-pre-line text-sm leading-6 text-text">
                            {{ $section->description }}
                        </p>

                    @else

                        <p class="mt-2 text-sm text-muted">
                            No description has been added for this section.
                        </p>

                    @endif

                </div>

            </div>

        </div>


        {{-- ========================================================
            Occupancy
        ======================================================== --}}
        <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">
                    Section Occupancy
                </h2>

                <p class="mt-1 text-xs text-muted">
                    Current student allocation and capacity.
                </p>

            </div>


            <div class="p-5">

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

                    <div>

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

                        <p class="mt-1 text-2xl font-semibold text-text">
                            {{ $occupancyPercentage }}%
                        </p>

                    </div>


                    @if($isFull)

                        <span class="badge-danger">
                            Full
                        </span>

                    @elseif($isNearlyFull)

                        <span class="rounded-lg bg-warningLight px-2 py-1 text-xs font-medium text-warning">
                            Nearly Full
                        </span>

                    @else

                        <span class="badge-success">
                            Available
                        </span>

                    @endif

                </div>


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

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

                        <div
                            class="
                                h-full rounded-full
                                @if($isFull)
                                    bg-danger
                                @elseif($isNearlyFull)
                                    bg-warning
                                @else
                                    bg-success
                                @endif
                            "
                            style="width: {{ $occupancyPercentage }}%"
                        ></div>

                    </div>


                    <div class="mt-2 flex items-center justify-between gap-3 text-xs text-muted">

                        <span>
                            {{ number_format($studentsCount) }} students
                        </span>

                        <span>
                            {{ number_format($capacity) }} capacity
                        </span>

                    </div>

                </div>


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

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

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

                        <p class="mt-1 text-lg font-semibold text-text">
                            {{ number_format($studentsCount) }}
                        </p>

                    </div>


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

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

                        <p class="
                            mt-1 text-lg font-semibold
                            @if($availableSeats <= 0)
                                text-danger
                            @else
                                text-text
                            @endif
                        ">
                            {{ number_format($availableSeats) }}
                        </p>

                    </div>

                </div>


                {{-- Status Message --}}
                <div class="
                    mt-5 rounded-lg border p-4
                    @if($isFull)
                        border-danger/20 bg-dangerLight
                    @elseif($isNearlyFull)
                        border-warning/20 bg-warningLight
                    @else
                        border-success/20 bg-successLight
                    @endif
                ">

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

                        @if($isFull)

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

                            <div>

                                <p class="text-sm font-medium text-danger">
                                    Section is full
                                </p>

                                <p class="mt-1 text-xs leading-5 text-muted">
                                    No additional seats are currently available.
                                </p>

                            </div>

                        @elseif($isNearlyFull)

                            <i class="fa-solid fa-triangle-exclamation mt-0.5 text-warning"></i>

                            <div>

                                <p class="text-sm font-medium text-text">
                                    Section is nearly full
                                </p>

                                <p class="mt-1 text-xs leading-5 text-muted">
                                    Only {{ number_format($availableSeats) }} seat(s) remain available.
                                </p>

                            </div>

                        @else

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

                            <div>

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

                                <p class="mt-1 text-xs leading-5 text-muted">
                                    {{ number_format($availableSeats) }} seat(s) remain available in this section.
                                </p>

                            </div>

                        @endif

                    </div>

                </div>

            </div>

        </div>

    </div>


    {{-- ============================================================
        Academic Placement
    ============================================================ --}}
    <div class="card overflow-hidden">

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

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

            <p class="mt-1 text-xs text-muted">
                Class and academic year associated with this section.
            </p>

        </div>


        <div class="grid grid-cols-1 divide-y divide-border md:grid-cols-2 md:divide-x md:divide-y-0">

            {{-- Class --}}
            <div class="p-5">

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

                    <div class="flex h-10 w-10 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-xs font-medium text-muted">
                            School Class
                        </p>


                        @if($section->schoolClass)

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

                                <p class="text-sm font-semibold text-text">
                                    {{ $section->schoolClass->name }}
                                </p>


                                @if(!$section->schoolClass->is_active)

                                    <span class="badge-danger">
                                        Inactive
                                    </span>

                                @endif

                            </div>


                            @if($section->schoolClass->code)

                                <p class="mt-1 text-xs text-muted">
                                    Code: {{ $section->schoolClass->code }}
                                </p>

                            @endif


                            @can('school-classes.view')

                                <a
                                    href="{{ route('school-classes.show', $section->schoolClass) }}"
                                    class="mt-3 inline-flex items-center gap-2 text-xs font-medium text-primary hover:underline"
                                >
                                    View Class

                                    <i class="fa-solid fa-arrow-right text-[10px]"></i>
                                </a>

                            @endcan

                        @else

                            <p class="mt-1 text-sm text-muted">
                                No class information available.
                            </p>

                        @endif

                    </div>

                </div>

            </div>


            {{-- Academic Year --}}
            <div class="p-5">

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

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


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

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


                        @if($section->schoolClass?->academicYear)

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

                                <p class="text-sm font-semibold text-text">
                                    {{ $section->schoolClass->academicYear->name }}
                                </p>


                                @if($section->schoolClass->academicYear->is_current)

                                    <span class="badge-info">
                                        Current
                                    </span>

                                @endif


                                @if(!$section->schoolClass->academicYear->is_active)

                                    <span class="badge-danger">
                                        Inactive
                                    </span>

                                @endif

                            </div>


                            @if(
                                $section->schoolClass->academicYear->start_date &&
                                $section->schoolClass->academicYear->end_date
                            )

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

                            @endif


                            @can('academic-years.view')

                                <a
                                    href="{{ route('academic-years.show', $section->schoolClass->academicYear) }}"
                                    class="mt-3 inline-flex items-center gap-2 text-xs font-medium text-primary hover:underline"
                                >
                                    View Academic Year

                                    <i class="fa-solid fa-arrow-right text-[10px]"></i>
                                </a>

                            @endcan

                        @else

                            <p class="mt-1 text-sm text-muted">
                                No academic year information available.
                            </p>

                        @endif

                    </div>

                </div>

            </div>

        </div>

    </div>


    {{-- ============================================================
        Related Records
    ============================================================ --}}
    <div class="card overflow-hidden">

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

            <h2 class="text-base font-semibold text-text">
                Related Records
            </h2>

            <p class="mt-1 text-xs text-muted">
                Records and activities currently connected to this section.
            </p>

        </div>


        <div class="grid grid-cols-1 divide-y divide-border sm:grid-cols-3 sm:divide-x sm:divide-y-0">

            {{-- Students --}}
            <div class="p-5">

                <div class="flex items-start justify-between gap-4">

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

                    <span class="text-lg font-semibold text-text">
                        {{ number_format($studentsCount) }}
                    </span>

                </div>


                <p class="mt-4 text-sm font-medium text-text">
                    Students
                </p>

                <p class="mt-1 text-xs leading-5 text-muted">
                    Students currently assigned to this section.
                </p>


                @can('students.view')

                    <a
                        href="{{ route('students.index', [
                            'class_id' => $section->class_id,
                            'section_id' => $section->id,
                        ]) }}"
                        class="mt-4 inline-flex items-center gap-2 text-xs font-medium text-primary hover:underline"
                    >
                        View Students

                        <i class="fa-solid fa-arrow-right text-[10px]"></i>
                    </a>

                @endcan

            </div>


            {{-- Teacher Assignments --}}
            <div class="p-5">

                <div class="flex items-start justify-between gap-4">

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

                    <span class="text-lg font-semibold text-text">
                        {{ number_format($teacherAssignmentsCount) }}
                    </span>

                </div>


                <p class="mt-4 text-sm font-medium text-text">
                    Teacher Assignments
                </p>

                <p class="mt-1 text-xs leading-5 text-muted">
                    Teacher assignments connected to this section.
                </p>


                @can('teacher-assignments.view')

                    <a
                        href="{{ route('teacher-assignments.index', [
                            'class_id' => $section->class_id,
                            'section_id' => $section->id,
                        ]) }}"
                        class="mt-4 inline-flex items-center gap-2 text-xs font-medium text-primary hover:underline"
                    >
                        View Assignments

                        <i class="fa-solid fa-arrow-right text-[10px]"></i>
                    </a>

                @endcan

            </div>


            {{-- Attendance --}}
            <div class="p-5">

                <div class="flex items-start justify-between gap-4">

                    <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-warningLight text-warning">
                        <i class="fa-solid fa-clipboard-check"></i>
                    </div>

                    <span class="text-lg font-semibold text-text">
                        {{ number_format($attendancesCount) }}
                    </span>

                </div>


                <p class="mt-4 text-sm font-medium text-text">
                    Attendance Records
                </p>

                <p class="mt-1 text-xs leading-5 text-muted">
                    Student attendance records associated with this section.
                </p>


                @can('attendance.view')

                    <a
                        href="{{ route('attendance.index', [
                            'class_id' => $section->class_id,
                            'section_id' => $section->id,
                        ]) }}"
                        class="mt-4 inline-flex items-center gap-2 text-xs font-medium text-primary hover:underline"
                    >
                        View Attendance

                        <i class="fa-solid fa-arrow-right text-[10px]"></i>
                    </a>

                @endcan

            </div>

        </div>

    </div>


    {{-- ============================================================
        Record Information + Management
    ============================================================ --}}
    <div class="grid grid-cols-12 gap-5">

        {{-- ========================================================
            Record Information
        ======================================================== --}}
        <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 Information
                </h2>

                <p class="mt-1 text-xs text-muted">
                    System information for this section.
                </p>

            </div>


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

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

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

                        <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-background text-muted">
                            <i class="fa-solid fa-hashtag text-xs"></i>
                        </div>

                        <span class="text-sm text-muted">
                            Record ID
                        </span>

                    </div>

                    <span class="text-sm font-medium text-text">
                        #{{ $section->id }}
                    </span>

                </div>


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

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

                        <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-background text-muted">
                            <i class="fa-regular fa-calendar-plus text-xs"></i>
                        </div>

                        <span class="text-sm text-muted">
                            Created
                        </span>

                    </div>

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

                </div>


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

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

                        <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-background text-muted">
                            <i class="fa-solid fa-clock-rotate-left text-xs"></i>
                        </div>

                        <span class="text-sm text-muted">
                            Last Updated
                        </span>

                    </div>

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

                </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">
                    Update or remove this section.
                </p>

            </div>


            <div class="p-5">

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

                    {{-- Edit --}}
                    @can('sections.edit')

                        <a
                            href="{{ route('sections.edit', $section) }}"
                            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 Section
                                </p>

                                <p class="mt-0.5 text-xs leading-5 text-muted">
                                    Update class placement, capacity, status or section information.
                                </p>

                            </div>

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

                        </a>

                    @endcan


                    {{-- Delete --}}
                    @can('sections.delete')

                        @if(!$hasRelatedRecords)

                            <form
                                id="delete-section-form"
                                action="{{ route('sections.destroy', $section) }}"
                                method="POST"
                            >

                                @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 Section
                                        </p>

                                        <p class="mt-0.5 text-xs leading-5 text-muted">
                                            Remove this section from active records.
                                        </p>

                                    </div>

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

                                </button>

                            </form>

                        @else

                            <div class="rounded-lg border border-warning/20 bg-warningLight p-4">

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

                                    <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-warning/10 text-warning">
                                        <i class="fa-solid fa-shield-halved text-xs"></i>
                                    </div>


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

                                        <p class="text-sm font-medium text-text">
                                            Section protected from deletion
                                        </p>

                                        <p class="mt-1 text-xs leading-5 text-muted">
                                            This section contains related students, teacher assignments or attendance records and cannot be deleted safely.
                                        </p>


                                        @if($section->is_active)

                                            @can('sections.edit')

                                                <a
                                                    href="{{ route('sections.edit', $section) }}"
                                                    class="mt-3 inline-flex items-center gap-2 text-xs font-medium text-primary hover:underline"
                                                >
                                                    Set Section Inactive

                                                    <i class="fa-solid fa-arrow-right text-[10px]"></i>
                                                </a>

                                            @endcan

                                        @endif

                                    </div>

                                </div>

                            </div>

                        @endif

                    @endcan

                </div>

            </div>

        </div>

    </div>

</div>

@endsection


@push('scripts')

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

    /*
    |--------------------------------------------------------------------------
    | Delete Confirmation
    |--------------------------------------------------------------------------
    */

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


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

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


            if (!confirmed) {

                event.preventDefault();

            }

        }
    );

});
</script>

@endpush