@extends('layouts.admin')

@section('content')
<div class="max-w-lg mx-auto mt-10 bg-white p-6 rounded-lg shadow">

    <h1 class="text-2xl font-bold mb-4 text-gray-800">
        Manual Attendance Recording
    </h1>

    <p class="text-sm text-gray-600 mb-6">
        Enter a valid Booking ID to manually record attendance.
    </p>

    @if(session('success'))
        <div class="bg-green-100 text-green-700 p-3 rounded mb-4">
            {{ session('success') }}
        </div>
    @endif

    @if(session('info'))
        <div class="bg-blue-100 text-blue-700 p-3 rounded mb-4">
            {{ session('info') }}
        </div>
    @endif

    @if($errors->any())
        <div class="bg-red-100 text-red-700 p-3 rounded mb-4">
            {{ $errors->first() }}
        </div>
    @endif

    <!-- Booking ID Input -->
    <label class="block mb-2 font-semibold text-gray-700">
        Booking ID
    </label>

    <input type="number" id="booking-id" 
           class="w-full border-gray-300 rounded-md p-2 focus:ring-indigo-500 focus:border-indigo-500"
           placeholder="Enter booking ID..." required>

    <!-- Booking Preview Box -->
    <div id="booking-preview" class="hidden bg-gray-50 p-4 mt-4 rounded border text-sm"></div>

    <!-- Submit Form -->
    <form id="manual-form" action="{{ route('admin.attendance.manual.submit') }}" method="POST" class="hidden mt-4">
        @csrf
        <input type="hidden" name="booking_id" id="hidden-booking-id">
        
        <button type="submit"
            class="w-full bg-indigo-600 text-white font-semibold p-2 rounded hover:bg-indigo-700 transition">
            Confirm Attendance
        </button>
    </form>

</div>

<script>
// Live booking lookup
document.getElementById("booking-id").addEventListener("input", function(){
    const id = this.value.trim();
    const box = document.getElementById("booking-preview");
    const form = document.getElementById("manual-form");

    if (!id) {
        box.classList.add("hidden");
        form.classList.add("hidden");
        return;
    }

    fetch("{{ url('admin/attendance/lookup') }}/" + id)
        .then(res => res.json())
        .then(data => {

            // Hide form by default until a valid booking is confirmed
            form.classList.add("hidden");

            if (data.status === "not_found") {
                box.innerHTML = `<div class="text-red-600">No booking found.</div>`;
                box.classList.remove("hidden");
                return;
            }

            if (data.status === "unauthorized") {
                box.innerHTML = `<div class="text-red-600">You are not allowed to check attendance for this booking.</div>`;
                box.classList.remove("hidden");
                return;
            }

            // Already marked present
            if (data.status === "duplicate") {
                let d = data.booking;
                box.innerHTML = `
                    <div class="text-yellow-600 font-semibold mb-2">Already marked present.</div>
                    <strong>User:</strong> ${d.user}<br>
                    <strong>Facility:</strong> ${d.facility}<br>
                    <strong>Dewan:</strong> ${d.dewan}<br>
                    <strong>Date:</strong> ${d.date}<br>
                    <strong>Time:</strong> ${d.start} - ${d.end}<br>
                `;
                box.classList.remove("hidden");
                return;
            }

            // Valid booking (not attended yet)
            let d = data.booking;
            box.innerHTML =
                `<strong>User:</strong> ${d.user}<br>
                 <strong>Facility:</strong> ${d.facility}<br>
                 <strong>Dewan:</strong> ${d.dewan}<br>
                 <strong>Date:</strong> ${d.date}<br>
                 <strong>Time:</strong> ${d.start} - ${d.end}<br>`;

            box.classList.remove("hidden");

            // Show form + set value
            document.getElementById("hidden-booking-id").value = id;
            form.classList.remove("hidden");
        })
        .catch(() => {
            box.innerHTML = `<div class="text-red-600">System error. Try again.</div>`;
            box.classList.remove("hidden");
            form.classList.add("hidden");
        });
});
</script>

@endsection