@extends('layouts.app')

@section('title', 'Absensi Pegawai')

@section('content')
<div class="min-h-screen flex flex-col items-center justify-center p-4 relative">

    <!-- Background Decoration -->
    <div class="absolute top-0 left-0 w-full h-64 bg-gradient-to-b from-emerald-100 to-transparent -z-10"></div>

    <!-- Header User -->
    <div class="w-full max-w-md flex justify-between items-center mb-6">
        <div>
            <h2 class="text-2xl font-bold text-gray-800">Halo, {{ Session::get('nama') }} 👋</h2>
            <p class="text-sm text-gray-500" id="live-date">Senin, 1 Jan 2024</p>
        </div>
        <form action="{{ route('logout') }}" method="POST" class="inline">
        @csrf
            <button type="submit" class="bg-red-50 text-red-500 p-2 rounded-full hover:bg-red-100 transition cursor-pointer border-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
                </svg>
            </button>
        </form>
    </div>

    <!-- Jam Digital -->
    <div class="text-6xl font-bold text-emerald-600 mb-2 tracking-tight" id="live-clock">00:00:00</div>
    <div class="text-sm font-medium text-gray-500 mb-8 bg-white/60 px-4 py-1 rounded-full backdrop-blur-sm border border-white shadow-sm" id="live-status">
        Menunggu aksi...
    </div>

    <!-- Area Kamera (Card) -->
    <div class="w-full max-w-md bg-white rounded-3xl shadow-xl border border-gray-100 overflow-hidden mb-6 relative">
        <!-- Video Element (Hidden, hanya untuk stream) -->
        <video id="video" autoplay playsinline class="hidden"></video>

        <!-- Canvas (Untuk capture gambar) -->
        <canvas id="canvas" class="w-full h-80 bg-gray-900 object-cover hidden"></canvas>

        <!-- Placeholder jika kamera belum aktif -->
        <div id="camera-placeholder" class="w-full h-80 bg-gray-100 flex flex-col items-center justify-center text-gray-400">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mb-4 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
            <p>Kamera belum aktif</p>
        </div>

        <!-- Preview Gambar Hasil Capture -->
        <img id="photo-preview" class="w-full h-80 object-cover hidden">
    </div>

    <!-- Info Status Absensi Hari Ini -->
    @if($attendance)
    <div class="w-full max-w-md mb-4 p-4 rounded-2xl bg-white border border-gray-100 shadow-sm flex justify-between items-center text-sm">
        <div class="text-center flex-1 border-r border-gray-100">
            <p class="text-xs text-gray-400 uppercase">Masuk</p>
            <p class="font-bold text-emerald-600">{{ $attendance->waktu_masuk ?? '-' }}</p>
        </div>
        <div class="text-center flex-1">
            <p class="text-xs text-gray-400 uppercase">Pulang</p>
            <p class="font-bold text-blue-600">{{ $attendance->waktu_pulang ?? '-' }}</p>
        </div>
    </div>
    @endif

    <!-- Tombol Aksi -->
    <div class="w-full max-w-md grid grid-cols-2 gap-4">
        <button id="btn-start-camera" onclick="startCamera()" class="col-span-2 bg-gray-800 hover:bg-gray-900 text-white font-bold py-4 rounded-2xl shadow-lg transition-all flex items-center justify-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
            Buka Kamera
        </button>

        <button id="btn-capture" onclick="takeSnapshot()" class="hidden bg-emerald-500 hover:bg-emerald-600 text-white font-bold py-4 rounded-2xl shadow-lg shadow-emerald-200 transition-all">
            Ambil Foto
        </button>

        <button id="btn-retake" onclick="startCamera()" class="hidden bg-gray-500 hover:bg-gray-600 text-white font-bold py-4 rounded-2xl shadow-lg transition-all">
            Ulangi
        </button>

        <button id="btn-send" onclick="sendAttendance()" class="hidden col-span-2 bg-primary hover:bg-secondary text-white font-bold py-4 rounded-2xl shadow-lg shadow-green-200 transition-all transform hover:-translate-y-1">
            Kirim Absensi
        </button>
    </div>

</div>

@push('scripts')
<script>
    let video, canvas, ctx, photoPreview, stream;
    let currentLat, currentLng, currentAcc;

    // Inisialisasi Element
    window.onload = function() {
        video = document.getElementById('video');
        canvas = document.getElementById('canvas');
        ctx = canvas.getContext('2d');
        photoPreview = document.getElementById('photo-preview');
        updateClock();
        setInterval(updateClock, 1000);

        // Cek status awal
        @if($attendance && $attendance->waktu_pulang)
            document.getElementById('live-status').innerText = "Absensi hari ini selesai. Terima kasih!";
            document.getElementById('live-status').className = "text-sm font-medium text-emerald-600 mb-8 bg-emerald-50 px-4 py-1 rounded-full backdrop-blur-sm border border-emerald-100 shadow-sm";
        @endif
    };

    // Update Jam
    function updateClock() {
        const now = new Date();
        const timeString = now.toLocaleTimeString('id-ID', { hour12: false });
        document.getElementById('live-clock').innerText = timeString;

        const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
        document.getElementById('live-date').innerText = now.toLocaleDateString('id-ID', options);
    }

    // Mulai Kamera & Lokasi
    async function startCamera() {
        try {
            stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" }, audio: false });
            video.srcObject = stream;
            video.play();

            // UI Updates
            document.getElementById('camera-placeholder').classList.add('hidden');
            document.getElementById('photo-preview').classList.add('hidden');
            video.classList.remove('hidden');

            document.getElementById('btn-start-camera').classList.add('hidden');
            document.getElementById('btn-capture').classList.remove('hidden');
            document.getElementById('btn-retake').classList.add('hidden');
            document.getElementById('btn-send').classList.add('hidden');

            // Ambil Lokasi Sekali Saat Kamera Dibuka
            getLocation();

        } catch (err) {
            alert("Tidak dapat mengakses kamera. Pastikan izin diberikan.");
            console.error(err);
        }
    }

    // Ambil Foto
    function takeSnapshot() {
        if (!stream) return;

        // Set ukuran canvas sesuai video
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;

        // Gambar video ke canvas
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

        // Stop stream ( hemat baterai)
        stream.getTracks().forEach(track => track.stop());

        // Tampilkan Hasil
        const dataUrl = canvas.toDataURL('image/jpeg');
        photoPreview.src = dataUrl;

        video.classList.add('hidden');
        photoPreview.classList.remove('hidden');

        // Tombol Update
        document.getElementById('btn-capture').classList.add('hidden');
        document.getElementById('btn-retake').classList.remove('hidden');
        document.getElementById('btn-send').classList.remove('hidden');
    }

    // Ambil Lokasi
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                (position) => {
                    currentLat = position.coords.latitude;
                    currentLng = position.coords.longitude;
                    currentAcc = position.coords.accuracy;

                    document.getElementById('live-status').innerText = "Lokasi Terkunci (Akurasi: " + Math.round(currentAcc) + "m)";
                },
                (error) => {
                    alert("Gagal mengambil lokasi. Pastikan GPS aktif.");
                    document.getElementById('live-status').innerText = "Gagal mengambil Lokasi";
                }
            );
        } else {
            alert("Browser tidak mendukung Geolocation.");
        }
    }

    // Kirim Data
    function sendAttendance() {
        if (!currentLat || !currentLng) {
            alert("Lokasi belum terdeteksi. Coba refresh halaman.");
            return;
        }

        const photoData = canvas.toDataURL('image/jpeg'); // Ambil base64 dari canvas
        const clientTime = new Date().toISOString(); // Waktu client untuk referensi (walau server yang menentukan)

        document.getElementById('btn-send').innerText = "Mengirim...";
        document.getElementById('btn-send').disabled = true;

        // Kirim via AJAX/Fetch
        fetch("{{ route('employee.attendance.store') }}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json",
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            },
            body: JSON.stringify({
                photo: photoData,
                latitude: currentLat,
                longitude: currentLng,
                accuracy: currentAcc,
                client_time: clientTime
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                alert(data.message);
                location.reload(); // Reload untuk update status
            } else {
                alert(data.message);
                document.getElementById('btn-send').innerText = "Kirim Absensi";
                document.getElementById('btn-send').disabled = false;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert("Terjadi kesalahan koneksi.");
            document.getElementById('btn-send').innerText = "Kirim Absensi";
            document.getElementById('btn-send').disabled = false;
        });
    }
</script>
@endpush
@endsection