<!DOCTYPE html>
<html>
<head>
    <title>نظام الحضور بالبصمة</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body { direction: rtl; padding: 20px; }
        .camera-preview { max-width: 100%; display: none; margin-top: 15px; }
        .countdown {
            font-size: 5rem;
            font-weight: bold;
            color: #dc3545;
            text-align: center;
            margin: 20px 0;
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="text-center mb-4">تسجيل الحضور</h1>

        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <div id="step1">
                            <div class="mb-3">
                                <label for="employee_id" class="form-label">رقم البصمة</label>
                                <input type="number" id="employee_id" class="form-control" placeholder="أدخل رقم البصمة">
                            </div>

                            <div class="mb-3">
                                <label for="attendance_type" class="form-label">نوع الحركة</label>
                                <select id="attendance_type" class="form-control">
                                    <option value="checkin">حضور</option>
                                    <option value="checkout">انصراف</option>
                                    <option value="breakin">بداية إستراحة</option>
                                    <option value="breakout">نهاية إستراحة</option>
                                </select>
                            </div>

                            <button id="verify_btn" class="btn btn-primary w-100">ارسال</button>
                        </div>

                        <div id="step2" style="display: none;">
                            <div class="alert alert-success mb-3">تم التحقق بنجاح! يرجى التقاط الصورة الآن</div>

                            <div class="text-center">
                                <video id="camera_feed" autoplay class="camera-preview"></video>
                                <div id="countdown" class="countdown">3</div>
                                <canvas id="canvas" class="d-none"></canvas>
                                <button id="capture_btn" class="btn btn-success mt-3">التقاط الصورة</button>
                            </div>

                            <div id="capture_result" class="text-center mt-3"></div>
                            <button id="submit_btn" class="btn btn-primary w-100 mt-3" disabled>إرسال البيانات</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        // المتغيرات العامة
        let stream = null;
        const employeeIdInput = document.getElementById('employee_id');
        const typeSelect = document.getElementById('attendance_type');
        const step1Div = document.getElementById('step1');
        const step2Div = document.getElementById('step2');
        const cameraFeed = document.getElementById('camera_feed');
        const canvas = document.getElementById('canvas');
        const captureBtn = document.getElementById('capture_btn');
        const submitBtn = document.getElementById('submit_btn');
        const captureResult = document.getElementById('capture_result');
        const countdownElement = document.getElementById('countdown');
        let capturedImage = null;
        let countdownInterval;

        // 1. التحقق من رقم البصمة
        document.getElementById('verify_btn').addEventListener('click', async () => {
            const employeeId = employeeIdInput.value.trim();

            if (!employeeId) {
                Swal.fire('خطأ', 'الرجاء إدخال رقم البصمة', 'error');
                return;
            }

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

                const result = await response.json();

                if (result.exists) {
                    Swal.fire('نجاح', 'رقم البصمة صحيح، سيتم فتح الكاميرا الآن', 'success');
                    step1Div.style.display = 'none';
                    step2Div.style.display = 'block';
                    startCamera();
                } else {
                    Swal.fire('خطأ', 'رقم البصمة غير مسجل في النظام', 'error');
                }
            } catch (error) {
                Swal.fire('خطأ', 'فشل الاتصال بالخادم', 'error');
                console.error(error);
            }
        });

        // 2. تشغيل الكاميرا
        async function startCamera() {
            try {
                stream = await navigator.mediaDevices.getUserMedia({ video: true });
                cameraFeed.srcObject = stream;
                cameraFeed.style.display = 'block';

                // بدء العد التنازلي تلقائياً بعد تشغيل الكاميرا
                startCountdown();
            } catch (error) {
                Swal.fire('خطأ', 'لا يمكن الوصول إلى الكاميرا: ' + error.message, 'error');
                console.error("Camera error: ", error);
            }
        }

        // بدء العد التنازلي
        function startCountdown() {
            let count = 3;
            countdownElement.style.display = 'block';
            countdownElement.textContent = count;

            countdownInterval = setInterval(() => {
                count--;
                countdownElement.textContent = count;

                if (count <= 0) {
                    clearInterval(countdownInterval);
                    countdownElement.style.display = 'none';
                    capturePhoto();
                }
            }, 1000);
        }

        // التقاط الصورة
        function capturePhoto() {
            canvas.width = cameraFeed.videoWidth;
            canvas.height = cameraFeed.videoHeight;
            canvas.getContext('2d').drawImage(cameraFeed, 0, 0, canvas.width, canvas.height);

            capturedImage = canvas.toDataURL('image/jpeg');
            captureResult.innerHTML = '<img src="' + capturedImage + '" class="img-thumbnail" style="max-height: 150px;">';
            submitBtn.disabled = false;

            // إيقاف الكاميرا بعد التقاط الصورة
            if (stream) {
                stream.getTracks().forEach(track => track.stop());
                cameraFeed.style.display = 'none';
            }
        }

        // 3. التقاط الصورة عند الضغط على الزر (اختياري)
        captureBtn.addEventListener('click', () => {
            // إيقاف العد التنازلي إذا كان يعمل
            clearInterval(countdownInterval);
            countdownElement.style.display = 'none';

            capturePhoto();
        });

        // 4. إرسال البيانات النهائية
        submitBtn.addEventListener('click', async () => {
            if (!capturedImage) {
                Swal.fire('خطأ', 'الرجاء التقاط الصورة أولاً', 'error');
                return;
            }

            try {
                const response = await fetch('/attendance/store', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>'
                    },
                    body: JSON.stringify({
                        employee_id: employeeIdInput.value.trim(),
                        type: typeSelect.value,
                        image: capturedImage
                    })
                });

                const result = await response.json();

                if (result.success) {
                    Swal.fire('نجاح', 'تم تسجيل الحضور بنجاح', 'success').then(() => {
                        location.reload(); // إعادة تحميل الصفحة
                    });
                } else {
                    Swal.fire('خطأ', result.error || 'حدث خطأ غير معروف', 'error');
                }
            } catch (error) {
                Swal.fire('خطأ', 'فشل في إرسال البيانات: ' + error.message, 'error');
                console.error(error);
            }
        });
    </script>
</body>
</html>
<?php /**PATH C:\xampp\htdocs\icsc.industry.gov.iq\resources\views/index.blade.php ENDPATH**/ ?>