@extends('templates.app')
@section('container')
    <div class="card-secton transfer-section">
        <div class="tf-container">
            <div class="tf-balance-box">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="inner-left d-flex justify-content-between align-items-center">
                        <span>Tanggal Shift</span>
                    </div>
                    <span>{{ $shift_karyawan->tanggal ?? '-' }}</span>
                </div>
                <div class="d-flex justify-content-between align-items-center">
                    <div class="inner-left d-flex justify-content-between align-items-center">
                        <span>Shift</span>
                    </div>
                    <span>{{ $shift_karyawan->Shift->nama_shift ?? '' }} ({{ $shift_karyawan->Shift->jam_masuk ?? '' }} -
                        {{ $shift_karyawan->Shift->jam_keluar ?? '' }})</span>
                </div>
            </div>
        </div>
    </div>

    <br>
    <style>
        .jam-digital-malasngoding {
            overflow: hidden;
            float: center;
            width: 100px;
            margin: 2px auto;
            border: 0px solid #efefef;
        }

        .kotak {
            float: left;
            width: 30px;
            height: 30px;
            background-color: #189fff;
        }

        .jam-digital-malasngoding p {
            color: #fff;
            font-size: 16px;
            text-align: center;
            margin-top: 3px;
        }

        canvas {
            position: absolute;
            pointer-events: none;
            top: 35.5%;
            left: 15%
                /* Agar tidak mengganggu interaksi dengan elemen lain */
        }

        #progress {
            position: relative;
            width: 250px;
            height: 20px;
            border: 1px solid red;
        }

        #progress .progress-bar {
            background: blue;
            height: 20px;
            width: 0%;
            display: inline-block;
        }

        #progress .progress-text {
            position: absolute;
            z-index: 2;
            right: 0;
        }
    </style>

    <div class="jam-digital-malasngoding">
        <div class="kotak">
            <p id="jam"></p>
        </div>
        <div class="kotak">
            <p id="menit"></p>
        </div>
        <div class="kotak">
            <p id="detik"></p>
        </div>
    </div>

    <script>
        window.setTimeout("waktu()", 1000);

        function waktu() {
            var waktu = new Date();
            setTimeout("waktu()", 1000);
            document.getElementById("jam").innerHTML = waktu.getHours();
            document.getElementById("menit").innerHTML = waktu.getMinutes();
            document.getElementById("detik").innerHTML = waktu.getSeconds();
        }
    </script>
    <br>

    <div class="d-flex justify-content-center mb-4">
        <form action="{{ url('/my-location') }}" method="get">
            @csrf
            <input type="hidden" name="lat" id="lat2">
            <input type="hidden" name="long" id="long2">
            <input type="hidden" name="userid" value="{{ auth()->user()->id }}">
            <input type="hidden" name="username" value="{{ auth()->user()->username }}">
            <button type="submit" class="btn btn-success" id="location-btn" disabled>
                Mencari Titik Lokasi...
            </button>
        </form>
    </div>

    <div class="transfer-content">
        @if (!$shift_karyawan)
            <center>
                <h2>Hubungi Admin Untuk Input Shift Anda</h2>
            </center>
        @elseif($shift_karyawan->status_absen == 'Libur')
            <center>
                <h2>Hari Ini Anda Libur</h2>
            </center>
        @elseif($shift_karyawan->status_absen == 'Cuti')
            <center>
                <h2>Hari Ini Anda Cuti</h2>
            </center>
        @elseif($shift_karyawan->status_absen == 'Izin Tidak Masuk')
            <center>
                <h2>Hari Ini Anda Izin</h2>
            </center>
        @else
            @php
                date_default_timezone_set('Asia/Jakarta');
                $now = date("Y-m-d H:i");
                $mulai = $shift_karyawan->tanggal;

                $jam_masuk = $shift_karyawan->Shift->jam_masuk;
                $jam_keluar = $shift_karyawan->Shift->jam_keluar;
                
                $masuk = DateTime::createFromFormat('H:i',$jam_masuk);
                $keluar = DateTime::createFromFormat('H:i',$jam_keluar);
                
                $mulaiDateTime = DateTime::createFromFormat('Y-m-d H:i',$mulai . ' ' . $jam_masuk);
                $akhirDateTime = DateTime::createFromFormat('Y-m-d H:i',$mulai . ' ' . $jam_keluar);
                $akhirs = $akhirDateTime;
                $nowDateTime = DateTime::createFromFormat('Y-m-d H:i', $now);
                
                if ($keluar <= $masuk) {
                     $akhirs = $akhirDateTime->modify("+1 day");
                }
                
                $limit1 = clone $mulaiDateTime;
                $limit2 = clone $akhirs;
                $limit3 = clone $akhirs;
            

                $limit1->modify('+1 hour'); // Batas absen masuk
                $limit2->modify('-1 hour'); // Batas absen pulang
                $limit3->modify('+2 hour'); // Batas absen limit pulang
 
                // Konversi ke timestamp
                $nowTimestamp = $nowDateTime ? $nowDateTime->getTimestamp() : null;
                $limit1Timestamp = $limit1->getTimestamp();
                $limit2Timestamp = $limit2->getTimestamp();
                $limit3Timestamp = $limit3->getTimestamp();

                // Perbaiki logika Blade
                $isAbsenMasuk = $shift_karyawan->jam_absen == null;
                $isAbsenKehadiran = $shift_karyawan->jam_absen != null && $nowTimestamp >= $limit1Timestamp && $nowTimestamp <= $limit2Timestamp;
                $isAbsenPulang = $shift_karyawan->jam_pulang == null && $nowTimestamp >= $limit2Timestamp && $nowTimestamp < $limit3Timestamp;
            @endphp

            @if ($isAbsenMasuk)
                <div class="transfer-content">
                    <center>
                        <h2 class="mb-2">Absen Masuk</h2>
                        <video id="video" autoplay playsinline class="col-lg-12 col-md-12 col-sm-12 mx-auto"></video>
                        <input type="hidden" name="userid" value="{{ auth()->user()->id }}">
                        <input type="hidden" name="username" value="{{ auth()->user()->username }}">
                        <input type="hidden" name="lat" id="lat">
                        <input type="hidden" name="long" id="long">
                        <button id="capture" class="btn btn-primary mt-4" disabled>Absen</button>
                    </center>
                </div>
            @elseif ($isAbsenKehadiran)
                <div class="transfer-content">
                    <center>
                        <h2 class="mb-2">Absen Kehadiran</h2>
                        <video id="video" autoplay playsinline class="col-lg-12 col-md-12 col-sm-12 mx-auto"></video>
                        <input type="hidden" name="userid" value="{{ auth()->user()->id }}">
                        <input type="hidden" name="username" value="{{ auth()->user()->username }}">
                        <input type="hidden" name="lat" id="lat">
                        <input type="hidden" name="long" id="long">
                        <button id="captures_kehadiran" class="btn btn-primary mt-4" disabled>Absen</button>
                    </center>
                </div>
            @elseif ($isAbsenPulang)
                <div class="transfer-content">
                    <center>
                        <h2 class="mb-2">Absen Pulang <br>
                        Maximal : {{$limit3->format("Y-m-d H:i")}} WIB
                        </h2>
                        <video id="video" autoplay playsinline class="col-lg-12 col-md-12 col-sm-12 mx-auto"></video>
                        <input type="hidden" name="userid" value="{{ auth()->user()->id }}">
                        <input type="hidden" name="username" value="{{ auth()->user()->username }}">
                        <input type="hidden" name="lat" id="lat">
                        <input type="hidden" name="long" id="long">
                        <button id="captures" class="btn btn-primary mt-4" disabled>Absen</button>
                    </center>
                </div>
            @else
                <center>
                    <h2 class="mb-2">Anda Sudah Selesai Absen </h2>
                    <video id="video" autoplay playsinline class="col-lg-12 col-md-12 col-sm-12 mx-auto"></video>
                </center>
            @endif
        @endif
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>

        @push('script')
            <script type="text/javascript" src="{{ url('/myhr/javascript/jquery.min.js') }}"></script>
            <script type="text/javascript" src="{{ url('/myhr/javascript/bootstrap.min.js') }}"></script>
            <script type="text/javascript" src="{{ url('/myhr/javascript/password-addon.js') }}"></script>
            <script type="text/javascript" src="{{ url('/myhr/javascript/main.js') }}"></script>
            <!-- jQuery -->
            <script src="{{ url('/adminlte/plugins/jquery/jquery.min.js') }}"></script>
            <!-- Bootstrap 4 -->
            <script src="{{ url('/adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
            <!-- AdminLTE App -->
            <script src="{{ url('/adminlte/dist/js/adminlte.min.js') }}"></script>

            <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

            <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
            <script src="https://cdn.jsdelivr.net/npm/face-api.js/dist/face-api.min.js"></script>



            <script>
                $(function() {
                    $('form').on('submit', function() {
                        $(':input[type="submit"]').prop('disabled', true);
                    })
                })
            </script>
            <script>
                function getLocation() {
                    if (navigator.geolocation) {
                        navigator.geolocation.getCurrentPosition(showPosition);
                    } else {
                        console.error("Geolocation is not supported by this browser.");
                    }
                }

                setInterval(getLocation, 500);

                function showPosition(position) {
                    document.getElementById('lat').value = position.coords.latitude;
                    document.getElementById('long').value = position.coords.longitude;
                }

                let video = document.getElementById("video");
                let canvas = document.createElement("canvas");
                let ctx = canvas.getContext("2d");
                document.body.appendChild(canvas);

                let width = 320;
                let height = 240;
                let faceMatcher;
                let username = "{{ auth()->user()->username }}";

                // Fungsi untuk memulai streaming video
                async function startStream() {
                    try {
                        const stream = await navigator.mediaDevices.getUserMedia({
                            video: {
                                facingMode: "user",
                                width: width,
                                height: height
                            },
                            audio: false
                        });
                        video.srcObject = stream;
                    } catch (error) {
                        console.error('Error accessing camera:', error);
                    }
                }

                // Memuat model FaceAPI dan memulai stream
                Promise.all([
                    faceapi.nets.tinyFaceDetector.loadFromUri("{{ url('/face/weights') }}"),
                    faceapi.nets.faceLandmark68Net.loadFromUri("{{ url('/face/weights') }}"),
                    faceapi.nets.faceRecognitionNet.loadFromUri("{{ url('/face/weights') }}")
                ]).then(startStream);

                video.onloadeddata = () => {
                    canvas.width = video.videoWidth;
                    canvas.height = video.videoHeight;
                    start();
                };

                async function start() {
                    Swal.fire({
                        title: 'Loading...',
                        text: 'Loading face data, please wait.',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });

                    if (username.trim() === "") {
                        Swal.fire({
                            icon: 'error',
                            title: 'Pencarian Data',
                            text: 'Mencari Data User..'
                        });
                    } else {
                        Swal.fire({
                            title: 'Memeriksa data...',
                            text: 'Mohon tunggu beberapa saat',
                            allowOutsideClick: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });

                        setTimeout(function() {
                            let url = "{{ url('/ajaxGetNeural') }}" + `/${username}`;

                            $.ajax({
                                datatype: 'json',
                                url: url,
                                data: ""
                            }).done(async function(data) {
                                if (data.length > 2) {
                                    var json_str = "{\"parent\":" + data + "}";
                                    var content = JSON.parse(json_str);
                                    for (let x = 0; x < content.parent.length; x++) {
                                        for (let y = 0; y < content.parent[x].descriptors.length; y++) {
                                            let results = Object.values(content.parent[x].descriptors[y]);
                                            content.parent[x].descriptors[y] = new Float32Array(results);
                                        }
                                    }
                                    faceMatcher = await createFaceMatcher(content);
                                    Swal.close();
                                    onPlay();
                                } else {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Tidak ada data',
                                        text: `Username "${username}" tidak ditemukan!`
                                    });
                                }
                            });
                        }, 2000); // Jeda 2 detik sebelum melakukan request
                    }
                }

                async function createFaceMatcher(data) {
                    const labeledFaceDescriptors = await Promise.all(data.parent.map(className => {
                        return new faceapi.LabeledFaceDescriptors(
                            className.label,
                            className.descriptors.map(d => new Float32Array(d))
                        );
                    }));
                    return new faceapi.FaceMatcher(labeledFaceDescriptors, 0.6);
                }
                async function handleCapture(buttonId, url) {
                    Swal.fire({
                        title: 'Processing...',
                        text: 'Detecting face, please wait.',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    var canvas = document.createElement('canvas');
                    canvas.width = width;
                    canvas.height = height;
                    var context = canvas.getContext('2d');
                    context.drawImage(video, 0, 0, width, height);
                    var new_image_url = canvas.toDataURL();
                    var img = document.createElement('img');
                    img.src = new_image_url;

                    let lat = document.getElementById("lat").value;
                    let long = document.getElementById("long").value;

                    $.ajax({
                        type: 'POST',
                        url: url, // URL bergantung pada tombol yang diklik
                        data: {
                            username: label,
                            image: img.src,
                            lat: lat,
                            long: long
                        },
                        cache: false,
                        success: function(msg) {
                            let message = '';
                            switch (msg) {
                                case 'masuk':
                                    message = 'Berhasil Masuk';
                                    break;
                                case 'outlocation':
                                    message = 'Anda Berada Di Luar Radius Kantor';
                                    break;
                                case 'selesai':
                                    message = 'Anda Sudah Selesai Absen Masuk Hari Ini';
                                    break;
                                case 'noMs':
                                    message = 'Hubungi Admin Untuk Input Shift Anda';
                                    break;
                                default:
                                    message = 'Tidak Ada Data User';
                            }
                            Swal.fire(message, '', msg === 'masuk' ? 'success' : 'error');
                            setTimeout(() => Swal.close(), 2000);
                            document.getElementById(buttonId).disabled = true;
                        },
                        error: function(data) {
                            console.error('Error:', data);
                        }
                    });
                }

                $("#capture").click(function() {
                    handleCapture('capture', '/presensi/store');
                });

                // Event listener untuk tombol absen pulang
                $("#captures").click(function() {
                    handleCapture('captures', '/presensi-pulang/store');
                });
                $("#captures_kehadiran").click(function() {
                    handleCapture('captures_kehadiran', '/presensi-kehadiran/store');
                });

                async function onPlay() {
                    if (faceMatcher) {
                        const displaySize = {
                            width: video.videoWidth,
                            height: video.videoHeight
                        };
                        faceapi.matchDimensions(canvas, displaySize);

                        const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions())
                            .withFaceLandmarks()
                            .withFaceDescriptors();
                        const resizedDetections = faceapi.resizeResults(detections, displaySize);
                        const results = resizedDetections.map(d => faceMatcher.findBestMatch(d.descriptor));

                        ctx.clearRect(0, 0, canvas.width, canvas.height);

                        results.forEach((result, i) => {
                            const box = resizedDetections[i].detection.box;
                            const drawBox = new faceapi.draw.DrawBox(box, {
                                label: result.toString()
                            });
                            drawBox.draw(canvas);

                            let label = result.label;
                            let distance = result.distance;

                            if (label !== "unknown" && distance < 0.55) {
                                if (document.getElementById('capture')) {
                                    document.getElementById('capture').disabled = false;
                                } else if (document.getElementById('captures')) {
                                    document.getElementById('captures').disabled = false;
                                } else if (document.getElementById('captures_kehadiran')) {
                                    document.getElementById('captures_kehadiran').disabled = false;
                                }
                                $(document).ready(function() {
                                    $("#capture, #captures,#captures_kehadiran").click(async function() {
                                        Swal.fire({
                                            title: 'Processing...',
                                            text: 'Detecting face, please wait.',
                                            allowOutsideClick: false,
                                            didOpen: () => {
                                                Swal.showLoading();
                                            }
                                        });

                                        var canvas = document.createElement('canvas');
                                        canvas.width = width;
                                        canvas.height = height;
                                        var context = canvas.getContext('2d');
                                        context.drawImage(video, 0, 0, width, height);
                                        var new_image_url = canvas.toDataURL();

                                        let lat = document.getElementById("lat").value;
                                        let long = document.getElementById("long").value;
                                        let buttonId = $(this).attr('id');
                                        let url;

                                        switch (buttonId) {
                                            case 'capture':
                                                url = "/presensi/store";
                                                break;
                                            case 'captures':
                                                url = "/presensi-pulang/store";
                                                break;
                                            case 'captures_kehadiran':
                                                url = "/presensi-kehadiran/store";
                                                break;
                                        }

                                        $.ajax({
                                            type: 'POST',
                                            url: url,
                                            data: {
                                                username: label,
                                                image: new_image_url,
                                                lat: lat,
                                                long: long
                                            },
                                            cache: false,
                                            success: function(msg) {
                                                let message = '';
                                                switch (msg) {
                                                    case 'masuk':
                                                        message = 'Berhasil Masuk';
                                                        break;
                                                    case 'outlocation':
                                                        message =
                                                            'Anda Berada Di Luar Radius Kantor';
                                                        break;
                                                    case 'belum':
                                                        message =
                                                            'Belum Memasuki Jam Absensi ';
                                                        break;
                                                    case 'selesai':
                                                        message =
                                                            'Anda Sudah Selesai Absen Hari Ini';
                                                        break;
                                                    case 'noMs':
                                                        message =
                                                            'Hubungi Admin Untuk Input Shift Anda';
                                                        break;
                                                    case 'selesai cek':
                                                        message =
                                                            'Jam Cek Kehadiran Telah Selesai';
                                                        break;
                                                    default:
                                                        message =
                                                            'Tidak Ada Data User ';
                                                }
                                                Swal.fire(message, '', msg ===
                                                    'masuk' || msg === 'selesai' ?
                                                    'success' : 'error');
                                                setTimeout(() => Swal.close(), 2000);
                                                document.getElementById('capture')
                                                    ?.setAttribute("disabled", "true");
                                                document.getElementById('captures')
                                                    ?.setAttribute("disabled", "true");
                                                document.getElementById(
                                                        'captures_kehadiran')
                                                    ?.setAttribute("disabled", "true");
                                            },
                                            error: function(xhr, status, error) {
                                                console.error('Error:', xhr
                                                    .responseText);
                                                let errorMessage = xhr.responseText ?
                                                    xhr.responseText :
                                                    'Terjadi kesalahan, coba lagi';
                                                Swal.fire('Error!',
                                                    errorMessage,
                                                    'error');
                                            }
                                        });
                                    });
                                });

                            }
                        });
                    }

                    setTimeout(() => onPlay(), 2000);
                }
            </script>
            </center>
        </div>
    @endpush

@endsection