@extends('layouts.app')

@section('title', 'Create Attendance Log')

@section('page-title', 'Create Attendance Log')

@section('content')
{{-- @section('page-description') --}}
Create a new attendance punch log manually for an attendance device.
{{-- @endsection --}}

{{-- @section('page-actions') --}}
    <a
        href="{{ route('attendance-logs.index') }}"
        class="btn btn-secondary"
    >
        <i class="fa-solid fa-arrow-left"></i>
        Back
    </a>
{{-- @endsection --}}


<form
    action="{{ route('attendance-logs.store') }}"
    method="POST"
    id="attendance-log-form"
>
    @csrf

    <div class="card overflow-hidden">

        {{-- Header --}}
        <div class="border-b border-border px-5 py-4">
            <h2 class="text-base font-semibold text-text">
                Attendance Log Information
            </h2>

            <p class="mt-1 text-xs text-muted">
                Enter the device punch information and attendance verification details.
            </p>
        </div>

        {{-- Form --}}
        <div class="p-5 lg:p-6">

            <div class="grid grid-cols-1 gap-5 md:grid-cols-2">

                {{-- Attendance Device --}}
                <div class="md:col-span-2">

                    <label
                        for="attendance_device_id"
                        class="mb-1.5 block text-sm font-medium text-text"
                    >
                        Attendance Device
                        <span class="text-danger">*</span>
                    </label>

                    <select
                        id="attendance_device_id"
                        name="attendance_device_id"
                        class="form-select w-full @error('attendance_device_id') border-danger @enderror"
                        required
                        autofocus
                    >
                        <option value="">
                            Select Attendance Device
                        </option>

                        @foreach($attendanceDevices as $device)
                            <option
                                value="{{ $device->id }}"
                                @selected(
                                    old('attendance_device_id') == $device->id
                                )
                            >
                                {{ $device->name }}

                                @if($device->location)
                                    - {{ $device->location }}
                                @endif
                            </option>
                        @endforeach
                    </select>

                    <p class="mt-1.5 text-xs text-muted">
                        Select the attendance device from which this punch originated.
                    </p>

                    @error('attendance_device_id')
                        <p class="mt-1.5 text-xs text-danger">
                            {{ $message }}
                        </p>
                    @enderror

                </div>


                {{-- Device User ID --}}
                <div>

                    <label
                        for="device_user_id"
                        class="mb-1.5 block text-sm font-medium text-text"
                    >
                        Device User ID
                        <span class="text-danger">*</span>
                    </label>

                    <input
                        type="text"
                        id="device_user_id"
                        name="device_user_id"
                        value="{{ old('device_user_id') }}"
                        placeholder="e.g. 1001"
                        autocomplete="off"
                        class="form-input w-full @error('device_user_id') border-danger @enderror"
                        required
                    >

                    <p class="mt-1.5 text-xs text-muted">
                        User identifier registered inside the attendance device.
                    </p>

                    @error('device_user_id')
                        <p class="mt-1.5 text-xs text-danger">
                            {{ $message }}
                        </p>
                    @enderror

                </div>


                {{-- RFID Card Number --}}
                <div>

                    <label
                        for="rfid_card_number"
                        class="mb-1.5 block text-sm font-medium text-text"
                    >
                        RFID Card Number
                    </label>

                    <input
                        type="text"
                        id="rfid_card_number"
                        name="rfid_card_number"
                        value="{{ old('rfid_card_number') }}"
                        placeholder="e.g. RFID-001234"
                        autocomplete="off"
                        class="form-input w-full @error('rfid_card_number') border-danger @enderror"
                    >

                    <p class="mt-1.5 text-xs text-muted">
                        RFID card number used for the punch, if available.
                    </p>

                    @error('rfid_card_number')
                        <p class="mt-1.5 text-xs text-danger">
                            {{ $message }}
                        </p>
                    @enderror

                </div>


                {{-- Punched At --}}
                <div>

                    <label
                        for="punched_at"
                        class="mb-1.5 block text-sm font-medium text-text"
                    >
                        Punched At
                        <span class="text-danger">*</span>
                    </label>

                    <input
                        type="datetime-local"
                        id="punched_at"
                        name="punched_at"
                        value="{{ old('punched_at') }}"
                        class="form-input w-full @error('punched_at') border-danger @enderror"
                        required
                    >

                    <p class="mt-1.5 text-xs text-muted">
                        Date and time when the attendance punch occurred.
                    </p>

                    @error('punched_at')
                        <p class="mt-1.5 text-xs text-danger">
                            {{ $message }}
                        </p>
                    @enderror

                </div>


                {{-- Device Log ID --}}
                <div>

                    <label
                        for="device_log_id"
                        class="mb-1.5 block text-sm font-medium text-text"
                    >
                        Device Log ID
                    </label>

                    <input
                        type="text"
                        id="device_log_id"
                        name="device_log_id"
                        value="{{ old('device_log_id') }}"
                        placeholder="e.g. LOG-10001"
                        autocomplete="off"
                        class="form-input w-full @error('device_log_id') border-danger @enderror"
                    >

                    <p class="mt-1.5 text-xs text-muted">
                        Unique log identifier supplied by the attendance device.
                    </p>

                    @error('device_log_id')
                        <p class="mt-1.5 text-xs text-danger">
                            {{ $message }}
                        </p>
                    @enderror

                </div>


                {{-- Verification Mode --}}
                <div>

                    <label
                        for="verification_mode"
                        class="mb-1.5 block text-sm font-medium text-text"
                    >
                        Verification Mode
                        <span class="text-danger">*</span>
                    </label>

                    <select
                        id="verification_mode"
                        name="verification_mode"
                        class="form-select w-full @error('verification_mode') border-danger @enderror"
                        required
                    >
                        <option
                            value="unknown"
                            @selected(old('verification_mode', 'unknown') === 'unknown')
                        >
                            Unknown
                        </option>

                        <option
                            value="rfid"
                            @selected(old('verification_mode') === 'rfid')
                        >
                            RFID
                        </option>

                        <option
                            value="fingerprint"
                            @selected(old('verification_mode') === 'fingerprint')
                        >
                            Fingerprint
                        </option>

                        <option
                            value="face"
                            @selected(old('verification_mode') === 'face')
                        >
                            Face Recognition
                        </option>

                        <option
                            value="password"
                            @selected(old('verification_mode') === 'password')
                        >
                            Password
                        </option>

                        <option
                            value="qr"
                            @selected(old('verification_mode') === 'qr')
                        >
                            QR Code
                        </option>

                        <option
                            value="manual"
                            @selected(old('verification_mode') === 'manual')
                        >
                            Manual
                        </option>
                    </select>

                    <p class="mt-1.5 text-xs text-muted">
                        Method used by the device to verify the user.
                    </p>

                    @error('verification_mode')
                        <p class="mt-1.5 text-xs text-danger">
                            {{ $message }}
                        </p>
                    @enderror

                </div>


                {{-- Direction --}}
                <div>

                    <label
                        for="direction"
                        class="mb-1.5 block text-sm font-medium text-text"
                    >
                        Direction
                        <span class="text-danger">*</span>
                    </label>

                    <select
                        id="direction"
                        name="direction"
                        class="form-select w-full @error('direction') border-danger @enderror"
                        required
                    >
                        <option
                            value="unknown"
                            @selected(old('direction', 'unknown') === 'unknown')
                        >
                            Unknown
                        </option>

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

                        <option
                            value="out"
                            @selected(old('direction') === 'out')
                        >
                            Check Out
                        </option>
                    </select>

                    <p class="mt-1.5 text-xs text-muted">
                        Indicates whether the punch represents entry or exit.
                    </p>

                    @error('direction')
                        <p class="mt-1.5 text-xs text-danger">
                            {{ $message }}
                        </p>
                    @enderror

                </div>


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

                    <label
                        for="is_processed"
                        class="mb-1.5 block text-sm font-medium text-text"
                    >
                        Processing Status
                        <span class="text-danger">*</span>
                    </label>

                    <select
                        id="is_processed"
                        name="is_processed"
                        class="form-select w-full @error('is_processed') border-danger @enderror"
                        required
                    >
                        <option
                            value="0"
                            @selected(old('is_processed', '0') === '0')
                        >
                            Unprocessed
                        </option>

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

                    <p class="mt-1.5 text-xs text-muted">
                        Normally new device logs should remain unprocessed until attendance processing runs.
                    </p>

                    @error('is_processed')
                        <p class="mt-1.5 text-xs text-danger">
                            {{ $message }}
                        </p>
                    @enderror

                </div>


                {{-- Processed At --}}
                <div>

                    <label
                        for="processed_at"
                        class="mb-1.5 block text-sm font-medium text-text"
                    >
                        Processed At
                    </label>

                    <input
                        type="datetime-local"
                        id="processed_at"
                        name="processed_at"
                        value="{{ old('processed_at') }}"
                        class="form-input w-full @error('processed_at') border-danger @enderror"
                    >

                    <p class="mt-1.5 text-xs text-muted">
                        Leave empty when the attendance log has not yet been processed.
                    </p>

                    @error('processed_at')
                        <p class="mt-1.5 text-xs text-danger">
                            {{ $message }}
                        </p>
                    @enderror

                </div>


                {{-- Payload --}}
                <div class="md:col-span-2">

                    <label
                        for="payload"
                        class="mb-1.5 block text-sm font-medium text-text"
                    >
                        Device Payload
                    </label>

                    <textarea
                        id="payload"
                        name="payload"
                        rows="8"
                        placeholder='{
    "user_id": "1001",
    "verification": "rfid",
    "direction": "in"
}'
                        class="form-input w-full font-mono text-sm @error('payload') border-danger @enderror"
                    >{{ old('payload') }}</textarea>

                    <p class="mt-1.5 text-xs text-muted">
                        Optional raw JSON payload received from the attendance device.
                    </p>

                    @error('payload')
                        <p class="mt-1.5 text-xs text-danger">
                            {{ $message }}
                        </p>
                    @enderror

                </div>

            </div>

        </div>


        {{-- Actions --}}
        <div class="flex flex-col-reverse gap-3 border-t border-border bg-background/50 px-5 py-4 sm:flex-row sm:items-center sm:justify-end">

            <a
                href="{{ route('attendance-logs.index') }}"
                class="btn btn-secondary"
            >
                Cancel
            </a>

            <button
                type="submit"
                class="btn btn-primary"
                id="submit-button"
            >
                <i class="fa-solid fa-floppy-disk"></i>

                <span>Save Attendance Log</span>
            </button>

        </div>

    </div>

</form>


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

        const processedStatus = document.getElementById('is_processed');
        const processedAt = document.getElementById('processed_at');

        function handleProcessedStatus() {

            if (processedStatus.value === '0') {
                processedAt.value = '';
                processedAt.disabled = true;

                processedAt.classList.add(
                    'cursor-not-allowed',
                    'opacity-60'
                );
            } else {
                processedAt.disabled = false;

                processedAt.classList.remove(
                    'cursor-not-allowed',
                    'opacity-60'
                );
            }
        }

        processedStatus.addEventListener(
            'change',
            handleProcessedStatus
        );

        handleProcessedStatus();

    });
</script>

@endsection