@extends('layouts.app')
@section('title', 'Attendance Device Details')
@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('attendance-devices.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">
                        {{ $attendanceDevice->name }}
                    </h1>

                    @if($attendanceDevice->is_online)

                        <span class="badge-success">
                            <span class="mr-1.5 h-1.5 w-1.5 rounded-full bg-success"></span>
                            Online
                        </span>

                    @else

                        <span class="badge-secondary">
                            <span class="mr-1.5 h-1.5 w-1.5 rounded-full bg-muted"></span>
                            Offline
                        </span>

                    @endif


                    @if($attendanceDevice->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 device information, connectivity and synchronization details.
                </p>

            </div>

        </div>


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

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

            @can('attendance-devices.edit')

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

            @endcan

        </div>

    </div>


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

        {{-- Device Type --}}
        <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-fingerprint"></i>
                </div>

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

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

                    <p class="mt-1 truncate text-sm font-semibold text-text">
                        {{ $attendanceDevice->device_type }}
                    </p>

                </div>

            </div>

        </div>


        {{-- IP Address --}}
        <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-network-wired"></i>
                </div>

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

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

                    <p class="mt-1 truncate text-sm font-semibold text-text">
                        {{ $attendanceDevice->ip_address }}
                    </p>

                </div>

            </div>

        </div>


        {{-- Sync Interval --}}
        <div class="card p-4">

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

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

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

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

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

                </div>

            </div>

        </div>


        {{-- Connection --}}
        <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 {{ $attendanceDevice->is_online ? 'bg-successLight text-success' : 'bg-background text-muted' }}">
                    <i class="fa-solid fa-wifi"></i>
                </div>

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

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

                    <div class="mt-1">

                        @if($attendanceDevice->is_online)

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

                        @else

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

                        @endif

                    </div>

                </div>

            </div>

        </div>

    </div>


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

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

                <p class="mt-1 text-xs text-muted">
                    General information and identification details for this attendance device.
                </p>

            </div>


            <div class="p-5">

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

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

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

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

                    </div>


                    {{-- Device Type --}}
                    <div>

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

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

                    </div>


                    {{-- Manufacturer --}}
                    <div>

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

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

                    </div>


                    {{-- Model --}}
                    <div>

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

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

                    </div>


                    {{-- Serial Number --}}
                    <div>

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

                        <dd class="mt-1.5">

                            <span class="inline-flex rounded-md bg-background px-2.5 py-1 font-mono text-xs font-medium text-text">
                                {{ $attendanceDevice->serial_number }}
                            </span>

                        </dd>

                    </div>


                    {{-- Location --}}
                    <div>

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

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

                    </div>


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

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

                        <dd class="mt-1.5">

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


                    {{-- Connection --}}
                    <div>

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

                        <dd class="mt-1.5">

                            @if($attendanceDevice->is_online)

                                <span class="badge-success">
                                    <i class="fa-solid fa-wifi mr-1"></i>
                                    Online
                                </span>

                            @else

                                <span class="badge-secondary">
                                    <i class="fa-solid fa-wifi mr-1"></i>
                                    Offline
                                </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">
                            {{ $attendanceDevice->created_at?->format('d M Y, h:i A') ?? '—' }}
                        </dd>

                    </div>


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

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

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

                    </div>

                </dl>

            </div>

        </div>


        {{-- ========================================================
            Connection Status
        ======================================================== --}}
        <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">
                    Connection Status
                </h2>

                <p class="mt-1 text-xs text-muted">
                    Current connectivity and synchronization information.
                </p>

            </div>


            <div class="p-5">

                {{-- Main Status --}}
                <div class="flex flex-col items-center text-center">

                    <div class="flex h-16 w-16 items-center justify-center rounded-full {{ $attendanceDevice->is_online ? 'bg-successLight text-success' : 'bg-background text-muted' }}">

                        <i class="fa-solid fa-wifi text-xl"></i>

                    </div>

                    <p class="mt-3 text-base font-semibold text-text">

                        {{ $attendanceDevice->is_online
                            ? 'Device Online'
                            : 'Device Offline'
                        }}

                    </p>

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

                        {{ $attendanceDevice->is_online
                            ? 'The device is currently marked as connected.'
                            : 'The device is currently marked as disconnected.'
                        }}

                    </p>

                </div>


                {{-- Status Information --}}
                <div class="mt-5 space-y-3 border-t border-border pt-5">

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

                        <span class="text-xs text-muted">
                            Last Connected
                        </span>

                        <span class="text-right text-xs font-medium text-text">

                            {{ $attendanceDevice->last_connected_at
                                ? $attendanceDevice->last_connected_at->format('d M Y, h:i A')
                                : 'Never'
                            }}

                        </span>

                    </div>


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

                        <span class="text-xs text-muted">
                            Last Synced
                        </span>

                        <span class="text-right text-xs font-medium text-text">

                            {{ $attendanceDevice->last_synced_at
                                ? $attendanceDevice->last_synced_at->format('d M Y, h:i A')
                                : 'Never'
                            }}

                        </span>

                    </div>


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

                        <span class="text-xs text-muted">
                            Sync Interval
                        </span>

                        <span class="text-xs font-medium text-text">
                            {{ number_format($attendanceDevice->sync_interval) }} minutes
                        </span>

                    </div>


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

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

                        @if($attendanceDevice->is_active)

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

                        @else

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

                        @endif

                    </div>

                </div>

            </div>

        </div>

    </div>


    {{-- ============================================================
        Network & Authentication
    ============================================================ --}}
    <div class="grid grid-cols-12 gap-5">

        {{-- Network Configuration --}}
        <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">
                    Network Configuration
                </h2>

                <p class="mt-1 text-xs text-muted">
                    Network information used to communicate with the attendance device.
                </p>

            </div>


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

                {{-- IP Address --}}
                <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-network-wired"></i>
                    </div>

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

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

                        <p class="mt-0.5 font-mono text-sm font-medium text-text">
                            {{ $attendanceDevice->ip_address }}
                        </p>

                    </div>

                </div>


                {{-- Port --}}
                <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-plug"></i>
                    </div>

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

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

                        <p class="mt-0.5 font-mono text-sm font-medium text-text">
                            {{ $attendanceDevice->port }}
                        </p>

                    </div>

                </div>


                {{-- Endpoint --}}
                <div class="flex items-start 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-link"></i>
                    </div>

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

                        <p class="text-xs text-muted">
                            Network Endpoint
                        </p>

                        <p class="mt-0.5 break-all font-mono text-sm font-medium text-text">
                            {{ $attendanceDevice->ip_address }}:{{ $attendanceDevice->port }}
                        </p>

                    </div>

                </div>


                {{-- API URL --}}
                <div class="flex items-start 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-code"></i>
                    </div>

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

                        <p class="text-xs text-muted">
                            API URL
                        </p>

                        @if($attendanceDevice->api_url)

                            <p class="mt-0.5 break-all text-sm font-medium text-text">
                                {{ $attendanceDevice->api_url }}
                            </p>

                        @else

                            <p class="mt-0.5 text-sm text-muted">
                                Not configured
                            </p>

                        @endif

                    </div>

                </div>

            </div>

        </div>


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

                <p class="mt-1 text-xs text-muted">
                    Credentials configured for communication with the device.
                </p>

            </div>


            <div class="p-5">

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

                    {{-- Username --}}
                    <div>

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

                        <div class="mt-2 flex items-center gap-3 rounded-lg border border-border bg-background/50 p-3">

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

                            <span class="text-sm font-medium text-text">

                                {{ $attendanceDevice->username
                                    ?: 'Not configured'
                                }}

                            </span>

                        </div>

                    </div>


                    {{-- Password --}}
                    <div>

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

                        <div class="mt-2 flex items-center gap-3 rounded-lg border border-border bg-background/50 p-3">

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

                            @if($attendanceDevice->password)

                                <span class="font-mono text-sm font-medium tracking-widest text-text">
                                    ••••••••
                                </span>

                            @else

                                <span class="text-sm text-muted">
                                    Not configured
                                </span>

                            @endif

                        </div>

                        <p class="mt-2 text-xs leading-5 text-muted">
                            Device passwords are hidden for security and should never be displayed on this page.
                        </p>

                    </div>


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

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

                            <i class="fa-solid fa-shield-halved mt-0.5 text-info"></i>

                            <div>

                                <p class="text-sm font-medium text-text">
                                    Device Credentials
                                </p>

                                <p class="mt-1 text-xs leading-5 text-muted">
                                    Credentials are used by the attendance integration when communicating with this device.
                                </p>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>


    {{-- ============================================================
        Synchronization & Integration
    ============================================================ --}}
    <div class="grid grid-cols-12 gap-5">

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

                <p class="mt-1 text-xs text-muted">
                    Attendance data synchronization information.
                </p>

            </div>


            <div class="p-5">

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">

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

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

                        <p class="mt-3 text-xs text-muted">
                            Sync Interval
                        </p>

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

                    </div>


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

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

                        <p class="mt-3 text-xs text-muted">
                            Last Sync
                        </p>

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

                            {{ $attendanceDevice->last_synced_at
                                ? $attendanceDevice->last_synced_at->format('d M Y')
                                : 'Never'
                            }}

                        </p>

                        @if($attendanceDevice->last_synced_at)

                            <p class="mt-0.5 text-xs text-muted">
                                {{ $attendanceDevice->last_synced_at->format('h:i A') }}
                            </p>

                        @endif

                    </div>

                </div>


                {{-- Sync Information --}}
                <div class="mt-4 rounded-lg border border-border 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-infoLight text-info">
                            <i class="fa-solid fa-circle-info"></i>
                        </div>

                        <div>

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

                            <p class="mt-1 text-xs leading-5 text-muted">
                                The configured synchronization interval determines how frequently the system should retrieve attendance punches from this device.
                            </p>

                        </div>

                    </div>

                </div>

            </div>

        </div>


        {{-- Device Integration --}}
        <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">
                    Attendance Integration
                </h2>

                <p class="mt-1 text-xs text-muted">
                    How this device participates in the attendance workflow.
                </p>

            </div>


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

                {{-- Punches --}}
                <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-fingerprint"></i>
                    </div>

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

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

                        <p class="mt-0.5 text-xs text-muted">
                            Receives student attendance punches.
                        </p>

                    </div>

                    @if($attendanceDevice->is_active)

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

                    @else

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

                    @endif

                </div>


                {{-- Synchronization --}}
                <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-arrows-rotate"></i>
                    </div>

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

                        <p class="text-sm font-medium text-text">
                            Data Synchronization
                        </p>

                        <p class="mt-0.5 text-xs text-muted">
                            Retrieves attendance logs from the device.
                        </p>

                    </div>

                    <span class="text-xs font-medium text-text">
                        {{ $attendanceDevice->sync_interval }} min
                    </span>

                </div>


                {{-- Connection --}}
                <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 {{ $attendanceDevice->is_online ? 'bg-successLight text-success' : 'bg-background text-muted' }}">
                        <i class="fa-solid fa-wifi"></i>
                    </div>

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

                        <p class="text-sm font-medium text-text">
                            Device Connection
                        </p>

                        <p class="mt-0.5 text-xs text-muted">
                            Current recorded connection state.
                        </p>

                    </div>

                    @if($attendanceDevice->is_online)

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

                    @else

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

                    @endif

                </div>

            </div>

        </div>

    </div>


    {{-- ============================================================
        Additional Information
    ============================================================ --}}
    @if(!empty($attendanceDevice->configuration))

        <div class="card overflow-hidden">

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

                <h2 class="text-base font-semibold text-text">
                    Device Configuration
                </h2>

                <p class="mt-1 text-xs text-muted">
                    Additional configuration values stored for this attendance device.
                </p>

            </div>


            <div class="p-5">

                <div class="overflow-hidden rounded-lg border border-border">

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

                        <table class="min-w-full divide-y divide-border">

                            <thead class="bg-background/50">

                                <tr>

                                    <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wide text-muted">
                                        Configuration
                                    </th>

                                    <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wide text-muted">
                                        Value
                                    </th>

                                </tr>

                            </thead>

                            <tbody class="divide-y divide-border bg-card">

                                @foreach($attendanceDevice->configuration as $key => $value)

                                    <tr>

                                        <td class="px-4 py-3 text-sm font-medium text-text">
                                            {{ ucwords(str_replace('_', ' ', $key)) }}
                                        </td>

                                        <td class="px-4 py-3 text-sm text-muted">

                                            @if(is_bool($value))

                                                {{ $value ? 'Yes' : 'No' }}

                                            @elseif(is_array($value))

                                                <code class="text-xs">
                                                    {{ json_encode($value) }}
                                                </code>

                                            @else

                                                {{ $value }}

                                            @endif

                                        </td>

                                    </tr>

                                @endforeach

                            </tbody>

                        </table>

                    </div>

                </div>

            </div>

        </div>

    @endif


    {{-- ============================================================
        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 about this attendance device record.
                </p>

            </div>


            <div class="p-5">

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

                    <div>

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

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

                    </div>


                    <div>

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

                        <dd class="mt-1.5">

                            @if($attendanceDevice->is_active)

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

                            @else

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

                            @endif

                        </dd>

                    </div>


                    <div>

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

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

                    </div>


                    <div>

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

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

                    </div>

                </dl>

            </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 this attendance device record.
                </p>

            </div>


            <div class="p-5">

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

                    @can('attendance-devices.edit')

                        <a
                            href="{{ route('attendance-devices.edit', $attendanceDevice) }}"
                            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 Device
                                </p>

                                <p class="mt-0.5 text-xs text-muted">
                                    Update device, network and synchronization settings.
                                </p>

                            </div>

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

                        </a>

                    @endcan


                    @can('attendance-devices.delete')

                        <form
                            action="{{ route('attendance-devices.destroy', $attendanceDevice) }}"
                            method="POST"
                            id="delete-attendance-device-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 Device
                                    </p>

                                    <p class="mt-0.5 text-xs text-muted">
                                        Remove this device from the attendance system.
                                    </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-device-form');

    if (deleteForm) {

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

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

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

        });

    }

});
</script>

@endpush