<?php $__env->startSection('title', 'Détails du Site - ' . $site->name); ?>

<?php $__env->startPush('styles'); ?>
<style>
    :root {
        --primary-color: #020548;
        --secondary-color: #3b5de7;
        --accent-color: #ff6b6b;
        --success-color: #28a745;
        --warning-color: #ffc107;
        --light-bg: #f8f9fa;
        --dark-text: #2c3e50;
    }

    .site-header {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
        color: white;
        padding: 2.5rem 0;
        margin-bottom: 2rem;
        border-radius: 0 0 20px 20px;
    }

    .site-card {
        background: white;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(2, 5, 72, 0.1);
        overflow: hidden;
        margin-bottom: 2rem;
        border: none;
    }

    .card-header {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        color: white;
        font-weight: 600;
        font-size: 1.2rem;
        border: none;
        padding: 1.5rem;
    }

    .site-info {
        padding: 2rem;
    }

    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .info-item {
        display: flex;
        flex-direction: column;
        padding: 1.5rem;
        background: var(--light-bg);
        border-radius: 12px;
        border-left: 4px solid var(--primary-color);
    }

    .info-label {
        font-weight: 600;
        color: var(--dark-text);
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 0.5rem;
    }

    .info-value {
        color: var(--primary-color);
        font-size: 1.1rem;
        font-weight: 500;
    }

    .price-display {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        color: white;
        padding: 1.5rem;
        border-radius: 12px;
        text-align: center;
        margin: 1.5rem 0;
    }

    .price-label {
        font-size: 0.9rem;
        opacity: 0.9;
        margin-bottom: 0.5rem;
    }

    .price-amount {
        font-size: 2rem;
        font-weight: 700;
        margin: 0;
    }

    .price-currency {
        font-size: 1.1rem;
        font-weight: 500;
    }

    .image-gallery {
        margin-top: 2rem;
    }

    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
        margin-top: 1rem;
    }

    .gallery-item {
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        transition: transform 0.3s ease;
    }

    .gallery-item:hover {
        transform: scale(1.03);
    }

    .gallery-image {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }

    .carousel-container {
        margin: 2rem 0;
    }

    .carousel-image {
        height: 400px;
        object-fit: cover;
        width: 100%;
        border-radius: 10px;
    }

    .description-section {
        background: var(--light-bg);
        padding: 2rem;
        border-radius: 12px;
        margin: 2rem 0;
    }

    .description-text {
        line-height: 1.8;
        color: #555;
        font-size: 1.1rem;
    }

    .schedule-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        background: white;
        border-radius: 8px;
        margin-bottom: 0.5rem;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    .schedule-time {
        font-weight: 600;
        color: var(--primary-color);
    }

    .action-buttons {
        display: flex;
        gap: 1rem;
        justify-content: center;
        padding: 2rem;
        background: var(--light-bg);
        border-radius: 15px;
        flex-wrap: wrap;
    }

    .btn-custom {
        background: var(--primary-color);
        border: none;
        padding: 12px 30px;
        border-radius: 10px;
        font-weight: 600;
        transition: all 0.3s;
    }

    .btn-custom:hover {
        background: var(--secondary-color);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(59, 93, 231, 0.3);
    }

    .btn-outline-custom {
        border: 2px solid var(--primary-color);
        color: var(--primary-color);
        background: transparent;
        padding: 12px 30px;
        border-radius: 10px;
        font-weight: 600;
        transition: all 0.3s;
    }

    .btn-outline-custom:hover {
        background: var(--primary-color);
        color: white;
        transform: translateY(-2px);
    }

    .location-card {
        background: var(--light-bg);
        padding: 1.5rem;
        border-radius: 12px;
        margin: 1.5rem 0;
    }

    .coordinates {
        display: flex;
        gap: 1rem;
        margin-top: 1rem;
    }

    .coordinate-item {
        flex: 1;
        background: white;
        padding: 1rem;
        border-radius: 8px;
        text-align: center;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    @media (max-width: 768px) {
        .info-grid {
            grid-template-columns: 1fr;
        }

        .action-buttons {
            flex-direction: column;
        }

        .gallery-grid {
            grid-template-columns: 1fr;
        }

        .carousel-image {
            height: 300px;
        }

        .coordinates {
            flex-direction: column;
        }
    }
</style>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>
<!-- Header avec fond gradient -->
<div class="site-header">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h1 class="display-5 fw-bold mb-3" style="color:white">
                    <i class="fas fa-map-marker-alt me-3" ></i><?php echo e($site->name); ?>

                </h1>
                <p class="lead mb-0"><?php echo e($site->location); ?></p>
            </div>
            
        </div>
    </div>
</div>

<div class="container">
    <!-- Carousel d'images -->
    <?php if($site->images->count() > 0): ?>
    <div class="site-card">
        <div class="carousel-container">
            <div id="carousel-<?php echo e($site->id); ?>" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <?php $__currentLoopData = $site->images; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $image): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div class="carousel-item <?php echo e($key === 0 ? 'active' : ''); ?>">
                            <img src="<?php echo e($image->image_url); ?>"
                                 class="carousel-image"
                                 alt="<?php echo e($site->name); ?>"
                                 onerror="this.src='https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'">
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
                <?php if($site->images->count() > 1): ?>
                    <button class="carousel-control-prev" type="button" data-bs-target="#carousel-<?php echo e($site->id); ?>" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Précédent</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#carousel-<?php echo e($site->id); ?>" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Suivant</span>
                    </button>
                <?php endif; ?>
            </div>
        </div>
    </div>
    <?php endif; ?>

    <!-- Carte principale -->
    <div class="site-card">
        <div class="card-header">
            <i class="fas fa-info-circle me-2"></i>Informations du Site
        </div>

        <div class="site-info">
            <!-- Grille d'informations -->
            <div class="info-grid">
                <div class="info-item">
                    <span class="info-label">Nom du site</span>
                    <span class="info-value"><?php echo e($site->name); ?></span>
                </div>

                <div class="info-item">
                    <span class="info-label">Localisation</span>
                    <span class="info-value"><?php echo e($site->location); ?></span>
                </div>

                <div class="info-item">
                    <span class="info-label">Latitude</span>
                    <span class="info-value"><?php echo e($site->lat); ?></span>
                </div>

                <div class="info-item">
                    <span class="info-label">Longitude</span>
                    <span class="info-value"><?php echo e($site->longi); ?></span>
                </div>
            </div>

            <!-- Prix -->
            <div class="row">
                <div class="col-md-6 mb-3">
                    <div class="price-display">
                        <div class="price-label">Prix Standard</div>
                        <div class="price-amount">
                            <?php echo e(number_format($site->standard_price, 0, ',', ' ')); ?>

                            <span class="price-currency">FCFA</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <div class="price-display">
                        <div class="price-label">Prix Premium</div>
                        <div class="price-amount">
                            <?php echo e(number_format($site->premium_price, 0, ',', ' ')); ?>

                            <span class="price-currency">FCFA</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Horaires -->
            <div class="info-item">
                <span class="info-label">Horaires de visite</span>
                <div class="schedule-item">
                    <span>Ouverture</span>
                    <span class="schedule-time"><?php echo e($site->visit_start_time); ?></span>
                </div>
                <div class="schedule-item">
                    <span>Fermeture</span>
                    <span class="schedule-time"><?php echo e($site->visit_end_time); ?></span>
                </div>
            </div>

            <!-- Coordonnées GPS -->
            <div class="location-card">
                <h5 class="mb-3">
                    <i class="fas fa-map-marked-alt me-2"></i>Coordonnées GPS
                </h5>
                <div class="coordinates">
                    <div class="coordinate-item">
                        <div class="info-label">Latitude</div>
                        <div class="info-value"><?php echo e($site->lat); ?></div>
                    </div>
                    <div class="coordinate-item">
                        <div class="info-label">Longitude</div>
                        <div class="info-value"><?php echo e($site->longi); ?></div>
                    </div>
                </div>
            </div>

            <!-- Descriptions -->
            <div class="description-section">
                <h5 class="mb-3">
                    <i class="fas fa-file-alt me-2"></i>Description (Français)
                </h5>
                <p class="description-text"><?php echo e($site->description_fr); ?></p>
            </div>

            <div class="description-section">
                <h5 class="mb-3">
                    <i class="fas fa-file-alt me-2"></i>Description (Anglais)
                </h5>
                <p class="description-text"><?php echo e($site->description_en); ?></p>
            </div>

            <!-- Galerie d'images -->
            <?php if($site->images->count() > 0): ?>
            <div class="image-gallery">
                <h5 class="mb-3">
                    <i class="fas fa-images me-2"></i>Galerie d'images
                </h5>
                <div class="gallery-grid">
                    <?php $__currentLoopData = $site->images; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $image): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="gallery-item">
                        <img src="<?php echo e($image->image_url); ?>"
                             class="gallery-image"
                             alt="<?php echo e($site->name); ?> - Image <?php echo e($loop->iteration); ?>"
                             onerror="this.src='https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'">
                    </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>
            <?php endif; ?>
        </div>
    </div>

    <!-- Boutons d'action -->
    <div class="action-buttons">
        <a href="<?php echo e(route('listeSite')); ?>" class="btn btn-custom">
            <i class="fas fa-arrow-left me-2"></i>Retour à la liste
        </a>
        
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Animation des éléments
        const animateOnScroll = () => {
            const elements = document.querySelectorAll('.info-item, .gallery-item, .description-section');
            elements.forEach((element, index) => {
                element.style.opacity = '0';
                element.style.transform = 'translateY(30px)';
                element.style.transition = `all 0.6s ease ${index * 0.1}s`;

                setTimeout(() => {
                    element.style.opacity = '1';
                    element.style.transform = 'translateY(0)';
                }, 100);
            });
        };

        animateOnScroll();

        // Initialisation du carousel
        const carousel = new bootstrap.Carousel(document.getElementById('carousel-<?php echo e($site->id); ?>'), {
            interval: 3000,
            wrap: true
        });
    });
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\Users\LENOVO\Documents\voyagedifiantDashboard\resources\views/page/detail-site.blade.php ENDPATH**/ ?>