@extends('layouts.app')

@section(
    'title',
    $teacherAssignment->teacher?->fullName() . ' - ' . $teacherAssignment->subject_name
)

@section('content')

<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('teacher-assignments.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 teacher assignments"
            >
                <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">
                        {{ $teacherAssignment->teacher?->fullName() ?? 'Teacher Assignment' }}
                    </h1>

                    @if($teacherAssignment->is_class_teacher)

                        <span class="badge-info">
                            <i class="fa-solid fa-star mr-1"></i>
                            Class Teacher
                        </span>

                    @endif

                    @if($teacherAssignment->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">
                    {{ $teacherAssignment->subject_name }}
                    teaching assignment information and academic responsibility.
                </p>

            </div>

        </div>


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

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

                <span>
                    All Assignments
                </span>
            </a>


            @can('teacher-assignments.edit')

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

                    <span>
                        Edit Assignment
                    </span>
                </a>

            @endcan

        </div>

    </div>


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

        {{-- Academic Year --}}
        <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">
                        Academic Year
                    </p>

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

                </div>

            </div>

        </div>


        {{-- Class --}}
        <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-school"></i>
                </div>

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

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

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

                </div>

            </div>

        </div>


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

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

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

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

                </div>

            </div>

        </div>


        {{-- Periods --}}
        <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>

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

                    <p class="mt-1 text-lg font-semibold text-text">
                        {{ $teacherAssignment->periods_per_week ?? '—' }}
                    </p>

                </div>

            </div>

        </div>

    </div>


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


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

                <p class="mt-1 text-xs text-muted">
                    Teaching responsibility and academic configuration.
                </p>

            </div>


            <div class="p-5">

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


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

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

                        <dd class="mt-1.5">

                            @if($teacherAssignment->teacher)

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

                                    <span class="text-sm font-medium text-text">
                                        {{ $teacherAssignment->teacher->fullName() }}
                                    </span>

                                    @if($teacherAssignment->teacher->teacher_id)

                                        <span class="rounded-md bg-background px-2 py-0.5 text-xs text-muted">
                                            {{ $teacherAssignment->teacher->teacher_id }}
                                        </span>

                                    @endif

                                </div>

                            @else

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

                            @endif

                        </dd>

                    </div>


                    {{-- Subject --}}
                    <div>

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

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

                    </div>


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

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

                        <dd class="mt-1.5">

                            @if($teacherAssignment->academicYear)

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

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

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

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

                                    @endif

                                </div>

                            @else

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

                            @endif

                        </dd>

                    </div>


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

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

                        <dd class="mt-1.5">

                            @if($teacherAssignment->schoolClass)

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

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

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

                                        <span class="rounded-md bg-background px-2 py-0.5 text-xs text-muted">
                                            {{ $teacherAssignment->schoolClass->code }}
                                        </span>

                                    @endif

                                </div>

                            @else

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

                            @endif

                        </dd>

                    </div>


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

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

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

                    </div>


                    {{-- Periods Per Week --}}
                    <div>

                        <dt class="text-xs font-medium text-muted">
                            Periods Per Week
                        </dt>

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

                    </div>


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

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

                        <dd class="mt-1.5">

                            @if($teacherAssignment->is_class_teacher)

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

                            @else

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

                            @endif

                        </dd>

                    </div>


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

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

                        <dd class="mt-1.5">

                            @if($teacherAssignment->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">
                            #{{ $teacherAssignment->id }}
                        </dd>

                    </div>

                </dl>

            </div>

        </div>


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

                <p class="mt-1 text-xs text-muted">
                    Teacher associated with this assignment.
                </p>

            </div>


            @if($teacherAssignment->teacher)

                <div class="p-5">

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

                        {{-- Avatar --}}
                        <div class="flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary/10 text-primary">

                            @if($teacherAssignment->teacher->profile_photo)

                                <img
                                    src="{{ asset('storage/' . $teacherAssignment->teacher->profile_photo) }}"
                                    alt="{{ $teacherAssignment->teacher->fullName() }}"
                                    class="h-full w-full object-cover"
                                >

                            @else

                                <span class="text-sm font-semibold">
                                    {{
                                        strtoupper(
                                            substr(
                                                $teacherAssignment->teacher->first_name,
                                                0,
                                                1
                                            )
                                        )
                                    }}

                                    {{
                                        strtoupper(
                                            substr(
                                                $teacherAssignment->teacher->last_name ?? '',
                                                0,
                                                1
                                            )
                                        )
                                    }}
                                </span>

                            @endif

                        </div>


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

                            <p class="truncate text-sm font-semibold text-text">
                                {{ $teacherAssignment->teacher->fullName() }}
                            </p>

                            <p class="mt-0.5 text-xs text-muted">
                                {{ $teacherAssignment->teacher->designation ?: 'Teacher' }}
                            </p>

                            @if($teacherAssignment->teacher->teacher_id)

                                <p class="mt-0.5 text-xs text-muted">
                                    ID: {{ $teacherAssignment->teacher->teacher_id }}
                                </p>

                            @endif

                        </div>

                    </div>


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

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

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

                            <span class="text-sm font-medium text-text">
                                {{
                                    $teacherAssignment->teacher->employment_type
                                        ? ucwords(
                                            str_replace(
                                                '_',
                                                ' ',
                                                $teacherAssignment->teacher->employment_type
                                            )
                                        )
                                        : '—'
                                }}
                            </span>

                        </div>


                        {{-- Phone --}}
                        <div class="flex items-center justify-between gap-4">

                            <span class="text-xs text-muted">
                                Phone
                            </span>

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

                        </div>


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

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

                            @if($teacherAssignment->teacher->is_active)

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

                            @else

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

                            @endif

                        </div>

                    </div>


                    @can('teachers.view')

                        <a
                            href="{{ route('teachers.show', $teacherAssignment->teacher) }}"
                            class="btn btn-secondary mt-5 w-full justify-center"
                        >
                            <i class="fa-regular fa-eye"></i>

                            View Teacher
                        </a>

                    @endcan

                </div>

            @else

                <div class="p-5 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-user-slash"></i>
                    </div>

                    <p class="mt-3 text-sm font-medium text-text">
                        Teacher Not Available
                    </p>

                    <p class="mt-1 text-xs text-muted">
                        No teacher is associated with this assignment.
                    </p>

                </div>

            @endif

        </div>

    </div>


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

        <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">
                Academic hierarchy associated with this teaching assignment.
            </p>

        </div>


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


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

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

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

                <p class="mt-1 text-sm font-semibold text-text">
                    {{ $teacherAssignment->academicYear?->name ?? '—' }}
                </p>

                @if(
                    $teacherAssignment->academicYear?->start_date &&
                    $teacherAssignment->academicYear?->end_date
                )

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

                @endif


                @if($teacherAssignment->academicYear)

                    @can('academic-years.view')

                        <a
                            href="{{ route('academic-years.show', $teacherAssignment->academicYear) }}"
                            class="mt-4 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

                @endif

            </div>


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

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

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

                <p class="mt-1 text-sm font-semibold text-text">
                    {{ $teacherAssignment->schoolClass?->name ?? '—' }}
                </p>

                @if($teacherAssignment->schoolClass?->code)

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

                @endif


                @if($teacherAssignment->schoolClass)

                    @can('school-classes.view')

                        <a
                            href="{{ route('school-classes.show', $teacherAssignment->schoolClass) }}"
                            class="mt-4 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

                @endif

            </div>


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

                <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>

                <p class="mt-4 text-xs font-medium text-muted">
                    Section
                </p>

                <p class="mt-1 text-sm font-semibold text-text">
                    {{ $teacherAssignment->section?->name ?? '—' }}
                </p>

                @if($teacherAssignment->section?->code)

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

                @endif


                @if($teacherAssignment->section)

                    @can('sections.view')

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

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

                    @endcan

                @endif

            </div>


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

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

                <p class="mt-4 text-xs font-medium text-muted">
                    Subject
                </p>

                <p class="mt-1 text-sm font-semibold text-text">
                    {{ $teacherAssignment->subject_name }}
                </p>

                <p class="mt-1 text-xs text-muted">
                    {{ $teacherAssignment->periods_per_week ?? 0 }}
                    periods per week
                </p>

            </div>

        </div>

    </div>


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


        {{-- Teaching Responsibility --}}
        <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">
                    Teaching Responsibility
                </h2>

                <p class="mt-1 text-xs text-muted">
                    Teaching role associated with this assignment.
                </p>

            </div>


            <div class="p-5">

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

                    <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-book-open-reader"></i>
                    </div>

                    <div>

                        <p class="text-sm font-semibold text-text">
                            {{ $teacherAssignment->subject_name }}
                        </p>

                        <p class="mt-1 text-xs leading-5 text-muted">
                            Assigned to teach
                            <span class="font-medium text-text">
                                {{ $teacherAssignment->schoolClass?->name ?? 'the selected class' }}
                            </span>

                            @if($teacherAssignment->section)

                                section

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

                            @endif

                            for the
                            <span class="font-medium text-text">
                                {{ $teacherAssignment->academicYear?->name ?? 'selected academic year' }}
                            </span>.
                        </p>

                    </div>

                </div>


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

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

                        <p class="text-xs text-muted">
                            Weekly Periods
                        </p>

                        <p class="mt-1 text-lg font-semibold text-text">
                            {{ $teacherAssignment->periods_per_week ?? '—' }}
                        </p>

                    </div>


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

                        <p class="text-xs text-muted">
                            Assignment Status
                        </p>

                        <div class="mt-2">

                            @if($teacherAssignment->is_active)

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

                            @else

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

                            @endif

                        </div>

                    </div>

                </div>

            </div>

        </div>


        {{-- Class Teacher Responsibility --}}
        <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">
                    Class Teacher Responsibility
                </h2>

                <p class="mt-1 text-xs text-muted">
                    Class-level responsibility for this teacher.
                </p>

            </div>


            <div class="p-5">

                @if($teacherAssignment->is_class_teacher)

                    <div class="rounded-lg border border-info/20 bg-infoLight p-4">

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

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

                            <div>

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

                                    <p class="text-sm font-semibold text-text">
                                        Assigned as Class Teacher
                                    </p>

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

                                </div>

                                <p class="mt-1.5 text-xs leading-5 text-muted">
                                    This teacher has class teacher responsibility for
                                    {{ $teacherAssignment->schoolClass?->name ?? 'this class' }}
                                    @if($teacherAssignment->section)
                                        - {{ $teacherAssignment->section->name }}
                                    @endif.
                                </p>

                            </div>

                        </div>

                    </div>

                @else

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

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

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

                            <div>

                                <p class="text-sm font-semibold text-text">
                                    Subject Teacher
                                </p>

                                <p class="mt-1.5 text-xs leading-5 text-muted">
                                    This assignment is for subject teaching only. The teacher does not have class teacher responsibility through this assignment.
                                </p>

                            </div>

                        </div>

                    </div>

                @endif

            </div>

        </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 assignment.
                </p>

            </div>


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


                {{-- Record 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-right text-sm font-medium text-text">
                        #{{ $teacherAssignment->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">
                        {{ $teacherAssignment->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">
                        {{ $teacherAssignment->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">
                    Manage or remove this teacher assignment.
                </p>

            </div>


            <div class="p-5">

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


                    {{-- Edit --}}
                    @can('teacher-assignments.edit')

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

                                <p class="mt-0.5 text-xs text-muted">
                                    Update teacher, academic structure, subject, workload or assignment status.
                                </p>

                            </div>

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

                        </a>

                    @endcan


                    {{-- Delete --}}
                    @can('teacher-assignments.delete')

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

                                    <p class="mt-0.5 text-xs text-muted">
                                        Permanently remove this teacher assignment from active records.
                                    </p>

                                </div>

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

                            </button>

                        </form>

                    @endcan

                </div>

            </div>

        </div>

    </div>

</div>

@endsection


@push('scripts')

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

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

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


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

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


            if (!confirmed) {

                event.preventDefault();

            }

        }
    );

});
</script>

@endpush