<!DOCTYPE html>
<html lang="en" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>نظام الحضور والانصراف</title>
     <style>
        body {
            margin: 0;
            font-family: 'cairo', Tahoma, Geneva, Verdana, sans-serif;
            background: url('https://www.transparenttextures.com/patterns/cartographer.png');
            background-size: 100px 100px;
            direction: ltr;
        }

        .container {
            width: 100%;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            text-align: center;
        }
        .bottom-alert {
            background: #e2e0e0;
            color: black;
            padding: 10px;
            font-size: 14px;
            width: 480px;
            height: 60px;
            position: relative;
        }
        .scaled {
            transform: scale(0.78);
            transform-origin: top center;
        }

        .bottom-alert span{
            padding-right: 50px;
            position: absolute;
            right: 10px;
            bottom: 30px;
        }
        .top-alert {
            background: #f8d7da;
            color: #721c24;
            padding: 10px;
            font-size: 14px;
            border-radius: 5px;
            margin-bottom: 10px;
            direction: rtl;
        }
        .time-area {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .time-box {
            margin-right: 180px;
            font-size: 24px;
            padding: 10px;
            background: white;
            border-radius: 5px;
            border: 1px solid #ccc;
            min-width: 190px;
            text-align: center;
        }
        .p-iput {
            background: #e2e0e0;
        }
        .pin-input {
            width: 493px;
            font-size: 16px;
            height: 30px;
            margin-top: 45px;
            text-align: center;
        }
        .buttons-grid {
            width: 500px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin-top: 35px;
            margin-bottom: 20px;
        }
        .top-alert a.alone {

            text-align: left;
            display: block;

        }

        button {
            font-size: 18px;
            padding: 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .green { background: #4CAF50; color: white; }
        .yellow { background: #ffc107; color: white; }
        .blue { background: #17a2b8; color: white; }
        .red { background: #dc3545; color: white; }
        .num-btn {
            background: #e2e0e0;
        }

        /* تعديلات للشاشات الصغيرة */
        @media only screen and (max-width: 768px) {
            .top-alert a.alone {
                font-weight: bold;
                text-align: left;
                display: block;
                margin-left: 0;
            }

           /* .scaled {
    transform: none;
} */


            body {
                padding-right: 60px;



            }




            .container {
                padding: 15px;
            }



            .top-alert {
                width: 90%;
                margin: 10px auto;
                padding: 20px;

                border-radius: 10px;
                direction: rtl;
                text-align: right;
                box-shadow:white;
                font-size: 16px;
                line-height: 1.7;
            }

            .top-alert a {


                font-weight: bold;
            }

            .time-area {
                flex-direction: column-reverse;
                align-items: center;


            }

            .time-box {
                margin-right: 0;
                margin-top: 20px;
                font-size: 18px;
                min-width:190px;
                margin-bottom: 20px;
            }

  .bottom-alert {
        width: 104%;
        max-width: none;
        height: auto;
        padding: 15px;
        margin: 10px auto 0 auto;
        box-sizing: border-box;
    }

    .bottom-alert span {
        position: static;
        display: block;
        padding-right: 0;
        margin-top: 10px;
        text-align: center;
    }

    .pin-input {
        width: 100%;
        margin-top: 15px;
       margin-left: -3px;
        transform: none !important;
    }

            .buttons-grid {
                width: 104%;
                grid-template-columns: repeat(4, 1fr);
                gap: 12px;
                margin-top: 10px;
            }

            button {
                font-size: 16px;
                padding: 20px;
            }

            .logo-img {
                position: relative !important;
                left: auto !important;
                transform: none !important;
                height: 70px;

                padding-top:40px;
            }

            div[style*="margin-right: 500px"] {
                margin-right: 0 !important;
                text-align: center;
            }
        }

        @media only screen and (max-width: 480px) {
            button {
                font-size: 13px;
                padding: 6px;
            }

            .buttons-grid {
                gap: 5px;
            }

            .top-alert {
                font-size: 12px;
            }
        }

        .logo-img {
            width: 200px;
            height: 120px;
            object-fit: contain;
            max-width: 100%;
            margin-top: -40px;
            position: absolute;
            left: 90%;
            transform: translateX(-50%);
            background-color: white;
        }
    </style>

</head>
<body>
    <div class="container scaled">
    <div class="container">
        <div class="top-alert">

            <a href="" target="_blank" class="alone">تسجيل الخروج</a><br>
            تنويه هام: لضمان أدق نتيجة في تسجيل موقع الموظف الجغرافي، ولتشغيل خاصية التعرف على بصمة الوجه، يجب عليك استخدام تطبيق "كامتند التبصيم Camtend TR" وذلك بدلاً من استخدام هذه الصفحة. يمكنك تحميل التطبيق من متجر
            <a href="https://play.google.com/store" target="_blank">جوجل</a> أو
            <a href="https://www.apple.com/app-store/" target="_blank">أبل</a> وتشغيله على أي جهاز يعمل بهذه الأنظمة.
        </div>


        <div class="time-area">

<div class="bottom-alert">
    Type Employee PIN then hit a button
       <span>عزيزي الموظف قم بكتابة رقم تبصيمك هنا ثم اضغط علي الزر المناسب
    </span>


 <input type="password" name="fingerprint_code" class="pin-input" readonly  style="transform: translateX(-11px);" id="fingerprint_code" />
 <input type="hidden" name="_token" value="<?php echo e(csrf_token()); ?>">


 <video id="video" width="320" height="240" autoplay style="display: none;"></video>
    <canvas id="canvas" width="320" height="240" style="display: none;"></canvas>

    </div>

            <div class="time-box">
                <div id="iraq-date" style="color: red; font-size: 14px;  margin-bottom: 5px;">

                </div>
                <div id="iraq-time" style="font-size: 24px; ">

                </div>
            </div>
            <div class="logo-container">
                <img src="<?php echo e(asset('logo_image/' . $setting->logo)); ?>" class="logo-img">
            </div>


        </div>

        <div class="buttons-grid">
            <button class="green" id="check-in"> Check-In حضور</button>
            <button class="num-btn" data-key="9">9</button>
            <button class="num-btn" data-key="8">8</button>
            <button class="num-btn" data-key="7">7</button>
            <button class="yellow" id="break-out">Break-Out خروج مؤقت </button>
            <button class="num-btn" data-key="6">6</button>
            <button class="num-btn" data-key="5">5</button>
            <button class="num-btn" data-key="4">4</button>
            <button class="blue" id="break-in"> Break-In عودة</button>
            <button class="num-btn" data-key="3">3</button>
            <button class="num-btn" data-key="2">2</button>
            <button class="num-btn" data-key="1">1</button>
            <button class="red" id="check-out">  Check-Out انصراف</button>
            <button class="num-btn" style="font-weight: bold; font-size: 30px;">←</button>


            <button class="num-btn" data-key="0">0</button>
            <button class="num-btn key clear" style="font-weight: bold; font-size: 30px;">×</button>

        </div>



        <div style="margin-top: 30px; margin-right: 500px; color: #777;">
               جميع الحقوق محفوظة &copy; <?php echo e(now()->year); ?> شركة الميار لهندسة الاتصالات
        </div>

        <div style="margin-top: 20px; margin-right: 500px;">
            <img src="<?php echo e(asset(('logo.png'))); ?>" alt="CamTend Logo" style="width: 80px;">
        </div>
    </div>
</div>
<script>
    let pin = '';
    let actionType = '';

    function updateIraqDateTime() {
        const now = new Date();
        const iraqOffset = 3 * 60;
        const localOffset = now.getTimezoneOffset();
        const iraqTime = new Date(now.getTime() + (iraqOffset + localOffset) * 60000);

        const hours = iraqTime.getHours().toString().padStart(2, '0');
        const minutes = iraqTime.getMinutes().toString().padStart(2, '0');
        const seconds = iraqTime.getSeconds().toString().padStart(2, '0');
        document.getElementById('iraq-time').textContent = `${hours}:${minutes}:${seconds}`;

        const day = iraqTime.getDate().toString().padStart(2, '0');
        const month = (iraqTime.getMonth() + 1).toString().padStart(2, '0');
        const year = iraqTime.getFullYear();
        document.getElementById('iraq-date').textContent = `${year}-${month}-${day}`;
    }

    updateIraqDateTime();
    setInterval(updateIraqDateTime, 1000);

    document.addEventListener('DOMContentLoaded', function () {
        const inputField = document.getElementById('fingerprint_code');
        const keys = document.querySelectorAll('.num-btn');
        const clearButton = document.querySelector('.key.clear');

        keys.forEach(function (key) {
            key.addEventListener('click', function () {
                if (key.textContent.trim() !== '←' && pin.length < 10) {
                    pin += key.getAttribute('data-key') || key.textContent.trim();
                    inputField.value = pin;
                }
            });
        });


        clearButton.addEventListener('click', function () {
            pin = '';
            inputField.value = pin;
        });


        document.getElementById('check-in').addEventListener('click', function () {
            actionType = 'check-in';
        });
        document.getElementById('break-out').addEventListener('click', function () {
            actionType = 'break-out';
        });
        document.getElementById('break-in').addEventListener('click', function () {
            actionType = 'break-in';
        });
        document.getElementById('check-out').addEventListener('click', function () {
            actionType = 'check-out';
        });


        document.querySelectorAll('.buttons-grid button').forEach(button => {
            if (button.textContent.trim() === '←') {
                button.addEventListener('click', function (e) {
                    e.preventDefault();
                    sendData();
                });
            }
        });
    });

    async function sendData() {
        if (pin === '') {
            alert('يرجى إدخال رقم التبصيم.');
            return;
        }
        if (actionType === '') {
            alert('يرجى اختيار نوع العملية.');
            return;
        }

        if (!navigator.geolocation) {
            alert('المتصفح لا يدعم الموقع الجغرافي.');
            return;
        }

        navigator.geolocation.getCurrentPosition(async (position) => {
            const latitude = position.coords.latitude;
            const longitude = position.coords.longitude;

            try {

                const verifyResponse = await fetch('/verify-employee', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>'
                    },
                    body: JSON.stringify({ fingerprint_code: pin })
                });

                const verifyResult = await verifyResponse.json();

                if (!verifyResult.success) {
                    alert('رقم التبصيم غير صحيح');
                    return;
                }


                const imageBlob = await captureFaceImage();

                const formData = new FormData();
                formData.append('fingerprint_code', pin);
                formData.append('type', actionType);
                formData.append('latitude', latitude);
                formData.append('longitude', longitude);
                formData.append('photo', imageBlob, 'face.png');
                formData.append('_token', '<?php echo e(csrf_token()); ?>'); // توكن CSRF


                axios.post("<?php echo e(route('web_attendance')); ?>", formData, {
                    headers: {
                        "Content-Type": "multipart/form-data",
                    },
                })
                .then(function (response) {
                    alert("تم التسجيل بنجاح");
                })
                .catch(function (error) {
                    if (error.response) {
                        alert("خطأ: " + JSON.stringify(error.response.data));
                    } else {
                        alert("حدث خطأ غير متوقع");
                    }
                });

            } catch (error) {
                console.error(error);
                alert('حدث خطأ أثناء الإرسال.');
            } finally {

                pin = '';
                actionType = '';
                document.getElementById('fingerprint_code').value = '';
            }
        }, (error) => {
            alert('حدث خطأ أثناء الحصول على الموقع الجغرافي: ' + error.message);
        });
    }

    async function captureFaceImage() {
        const video = document.getElementById('video');
        const canvas = document.getElementById('canvas');

        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
        video.srcObject = stream;
        video.play();

        return new Promise((resolve) => {
            setTimeout(() => {
                const context = canvas.getContext('2d');
                context.drawImage(video, 0, 0, canvas.width, canvas.height);
                stream.getTracks().forEach(track => track.stop());

                canvas.toBlob((blob) => {
                    resolve(blob);
                }, 'image/png');
            }, 1500);
        });
    }


</script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>


</body>
</html>
<?php /**PATH C:\xampp_new\htdocs\Footprint_project\resources\views/index.blade.php ENDPATH**/ ?>