<?php
/**
 * Template Name: Single Package
 * Description: Individual travel package details page
 */

get_header();

while (have_posts()) : the_post();
    
    // Get custom fields
    $city = get_post_meta(get_the_ID(), '_package_city', true);
    $country = get_post_meta(get_the_ID(), '_package_country', true);
    $duration = get_post_meta(get_the_ID(), '_package_duration', true);
    $price = get_post_meta(get_the_ID(), '_package_price', true);
    $old_price = get_post_meta(get_the_ID(), '_package_old_price', true);
    $on_sale = get_post_meta(get_the_ID(), '_package_on_sale', true);
?>

<!-- Package Hero Section -->
<section class="package-hero" style="position: relative; min-height: 60vh; display: flex; align-items: center; <?php if (has_post_thumbnail()) : ?>background-image: url('<?php echo get_the_post_thumbnail_url(get_the_ID(), 'full'); ?>');<?php endif; ?> background-size: cover; background-position: center;">
    <div style="position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.7) 100%);"></div>
    <div class="container" style="position: relative; z-index: 2;">
        <div style="max-width: 1240px; color: white;float: left; width: 1240px;">
            
            <!-- Title -->
            <h1 style="color: white; font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 20px; text-shadow: 0 2px 15px rgba(0,0,0,0.5);">
                <?php the_title(); ?>
            </h1>
            
            <!-- Meta Info -->
            <div style="display: flex; flex-wrap: wrap; gap: 30px; margin-bottom: 10px;">
                <?php if ($duration) : ?>
                    <div style="display: flex; align-items: center; gap: 10px;">
                        <i class="far fa-clock" style="font-size: 20px;"></i>
                        <span style="font-size: 16px;"><?php echo esc_html($duration); ?></span>
                    </div>
                <?php endif; ?>
                
                <?php if ($on_sale) : ?>
                    <div style="background: var(--secondary); color: var(--dark); padding: 8px 20px; border-radius: 25px; font-weight: 700; text-transform: uppercase; font-size: 14px;">
                        <?php _e('On Sale', 'travel-mountain'); ?>
                    </div>
                <?php endif; ?>
            </div>
            
            <!-- Price -->
            <div style="display: flex; align-items: center; gap: 15px;">
                <span style="font-size: 14px; opacity: 0.9;"><?php _e('Starting from', 'travel-mountain'); ?></span>
                <span style="font-size: 48px; font-weight: 700; color: var(--secondary);">
                    $<?php echo esc_html($price); ?>
                </span>
                <?php if ($old_price) : ?>
                    <span style="font-size: 24px; text-decoration: line-through; opacity: 0.7;">
                        $<?php echo esc_html($old_price); ?>
                    </span>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>

<!-- Package Content -->
<section style="padding: 80px 0;">
    <div class="container">
        <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 60px; align-items: start;">
            <!-- Main Content -->
            <div>
                <!-- Description -->
                <div style="background: white; padding: 40px; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); margin-bottom: 40px;">
                    <h2 style="font-size: 32px; color: var(--dark); margin-bottom: 25px; padding-bottom: 20px; border-bottom: 3px solid var(--primary);">
                        <?php _e('About This Package', 'travel-mountain'); ?>
                    </h2>
                    <div class="package-description" style="font-size: 16px; line-height: 1.8; color: var(--medium-gray);">
                        <?php the_content(); ?>
                    </div>
                </div>
                
     
                
                <!-- What's Included -->
                <div style="background: white; padding: 40px; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); margin-bottom: 40px;">
                    <h3 style="font-size: 24px; color: var(--dark); margin-bottom: 25px;">
                        <?php _e('What\'s Included', 'travel-mountain'); ?>
                    </h3>
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
                        <div style="display: flex; align-items: center; gap: 12px; padding: 15px; background: var(--cream); border-radius: 8px;">
                            <i class="fas fa-check-circle" style="color: var(--primary); font-size: 20px;"></i>
                            <span style="color: var(--dark); font-weight: 500;"><?php _e('Transportation', 'travel-mountain'); ?></span>
                        </div>
                        <div style="display: flex; align-items: center; gap: 12px; padding: 15px; background: var(--cream); border-radius: 8px;">
                            <i class="fas fa-check-circle" style="color: var(--primary); font-size: 20px;"></i>
                            <span style="color: var(--dark); font-weight: 500;"><?php _e('Tour Guide', 'travel-mountain'); ?></span>
                        </div>
 
                    </div>
                </div>
            </div>
            
            <!-- Sidebar -->
            <div style="position: sticky; top: 100px;">
                <!-- Booking Card -->
                <div style="background: white; padding: 35px; border-radius: 12px; box-shadow: 0 5px 30px rgba(0,0,0,0.1); margin-bottom: 30px;">
                    <div style="text-align: center; padding-bottom: 25px; border-bottom: 2px solid var(--light-gray); margin-bottom: 25px;">
                        <span style="font-size: 14px; color: var(--medium-gray); display: block; margin-bottom: 8px;">
                            <?php _e('Price Per Package', 'travel-mountain'); ?>
                        </span>
                        <div>
                            <span style="font-size: 42px; font-weight: 700; color: var(--primary);">
                                $<?php echo esc_html($price); ?>
                            </span>
                            <?php if ($old_price) : ?>
                                <span style="font-size: 20px; text-decoration: line-through; color: var(--medium-gray); margin-left: 10px;">
                                    $<?php echo esc_html($old_price); ?>
                                </span>
                            <?php endif; ?>
                        </div>
                    </div>

                    
                    <button class="btn-contact" style="width: 100%; background: transparent; color: var(--primary); border: 2px solid var(--primary); padding: 16px; font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 8px; cursor: pointer; transition: all 0.3s ease;">
                        <i class="fas fa-envelope"></i> <?php _e('Contact Us', 'travel-mountain'); ?>
                    </button>
                    
                    <div style="margin-top: 25px; padding-top: 25px; border-top: 1px solid var(--light-gray); font-size: 13px; color: var(--medium-gray); text-align: center;">
                        <i class="fas fa-shield-alt"></i> <?php _e('Secure Booking • Best Price Guarantee', 'travel-mountain'); ?>
                    </div>
                </div>
                
                <!-- Quick Info -->
                <div style="background: var(--cream); padding: 30px; border-radius: 12px;">
                    <h4 style="font-size: 18px; color: var(--dark); margin-bottom: 20px;">
                        <?php _e('Quick Information', 'travel-mountain'); ?>
                    </h4>
                    <ul style="list-style: none; padding: 0; margin: 0;">
                        <li style="display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--light-gray);">
                            <span style="color: var(--medium-gray);">
                                <i class="fas fa-map-marker-alt" style="width: 20px;"></i> <?php _e('Package', 'travel-mountain'); ?>
                            </span>
                            <strong style="color: var(--dark);"><?php echo esc_html($city); ?></strong>
                        </li>
 
                        <?php if ($duration) : ?>
                            <li style="display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--light-gray);">
                                <span style="color: var(--medium-gray);">
                                    <i class="far fa-clock" style="width: 20px;"></i> <?php _e('Duration', 'travel-mountain'); ?>
                                </span>
                                <strong style="color: var(--dark);"><?php echo esc_html($duration); ?></strong>
                            </li>
                        <?php endif; ?>
                        <li style="display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--light-gray);">
                            <span style="color: var(--medium-gray);">
                                <i class="fas fa-users" style="width: 20px;"></i> <?php _e('Group Size', 'travel-mountain'); ?>
                            </span>
                            <strong style="color: var(--dark);"><?php _e('2-15 People', 'travel-mountain'); ?></strong>
                        </li>
                        <li style="display: flex; justify-content: space-between; padding: 12px 0;">
                            <span style="color: var(--medium-gray);">
                                <i class="fas fa-language" style="width: 20px;"></i> <?php _e('Languages', 'travel-mountain'); ?>
                            </span>
                            <strong style="color: var(--dark);"><?php _e('English', 'travel-mountain'); ?></strong>
                        </li>
                    </ul>
                </div>
                
                <!-- Share -->
                <div style="margin-top: 30px; text-align: center;">
                    <span style="display: block; font-size: 14px; color: var(--medium-gray); margin-bottom: 15px;">
                        <?php _e('Share this package', 'travel-mountain'); ?>
                    </span>
                    <div style="display: flex; gap: 10px; justify-content: center;">
                        <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink()); ?>" target="_blank" rel="noopener noreferrer" style="width: 40px; height: 40px; background: #3b5998; color: white; display: flex; align-items: center; justify-content: center; border-radius: 8px; text-decoration: none; transition: all 0.3s ease;">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="https://twitter.com/intent/tweet?url=<?php echo urlencode(get_permalink()); ?>&text=<?php echo urlencode(get_the_title()); ?>" target="_blank" rel="noopener noreferrer" style="width: 40px; height: 40px; background: #1da1f2; color: white; display: flex; align-items: center; justify-content: center; border-radius: 8px; text-decoration: none; transition: all 0.3s ease;">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="https://api.whatsapp.com/send?text=<?php echo urlencode(get_the_title() . ' - ' . get_permalink()); ?>" target="_blank" rel="noopener noreferrer" style="width: 40px; height: 40px; background: #25d366; color: white; display: flex; align-items: center; justify-content: center; border-radius: 8px; text-decoration: none; transition: all 0.3s ease;">
                            <i class="fab fa-whatsapp"></i>
                        </a>
                        <a href="mailto:?subject=<?php echo urlencode(get_the_title()); ?>&body=<?php echo urlencode(get_permalink()); ?>" style="width: 40px; height: 40px; background: var(--dark); color: white; display: flex; align-items: center; justify-content: center; border-radius: 8px; text-decoration: none; transition: all 0.3s ease;">
                            <i class="fas fa-envelope"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Related Packages -->
<?php
$related_packages = new WP_Query(array(
    'post_type' => 'package',
    'posts_per_page' => 3,
    'post__not_in' => array(get_the_ID()),
    'orderby' => 'rand'
));

if ($related_packages->have_posts()) :
?>
<section style="padding: 80px 0; background: var(--cream);">
    <div class="container">
        <h2 style="font-size: 36px; text-align: center; margin-bottom: 50px; color: var(--dark);">
            <?php _e('You Might Also Like', 'travel-mountain'); ?>
        </h2>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px;">
            <?php while ($related_packages->have_posts()) : $related_packages->the_post(); 
                $rel_city = get_post_meta(get_the_ID(), '_package_city', true);
                $rel_country = get_post_meta(get_the_ID(), '_package_country', true);
                $rel_price = get_post_meta(get_the_ID(), '_package_price', true);
                $rel_duration = get_post_meta(get_the_ID(), '_package_duration', true);
            ?>
                <div class="related-package" style="background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.08); transition: all 0.3s ease;">
                    <a href="<?php the_permalink(); ?>" style="display: block;">
                        <?php if (has_post_thumbnail()) : ?>
                            <div style="height: 220px; overflow: hidden;">
                                <?php the_post_thumbnail('medium', array('style' => 'width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease;')); ?>
                            </div>
                        <?php endif; ?>
                        <div style="padding: 25px;">
                            <div style="color: var(--primary); font-size: 13px; font-weight: 600; margin-bottom: 10px;">
                                <i class="fas fa-map-marker-alt"></i> <?php echo esc_html($rel_city); ?>, <?php echo esc_html($rel_country); ?>
                            </div>
                            <h3 style="font-size: 20px; color: var(--dark); margin-bottom: 15px;">
                                <?php the_title(); ?>
                            </h3>
                            <div style="display: flex; justify-content: space-between; align-items: center;">
                                <?php if ($rel_duration) : ?>
                                    <span style="font-size: 13px; color: var(--medium-gray);">
                                        <i class="far fa-clock"></i> <?php echo esc_html($rel_duration); ?>
                                    </span>
                                <?php endif; ?>
                                <span style="font-size: 22px; font-weight: 700; color: var(--primary);">
                                    $<?php echo esc_html($rel_price); ?>
                                </span>
                            </div>
                        </div>
                    </a>
                </div>
            <?php endwhile; ?>
        </div>
    </div>
</section>
<?php
endif;
wp_reset_postdata();
?>

<style>
/* Button Hover Effects */
.btn-book-now:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.btn-contact:hover {
    background: var(--primary);
    color: white;
}

/* Related Package Hover */
.related-package:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}

.related-package:hover img {
    transform: scale(1.05);
}

.related-package a {
    text-decoration: none;
}

/* Share Buttons Hover */
div[style*="background: #3b5998"]:hover { opacity: 0.9; transform: translateY(-2px); }
div[style*="background: #1da1f2"]:hover { opacity: 0.9; transform: translateY(-2px); }
div[style*="background: #25d366"]:hover { opacity: 0.9; transform: translateY(-2px); }

/* Responsive */
@media (max-width: 768px) {
    section > div > div[style*="grid-template-columns: 2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    
    .package-hero > div > div {
        text-align: center;
    }
    
    div[style*="position: sticky"] {
        position: static !important;
    }
}
</style>

<?php
endwhile;
get_footer();
?>
