@extends('layouts.app')

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

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

        <h1 class="text-xl font-semibold text-text">
            Attendance Logs
        </h1>

        <p class="mt-1 text-sm text-muted">
            Monitor raw attendance punches received from attendance devices.
        </p>

    </div>

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

        @can('attendance-logs.view')

            <a
                href="{{ route('attendance-logs.export', request()->only([
                    'search',
                    'attendance_device_id',
                    'verification_mode',
                    'direction',
                    'is_processed',
                    'date_from',
                    'date_to',
                ])) }}"
                class="btn btn-secondary"
            >
                <i class="fa-solid fa-file-export"></i>

                <span>
                    Export CSV
                </span>
            </a>

        @endcan


        @can('attendance-logs.create')

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

                <span>
                    New Log
                </span>
            </a>

        @endcan

    </div>

</div>


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

    <form
        id="attendance-log-filter-form"
        action="{{ route('attendance-logs.index') }}"
        method="GET"
        class="space-y-3"
    >

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

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

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

                {{-- <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-xs text-muted"></i> --}}

                <input
                    type="search"
                    id="search"
                    name="search"
                    value="{{ request('search') }}"
                    placeholder="User ID, RFID or device log ID..."
                    autocomplete="off"
                    class="form-input w-full pl-9"
                >

            </div>


            {{-- Device --}}
            <div class="w-full sm:w-64">

                <label
                    for="attendance_device_id"
                    class="sr-only"
                >
                    Attendance Device
                </label>

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

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

                    @foreach($attendanceDevices as $device)

                        <option
                            value="{{ $device->id }}"
                            @selected(
                                (string) request('attendance_device_id') ===
                                (string) $device->id
                            )
                        >
                            {{ $device->name }}
                        </option>

                    @endforeach

                </select>

            </div>


            {{-- Verification Mode --}}
            <div class="w-full sm:w-52">

                <label
                    for="verification_mode"
                    class="sr-only"
                >
                    Verification Mode
                </label>

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

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

                    @foreach([
                        'rfid' => 'RFID',
                        'fingerprint' => 'Fingerprint',
                        'face' => 'Face',
                        'password' => 'Password',
                        'qr' => 'QR Code',
                        'manual' => 'Manual',
                        'unknown' => 'Unknown',
                    ] as $value => $label)

                        <option
                            value="{{ $value }}"
                            @selected(request('verification_mode') === $value)
                        >
                            {{ $label }}
                        </option>

                    @endforeach

                </select>

            </div>


            {{-- Direction --}}
            <div class="w-full sm:w-40">

                <label
                    for="direction"
                    class="sr-only"
                >
                    Direction
                </label>

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

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

                    <option
                        value="in"
                        @selected(request('direction') === 'in')
                    >
                        In
                    </option>

                    <option
                        value="out"
                        @selected(request('direction') === 'out')
                    >
                        Out
                    </option>

                    <option
                        value="unknown"
                        @selected(request('direction') === 'unknown')
                    >
                        Unknown
                    </option>

                </select>

            </div>


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

                <label
                    for="is_processed"
                    class="sr-only"
                >
                    Processing Status
                </label>

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

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

                    <option
                        value="1"
                        @selected(request('is_processed') === '1')
                    >
                        Processed
                    </option>

                    <option
                        value="0"
                        @selected(request('is_processed') === '0')
                    >
                        Pending
                    </option>

                </select>

            </div>

        </div>


        <div class="flex flex-col gap-3 md:flex-row md:items-center">

            {{-- From Date --}}
            <div class="w-full sm:w-48">

                <label
                    for="date_from"
                    class="sr-only"
                >
                    From Date
                </label>

                <input
                    type="date"
                    id="date_from"
                    name="date_from"
                    value="{{ request('date_from') }}"
                    class="form-input w-full"
                    title="From date"
                >

            </div>


            {{-- To Date --}}
            <div class="w-full sm:w-48">

                <label
                    for="date_to"
                    class="sr-only"
                >
                    To Date
                </label>

                <input
                    type="date"
                    id="date_to"
                    name="date_to"
                    value="{{ request('date_to') }}"
                    class="form-input w-full"
                    title="To date"
                >

            </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',
                'attendance_device_id',
                'verification_mode',
                'direction',
                'is_processed',
                'date_from',
                'date_to',
            ]))

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

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

            @endif

        </div>

    </form>

</div>


{{-- ============================================================
    Active Filters
============================================================ --}}
@if(
    filled(request('search')) ||
    filled(request('attendance_device_id')) ||
    filled(request('verification_mode')) ||
    filled(request('direction')) ||
    (request('is_processed') !== null && request('is_processed') !== '') ||
    filled(request('date_from')) ||
    filled(request('date_to'))
)

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

        <span class="text-xs font-medium text-muted">
            Active filters:
        </span>


        @if(filled(request('search')))

            <span class="badge-info">
                {{-- <i class="fa-solid fa-magnifying-glass mr-1"></i> --}}
                {{ request('search') }}
            </span>

        @endif


        @if(filled(request('attendance_device_id')))

            @php
                $selectedDevice = $attendanceDevices->firstWhere(
                    'id',
                    (int) request('attendance_device_id')
                );
            @endphp

            @if($selectedDevice)

                <span class="badge-info">
                    <i class="fa-solid fa-fingerprint mr-1"></i>
                    {{ $selectedDevice->name }}
                </span>

            @endif

        @endif


        @if(filled(request('verification_mode')))

            <span class="badge-info">
                {{ ucfirst(request('verification_mode')) }}
            </span>

        @endif


        @if(filled(request('direction')))

            <span class="badge-info">
                Direction: {{ strtoupper(request('direction')) }}
            </span>

        @endif


        @if(request('is_processed') !== null && request('is_processed') !== '')

            @if(request('is_processed') === '1')

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

            @else

                <span class="badge-warning">
                    Pending
                </span>

            @endif

        @endif


        @if(filled(request('date_from')))

            <span class="badge-info">
                From: {{ request('date_from') }}
            </span>

        @endif


        @if(filled(request('date_to')))

            <span class="badge-info">
                To: {{ request('date_to') }}
            </span>

        @endif

    </div>

@endif


{{-- ============================================================
    Bulk Actions
============================================================ --}}
<div
    id="bulk-actions"
    class="hidden items-center justify-between gap-3 rounded-lg border border-border bg-card px-4 py-3"
>

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

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

        <div>

            <p
                id="selected-count"
                class="text-sm font-medium text-text"
            >
                0 selected
            </p>

            <p class="text-xs text-muted">
                Selected attendance logs
            </p>

        </div>

    </div>


    @can('attendance-logs.delete')

        <button
            type="button"
            id="bulk-delete"
            class="btn btn-danger"
        >
            <i class="fa-regular fa-trash-can"></i>

            <span>
                Delete Selected
            </span>
        </button>

    @endcan

</div>


{{-- ============================================================
    Attendance Logs 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 Log List
            </h2>

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

                @if($attendanceLogs->total() > 0)

                    Showing
                    {{ number_format($attendanceLogs->firstItem()) }}
                    to
                    {{ number_format($attendanceLogs->lastItem()) }}
                    of
                    {{ number_format($attendanceLogs->total()) }}
                    attendance logs.

                @else

                    No attendance logs available.

                @endif

            </p>

        </div>


        @if($attendanceLogs->total() > 0)

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

                Page

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

                of

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

            </div>

        @endif

    </div>


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

        <table class="table">

            <thead>

                <tr>

                    <th class="w-12">

                        <input
                            type="checkbox"
                            id="select-all"
                            class="rounded border-border"
                            aria-label="Select all attendance logs"
                        >

                    </th>

                    <th>
                        User
                    </th>

                    <th>
                        Device
                    </th>

                    <th>
                        Punch Time
                    </th>

                    <th>
                        Verification
                    </th>

                    <th>
                        Direction
                    </th>

                    <th>
                        Processed
                    </th>

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

                </tr>

            </thead>


            <tbody>

                @forelse($attendanceLogs as $attendanceLog)

                    <tr>

                        {{-- Checkbox --}}
                        <td>

                            <input
                                type="checkbox"
                                value="{{ $attendanceLog->id }}"
                                class="row-checkbox rounded border-border"
                                aria-label="Select attendance log {{ $attendanceLog->id }}"
                            >

                        </td>


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

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

                                    @can('attendance-logs.view')

                                        <a
                                            href="{{ route('attendance-logs.show', $attendanceLog) }}"
                                            class="block truncate text-sm font-medium text-text transition hover:text-primary"
                                        >
                                            {{ $attendanceLog->device_user_id }}
                                        </a>

                                    @else

                                        <p class="truncate text-sm font-medium text-text">
                                            {{ $attendanceLog->device_user_id }}
                                        </p>

                                    @endcan


                                    <div class="mt-1">

                                        @if($attendanceLog->rfid_card_number)

                                            <span class="text-xs text-muted">
                                                RFID: {{ $attendanceLog->rfid_card_number }}
                                            </span>

                                        @else

                                            <span class="text-xs text-muted">
                                                No RFID
                                            </span>

                                        @endif

                                    </div>

                                </div>

                            </div>

                        </td>


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

                            @if($attendanceLog->attendanceDevice)

                                <div>

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

                                    @if($attendanceLog->attendanceDevice->location)

                                        <p class="mt-1 text-xs text-muted">
                                            {{ $attendanceLog->attendanceDevice->location }}
                                        </p>

                                    @endif

                                </div>

                            @else

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

                            @endif

                        </td>


                        {{-- Punch Time --}}
                        <td>

                            <div>

                                <p class="whitespace-nowrap text-sm font-medium text-text">
                                    {{ $attendanceLog->punched_at?->format('M d, Y') ?? '—' }}
                                </p>

                                <p class="mt-1 whitespace-nowrap text-xs text-muted">
                                    {{ $attendanceLog->punched_at?->format('h:i:s A') ?? '—' }}
                                </p>

                            </div>

                        </td>


                        {{-- Verification --}}
                        <td>

                            @switch($attendanceLog->verification_mode)

                                @case('rfid')
                                    <span class="badge-info">
                                        <i class="fa-solid fa-id-card mr-1"></i>
                                        RFID
                                    </span>
                                    @break

                                @case('fingerprint')
                                    <span class="badge-info">
                                        <i class="fa-solid fa-fingerprint mr-1"></i>
                                        Fingerprint
                                    </span>
                                    @break

                                @case('face')
                                    <span class="badge-info">
                                        <i class="fa-solid fa-face-smile mr-1"></i>
                                        Face
                                    </span>
                                    @break

                                @case('qr')
                                    <span class="badge-info">
                                        <i class="fa-solid fa-qrcode mr-1"></i>
                                        QR
                                    </span>
                                    @break

                                @case('password')
                                    <span class="badge-info">
                                        Password
                                    </span>
                                    @break

                                @case('manual')
                                    <span class="badge-warning">
                                        Manual
                                    </span>
                                    @break

                                @default
                                    <span class="badge-secondary">
                                        Unknown
                                    </span>

                            @endswitch

                        </td>


                        {{-- Direction --}}
                        <td>

                            @if($attendanceLog->direction === 'in')

                                <span class="badge-success">
                                    <i class="fa-solid fa-arrow-right-to-bracket mr-1"></i>
                                    IN
                                </span>

                            @elseif($attendanceLog->direction === 'out')

                                <span class="badge-danger">
                                    <i class="fa-solid fa-arrow-right-from-bracket mr-1"></i>
                                    OUT
                                </span>

                            @else

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

                            @endif

                        </td>


                        {{-- Processed --}}
                        <td>

                            @if($attendanceLog->is_processed)

                                <span class="badge-success">

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

                                    Processed

                                </span>

                                @if($attendanceLog->processed_at)

                                    <p class="mt-1 text-xs text-muted">
                                        {{ $attendanceLog->processed_at->format('M d, h:i A') }}
                                    </p>

                                @endif

                            @else

                                <span class="badge-warning">

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

                                    Pending

                                </span>

                            @endif

                        </td>


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

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

                                {{-- View --}}
                                @can('attendance-logs.view')

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

                                @endcan


                                {{-- Edit --}}
                                @can('attendance-logs.edit')

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

                                @endcan


                                {{-- Delete --}}
                                @can('attendance-logs.delete')

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

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

                                    </form>

                                @endcan

                            </div>

                        </td>

                    </tr>

                @empty

                    <tr>

                        <td
                            colspan="8"
                            class="py-14 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-clock-rotate-left text-lg"></i>
                            </div>


                            @if(
                                filled(request('search')) ||
                                filled(request('attendance_device_id')) ||
                                filled(request('verification_mode')) ||
                                filled(request('direction')) ||
                                (request('is_processed') !== null &&
                                request('is_processed') !== '') ||
                                filled(request('date_from')) ||
                                filled(request('date_to'))
                            )

                                <p class="mt-4 text-sm font-medium text-text">
                                    No matching attendance logs found
                                </p>

                                <p class="mx-auto mt-1 max-w-sm text-xs leading-5 text-muted">
                                    No attendance logs match the current search or filter criteria.
                                </p>

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

                                    Clear Filters
                                </a>

                            @else

                                <p class="mt-4 text-sm font-medium text-text">
                                    No attendance logs found
                                </p>

                                <p class="mx-auto mt-1 max-w-sm text-xs leading-5 text-muted">
                                    Attendance punches received from attendance devices will appear here.
                                </p>

                                @can('attendance-logs.create')

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

                                        New Log
                                    </a>

                                @endcan

                            @endif

                        </td>

                    </tr>

                @endforelse

            </tbody>

        </table>

    </div>


    {{-- ========================================================
        Pagination
    ======================================================== --}}
    @if($attendanceLogs->hasPages())

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

            {{ $attendanceLogs->withQueryString()->links() }}

        </div>

    @endif

</div>


</div>

{{-- ================================================================
Bulk Delete Form
================================================================ --}}

<form
    id="bulk-delete-form"
    action="{{ route('attendance-logs.bulk-delete') }}"
    method="POST"
    class="hidden"
>
    @csrf
    @method('DELETE')

 
<div id="bulk-delete-inputs"></div>
 

</form>

@endsection

@push('scripts')

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

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

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

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

    const deviceFilter =
        document.getElementById('attendance_device_id');

    const verificationFilter =
        document.getElementById('verification_mode');

    const directionFilter =
        document.getElementById('direction');

    const processedFilter =
        document.getElementById('is_processed');

    const selectAll =
        document.getElementById('select-all');

    const rowCheckboxes =
        document.querySelectorAll('.row-checkbox');

    const bulkActions =
        document.getElementById('bulk-actions');

    const selectedCount =
        document.getElementById('selected-count');

    const bulkDeleteButton =
        document.getElementById('bulk-delete');

    const bulkDeleteForm =
        document.getElementById('bulk-delete-form');

    const bulkDeleteInputs =
        document.getElementById('bulk-delete-inputs');


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

    let searchTimer = null;

    if (searchInput && filterForm) {

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

            clearTimeout(searchTimer);

            searchTimer = setTimeout(function () {

                filterForm.submit();

            }, 500);

        });

    }


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

    [
        deviceFilter,
        verificationFilter,
        directionFilter,
        processedFilter
    ].forEach(function (filter) {

        filter?.addEventListener(
            'change',
            function () {

                filterForm?.submit();

            }
        );

    });


    /*
    |--------------------------------------------------------------------------
    | Get Selected Rows
    |--------------------------------------------------------------------------
    */

    function getSelectedCheckboxes() {

        return document.querySelectorAll(
            '.row-checkbox:checked'
        );

    }


    /*
    |--------------------------------------------------------------------------
    | Update Bulk Actions
    |--------------------------------------------------------------------------
    */

    function updateBulkActions() {

        const selected =
            getSelectedCheckboxes();

        const count =
            selected.length;


        if (selectedCount) {

            selectedCount.textContent =
                `${count} selected`;

        }


        if (bulkActions) {

            bulkActions.classList.toggle(
                'hidden',
                count === 0
            );

            bulkActions.classList.toggle(
                'flex',
                count > 0
            );

        }


        if (selectAll) {

            selectAll.checked =
                rowCheckboxes.length > 0 &&
                count === rowCheckboxes.length;

            selectAll.indeterminate =
                count > 0 &&
                count < rowCheckboxes.length;

        }

    }


    /*
    |--------------------------------------------------------------------------
    | Select All
    |--------------------------------------------------------------------------
    */

    selectAll?.addEventListener(
        'change',
        function () {

            rowCheckboxes.forEach(
                function (checkbox) {

                    checkbox.checked =
                        selectAll.checked;

                }
            );

            updateBulkActions();

        }
    );


    /*
    |--------------------------------------------------------------------------
    | Individual Selection
    |--------------------------------------------------------------------------
    */

    rowCheckboxes.forEach(
        function (checkbox) {

            checkbox.addEventListener(
                'change',
                updateBulkActions
            );

        }
    );


    /*
    |--------------------------------------------------------------------------
    | Bulk Delete
    |--------------------------------------------------------------------------
    */

    bulkDeleteButton?.addEventListener(
        'click',
        function () {

            const selected =
                getSelectedCheckboxes();


            if (selected.length === 0) {

                window.alert(
                    'Please select at least one attendance log.'
                );

                return;

            }


            const confirmed =
                window.confirm(
                    `Are you sure you want to delete ${selected.length} selected attendance log(s)?`
                );


            if (!confirmed) {
                return;
            }


            if (!bulkDeleteInputs || !bulkDeleteForm) {
                return;
            }


            bulkDeleteInputs.innerHTML = '';


            selected.forEach(
                function (checkbox) {

                    const input =
                        document.createElement('input');

                    input.type =
                        'hidden';

                    input.name =
                        'ids[]';

                    input.value =
                        checkbox.value;

                    bulkDeleteInputs.appendChild(
                        input
                    );

                }
            );


            bulkDeleteButton.disabled =
                true;

            bulkDeleteForm.submit();

        }
    );


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

    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 log';


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


                        if (!confirmed) {

                            event.preventDefault();

                        }

                    }
                );

            }
        );


    /*
    |--------------------------------------------------------------------------
    | Initial State
    |--------------------------------------------------------------------------
    */

    updateBulkActions();

});
</script>

@endpush