@extends('layouts.app')

@section('title', 'Attendance Rule Details')

@section('content')

@php
    /*
    |--------------------------------------------------------------------------
    | Safe Time Formatter
    |--------------------------------------------------------------------------
    |
    | Your AttendanceRule model casts time fields as datetime, so normally
    | these values are Carbon instances. This helper also safely handles
    | string values if the cast is changed later.
    |
    */

    $formatTime = function ($time) {
        if (blank($time)) {
            return '—';
        }

        try {
            return $time instanceof \Carbon\CarbonInterface
                ? $time->format('h:i A')
                : \Carbon\Carbon::parse($time)->format('h:i A');
        } catch (\Throwable $exception) {
            return (string) $time;
        }
    };

    $schoolStart = $attendanceRule->school_start_time;
    $schoolEnd = $attendanceRule->school_end_time;

    $workingDuration = null;

    if ($schoolStart && $schoolEnd) {
        try {
            $start = $schoolStart instanceof \Carbon\CarbonInterface
                ? $schoolStart->copy()
                : \Carbon\Carbon::parse($schoolStart);

            $end = $schoolEnd instanceof \Carbon\CarbonInterface
                ? $schoolEnd->copy()
                : \Carbon\Carbon::parse($schoolEnd);

            $workingDuration = $start->diffInMinutes($end);
        } catch (\Throwable $exception) {
            $workingDuration = null;
        }
    }

    $workingHours = $workingDuration !== null
        ? floor($workingDuration / 60)
        : null;

    $workingMinutes = $workingDuration !== null
        ? $workingDuration % 60
        : null;
@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('attendance-rules.index') }}"
                class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border bg-card text-muted transition hover:bg-background hover:text-text"
                title="Back"
            >
                <i class="fa-solid fa-arrow-left text-sm"></i>
            </a>

            <div>

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

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

                    @if($attendanceRule->is_active)

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

                    @else

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

                    @endif

                </div>

                <p class="mt-1 text-sm text-muted">
                    Attendance timing, threshold and processing configuration.
                </p>

            </div>

        </div>


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

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

                All Attendance Rules
            </a>

            @can('attendance-rules.edit')

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

                    Edit Attendance Rule
                </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">
                        {{ $attendanceRule->academicYear?->name ?? '—' }}
                    </p>

                </div>

            </div>

        </div>


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

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

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

                    <p class="mt-1 truncate text-sm font-semibold text-text">
                        {{ $formatTime($attendanceRule->school_start_time) }}
                    </p>

                </div>

            </div>

        </div>


        {{-- School End --}}
        <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-flag"></i>
                </div>

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

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

                    <p class="mt-1 truncate text-sm font-semibold text-text">
                        {{ $formatTime($attendanceRule->school_end_time) }}
                    </p>

                </div>

            </div>

        </div>


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

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

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

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

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

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

                </div>

            </div>

        </div>

    </div>


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

        {{-- Attendance Rule 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">
                    Attendance Rule Information
                </h2>

                <p class="mt-1 text-xs text-muted">
                    General information and school timing configuration.
                </p>

            </div>


            <div class="p-5">

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

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

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

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

                    </div>


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

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

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

                    </div>


                    {{-- Check-In Start --}}
                    <div>

                        <dt class="text-xs font-medium text-muted">
                            Check-In Start Time
                        </dt>

                        <dd class="mt-1.5 text-sm font-medium text-text">
                            {{ $formatTime($attendanceRule->check_in_start_time) }}
                        </dd>

                    </div>


                    {{-- Check-In End --}}
                    <div>

                        <dt class="text-xs font-medium text-muted">
                            Check-In End Time
                        </dt>

                        <dd class="mt-1.5 text-sm font-medium text-text">
                            {{ $formatTime($attendanceRule->check_in_end_time) }}
                        </dd>

                    </div>


                    {{-- School Start --}}
                    <div>

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

                        <dd class="mt-1.5 text-sm font-medium text-text">
                            {{ $formatTime($attendanceRule->school_start_time) }}
                        </dd>

                    </div>


                    {{-- School End --}}
                    <div>

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

                        <dd class="mt-1.5 text-sm font-medium text-text">
                            {{ $formatTime($attendanceRule->school_end_time) }}
                        </dd>

                    </div>


                    {{-- Checkout Start --}}
                    <div>

                        <dt class="text-xs font-medium text-muted">
                            Check-Out Start Time
                        </dt>

                        <dd class="mt-1.5 text-sm font-medium text-text">
                            {{ $formatTime($attendanceRule->check_out_start_time) }}
                        </dd>

                    </div>


                    {{-- Auto Checkout Time --}}
                    <div>

                        <dt class="text-xs font-medium text-muted">
                            Auto Checkout Time
                        </dt>

                        <dd class="mt-1.5 text-sm font-medium text-text">
                            {{ $formatTime($attendanceRule->auto_checkout_time) }}
                        </dd>

                    </div>


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

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

                        <dd class="mt-1.5">

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


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

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

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

                    </div>


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

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

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

                    </div>

                </dl>

            </div>

        </div>


        {{-- ========================================================
            School Day Overview
        ======================================================== --}}
        <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">
                    School Day Overview
                </h2>

                <p class="mt-1 text-xs text-muted">
                    Quick overview of the configured school schedule.
                </p>

            </div>


            <div class="p-5">

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

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

                    <p class="mt-1 text-2xl font-semibold text-text">

                        @if($workingDuration !== null)

                            {{ $workingHours }}h {{ $workingMinutes }}m

                        @else

                            —

                        @endif

                    </p>

                    <p class="mt-1 text-xs text-muted">
                        Based on configured school start and end time.
                    </p>

                </div>


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

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

                        {{-- Check-In Opens --}}
                        <div class="flex gap-3">

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

                                <div class="flex h-7 w-7 items-center justify-center rounded-full bg-infoLight text-info">
                                    <i class="fa-solid fa-door-open text-[10px]"></i>
                                </div>

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

                            </div>

                            <div class="pb-3">

                                <p class="text-sm font-medium text-text">
                                    Check-In Opens
                                </p>

                                <p class="mt-0.5 text-xs text-muted">
                                    {{ $formatTime($attendanceRule->check_in_start_time) }}
                                </p>

                            </div>

                        </div>


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

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

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

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

                            </div>

                            <div class="pb-3">

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

                                <p class="mt-0.5 text-xs text-muted">
                                    {{ $formatTime($attendanceRule->school_start_time) }}
                                </p>

                            </div>

                        </div>


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

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

                                <div class="flex h-7 w-7 items-center justify-center rounded-full bg-warningLight text-warning">
                                    <i class="fa-solid fa-person-walking-arrow-right text-[10px]"></i>
                                </div>

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

                            </div>

                            <div class="pb-3">

                                <p class="text-sm font-medium text-text">
                                    Check-Out Opens
                                </p>

                                <p class="mt-0.5 text-xs text-muted">
                                    {{ $formatTime($attendanceRule->check_out_start_time) }}
                                </p>

                            </div>

                        </div>


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

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

                            <div>

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

                                <p class="mt-0.5 text-xs text-muted">
                                    {{ $formatTime($attendanceRule->school_end_time) }}
                                </p>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>


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

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

            <h2 class="text-base font-semibold text-text">
                Attendance Thresholds
            </h2>

            <p class="mt-1 text-xs text-muted">
                Time thresholds used when calculating attendance status.
            </p>

        </div>


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

            {{-- Grace --}}
            <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-stopwatch"></i>
                </div>

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

                <p class="mt-1 text-lg font-semibold text-text">
                    {{ number_format($attendanceRule->grace_minutes) }}
                    <span class="text-xs font-normal text-muted">min</span>
                </p>

            </div>


            {{-- Late --}}
            <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-clock"></i>
                </div>

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

                <p class="mt-1 text-lg font-semibold text-text">
                    {{ number_format($attendanceRule->late_after_minutes) }}
                    <span class="text-xs font-normal text-muted">min</span>
                </p>

            </div>


            {{-- Half Day --}}
            <div class="p-5">

                <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-dangerLight text-danger">
                    <i class="fa-solid fa-circle-half-stroke"></i>
                </div>

                <p class="mt-4 text-xs font-medium text-muted">
                    Half Day After
                </p>

                <p class="mt-1 text-lg font-semibold text-text">
                    {{ number_format($attendanceRule->half_day_after_minutes) }}
                    <span class="text-xs font-normal text-muted">min</span>
                </p>

            </div>


            {{-- Minimum Working --}}
            <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-solid fa-hourglass-half"></i>
                </div>

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

                <p class="mt-1 text-lg font-semibold text-text">
                    {{ number_format($attendanceRule->minimum_working_minutes) }}
                    <span class="text-xs font-normal text-muted">min</span>
                </p>

            </div>


            {{-- Early Leave --}}
            <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-person-walking-arrow-right"></i>
                </div>

                <p class="mt-4 text-xs font-medium text-muted">
                    Early Leave Before
                </p>

                <p class="mt-1 text-lg font-semibold text-text">
                    {{ number_format($attendanceRule->early_leave_before_minutes) }}
                    <span class="text-xs font-normal text-muted">min</span>
                </p>

            </div>

        </div>

    </div>


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

        {{-- Attendance Processing --}}
        <div class="card col-span-12 overflow-hidden lg:col-span-7">

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

                <h2 class="text-base font-semibold text-text">
                    Attendance Processing
                </h2>

                <p class="mt-1 text-xs text-muted">
                    Behaviour enabled for attendance recording and correction.
                </p>

            </div>


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

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

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

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

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

                        <p class="mt-0.5 text-xs text-muted">
                            Automatically checkout students without a checkout punch.
                        </p>

                    </div>

                    @if($attendanceRule->auto_checkout)

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

                    @else

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

                    @endif

                </div>


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

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

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

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

                        <p class="mt-0.5 text-xs text-muted">
                            Authorized users can record attendance manually.
                        </p>

                    </div>

                    @if($attendanceRule->allow_manual_attendance)

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

                    @else

                        <span class="badge-secondary">
                            Not Allowed
                        </span>

                    @endif

                </div>


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

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

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

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

                        <p class="mt-0.5 text-xs text-muted">
                            Authorized users can correct attendance records.
                        </p>

                    </div>

                    @if($attendanceRule->allow_manual_correction)

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

                    @else

                        <span class="badge-secondary">
                            Not Allowed
                        </span>

                    @endif

                </div>


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

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

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

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

                        <p class="mt-0.5 text-xs text-muted">
                            Allow multiple attendance punches during the same day.
                        </p>

                    </div>

                    @if($attendanceRule->allow_multiple_punch)

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

                    @else

                        <span class="badge-secondary">
                            Not Allowed
                        </span>

                    @endif

                </div>

            </div>

        </div>


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

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

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

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

            </div>


            <div class="p-5">

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

                    @can('attendance-rules.edit')

                        <a
                            href="{{ route('attendance-rules.edit', $attendanceRule) }}"
                            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 Attendance Rule
                                </p>

                                <p class="mt-0.5 text-xs text-muted">
                                    Update timing, thresholds and processing settings.
                                </p>

                            </div>

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

                        </a>

                    @endcan


                    @can('attendance-rules.delete')

                        <form
                            action="{{ route('attendance-rules.destroy', $attendanceRule) }}"
                            method="POST"
                            id="delete-attendance-rule-form"
                        >
                            @csrf
                            @method('DELETE')

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

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

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

                                    <p class="text-sm font-medium text-danger">
                                        Delete Attendance Rule
                                    </p>

                                    <p class="mt-0.5 text-xs text-muted">
                                        Permanently remove this attendance rule record.
                                    </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-attendance-rule-form');

    if (deleteForm) {

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

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

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

        });

    }

});
</script>

@endpush