<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تطبيق التاكسي - الصفحة الرئيسية</title>

    <!-- Bootstrap 5 RTL -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .hero-section {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
        }

        .hero-content {
            max-width: 800px;
            padding: 2rem;
        }

        .hero-title {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .hero-subtitle {
            font-size: 1.3rem;
            margin-bottom: 2rem;
            opacity: 0.9;
        }

        .btn-hero {
            background: rgba(255, 255, 255, 0.2);
            border: 2px solid white;
            color: white;
            padding: 15px 30px;
            font-size: 1.1rem;
            font-weight: 600;
            border-radius: 50px;
            text-decoration: none;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            margin: 0 10px;
        }

        .btn-hero:hover {
            background: white;
            color: #667eea;
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
        }

        .features-section {
            padding: 4rem 0;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
        }

        .feature-card {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 2rem;
            text-align: center;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-10px);
            background: rgba(255, 255, 255, 0.2);
        }

        .feature-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
            color: #ffd700;
        }

        .footer {
            background: rgba(0, 0, 0, 0.3);
            color: white;
            text-align: center;
            padding: 2rem;
            backdrop-filter: blur(10px);
        }
    </style>
</head>
<body>
    <div class="hero-section">
        <div class="hero-content">
            <h1 class="hero-title">
                <i class="fas fa-taxi me-3"></i>
                تطبيق التاكسي المتكامل
            </h1>
            <p class="hero-subtitle">
                نظام متكامل لإدارة خدمات التاكسي والمطاعم والغاز
                <br>
                مع لوحة تحكم متقدمة للمديرين
            </p>

            <div class="mt-4">
                @guest
                    <a href="{{ route('login') }}" class="btn-hero">
                        <i class="fas fa-sign-in-alt me-2"></i>
                        تسجيل الدخول للمدير
                    </a>
                @else
                    @if(auth()->user()->user_type === 'admin')
                        <a href="{{ route('admin.dashboard') }}" class="btn-hero">
                            <i class="fas fa-tachometer-alt me-2"></i>
                            لوحة التحكم
                        </a>
                        <a href="{{ route('profile') }}" class="btn-hero">
                            <i class="fas fa-user me-2"></i>
                            البروفايل
                        </a>
                        <form action="{{ route('logout') }}" method="POST" class="d-inline">
                            @csrf
                            <button type="submit" class="btn-hero" style="background: rgba(220, 53, 69, 0.8); border-color: #dc3545;">
                                <i class="fas fa-sign-out-alt me-2"></i>
                                تسجيل الخروج
                            </button>
                        </form>
                    @else
                        <a href="{{ route('profile') }}" class="btn-hero">
                            <i class="fas fa-user me-2"></i>
                            البروفايل
                        </a>
                        <a href="{{ route('home') }}" class="btn-hero">
                            <i class="fas fa-home me-2"></i>
                            الصفحة الرئيسية
                        </a>
                        <form action="{{ route('logout') }}" method="POST" class="d-inline">
                            @csrf
                            <button type="submit" class="btn-hero" style="background: rgba(220, 53, 69, 0.8); border-color: #dc3545;">
                                <i class="fas fa-sign-out-alt me-2"></i>
                                تسجيل الخروج
                            </button>
                        </form>
                    @endif
                @endguest
            </div>
        </div>
    </div>

    <div class="features-section">
        <div class="container">
            <div class="row text-center mb-5">
                <div class="col-12">
                    <h2 class="text-white mb-4">الخدمات المتوفرة</h2>
                </div>
            </div>

            <div class="row g-4">
                <div class="col-md-4">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-car"></i>
                        </div>
                        <h4 class="text-white mb-3">خدمة التاكسي</h4>
                        <p class="text-white-50">
                            إدارة الرحلات والسائقين والركاب مع نظام تتبع متقدم
                        </p>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-utensils"></i>
                        </div>
                        <h4 class="text-white mb-3">خدمة المطاعم</h4>
                        <p class="text-white-50">
                            إدارة الطلبات والمطاعم مع قوائم طعام متكاملة
                        </p>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-fire"></i>
                        </div>
                        <h4 class="text-white mb-3">خدمة الغاز</h4>
                        <p class="text-white-50">
                            إدارة طلبات الغاز والتوصيل مع نظام تتبع الشحنات
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h5>
                        <i class="fas fa-taxi me-2"></i>
                        تطبيق التاكسي المتكامل
                    </h5>
                    <p class="mb-0">نظام إدارة متقدم لجميع الخدمات</p>
                </div>
                <div class="col-md-6 text-md-end">
                    <p class="mb-0">
                        <i class="fas fa-code me-2"></i>
                        تم التطوير بواسطة فريق متخصص
                    </p>
                    <small class="text-muted">
                        جميع الحقوق محفوظة &copy; {{ date('Y') }}
                    </small>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
