@extends($activeTemplate . 'layouts.frontend')
@section('content')

<div style="background: white; min-height: 100vh; padding: 20px;">
    <style>
        .footer-area .container-fluid {
            padding-left: 0px !important;
            padding-right: 15px !important;
        }
        
        .footer-area .container {
            padding-left: 15px !important;
            padding-right: 15px !important;
        }
        
        .bottom-footer .container-fluid {
            padding-left: 0px !important;
            padding-right: 15px !important;
        }
        
        .footer-area * {
            margin-left: 0px !important;
        }
        
        /* Mobile Responsive Layout */
        @media (max-width: 768px) {
            .row {
                flex-direction: column;
            }
            
            /* Form comes first - user friendly */
            .booking-section {
                order: -1;
                margin-top: 20px;
            }
            
            /* Header/banner comes second */
            .destination-banner {
                order: 1;
            }
            
            /* Itinerary selector comes after header */
            .itinerary-summary {
                order: 2;
                margin-top: 20px;
            }
            
            .itinerary-day {
                order: 3;
                margin-top: 10px;
            }
            
            /* Filter comes below form */
            .explore-section {
                order: 4;
            }
            
            /* Tour packages come after filter */
            .explore-section .col-lg-9 {
                order: 2;
            }
            
            /* Filter sidebar comes after form */
            .explore-section .col-lg-3 {
                order: 1;
            }
            
            /* Collapse footer on mobile */
            .footer-area {
                display: none;
            }
            
            /* Alternative: Minimize footer */
            .footer-area .container-fluid {
                padding: 10px 5px !important;
            }
            
            .footer-area .row {
                margin: 0 !important;
            }
            
            .footer-area .col-md-4 {
                margin-bottom: 5px !important;
            }
            
            .footer-area .widget-title {
                font-size: 0.8rem !important;
                margin-bottom: 5px !important;
            }
            
            .footer-area .widget-content {
                font-size: 0.7rem !important;
            }
            
            .footer-area .social-links {
                display: none;
            }
            
            .bottom-footer {
                padding: 5px 0 !important;
                font-size: 0.7rem !important;
            }
        }
    </style>

    <div class="container">
        <!-- Package Details Only -->
        <div class="row">
            <div class="col-12">
            <!-- Package Image Gallery -->
            <div class="product--img__preview image--popup-group mb-4">
                <div class="row g-2">
                    <div class="col-lg-12">
                        <div class="product--thumb radius--20 overflow-hidden">
                            <div class="main--thumb__preview radius--20">
                                <a class="d-flex w--100 h--100"
                                    href="{{ asset('assets/images/destinations/' . $tourPackage->image) }}?v={{ time() }}">
                                    <img class="fit--img"
                                        src="{{ asset('assets/images/destinations/' . $tourPackage->image) }}?v={{ time() }}"
                                        alt="tour-image">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Package Information -->
            <div class="base--card section--bg__two radius--16 border--none mb-4">
                <div class="product--info__item mb-3">
                    <h6 class="fs--32 fw--600 mb-2">Sri Lanka - {{ $tourPackage->title }}</h6>
                    <ul class="d-flex gap--20">
                        <li>
                            <span class="text--black7"><i class="fa-solid fa-clock"></i>
                                {{ $tourPackage->duration }}</span>
                        </li>
                        <li>
                            <span class="text--black7"><i class="fa-solid fa-route"></i>
                                Sri Lanka</span>
                        </li>
                    </ul>
                </div>

                <div class="product--info__item mb-3">
                    <h6 class="fs--20 fw--600 mb-3">Package Information</h6>
                    <div class="row">
                        @if(isset($tourPackage->package_type))
                        <div class="col-md-6 mb-2">
                            <p class="mb-1"><strong>Packages:</strong></p>
                            <p class="text-muted">{{ $tourPackage->package_type }}</p>
                        </div>
                        @endif
                        @if(isset($tourPackage->accommodations))
                        <div class="col-md-6 mb-2">
                            <p class="mb-1"><strong>Accommodations:</strong></p>
                            <p class="text-muted">{{ $tourPackage->accommodations }}</p>
                        </div>
                        @endif
                        @if(isset($tourPackage->transportation))
                        <div class="col-md-6 mb-2">
                            <p class="mb-1"><strong>Transportation:</strong></p>
                            <p class="text-muted">{{ $tourPackage->transportation }}</p>
                        </div>
                        @endif
                        @if(isset($tourPackage->tailor_made))
                        <div class="col-md-6 mb-2">
                            <p class="mb-1"><strong>Tailor Made:</strong></p>
                            <p class="text-muted">{{ $tourPackage->tailor_made }}</p>
                        </div>
                        @endif
                        @if(isset($tourPackage->route_summary))
                        <div class="col-12 mb-2">
                            <p class="mb-1"><strong>Route:</strong></p>
                            <p class="text-muted">{{ $tourPackage->route_summary }}</p>
                        </div>
                        @endif
                    </div>
                </div>

                <div class="product--info__item mb-3">
                    <h6 class="fs--20 fw--600 mb-3">Description</h6>
                    <p class="text-muted">{{ $tourPackage->description }}</p>
                </div>

                <!-- Itinerary Section -->
                <div class="product--info__item mb-3">
                    <h6 class="fs--20 fw--600 mb-4">Detailed Itinerary</h6>
                    @foreach($tourPackage->itinerary as $dayKey => $day)
                    <div class="itinerary-day mb-4">
                        <div class="day-header d-flex align-items-center mb-3">
                            <div class="day-badge bg--base text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px; font-weight: 600;">
                                {{ explode('_', $dayKey)[1] }}
                            </div>
                            <h5 class="mb-0 fw--600">{{ $day['title'] }}</h5>
                        </div>
                        
                        <div class="day-content ms-5">
                            <div class="steps-section mb-3">
                                <h6 class="text-muted mb-2"><i class="fa-solid fa-map-marked-alt me-2"></i>Itinerary steps:</h6>
                                <ul class="list-unstyled">
                                    @foreach($day['steps'] as $step)
                                    <li class="mb-2">
                                        <i class="fa-solid fa-check-circle text-success me-2"></i>
                                        {{ $step }}
                                    </li>
                                    @endforeach
                                </ul>
                            </div>
                            
                            @if(isset($day['meals']))
                            <div class="meals-section mb-2">
                                <h6 class="text-muted mb-1"><i class="fa-solid fa-utensils me-2"></i>Meals:</h6>
                                <p class="text-muted">{{ $day['meals'] }}</p>
                            </div>
                            @endif
                            
                            @if(isset($day['overnight']))
                            <div class="overnight-section">
                                <h6 class="text-muted mb-1"><i class="fa-solid fa-bed me-2"></i>Overnight:</h6>
                                <p class="text-muted">{{ $day['overnight'] }}</p>
                            </div>
                            @endif
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <!-- Related Packages -->
    @if(!empty($relatedPackages))
    <section class="related-packages section--bg py-100">
        <div class="container">
            <div class="section-header text-center mb-5">
                <h3 class="fw--600 mb-3">Related Packages</h3>
                <p class="text-muted">Explore more tour packages</p>
            </div>
            
            <div class="row gy-4">
                @foreach($relatedPackages as $package)
                <div class="col-md-6">
                    <div class="tour-card radius--20 position-relative bg--white">
                        <div class="tour-card__thumb">
                            <a href="{{ route('fixed.package.details', [$package['route']]) }}">
                                <img class="fit--img"
                                    src="{{ asset('assets/images/destinations/' . $package['image']) }}?v={{ time() }}"
                                    alt="Tour Image">
                            </a>
                        </div>

                        <div class="tour-card__content">
                            <div class="tour-card__location">
                                <ul class="d-flex justify-content-between align-items-start gap--20">
                                    <li>
                                        <p class="fs--14">
                                            <i class="fa-regular fa-compass"></i>
                                            Sri Lanka
                                        </p>
                                    </li>
                                    <li class="flex-shrink-0">
                                        <p class="fs--14"><i class="fa-regular fa-clock"></i>
                                            {{ $package['duration'] }}
                                        </p>
                                    </li>
                                </ul>
                            </div>

                            <a href="{{ route('fixed.package.details', [$package['route']]) }}">
                                <h6 class="tour-card__title fs--20 fw--600" title="{{ $package['title'] }}">
                                    {{ $package['title'] }}
                                </h6>
                            </a>

                            <div class="tour-card__price-wrap d-flex justify-content-between align-items-center gap--16 flex-wrap">
                                <div class="tour-card__price">
                                    <h6 class="fs--20 fw--600 mb-0 body--font">{{ $general->cur_sym }}{{ $package['price'] }}<span
                                            class="text--black7 fs--16">/package</span></h6>
                                </div>

                                <div class="tour-card__btn-wrap">
                                    <a href="{{ route('fixed.package.details', [$package['route']]) }}"
                                        class="text--base"><i class="fa-solid fa-arrow-right-long"></i> View Details</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    <style>
        .itinerary-day {
            border-left: 3px solid #FFD700;
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            position: relative;
        }
        
        .day-badge {
            background: linear-gradient(135deg, #FFD700, #FFA500) !important;
            box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
        }
        
        .day-header {
            position: relative;
        }
        
        .day-header::before {
            content: '';
            position: absolute;
            left: -23px;
            top: 50%;
            transform: translateY(-50%);
            width: 10px;
            height: 10px;
            background: #FFD700;
            border-radius: 50%;
            border: 3px solid white;
            box-shadow: 0 0 0 3px #FFD700;
        }
        
        .steps-section ul li {
            padding: 8px 0;
            border-bottom: 1px solid #e9ecef;
        }
        
        .steps-section ul li:last-child {
            border-bottom: none;
        }
        
        .booking-card {
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }
        
        .booking-card:hover {
            transform: translateY(-5px);
        }
        
        .contact-method {
            padding: 20px;
            border-radius: 10px;
            background: white;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
            transition: transform 0.3s ease;
        }
        
        .contact-method:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.12);
        }
        
        .stars i {
            font-size: 14px;
        }
    </style>

        </div>
    </div>
</div>
@endsection