@extends('layouts.employee')

@php($isIn = $mode === 'check-in')
@section('title', $isIn ? 'Check In' : 'Check Out')

@section('content')
<div class="split" style="align-items:flex-start">
    <div>
        <h1 class="employee-page-title">{{ $isIn ? 'Check In' : 'Check Out' }}</h1>
        <p class="employee-page-lead">Ambil lokasi dan selfie sebagai bukti kehadiran.</p>
    </div>
    <a class="btn btn-ghost btn-sm" href="{{ route('employee.home') }}"><i data-lucide="x"></i></a>
</div>

@if(!$assignment)
    <div class="flash flash-error">Jadwal aktif tidak ditemukan. Hubungi HRD sebelum melakukan absensi.</div>
@else
    <form class="stack" id="attendanceForm" method="post" enctype="multipart/form-data" action="{{ $isIn ? route('employee.attendance.checkin.submit') : route('employee.attendance.checkout.submit') }}">
        @csrf
        <input type="hidden" name="capture_token" value="{{ $captureToken }}"><input type="hidden" name="capture_source" value="live_camera"><input type="hidden" name="captured_at" id="capturedAt">
        <div class="info-panel">
            <div class="info-row">
                <span class="row-icon"><i data-lucide="briefcase"></i></span>
                <span class="row-main"><strong>{{ $assignment->shift->name }}</strong><span class="row-meta">{{ substr($assignment->shift->start_time, 0, 5) }} - {{ substr($assignment->shift->end_time, 0, 5) }}</span></span>
            </div>
            <div class="info-row">
                <span class="row-icon"><i data-lucide="map-pin"></i></span>
                <span class="row-main"><strong>{{ $assignment->workLocation->name }}</strong><span class="row-meta">Radius {{ $assignment->workLocation->radius_meter }} meter</span></span>
            </div>
        </div>

        <div class="gps-panel">
            <div class="split"><strong>Verifikasi GPS</strong><button type="button" id="gpsButton" class="btn btn-ghost btn-sm"><i data-lucide="locate-fixed"></i> Ambil Lokasi</button></div>
            <div class="gps-readout" id="gpsReadout" style="margin-top:14px"><span class="muted">Menunggu izin lokasi...</span></div>
            <input type="hidden" name="latitude" id="latitude"><input type="hidden" name="longitude" id="longitude"><input type="hidden" name="accuracy" id="accuracy">
        </div>

        <div class="card card-body">
            <div class="split" style="margin-bottom:14px"><strong>Selfie Kehadiran</strong><span class="badge approved"><i data-lucide="shield-check"></i> Kamera langsung</span></div>
            <div class="camera-box">
                <video id="camera" playsinline autoplay muted class="hidden"></video>
                <img id="preview" class="hidden" alt="Preview selfie">
                <div id="cameraEmpty" style="text-align:center"><i data-lucide="camera" style="width:42px;height:42px;color:var(--gold)"></i><p>Aktifkan kamera lalu ambil selfie</p></div>
            </div>
            <div class="camera-controls">
                <button type="button" class="btn btn-ghost" id="startCamera"><i data-lucide="video"></i> Aktifkan Kamera</button>
                <button type="button" class="btn btn-gold hidden" id="capturePhoto"><i data-lucide="camera"></i> Ambil Foto</button>
            </div>
            <input class="hidden" id="photoInput" type="file" name="photo" accept="image/jpeg" tabindex="-1" required aria-hidden="true">
            <p class="tiny muted" style="text-align:center;margin:12px 0 0">Untuk menjaga keaslian bukti, foto hanya dapat diambil saat ini melalui kamera depan. Galeri perangkat tidak tersedia.</p>
            <canvas id="canvas" class="hidden"></canvas>
        </div>

        <div class="field"><label>Catatan (opsional)</label><textarea class="control" name="notes" placeholder="Tambahkan informasi bila diperlukan"></textarea></div>
        <button class="attendance-cta" id="submitButton" disabled><i data-lucide="{{ $isIn ? 'log-in' : 'log-out' }}"></i> Kirim {{ $isIn ? 'Check In' : 'Check Out' }}</button>
        <p class="tiny muted" style="text-align:center">Dengan mengirim, Anda menyetujui penyimpanan lokasi, waktu, dan foto sebagai bukti kehadiran.</p>
    </form>
@endif
@endsection

@if($assignment)
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
    const target = { lat: {{ $assignment->workLocation->latitude }}, lon: {{ $assignment->workLocation->longitude }}, radius: {{ $assignment->workLocation->radius_meter }} };
    const gpsBtn = document.getElementById('gpsButton');
    const readout = document.getElementById('gpsReadout');
    const lat = document.getElementById('latitude');
    const lon = document.getElementById('longitude');
    const acc = document.getElementById('accuracy');
    const submit = document.getElementById('submitButton');
    const photo = document.getElementById('photoInput');
    const video = document.getElementById('camera');
    const preview = document.getElementById('preview');
    const empty = document.getElementById('cameraEmpty');
    const start = document.getElementById('startCamera');
    const capture = document.getElementById('capturePhoto');
    const canvas = document.getElementById('canvas');
    const capturedAt = document.getElementById('capturedAt');
    let stream = null;
    const update = () => { submit.disabled = !(lat.value && lon.value && photo.files.length); };
    const distance = (a, b, c, d) => {
        const radius = 6371000, x = (c-a)*Math.PI/180, y = (d-b)*Math.PI/180;
        const value = Math.sin(x/2)**2 + Math.cos(a*Math.PI/180)*Math.cos(c*Math.PI/180)*Math.sin(y/2)**2;
        return Math.round(radius * 2 * Math.atan2(Math.sqrt(value), Math.sqrt(1-value)));
    };
    const gps = () => {
        if (!navigator.geolocation) { readout.innerHTML = '<strong>GPS tidak didukung browser.</strong>'; return; }
        gpsBtn.disabled = true; readout.innerHTML = '<span>Mengambil koordinat...</span>';
        navigator.geolocation.getCurrentPosition((position) => {
            lat.value = position.coords.latitude; lon.value = position.coords.longitude; acc.value = Math.round(position.coords.accuracy);
            const meters = distance(target.lat, target.lon, position.coords.latitude, position.coords.longitude), inside = meters <= target.radius;
            readout.innerHTML = '<strong style="color:'+(inside?'#198754':'#dc3545')+'">'+(inside?'Di dalam radius':'Di luar radius')+'</strong><span>Jarak '+meters+' meter • Akurasi ±'+Math.round(position.coords.accuracy)+' meter</span>';
            gpsBtn.disabled = false; update();
        }, (error) => { readout.innerHTML = '<strong style="color:#dc3545">Lokasi gagal diambil</strong><span>'+error.message+'</span>'; gpsBtn.disabled = false; }, { enableHighAccuracy: true, timeout: 15000, maximumAge: 0 });
    };
    gpsBtn.addEventListener('click', gps); gps();
    start.addEventListener('click', async () => {
        try { stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: { ideal:'user' }, width:{ideal:1280}, height:{ideal:960} }, audio: false }); video.srcObject = stream; video.classList.remove('hidden'); preview.classList.add('hidden'); empty.classList.add('hidden'); capture.classList.remove('hidden'); start.classList.add('hidden'); }
        catch (error) { alert('Kamera tidak dapat diakses. Aktifkan izin kamera pada browser untuk melanjutkan absensi.'); }
    });
    capture.addEventListener('click', () => {
        canvas.width = video.videoWidth; canvas.height = video.videoHeight; canvas.getContext('2d').drawImage(video, 0, 0);
        canvas.toBlob((blob) => {
            const file = new File([blob], 'selfie-{{ $mode }}.jpg', { type: 'image/jpeg' }), transfer = new DataTransfer(); transfer.items.add(file); photo.files = transfer.files;
            capturedAt.value = new Date().toISOString();
            preview.src = URL.createObjectURL(blob); preview.classList.remove('hidden'); video.classList.add('hidden'); stream?.getTracks().forEach(track => track.stop()); capture.classList.add('hidden'); start.classList.remove('hidden'); start.innerHTML = 'Ambil Ulang'; window.capIcons(); update();
        }, 'image/jpeg', .85);
    });
});
</script>
@endpush
@endif