<?php 
session_start();
include 'includes/db.php';
include 'includes/header.php'; 

// Initialize comparison list if not exists
if (!isset($_SESSION['compare_cars'])) {
    $_SESSION['compare_cars'] = [];
} 

// Check for car ID
if (!isset($_GET['id']) || !is_numeric($_GET['id'])) {
    header("Location: cars.php");
    exit();
}

$car_id = $_GET['id'];

// Fetch car details
$stmt = $conn->prepare("SELECT * FROM cars WHERE id = ?");
$stmt->bind_param("i", $car_id);
$stmt->execute();
$result = $stmt->get_result();

if ($result->num_rows !== 1) {
    echo "<div class='container text-center my-5 pt-5'><h2>سيارة غير موجودة</h2><a href='cars.php' class='btn btn-primary'>العودة إلى قائمة السيارات</a></div>";
    include 'includes/footer.php';
    exit();
}

$car = $result->fetch_assoc();
$stmt->close();

// Fetch car images from car_images table
$images_stmt = $conn->prepare("SELECT * FROM car_images WHERE car_id = ? ORDER BY is_primary DESC, sort_order ASC");
$images_stmt->bind_param("i", $car_id);
$images_stmt->execute();
$images_result = $images_stmt->get_result();
$car_images = [];
while ($img = $images_result->fetch_assoc()) {
    $car_images[] = $img;
}
$images_stmt->close();

// Fetch trims for this car
$trims_stmt = $conn->prepare("SELECT * FROM car_trims WHERE car_id = ? ORDER BY price ASC");
$trims_stmt->bind_param("i", $car_id);
$trims_stmt->execute();
$trims_result = $trims_stmt->get_result();
$car_trims = [];
while ($trim = $trims_result->fetch_assoc()) {
    $car_trims[] = $trim;
}
$trims_stmt->close();

// Set default trim as the first one
$default_trim = !empty($car_trims) ? $car_trims[0] : null;
?>

<main class="container my-5 pt-5">
    <div class="glass-card p-4 p-md-5">
        <div class="row g-5">
            <!-- Car Images Gallery -->
            <div class="col-lg-7" data-aos="fade-left">
                <?php if (!empty($car_images)): ?>
                    <!-- Main Image -->
                    <div class="main-image-container mb-3">
                        <img id="mainImage" src="uploads/cars/<?= htmlspecialchars($car_images[0]['image_name']) ?>" class="img-fluid rounded shadow-lg" alt="<?= htmlspecialchars($car['name']) ?>">
                    </div>
                    
                    <!-- Thumbnail Gallery -->
                    <?php if (count($car_images) > 1): ?>
                    <div class="thumbnail-gallery">
                        <div class="row g-2">
                            <?php foreach ($car_images as $index => $img): ?>
                            <div class="col-3">
                                <img src="uploads/cars/<?= htmlspecialchars($img['image_name']) ?>" 
                                     class="img-fluid rounded thumbnail-img <?= $index === 0 ? 'active' : '' ?>" 
                                     alt="صورة <?= $index + 1 ?>"
                                     onclick="changeMainImage('uploads/cars/<?= htmlspecialchars($img['image_name']) ?>', this)"
                                     style="cursor: pointer; height: 80px; object-fit: cover; border: 2px solid transparent;">
                            </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                    <?php endif; ?>
                    
                    <!-- Video Section -->
                    <?php if (!empty($car['video_url'])): ?>
                    <div class="video-section mt-4">
                        <h5 class="mb-3"><i class="fas fa-play-circle"></i> فيديو السيارة</h5>
                        <div class="ratio ratio-16x9">
                            <?php
                            $video_url = $car['video_url'];
                            // Convert YouTube URL to embed format
                            if (strpos($video_url, 'youtube.com/watch?v=') !== false) {
                                $video_id = parse_url($video_url, PHP_URL_QUERY);
                                parse_str($video_id, $params);
                                $video_url = 'https://www.youtube.com/embed/' . $params['v'];
                            } elseif (strpos($video_url, 'youtu.be/') !== false) {
                                $video_id = basename(parse_url($video_url, PHP_URL_PATH));
                                $video_url = 'https://www.youtube.com/embed/' . $video_id;
                            }
                            ?>
                            <iframe src="<?= htmlspecialchars($video_url) ?>" 
                                    title="فيديو السيارة" 
                                    frameborder="0" 
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                                    allowfullscreen
                                    class="rounded">
                            </iframe>
                        </div>
                    </div>
                    <?php endif; ?>
                    
                <?php else: ?>
                    <!-- Fallback to old image field -->
                    <img src="<?= !empty($car['image']) ? 'uploads/cars/' . htmlspecialchars($car['image']) : 'https://via.placeholder.com/800x600' ?>" class="img-fluid rounded shadow-lg" alt="<?= htmlspecialchars($car['name']) ?>">
                <?php endif; ?>
            </div>

            <!-- Car Details -->
            <div class="col-lg-5" data-aos="fade-right">
                <h1 class="display-5 mb-3"><?= htmlspecialchars($car['name']) ?></h1>
                <p class="text-muted"><?= htmlspecialchars($car['brand']) ?> / <?= htmlspecialchars($car['model']) ?></p>
                
                <?php if (!empty($car_trims)): ?>
                <!-- Trim Selector Dropdown -->
                <div class="mb-4 bg-dark p-3 rounded border border-secondary">
                    <label for="trimSelect" class="form-label text-warning fw-bold"><i class="fas fa-tags me-1"></i> اختر فئة السيارة:</label>
                    <select class="form-select bg-dark text-white border-secondary" id="trimSelect">
                        <?php foreach ($car_trims as $index => $trim): ?>
                            <option value="<?= $index ?>"><?= htmlspecialchars($trim['name']) ?> (<?= number_format($trim['price']) ?> جنيه)</option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <?php endif; ?>

                <div class="d-flex justify-content-between align-items-center my-4">
                    <h2 class="text-danger mb-0"><span id="carPriceDisplay"><?= $default_trim ? number_format($default_trim['price']) : '0' ?></span> جنيه</h2>
                    <span class="badge bg-light text-dark fs-6"><?= htmlspecialchars($car['category']) ?></span>
                </div>

                <!-- Basic Specifications -->
                <ul class="list-group list-group-flush car-specs mb-4">
                    <li class="list-group-item"><strong>الموديل:</strong> <?= htmlspecialchars($car['model']) ?></li>
                    <li class="list-group-item"><strong>سنة الصنع:</strong> <?= htmlspecialchars($car['year']) ?></li>
                    <li class="list-group-item"><strong>الماركة:</strong> <?= htmlspecialchars($car['brand']) ?></li>
                    <li class="list-group-item"><strong>نوع الوقود:</strong> <span id="fuelTypeDisplay"><?= $default_trim ? htmlspecialchars($default_trim['fuel_type']) : 'غير محدد' ?></span></li>
                    <li class="list-group-item"><strong>حالة السيارة:</strong> <span id="conditionDisplay"><?= $default_trim ? htmlspecialchars($default_trim['car_condition']) : 'غير محدد' ?></span></li>
                </ul>

                <!-- Technical Specifications -->
                <div class="technical-specs">
                    <h5 class="mb-3"><i class="fas fa-cogs text-primary"></i> المواصفات الفنية للسيارة</h5>
                    
                    <!-- Engine & Performance -->
                    <div class="spec-section mb-3" id="engineSpecsSection">
                        <h6 class="text-secondary"><i class="fas fa-engine"></i> المحرك والأداء</h6>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item" id="engineCapacitySection" style="display: <?= ($default_trim && !empty($default_trim['engine_capacity'])) ? 'block' : 'none' ?>;">
                                <strong>سعة المحرك:</strong> <span id="engineCapacityDisplay"><?= $default_trim ? htmlspecialchars($default_trim['engine_capacity']) : '' ?></span>
                            </li>
                            <li class="list-group-item" id="transmissionTypeSection" style="display: <?= ($default_trim && !empty($default_trim['transmission_type'])) ? 'block' : 'none' ?>;">
                                <strong>ناقل الحركة:</strong> <span id="transmissionTypeDisplay"><?= $default_trim ? htmlspecialchars($default_trim['transmission_type']) : '' ?></span>
                            </li>
                            <li class="list-group-item" id="horsepowerSection" style="display: <?= ($default_trim && !empty($default_trim['horsepower'])) ? 'block' : 'none' ?>;">
                                <strong>القوة الحصانية:</strong> <span id="horsepowerDisplay"><?= $default_trim ? htmlspecialchars($default_trim['horsepower']) : '' ?></span> حصان
                            </li>
                            <li class="list-group-item" id="torqueSection" style="display: <?= ($default_trim && !empty($default_trim['torque'])) ? 'block' : 'none' ?>;">
                                <strong>عزم الدوران:</strong> <span id="torqueDisplay"><?= $default_trim ? htmlspecialchars($default_trim['torque']) : '' ?></span>
                            </li>
                        </ul>
                    </div>

                    <!-- Performance Stats -->
                    <div class="spec-section mb-3" id="performanceSpecsSection">
                        <h6 class="text-secondary"><i class="fas fa-tachometer-alt"></i> الأداء والاستهلاك</h6>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item" id="accelerationSection" style="display: <?= ($default_trim && !empty($default_trim['acceleration'])) ? 'block' : 'none' ?>;">
                                <strong>التسارع 0-100:</strong> <span id="accelerationDisplay"><?= $default_trim ? htmlspecialchars($default_trim['acceleration']) : '' ?></span>
                            </li>
                            <li class="list-group-item" id="topSpeedSection" style="display: <?= ($default_trim && !empty($default_trim['top_speed'])) ? 'block' : 'none' ?>;">
                                <strong>السرعة القصوى:</strong> <span id="topSpeedDisplay"><?= $default_trim ? htmlspecialchars($default_trim['top_speed']) : '' ?></span>
                            </li>
                            <li class="list-group-item" id="fuelConsumptionSection" style="display: <?= ($default_trim && !empty($default_trim['fuel_consumption'])) ? 'block' : 'none' ?>;">
                                <strong>استهلاك الوقود:</strong> <span id="fuelConsumptionDisplay"><?= $default_trim ? htmlspecialchars($default_trim['fuel_consumption']) : '' ?></span>
                            </li>
                            <li class="list-group-item" id="drivetrainSection" style="display: <?= ($default_trim && !empty($default_trim['drivetrain'])) ? 'block' : 'none' ?>;">
                                <strong>نظام الدفع:</strong> <span id="drivetrainDisplay"><?= $default_trim ? htmlspecialchars($default_trim['drivetrain']) : '' ?></span>
                            </li>
                        </ul>
                    </div>

                    <!-- Body Specs -->
                    <div class="spec-section mb-3" id="bodySpecsSection">
                        <h6 class="text-secondary"><i class="fas fa-car-side"></i> الهيكل والتصميم</h6>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item" id="seatingCapacitySection" style="display: <?= ($default_trim && !empty($default_trim['seating_capacity'])) ? 'block' : 'none' ?>;">
                                <strong>عدد المقاعد:</strong> <span id="seatingCapacityDisplay"><?= $default_trim ? htmlspecialchars($default_trim['seating_capacity']) : '' ?></span> مقعد
                            </li>
                            <li class="list-group-item" id="bodyTypeSection" style="display: <?= ($default_trim && !empty($default_trim['body_type'])) ? 'block' : 'none' ?>;">
                                <strong>نوع الهيكل:</strong> <span id="bodyTypeDisplay"><?= $default_trim ? htmlspecialchars($default_trim['body_type']) : '' ?></span>
                            </li>
                            <li class="list-group-item" id="exteriorColorSection" style="display: <?= ($default_trim && !empty($default_trim['exterior_color'])) ? 'block' : 'none' ?>;">
                                <strong>اللون الخارجي:</strong> <span id="exteriorColorDisplay"><?= $default_trim ? htmlspecialchars($default_trim['exterior_color']) : '' ?></span>
                            </li>
                            <li class="list-group-item" id="interiorColorSection" style="display: <?= ($default_trim && !empty($default_trim['interior_color'])) ? 'block' : 'none' ?>;">
                                <strong>اللون الداخلي:</strong> <span id="interiorColorDisplay"><?= $default_trim ? htmlspecialchars($default_trim['interior_color']) : '' ?></span>
                            </li>
                        </ul>
                    </div>

                    <!-- PDF Section -->
                    <div class="spec-section mb-3" id="pdfSection" style="display: <?= ($default_trim && !empty($default_trim['tech_specs_pdf'])) ? 'block' : 'none' ?>;">
                        <h6 class="text-secondary"><i class="fas fa-file-pdf"></i> المواصفات الفنية الكاملة</h6>
                        <div class="feature-group mb-2">
                            <a id="pdfDownloadLink" href="uploads/pdfs/<?= $default_trim ? htmlspecialchars($default_trim['tech_specs_pdf']) : '' ?>" target="_blank" class="btn btn-primary">
                                <i class="fas fa-download"></i> تحميل ملف المواصفات (PDF)
                            </a>
                        </div>
                    </div>
                </div>

                <h4 class="mt-4">الوصف</h4>
                <p><?= nl2br(htmlspecialchars($car['description'])) ?></p>

                <div class="d-grid gap-2 mt-4">
                    <a href="visit.php?car_id=<?= $car['id'] ?>" class="btn btn-danger btn-lg">احجز تجربة قيادة</a>
                    <a href="calculator.php?price=<?= $default_trim ? $default_trim['price'] : '0' ?>" id="calculatorLink" class="btn btn-outline-light btn-lg">حساب القسط</a>
                    
                    <!-- Comparison Buttons -->
                    <?php if ($default_trim): ?>
                        <?php 
                        $trim_id = $default_trim['id']; 
                        $is_already_added = in_array($trim_id, $_SESSION['compare_cars']);
                        ?>
                        <a id="compareLink" href="compare.php?action=<?= $is_already_added ? 'remove' : 'add' ?>&trim_id=<?= $trim_id ?>" class="btn <?= $is_already_added ? 'btn-outline-warning' : 'btn-outline-info' ?> btn-lg">
                            <i class="fas <?= $is_already_added ? 'fa-minus-circle' : 'fa-balance-scale' ?>"></i> 
                            <?= $is_already_added ? 'إزالة من المقارنة' : 'إضافة للمقارنة' ?>
                        </a>
                    <?php endif; ?>
                    
                    <?php if (!empty($_SESSION['compare_cars'])): ?>
                        <a href="compare.php" class="btn btn-success btn-lg">
                            <i class="fas fa-eye"></i> عرض المقارنة (<?= count($_SESSION['compare_cars']) ?>)
                        </a>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
</main>

<script>
function changeMainImage(imageSrc, thumbnailElement) {
    document.getElementById('mainImage').src = imageSrc;
    
    document.querySelectorAll('.thumbnail-img').forEach(img => {
        img.classList.remove('active');
        img.style.border = '2px solid transparent';
    });
    
    thumbnailElement.classList.add('active');
    thumbnailElement.style.border = '2px solid #dc3545';
}

document.addEventListener('DOMContentLoaded', function() {
    const activeThumbnail = document.querySelector('.thumbnail-img.active');
    if (activeThumbnail) {
        activeThumbnail.style.border = '2px solid #dc3545';
    }

    // Dynamic UI Updates based on selected Trim
    const trims = <?php echo json_encode($car_trims); ?>;
    const compareList = <?php echo json_encode($_SESSION['compare_cars']); ?>;
    const trimSelect = document.getElementById('trimSelect');

    if (trimSelect) {
        trimSelect.addEventListener('change', function() {
            const index = this.value;
            const trim = trims[index];

            // 1. Update Price
            document.getElementById('carPriceDisplay').textContent = Number(trim.price).toLocaleString('en-US');

            // 2. Update Basic Specs
            document.getElementById('fuelTypeDisplay').textContent = trim.fuel_type || 'غير محدد';
            document.getElementById('conditionDisplay').textContent = trim.car_condition || 'غير محدد';

            // 3. Update Technical specs
            updateSpecSection('engineCapacitySection', 'engineCapacityDisplay', trim.engine_capacity);
            updateSpecSection('transmissionTypeSection', 'transmissionTypeDisplay', trim.transmission_type);
            updateSpecSection('horsepowerSection', 'horsepowerDisplay', trim.horsepower, ' حصان');
            updateSpecSection('torqueSection', 'torqueDisplay', trim.torque);

            updateSpecSection('accelerationSection', 'accelerationDisplay', trim.acceleration);
            updateSpecSection('topSpeedSection', 'topSpeedDisplay', trim.top_speed);
            updateSpecSection('fuelConsumptionSection', 'fuelConsumptionDisplay', trim.fuel_consumption);
            updateSpecSection('drivetrainSection', 'drivetrainDisplay', trim.drivetrain);

            updateSpecSection('seatingCapacitySection', 'seatingCapacityDisplay', trim.seating_capacity, ' مقعد');
            updateSpecSection('bodyTypeSection', 'bodyTypeDisplay', trim.body_type);
            updateSpecSection('exteriorColorSection', 'exteriorColorDisplay', trim.exterior_color);
            updateSpecSection('interiorColorSection', 'interiorColorDisplay', trim.interior_color);

            // 4. Update PDF
            const pdfSection = document.getElementById('pdfSection');
            const pdfLink = document.getElementById('pdfDownloadLink');
            if (trim.tech_specs_pdf) {
                pdfLink.href = 'uploads/pdfs/' + trim.tech_specs_pdf;
                pdfSection.style.display = 'block';
            } else {
                pdfSection.style.display = 'none';
            }

            // 5. Update Calculator Link
            document.getElementById('calculatorLink').href = 'calculator.php?price=' + trim.price;

            // 6. Update Compare Button
            const compareLink = document.getElementById('compareLink');
            if (compareLink) {
                const trimIdInt = Number(trim.id);
                const isAlreadyAdded = compareList.includes(trimIdInt);
                
                if (isAlreadyAdded) {
                    compareLink.href = 'compare.php?action=remove&trim_id=' + trim.id;
                    compareLink.className = 'btn btn-outline-warning btn-lg';
                    compareLink.innerHTML = '<i class="fas fa-minus-circle"></i> إزالة من المقارنة';
                } else {
                    compareLink.href = 'compare.php?action=add&trim_id=' + trim.id;
                    compareLink.className = 'btn btn-outline-info btn-lg';
                    compareLink.innerHTML = '<i class="fas fa-balance-scale"></i> إضافة للمقارنة';
                }
            }
        });
    }

    function updateSpecSection(sectionId, displayId, value, suffix = '') {
        const section = document.getElementById(sectionId);
        const display = document.getElementById(displayId);
        
        if (value && value !== '0' && value !== 0) {
            display.textContent = value + suffix;
            section.style.display = 'block';
        } else {
            section.style.display = 'none';
        }
    }
});
</script>

<style>
.thumbnail-img:hover {
    opacity: 0.8;
    transform: scale(1.05);
    transition: all 0.3s ease;
}

.video-section {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 10px;
    backdrop-filter: blur(10px);
}

.technical-specs {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.spec-section {
    background: rgba(255, 255, 255, 0.03);
    padding: 15px;
    border-radius: 10px;
    border-left: 4px solid var(--primary-color);
}

.spec-section h6 {
    color: #fff;
    margin-bottom: 15px;
    font-weight: 600;
}

.feature-group {
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    border-radius: 8px;
    border-left: 3px solid;
}

.feature-group:nth-child(1) {
    border-left-color: #28a745;
}

.feature-group:nth-child(2) {
    border-left-color: #17a2b8;
}

.feature-group:nth-child(3) {
    border-left-color: #ffc107;
}

.list-group-item {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

.list-group-item strong {
    color: var(--primary-color);
}
</style>

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