@extends('layouts.app')

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

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

        <!-- Check-in Summary - Highlighted for Today -->
        <div class="mb-6 p-4 bg-yellow-50 border-2 border-yellow-400 rounded-lg shadow-md">
            <div class="flex items-center gap-2 mb-4">
                <h3 class="text-lg font-semibold text-yellow-900">🎯 TODAY'S ATTENDANCE</h3>
                <span class="inline-block px-3 py-1 bg-yellow-300 text-yellow-900 text-xs font-bold rounded-full">TODAY</span>
            </div>
            <div class="grid grid-cols-3 gap-4">
                <div class="bg-white p-3 rounded border border-yellow-200">
                    <p class="text-sm text-gray-600">Date</p>
                    <p class="text-lg font-semibold text-blue-700">{{ $attendance->attendance_date->format('M d, Y') }}</p>
                </div>
                <div class="bg-white p-3 rounded border border-yellow-200">
                    <p class="text-sm text-gray-600">Check-In Time</p>
                    <p class="text-lg font-semibold text-green-600">{{ $attendance->check_in_time->format('H:i') }}</p>
                </div>
                <div class="bg-white p-3 rounded border border-yellow-200">
                    <p class="text-sm text-gray-600">Malaysia Time Now</p>
                    <p class="text-lg font-semibold text-orange-600" id="malaysiaTimeNow">--:--:--</p>
                </div>
            </div>
        </div>

        <!-- Checkout Form -->
        <form action="{{ route('attendance.checkout', $attendance->id) }}" method="POST" class="space-y-4">
            @csrf

            <!-- Checkout Time -->
            <div>
                <label for="check_out_time" class="block text-sm font-medium text-gray-700 mb-1">
                    Check Out Time <span class="text-red-500">*</span>
                </label>
                <input type="time"
                       id="check_out_time"
                       name="check_out_time"
                       required
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 @error('check_out_time') border-red-500 @enderror"
                       value="">
                <p class="text-gray-500 text-sm mt-1">⏰ Auto-filled with Malaysia Time (HH:MM format)</p>
                @error('check_out_time')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Checkout Notes -->
            <div>
                <label for="checkout_notes" class="block text-sm font-medium text-gray-700 mb-1">
                    Notes <span class="text-gray-500">(Optional)</span>
                </label>
                <textarea id="checkout_notes"
                          name="checkout_notes"
                          rows="3"
                          placeholder="e.g., Completed tasks, handed over to next shift, etc."
                          class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 @error('checkout_notes') border-red-500 @enderror">{{ old('checkout_notes') }}</textarea>
                @error('checkout_notes')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
                <p class="text-gray-500 text-sm mt-1">Add any notes about your shift (optional)</p>
            </div>

            <!-- Info Box -->
            <div class="p-4 bg-green-50 border border-green-200 rounded-lg">
                <p class="text-green-800">
                    <strong>✓ Ready to check out?</strong><br>
                    Click the "Complete Checkout" button below to end your shift and record the checkout time in Malaysia Time.
                </p>
            </div>

            <!-- Action Buttons -->
            <div class="flex justify-end gap-3 mt-6 pt-4 border-t">
                <a href="{{ route('attendance.index') }}"
                   class="px-6 py-2 bg-gray-400 text-white font-medium rounded-lg hover:bg-gray-500 transition">
                    Cancel
                </a>
                <button type="submit"
                        class="px-6 py-2 bg-green-600 text-white font-medium rounded-lg hover:bg-green-700 transition">
                    ✓ Complete Checkout
                </button>
            </div>
        </form>
    </div>
</div>

<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());

    // Update Malaysia Time display
    document.getElementById('malaysiaTimeNow').textContent = time;

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

// Update on page load
updateMalaysiaTime();

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