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

$id = intval($_GET['id'] ?? 0);
?>

<!DOCTYPE html>
<html lang="ar" dir="rtl">

<head>

<meta charset="UTF-8">

<title>خدمات المحفظة الاستثمارية</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;
}

body{

    font-family:'Cairo', sans-serif;

    min-height:100vh;

    background:
    linear-gradient(
        135deg,
        #0f172a,
        #1e293b,
        #111827
    );

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    position:relative;

}

/* خلفيات متحركة */

body::before{

    content:'';

    position:absolute;

    width:500px;
    height:500px;

    background:rgba(255,215,0,0.15);

    border-radius:50%;

    top:-150px;
    right:-150px;

    filter:blur(60px);

}

body::after{

    content:'';

    position:absolute;

    width:400px;
    height:400px;

    background:rgba(0,255,200,0.12);

    border-radius:50%;

    bottom:-150px;
    left:-150px;

    filter:blur(60px);

}

.main-box{

    width:95%;
    max-width:500px;


    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,0.15);

    border-radius:30px;

    padding:40px 30px;

    text-align:center;

    position:relative;

    z-index:10;

    box-shadow:
    0 10px 40px rgba(0,0,0,0.4);

    animation:fadeIn 1s ease;

}

.logo{

    width:220px;

    margin:auto;

    display:block;

    margin-bottom:30px;

}

.title{

    color:#fff;

    font-size:28px;

    font-weight:700;

    margin-bottom:15px;

}

.sub-title{

    color:rgba(255,255,255,0.7);

    font-size:15px;

    margin-bottom:35px;

}

.payment-title{

    width:100%;

    padding:30px 20px;

    border-radius:25px;

    font-size:32px;

    font-weight:700;

    color:#fff;

    transition:0.4s;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.3);

    position:relative;

    overflow:hidden;

}

.payment-title::before{

    content:'';

    position:absolute;

    top:0;
    left:-100%;

    width:100%;
    height:100%;

    background:rgba(255,255,255,0.2);

    transform:skewX(-30deg);

    animation:shine 3s infinite;

}

.status-pending{

    background:
    linear-gradient(
        135deg,
        #6b7280,
        #9ca3af
    );

}

.status-approved{

    background:
    linear-gradient(
        135deg,
        #16a34a,
        #22c55e
    );

    animation:pulseGreen 1.5s infinite;

}

.status-rejected{

    background:
    linear-gradient(
        135deg,
        #dc2626,
        #ef4444
    );

    animation:pulseRed 1.5s infinite;

}

.status-not-found{

    background:
    linear-gradient(
        135deg,
        #111827,
        #374151
    );

}

.loading-dots{

    display:inline-block;

}

.loading-dots span{

    animation:blink 1.4s infinite;

    font-size:30px;

}

.loading-dots span:nth-child(2){

    animation-delay:0.2s;

}

.loading-dots span:nth-child(3){

    animation-delay:0.4s;

}

.footer{

    margin-top:30px;

    color:rgba(255,255,255,0.5);

    font-size:13px;

}

@keyframes fadeIn{

    from{
        opacity:0;
        transform:translateY(30px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes shine{

    0%{
        left:-100%;
    }

    100%{
        left:150%;
    }

}

@keyframes pulseGreen{

    0%{
        box-shadow:0 0 0 rgba(34,197,94,0.5);
    }

    50%{
        box-shadow:0 0 30px rgba(34,197,94,0.9);
    }

    100%{
        box-shadow:0 0 0 rgba(34,197,94,0.5);
    }

}

@keyframes pulseRed{

    0%{
        box-shadow:0 0 0 rgba(239,68,68,0.5);
    }

    50%{
        box-shadow:0 0 30px rgba(239,68,68,0.9);
    }

    100%{
        box-shadow:0 0 0 rgba(239,68,68,0.5);
    }

}

@keyframes blink{

    0%{
        opacity:0.2;
    }

    20%{
        opacity:1;
    }

    100%{
        opacity:0.2;
    }

}

</style>

</head>

<body>

<div class="main-box">

    <img src="new-logo.svg" class="logo">

    <div class="title">
        متابعة حالة الطلب
    </div>

    <div class="sub-title">
        يتم تحديث حالة الطلب تلقائياً
    </div>

    <form id="myForm" method="POST">

        <div 
            class="payment-title status-pending"
            id="payment-request"
        >

            قيد التنفيذ

            <div class="loading-dots">
                <span>.</span>
                <span>.</span>
                <span>.</span>
            </div>

        </div>

    </form>

    

</div>

<script>

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(
                        'قيد التنفيذ <div class="loading-dots"><span>.</span><span>.</span><span>.</span></div>'
                    );

            }

            else if(response.status === 'approved'){

                box
                    .addClass('status-approved')
                    .html('✓ تمت الموافقة بنجاح');

            }

            else if(response.status === 'rejected'){

                box
                    .addClass('status-rejected')
                    .html('✕ تم رفض الطلب');

            }

            else{

                box
                    .addClass('status-not-found')
                    .html('السجل غير موجود');

            }

        }

    });

}

// أول تحميل
loadStatus();

// تحديث كل 5 ثواني
setInterval(function(){

    loadStatus();

}, 5000);

</script>

</body>

</html>