@extends('layouts.app')

@section('title', 'Absen Masuk')
@section('page-title', 'Absensi Masuk (Check-In)')
@section('page-subtitle', 'Pastikan GPS aktif dan wajah Anda terlihat jelas pada kamera sebelum menekan tombol absen.')

@push('styles')
<style>
    .camera-wrapper {
        position: relative;
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
        border-radius: 1.25rem;
        overflow: hidden;
        background: #1e1e2d;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }
    #camera-video, #camera-canvas {
        width: 100%;
        height: auto;
        min-height: 320px;
        object-fit: cover;
        transform: scaleX(-1); /* mirror selfie effect */
        display: block;
    }
    .camera-overlay {
        position: absolute;
        bottom: 15px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        gap: 10px;
        z-index: 10;
    }
    .camera-guide {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 220px;
        height: 280px;
        border: 2px dashed rgba(255, 255, 255, 0.6);
        border-radius: 50%;
        pointer-events: none;
    }
    .pulse-radar {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #28a745;
        box-shadow: 0 0 0 rgba(40, 167, 69, 0.4);
        animation: pulse 1.5s infinite;
    }
    @keyframes pulse {
        0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); }
        70% { box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); }
        100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
    }
</style>
@endpush

@section('content')
<div class="row justify-content-center">
    <div class="col-12 col-lg-8">
        @if($attendance && $attendance->check_in)
            <div class="card shadow-sm border-0 mb-4 bg-light-success text-center py-5">
                <div class="card-body">
                    <div class="avatar avatar-xl bg-success text-white mx-auto mb-3">
                        <i class="bi bi-check-lg fs-1"></i>
                    </div>
                    <h3 class="text-success fw-bold">Anda Sudah Melakukan Absen Masuk Hari Ini!</h3>
                    <p class="text-muted mb-4">
                        Waktu Check-In: <strong>{{ \Carbon\Carbon::parse($attendance->check_in)->format('H:i') }} WIB</strong> (Status: <strong>{{ $attendance->status_label }}</strong>)
                    </p>
                    <a href="{{ route('employee.dashboard') }}" class="btn btn-primary px-4">
                        <i class="bi bi-arrow-left me-1"></i> Kembali ke Dashboard
                    </a>
                </div>
            </div>
        @else
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-body p-4">
                    {{-- Shift & Date Header --}}
                    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4 pb-3 border-bottom">
                        <div>
                            <h5 class="fw-bold mb-1 text-dark">{{ $employee->name }}</h5>
                            <span class="badge bg-light-primary text-primary">{{ $employee->nik }} • {{ $employee->department?->name ?? 'Staff' }}</span>
                        </div>
                        <div class="text-md-end mt-2 mt-md-0">
                            <span class="text-muted text-xs d-block">JADWAL SHIFT:</span>
                            <span class="badge bg-primary fs-6">
                                {{ $shift ? $shift->name.' ('.\Carbon\Carbon::parse($shift->start_time)->format('H:i').' - '.\Carbon\Carbon::parse($shift->end_time)->format('H:i').' WIB)' : 'Shift Reguler' }}
                            </span>
                        </div>
                    </div>

                    {{-- Camera Viewfinder --}}
                    <div class="mb-4 text-center">
                        <div class="camera-wrapper">
                            <video id="camera-video" autoplay playsinline></video>
                            <canvas id="camera-canvas" class="d-none"></canvas>
                            <div class="camera-guide"></div>

                            <div class="camera-overlay">
                                <button type="button" id="btn-snap" class="btn btn-light rounded-circle shadow px-3 py-2" title="Ambil Foto Selfie">
                                    <i class="bi bi-camera-fill fs-4 text-primary"></i>
                                </button>
                                <button type="button" id="btn-retake" class="btn btn-warning rounded-pill px-3 py-2 d-none" title="Ulangi Foto">
                                    <i class="bi bi-arrow-counterclockwise me-1"></i> Foto Ulang
                                </button>
                            </div>
                        </div>
                        <small class="text-muted mt-2 d-block">Posisikan wajah Anda tepat di dalam lingkaran panduan.</small>
                    </div>

                    {{-- GPS Geolocation Status Card --}}
                    <div class="bg-light p-3 rounded-3 mb-4">
                        <div class="d-flex align-items-center justify-content-between mb-2">
                            <span class="fw-bold text-dark"><span class="pulse-radar me-2"></span> Status GPS Geolocation</span>
                            <button type="button" class="btn btn-sm btn-outline-primary" onclick="detectGPS()">
                                <i class="bi bi-arrow-clockwise me-1"></i> Refresh Lokasi
                            </button>
                        </div>
                        <div class="row g-2 text-xs text-muted">
                            <div class="col-6">Koordinat: <strong id="gps-coords" class="text-dark">Mendeteksi...</strong></div>
                            <div class="col-6">Jarak dari Kantor: <strong id="gps-distance" class="text-dark">Menghitung...</strong></div>
                        </div>
                        <div id="gps-status-badge" class="mt-2 text-xs"></div>
                    </div>

                    {{-- Hidden Form Fields --}}
                    <form id="form-checkin">
                        @csrf
                        <input type="hidden" name="latitude" id="input-latitude">
                        <input type="hidden" name="longitude" id="input-longitude">
                        <input type="hidden" name="photo" id="input-photo">

                        <div class="mb-4">
                            <label class="form-label text-xs fw-bold text-muted">Catatan Tambahan (Opsional)</label>
                            <input type="text" name="notes" id="input-notes" class="form-control" placeholder="Contoh: Bekerja dari kantor pusat / tugas luar...">
                        </div>

                        <button type="submit" id="btn-submit-checkin" class="btn btn-success btn-lg w-100 py-3 shadow" disabled>
                            <i class="bi bi-box-arrow-in-right me-2 fs-5"></i>
                            <span class="fw-bold fs-5">KIRIM ABSEN MASUK SEKARANG</span>
                        </button>
                    </form>
                </div>
            </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
    let videoStream = null;
    let photoData = null;
    let currentLat = null;
    let currentLng = null;

    const video = document.getElementById('camera-video');
    const canvas = document.getElementById('camera-canvas');
    const btnSnap = document.getElementById('btn-snap');
    const btnRetake = document.getElementById('btn-retake');
    const btnSubmit = document.getElementById('btn-submit-checkin');

    document.addEventListener('DOMContentLoaded', function() {
        startCamera();
        detectGPS();
    });

    // Start WebRTC Camera
    function startCamera() {
        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
            Swal.fire('Error', 'Browser tidak mendukung akses kamera.', 'error');
            return;
        }

        navigator.mediaDevices.getUserMedia({
            video: {
                facingMode: 'user',
                width: { ideal: 640 },
                height: { ideal: 480 }
            },
            audio: false
        }).then((stream) => {
            videoStream = stream;
            video.srcObject = stream;
        }).catch((err) => {
            console.error('Camera error:', err);
            Swal.fire({
                icon: 'warning',
                title: 'Akses Kamera Ditolak',
                text: 'Harap izinkan akses kamera pada browser Anda untuk dapat melakukan absensi.'
            });
        });
    }

    // Capture Snapshot from Video Stream
    if (btnSnap) {
        btnSnap.addEventListener('click', function() {
            canvas.width = video.videoWidth || 640;
            canvas.height = video.videoHeight || 480;
            const ctx = canvas.getContext('2d');

            // Mirror the canvas image to match selfie preview
            ctx.translate(canvas.width, 0);
            ctx.scale(-1, 1);
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

            photoData = canvas.toDataURL('image/jpeg', 0.85);
            document.getElementById('input-photo').value = photoData;

            // Toggle view
            video.classList.add('d-none');
            canvas.classList.remove('d-none');
            btnSnap.classList.add('d-none');
            btnRetake.classList.remove('d-none');

            checkReadyToSubmit();
        });
    }

    // Retake Photo
    if (btnRetake) {
        btnRetake.addEventListener('click', function() {
            photoData = null;
            document.getElementById('input-photo').value = '';

            video.classList.remove('d-none');
            canvas.classList.add('d-none');
            btnSnap.classList.remove('d-none');
            btnRetake.classList.add('d-none');

            checkReadyToSubmit();
        });
    }

    // GPS Geolocation Detection
    function detectGPS() {
        if (!navigator.geolocation) {
            document.getElementById('gps-coords').innerText = 'Tidak Didukung';
            return;
        }

        document.getElementById('gps-coords').innerText = 'Mendeteksi koordinat...';
        document.getElementById('gps-distance').innerText = 'Menghitung...';

        navigator.geolocation.getCurrentPosition(
            (pos) => {
                currentLat = pos.coords.latitude;
                currentLng = pos.coords.longitude;

                document.getElementById('input-latitude').value = currentLat;
                document.getElementById('input-longitude').value = currentLng;
                document.getElementById('gps-coords').innerText = `${currentLat.toFixed(6)}, ${currentLng.toFixed(6)}`;

                // Office Location Reference (First active office)
                @if(isset($offices[0]))
                    const officeLat = {{ $offices[0]->latitude }};
                    const officeLng = {{ $offices[0]->longitude }};
                    const radius = {{ $offices[0]->radius_meters }};

                    const dist = calculateDistance(currentLat, currentLng, officeLat, officeLng);
                    document.getElementById('gps-distance').innerText = `${Math.round(dist)} Meter (${dist <= radius ? 'Di dalam radius' : 'Di luar radius'})`;

                    const badge = document.getElementById('gps-status-badge');
                    if (dist <= radius) {
                        badge.innerHTML = `<span class="badge bg-success"><i class="bi bi-check-circle me-1"></i> Lokasi Valid (${Math.round(dist)}m dari ${"{{ $offices[0]->name }}"})</span>`;
                    } else {
                        badge.innerHTML = `<span class="badge bg-warning text-dark"><i class="bi bi-exclamation-triangle me-1"></i> Anda berada ${Math.round(dist)}m dari kantor (Batas: ${radius}m)</span>`;
                    }
                @endif

                checkReadyToSubmit();
            },
            (err) => {
                document.getElementById('gps-coords').innerText = 'Izin Lokasi Ditolak';
                document.getElementById('gps-status-badge').innerHTML = '<span class="badge bg-danger">GPS Tidak Aktif</span>';
            },
            { enableHighAccuracy: true, timeout: 10000 }
        );
    }

    function calculateDistance(lat1, lon1, lat2, lon2) {
        const R = 6371000;
        const dLat = (lat2 - lat1) * Math.PI / 180;
        const dLon = (lon2 - lon1) * 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(dLon/2) * Math.sin(dLon/2);
        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
        return R * c;
    }

    function checkReadyToSubmit() {
        if (currentLat && currentLng && btnSubmit) {
            btnSubmit.disabled = false;
        }
    }

    // Submit Check-In Form via AJAX
    let isSubmitting = false;
    const form = document.getElementById('form-checkin');
    if (form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            if (isSubmitting) return;

            // If user hasn't snapped photo yet, automatically snap it
            if (!photoData && video && video.srcObject) {
                btnSnap.click();
            }

            isSubmitting = true;
            if (btnSubmit) btnSubmit.disabled = true;

            Swal.fire({
                title: 'Memproses Absensi...',
                text: 'Memvalidasi lokasi GPS, jarak radius kantor, dan foto selfie.',
                allowOutsideClick: false,
                showConfirmButton: false,
                didOpen: () => Swal.showLoading()
            });

            const formData = {
                _token: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                latitude: document.getElementById('input-latitude').value,
                longitude: document.getElementById('input-longitude').value,
                photo: document.getElementById('input-photo').value,
                notes: document.getElementById('input-notes').value,
            };

            fetch("{{ route('employee.attendance.check-in.post') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': formData._token
                },
                body: JSON.stringify(formData)
            })
            .then(res => res.json().then(data => ({ status: res.status, body: data })))
            .then(res => {
                if (res.status === 200 && res.body.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Absensi Berhasil!',
                        html: `
                            <p class="mb-1">${res.body.message}</p>
                            <div class="bg-light p-3 rounded-3 text-start mt-3">
                                <small class="text-muted d-block">Jam Masuk: <strong>${res.body.data.check_in}</strong></small>
                                <small class="text-muted d-block">Status: <strong class="text-primary">${res.body.data.status}</strong></small>
                                <small class="text-muted d-block">Lokasi: <strong>${res.body.data.office_name} (${res.body.data.distance}m)</strong></small>
                            </div>
                        `,
                        confirmButtonText: 'Kembali ke Dashboard',
                        confirmButtonColor: '#435ebe',
                        allowOutsideClick: false
                    }).then(() => {
                        window.location.href = "{{ route('employee.dashboard') }}";
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Absensi Ditolak',
                        text: res.body.message || 'Terjadi kesalahan saat memproses absensi.',
                        confirmButtonColor: '#dc3545',
                        confirmButtonText: 'Coba Lagi'
                    }).then(() => {
                        isSubmitting = false;
                        if (btnSubmit) btnSubmit.disabled = false;
                    });
                }
            })
            .catch(err => {
                Swal.fire({
                    icon: 'error',
                    title: 'Koneksi Gagal',
                    text: 'Terjadi kesalahan jaringan. Silakan coba kembali.',
                    confirmButtonColor: '#dc3545',
                    confirmButtonText: 'Coba Lagi'
                }).then(() => {
                    isSubmitting = false;
                    if (btnSubmit) btnSubmit.disabled = false;
                });
            });
        });
    }
</script>
@endpush