<!DOCTYPE html>
<html lang="ar">
<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 {
            margin: 0;
            padding: 0;
            height: 100vh;
            overflow: hidden;
            direction: rtl;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #4169E1, #87CEEB);
            z-index: -1;
            animation: gradient 15s ease infinite;
        }

        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .particles {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

        .register-container {
            position: relative;
            z-index: 1;
            max-width: 450px;
            margin: 0 auto;
            padding: 40px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            box-shadow: 0 0 20px rgba(65, 105, 225, 0.3);
            top: 50%;
            transform: translateY(-50%);
        }

        .register-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .register-header h1 {
            color: #4169E1;
            font-size: 2.5rem;
            font-weight: bold;
        }

        .btn-register {
            background-color: #4169E1;
            border: none;
            padding: 12px;
            font-size: 1.1rem;
            transition: all 0.3s ease;
        }

        .btn-register:hover {
            background-color: #2747B9;
            transform: translateY(-2px);
        }

        .form-control {
            border-radius: 25px;
            padding: 12px 20px;
            border: 2px solid #4169E1;
        }
    </style>
</head>
<body>
    <div class="background"></div>
    <div class="particles" id="particles-js"></div>
    
    <div class="register-container">
        <div class="register-header">
            <h1>تسجيل مستخدم جديد</h1>
            <p class="text-muted">أدخل بياناتك لإنشاء حساب</p>
        </div>
        
        <?php
        session_start();
        if (isset($_SESSION['error'])) {
            echo '<div class="alert alert-danger">' . $_SESSION['error'] . '</div>';
            unset($_SESSION['error']);
        }
        if (isset($_SESSION['success'])) {
            echo '<div class="alert alert-success">' . $_SESSION['success'] . '</div>';
            unset($_SESSION['success']);
        }
        ?>
        
        <form action="register_process.php" method="POST">
            <div class="mb-3">
                <input type="text" class="form-control" name="full_name" 
                       placeholder="الاسم الكامل" required>
            </div>
            <div class="mb-3">
                <input type="text" class="form-control" name="username" 
                       placeholder="اسم المستخدم" required>
            </div>
            <div class="mb-3">
                <input type="password" class="form-control" name="password" 
                       placeholder="كلمة المرور" required>
            </div>
            <div class="mb-3">
                <input type="password" class="form-control" name="confirm_password" 
                       placeholder="تأكيد كلمة المرور" required>
            </div>
            <button type="submit" class="btn btn-register w-100">تسجيل الحساب</button>
            <p class="text-center mt-3">
                <a href="index.php" class="text-primary">لديك حساب؟ تسجيل الدخول</a>
            </p>
        </form>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
    <script>
        particlesJS("particles-js", {
            "particles": {
                "number": { "value": 80 },
                "color": { "value": "#ffffff" },
                "shape": { "type": "circle" },
                "opacity": { "value": 0.5, "random": true },
                "size": { "value": 3, "random": true },
                "line_linked": {
                    "enable": true,
                    "distance": 150,
                    "color": "#4169E1",
                    "opacity": 0.4,
                    "width": 1
                },
                "move": { "enable": true, "speed": 2 }
            },
            "interactivity": {
                "events": {
                    "onhover": { "enable": true, "mode": "repulse" },
                    "onclick": { "enable": true, "mode": "push" }
                }
            }
        });
    </script>
</body>
</html>