<?php
/**
 * The template for displaying product content in the single-product.php template
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/content-single-product.php.
 */

defined( 'ABSPATH' ) || exit;

global $product;

/**
 * Hook: woocommerce_before_single_product.
 *
 * @hooked woocommerce_output_all_notices - 10
 */
do_action( 'woocommerce_before_single_product' );

if ( post_password_required() ) {
    echo get_the_password_form(); // WPCS: XSS ok.
    return;
}

// Récupérer les métadonnées de la retraite
$start_date = get_post_meta($product->get_id(), '_retreat_start_date', true);
$end_date = get_post_meta($product->get_id(), '_retreat_end_date', true);
$location = get_post_meta($product->get_id(), '_retreat_location', true);
$description = $product->get_description(); // Utiliser la description standard du produit
$included = get_post_meta($product->get_id(), '_retreat_inclusions', true);
$not_included = get_post_meta($product->get_id(), '_retreat_recommended_equipment', true); // On utilise le champ équipement recommandé
$daily_program = get_post_meta($product->get_id(), '_retreat_daily_program', true);
$video_url = get_post_meta($product->get_id(), '_retreat_video_url', true); // Ajout pour la vidéo

// Styles intégrés pour garantir l'affichage même si le CSS externe ne se charge pas
?>
<style>
    /* Styles de base pour la page produit */
    .retreat-product-container {
        font-family: 'Montserrat', sans-serif;
        color: #333333;
        line-height: 1.6;
        --primary-color: #769984;
        --primary-light: #a5c0b0;
        --primary-dark: #5a7464;
        --text-color: #333333;
        --light-bg: #f8f9fa;
        --border-radius: 8px;
        --box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* Section Hero */
    .retreat-hero-section {
        position: relative;
        min-height: 60vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-align: center;
        padding: 4rem 2rem;
        overflow: hidden;
        margin-bottom: 2rem;
    }
    
    .retreat-hero-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-size: cover;
        background-position: center;
    }
    
    .retreat-hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: -1;
    }
    
    .retreat-hero-content {
        max-width: 800px;
        width: 100%;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .retreat-hero-title {
        font-size: 2.5rem;
        margin-bottom: 1rem;
        font-weight: 700;
        color: white;
    }
    
    .retreat-hero-subtitle {
        font-size: 1.2rem;
        margin-bottom: 1rem;
        opacity: 0.9;
        color: white;
    }
    
    .retreat-hero-dates {
        margin-bottom: 2rem;
    }
    
    .retreat-date-badge {
        background: rgba(255,255,255,0.2);
        padding: 0.5rem 1rem;
        border-radius: 50px;
        font-size: 0.9rem;
        color: white;
    }
    
    .retreat-hero-actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 2rem;
        width: 100%;
    }
    
    .retreat-hero-price {
        font-size: 1.8rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        color: white;
    }
    
    .retreat-hero-price .price {
        color: white !important;
    }
    
    .retreat-hero-cta .button {
        background-color: var(--primary-color);
        color: white;
        padding: 0.8rem 2rem;
        font-size: 1.1rem;
        border-radius: var(--border-radius);
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-block;
        text-decoration: none;
    }
    
    .retreat-hero-cta .button:hover {
        background-color: var(--primary-dark);
    }
    
    /* Scroll indicator */
    .scroll-indicator {
        position: absolute;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
        cursor: pointer;
    }
    
    .scroll-arrow {
        width: 30px;
        height: 30px;
        border-left: 2px solid white;
        border-bottom: 2px solid white;
        transform: rotate(-45deg);
    }
    
    /* Contenu principal */
    .retreat-main-content {
        padding: 2rem;
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .retreat-section {
        margin-bottom: 3rem;
        background: white;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        padding: 2rem;
    }
    
    .retreat-section-title {
        color: var(--primary-color);
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid var(--primary-light);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    /* Informations clés */
    .retreat-info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .retreat-info-card {
        background-color: var(--light-bg);
        padding: 1.5rem;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
    }
    
    .retreat-info-card h4 {
        color: var(--primary-color);
        margin-top: 0;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .retreat-description {
        line-height: 1.8;
    }
    
    /* Programme journalier */
    .retreat-program {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    
    .retreat-program-item {
        display: flex;
        gap: 1rem;
        align-items: flex-start;
        padding: 0.8rem;
        background-color: var(--light-bg);
        border-radius: var(--border-radius);
    }
    
    .retreat-program-time {
        background-color: var(--primary-light);
        color: var(--primary-dark);
        padding: 0.3rem 0.8rem;
        border-radius: 4px;
        font-weight: 600;
        min-width: 80px;
        text-align: center;
    }
    
    /* Inclusions grid */
    .retreat-inclusions-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    
    .retreat-list {
        list-style: none;
        padding-left: 0;
    }
    
    .retreat-list li {
        padding: 0.5rem 0;
        display: flex;
        align-items: center;
    }
    
    .retreat-list li:before {
        content: '\2713';
        color: var(--primary-color);
        font-weight: bold;
        margin-right: 0.8rem;
    }
    
    .retreat-list-excluded li:before {
        content: '\2717';
        color: #d9534f;
    }
    
    /* CTA finale */
    .retreat-final-cta {
        background-color: var(--primary-color);
        color: white;
        padding: 4rem 2rem;
        text-align: center;
        margin-top: 3rem;
    }
    
    .retreat-cta-content {
        max-width: 600px;
        margin: 0 auto;
    }
    
    .retreat-cta-title {
        font-size: 2rem;
        margin-bottom: 1rem;
        color: white;
    }
    
    .retreat-cta-subtitle {
        font-size: 1.2rem;
        margin-bottom: 2rem;
        opacity: 0.9;
        color: white;
    }
    
    .retreat-cta-booking .button {
        background-color: white;
        color: var(--primary-color);
        padding: 0.8rem 2rem;
        font-size: 1.1rem;
        border-radius: var(--border-radius);
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-block;
        text-decoration: none;
    }
    
    .retreat-cta-booking .button:hover {
        background-color: var(--light-bg);
    }
    
    /* Responsive */
    @media (max-width: 768px) {
        .retreat-hero-title {
            font-size: 2rem;
        }
        
        .retreat-inclusions-grid {
            grid-template-columns: 1fr;
        }
        
        .retreat-section {
            padding: 1.5rem;
        }
    }
</style>

<div id="product-<?php the_ID(); ?>" <?php wc_product_class( 'retreat-product-container', $product ); ?>>
    
    <!-- Section Hero avec image de fond -->
    <section class="retreat-hero-section">
        <?php if (has_post_thumbnail()) : ?>
            <?php 
            $thumbnail_id = get_post_thumbnail_id();
            $thumbnail_url = wp_get_attachment_image_url($thumbnail_id, 'full');
            ?>
            <div class="retreat-hero-bg" style="background-image: url('<?php echo esc_url($thumbnail_url); ?>')"></div>
            <div class="retreat-hero-overlay"></div>
        <?php endif; ?>
        
        <!-- Contenu Hero -->
        <div class="retreat-hero-content">
            <div class="hero-text">
                <h1 class="retreat-hero-title">
                    <?php the_title(); ?>
                </h1>
                <?php if (!empty($location)) : ?>
                <p class="retreat-hero-subtitle">
                    <i class="fas fa-map-marker-alt"></i> <?php echo esc_html($location); ?>
                </p>
                <?php endif; ?>
                
                <?php if (!empty($start_date) && !empty($end_date)) : ?>
                <div class="retreat-hero-dates">
                    <span class="retreat-date-badge">
                        <i class="fas fa-calendar-alt"></i> <?php echo esc_html($start_date); ?> - <?php echo esc_html($end_date); ?>
                    </span>
                </div>
                <?php endif; ?>
            </div>
            
            <div class="retreat-hero-actions">
                <div class="retreat-hero-price">
                    <?php woocommerce_template_single_price(); ?>
                </div>
                
                <div class="retreat-hero-cta">
                    <?php woocommerce_template_single_add_to_cart(); ?>
                </div>
            </div>
        </div>
        
        <!-- Flèche de défilement -->
        <div class="scroll-indicator">
            <div class="scroll-arrow"></div>
        </div>
    </section>

    <!-- Contenu principal -->
    <div class="retreat-main-content">
        <!-- À propos de cette retraite -->
        <section class="retreat-section">
            <h2 class="retreat-section-title">À propos de cette retraite</h2>
            
            <!-- Informations clés -->
            <div class="retreat-info-grid">
                <?php if (!empty($start_date) && !empty($end_date)) : ?>
                <div class="retreat-info-card">
                    <h4><i class="fas fa-calendar-alt"></i> Dates</h4>
                    <p>Du <?php echo esc_html($start_date); ?> au <?php echo esc_html($end_date); ?></p>
                </div>
                <?php endif; ?>
                
                <?php if (!empty($location)) : ?>
                <div class="retreat-info-card">
                    <h4><i class="fas fa-map-marker-alt"></i> Lieu</h4>
                    <p><?php echo esc_html($location); ?></p>
                </div>
                <?php endif; ?>
                
                <div class="retreat-info-card">
                    <h4><i class="fas fa-tag"></i> Prix</h4>
                    <p><?php echo $product->get_price_html(); ?></p>
                </div>
            </div>
            
            <!-- Description -->
            <?php if (!empty($description)) : ?>
            <div class="retreat-description">
                <?php echo wpautop($description); ?>
            </div>
            <?php endif; ?>

        </section>
        
        <!-- Programme journalier -->
        <?php if (!empty($daily_program)) : ?>
        <section class="retreat-section">
            <h2 class="retreat-section-title"><i class="fas fa-clock"></i> Programme journalier</h2>
            <div class="retreat-program">
                <?php 
                $program_lines = explode("\n", $daily_program);
                foreach ($program_lines as $line) :
                    if (empty(trim($line))) continue;
                    $parts = explode('-', $line, 2);
                    if (count($parts) >= 2) :
                        $time = trim($parts[0]);
                        $activity = trim($parts[1]);
                ?>
                <div class="retreat-program-item">
                    <div class="retreat-program-time"><?php echo esc_html($time); ?></div>
                    <div class="retreat-program-activity"><?php echo esc_html($activity); ?></div>
                </div>
                <?php 
                    endif;
                endforeach; 
                ?>
            </div>
        </section>
        <?php endif; ?>
        
        <!-- Ce qui est inclus/non inclus -->
        <section class="retreat-section">
            <div class="retreat-inclusions-grid">
                <?php if (!empty($included)) : ?>
                <div class="retreat-included">
                    <h2 class="retreat-section-title"><i class="fas fa-check-circle"></i> Inclus</h2>
                    <ul class="retreat-list">
                        <?php 
                        $included_items = explode("\n", $included);
                        foreach ($included_items as $item) :
                            if (!empty(trim($item))) :
                        ?>
                        <li><?php echo esc_html(trim($item)); ?></li>
                        <?php 
                            endif;
                        endforeach; 
                        ?>
                    </ul>
                </div>
                <?php endif; ?>
                
                <?php if (!empty($not_included)) : ?>
                <div class="retreat-not-included">
                    <h2 class="retreat-section-title"><i class="fas fa-times-circle"></i> Non inclus</h2>
                    <ul class="retreat-list retreat-list-excluded">
                        <?php 
                        $not_included_items = explode("\n", $not_included);
                        foreach ($not_included_items as $item) :
                            if (!empty(trim($item))) :
                        ?>
                        <li><?php echo esc_html(trim($item)); ?></li>
                        <?php 
                            endif;
                        endforeach; 
                        ?>
                    </ul>
                </div>
                <?php endif; ?>
            </div>
        </section>

    <!-- Section CTA finale -->
    <section class="retreat-final-cta">
        <div class="retreat-cta-content">
            <h2 class="retreat-cta-title">Prêt pour cette expérience unique ?</h2>
            <p class="retreat-cta-subtitle">Réservez votre place dès maintenant</p>
            <div class="retreat-cta-booking">
                <?php woocommerce_template_single_add_to_cart(); ?>
            </div>
        </div>
    </section>

    <!-- Onglets et produits liés -->
    <div class="additional-content">
        <?php do_action( 'woocommerce_after_single_product_summary' ); ?>
    </div>
</div>

<?php do_action( 'woocommerce_after_single_product' ); ?>
