@extends('layouts.app')

@section('title', $teacher->fullName())

@section('content')

@php
    $assignmentsCount = $teacher->assignments_count
        ?? $teacher->assignments()->count();

    $employmentType = match ($teacher->employment_type) {
        'full_time' => 'Full Time',
        'part_time' => 'Part Time',
        'contract' => 'Contract',
        'temporary' => 'Temporary',
        default => ucfirst(str_replace('_', ' ', $teacher->employment_type ?? '')),
    };

    $gender = match ($teacher->gender) {
        'male' => 'Male',
        'female' => 'Female',
        'other' => 'Other',
        default => '—',
    };

    $age = $teacher->date_of_birth
        ? $teacher->date_of_birth->age
        : null;

    $serviceDuration = $teacher->joining_date
        ? $teacher->joining_date->diffForHumans(
            now(),
            true
        )
        : null;

    $hasAssignments = $assignmentsCount > 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('teachers.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 teachers"
            >
                <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">
                        {{ $teacher->fullName() }}
                    </h1>


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


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


                    @if($teacher->is_class_teacher)

                        <span class="badge-info">
                            Class Teacher
                        </span>

                    @endif

                </div>


                <p class="mt-1 text-sm text-muted">
                    Teacher profile, employment information and academic assignments.
                </p>

            </div>

        </div>


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

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

                <span>
                    All Teachers
                </span>
            </a>


            @can('teachers.edit')

                <a
                    href="{{ route('teachers.edit', $teacher) }}"
                    class="btn btn-primary"
                >
                    <i class="fa-solid fa-pen"></i>

                    <span>
                        Edit Teacher
                    </span>
                </a>

            @endcan

        </div>

    </div>


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

        {{-- Assignments --}}
        <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-layer-group"></i>
                </div>

                <div>

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

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

                </div>

            </div>

        </div>


        {{-- Employment --}}
        <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-briefcase"></i>
                </div>

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

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

                    <p class="mt-1 truncate text-sm font-semibold text-text">
                        {{ $employmentType ?: '—' }}
                    </p>

                </div>

            </div>

        </div>


        {{-- Joining --}}
        <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-calendar-check"></i>
                </div>

                <div>

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

                    <p class="mt-1 text-sm font-semibold text-text">
                        {{ $teacher->joining_date?->format('d M Y') ?? '—' }}
                    </p>

                </div>

            </div>

        </div>


        {{-- Class Teacher --}}
        <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-solid fa-chalkboard-user"></i>
                </div>

                <div>

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

                    <p class="mt-1 text-sm font-semibold text-text">
                        {{ $teacher->is_class_teacher ? 'Yes' : 'No' }}
                    </p>

                </div>

            </div>

        </div>

    </div>


    {{-- ============================================================
        Profile + Employment
    ============================================================ --}}
    <div class="grid grid-cols-12 gap-5">

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

                <p class="mt-1 text-xs text-muted">
                    Personal and contact information for this teacher.
                </p>

            </div>


            <div class="p-5">

                {{-- Profile Header --}}
                <div class="flex flex-col gap-5 border-b border-border pb-5 sm:flex-row sm:items-center">

                    @if($teacher->hasPhoto())

                        <img
                            src="{{ asset('storage/' . $teacher->profile_photo) }}"
                            alt="{{ $teacher->fullName() }}"
                            class="h-20 w-20 shrink-0 rounded-lg object-cover"
                        >

                    @else

                        <div class="flex h-20 w-20 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">

                            <span class="text-xl font-semibold">
                                {{ strtoupper(substr($teacher->first_name, 0, 1)) }}{{ $teacher->last_name ? strtoupper(substr($teacher->last_name, 0, 1)) : '' }}
                            </span>

                        </div>

                    @endif


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

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

                            <h3 class="text-lg font-semibold text-text">
                                {{ $teacher->fullName() }}
                            </h3>

                            @if($teacher->is_class_teacher)

                                <span class="badge-info">
                                    Class Teacher
                                </span>

                            @endif

                        </div>


                        <p class="mt-1 text-sm font-medium text-muted">
                            {{ $teacher->designation }}
                        </p>


                        <div class="mt-3 flex flex-wrap gap-x-5 gap-y-2">

                            <span class="inline-flex items-center gap-2 text-xs text-muted">

                                <i class="fa-solid fa-id-card text-primary"></i>

                                {{ $teacher->teacher_id }}

                            </span>


                            @if($teacher->phone)

                                <span class="inline-flex items-center gap-2 text-xs text-muted">

                                    <i class="fa-solid fa-phone text-primary"></i>

                                    {{ $teacher->phone }}

                                </span>

                            @endif


                            @if($teacher->email)

                                <span class="inline-flex items-center gap-2 text-xs text-muted">

                                    <i class="fa-regular fa-envelope text-primary"></i>

                                    {{ $teacher->email }}

                                </span>

                            @endif

                        </div>

                    </div>

                </div>


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

                    {{-- Teacher ID --}}
                    <div>

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

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

                    </div>


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

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

                        <dd class="mt-1.5 text-sm font-medium text-text">
                            {{ $teacher->fullName() }}
                        </dd>

                    </div>


                    {{-- Gender --}}
                    <div>

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

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

                    </div>


                    {{-- DOB --}}
                    <div>

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

                        <dd class="mt-1.5 text-sm font-medium text-text">

                            @if($teacher->date_of_birth)

                                {{ $teacher->date_of_birth->format('d M Y') }}

                                @if($age !== null)

                                    <span class="ml-1 text-xs font-normal text-muted">
                                        ({{ $age }} years)
                                    </span>

                                @endif

                            @else

                                —

                            @endif

                        </dd>

                    </div>


                    {{-- Phone --}}
                    <div>

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

                        <dd class="mt-1.5">

                            @if($teacher->phone)

                                <a
                                    href="tel:{{ $teacher->phone }}"
                                    class="text-sm font-medium text-text hover:text-primary"
                                >
                                    {{ $teacher->phone }}
                                </a>

                            @else

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

                            @endif

                        </dd>

                    </div>


                    {{-- Email --}}
                    <div>

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

                        <dd class="mt-1.5">

                            @if($teacher->email)

                                <a
                                    href="mailto:{{ $teacher->email }}"
                                    class="break-all text-sm font-medium text-text hover:text-primary"
                                >
                                    {{ $teacher->email }}
                                </a>

                            @else

                                <span class="text-sm text-muted">
                                    —
                                </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">
                            #{{ $teacher->id }}
                        </dd>

                    </div>


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

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

                        <dd class="mt-1.5">

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

                </dl>


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

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

                    @if($teacher->address)

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

                    @else

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

                    @endif

                </div>

            </div>

        </div>


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

                <p class="mt-1 text-xs text-muted">
                    Current employment configuration.
                </p>

            </div>


            <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-briefcase"></i>
                    </div>

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

                        <p class="text-sm font-semibold text-text">
                            {{ $teacher->designation }}
                        </p>

                        <p class="mt-1 text-xs text-muted">
                            {{ $employmentType }}
                        </p>

                    </div>

                </div>


                <div class="mt-5 space-y-4 border-t border-border pt-5">

                    {{-- Joining Date --}}
                    <div class="flex items-start justify-between gap-4">

                        <span class="text-xs text-muted">
                            Joining Date
                        </span>

                        <span class="text-right text-sm font-medium text-text">
                            {{ $teacher->joining_date?->format('d M Y') ?? '—' }}
                        </span>

                    </div>


                    {{-- Service Duration --}}
                    <div class="flex items-start justify-between gap-4">

                        <span class="text-xs text-muted">
                            Service Duration
                        </span>

                        <span class="text-right text-sm font-medium text-text">
                            {{ $serviceDuration ?: '—' }}
                        </span>

                    </div>


                    {{-- Employment Type --}}
                    <div class="flex items-start justify-between gap-4">

                        <span class="text-xs text-muted">
                            Employment Type
                        </span>

                        <span class="text-right text-sm font-medium text-text">
                            {{ $employmentType ?: '—' }}
                        </span>

                    </div>


                    {{-- Class Teacher --}}
                    <div class="flex items-start justify-between gap-4">

                        <span class="text-xs text-muted">
                            Class Teacher
                        </span>

                        @if($teacher->is_class_teacher)

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

                        @else

                            <span class="rounded-lg bg-background px-2 py-1 text-xs font-medium text-muted">
                                No
                            </span>

                        @endif

                    </div>


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

                        <span class="text-xs text-muted">
                            Employment Status
                        </span>

                        @if($teacher->is_active)

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

                        @else

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

                        @endif

                    </div>

                </div>


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

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

                    @if($teacher->qualification)

                        <p class="mt-2 text-sm leading-6 text-text">
                            {{ $teacher->qualification }}
                        </p>

                    @else

                        <p class="mt-2 text-sm text-muted">
                            No qualification information added.
                        </p>

                    @endif

                </div>

            </div>

        </div>

    </div>


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

        <div class="flex flex-col gap-3 border-b border-border px-5 py-4 sm:flex-row sm:items-center sm:justify-between">

            <div>

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

                <p class="mt-1 text-xs text-muted">
                    Classes and sections assigned to this teacher.
                </p>

            </div>


            @can('teacher-assignments.view')

                <a
                    href="{{ route('teacher-assignments.index', [
                        'teacher_id' => $teacher->id
                    ]) }}"
                    class="btn btn-secondary"
                >
                    <i class="fa-solid fa-list"></i>

                    View All
                </a>

            @endcan

        </div>


        @if($teacher->relationLoaded('assignments') && $teacher->assignments->isNotEmpty())

            <div class="overflow-x-auto">

                <table class="table">

                    <thead>

                        <tr>

                            <th>
                                Academic Year
                            </th>

                            <th>
                                Class
                            </th>

                            <th>
                                Section
                            </th>

                            <th>
                                Assignment
                            </th>

                        </tr>

                    </thead>


                    <tbody>

                        @foreach($teacher->assignments as $assignment)

                            <tr>

                                {{-- Academic Year --}}
                                <td>

                                    @if($assignment->academicYear)

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

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

                                            @if($assignment->academicYear->is_current)

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

                                            @endif

                                        </div>

                                    @else

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

                                    @endif

                                </td>


                                {{-- Class --}}
                                <td>

                                    @if($assignment->schoolClass)

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

                                    @else

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

                                    @endif

                                </td>


                                {{-- Section --}}
                                <td>

                                    @if($assignment->section)

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

                                    @else

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

                                    @endif

                                </td>


                                {{-- Assignment --}}
                                <td>

                                    @if($teacher->is_class_teacher)

                                        <span class="badge-success">
                                            Class Teacher
                                        </span>

                                    @else

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

                                    @endif

                                </td>

                            </tr>

                        @endforeach

                    </tbody>

                </table>

            </div>

        @elseif($hasAssignments)

            <div class="p-8 text-center">

                <div class="mx-auto flex h-10 w-10 items-center justify-center rounded-lg bg-background text-muted">
                    <i class="fa-solid fa-layer-group"></i>
                </div>

                <p class="mt-3 text-sm font-medium text-text">
                    {{ number_format($assignmentsCount) }}
                    {{ Str::plural('assignment', $assignmentsCount) }}
                </p>

                <p class="mt-1 text-xs text-muted">
                    Assignment details are not currently loaded.
                </p>


                @can('teacher-assignments.view')

                    <a
                        href="{{ route('teacher-assignments.index', [
                            'teacher_id' => $teacher->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>

        @else

            <div class="p-8 text-center">

                <div class="mx-auto flex h-10 w-10 items-center justify-center rounded-lg bg-background text-muted">
                    <i class="fa-solid fa-chalkboard-user"></i>
                </div>

                <p class="mt-3 text-sm font-medium text-text">
                    No Assignments
                </p>

                <p class="mt-1 text-xs text-muted">
                    This teacher has not been assigned to any class or section yet.
                </p>

            </div>

        @endif

    </div>


    {{-- ============================================================
        Teacher Overview
    ============================================================ --}}
    <div class="grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-4">

        {{-- Identity --}}
        <div class="card 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-primary/10 text-primary">
                    <i class="fa-solid fa-id-card"></i>
                </div>

                <span class="text-xs font-medium text-muted">
                    #{{ $teacher->id }}
                </span>

            </div>

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

            <p class="mt-1 text-xs leading-5 text-muted">
                Unique teacher identification used throughout the attendance system.
            </p>

            <p class="mt-3 text-sm font-semibold text-text">
                {{ $teacher->teacher_id }}
            </p>

        </div>


        {{-- Employment --}}
        <div class="card 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-briefcase"></i>
                </div>

                <span class="text-xs font-medium text-muted">
                    {{ $employmentType }}
                </span>

            </div>

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

            <p class="mt-1 text-xs leading-5 text-muted">
                Current designation and employment arrangement.
            </p>

            <p class="mt-3 text-sm font-semibold text-text">
                {{ $teacher->designation }}
            </p>

        </div>


        {{-- Assignments --}}
        <div class="card 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-layer-group"></i>
                </div>

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

            </div>

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

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


            @can('teacher-assignments.view')

                <a
                    href="{{ route('teacher-assignments.index', [
                        'teacher_id' => $teacher->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>


        {{-- Service --}}
        <div class="card 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-clock"></i>
                </div>

            </div>

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

            <p class="mt-1 text-xs leading-5 text-muted">
                Time since this teacher joined the school.
            </p>

            <p class="mt-3 text-sm font-semibold text-text">
                {{ $serviceDuration ?: '—' }}
            </p>

        </div>

    </div>


    {{-- ============================================================
        Record / 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 teacher record.
                </p>

            </div>


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

                {{-- 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">
                        {{ $teacher->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">
                        {{ $teacher->updated_at?->format('d M Y, h:i A') ?? '—' }}
                    </span>

                </div>


                {{-- Joining Date --}}
                <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-user-plus text-xs"></i>
                        </div>

                        <span class="text-sm text-muted">
                            Joined School
                        </span>

                    </div>

                    <span class="text-right text-sm font-medium text-text">
                        {{ $teacher->joining_date?->format('d M Y') ?? '—' }}
                    </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">
                    Manage or remove this teacher.
                </p>

            </div>


            <div class="p-5">

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

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

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

                                <p class="mt-0.5 text-xs text-muted">
                                    Update personal information, employment details, status or profile photo.
                                </p>

                            </div>

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

                        </a>

                    @endcan


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

                        @if(!$hasAssignments)

                            <form
                                id="delete-teacher-form"
                                action="{{ route('teachers.destroy', $teacher) }}"
                                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 Teacher
                                        </p>

                                        <p class="mt-0.5 text-xs text-muted">
                                            Remove this teacher 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>

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

                                        <p class="mt-1 text-xs leading-5 text-muted">
                                            This teacher has academic assignments. Set the teacher to inactive instead of deleting the record.
                                        </p>


                                        @if($teacher->is_active)

                                            @can('teachers.edit')

                                                <a
                                                    href="{{ route('teachers.edit', $teacher) }}"
                                                    class="mt-3 inline-flex items-center gap-2 text-xs font-medium text-primary hover:underline"
                                                >
                                                    Change Status

                                                    <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-teacher-form'
        );


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

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


            if (!confirmed) {

                event.preventDefault();

            }

        }
    );

});
</script>

@endpush