@extends('admin.master')

@section('title', 'Index')
@section('active-dashboard', 'active')


@section('content')

    <!-- [ Main Content ] start -->
    <div class="pc-container">
        <div class="pc-content">
            <!-- [ breadcrumb ] start -->
            <div class="page-header">
                <div class="page-block">
                    <div class="row align-items-center">
                        <div class="col-md-12">
                            <ul class="breadcrumb">
                                <li class="breadcrumb-item"><a href="../dashboard/index.html">الرئيسية</a></li>

                            </ul>
                        </div>
                        <div class="col-md-12">
                            <div class="page-header-title">
                                <h2 class="mb-0">الرئيسية</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- [ breadcrumb ] end -->
            <!-- [ Main Content ] start -->
            <div class="row">
                <div class="col-12  mb-4">
                    <div class="card space-clock-card bg-dark text-white">
                        <div class="card-header border-bottom-0">
                            <h5 class="text-white mb-0">🕒 الساعة الفضائية</h5>
                            <p class="text-white-50 mb-0">الوقت على كوكب عالمريخ</p>
                        </div>
                        <div class="card-body text-center">
                            <!-- الساعة الفضائية -->
                            <div class="space-clock">
                                <!-- الحلقات المدارية -->
                                <div class="orbit-ring ring-1"></div>
                                <div class="orbit-ring ring-2"></div>
                                <div class="orbit-ring ring-3"></div>

                                <!-- الكواكب الصغيرة تمثل الأرقام -->
                                <div class="planet-number p-12" data-number="12"></div>
                                <div class="planet-number p-1" data-number="1"></div>
                                <div class="planet-number p-2" data-number="2"></div>
                                <div class="planet-number p-3" data-number="3"></div>
                                <div class="planet-number p-4" data-number="4"></div>
                                <div class="planet-number p-5" data-number="5"></div>
                                <div class="planet-number p-6" data-number="6"></div>
                                <div class="planet-number p-7" data-number="7"></div>
                                <div class="planet-number p-8" data-number="8"></div>
                                <div class="planet-number p-9" data-number="9"></div>
                                <div class="planet-number p-10" data-number="10"></div>
                                <div class="planet-number p-11" data-number="11"></div>

                                <!-- المركز -->
                                <div class="clock-center"></div>

                                <!-- العقارب -->
                                <div class="hand hour-hand"></div>
                                <div class="hand minute-hand"></div>
                                <div class="hand second-hand"></div>

                                <!-- الكوكب المركزي -->
                                <div class="central-planet">
                                    <div class="planet-glow"></div>
                                </div>
                            </div>

                            <!-- الوقت الرقمي -->
                            <div class="digital-time mt-4">
                                <div class="time-display">
                                    <span id="hours">00</span>:<span id="minutes">00</span>:<span id="seconds">00</span>
                                </div>
                                <div class="date-display text-white-50" id="date-display">
                                    الاثنين ١ يناير ٢٠٢٤
                                </div>
                                <div class="mars-time text-warning mt-2">
                                    <i class="ph-duotone ph-planet me-1"></i>
                                    <span id="mars-time">+٠٫٠١ ثانية</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <style>
                    .space-clock-card {
                        background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
                        border: 1px solid rgba(56, 189, 248, 0.3);
                        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
                    }

                    .space-clock {
                        position: relative;
                        width: 200px;
                        height: 200px;
                        margin: 0 auto;
                        border-radius: 50%;
                        background: radial-gradient(circle at center, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 70%);
                        box-shadow:
                            inset 0 0 50px rgba(0, 0, 0, 0.5),
                            0 0 0 2px rgba(56, 189, 248, 0.2),
                            0 0 30px rgba(56, 189, 248, 0.3);
                    }

                    /* الحلقات المدارية */
                    .orbit-ring {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        border: 1px solid rgba(56, 189, 248, 0.1);
                        border-radius: 50%;
                        animation: rotate-ring 120s infinite linear;
                    }

                    .ring-1 { width: 180px; height: 180px; }
                    .ring-2 { width: 160px; height: 160px; animation-duration: 80s; animation-direction: reverse; }
                    .ring-3 { width: 140px; height: 140px; animation-duration: 60s; }

                    /* الكواكب الصغيرة (الأرقام) */
                    .planet-number {
                        position: absolute;
                        width: 24px;
                        height: 24px;
                        background: linear-gradient(135deg, #3b82f6, #1d4ed8);
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: white;
                        font-size: 10px;
                        font-weight: bold;
                        box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
                        transform: translate(-50%, -50%);
                        animation: float-planet 6s infinite ease-in-out;
                    }

                    .planet-number::after {
                        content: attr(data-number);
                        position: absolute;
                        color: rgba(255, 255, 255, 0.9);
                        font-size: 9px;
                    }

                    /* توزيع الكواكب في دائرة الساعة */
                    .p-12 { top: 10%; left: 50%; animation-delay: 0s; }
                    .p-1 { top: 14%; left: 74%; animation-delay: 0.5s; }
                    .p-2 { top: 26%; left: 90%; animation-delay: 1s; }
                    .p-3 { top: 50%; left: 94%; animation-delay: 1.5s; }
                    .p-4 { top: 74%; left: 90%; animation-delay: 2s; }
                    .p-5 { top: 86%; left: 74%; animation-delay: 2.5s; }
                    .p-6 { top: 90%; left: 50%; animation-delay: 3s; }
                    .p-7 { top: 86%; left: 26%; animation-delay: 3.5s; }
                    .p-8 { top: 74%; left: 10%; animation-delay: 4s; }
                    .p-9 { top: 50%; left: 6%; animation-delay: 4.5s; }
                    .p-10 { top: 26%; left: 10%; animation-delay: 5s; }
                    .p-11 { top: 14%; left: 26%; animation-delay: 5.5s; }

                    /* المركز */
                    .clock-center {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        width: 12px;
                        height: 12px;
                        background: #38bdf8;
                        border-radius: 50%;
                        z-index: 10;
                        box-shadow: 0 0 10px #38bdf8;
                    }

                    /* الكوكب المركزي */
                    .central-planet {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        width: 40px;
                        height: 40px;
                        background: linear-gradient(135deg, #c1440e, #8b2c02);
                        border-radius: 50%;
                        z-index: 5;
                        box-shadow:
                            inset -5px -5px 10px rgba(0, 0, 0, 0.5),
                            inset 3px 3px 10px rgba(255, 255, 255, 0.1);
                    }

                    .planet-glow {
                        position: absolute;
                        top: -5px;
                        left: -5px;
                        right: -5px;
                        bottom: -5px;
                        border-radius: 50%;
                        background: radial-gradient(circle, transparent 30%, rgba(193, 68, 14, 0.3) 70%);
                        animation: pulse-glow 2s infinite alternate;
                    }

                    /* العقارب */
                    .hand {
                        position: absolute;
                        bottom: 50%;
                        left: 50%;
                        transform-origin: bottom;
                        border-radius: 4px 4px 2px 2px;
                        z-index: 8;
                    }

                    .hour-hand {
                        width: 4px;
                        height: 40px;
                        background: linear-gradient(to top, #38bdf8, #0ea5e9);
                        box-shadow: 0 0 5px #38bdf8;
                        transform: translateX(-50%) rotate(0deg);
                    }

                    .minute-hand {
                        width: 3px;
                        height: 60px;
                        background: linear-gradient(to top, #10b981, #059669);
                        box-shadow: 0 0 5px #10b981;
                        transform: translateX(-50%) rotate(0deg);
                    }

                    .second-hand {
                        width: 2px;
                        height: 70px;
                        background: linear-gradient(to top, #ef4444, #dc2626);
                        box-shadow: 0 0 5px #ef4444;
                        transform: translateX(-50%) rotate(0deg);
                    }

                    /* الوقت الرقمي */
                    .digital-time {
                        position: relative;
                        z-index: 10;
                    }

                    .time-display {
                        font-family: 'Courier New', monospace;
                        font-size: 1.8rem;
                        font-weight: bold;
                        color: #38bdf8;
                        text-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
                        direction: ltr;
                        display: inline-block;
                    }

                    .date-display {
                        font-size: 0.9rem;
                        margin-top: 0.5rem;
                    }

                    .mars-time {
                        font-size: 0.8rem;
                        background: rgba(245, 158, 11, 0.1);
                        padding: 0.25rem 0.75rem;
                        border-radius: 15px;
                        display: inline-block;
                    }

                    /* Animations */
                    @keyframes rotate-ring {
                        from { transform: translate(-50%, -50%) rotate(0deg); }
                        to { transform: translate(-50%, -50%) rotate(360deg); }
                    }

                    @keyframes float-planet {
                        0%, 100% { transform: translate(-50%, -50%) scale(1); }
                        50% { transform: translate(-50%, -50%) scale(1.1); }
                    }

                    @keyframes pulse-glow {
                        0% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
                        100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.1); }
                    }

                    /* تأثيرات إضافية */
                    .space-clock::before {
                        content: '';
                        position: absolute;
                        top: -10px;
                        left: -10px;
                        right: -10px;
                        bottom: -10px;
                        border-radius: 50%;
                        background: radial-gradient(circle at 30% 30%, rgba(56, 189, 248, 0.1) 0%, transparent 50%);
                        z-index: -1;
                    }

                    /* التكيف مع الشاشات الصغيرة */
                    @media (max-width: 768px) {
                        .space-clock {
                            width: 180px;
                            height: 180px;
                        }

                        .ring-1 { width: 160px; height: 160px; }
                        .ring-2 { width: 140px; height: 140px; }
                        .ring-3 { width: 120px; height: 120px; }

                        .planet-number {
                            width: 20px;
                            height: 20px;
                        }

                        .planet-number::after {
                            font-size: 8px;
                        }

                        .time-display {
                            font-size: 1.5rem;
                        }
                    }
                </style>

                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        const hourHand = document.querySelector('.hour-hand');
                        const minuteHand = document.querySelector('.minute-hand');
                        const secondHand = document.querySelector('.second-hand');
                        const hoursElement = document.getElementById('hours');
                        const minutesElement = document.getElementById('minutes');
                        const secondsElement = document.getElementById('seconds');
                        const dateElement = document.getElementById('date-display');
                        const marsTimeElement = document.getElementById('mars-time');

                        function updateClock() {
                            const now = new Date();

                            // الوقت الحالي
                            const hours = now.getHours();
                            const minutes = now.getMinutes();
                            const seconds = now.getSeconds();
                            const milliseconds = now.getMilliseconds();

                            // حساب الزوايا
                            const secondAngle = (seconds * 6) + (milliseconds * 0.006);
                            const minuteAngle = (minutes * 6) + (seconds * 0.1);
                            const hourAngle = (hours % 12 * 30) + (minutes * 0.5);

                            // تطبيق الدوران
                            secondHand.style.transform = `translateX(-50%) rotate(${secondAngle}deg)`;
                            minuteHand.style.transform = `translateX(-50%) rotate(${minuteAngle}deg)`;
                            hourHand.style.transform = `translateX(-50%) rotate(${hourAngle}deg)`;

                            // تحديث الوقت الرقمي
                            hoursElement.textContent = hours.toString().padStart(2, '0');
                            minutesElement.textContent = minutes.toString().padStart(2, '0');
                            secondsElement.textContent = seconds.toString().padStart(2, '0');

                            // تحديث التاريخ
                            const options = {
                                weekday: 'long',
                                year: 'numeric',
                                month: 'long',
                                day: 'numeric'
                            };
                            dateElement.textContent = now.toLocaleDateString('ar-EG', options);

                            // وقت المريخ الوهمي (للمظهر فقط)
                            const marsOffset = (Math.sin(now.getTime() * 0.0001) * 0.02).toFixed(2);
                            marsTimeElement.textContent = `+${marsOffset} ثانية`;
                        }

                        // تحديث الساعة كل 50 مللي ثانية لدقة عالية
                        setInterval(updateClock, 50);
                        updateClock(); // التشغيل الأولي

                        // إضافة تأثير نقر على الكواكب
                        const planets = document.querySelectorAll('.planet-number');
                        planets.forEach(planet => {
                            planet.addEventListener('click', function() {
                                this.style.animation = 'none';
                                this.style.transform = 'translate(-50%, -50%) scale(1.3)';
                                setTimeout(() => {
                                    this.style.animation = '';
                                    this.style.transform = 'translate(-50%, -50%) scale(1)';
                                }, 300);
                            });
                        });
                    });
                </script>
            </div>
            <!-- [ Main Content ] end -->
        </div>
    </div>
    <!-- [ Main Content ] end -->
@endsection