@extends('layouts.presensi')
@section('header')
    <!-- App Header -->
    <div class="appHeader bg-primary text-light">
        <div class="left">
            <a href="javascript:;" class="headerButton goBack">
                <ion-icon name="chevron-back-outline"></ion-icon>
            </a>
        </div>
        <div class="pageTitle">E-Presensi</div>
        <div class="right"></div>
    </div>
    <!-- * App Header -->
    <style>
        .webcam-capture,
        .webcam-capture video {
            display: inline-block;
            width: 100% !important;
            margin: auto;
            height: auto !important;
            border-radius: 15px;
       }

       #map {
            height: 250px;
        }
       
    </style>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
     @endsection

     @section('content')

     <div class="row" style="margin-top: 70px">
    <div class="col">
           <input type="text" id="nama_siswa" class="form-control" placeholder="Masukkan Nama Siswa">
        <input type="hidden" id="lokasi">
        <div class="webcam-capture"></div>
    </div>
     </div>
    <div class="row">
<div class="col">

<button id="takeabsen" class="btn btn-primary btn-block">
<ion-icon name="camera-outline"></ion-icon>Absen Mulai</button>
</div>
    </div>
    <div class="row mt-2">
    <div class="col">
    <div id="map"></div>
</div>
    </div>
<audio id="notifikasi_in">
    <source src="{{asset('assets/sound/notifikasi_in.mp3')}}" type="audio/mpeg">
</audio>


     @endsection

     @push('myscript')
     <script>
document.addEventListener("DOMContentLoaded", function () {
    let cameraStream = null;

    function checkLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                function (position) {
                    var latitude = position.coords.latitude;
                    var longitude = position.coords.longitude;
                    document.getElementById("lokasi").value = latitude + "," + longitude;
                    
                    var map = L.map('map').setView([latitude, longitude], 18);
                    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                        maxZoom: 19,
                        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
                    }).addTo(map);
                    
                    L.marker([latitude, longitude]).addTo(map);
                },
                function (error) {
                    alert("Lokasi tidak dapat diakses. Pastikan GPS Aktif. Anda akan diarahkan kembali ke dashboard.");
                    window.location.href = '/dashboard';
                }
            );
        } else {
            alert("Geolocation tidak didukung di browser ini. Anda akan diarahkan kembali ke dashboard.");
            window.location.href = '/dashboard';
        }
    }
    
    checkLocation();
    
    setInterval(checkLocation, 3000); // Cek lokasi setiap 3 detik

    // **Tambahan: Cek Kamera**
    navigator.mediaDevices.getUserMedia({ video: true })
        .then(function (stream) {
            cameraStream = stream;
            Webcam.set({
                height: 480,
                width: 640,
                image_format: 'jpeg',
                jpeg_quality: 80
            });
            Webcam.attach('.webcam-capture');
        })
        .catch(function (error) {
            alert("Akses kamera ditolak atau tidak tersedia. Anda akan diarahkan ke dashboard.");
            window.location.href = '/dashboard';
        });

    function checkCamera() {
        if (cameraStream) {
            let tracks = cameraStream.getTracks();
            let isCameraActive = tracks.some(track => track.readyState === "live");

            if (!isCameraActive) {
                alert("Kamera telah dimatikan. Anda akan diarahkan ke dashboard.");
                window.location.href = '/dashboard';
            }
        }
    }

    setInterval(checkCamera, 2000); // Cek kamera setiap 3 detik

    $("#takeabsen").click(function(e) {
        var nama_siswa = $("#nama_siswa").val().trim();
        var lokasi = $("#lokasi").val().trim();
        
        if (nama_siswa === "") {
            Swal.fire({
                title: 'Error!',
                text: 'Nama siswa harus diisi!',
                icon: 'warning',
                confirmButtonText: 'OK'
            });
            return;
        }
        
        if (lokasi === "") {
            alert("Lokasi tidak tersedia. Anda akan diarahkan kembali ke dashboard.");
            window.location.href = '/dashboard';
            return;
        }
        
        Webcam.snap(function(uri) {
            image = uri;
        });
        
        $.ajax({
            type: 'POST',
            url: '/presensi/store',
            data: {
                _token: "{{ csrf_token() }}",
                image: image,
                lokasi: lokasi,
                nama_siswa: nama_siswa
            },
            cache: false,
            success: function(respond) {
                if (respond == 0) {
                    document.getElementById("notifikasi_in").play();
                    Swal.fire({
                        title: 'Berhasil!',
                        text: 'Terima Kasih, Selamat Mengajar',
                        icon: 'success'
                    });
                    setTimeout("location.href='/dashboard'", 2000);
                } else {
                    Swal.fire({
                        title: 'Error!',
                        text: 'Maaf Gagal Absen, Silakan Hubungi IT',
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
            }
        });
    });
});
</script>

     @endpush