<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>بطاقة التصريح الأمني</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>

        body {
            background-color: #6f7275;
            font-family: 'Tahoma', Arial, sans-serif;
        }

        .permit-card {
            width: 148mm; /* عرض A5 */
            height: 210mm; /* ارتفاع A5 */
            margin: 0 auto;
            background: white;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
            overflow: hidden;
            position: relative;
        }
        .permit-header {
            background-color: #2c3e50;
            color: white;
            padding: 15px;
            text-align: center;
        }
        .permit-body {
            padding: 20px;
        }
        .permit-photo {
            width: 120px;
            height: 150px;
            object-fit: cover;
            border: 2px solid #ddd;
            border-radius: 5px;
            margin: 0 auto 15px;
            display: block;
        }
        .permit-qrcode {
            width: 100px;
            height: 100px;
            margin: 10px auto;
            display: block;
        }
        .info-row {
            display: flex;
            margin-bottom: 10px;
            border-bottom: 1px solid #eee;
            padding-bottom: 8px;
        }
        .info-label {
            font-weight: bold;
            width: 40%;
            color: #2c3e50;
        }
        .info-value {
            width: 60%;
        }
        .permit-footer {
            background-color: #f1f1f1;
            padding: 10px;
            text-align: center;
            font-size: 12px;
            position: absolute;
            bottom: 0;
            width: 100%;
        }
        .valid-badge {
            background-color: #28a745;
            color: white;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 14px;
            display: inline-block;
            margin-bottom: 15px;
        }
        .company-logo {
            max-height: 50px;
            margin-bottom: 10px;
        }


        .print-actions {
            text-align: center;
            margin-top: 20px;
        }
        @media print {
            body {
                background: none;
            }
            .permit-card {
                box-shadow: none;
                page-break-after: always;
            }
            .print-actions {
                display: none !important;
            }
        }
        @media (max-width: 768px) {
            .permit-card {
                width: 100%;
                height: auto;
            }
        }
    </style>
</head>
<body>
    <div class="container py-4">
        <div class="permit-card">
            <div class="permit-header">
                <img src="<?php echo e(asset('About_image/logo.png')); ?>" alt="شعار الشركة" class="company-logo">
                <h2>بطاقة التصريح الأمني</h2>
            </div>

            <div class="permit-body">
                <div class="row">
                    <div class="col-md-4 text-center">
                        <?php if($permit->photo): ?>
                            <img src="<?php echo e(asset('photos/' . $permit->photo)); ?>" class="permit-photo">
                        <?php endif; ?>

                        <?php if($permit->qr_code): ?>
                            <img src="<?php echo e(asset($permit->qr_code)); ?>" class="permit-qrcode">
                        <?php endif; ?>
                    </div>

                    <div class="col-md-8">
                        <div class="info-row">
                            <div class="info-label">رقم التصريح:</div>
                            <div class="info-value"><?php echo e($permit->permit_number); ?></div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">نوع التصريح:</div>
                            <div class="info-value"><?php echo e($permit->type->name); ?></div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">الاسم الكامل:</div>
                            <div class="info-value"><?php echo e($permit->full_name); ?></div>
                        </div>

                        <div class="info-row">
                            <div class="info-label">الجنس:</div>
                            <div class="info-value"><?php echo e($permit->gender); ?></div>
                        </div>

                        <div class="info-row">
                            <div class="info-label">الجنسية:</div>
                            <div class="info-value"><?php echo e($permit->nationality); ?></div>
                        </div>

                        <div class="info-row">
                            <div class="info-label">جهة العمل:</div>
                            <div class="info-value"><?php echo e($permit->organization); ?></div>
                        </div>

                        <div class="info-row">
                            <div class="info-label">الغرض من الدخول:</div>
                            <div class="info-value"><?php echo e($permit->purpose); ?></div>
                        </div>

                        <div class="info-row">
                            <div class="info-label">المناطق المسموحة:</div>
                            <div class="info-value"><?php echo e($permit->authorized_areas->name); ?></div>
                        </div>

                        <div class="info-row">
                            <div class="info-label">وقت الدخول:</div>
                            <div class="info-value"><?php echo e(\Carbon\Carbon::parse($permit->entry_time)->format('Y-m-d H:i')); ?></div>
                        </div>

                        <div class="info-row">
                            <div class="info-label">وقت الخروج:</div>
                            <div class="info-value"><?php echo e(\Carbon\Carbon::parse($permit->exit_time)->format('Y-m-d H:i')); ?></div>
                        </div>

                        <?php if($permit->notes): ?>
                        <div class="info-row">
                            <div class="info-label">ملاحظات:</div>
                            <div class="info-value"><?php echo e($permit->notes); ?></div>
                        </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>

        <div class="print-actions">
            <button onclick="window.print()" class="btn btn-primary me-2">طباعة البطاقة</button>
            <button id="shareBtn" class="btn btn-success">مشاركة عبر الواتساب</button>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.getElementById('shareBtn').addEventListener('click', function() {
            const permitLink = "<?php echo e(route('permits.show', $permit->id)); ?>";
            const shareText = `بطاقة التصريح الأمني - ${"<?php echo e($permit->full_name); ?>"}\nرقم التصريح: ${"<?php echo e($permit->permit_number); ?>"}\nرابط البطاقة: ${permitLink}`;

            if (navigator.share) {
                navigator.share({
                    title: 'بطاقة التصريح الأمني',
                    text: shareText,
                    url: permitLink
                }).catch(err => {
                    console.error('Error sharing:', err);
                    window.open(`https://wa.me/?text=${encodeURIComponent(shareText)}`, '_blank');
                });
            } else {
                window.open(`https://wa.me/?text=${encodeURIComponent(shareText)}`, '_blank');
            }
        });
    </script>
</body>
</html>
<?php /**PATH C:\xampp_new\htdocs\permits\resources\views/admin/permits/sheet.blade.php ENDPATH**/ ?>