<?php
/**
 * Template Name: Destinations Archive
 * Description: Displays all travel destinations
 */

get_header();
?>

<!-- Page Header -->
<?php
$banner_image = get_theme_mod('destinations_banner_image');
$page_title = get_theme_mod('destinations_page_title', 'Travel Destinations');
$page_description = get_theme_mod('destinations_page_description', 'Explore our handpicked destinations across the globe and find your next adventure');

$header_style = $banner_image 
    ? "background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('" . esc_url($banner_image) . "') center/cover no-repeat;" 
    : "background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);";
?>
<section class="page-header" style="<?php echo $header_style; ?> padding: 120px 0 80px; text-align: center; color: white; position: relative;">
    <div class="container" style="position: relative; z-index: 2;">
        <h1 style="font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 15px; text-shadow: 0 2px 10px rgba(0,0,0,0.3);">
            <?php echo esc_html($page_title); ?>
        </h1>
        <p style="font-size: 18px; opacity: 0.9; max-width: 700px; margin: 0 auto;">
            <?php echo esc_html($page_description); ?>
        </p>
    </div>
</section>

<!-- Destinations Grid -->
<section class="destinations-archive" style="padding: 80px 0;">
    <div class="container">
        <?php
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
        $destinations_query = new WP_Query(array(
            'post_type' => 'destination',
            'posts_per_page' => 12,
            'paged' => $paged
        ));
        
        if ($destinations_query->have_posts()) :
        ?>
            <div class="destinations-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 35px; margin-bottom: 60px;">
                <?php
                while ($destinations_query->have_posts()) : $destinations_query->the_post();
                    $subtitle = get_post_meta(get_the_ID(), '_destination_subtitle', true);
                    $image_url = get_the_post_thumbnail_url(get_the_ID(), 'destination-thumbnail');
                    
                    // Count packages for this destination
                    $destination_name = get_the_title();
                    $packages_count = new WP_Query(array(
                        'post_type' => 'package',
                        'posts_per_page' => -1,
                        'meta_query' => array(
                            'relation' => 'OR',
                            array(
                                'key' => '_package_city',
                                'value' => $destination_name,
                                'compare' => 'LIKE'
                            ),
                            array(
                                'key' => '_package_country',
                                'value' => $destination_name,
                                'compare' => 'LIKE'
                            )
                        )
                    ));
                    $package_count = $packages_count->found_posts;
                    wp_reset_postdata();
                ?>
                    <div class="destination-card" style="position: relative; height: 400px; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.15); transition: all 0.3s ease; background-image: url('<?php echo esc_url($image_url ? $image_url : 'https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=800'); ?>'); background-size: cover; background-position: center;">
                        <!-- Gradient Overlay -->
                        <div style="position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,0.8) 100%);"></div>
                        
                        <!-- Content -->
                        <div style="position: absolute; bottom: 0; left: 0; right: 0; padding: 35px; color: white; z-index: 2;">
                            <?php if ($package_count > 0) : ?>
                                <div style="display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); padding: 8px 16px; border-radius: 20px; margin-bottom: 15px; font-size: 13px; font-weight: 600;">
                                    <i class="fas fa-suitcase"></i>
                                    <span>
                                        <?php echo sprintf(_n('%s Package', '%s Packages', $package_count, 'travel-mountain'), $package_count); ?>
                                    </span>
                                </div>
                            <?php endif; ?>
                            
                            <h3 style="font-size: 28px; margin-bottom: 10px; text-shadow: 0 2px 10px rgba(0,0,0,0.5);">
                                <?php the_title(); ?>
                            </h3>
                            
                            <?php if ($subtitle) : ?>
                                <p style="font-size: 15px; opacity: 0.9; margin-bottom: 20px; text-shadow: 0 1px 5px rgba(0,0,0,0.5);">
                                    <?php echo esc_html($subtitle); ?>
                                </p>
                            <?php endif; ?>
                            
                            <a href="<?php the_permalink(); ?>" class="dest-link" style="display: inline-flex; align-items: center; gap: 10px; color: white; font-weight: 600; text-decoration: none; padding: 12px 25px; background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); border: 2px solid white; border-radius: 30px; transition: all 0.3s ease;">
                                <?php _e('Explore', 'travel-mountain'); ?>
                                <i class="fas fa-arrow-right"></i>
                            </a>
                        </div>
                        
                        <!-- Hover Overlay -->
                        <div class="hover-overlay" style="position: absolute; inset: 0; background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.8) 0%, rgba(var(--primary-dark-rgb), 0.8) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: 1;"></div>
                    </div>
                <?php endwhile; ?>
            </div>
            
            <!-- Pagination -->
            <?php
            $total_pages = $destinations_query->max_num_pages;
            if ($total_pages > 1) :
            ?>
                <div class="pagination" style="display: flex; justify-content: center; gap: 10px; margin-top: 40px;">
                    <?php
                    echo paginate_links(array(
                        'total' => $total_pages,
                        'current' => $paged,
                        'prev_text' => '<i class="fas fa-chevron-left"></i>',
                        'next_text' => '<i class="fas fa-chevron-right"></i>',
                        'type' => 'list'
                    ));
                    ?>
                </div>
            <?php endif; ?>
            
        <?php
        else :
        ?>
            <!-- No Destinations Found -->
            <div style="text-align: center; padding: 80px 20px; background: var(--cream); border-radius: 12px;">
                <i class="fas fa-globe" style="font-size: 60px; color: var(--primary); opacity: 0.3; margin-bottom: 20px;"></i>
                <h2 style="font-size: 28px; color: var(--dark); margin-bottom: 15px;">
                    <?php _e('No Destinations Yet', 'travel-mountain'); ?>
                </h2>
                <p style="font-size: 16px; color: var(--medium-gray); margin-bottom: 30px;">
                    <?php _e('We\'re adding new destinations regularly. Check back soon!', 'travel-mountain'); ?>
                </p>
                <?php if (current_user_can('edit_posts')) : ?>
                    <a href="<?php echo admin_url('post-new.php?post_type=destination'); ?>" class="btn btn-primary">
                        <?php _e('Add Destination', 'travel-mountain'); ?>
                    </a>
                <?php endif; ?>
            </div>
        <?php
        endif;
        wp_reset_postdata();
        ?>
    </div>
</section>

<!-- Call to Action -->
<section class="cta-section" style="padding: 80px 0; background: var(--primary); text-align: center; color: white;">
    <div class="container">
        <h2 style="font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 20px;">
            <?php _e('Ready to Start Your Adventure?', 'travel-mountain'); ?>
        </h2>
        <p style="font-size: 18px; opacity: 0.9; margin-bottom: 30px; max-width: 600px; margin-left: auto; margin-right: auto;">
            <?php _e('Browse our travel packages or contact us to plan your perfect trip', 'travel-mountain'); ?>
        </p>
        <div style="display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;">
            <a href="<?php echo get_post_type_archive_link('package'); ?>" class="btn" style="background: white; color: var(--primary); padding: 18px 40px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; border-radius: 4px; text-decoration: none; display: inline-block; transition: all 0.3s ease;">
                <?php _e('View Packages', 'travel-mountain'); ?>
            </a>
            <a href="<?php echo home_url('/contact'); ?>" class="btn" style="background: transparent; color: white; border: 2px solid white; padding: 16px 40px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; border-radius: 4px; text-decoration: none; display: inline-block; transition: all 0.3s ease;">
                <?php _e('Contact Us', 'travel-mountain'); ?>
            </a>
        </div>
    </div>
</section>

<style>
/* Destination Card Hover Effects */
.destination-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.destination-card:hover .hover-overlay {
    opacity: 1;
}

.destination-card:hover .dest-link {
    background: white;
    color: var(--primary);
}

/* Pagination Styles */
.pagination ul {
    display: flex;
    list-style: none;
    gap: 10px;
    padding: 0;
    margin: 0;
}

.pagination li {
    margin: 0;
}

.pagination a,
.pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 45px;
    height: 45px;
    padding: 0 15px;
    background: white;
    border: 2px solid var(--light-gray);
    border-radius: 8px;
    color: var(--dark);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.pagination a:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.pagination .current {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* CTA Buttons Hover */
.cta-section .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Responsive */
@media (max-width: 768px) {
    .destinations-grid {
        grid-template-columns: 1fr !important;
    }
    
    .destination-card {
        height: 350px !important;
    }
    
    .pagination ul {
        flex-wrap: wrap;
        justify-content: center;
    }
}
</style>

<?php get_footer(); ?>
