@extends('layouts.app')

@section('title','Validasi Penyaluran')

@section('content')
<div class="container-fluid">

    <h4 class="fw-bold mb-3">Validasi Penyaluran</h4>

    <form id="formValidasi">
        @csrf

        <input type="hidden" name="nik" value="{{ $nik }}">
        <input type="hidden" name="nama" value="{{ $nama }}">
        <input type="hidden" name="nomor_kk" value="{{ $nomor_kk }}">

        <div class="mb-3">
            <label>Nama</label>
            <input class="form-control" value="{{ $nama }}" readonly>
        </div>

        <div class="mb-3">
            <label>Jenis Bansos</label>
            <select name="jenis_bansos" class="form-select" required>
                <option value="">-- Pilih --</option>
                @foreach($bansos as $b)
                <option value="{{ $b->kode }}">{{ $b->nama }}</option>
                @endforeach
            </select>
        </div>

        {{-- KAMERA --}}
        <div class="mb-3">
            <label class="fw-bold">Foto Validasi (Wajah Wajib Terlihat)</label>

            <video id="camera" class="w-100 rounded border" autoplay playsinline></video>
            <canvas id="canvas" class="d-none"></canvas>

            <div id="faceStatus" class="alert alert-warning mt-2">
                Arahkan wajah ke kamera
            </div>

            <button type="button" id="btnCapture"
                class="btn btn-primary w-100 mt-2" disabled>
                <i class="bi bi-camera"></i> Ambil Foto
            </button>

            <button type="button" id="btnRetake"
                class="btn btn-warning w-100 mt-2 d-none">
                <i class="bi bi-arrow-repeat"></i> Ulang Ambil Foto
            </button>

            <img id="previewFoto"
                class="img-fluid rounded border mt-3 d-none"
                style="max-height:300px">
        </div>

        <button class="btn btn-success w-100">
            <i class="bi bi-check-circle"></i> Simpan Penyaluran
        </button>

    </form>
</div>

<meta name="csrf-token" content="{{ csrf_token() }}">

{{-- FACE API --}}
<script src="https://cdn.jsdelivr.net/npm/@vladmandic/face-api/dist/face-api.min.js"></script>

<script>
    const video = document.getElementById('camera');
    const canvas = document.getElementById('canvas');
    const preview = document.getElementById('previewFoto');
    const btnCap = document.getElementById('btnCapture');
    const btnRe = document.getElementById('btnRetake');
    const faceStatus = document.getElementById('faceStatus');

    let stream = null;
    let fotoBlob = null;
    let faceDetected = false;

    /* ================= CAMERA ================= */
    function startCamera() {
        navigator.mediaDevices.getUserMedia({
            video: {
                facingMode: "environment"
            },
            audio: false
        }).then(s => {
            stream = s;
            video.srcObject = s;

            video.classList.remove('d-none');
            preview.classList.add('d-none');
            btnCap.classList.remove('d-none');
            btnRe.classList.add('d-none');
        }).catch(() => alert('Kamera tidak dapat diakses'));
    }

    function stopCamera() {
        if (stream) {
            stream.getTracks().forEach(t => t.stop());
            stream = null;
        }
    }

    /* ================= FACE DETECTION ================= */
    async function loadModel() {
        await faceapi.nets.tinyFaceDetector.loadFromUri('/models');
    }
    loadModel();

    setInterval(async () => {
        if (!video.srcObject) return;

        const detection = await faceapi.detectSingleFace(
            video,
            new faceapi.TinyFaceDetectorOptions({
                inputSize: 224,
                scoreThreshold: 0.6
            })
        );

        faceDetected = !!detection;
        btnCap.disabled = !faceDetected;

        faceStatus.className = faceDetected ?
            'alert alert-success mt-2' :
            'alert alert-warning mt-2';

        faceStatus.innerText = faceDetected ?
            'Wajah terdeteksi' :
            'Wajah berhasil terdeteksi silahkan lanjutkan Simpan Penyaluran';

    }, 700);

    /* ================= CAPTURE ================= */
    btnCap.onclick = () => {
        if (!faceDetected) {
            alert('Wajah belum terdeteksi');
            return;
        }

        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0);

        canvas.toBlob(blob => {
            fotoBlob = blob;
            preview.src = URL.createObjectURL(blob);

            stopCamera();

            video.classList.add('d-none');
            preview.classList.remove('d-none');
            btnCap.classList.add('d-none');
            btnRe.classList.remove('d-none');
        }, 'image/jpeg', 0.9);
    };

    /* ================= RETAKE ================= */
    btnRe.onclick = () => {
        fotoBlob = null;
        preview.src = '';
        startCamera();
    };

    /* ================= SUBMIT ================= */
    document.getElementById('formValidasi').onsubmit = function(e) {
        e.preventDefault();

        if (!fotoBlob) {
            alert('Foto belum diambil');
            return;
        }

        const formData = new FormData(this);
        formData.append('foto_validasi', fotoBlob, 'validasi.jpg');

        fetch("{{ route('desa.penyaluran.simpan') }}", {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document
                        .querySelector('meta[name=csrf-token]').content
                },
                body: formData
            })
            .then(r => r.json())
            .then(res => {
                alert(res.message);
                if (res.status) {
                    location.href = "{{ route('desa.penyaluran.index') }}";
                }
            });
    };

    /* AUTO START */
    startCamera();
</script>
@endsection