@extends('simaju.layouts.main')

@section('content')
<div class="mx-auto px-2 sm:px-4 max-w-4xl space-y-4 sm:space-y-6 pb-8">

    {{-- Header --}}
    <div class="rounded-xl border border-slate-200 bg-white p-4 sm:p-6">
        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
            <div>
                <h1 class="text-xl sm:text-2xl font-bold text-slate-900">Absensi Guru</h1>
                <p class="mt-1 text-xs sm:text-sm text-slate-500">{{ auth()->user()->guru->nama ?? auth()->user()->name }}</p>
            </div>
            <div class="text-left sm:text-right">
                <p class="text-xs sm:text-sm text-slate-500">{{ \Carbon\Carbon::now()->locale('id')->isoFormat('dddd, D MMMM YYYY') }}</p>
                <p class="text-xl sm:text-2xl font-bold text-indigo-600" id="current-time">--:--</p>
            </div>
        </div>

        <div class="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-3">
            <div class="rounded-lg bg-slate-50 p-3 text-center">
                <p class="text-xs text-slate-500">NIP</p>
                <p class="font-semibold text-slate-800 text-sm">{{ auth()->user()->guru->nip ?? '-' }}</p>
            </div>
            <div class="rounded-lg bg-slate-50 p-3 text-center">
                <p class="text-xs text-slate-500">Mapel</p>
                <p class="font-semibold text-slate-800 text-sm truncate">{{ auth()->user()->guru->mapel->nama ?? '-' }}</p>
            </div>
            <div class="rounded-lg bg-slate-50 p-3 text-center">
                <p class="text-xs text-slate-500">Status</p>
                <p class="font-semibold text-emerald-600 text-sm">Aktif</p>
            </div>
        </div>
    </div>

    {{-- Today's Status --}}
    <div class="rounded-xl border border-slate-200 bg-white p-4 sm:p-6">
        <h2 class="mb-4 text-base sm:text-lg font-semibold text-slate-900">Status Hari Ini</h2>

        @if($todayAttendance)
            <div class="grid gap-4 sm:grid-cols-2">
                <div class="rounded-xl border border-slate-200 bg-slate-50 p-4">
                    <div class="flex items-center gap-3">
                        <div class="flex h-10 w-10 items-center justify-center rounded-full {{ $todayAttendance->jam_masuk ? 'bg-emerald-100' : 'bg-slate-200' }}">
                            <span class="text-lg">📥</span>
                        </div>
                        <div>
                            <p class="text-xs sm:text-sm font-medium text-slate-500">Absensi Masuk</p>
                            <p class="text-base sm:text-lg font-semibold {{ $todayAttendance->jam_masuk ? 'text-emerald-600' : 'text-slate-400' }}">
                                {{ $todayAttendance->jam_masuk ? \Carbon\Carbon::parse($todayAttendance->jam_masuk)->format('H:i') : 'Belum Absen' }}
                            </p>
                        </div>
                    </div>
                    @if($todayAttendance && $todayAttendance->foto_masuk)
                        @php
                            $fotoMasukPath = '';
                            if ($todayAttendance->foto_masuk) {
                                if (file_exists(public_path('storage/' . $todayAttendance->foto_masuk))) {
                                    $fotoMasukPath = asset('storage/' . $todayAttendance->foto_masuk);
                                } elseif (file_exists(public_path('storage/absensi-guru/' . $todayAttendance->foto_masuk))) {
                                    $fotoMasukPath = asset('storage/absensi-guru/' . $todayAttendance->foto_masuk);
                                } elseif (file_exists(public_path($todayAttendance->foto_masuk))) {
                                    $fotoMasukPath = asset($todayAttendance->foto_masuk);
                                } else {
                                    $fotoMasukPath = Storage::url($todayAttendance->foto_masuk);
                                }
                            }
                        @endphp
                        @if($fotoMasukPath)
                        <div class="mt-3">
                            <img src="{{ $fotoMasukPath }}" alt="Foto Masuk" class="h-20 w-20 sm:h-24 sm:w-24 rounded-xl object-cover">
                        </div>
                        @endif
                    @endif
                </div>

                <div class="rounded-xl border border-slate-200 bg-slate-50 p-4">
                    <div class="flex items-center gap-3">
                        <div class="flex h-10 w-10 items-center justify-center rounded-full {{ $todayAttendance->jam_pulang ? 'bg-blue-100' : 'bg-slate-200' }}">
                            <span class="text-lg">📤</span>
                        </div>
                        <div>
                            <p class="text-xs sm:text-sm font-medium text-slate-500">Absensi Pulang</p>
                            <p class="text-base sm:text-lg font-semibold {{ $todayAttendance->jam_pulang ? 'text-blue-600' : 'text-slate-400' }}">
                                {{ $todayAttendance->jam_pulang ? \Carbon\Carbon::parse($todayAttendance->jam_pulang)->format('H:i') : 'Belum Absen' }}
                            </p>
                        </div>
                    </div>
                    @if($todayAttendance && $todayAttendance->foto_pulang)
                        @php
                            $fotoPulangPath = '';
                            if (file_exists(public_path('storage/' . $todayAttendance->foto_pulang))) {
                                $fotoPulangPath = asset('storage/' . $todayAttendance->foto_pulang);
                            } elseif (file_exists(public_path('storage/absensi-guru/' . $todayAttendance->foto_pulang))) {
                                $fotoPulangPath = asset('storage/absensi-guru/' . $todayAttendance->foto_pulang);
                            } elseif (file_exists(public_path($todayAttendance->foto_pulang))) {
                                $fotoPulangPath = asset($todayAttendance->foto_pulang);
                            } else {
                                $fotoPulangPath = Storage::url($todayAttendance->foto_pulang);
                            }
                        @endphp
                        @if(!empty($fotoPulangPath))
                        <div class="mt-3">
                            <img src="{{ $fotoPulangPath }}" alt="Foto Pulang" class="h-20 w-20 sm:h-24 sm:w-24 rounded-xl object-cover">
                        </div>
                        @endif
                    @endif
                </div>
            </div>
        @else
            <div class="flex items-center justify-center rounded-xl bg-slate-50 p-6 sm:p-8">
                <div class="text-center">
                    <span class="text-3xl sm:text-4xl">📋</span>
                    <p class="mt-2 text-slate-500 text-sm">Belum ada data absensi hari ini</p>
                </div>
            </div>
        @endif
    </div>

    {{-- Action Buttons --}}
    <div class="grid gap-4 sm:grid-cols-2">
        <div class="rounded-xl border border-slate-200 bg-white p-4 sm:p-6">
            <h3 class="mb-3 sm:mb-4 text-base sm:text-lg font-semibold text-slate-900">📥 Absensi Masuk</h3>
            @if(!$todayAttendance || !$todayAttendance->jam_masuk)
                <button type="button" onclick="openCameraModal('checkIn')" class="w-full rounded-xl bg-emerald-600 px-4 py-3 font-semibold text-white transition hover:bg-emerald-700 text-sm sm:text-base">
                    😊 Ambil Foto & Absen Masuk
                </button>
            @else
                <div class="flex items-center justify-center rounded-xl bg-emerald-50 p-3 sm:p-4 text-emerald-700 text-sm">
                    <span class="mr-2">✓</span> Sudah Absen Masuk
                </div>
            @endif
        </div>

        <div class="rounded-xl border border-slate-200 bg-white p-4 sm:p-6">
            <h3 class="mb-3 sm:mb-4 text-base sm:text-lg font-semibold text-slate-900">📤 Absensi Pulang</h3>
            @if($todayAttendance && $todayAttendance->jam_masuk && !$todayAttendance->jam_pulang)
                <button type="button" onclick="openCameraModal('checkOut')" class="w-full rounded-xl bg-blue-600 px-4 py-3 font-semibold text-white transition hover:bg-blue-700 text-sm sm:text-base">
                    😊 Ambil Foto & Absen Pulang
                </button>
            @else
                <div class="flex items-center justify-center rounded-xl bg-slate-100 p-3 sm:p-4 text-slate-500 text-sm">
                    {{ $todayAttendance && $todayAttendance->jam_pulang ? 'Sudah Absen Pulang' : 'Absen masuk terlebih dahulu' }}
                </div>
            @endif
        </div>
    </div>

    {{-- Monthly Stats --}}
    <div class="rounded-xl border border-slate-200 bg-white p-4 sm:p-6">
        <h2 class="mb-4 text-base sm:text-lg font-semibold text-slate-900">Statistik Bulan Ini</h2>
        <div class="grid grid-cols-4 gap-2 sm:gap-4">
            <div class="rounded-xl bg-emerald-50 p-2 sm:p-4 text-center">
                <p class="text-xl sm:text-3xl font-bold text-emerald-600">{{ $monthlyStats['hadir'] ?? 0 }}</p>
                <p class="text-xs text-emerald-700">Hadir</p>
            </div>
            <div class="rounded-xl bg-amber-50 p-2 sm:p-4 text-center">
                <p class="text-xl sm:text-3xl font-bold text-amber-600">{{ $monthlyStats['terlambat'] ?? 0 }}</p>
                <p class="text-xs text-amber-700">Terlambat</p>
            </div>
            <div class="rounded-xl bg-blue-50 p-2 sm:p-4 text-center">
                <p class="text-xl sm:text-3xl font-bold text-blue-600">{{ $monthlyStats['izin'] ?? 0 }}</p>
                <p class="text-xs text-blue-700">Izin</p>
            </div>
            <div class="rounded-xl bg-red-50 p-2 sm:p-4 text-center">
                <p class="text-xl sm:text-3xl font-bold text-red-600">{{ $monthlyStats['alpha'] ?? 0 }}</p>
                <p class="text-xs text-red-700">Alpha</p>
            </div>
        </div>
    </div>

    {{-- Recent Attendance --}}
    <div class="rounded-xl border border-slate-200 bg-white p-4 sm:p-6">
        <h2 class="mb-4 text-base sm:text-lg font-semibold text-slate-900">Riwayat 7 Hari Terakhir</h2>
        <div class="overflow-x-auto -mx-4 sm:mx-0">
            <table class="w-full min-w-[500px]">
                <thead class="bg-slate-50">
                    <tr>
                        <th class="px-4 py-2 text-left text-xs font-semibold uppercase text-slate-500">Tanggal</th>
                        <th class="px-4 py-2 text-left text-xs font-semibold uppercase text-slate-500">Masuk</th>
                        <th class="px-4 py-2 text-left text-xs font-semibold uppercase text-slate-500">Pulang</th>
                        <th class="px-4 py-2 text-left text-xs font-semibold uppercase text-slate-500">Status</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($recentAttendances as $attendance)
                        <tr class="hover:bg-slate-50">
                            <td class="px-4 py-2 text-sm">{{ \Carbon\Carbon::parse($attendance->tanggal)->locale('id')->isoFormat('ddd, D MMM') }}</td>
                            <td class="px-4 py-2 text-sm">{{ $attendance->jam_masuk ? \Carbon\Carbon::parse($attendance->jam_masuk)->format('H:i') : '-' }}</td>
                            <td class="px-4 py-2 text-sm">{{ $attendance->jam_pulang ? \Carbon\Carbon::parse($attendance->jam_pulang)->format('H:i') : '-' }}</td>
                            <td class="px-4 py-2">
                                <span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium {{ $attendance->status_masuk == 'hadir' ? 'bg-green-100 text-green-800' : ($attendance->status_masuk == 'terlambat' ? 'bg-yellow-100 text-yellow-800' : 'bg-blue-100 text-blue-800') }}">
                                    {{ ucfirst($attendance->status_masuk) }}
                                </span>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="px-4 py-6 text-center text-slate-500 text-sm">Tidak ada data absensi.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- Camera Modal --}}
<div id="cameraModal" class="fixed inset-0 z-50 hidden bg-black/80 overflow-y-auto">
    <div class="flex min-h-screen items-center justify-center p-2 sm:p-4">
        <div class="w-full max-w-md rounded-2xl bg-white shadow-2xl">
            {{-- Header --}}
            <div class="flex items-center justify-between border-b border-slate-200 px-4 py-3 sm:px-6 sm:py-4">
                <div>
                    <h3 class="text-base sm:text-lg font-semibold text-slate-900" id="modalTitle">📷 Absensi</h3>
                    <p class="text-xs sm:text-sm text-slate-500">Arahkan wajah ke kamera</p>
                </div>
                <button type="button" onclick="closeCameraModal()" class="rounded-lg p-2 text-slate-400 hover:bg-slate-100">
                    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>

            {{-- Camera --}}
            <div class="p-3 sm:p-6">
                <div class="relative overflow-hidden rounded-xl bg-gray-900" style="aspect-ratio: 4/3;" id="cameraBox">
                    <video id="video" autoplay playsinline muted class="absolute inset-0 h-full w-full object-cover"></video>
                    <canvas id="canvas" class="hidden"></canvas>

                    {{-- Guide Frame --}}
                    <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
                        <div id="faceGuide" class="w-32 h-32 sm:w-40 sm:h-40 border-4 border-dashed border-white/50 rounded-2xl"></div>
                    </div>

                    {{-- Status --}}
                    <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3 sm:p-4">
                        <div class="flex items-center gap-2 sm:gap-3">
                            <div id="statusDot" class="h-2 w-2 sm:h-3 sm:w-3 rounded-full bg-yellow-400 animate-pulse"></div>
                            <span class="text-xs sm:text-sm text-white" id="statusText">Memuat kamera...</span>
                        </div>
                    </div>

                    {{-- Loading --}}
                    <div id="loadingOverlay" class="absolute inset-0 flex items-center justify-center bg-gray-900">
                        <div class="text-center">
                            <div class="mx-auto h-10 w-10 sm:h-12 sm:w-12 animate-spin rounded-full border-4 border-white/20 border-t-white"></div>
                            <p class="mt-3 text-xs sm:text-sm text-white">Memuat kamera...</p>
                        </div>
                    </div>

                    {{-- Error --}}
                    <div id="errorOverlay" class="absolute inset-0 hidden flex-col items-center justify-center bg-red-900">
                        <p class="text-4xl sm:text-5xl">📷</p>
                        <p class="mt-3 font-semibold text-white text-sm" id="errorMsg">Kamera tidak tersedia</p>
                        <button onclick="initCamera()" class="mt-4 rounded-lg bg-white/20 px-4 py-2 text-sm text-white hover:bg-white/30">
                            🔄 Coba Lagi
                        </button>
                    </div>
                </div>

                {{-- Hidden inputs --}}
                <input type="hidden" id="attendanceType" value="">
                <input type="hidden" id="capturedPhoto" value="">
                <input type="hidden" id="latitude" value="">
                <input type="hidden" id="longitude" value="">

                {{-- Capture Button --}}
                <button type="button" id="captureBtn" onclick="capturePhoto()" class="mt-3 sm:mt-4 w-full rounded-xl bg-indigo-600 px-4 py-3 sm:py-4 font-semibold text-white transition hover:bg-indigo-700 text-sm sm:text-base">
                    📷 Ambil Foto Sekarang
                </button>

                <div id="errorMsg2" class="mt-3 hidden rounded-lg bg-red-50 p-3 text-xs sm:text-sm text-red-600"></div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.10.0/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/blazeface@0.1.0/dist/blazeface.min.js"></script>

<script>
let stream = null;
let currentType = '';
let detector = null;
let videoEl = null;
let canvasEl = null;
let ctx2d = null;
let capturing = false;
let cameraActive = false;
let faceFound = false;
let gpsValidated = false;
let userLatitude = null;
let userLongitude = null;

// School location from backend
const SCHOOL_LAT = {{ $schoolLocation['lat'] ?? -5.30134 }};
const SCHOOL_LNG = {{ $schoolLocation['lng'] ?? 122.29880 }};
const SCHOOL_RADIUS = {{ $schoolLocation['radius'] ?? 100 }}; // meters

const $ = id => document.getElementById(id);

function startClock() {
    function update() {
        const now = new Date();
        $('current-time').textContent = now.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
    }
    update();
    setInterval(update, 1000);
}
startClock();

async function loadDetector() {
    try {
        console.log('Loading face detector...');
        detector = await blazeface.load();
        console.log('Detector loaded!');
    } catch (e) {
        console.error('Failed to load detector:', e);
    }
}
loadDetector();

function openCameraModal(type) {
    currentType = type;
    $('attendanceType').value = type;
    $('modalTitle').textContent = type === 'checkIn' ? '📥 Absensi Masuk' : '📤 Absensi Pulang';

    $('cameraModal').classList.remove('hidden');
    $('cameraModal').style.overflow = 'auto';
    document.body.style.overflow = 'hidden';

    $('errorMsg2').classList.add('hidden');
    $('capturedPhoto').value = '';

    getLocation();
    initCamera();
}

function closeCameraModal() {
    $('cameraModal').classList.add('hidden');
    document.body.style.overflow = '';
    stopCamera();
}

async function initCamera() {
    $('loadingOverlay').classList.remove('hidden');
    $('loadingOverlay').style.display = 'flex';
    $('errorOverlay').classList.add('hidden');
    $('errorOverlay').style.display = 'none';
    $('statusDot').className = 'h-2 w-2 sm:h-3 sm:w-3 rounded-full bg-yellow-400 animate-pulse';
    $('statusText').textContent = 'Meminta izin kamera...';

    stopCamera();
    videoEl = $('video');
    canvasEl = $('canvas');
    ctx2d = canvasEl.getContext('2d');

    try {
        stream = await navigator.mediaDevices.getUserMedia({
            video: { facingMode: 'user', width: { ideal: 640, max: 1280 }, height: { ideal: 480, max: 720 } },
            audio: false
        });

        videoEl.srcObject = stream;

        await new Promise((resolve, reject) => {
            if (videoEl.readyState >= 2) {
                resolve();
            } else {
                videoEl.onloadedmetadata = () => resolve();
                videoEl.onerror = () => reject(new Error('Video error'));
            }
        });

        await videoEl.play();

        cameraActive = true;
        $('loadingOverlay').style.display = 'none';
        $('statusDot').className = 'h-2 w-2 sm:h-3 sm:w-3 rounded-full bg-green-500';
        $('statusText').textContent = 'Kamera aktif';

        detectLoop();

    } catch (err) {
        console.error('Camera error:', err);
        $('loadingOverlay').style.display = 'none';
        $('errorOverlay').classList.remove('hidden');
        $('errorOverlay').style.display = 'flex';
        $('statusDot').className = 'h-2 w-2 sm:h-3 sm:w-3 rounded-full bg-red-500';
        $('statusText').textContent = 'Kamera gagal';

        if (err.name === 'NotAllowedError') {
            $('errorMsg').textContent = 'Izin kamera ditolak. Izinkan dan klik Coba Lagi.';
        } else if (err.name === 'NotFoundError') {
            $('errorMsg').textContent = 'Kamera tidak ditemukan.';
        } else if (err.name === 'NotReadableError') {
            $('errorMsg').textContent = 'Kamera digunakan aplikasi lain.';
        } else {
            $('errorMsg').textContent = 'Tidak dapat mengakses kamera.';
        }
    }
}

function stopCamera() {
    cameraActive = false;
    if (stream) {
        stream.getTracks().forEach(t => t.stop());
        stream = null;
    }
    if (videoEl) {
        videoEl.pause();
        videoEl.srcObject = null;
    }
}

async function detectLoop() {
    if (!cameraActive || !detector || !videoEl) return;
    if (videoEl.readyState < 2) {
        setTimeout(detectLoop, 200);
        return;
    }

    try {
        const predictions = await detector.estimateFaces(videoEl, false);

        if (predictions.length > 0) {
            if (!faceFound) {
                faceFound = true;
                $('faceGuide').className = 'w-32 h-32 sm:w-40 sm:h-40 border-4 border-dashed border-green-400 rounded-2xl';
                $('statusText').textContent = '✅ Wajah terdeteksi!';
            }
        } else {
            if (faceFound) {
                faceFound = false;
                $('faceGuide').className = 'w-32 h-32 sm:w-40 sm:h-40 border-4 border-dashed border-white/50 rounded-2xl';
                $('statusText').textContent = 'Arahkan wajah ke kamera';
            }
        }
    } catch (e) {
        console.error('Detection error:', e);
    }

    if (cameraActive) {
        setTimeout(detectLoop, 200);
    }
}

function calculateDistance(lat1, lng1, lat2, lng2) {
    const earthRadius = 6371000; // meters
    const dLat = (lat2 - lat1) * Math.PI / 180;
    const dLng = (lng2 - lng1) * Math.PI / 180;
    
    const a = Math.sin(dLat/2) * Math.sin(dLat/2) +
              Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
              Math.sin(dLng/2) * Math.sin(dLng/2);
    
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    return earthRadius * c;
}

function getLocation() {
    $('latitude').value = '';
    $('longitude').value = '';
    gpsValidated = false;

    if (!navigator.geolocation) {
        showError('Browser tidak mendukung GPS');
        return;
    }

    navigator.geolocation.getCurrentPosition(
        pos => {
            userLatitude = pos.coords.latitude;
            userLongitude = pos.coords.longitude;
            
            $('latitude').value = userLatitude;
            $('longitude').value = userLongitude;

            // Calculate distance from school
            const distance = calculateDistance(SCHOOL_LAT, SCHOOL_LNG, userLatitude, userLongitude);
            const distanceText = distance < 1000 
                ? Math.round(distance) + ' meter' 
                : (distance/1000).toFixed(2) + ' km';
            
            if (distance <= SCHOOL_RADIUS) {
                gpsValidated = true;
                console.log('GPS OK: dalam radius sekolah');
            } else {
                gpsValidated = false;
                showError(`⚠️ Anda berada diluar radius sekolah!\nJarak: ${distanceText} (Maksimal: ${SCHOOL_RADIUS}m)\n\nSilakan datang ke sekolah untuk melakukan absensi.`);
                
                // Disable capture button
                const captureBtn = $('captureBtn');
                if (captureBtn) {
                    captureBtn.disabled = true;
                    captureBtn.classList.add('opacity-50', 'cursor-not-allowed');
                }
            }
        },
        (error) => {
            gpsValidated = false;
            let errorMsg = 'GPS gagal';
            if (error.code === 1) {
                errorMsg = '❌ Izin GPS ditolak.\n\nSilakan izinkan akses lokasi di browser Anda untuk melakukan absensi.';
            } else if (error.code === 2) {
                errorMsg = '❌ Lokasi tidak tersedia.\n\nPastikan GPS/Lokasi aktif di perangkat Anda.';
            } else if (error.code === 3) {
                errorMsg = '❌ Timeout mendapatkan lokasi.\n\nCoba lagi atau periksa koneksi GPS Anda.';
            }
            showError(errorMsg);
            
            // Disable capture button
            const captureBtn = $('captureBtn');
            if (captureBtn) {
                captureBtn.disabled = true;
                captureBtn.classList.add('opacity-50', 'cursor-not-allowed');
            }
        },
        { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
    );
}

function showError(msg) {
    $('errorMsg2').textContent = msg;
    $('errorMsg2').classList.remove('hidden');
}

function capturePhoto() {
    if (capturing) return;

    if (!cameraActive || !videoEl) {
        showError('Kamera belum aktif. Tunggu sebentar atau klik Coba Lagi.');
        return;
    }

    // Check GPS validation
    if (!gpsValidated) {
        showError('⚠️ GPS belum tervalidasi atau Anda berada diluar radius sekolah.\n\nSilakan pastikan Anda berada di area sekolah untuk melakukan absensi.');
        return;
    }

    capturing = true;
    const btn = $('captureBtn');
    btn.disabled = true;
    btn.innerHTML = '⏳ Mengambil foto...';

    try {
        const w = videoEl.videoWidth;
        const h = videoEl.videoHeight;

        if (w === 0 || h === 0) {
            throw new Error('Video belum siap');
        }

        canvasEl.width = w;
        canvasEl.height = h;
        const ctx = canvasEl.getContext('2d');

        ctx.translate(w, 0);
        ctx.scale(-1, 1);
        ctx.drawImage(videoEl, 0, 0, w, h);

        const dataUrl = canvasEl.toDataURL('image/jpeg', 0.7);
        const base64 = dataUrl.split(',')[1];

        $('capturedPhoto').value = base64;
        btn.innerHTML = '⏳ Mengirim...';

        stopCamera();
        submitAttendance();

    } catch (err) {
        console.error('Capture error:', err);
        showError('Gagal mengambil foto: ' + err.message);
        btn.disabled = false;
        btn.innerHTML = '📷 Ambil Foto Sekarang';
        capturing = false;
    }
}

async function submitAttendance() {
    const photo = $('capturedPhoto').value;
    const lat = $('latitude').value;
    const lng = $('longitude').value;
    const type = $('attendanceType').value;

    if (!photo) {
        showError('Foto belum berhasil diambil.');
        resetCaptureBtn();
        return;
    }

    try {
        const endpoint = type === 'checkIn'
            ? '{{ route("simaju.api-check-in") }}'
            : '{{ route("simaju.api-check-out") }}';

        const formData = new FormData();
        formData.append('photo', photo);
        formData.append('latitude', lat || '');
        formData.append('longitude', lng || '');

        const response = await fetch(endpoint, {
            method: 'POST',
            credentials: 'same-origin',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            },
            body: formData
        });

        const data = await response.json();

        if (data.success) {
            closeCameraModal();
            window.location.reload();
        } else {
            showError(data.message || 'Absensi gagal.');
            resetCaptureBtn();
            initCamera();
        }

    } catch (err) {
        console.error('Submit error:', err);
        showError('Terjadi kesalahan: ' + err.message);
        resetCaptureBtn();
        initCamera();
    }
}

function resetCaptureBtn() {
    const btn = $('captureBtn');
    btn.disabled = false;
    btn.innerHTML = '📷 Ambil Foto Sekarang';
    capturing = false;
}

document.addEventListener('keydown', e => {
    if (e.key === 'Escape' && !$('cameraModal').classList.contains('hidden')) {
        closeCameraModal();
    }
});

$('cameraModal').addEventListener('click', e => {
    if (e.target.id === 'cameraModal') closeCameraModal();
});
</script>

<style>
    #video { transform: scaleX(-1); -webkit-transform: scaleX(-1); }
    #cameraModal { overscroll-behavior: contain; }
</style>
@endpush