@extends('layouts.app')
@section('content')
<div class="mb-4"><div class="text-danger small fw-bold">ABSENSI PEGAWAI</div><h1 class="page-title">Absen masuk & pulang</h1><p class="text-muted">Sistem otomatis menentukan tahap absensi berdasarkan data hari ini.</p></div>
<form method="POST" action="{{ route('attendance.store') }}" id="attendanceForm">@csrf<input type="hidden" name="photo_data" id="photoData"><input type="hidden" name="latitude" id="latitude"><input type="hidden" name="longitude" id="longitude"><input type="hidden" name="location_name" id="locationName"><input type="hidden" name="attendance_date" value="{{ today()->format('Y-m-d') }}"><div class="row g-4"><div class="col-lg-7"><div class="card p-3"><div class="camera-box"><video id="camera" autoplay playsinline></video><canvas id="snapshot" class="d-none"></canvas><div class="camera-overlay"></div><div class="camera-status" id="cameraStatus"><i class="bi bi-camera me-1"></i> Menyiapkan kamera...</div></div><div class="d-flex gap-2 mt-3"><button type="button" class="btn btn-outline-secondary" id="startCamera"><i class="bi bi-camera-video"></i> Buka kamera</button><button type="button" class="btn btn-danger flex-grow-1" id="captureButton" disabled><i class="bi bi-fingerprint"></i> <span id="captureLabel">Ambil foto</span></button></div></div></div><div class="col-lg-5"><div class="card p-3 mb-3"><label class="form-label fw-bold">Pegawai</label><select class="form-select" name="employee_id" id="employeeSelect" required>@foreach($employees as $employee)@php($todayAttendance = $employee->attendances->first())<option value="{{ $employee->id }}" data-check-in="{{ $todayAttendance?->check_in?->format('H:i') }}" data-check-out="{{ $todayAttendance?->check_out?->format('H:i') }}">{{ $employee->employee_code }} - {{ $employee->full_name }}</option>@endforeach</select><div class="alert alert-info small mt-3 mb-0" id="flowStatus">Pilih pegawai untuk melihat tahap absensi.</div><div class="border-top mt-3 pt-3"><div class="small text-muted">Waktu sekarang</div><h3 id="liveTime" class="mb-0">--:--:--</h3><div class="small text-muted">{{ now()->format('d F Y') }}</div></div></div><div class="card p-3"><div class="d-flex justify-content-between"><strong>Lokasi saat absen</strong><span id="locationState" class="badge bg-secondary">Mendeteksi</span></div><p id="locationText" class="small text-muted mt-2 mb-2">Izinkan akses lokasi browser.</p><div id="map" class="map"></div></div></div></div></form>
@endsection
@push('scripts')<script>let stream;let map=L.map('map').setView([3.595196,98.672226],15);L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{attribution:'&copy; OpenStreetMap'}).addTo(map);let marker=L.marker([3.595196,98.672226]).addTo(map);const video=document.getElementById('camera'),canvas=document.getElementById('snapshot'),capture=document.getElementById('captureButton'),status=document.getElementById('cameraStatus'),select=document.getElementById('employeeSelect'),flow=document.getElementById('flowStatus'),label=document.getElementById('captureLabel');let flowType='check_in';function updateFlow(){const option=select.options[select.selectedIndex],checkIn=option.dataset.checkIn,checkOut=option.dataset.checkOut;if(checkIn&&!checkOut){flowType='check_out';flow.className='alert alert-warning small mt-3 mb-0';flow.textContent=`Sudah absen masuk pukul ${checkIn}. Sekarang tahap absen pulang.`;label.textContent='Ambil foto & absen pulang';capture.disabled=!video.srcObject;}else if(checkIn&&checkOut){flowType='complete';flow.className='alert alert-success small mt-3 mb-0';flow.textContent=`Absensi lengkap: masuk ${checkIn}, pulang ${checkOut}. Tidak perlu absen lagi.`;label.textContent='Absensi sudah lengkap';capture.disabled=true;}else{flowType='check_in';flow.className='alert alert-info small mt-3 mb-0';flow.textContent='Belum ada absensi hari ini. Tahap berikutnya: absen masuk.';label.textContent='Ambil foto & absen masuk';capture.disabled=!video.srcObject;}}function clock(){document.getElementById('liveTime').textContent=new Date().toLocaleTimeString('id-ID')}setInterval(clock,1000);clock();async function startCamera(){try{stream=await navigator.mediaDevices.getUserMedia({video:{facingMode:'user'},audio:false});video.srcObject=stream;status.innerHTML='<i class="bi bi-circle-fill text-danger me-1"></i> Kamera aktif';updateFlow();}catch(e){status.textContent='Kamera tidak tersedia: '+e.message}}document.getElementById('startCamera').addEventListener('click',startCamera);if(navigator.mediaDevices?.getUserMedia)startCamera();select.addEventListener('change',updateFlow);navigator.geolocation.getCurrentPosition(position=>{let lat=position.coords.latitude,lon=position.coords.longitude;document.getElementById('latitude').value=lat;document.getElementById('longitude').value=lon;document.getElementById('locationName').value='Lokasi GPS pegawai';document.getElementById('locationState').className='badge bg-success';document.getElementById('locationState').textContent='Terdeteksi';document.getElementById('locationText').textContent=`${lat.toFixed(6)}, ${lon.toFixed(6)}`;map.setView([lat,lon],17);marker.setLatLng([lat,lon]);},()=>{document.getElementById('locationState').className='badge bg-warning text-dark';document.getElementById('locationState').textContent='Ditolak';});capture.addEventListener('click',()=>{if(flowType==='complete'){return}if(!video.videoWidth){alert('Kamera belum aktif.');return}if(!document.getElementById('latitude').value){alert('Lokasi belum terdeteksi. Izinkan lokasi terlebih dahulu.');return}canvas.width=video.videoWidth;canvas.height=video.videoHeight;canvas.getContext('2d').drawImage(video,0,0);document.getElementById('photoData').value=canvas.toDataURL('image/jpeg',.85);status.innerHTML='<i class="bi bi-check-circle-fill text-success me-1"></i> Foto siap disimpan';capture.disabled=true;document.getElementById('attendanceForm').submit()});</script>@endpush