<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>نقطة التحقق للدخول - مسح باركود</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --accent-color: #e74c3c;
            --light-color: #ecf0f1;
            --dark-color: #2c3e50;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            font-family: 'Tajawal', sans-serif;
        }

        .card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.95);
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
        }

        .card-header {
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 20px;
            border-bottom: none;
        }

        .card-title {
            font-weight: 700;
            margin-bottom: 0;
        }

        .card-body {
            padding: 30px;
        }

        #reader {
            width: 100%;
            max-width: 400px;
            margin: auto;
            border: 3px dashed var(--secondary-color);
            border-radius: 15px;
            padding: 15px;
            background-color: var(--light-color);
            position: relative;
            overflow: hidden;
        }

        #reader::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                to bottom right,
                rgba(52, 152, 219, 0.1) 0%,
                rgba(52, 152, 219, 0.3) 50%,
                transparent 50%,
                transparent 100%
            );
            animation: scannerLight 3s infinite linear;
            z-index: 0;
        }

        @keyframes scannerLight {
            0% {
                transform: translateY(-50%) translateX(-50%);
            }
            100% {
                transform: translateY(50%) translateX(50%);
            }
        }

        .btn-primary {
            background-color: var(--secondary-color);
            border-color: var(--secondary-color);
            padding: 10px 25px;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }

        .btn-primary:hover {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .btn-primary::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            background: rgba(255, 255, 255, 0.5);
            opacity: 0;
            border-radius: 100%;
            transform: scale(1, 1) translate(-50%);
            transform-origin: 50% 50%;
        }

        .btn-primary:focus:not(:active)::after {
            animation: ripple 1s ease-out;
        }

        @keyframes ripple {
            0% {
                transform: scale(0, 0);
                opacity: 0.5;
            }
            100% {
                transform: scale(20, 20);
                opacity: 0;
            }
        }

        .btn-danger {
            background-color: var(--accent-color);
            border-color: var(--accent-color);
            padding: 10px 25px;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s;
        }

        .btn-danger:hover {
            background-color: #c0392b;
            border-color: #c0392b;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .form-control {
            border-radius: 50px;
            padding: 12px 20px;
            border: 2px solid #ddd;
            transition: all 0.3s;
        }

        .form-control:focus {
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25);
        }

        .loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
            margin-right: 10px;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        .icon-animation {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }

        .security-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            background: var(--accent-color);
            color: white;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: bold;
            z-index: 10;
        }

        .scan-icon {
            font-size: 48px;
            color: var(--secondary-color);
            margin-bottom: 15px;
        }

        #loading-message {
            display: none;
            padding: 15px;
            border-radius: 10px;
            background-color: rgba(46, 204, 113, 0.1);
            color: #27ae60;
            font-weight: 600;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            <div class="card ">
                <div class="card-header text-center">
                    <h3 class="card-title">
                        <i class="fas fa-id-card-alt me-2"></i> بوابة التحقق الأمني
                    </h3>
                </div>
                <div class="card-body">
                    <div class="security-badge animate__animated animate__pulse animate__infinite">
                        <i class="fas fa-shield-alt me-1"></i> آمن
                    </div>

                    <div class="text-center mb-4">
                        <div class="scan-icon icon-animation">
                            <i class="fas fa-qrcode"></i>
                        </div>
                        <h4>مسح تصريح الدخول</h4>
                        <p class="text-muted">يُرجى إدخال رقم التصريح أو مسح الباركود عبر الكاميرا</p>
                    </div>

                    <?php if(session('error')): ?>
                        <div class="alert alert-danger animate__animated animate__shakeX">
                            <i class="fas fa-exclamation-circle me-2"></i> <?php echo e(session('error')); ?>

                        </div>
                    <?php endif; ?>

                    <?php if(session('success')): ?>
                        <div class="alert alert-success animate__animated animate__bounceIn">
                            <i class="fas fa-check-circle me-2"></i> <?php echo e(session('success')); ?>

                        </div>
                    <?php endif; ?>

                    <form method="POST" action="<?php echo e(route('gate.entry.check')); ?>" id="barcode-form">
                        <?php echo csrf_field(); ?>
                        <div class="form-group mb-4">
                            <label for="permit_code" class="form-label">رقم التصريح</label>
                            <div class="input-group">
                                <span class="input-group-text bg-primary text-white">
                                    <i class="fas fa-barcode"></i>
                                </span>
                                <input type="text" name="permit_code" id="permit_code"
                                       class="form-control text-center" required autofocus
                                       placeholder="أدخل الرقم أو امسح الباركود">
                            </div>
                        </div>

                        <div id="loading-message">
                            <div class="loading-spinner"></div>
                            جاري التحقق من التصريح، يرجى الانتظار...
                        </div>

                        <div class="d-flex justify-content-center gap-3 mt-4">
                            <button type="button" onclick="startScanner()" class="btn btn-primary">
                                <i class="fas fa-camera me-2"></i> بدء المسح
                            </button>
                            <button type="button" onclick="stopScanner()" class="btn btn-danger" id="stop-btn" style="display:none;">
                                <i class="fas fa-stop-circle me-2"></i> إيقاف
                            </button>
                        </div>
                    </form>

                    <div id="reader" class="mt-5" style="display: none;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- مكتبة html5-qrcode -->
<script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>
<!-- Font Awesome for icons -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>

<script>
    const permitCodeInput = document.getElementById('permit_code');
    const stopBtn = document.getElementById('stop-btn');
    const readerElement = document.getElementById('reader');
    let html5QrCode;

    function startScanner() {
        readerElement.style.display = 'block';
        const qrRegion = document.getElementById("reader");
        html5QrCode = new Html5Qrcode("reader");

        Html5Qrcode.getCameras().then(devices => {
            if (devices && devices.length) {
                const cameraId = devices[0].id; // أول كاميرا متاحة (غالبًا الأمامية)

                html5QrCode.start(
                    cameraId,
                    {
                        fps: 10,
                        qrbox: 250
                    },
                    qrCodeMessage => {
                        permitCodeInput.value = qrCodeMessage;
                        stopScanner();
                        document.getElementById('loading-message').style.display = 'block';
                        document.getElementById('barcode-form').submit();
                    },
                    errorMessage => {
                        // يمكن تجاهل الأخطاء المستمرة أثناء المسح
                    }
                ).then(() => {
                    stopBtn.style.display = 'inline-block';
                }).catch(err => {
                    alert("تعذر تشغيل الكاميرا: " + err);
                    readerElement.style.display = 'none';
                });
            } else {
                alert("لم يتم العثور على كاميرات.");
                readerElement.style.display = 'none';
            }
        }).catch(err => {
            alert("حدث خطأ في الوصول إلى الكاميرا: " + err);
            readerElement.style.display = 'none';
        });
    }

    function stopScanner() {
        if (html5QrCode) {
            html5QrCode.stop().then(() => {
                html5QrCode.clear();
                stopBtn.style.display = 'none';
                readerElement.style.display = 'none';
            }).catch(err => {
                console.error("خطأ عند إيقاف الكاميرا: ", err);
            });
        }
    }

    // إظهار رسالة التحميل عند إرسال النموذج
    document.getElementById('barcode-form').addEventListener('submit', function () {
        document.getElementById('loading-message').style.display = 'block';
    });

    // إرسال تلقائي بالضغط على Enter
    document.addEventListener('DOMContentLoaded', function () {
        permitCodeInput.focus();
        permitCodeInput.addEventListener('keypress', function (e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                document.getElementById('loading-message').style.display = 'block';
                document.getElementById('barcode-form').submit();
            }
        });
    });
</script>

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