<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>دورة العمل التفصيلية - Decision Tree</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://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&display=swap" rel="stylesheet">
    
    <style>
        body { font-family: 'Cairo', sans-serif; background-color: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
        
        .diagram-container {
            max-width: 100%;
            margin: 20px auto;
            padding: 20px;
        }

        /* الصناديق الأساسية */
        .process-box {
            background: #fff;
            border: 2px solid #333;
            border-radius: 12px;
            padding: 15px;
            text-align: center;
            position: relative;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            z-index: 2;
            min-height: 140px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .process-icon {
            font-size: 28px;
            margin-bottom: 10px;
            color: #fff;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* ألوان الأدوار */
        .bg-requester { background-color: #6c757d; border-color: #6c757d; }
        .bg-reviewer { background-color: #0d6efd; border-color: #0d6efd; } /* مشرف/مشتريات */
        .bg-ceo { background-color: #dc3545; border-color: #dc3545; }
        .bg-execution { background-color: #198754; border-color: #198754; }

        /* أسهم التوصيل */
        .connector-line {
            position: absolute;
            background-color: #999;
            z-index: 1;
        }
        
        /* خطوط عمودية وأفقية */
        .line-vertical { width: 3px; height: 40px; left: 50%; transform: translateX(-50%); }
        .line-horizontal { height: 3px; top: 50%; }

        /* بطاقات الإيميل */
        .email-alert {
            background-color: #fff3cd;
            border: 1px dashed #ffc107;
            color: #856404;
            font-size: 11px;
            padding: 4px 8px;
            border-radius: 20px;
            margin-top: 8px;
            display: inline-block;
            width: 100%;
        }

        /* تنسيق خاص للطباعة */
        @media print {
            @page { size: A4 landscape; margin: 5mm; }
            body { padding: 0; margin: 0; zoom: 95%; } /* تصغير قليلاً لتناسب الصفحة */
            .no-print { display: none !important; }
            .process-box { box-shadow: none; border-width: 2px; }
            .line-success { border-color: #198754 !important; background-color: #198754 !important; }
            .line-danger { border-color: #dc3545 !important; background-color: #dc3545 !important; }
            .line-warning { border-color: #ffc107 !important; background-color: #ffc107 !important; }
        }

        /* الأسهم الملونة */
        .arrow-down { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 10px solid #999; position: absolute; left: 50%; transform: translateX(-50%); bottom: -12px; }
        
        /* تلوين المسارات */
        .path-success { color: #198754; font-weight: bold; }
        .path-danger { color: #dc3545; font-weight: bold; }
        .path-warning { color: #ffc107; font-weight: bold; text-shadow: 0px 0px 1px #999; }

    </style>
</head>
<body>

<div class="container-fluid">
    <div class="text-center mt-3 no-print">
        <button onclick="window.print()" class="btn btn-primary btn-lg"><i class="bi bi-printer"></i> طباعة المخطط (Landscape)</button>
    </div>

    <div class="diagram-container">
        <div class="text-center mb-4 pb-2 border-bottom">
            <div class="d-flex justify-content-center align-items-center gap-3">
                <img src="../assets/images/emirates_club_logo.png" alt="Logo" style="height: 60px;">
                <div class="text-end">
                    <h3 class="fw-bold m-0" style="color: #007A33;">آلية عمل نظام الطلبات الموحد</h3>
                    <p class="text-muted m-0 small">Workflow & Decision Making Process</p>
                </div>
            </div>
        </div>

        <div class="row justify-content-center mb-5">
            <div class="col-md-3">
                <div class="process-box" style="border-color: #6c757d;">
                    <div class="process-icon bg-requester"><i class="bi bi-pencil-square"></i></div>
                    <h6 class="fw-bold">1. إنشاء الطلب</h6>
                    <small>الموظف / المدرب</small>
                    <div class="email-alert"><i class="bi bi-send"></i> إشعار أوتوماتيكي للمسؤول</div>
                    <div class="connector-line line-vertical" style="bottom: -42px; height: 40px; background: #6c757d;"></div>
                    <div class="arrow-down" style="border-top-color: #6c757d; bottom: -50px;"></div>
                </div>
            </div>
        </div>

        <div class="row justify-content-center mb-5">
            <div class="col-md-6">
                <div class="process-box" style="border-color: #0d6efd;">
                    <div class="process-icon bg-reviewer"><i class="bi bi-search"></i></div>
                    <h6 class="fw-bold">2. التدقيق والتأشير (الفلترة)</h6>
                    <div class="d-flex justify-content-around w-100 mt-2">
                        <small class="border p-1 rounded">رياضي &#8592; المشرف العام</small>
                        <small class="border p-1 rounded">إداري &#8592; المشتريات</small>
                    </div>
                    <div class="email-alert"><i class="bi bi-check2"></i> في حال صحة الطلب: تحويل + إيميل للمدير</div>
                    
                    <div class="connector-line line-vertical" style="bottom: -42px; height: 40px; background: #0d6efd;"></div>
                    <div class="arrow-down" style="border-top-color: #0d6efd; bottom: -50px;"></div>
                </div>
            </div>
        </div>

        <div class="row justify-content-center mb-4">
            <div class="col-md-4">
                <div class="process-box bg-light" style="border: 3px solid #dc3545; min-height: 160px;">
                    <div class="process-icon bg-ceo"><i class="bi bi-gavel"></i></div>
                    <h5 class="fw-bold">3. المدير التنفيذي (اتخاذ القرار)</h5>
                    <p class="small mb-1">مراجعة التفاصيل، الملاحظات، والميزانية.</p>
                    <small class="text-danger fw-bold">نقطة القرار الحاسمة</small>
                </div>
            </div>
        </div>

        <div class="row justify-content-center position-relative mb-2" style="height: 40px;">
            <div class="connector-line" style="top: 0; left: 20%; right: 20%; height: 3px; background: #333;"></div>
            <div class="connector-line" style="top: 0; left: 20%; height: 30px; width: 3px; background: #dc3545;"></div> <div class="connector-line" style="top: 0; left: 50%; height: 30px; width: 3px; background: #ffc107; transform: translateX(-50%);"></div> <div class="connector-line" style="top: 0; right: 20%; height: 30px; width: 3px; background: #198754;"></div> </div>

        <div class="row justify-content-center">
            
            <div class="col-md-3">
                <div class="process-box" style="border-color: #dc3545; background-color: #fff5f5;">
                    <h6 class="path-danger"><i class="bi bi-x-circle-fill"></i> تم الرفض</h6>
                    <div class="alert alert-danger p-1 small w-100 mb-1">
                        <i class="bi bi-envelope"></i> إيميل للموظف بالرفض + السبب
                    </div>
                    <small class="text-muted">أرشفة الطلب كـ "مرفوض"</small>
                    <div class="badge bg-secondary mt-2">نهاية المسار 🛑</div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="process-box" style="border-color: #ffc107; background-color: #fffff0;">
                    <h6 class="path-warning"><i class="bi bi-exclamation-triangle-fill"></i> موافقة مشروطة</h6>
                    <div class="alert alert-warning p-1 small w-100 mb-1">
                        <i class="bi bi-envelope"></i> إيميل للموظف بالشروط
                    </div>
                    <div class="alert alert-info p-1 small w-100 mb-0">
                        <i class="bi bi-bell"></i> إشعار للمشتريات للتنفيذ بحذر
                    </div>
                    <i class="bi bi-arrow-down text-success fs-4 mt-1"></i>
                </div>
            </div>

            <div class="col-md-3">
                <div class="process-box" style="border-color: #198754; background-color: #f0fff4;">
                    <h6 class="path-success"><i class="bi bi-check-circle-fill"></i> اعتماد كلي</h6>
                    <div class="alert alert-success p-1 small w-100 mb-1">
                        <i class="bi bi-envelope"></i> إيميل للموظف: "تمت الموافقة"
                    </div>
                    <div class="alert alert-primary p-1 small w-100 mb-0">
                        <i class="bi bi-bell"></i> إشعار للمشتريات للبدء فوراً
                    </div>
                    <i class="bi bi-arrow-down text-success fs-4 mt-1"></i>
                </div>
            </div>
        </div>

        <div class="row justify-content-center mt-3">
            <div class="col-md-5 offset-md-3"> <div class="process-box" style="border: 2px dashed #198754;">
                    <div class="process-icon bg-execution"><i class="bi bi-cash-stack"></i></div>
                    <h6 class="fw-bold">4. المشتريات (التنفيذ والإغلاق)</h6>
                    <p class="small mb-1">شراء المواد / صرف المبلغ + رفع الفاتورة</p>
                    <div class="badge bg-dark w-100 py-2">
                        <i class="bi bi-archive-fill"></i> تحول الحالة إلى "مكتمل" (Completed) + أرشفة نهائية
                    </div>
                </div>
            </div>
        </div>

    </div>
    
    <div class="text-center mt-4 mb-5 no-print">
        <small class="text-muted">تم تصميم هذا المخطط ليوضح آلية الأتمتة الكاملة للنظام - إدارة تقنية المعلومات</small>
    </div>
</div>

</body>
</html>