@extends('layouts.staff')

@section('header')
    <h2 class="font-semibold text-xl text-white">Check In</h2>
@endsection

@section('content')
@if ($errors->any())
    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-2 rounded mb-4">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

@if (session('error'))
    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-2 rounded mb-4">
        {{ session('error') }}
    </div>
@endif

<!-- Malaysia Time Info -->
<div class="bg-blue-100 border border-blue-400 text-blue-800 px-4 py-2 rounded mb-4">
    <p class="font-semibold">⏰ Malaysia Time (UTC+8): <span id="malaysiaTime">--:--:--</span></p>
</div>

<form action="{{ route('attendance.store') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
            <label class="block text-sm font-medium">Date</label>
            <input type="date" name="attendance_date" id="attendanceDate" class="mt-1 w-full border-gray-300 rounded-md shadow-sm bg-gray-100" readonly required>
            <p class="text-xs text-gray-500 mt-1">Auto-filled from Malaysia Time</p>
        </div>

        <div>
            <label class="block text-sm font-medium">Check-In Time</label>
            <input type="time" name="check_in_time" id="checkInTime" class="mt-1 w-full border-gray-300 rounded-md shadow-sm bg-gray-100" readonly required>
            <p class="text-xs text-gray-500 mt-1">Auto-filled from Malaysia Time</p>
        </div>

        <div class="md:col-span-2">
            <label class="block text-sm font-medium">Photo <span class="text-red-600">*</span></label>
            <input type="file" name="image" accept="image/*" class="mt-1 w-full border-gray-300 rounded-md shadow-sm" required>
            <p class="text-xs text-gray-500 mt-1">Please take a photo for attendance verification</p>
        </div>
    </div>

    <div class="mt-6 flex gap-3">
        <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">
            Check In
        </button>
        <a href="{{ route('attendance.index') }}" class="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400">
            Cancel
        </a>
    </div>
</form>

<script>
// Display and auto-fill Malaysia Time (UTC+8)
function updateMalaysiaTime() {
    const options = { timeZone: 'Asia/Kuala_Lumpur', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false };
    const formatter = new Intl.DateTimeFormat('en-GB', options);
    const time = formatter.format(new Date());
    document.getElementById('malaysiaTime').textContent = time;

    // Auto-fill date field with Malaysia date
    const dateOptions = { timeZone: 'Asia/Kuala_Lumpur', year: 'numeric', month: '2-digit', day: '2-digit' };
    const dateFormatter = new Intl.DateTimeFormat('en-CA', dateOptions);
    const date = dateFormatter.format(new Date());
    document.getElementById('attendanceDate').value = date;

    // Auto-fill time field with Malaysia time (HH:mm format)
    const timeHM = time.substring(0, 5); // Get HH:mm from HH:mm:ss
    document.getElementById('checkInTime').value = timeHM;
}

// Update on page load
updateMalaysiaTime();

// Update every second
setInterval(updateMalaysiaTime, 1000);
</script>
@endsection