@extends('layouts.app')

@section('title', 'Attendance Devices')

@section('page-title', 'Attendance Devices')

@section('page-description')
    Manage biometric, RFID and other attendance devices connected to the attendance system.
@endsection

@section('content')

    {{-- ============================================================
        Toolbar
    ============================================================ --}}
    <div class="card mb-5 p-4">

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

            {{-- ========================================================
                Search & Filters
            ======================================================== --}}
            <form
                id="attendance-device-filter-form"
                action="{{ route('attendance-devices.index') }}"
                method="GET"
                class="flex flex-1 flex-col gap-3 sm:flex-row sm:items-center"
            >

                {{-- Search --}}
                <div class="relative w-full sm:max-w-sm">

                    <label for="search" class="sr-only">
                        Search attendance devices
                    </label>

                    <input
                        type="search"
                        id="search"
                        name="search"
                        value="{{ request('search') }}"
                        placeholder="Search device..."
                        autocomplete="off"
                        class="form-input w-full"
                    >

                </div>


                {{-- Status --}}
                <div class="w-full sm:w-44">

                    <label for="status" class="sr-only">
                        Filter by status
                    </label>

                    <select
                        id="status"
                        name="status"
                        class="form-select w-full"
                    >

                        <option value="">
                            All Status
                        </option>

                        <option
                            value="1"
                            @selected(request('status') === '1')
                        >
                            Active
                        </option>

                        <option
                            value="0"
                            @selected(request('status') === '0')
                        >
                            Inactive
                        </option>

                    </select>

                </div>


                {{-- Connection --}}
                <div class="w-full sm:w-44">

                    <label for="online" class="sr-only">
                        Filter by connection status
                    </label>

                    <select
                        id="online"
                        name="online"
                        class="form-select w-full"
                    >

                        <option value="">
                            All Connections
                        </option>

                        <option
                            value="1"
                            @selected(request('online') === '1')
                        >
                            Online
                        </option>

                        <option
                            value="0"
                            @selected(request('online') === '0')
                        >
                            Offline
                        </option>

                    </select>

                </div>


                {{-- Filter --}}
                <button
                    type="submit"
                    class="btn btn-secondary shrink-0"
                >
                    <i class="fa-solid fa-filter"></i>

                    <span>
                        Filter
                    </span>
                </button>


                {{-- Reset --}}
                @if (request()->hasAny(['search', 'status', 'online']))

                    <a
                        href="{{ route('attendance-devices.index') }}"
                        class="btn btn-secondary shrink-0"
                    >
                        <i class="fa-solid fa-rotate-left"></i>

                        <span>
                            Reset
                        </span>
                    </a>

                @endif

            </form>


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

                {{-- @can('attendance-devices.create') --}}

                <a
                    href="{{ route('attendance-devices.create') }}"
                    class="btn btn-primary"
                >
                    <i class="fa-solid fa-plus"></i>

                    <span>
                        New Attendance Device
                    </span>
                </a>

                {{-- @endcan --}}

            </div>

        </div>

    </div>


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

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

            <div>

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

                <p class="mt-1 text-xs text-muted">
                    {{ $attendanceDevices->total() }}
                    {{ Str::plural('attendance device', $attendanceDevices->total()) }}
                    found
                </p>

            </div>

        </div>


        {{-- Desktop / Tablet Table --}}
        <div class="overflow-x-auto">

            <table class="table">

                <thead>

                    <tr>

                        <th>
                            Device
                        </th>

                        <th>
                            Device Details
                        </th>

                        <th>
                            Network
                        </th>

                        <th>
                            Location
                        </th>

                        <th>
                            Connection
                        </th>

                        <th>
                            Last Sync
                        </th>

                        <th>
                            Status
                        </th>

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

                    </tr>

                </thead>

                <tbody>

                    @forelse($attendanceDevices as $attendanceDevice)

                        <tr class="transition-colors hover:bg-background/70">

                            {{-- Device --}}
                            <td>

                                <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="font-medium text-text">
                                            {{ $attendanceDevice->name }}
                                        </p>

                                        <p class="mt-0.5 text-xs text-muted">
                                            {{ $attendanceDevice->serial_number }}
                                        </p>

                                    </div>

                                </div>

                            </td>


                            {{-- Device Details --}}
                            <td>

                                <div>

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

                                    <p class="mt-0.5 text-xs text-muted">
                                        {{ $attendanceDevice->model }}
                                    </p>

                                    <p class="mt-0.5 text-xs text-muted">
                                        {{ ucfirst(str_replace('_', ' ', $attendanceDevice->device_type)) }}
                                    </p>

                                </div>

                            </td>


                            {{-- Network --}}
                            <td class="whitespace-nowrap">

                                <p class="text-sm text-text">
                                    {{ $attendanceDevice->ip_address }}
                                </p>

                                <p class="mt-0.5 text-xs text-muted">
                                    Port {{ $attendanceDevice->port }}
                                </p>

                            </td>


                            {{-- Location --}}
                            <td>

                                @if ($attendanceDevice->location)

                                    <div class="flex items-center gap-1.5 text-sm text-text">

                                        <i class="fa-solid fa-location-dot text-xs text-muted"></i>

                                        <span>
                                            {{ $attendanceDevice->location }}
                                        </span>

                                    </div>

                                @else

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

                                @endif

                            </td>


                            {{-- Connection --}}
                            <td>

                                @if ($attendanceDevice->is_online)

                                    <span class="badge-success gap-1.5">

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

                                        Online

                                    </span>

                                @else

                                    <span class="badge-danger gap-1.5">

                                        <span class="h-1.5 w-1.5 rounded-full bg-danger"></span>

                                        Offline

                                    </span>

                                @endif

                            </td>


                            {{-- Last Sync --}}
                            <td class="whitespace-nowrap">

                                @if ($attendanceDevice->last_synced_at)

                                    <p class="text-sm text-text">
                                        {{ $attendanceDevice->last_synced_at->format('d M Y') }}
                                    </p>

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

                                @else

                                    <span class="text-xs text-muted">
                                        Never synced
                                    </span>

                                @endif

                            </td>


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

                                @if ($attendanceDevice->is_active)

                                    <span class="badge-success gap-1.5">

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

                                        Active

                                    </span>

                                @else

                                    <span class="badge-danger gap-1.5">

                                        <span class="h-1.5 w-1.5 rounded-full bg-danger"></span>

                                        Inactive

                                    </span>

                                @endif

                            </td>


                            {{-- Actions --}}
                            <td>

                                <div class="flex items-center justify-start gap-1">

                                    {{-- View --}}
                                    <a
                                        href="{{ route('attendance-devices.show', $attendanceDevice) }}"
                                        class="flex h-8 w-8 items-center justify-center rounded-lg text-muted transition hover:bg-infoLight hover:text-info"
                                        title="View"
                                        aria-label="View {{ $attendanceDevice->name }}"
                                    >
                                        <i class="fa-regular fa-eye text-xs"></i>
                                    </a>


                                    {{-- Edit --}}
                                    <a
                                        href="{{ route('attendance-devices.edit', $attendanceDevice) }}"
                                        class="flex h-8 w-8 items-center justify-center rounded-lg text-muted transition hover:bg-primary/10 hover:text-primary"
                                        title="Edit"
                                        aria-label="Edit {{ $attendanceDevice->name }}"
                                    >
                                        <i class="fa-solid fa-pen text-xs"></i>
                                    </a>


                                    {{-- Delete --}}
                                    <form
                                        action="{{ route('attendance-devices.destroy', $attendanceDevice) }}"
                                        method="POST"
                                        class="inline delete-form"
                                    >
                                        @csrf
                                        @method('DELETE')

                                        <button
                                            type="submit"
                                            class="flex h-8 w-8 items-center justify-center rounded-lg text-muted transition hover:bg-dangerLight hover:text-danger"
                                            title="Delete"
                                            aria-label="Delete {{ $attendanceDevice->name }}"
                                            data-name="{{ $attendanceDevice->name }}"
                                        >
                                            <i class="fa-regular fa-trash-can text-xs"></i>
                                        </button>

                                    </form>

                                </div>

                            </td>

                        </tr>

                    @empty

                        <tr>

                            <td
                                colspan="8"
                                class="px-5 py-12 text-center"
                            >

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

                                <h3 class="mt-4 text-sm font-semibold text-text">
                                    No attendance devices found
                                </h3>

                                <p class="mx-auto mt-1 max-w-sm text-xs leading-5 text-muted">

                                    @if (request()->hasAny(['search', 'status', 'online']))

                                        No devices match your current search or filters.

                                    @else

                                        Register your first attendance device to begin receiving attendance records.

                                    @endif

                                </p>

                                <div class="mt-4">

                                    @if (request()->hasAny(['search', 'status', 'online']))

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

                                            Clear Filters
                                        </a>

                                    @else

                                        <a
                                            href="{{ route('attendance-devices.create') }}"
                                            class="btn btn-primary"
                                        >
                                            <i class="fa-solid fa-plus"></i>

                                            New Attendance Device
                                        </a>

                                    @endif

                                </div>

                            </td>

                        </tr>

                    @endforelse

                </tbody>

            </table>

        </div>


        {{-- Pagination --}}
        @if ($attendanceDevices->hasPages())

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

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

                    Showing

                    <span class="font-medium text-text">
                        {{ $attendanceDevices->firstItem() }}
                    </span>

                    to

                    <span class="font-medium text-text">
                        {{ $attendanceDevices->lastItem() }}
                    </span>

                    of

                    <span class="font-medium text-text">
                        {{ $attendanceDevices->total() }}
                    </span>

                    results

                </p>

                <div>
                    {{ $attendanceDevices->withQueryString()->links() }}
                </div>

            </div>

        @endif

    </div>

@endsection


@push('scripts')

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

    /*
    |--------------------------------------------------------------------------
    | Elements
    |--------------------------------------------------------------------------
    */

    const filterForm =
        document.getElementById('attendance-device-filter-form');

    const searchInput =
        document.getElementById('search');

    const statusFilter =
        document.getElementById('status');

    const onlineFilter =
        document.getElementById('online');


    /*
    |--------------------------------------------------------------------------
    | Search
    |--------------------------------------------------------------------------
    */

    let searchTimer = null;

    if (searchInput && filterForm) {

        searchInput.addEventListener('input', function () {

            clearTimeout(searchTimer);

            searchTimer = setTimeout(function () {
                filterForm.submit();
            }, 500);

        });

    }


    /*
    |--------------------------------------------------------------------------
    | Select Filters
    |--------------------------------------------------------------------------
    */

    statusFilter?.addEventListener('change', function () {
        filterForm?.submit();
    });

    onlineFilter?.addEventListener('change', function () {
        filterForm?.submit();
    });


    /*
    |--------------------------------------------------------------------------
    | Individual Delete
    |--------------------------------------------------------------------------
    */

    document
        .querySelectorAll('.delete-form')
        .forEach(function (form) {

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

                    const button =
                        form.querySelector('[data-name]');

                    const name =
                        button?.dataset.name ??
                        'this attendance device';

                    const confirmed =
                        window.confirm(
                            `Are you sure you want to delete ${name}?`
                        );

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

                }
            );

        });

});
</script>

@endpush