<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ambil Foto KTP dengan Kamera</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            background-color: #f8f9fa;
        }
        .container {
            max-width: 600px;
        }
        .btn-primary {
            background-color: #007bff;
            border-color: #007bff;
        }
        .btn-primary:hover {
            background-color: #0056b3;
            border-color: #0056b3;
        }
        #video {
            width: 100%;
            height: auto;
            border: 2px solid #ddd;
            border-radius: 8px;
        }
        #captureButton {
            display: block;
            width: 100%;
            margin-top: 20px;
            background-color: #28a745;
            border-color: #28a745;
            color: white;
        }
    </style>
</head>
<body>

<div class="container mt-5 p-4 bg-white rounded shadow-sm">
    <h2 class="text-center mb-4">Ambil Gambar KTP dengan Kamera</h2>

    <!-- Video Feed dari Kamera -->
    <div class="preview-container">
        <video id="video" autoplay></video>
    </div>

    <!-- Tombol untuk mengambil foto -->
    <button id="captureButton" class="btn btn-success w-100">Ambil Foto</button>

    <!-- Form untuk menampilkan data dari OCR -->
    <div id="ocrData" class="mt-3" style="display:none;">
        <h3>Data dari KTP</h3>
        <div class="mb-2">
            <label for="nik" class="form-label">NIK:</label>
            <input type="text" name="nik" class="form-control" id="nik" readonly>
        </div>
        <div class="mb-2">
            <label for="nama" class="form-label">Nama:</label>
            <input type="text" name="nama" class="form-control" id="nama" readonly>
        </div>
        <div class="mb-2">
            <label for="alamat" class="form-label">Alamat:</label>
            <input type="text" name="alamat" class="form-control" id="alamat" readonly>
        </div>
      <div class="mb-2">
        <label for="tempat_lahir" class="form-label">Tempat Lahir:</label>
        <input type="text" name="tempat_lahir" class="form-control" id="tempat_lahir" readonly>
    </div>
    <div class="mb-2">
        <label for="tanggal_lahir" class="form-label">Tanggal Lahir:</label>
        <input type="text" name="tanggal_lahir" class="form-control" id="tanggal_lahir" readonly>
    </div>
        <!-- Agama -->
        <div class="mb-2">
            <label for="agama" class="form-label">Agama:</label>
            <input type="text" name="agama" class="form-control" id="agama" readonly>
        </div>
        <!-- Status Kawin -->
        <div class="mb-2">
            <label for="status_kawin" class="form-label">Status Kawin:</label>
            <input type="text" name="status_kawin" class="form-control" id="status_kawin" readonly>
        </div>
    </div>
</div>

<script>
    // Mengakses kamera belakang secara otomatis saat halaman dimuat
    async function startCamera() {
        try {
            // Meminta izin dan mengakses kamera belakang
            const stream = await navigator.mediaDevices.getUserMedia({
                video: { facingMode: "environment" }
            });

            // Menampilkan video stream dari kamera ke elemen <video>
            const videoElement = document.getElementById("video");
            videoElement.srcObject = stream;
        } catch (error) {
            alert("Gagal mengakses kamera. Pastikan kamera terpasang dan periksa izin akses.");
        }
    }

    // Mengambil snapshot dari video feed saat tombol "Ambil Foto" diklik
    document.getElementById('captureButton').addEventListener('click', function() {
        const video = document.getElementById('video');
        const canvas = document.createElement('canvas');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;

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

        // Mengonversi gambar yang diambil ke dalam format Data URL (gambar)
        const imageDataUrl = canvas.toDataURL('image/png');

        // Menghentikan video stream setelah mengambil foto
        const stream = video.srcObject;
        const tracks = stream.getTracks();
        tracks.forEach(track => track.stop());

        // Mengirim gambar ke OCR API atau backend server untuk diproses
        processImageWithOCR(imageDataUrl);
    });

    // Fungsi untuk mengirim gambar ke API OCR untuk diproses
    function processImageWithOCR(imageDataUrl) {
        $.ajax({
            url: 'process_image.php', // Ubah URL ini ke server yang meng-handle OCR
            type: 'POST',
            data: { image: imageDataUrl },
            success: function(response) {
                if (response.success) {
                    // Tampilkan data dari OCR ke form
                    $('#ocrData').show();
                    $('#nik').val(response.nik);
                    $('#nama').val(response.nama);
                    $('#alamat').val(response.alamat);
                    $('#tempat_lahir').val(response.tempat_lahir);
                    $('#tanggal_lahir').val(response.tanggal_lahir);
                    $('#agama').val(response.agama);
                    $('#status_kawin').val(response.status_kawin); // Menampilkan Status Kawin
                    alert("Memproses gambar: " + response);
                } else {
                    alert("Gagal memproses gambar: " + response.message);
                }
            },
            error: function() {
                alert("Terjadi kesalahan saat memproses gambar.");
            }
        });
    }

    // Mulai kamera saat halaman dimuat
    window.onload = startCamera;
</script>

</body>
</html>
