@extends('layouts.app')

@section('title', $studentParent->displayName())

@section('content')

@php
    $studentsCount = $studentParent->students_count
        ?? $studentParent->students()->count();

    $activeStudentsCount = $studentParent->students()
        ->where('is_active', true)
        ->count();

    $hasStudents = $studentsCount > 0;

    $primaryName = $studentParent->displayName();
@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('parents.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 parents"
            >
                <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">
                        {{ $primaryName }}
                    </h1>


                    @if($studentParent->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">
                    Parent, guardian, communication and linked student information.
                </p>

            </div>

        </div>


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

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

                <span>
                    All Parents
                </span>
            </a>


            @can('parents.edit')

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

                    <span>
                        Edit Parent
                    </span>
                </a>

            @endcan

        </div>

    </div>


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

        {{-- Linked 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-primary/10 text-primary">
                    <i class="fa-solid fa-user-graduate"></i>
                </div>

                <div>

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

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

                </div>

            </div>

        </div>


        {{-- Active 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-successLight text-success">
                    <i class="fa-solid fa-user-check"></i>
                </div>

                <div>

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

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

                </div>

            </div>

        </div>


        {{-- SMS --}}
        <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-comment-sms"></i>
                </div>

                <div>

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

                    <div class="mt-1">

                        @if($studentParent->canReceiveSms())

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

                        @else

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

                        @endif

                    </div>

                </div>

            </div>

        </div>


        {{-- Email --}}
        <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-envelope"></i>
                </div>

                <div>

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

                    <div class="mt-1">

                        @if($studentParent->canReceiveEmail())

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

                        @else

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

                        @endif

                    </div>

                </div>

            </div>

        </div>

    </div>


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

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

                <p class="mt-1 text-xs text-muted">
                    Primary family and contact information.
                </p>

            </div>


            <div class="p-5">

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

                    {{-- Father --}}
                    <div>

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

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

                    </div>


                    {{-- Mother --}}
                    <div>

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

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

                    </div>


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

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

                        <dd class="mt-1.5">

                            @if($studentParent->primary_phone)

                                <a
                                    href="tel:{{ $studentParent->primary_phone }}"
                                    class="inline-flex items-center gap-2 text-sm font-medium text-text hover:text-primary"
                                >
                                    <i class="fa-solid fa-phone text-xs text-muted"></i>

                                    {{ $studentParent->primary_phone }}
                                </a>

                            @else

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

                            @endif

                        </dd>

                    </div>


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

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

                        <dd class="mt-1.5">

                            @if($studentParent->alternate_phone)

                                <a
                                    href="tel:{{ $studentParent->alternate_phone }}"
                                    class="inline-flex items-center gap-2 text-sm font-medium text-text hover:text-primary"
                                >
                                    <i class="fa-solid fa-phone text-xs text-muted"></i>

                                    {{ $studentParent->alternate_phone }}
                                </a>

                            @else

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

                            @endif

                        </dd>

                    </div>


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

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

                        <dd class="mt-1.5">

                            @if($studentParent->email)

                                <a
                                    href="mailto:{{ $studentParent->email }}"
                                    class="inline-flex items-center gap-2 break-all text-sm font-medium text-primary hover:underline"
                                >
                                    <i class="fa-regular fa-envelope text-xs"></i>

                                    {{ $studentParent->email }}
                                </a>

                            @else

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

                            @endif

                        </dd>

                    </div>


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

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

                        <dd class="mt-1.5">

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

                    </div>


                    {{-- Students --}}
                    <div>

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

                        <dd class="mt-1.5 text-sm font-medium text-text">
                            {{ number_format($studentsCount) }}
                        </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($studentParent->address)

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

                    @else

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

                    @endif

                </div>

            </div>

        </div>


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

                <p class="mt-1 text-xs text-muted">
                    Additional guardian contact details.
                </p>

            </div>


            <div class="p-5">

                @if(
                    $studentParent->guardian_name ||
                    $studentParent->guardian_phone ||
                    $studentParent->guardian_email
                )

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

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

                            <p class="text-sm font-semibold text-text">
                                {{ $studentParent->guardian_name ?: 'Guardian' }}
                            </p>

                            @if($studentParent->guardian_relation)

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

                            @endif

                        </div>

                    </div>


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

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

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

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

                        </div>


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

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

                            @if($studentParent->guardian_phone)

                                <a
                                    href="tel:{{ $studentParent->guardian_phone }}"
                                    class="text-right text-sm font-medium text-primary hover:underline"
                                >
                                    {{ $studentParent->guardian_phone }}
                                </a>

                            @else

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

                            @endif

                        </div>


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

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

                            @if($studentParent->guardian_email)

                                <a
                                    href="mailto:{{ $studentParent->guardian_email }}"
                                    class="max-w-48 break-all text-right text-sm font-medium text-primary hover:underline"
                                >
                                    {{ $studentParent->guardian_email }}
                                </a>

                            @else

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

                            @endif

                        </div>

                    </div>

                @else

                    <div class="py-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-shield"></i>
                        </div>

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

                        <p class="mt-1 text-xs leading-5 text-muted">
                            No additional guardian details have been added.
                        </p>

                    </div>

                @endif

            </div>

        </div>

    </div>


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

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

            <h2 class="text-base font-semibold text-text">
                Communication Preferences
            </h2>

            <p class="mt-1 text-xs text-muted">
                Communication channels configured for this family.
            </p>

        </div>


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

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

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

                    <div class="flex items-start 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-comment-sms"></i>
                        </div>

                        <div>

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

                            <p class="mt-1 text-xs leading-5 text-muted">
                                Messages are sent to the primary phone number.
                            </p>

                        </div>

                    </div>


                    @if($studentParent->sms_enabled)

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

                    @else

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

                    @endif

                </div>


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

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

                        <span class="text-xs text-muted">
                            SMS Number
                        </span>

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

                    </div>


                    <div class="mt-3 flex items-center justify-between gap-4">

                        <span class="text-xs text-muted">
                            Can Receive SMS
                        </span>

                        @if($studentParent->canReceiveSms())

                            <span class="text-xs font-medium text-success">
                                Yes
                            </span>

                        @else

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

                        @endif

                    </div>

                </div>

            </div>


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

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

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

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

                        <div>

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

                            <p class="mt-1 text-xs leading-5 text-muted">
                                Notices and school communication by email.
                            </p>

                        </div>

                    </div>


                    @if($studentParent->email_enabled)

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

                    @else

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

                    @endif

                </div>


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

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

                        <span class="text-xs text-muted">
                            Email Address
                        </span>

                        <span class="max-w-52 break-all text-right text-sm font-medium text-text">
                            {{ $studentParent->email ?: '—' }}
                        </span>

                    </div>


                    <div class="mt-3 flex items-center justify-between gap-4">

                        <span class="text-xs text-muted">
                            Can Receive Email
                        </span>

                        @if($studentParent->canReceiveEmail())

                            <span class="text-xs font-medium text-success">
                                Yes
                            </span>

                        @else

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

                        @endif

                    </div>

                </div>

            </div>

        </div>

    </div>


    {{-- ============================================================
        Linked Students
    ============================================================ --}}
    <div class="card overflow-hidden">

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

            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">

                <div>

                    <h2 class="text-base font-semibold text-text">
                        Linked Students
                    </h2>

                    <p class="mt-1 text-xs text-muted">
                        Students associated with this parent or guardian.
                    </p>

                </div>


                <span class="badge-info">
                    {{ number_format($studentsCount) }}
                    {{ $studentsCount === 1 ? 'Student' : 'Students' }}
                </span>

            </div>

        </div>


        @php
            $students = $studentParent->students()
                ->with([
                    'academicYear',
                    'schoolClass',
                    'section',
                ])
                ->orderBy('first_name')
                ->orderBy('last_name')
                ->get();
        @endphp


        @if($students->isNotEmpty())

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

                <table class="table">

                    <thead>

                        <tr>

                            <th>
                                Student
                            </th>

                            <th>
                                Student ID
                            </th>

                            <th>
                                Class
                            </th>

                            <th>
                                Roll No.
                            </th>

                            <th>
                                Academic Year
                            </th>

                            <th>
                                Status
                            </th>

                            <th class="text-right">
                                Action
                            </th>

                        </tr>

                    </thead>


                    <tbody>

                        @foreach($students as $student)

                            <tr>

                                {{-- Student --}}
                                <td>

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

                                        @if($student->profile_photo)

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

                                        @else

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

                                                {{ mb_strtoupper(
                                                    mb_substr(
                                                        $student->first_name,
                                                        0,
                                                        1
                                                    )
                                                ) }}

                                            </div>

                                        @endif


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

                                            <p class="truncate text-sm font-medium text-text">
                                                {{ $student->fullName() }}
                                            </p>

                                            @if($student->student_email)

                                                <p class="mt-0.5 truncate text-xs text-muted">
                                                    {{ $student->student_email }}
                                                </p>

                                            @endif

                                        </div>

                                    </div>

                                </td>


                                {{-- ID --}}
                                <td>

                                    <span class="text-sm font-medium text-text">
                                        {{ $student->student_id }}
                                    </span>

                                </td>


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

                                    @if($student->schoolClass)

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

                                        @if($student->section)

                                            <p class="mt-0.5 text-xs text-muted">
                                                Section {{ $student->section->name }}
                                            </p>

                                        @endif

                                    @else

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

                                    @endif

                                </td>


                                {{-- Roll --}}
                                <td>

                                    <span class="text-sm text-text">
                                        {{ $student->roll_no ?: '—' }}
                                    </span>

                                </td>


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

                                    @if($student->academicYear)

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

                                            <span class="text-sm text-text">
                                                {{ $student->academicYear->name }}
                                            </span>

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

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

                                            @endif

                                        </div>

                                    @else

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

                                    @endif

                                </td>


                                {{-- Status --}}
                                <td>

                                    @if($student->is_active)

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

                                    @else

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

                                    @endif

                                </td>


                                {{-- Action --}}
                                <td>

                                    <div class="flex justify-end">

                                        @can('students.view')

                                            <a
                                                href="{{ route('students.show', $student) }}"
                                                class="flex h-8 w-8 items-center justify-center rounded-lg text-muted transition hover:bg-background hover:text-primary"
                                                title="View student"
                                            >
                                                <i class="fa-regular fa-eye text-xs"></i>
                                            </a>

                                        @else

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

                                        @endcan

                                    </div>

                                </td>

                            </tr>

                        @endforeach

                    </tbody>

                </table>

            </div>

        @else

            <div class="px-5 py-10 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-graduate"></i>
                </div>

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

                <p class="mt-1 text-xs text-muted">
                    No students are currently associated with this parent.
                </p>

            </div>

        @endif

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

                </div>


                {{-- 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">
                        #{{ $studentParent->id }}
                    </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 parent record.
                </p>

            </div>


            <div class="p-5">

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

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

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

                                <p class="mt-0.5 text-xs text-muted">
                                    Update parent, guardian, contact information or communication preferences.
                                </p>

                            </div>

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

                        </a>

                    @endcan


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

                        @if(!$hasStudents)

                            <form
                                id="delete-parent-form"
                                action="{{ route('parents.destroy', $studentParent) }}"
                                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 Parent
                                        </p>

                                        <p class="mt-0.5 text-xs text-muted">
                                            Permanently remove this parent 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">
                                            Parent protected from deletion
                                        </p>

                                        <p class="mt-1 text-xs leading-5 text-muted">
                                            This parent has {{ number_format($studentsCount) }}
                                            {{ $studentsCount === 1 ? 'student' : 'students' }}
                                            linked to the record. Reassign the students or set this parent to inactive instead of deleting it.
                                        </p>


                                        @if($studentParent->is_active)

                                            @can('parents.edit')

                                                <a
                                                    href="{{ route('parents.edit', $studentParent) }}"
                                                    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-parent-form'
        );


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

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


            if (!confirmed) {

                event.preventDefault();

            }

        }
    );

});
</script>

@endpush