@extends('mahasiswa.layout')

@section('content')

<div class="card-box">
    <h5>Absensi</h5>

    <div class="row g-2 mb-3">

        <div class="col-md-3">
            <select id="blok" class="form-control">
                <option value="">Pilih Blok</option>
                @foreach($blok as $b)
                <option value="{{ $b->id }}">{{ $b->nama_blok }}</option>
                @endforeach
            </select>
        </div>

        <div class="col-md-3">
            <select id="matakuliah" class="form-control">
                <option value="">Pilih Matakuliah</option>
            </select>
        </div>

        <div class="col-md-3">
            <input type="date" id="tanggal" class="form-control" value="{{ now()->format('Y-m-d') }}">
        </div>

        <div class="col-md-3">
            <button id="btnMasuk" class="btn btn-custom">Absen Masuk</button>
            <button id="btnKeluar" class="btn btn-danger">Absen Keluar</button>
        </div>

    </div>
</div>


<!-- MODAL KAMERA -->
<div id="kameraModal"
    style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000000aa; z-index:9999;">

    <div style="width:400px; margin:50px auto; background:#fff; padding:20px; text-align:center; border-radius:10px;">

        <h5>Ambil Foto</h5>

        <video id="video" width="100%" autoplay></video>

        <canvas id="canvas" style="display:none;"></canvas>

        <br><br>

        <button id="btnAmbilFoto" class="btn btn-primary" onclick="ambilFoto()">
            Ambil Foto
        </button>

        <button id="btnBatalKamera" class="btn btn-secondary" onclick="tutupKamera()">
            Batal
        </button>

    </div>
</div>

@endsection


<script>
    document.addEventListener('DOMContentLoaded', function() {

        let stream = null;

        let currentType = 'masuk';

        // =====================================================
        // PENGAMAN REQUEST ABSENSI
        // =====================================================
        let isSubmitting = false;


        let blok = document.getElementById('blok');
        let mk = document.getElementById('matakuliah');

        let btnMasuk = document.getElementById('btnMasuk');
        let btnKeluar = document.getElementById('btnKeluar');

        let btnAmbilFoto = document.getElementById('btnAmbilFoto');
        let btnBatalKamera = document.getElementById('btnBatalKamera');


        // =====================================================
        // LOAD MATAKULIAH
        // =====================================================
        blok.addEventListener('change', function() {

            let id = this.value;

            if (!id) {
                mk.innerHTML = '<option value="">Pilih Matakuliah</option>';
                return;
            }

            fetch('/get-matakuliah/' + id)
                .then(res => res.json())
                .then(data => {

                    mk.innerHTML = '<option value="">Pilih Matakuliah</option>';

                    data.forEach(d => {
                        mk.innerHTML += `<option value="${d.id}">${d.nama_mk}</option>`;
                    });

                })
                .catch(err => {
                    console.error(err);
                });
        });


        // =====================================================
        // SET TYPE (MASUK / KELUAR)
        // =====================================================
        window.setType = function(type) {
            currentType = type;
        };


        // =====================================================
        // RESET STATUS SUBMIT
        // =====================================================
        function resetSubmitState() {

            isSubmitting = false;

            // Aktifkan tombol kamera
            if (btnAmbilFoto) {
                btnAmbilFoto.disabled = false;
                btnAmbilFoto.innerText = 'Ambil Foto';
            }

            // Aktifkan tombol batal
            if (btnBatalKamera) {
                btnBatalKamera.disabled = false;
            }

            // Aktifkan tombol masuk / keluar
            if (btnMasuk) {
                btnMasuk.disabled = false;
            }

            if (btnKeluar) {
                btnKeluar.disabled = false;
            }
        }


        // =====================================================
        // LOCK UI SAAT REQUEST BERLANGSUNG
        // =====================================================
        function lockSubmitState() {

            isSubmitting = true;

            // Disable tombol Ambil Foto
            if (btnAmbilFoto) {
                btnAmbilFoto.disabled = true;
                btnAmbilFoto.innerText = 'Mengirim...';
            }

            // Disable tombol batal supaya proses tidak terputus
            if (btnBatalKamera) {
                btnBatalKamera.disabled = true;
            }

            // Disable tombol masuk / keluar
            if (btnMasuk) {
                btnMasuk.disabled = true;
            }

            if (btnKeluar) {
                btnKeluar.disabled = true;
            }
        }


        // =====================================================
        // BUKA KAMERA
        // =====================================================
        window.bukaKamera = function() {

            // Jangan buka kamera jika sedang mengirim
            if (isSubmitting) {
                return;
            }

            if (!blok.value || !mk.value) {
                alert("Pilih blok dan matakuliah dulu!");
                return;
            }

            document.getElementById('kameraModal').style.display = 'block';

            // Pastikan tombol kamera dalam kondisi normal
            if (btnAmbilFoto) {
                btnAmbilFoto.disabled = false;
                btnAmbilFoto.innerText = 'Ambil Foto';
            }

            if (btnBatalKamera) {
                btnBatalKamera.disabled = false;
            }

            navigator.mediaDevices.getUserMedia({
                    video: true
                })
                .then(s => {

                    stream = s;

                    document.getElementById('video').srcObject = s;

                })
                .catch(err => {

                    alert("Kamera tidak bisa diakses");

                    console.error(err);

                    tutupKamera();
                });
        };


        // =====================================================
        // TUTUP KAMERA
        // =====================================================
        window.tutupKamera = function() {

            document.getElementById('kameraModal').style.display = 'none';

            if (stream) {

                stream.getTracks().forEach(track => track.stop());

                stream = null;
            }

            // Jangan reset status submit jika sedang proses request
            if (!isSubmitting) {
                resetSubmitState();
            }
        };


        // =====================================================
        // AMBIL FOTO
        // =====================================================
        window.ambilFoto = function() {

            // =================================================
            // PENGAMAN PALING PENTING
            // =================================================
            // Jika sudah ada proses yang sedang berjalan,
            // abaikan klik berikutnya.
            if (isSubmitting) {
                return;
            }


            let video = document.getElementById('video');
            let canvas = document.getElementById('canvas');


            // Pastikan kamera sudah siap
            if (video.readyState !== 4) {

                alert("Kamera belum siap");

                return;
            }


            // =================================================
            // LANGSUNG LOCK
            // =================================================
            lockSubmitState();


            // =================================================
            // AMBIL FOTO
            // =================================================
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;

            canvas.getContext('2d').drawImage(
                video,
                0,
                0
            );


            let image = canvas.toDataURL('image/png');


            // =================================================
            // AMBIL LOKASI
            // =================================================
            navigator.geolocation.getCurrentPosition(

                pos => {

                    kirimAbsen(
                        image,
                        pos.coords.latitude,
                        pos.coords.longitude
                    );

                },

                err => {

                    console.error(err);

                    // Kembalikan tombol jika GPS gagal
                    resetSubmitState();

                    Swal.fire({
                        icon: 'error',
                        title: 'Lokasi Gagal',
                        text: 'Gagal mengambil lokasi. Silakan coba lagi.'
                    });
                },

                {
                    enableHighAccuracy: true,
                    timeout: 15000,
                    maximumAge: 0
                }
            );
        };


        // =====================================================
        // KIRIM ABSEN
        // =====================================================
        function kirimAbsen(image, lat, lng) {

            // =================================================
            // PENGAMAN TAMBAHAN
            // =================================================
            if (!isSubmitting) {
                return;
            }


            let tanggalInput = document.getElementById('tanggal').value;


            // =================================================
            // FALLBACK TANGGAL
            // =================================================
            if (!tanggalInput) {

                let now = new Date();

                let year = now.getFullYear();

                let month = String(
                    now.getMonth() + 1
                ).padStart(2, '0');

                let day = String(
                    now.getDate()
                ).padStart(2, '0');

                tanggalInput = `${year}-${month}-${day}`;
            }


            // =================================================
            // REQUEST ABSENSI
            // =================================================
            fetch('/mahasiswa/absen', {

                    method: 'POST',

                    credentials: 'same-origin',

                    headers: {

                        'Content-Type': 'application/json',

                        'X-CSRF-TOKEN': document.querySelector(
                            'meta[name="csrf-token"]'
                        ).content
                    },

                    body: JSON.stringify({

                        id_blok: blok.value,

                        id_matakuliah: mk.value,

                        tanggal: tanggalInput,

                        foto: image,

                        latitude: lat,

                        longitude: lng,

                        type: currentType
                    })
                })


                // =================================================
                // RESPONSE
                // =================================================
                .then(res => {

                    return res.json();

                })


                .then(res => {

                    if (res.success) {

                        Swal.fire({

                            icon: 'success',

                            title: 'Berhasil',

                            html: `<b>${res.message}</b>`,

                            timer: 3000,

                            showConfirmButton: false
                        });


                        // Tutup kamera
                        tutupKamera();


                        // Reload halaman
                        location.reload();


                    } else {

                        // Jika server menolak,
                        // izinkan mahasiswa mencoba lagi
                        resetSubmitState();


                        Swal.fire({

                            icon: 'error',

                            title: 'Gagal',

                            html: `<b>${res.message}</b>`
                        });
                    }

                })


                // =================================================
                // ERROR REQUEST
                // =================================================
                .catch(err => {

                    console.error(err);


                    // Kembalikan tombol agar bisa mencoba lagi
                    resetSubmitState();


                    Swal.fire({

                        icon: 'error',

                        title: 'Error',

                        text: 'Gagal mengirim data ke server'
                    });
                });
        }


        // =====================================================
        // BUTTON EVENT - ABSEN MASUK
        // =====================================================
        if (btnMasuk) {

            btnMasuk.addEventListener('click', function() {

                // Jangan izinkan klik ketika proses berjalan
                if (isSubmitting) {
                    return;
                }

                setType('masuk');

                bukaKamera();
            });
        }


        // =====================================================
        // BUTTON EVENT - ABSEN KELUAR
        // =====================================================
        if (btnKeluar) {

            btnKeluar.addEventListener('click', function() {

                // Jangan izinkan klik ketika proses berjalan
                if (isSubmitting) {
                    return;
                }

                setType('keluar');

                bukaKamera();
            });
        }

    });
</script>