<?php 
include 'includes/db.php';
include 'includes/header.php'; 

// Fetchh slides from the database
$slides_result = $conn->query("SELECT * FROM slider WHERE active = 1 ORDER BY id DESC");

// Fetch latest offers
$offers_result = $conn->query("SELECT o.*, c.name as car_name FROM offers o LEFT JOIN cars c ON o.car_id = c.id ORDER BY o.created_at DESC LIMIT 4");

// Fetch videos from the database
$videos_result = $conn->query("SELECT * FROM videos WHERE active = 1 ORDER BY created_at DESC LIMIT 6");

?>

<!-- Hero Section with Carousel -->
<header id="hero-carousel" class="carousel slide hero-section" data-bs-ride="carousel" data-bs-interval="5000">
    <div class="carousel-indicators">
        <?php for ($i = 0; $i < $slides_result->num_rows; $i++): ?>
            <button type="button" data-bs-target="#hero-carousel" data-bs-slide-to="<?= $i ?>" class="<?= $i == 0 ? 'active' : '' ?>" aria-current="true" aria-label="Slide <?= $i + 1 ?>"></button>
        <?php endfor; ?>
    </div>
    <div class="carousel-inner">
        <?php if ($slides_result->num_rows > 0): ?>
            <?php $i = 0; while($slide = $slides_result->fetch_assoc()): ?>
                <div class="carousel-item <?= $i == 0 ? 'active' : '' ?>">
                    <div class="container-fluid h-100">
                        <div class="row h-100 align-items-center">
                            <div class="col-lg-6 order-2 order-lg-1">
                                <div class="hero-content" data-aos="fade-right">
                                    <h1 class="hero-title"><?= htmlspecialchars($slide['title']) ?></h1>
                                    <p class="hero-subtitle"><?= htmlspecialchars($slide['subtitle']) ?></p>
                                    <div class="hero-buttons mt-4">
                                        <a href="cars.php" class="btn btn-danger btn-lg me-3">تصفح السيارات</a>
                                        <a href="contact.php" class="btn btn-outline-light btn-lg">اتصل بنا</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 order-1 order-lg-2">
                                <div class="hero-image" data-aos="fade-left">
                                    <img src="uploads/slider/<?= htmlspecialchars($slide['image_path']) ?>" alt="<?= htmlspecialchars($slide['title']) ?>" class="img-fluid">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            <?php $i++; endwhile; ?>
        <?php else: ?>
            <!-- Fallback slide if DB is empty -->
            <div class="carousel-item active">
                <div class="container-fluid h-100">
                    <div class="row h-100 align-items-center">
                        <div class="col-lg-6 order-2 order-lg-1">
                            <div class="hero-content" data-aos="fade-right">
                                <h1 class="hero-title">مرحباً بك في M-AUTO</h1>
                                <p class="hero-subtitle">أضف شرائح جديدة من لوحة التحكم.</p>
                                <div class="hero-buttons mt-4">
                                    <a href="cars.php" class="btn btn-danger btn-lg me-3">تصفح السيارات</a>
                                    <a href="contact.php" class="btn btn-outline-light btn-lg">اتصل بنا</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 order-1 order-lg-2">
                            <div class="hero-image" data-aos="fade-left">
                                <img src="assets/images/default-hero-bg.jpg" alt="M-AUTO" class="img-fluid">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <?php endif; ?>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#hero-carousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#hero-carousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</header>

<main id="main-content" class="container my-5">
    <!-- Services Section -->
    <section class="text-center" id="services">
        <h2 class="mb-5" data-aos="fade-in">خدماتنا</h2>
        <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-4">
            <div class="col" data-aos="fade-up">
                <div class="glass-card p-4 h-100 d-flex flex-column">
                    <i class="fas fa-car fa-3x text-danger mb-3"></i>
                    <h4>شراء سيارة</h4>
                    <p class="flex-grow-1">تصفح أحدث السيارات المتوفرة لدينا.</p>
                    <a href="cars.php" class="btn btn-outline-danger mt-auto">عرض السيارات</a>
                </div>
            </div>
            <div class="col" data-aos="fade-up" data-aos-delay="100">
                <div class="glass-card p-4 h-100 d-flex flex-column">
                    <i class="fas fa-tools fa-3x text-danger mb-3"></i>
                    <h4>حجز صيانة</h4>
                    <p class="flex-grow-1">احجز موعداً لصيانة سيارتك بسهولة.</p>
                    <a href="maintenance.php" class="btn btn-danger mt-auto">احجز الآن</a>
                </div>
            </div>
            <div class="col" data-aos="fade-up" data-aos-delay="200">
                <div class="glass-card p-4 h-100 d-flex flex-column">
                    <i class="fas fa-calendar-check fa-3x text-danger mb-3"></i>
                    <h4>حجز زيارة</h4>
                    <p class="flex-grow-1">تفضل بزيارة أحد فروعنا لمعاينة السيارات.</p>
                     <a href="visit.php" class="btn btn-outline-danger mt-auto">حجز زيارة</a>
                </div>
            </div>
            <div class="col" data-aos="fade-up" data-aos-delay="300">
                <div class="glass-card p-4 h-100 d-flex flex-column">
                    <i class="fas fa-calculator fa-3x text-danger mb-3"></i>
                    <h4>حساب القسط</h4>
                    <p class="flex-grow-1">احسب قسط سيارتك بنفسك بسهولة.</p>
                    <a href="calculator.php" class="btn btn-danger mt-auto">ابدأ الحساب</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Offers Section -->
    <?php if ($offers_result->num_rows > 0): ?>
    <section id="offers" class="mt-5 pt-5">
        <h2 class="text-center mb-5" data-aos="fade-in">أحدث العروض</h2>
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
            <?php while($offer = $offers_result->fetch_assoc()): ?>
            <div class="col" data-aos="fade-up">
                <div class="card h-100 text-white offer-card">
                    <img src="uploads/offers/<?= htmlspecialchars($offer['image']) ?>" class="card-img-top" alt="<?= htmlspecialchars($offer['title']) ?>">
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title"><?= htmlspecialchars($offer['title']) ?></h5>
                        <p class="card-text text-muted flex-grow-1"><?= substr(htmlspecialchars($offer['description']), 0, 200) ?>...</p>
                        <?php if($offer['discount_price']): ?>
                        <h4 class="card-price"><?= number_format($offer['discount_price']) ?> جنيه</h4>
                        <?php endif; ?>
                        <a href="offers.php#offer-<?= $offer['id'] ?>" class="btn btn-danger mt-auto">التفاصيل</a>
                    </div>
                </div>
            </div>
            <?php endwhile; ?>
        </div>
    </section>
    <?php endif; ?>

    <!-- Videos Section -->
    <?php if ($videos_result && $videos_result->num_rows > 0): ?>
    <section id="videos" class="mt-5 pt-5">
        <h2 class="text-center mb-5" data-aos="fade-in">معرض الفيديوهات</h2>
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
            <?php while($video = $videos_result->fetch_assoc()): ?>
            <div class="col" data-aos="fade-up">
                <div class="card h-100 video-card">
                    <div class="video-container position-relative">
                        <?php if($video['video_type'] == 'url'): ?>
                            <?php
                            $video_url = $video['video_url'];
                            $video_id = '';
                            $regex = '/(?:https?://)?(?:www.)?(?:youtube.com/(?:[^/ns]+/S+/|(?:v|e(?:mbed)?)/|S*?[?&]v=)|youtu.be/)([a-zA-Z0-9_-]{11})/';
                            if (preg_match($regex, $video_url, $matches)) {
                                $video_id = $matches[1];
                            }
                            ?>
                            <?php if ($video_id): ?>
                                <div class="ratio ratio-16x9">
                                    <iframe src="https://www.youtube.com/embed/<?= htmlspecialchars($video_id) ?>" 
                                            title="<?= htmlspecialchars($video['title']) ?>" 
                                            frameborder="0" 
                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                                            allowfullscreen>
                                    </iframe>
                                </div>
                            <?php else: ?>
                                <div class="ratio ratio-16x9" style="background-color: #000; display: flex; align-items: center; justify-content: center;">
                                    <p class="text-white text-center mb-0">لا يمكن عرض الفيديو. قد يكون الرابط غير صحيح.</p>
                                </div>
                            <?php endif; ?>
                        <?php else: ?>
                            <div class="ratio ratio-16x9">
                                <video controls class="w-100 h-100">
                                    <source src="uploads/videos/<?= htmlspecialchars($video['video_file']) ?>" type="video/mp4">
                                    متصفحك لا يدعم تشغيل الفيديو.
                                </video>
                            </div>
                        <?php endif; ?>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title"><?= htmlspecialchars($video['title']) ?></h5>
                        <?php if($video['description']): ?>
                        <p class="card-text text-muted"><?= htmlspecialchars($video['description']) ?></p>
                        <?php endif; ?>
                        <small class="text-muted"><?= date('d/m/Y', strtotime($video['created_at'])) ?></small>
                    </div>
                </div>
            </div>
            <?php endwhile; ?>
        </div>
    </section>
    <?php endif; ?>

</main>

<?php include 'includes/footer.php'; ?>