<?php
/**
 * Single Package Template with Bootstrap Columns and Cost Tabs
 * Save this as single-packages.php in your active theme directory
 */
get_header();
include get_template_directory() . '/inc/menus/menu.php'; 
?>

<div class="safari-package-container">
    <?php while (have_posts()) : the_post(); ?>
        
        <div class="package-hero">
            <?php if (has_post_thumbnail()) : ?>
                <div class="package-hero-bg">
                    <?php the_post_thumbnail('full'); ?>
                </div>
            <?php endif; ?>
            
            <div class="package-hero-overlay">
                <h1 class="package-title"><?php the_title(); ?></h1>
                
                <div class="package-meta">
                    <?php
                    $duration = get_post_meta(get_the_ID(), '_package_duration', true);
                    $location = get_post_meta(get_the_ID(), '_package_location', true);
                    $categories = get_the_terms(get_the_ID(), 'package_category');
                    ?>
                    
                    <div class="package-meta-item">
                        <span class="meta-icon"><i class="bi bi-calendar"></i>️</span>
                        <span class="meta-value"><?php echo esc_html($duration); ?> Days</span>
                    </div>
                    
                    <?php if ($location) : ?>
                        <div class="package-meta-item">
                            <span class="meta-icon"><i class="bi bi-pin-map"></i></span>
                            <span class="meta-value"><?php echo esc_html($location); ?></span>
                        </div>
                    <?php endif; ?>
                    
                    <?php if ($categories && !is_wp_error($categories)) : ?>
                        <div class="package-meta-item">
                            <span class="meta-icon">🏷️</span>
                            <span class="meta-value">
                                <?php
                                $category_names = array();
                                foreach ($categories as $category) {
                                    $category_names[] = $category->name;
                                }
                                echo implode(', ', $category_names);
                                ?>
                            </span>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
        
        <div class="package-content-wrapper py-4">
            <div class="package-description">
                <h2>About This Safari Package</h2>
                <?php the_content(); ?>
            </div>
            
            <div class="container-fluid">
                <div class="row">
                    <!-- Left Column - Itinerary Accordion -->
                    <div class="col-lg-8 col-md-7">
                        <?php
                        $itinerary = get_post_meta(get_the_ID(), '_package_itinerary', true);
                        if (!empty($itinerary) && is_array($itinerary)) :
                        ?>
                            <div class="package-itinerary py-4">
                                <h2>Safari Itinerary</h2>
                                <div class="safari-accordion">
                                    <?php foreach ($itinerary as $day => $item) : ?>
                                        <?php if (!empty($item['title']) || !empty($item['description'])) : ?>
                                            <div class="accordion-item">
                                                <div class="accordion-header" data-day="<?php echo esc_attr($day); ?>">
                                                    <div class="accordion-day">
                                                        <span class="day-number">Day <?php echo esc_html($day); ?></span>
                                                        <span class="day-title"><?php echo esc_html($item['title']); ?></span>
                                                    </div>
                                                    <div class="accordion-icon">
                                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M12 8L8 12L12 16L16 12L12 8Z" fill="currentColor"/>
                                                        </svg>
                                                    </div>
                                                </div>
                                                <div class="accordion-content">
                                                    <div class="accordion-body">
                                                        <p><?php echo wp_kses_post(nl2br($item['description'])); ?></p>
                                                    </div>
                                                </div>
                                            </div>
                                        <?php endif; ?>
                                    <?php endforeach; ?>
                                </div>
                            </div>
                        <?php endif; ?>
                    </div>
                    
                    <!-- Right Column - Cost Tabs -->
                    <div class="col-lg-4 col-md-5">
                        <div class="package-booking py-4">
                            <div class="booking-container">
                                <h3>Book This Safari</h3>
                                <button id="package-book-now" class="btn btn-primary booking-btn">
                                    <i class="bi bi-calendar-check me-2"></i>
                                    Book Now
                                </button>
                            </div>
                        </div>
                        <?php
                        $inclusive_costs = get_post_meta(get_the_ID(), '_package_inclusive_costs', true);
                        $exclusive_costs = get_post_meta(get_the_ID(), '_package_exclusive_costs', true);
                        
                        if ((!empty($inclusive_costs) && is_array($inclusive_costs)) || 
                            (!empty($exclusive_costs) && is_array($exclusive_costs))) :
                        ?>
                            <div class="package-costs py-4">
                                <h2>Package Costs</h2>
                                <div class="costs-tabs-container">
                                    <!-- Tab Navigation -->
                                    <ul class="nav nav-tabs costs-nav-tabs" id="costsTab" role="tablist">
                                        <?php if (!empty($inclusive_costs) && is_array($inclusive_costs)) : ?>
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link active" id="inclusive-tab" data-bs-toggle="tab" data-bs-target="#inclusive" type="button" role="tab">
                                                    <i class="bi bi-check-circle me-2"></i>Inclusive Costs
                                                </button>
                                            </li>
                                        <?php endif; ?>
                                        
                                        <?php if (!empty($exclusive_costs) && is_array($exclusive_costs)) : ?>
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link <?php echo empty($inclusive_costs) ? 'active' : ''; ?>" id="exclusive-tab" data-bs-toggle="tab" data-bs-target="#exclusive" type="button" role="tab">
                                                    <i class="bi bi-x-circle me-2"></i>Exclusive Costs
                                                </button>
                                            </li>
                                        <?php endif; ?>
                                    </ul>
                                    
                                    <!-- Tab Content -->
                                    <div class="tab-content costs-tab-content" id="costsTabContent">
                                        <?php if (!empty($inclusive_costs) && is_array($inclusive_costs)) : ?>
                                            <div class="tab-pane fade show active" id="inclusive" role="tabpanel">
                                                <div class="costs-list inclusive-costs">
                                                    <h4 class="costs-title">What's Included</h4>
                                                    <ul class="cost-items">
                                                        <?php foreach ($inclusive_costs as $cost) : ?>
                                                            <?php if (!empty($cost)) : ?>
                                                                <li class="cost-item">
                                                                    <i class="bi bi-check-circle-fill"></i>
                                                                    <span><?php echo esc_html($cost); ?></span>
                                                                </li>
                                                            <?php endif; ?>
                                                        <?php endforeach; ?>
                                                    </ul>
                                                </div>
                                            </div>
                                        <?php endif; ?>
                                        
                                        <?php if (!empty($exclusive_costs) && is_array($exclusive_costs)) : ?>
                                            <div class="tab-pane fade <?php echo empty($inclusive_costs) ? 'show active' : ''; ?>" id="exclusive" role="tabpanel">
                                                <div class="costs-list exclusive-costs">
                                                    <h4 class="costs-title">What's Not Included</h4>
                                                    <ul class="cost-items">
                                                        <?php foreach ($exclusive_costs as $cost) : ?>
                                                            <?php if (!empty($cost)) : ?>
                                                                <li class="cost-item">
                                                                    <i class="bi bi-x-circle-fill"></i>
                                                                    <span><?php echo esc_html($cost); ?></span>
                                                                </li>
                                                            <?php endif; ?>
                                                        <?php endforeach; ?>
                                                    </ul>
                                                </div>
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Add the booking form modal -->
        <div id="package-booking-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 9999; overflow-y: auto;">
            <div style="background: white; margin: 50px auto; padding: 30px; max-width: 600px; border-radius: 10px; position: relative;">
                <button id="close-booking-modal" style="position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 24px; cursor: pointer;">×</button>
                <h2>Book <?php echo get_the_title(); ?></h2>
                <?php echo do_shortcode('[standard_safari_booking_form]'); ?>
            </div>
        </div>
        
    <?php endwhile; ?>
</div>



<script>
document.addEventListener('DOMContentLoaded', function() {
    // Accordion functionality
    const accordionHeaders = document.querySelectorAll('.accordion-header');
    
    accordionHeaders.forEach(header => {
        header.addEventListener('click', function() {
            const accordionItem = this.parentElement;
            const isActive = accordionItem.classList.contains('active');
            
            // Close all other accordion items
            document.querySelectorAll('.accordion-item').forEach(item => {
                item.classList.remove('active');
            });
            
            // Toggle current item
            if (!isActive) {
                accordionItem.classList.add('active');
            }
        });
    });
    
    // Tab functionality (if Bootstrap JS is not loaded)
    const tabLinks = document.querySelectorAll('.costs-nav-tabs .nav-link');
    const tabPanes = document.querySelectorAll('.costs-tab-content .tab-pane');
    
    tabLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            
            // Remove active class from all tabs and panes
            tabLinks.forEach(tab => tab.classList.remove('active'));
            tabPanes.forEach(pane => {
                pane.classList.remove('show', 'active');
            });
            
            // Add active class to clicked tab
            this.classList.add('active');
            
            // Show corresponding pane
            const targetId = this.getAttribute('data-bs-target');
            const targetPane = document.querySelector(targetId);
            if (targetPane) {
                targetPane.classList.add('show', 'active');
            }
        });
    });
    
    // Initialize first tab as active if no Bootstrap JS
    if (typeof bootstrap === 'undefined') {
        const firstTab = document.querySelector('.costs-nav-tabs .nav-link');
        const firstPane = document.querySelector('.costs-tab-content .tab-pane');
        
        if (firstTab && firstPane) {
            firstTab.classList.add('active');
            firstPane.classList.add('show', 'active');
        }
    }
    
    // Booking modal functionality
    const bookingBtn = document.getElementById('package-book-now');
    const bookingModal = document.getElementById('package-booking-modal');
    const closeModalBtn = document.getElementById('close-booking-modal');
    
    if (bookingBtn && bookingModal) {
        bookingBtn.addEventListener('click', function() {
            bookingModal.style.display = 'block';
            document.body.style.overflow = 'hidden'; // Prevent scrolling
        });
    }
    
    if (closeModalBtn && bookingModal) {
        closeModalBtn.addEventListener('click', function() {
            bookingModal.style.display = 'none';
            document.body.style.overflow = ''; // Re-enable scrolling
        });
    }
    
    // Close modal when clicking outside
    if (bookingModal) {
        bookingModal.addEventListener('click', function(e) {
            if (e.target === bookingModal) {
                bookingModal.style.display = 'none';
                document.body.style.overflow = ''; // Re-enable scrolling
            }
        });
    }
});
</script>

<?php get_footer(); ?>