<?php 
include('db_details.php');

$id = intval($_GET['id'] ?? 0);
$form_lang = trim($_GET['lang'] ?? 'en');

// مصفوفة الترجمات وإعدادات الاتجاهات للغتين
$lang_data = [
    'ar' => [
        'html_lang'   => 'ar',
        'html_dir'    => 'rtl',
        'title_tag'   => 'معلومات السحب',
        'title'       => 'متابعة حالة طلبك رقم: ' . $id,
        'sub_title'   => 'يتم تحديث حالة الطلب تلقائياً',
        'back_btn'    => 'العودة للصفحة الرئيسية',
        'arrow'       => '&rarr;',
        'arrow_trans' => 'translateX(4px)', // حركة السهم للخلف في اتجاه اليمين العربي
        'status'      => [
            'pending'   => 'قيد التنفيذ',
            'approved'  => '✓ تمت الموافقة بنجاح',
            'rejected'  => '✕ تم رفض الطلب',
            'not_found' => 'السجل غير موجود'
        ]
    ],
    'en' => [
        'html_lang'   => 'en',
        'html_dir'    => 'ltr',
        'title_tag'   => 'Withdrawal Information',
        'title'       => 'Track your request status No: ' . $id,
        'sub_title'   => 'Order status is updated automatically',
        'back_btn'    => 'Back to Home',
        'arrow'       => '&larr;',
        'arrow_trans' => 'translateX(-4px)', // حركة السهم للخلف في اتجاه اليسار الإنجليزي
        'status'      => [
            'pending'   => 'Pending',
            'approved'  => '✓ Approved successfully',
            'rejected'  => '✕ Request rejected',
            'not_found' => 'Record not found'
        ]
    ]
];

// التحقق من دعم اللغة المرسلة أو استخدام الإنجليزية كافتراضية
$current_lang = array_key_exists($form_lang, $lang_data) ? $form_lang : 'en';
$lang = $lang_data[$current_lang];
?>

<!DOCTYPE html>
<html lang="<?= $lang['html_lang'] ?>" dir="<?= $lang['html_dir'] ?>">

<head>

<meta charset="UTF-8">
<title><?= $lang['title_tag'] ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

<style>
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html, body {
    width: 100%;
    overflow-x: hidden; /* منع التمرير الأفقي نهائياً على الموبايل */
}

body{
    font-family:'Cairo', sans-serif;
    min-height:100vh;
    background: linear-gradient(135deg, #0f172a, #1e293b, #111827);
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    padding: 20px;
}

/* مؤثرات الخلفية المضيئة (تعمل فقط على الشاشات الكبيرة) */
body::before{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    background:rgba(255,215,0,0.12);
    border-radius:50%;
    top:-150px;
    right:-150px;
    filter:blur(80px);
    z-index: 1;
}

body::after{
    content:'';
    position:absolute;
    width:400px;
    height:400px;
    background:rgba(0,255,200,0.08);
    border-radius:50%;
    bottom:-150px;
    left:-150px;
    filter:blur(80px);
    z-index: 1;
}

/* تعطيل وإزالة مؤثرات الـ before والـ after تماماً على أجهزة الموبايل لعدم تدمير الأبعاد */
@media (max-width: 600px) {
    body::before, body::after {
        display: none !important;
    }
}

.main-box{
    width:100%;
    max-width:460px;
    background: rgba(30, 41, 59, 0.45);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:24px;
    padding:35px 25px;
    text-align:center;
    position:relative;
    z-index:10;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    animation:fadeIn 0.6s ease-out;
}

.logo{
    width:180px;
    max-width: 100%;
    margin:0 auto 25px auto;
    display:block;
}

.title{
    color:#fff;
    font-size:22px;
    font-weight:700;
    margin-bottom:8px;
}

.sub-title{
    color:rgba(255,255,255,0.5);
    font-size:14px;
    margin-bottom:30px;
}

.payment-title{
    width:100%;
    padding:20px;
    border-radius:16px;
    font-size:22px;
    font-weight:700;
    color:#fff;
    transition: all 0.4s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    position:relative;
    overflow:hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.payment-title::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:rgba(255,255,255,0.15);
    transform:skewX(-30deg);
    animation:shine 3.5s infinite;
}

/* تنسيق الحالات (الخلفيات والنصوص) */
.status-pending{
    background: linear-gradient(135deg, #475569, #64748b);
}

.status-approved{
    background: linear-gradient(135deg, #15803d, #22c55e);
    animation:pulseGreen 2s infinite;
}

.status-rejected{
    background: linear-gradient(135deg, #b91c1c, #ef4444);
    animation:pulseRed 2s infinite;
}

.status-not-found{
    background: linear-gradient(135deg, #1e293b, #334155);
}

/* تحسين شكل نقاط التحميل */
.loading-dots{
    display:inline-flex;
    align-items: center;
    gap: 2px;
    line-height: 1;
}

.loading-dots span{
    animation:blink 1.4s infinite;
    font-size:24px;
    font-weight: bold;
}

.loading-dots span:nth-child(2){ animation-delay:0.2s; }
.loading-dots span:nth-child(3){ animation-delay:0.4s; }

/* زر الرجوع المتناسق */
.back-home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 25px;
    padding: 12px 24px;
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.back-home-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
    transform: translateY(-2px);
}

.back-home-btn:active {
    transform: translateY(0);
}

.back-home-btn span {
    transition: transform 0.3s ease;
    display: inline-block;
}

/* تعديل حركة السهم ديناميكياً لتتناسب مع اتجاه القراءة الحالي */
.back-home-btn:hover span {
    transform: <?= $lang['arrow_trans'] ?>; 
}

@keyframes fadeIn{
    from{ opacity:0; transform:translateY(20px); }
    to{ opacity:1; transform:translateY(0); }
}

@keyframes shine{
    0%{ left:-100%; }
    100%{ left:150%; }
}

@keyframes pulseGreen{
    0%{ box-shadow:0 0 0 0 rgba(34,197,94,0.4); }
    70%{ box-shadow:0 0 0 15px rgba(34,197,94,0); }
    100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
}

@keyframes pulseRed{
    0%{ box-shadow:0 0 0 0 rgba(239,68,68,0.4); }
    70%{ box-shadow:0 0 0 15px rgba(239,68,68,0); }
    100%{ box-shadow:0 0 0 0 rgba(239,68,68,0); }
}

@keyframes blink{
    0%, 100%{ opacity:0.2; }
    20%{ opacity:1; }
}
</style>

</head>

<body>

<div class="main-box">

    <img src="new-logo.svg" class="logo" alt="لوجو">

    <div class="title">
        <?= $lang['title'] ?>
    </div>

    <div class="sub-title">
        <?= $lang['sub_title'] ?>
    </div>

    <form id="myForm" method="POST">
        <div class="payment-title status-pending" id="payment-request">
            <?= $lang['status']['pending'] ?>
            <div class="loading-dots">
                <span>.</span>
                <span>.</span>
                <span>.</span>
            </div>
        </div>
    </form>

    <a href="index.php?lang=<?= $current_lang ?>" class="back-home-btn">
        <span><?= $lang['arrow'] ?></span> <?= $lang['back_btn'] ?>
    </a>

</div>

<script>
// تحويل مصفوفة ترجمة الحالات من PHP إلى كائن JSON متاح للـ JavaScript
const localStrings = <?= json_encode($lang['status']) ?>;

function loadStatus(){
    $.ajax({
        url:'check_status.php',
        type:'GET',
        data:{
            id: <?= $id ?>
        },
        dataType:'json',
        success:function(response){
            let box = $('#payment-request');

            box.removeClass(
                'status-pending status-approved status-rejected status-not-found'
            );

            if(response.status === 'pending'){
                box
                    .addClass('status-pending')
                    .html(
                        localStrings.pending + ' <div class="loading-dots"><span>.</span><span>.</span><span>.</span></div>'
                    );
            }
            else if(response.status === 'approved'){
                box
                    .addClass('status-approved')
                    .html(localStrings.approved);
            }
            else if(response.status === 'rejected'){
                box
                    .addClass('status-rejected')
                    .html(localStrings.rejected);
            }
            else{
                box
                    .addClass('status-not-found')
                    .html(localStrings.not_found);
            }
        }
    });
}

// أول تحميل عند تشغيل الصفحة
loadStatus();

// تحديث تلقائي دوري كل 5 ثواني
setInterval(function(){
    loadStatus();
}, 5000);
</script>

</body>
</html>