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

<div class="tour-details-page" style="background:#f8f9fa; min-height:100vh;">
    <style>
        /* =============== BASE =============== */
        .tour-details-page {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        }

        .content-section {
            padding: 50px 0;
        }

        /* Remove ALL card look */
        .section-card { background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; margin-bottom: 24px !important; }
        .section-title {
            font-size: 1.6rem;
            font-weight: 700;
            color: #2d3748;
            margin: 0 0 1rem 0;
            position: relative;
            padding-left: 16px;
        }
        .section-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 22px;
            background: #D4AF35;
            border-radius: 2px;
        }

        /* =============== IMAGE =============== */
        .package-hero-img {
            width: 100%;
            height: 380px;
            object-fit: cover;
            border-radius: 14px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.08);
            background: #fff;
        }

        /* =============== OVERVIEW BLOCKS (NO CARDS) =============== */
        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
            gap: 14px;
            margin-bottom: 18px;
        }
        .info-item {
            padding: 14px 14px;
            background: #ffffff;
            border: 1px solid #e9ecef;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .info-label {
            font-size: .88rem;
            color: #6c757d;
            font-weight: 600;
        }
        .info-value {
            font-size: 1.02rem;
            color: #2d3748;
            font-weight: 600;
        }
        .description-text {
            font-size: 1.02rem;
            line-height: 1.75;
            color: #4a5568;
            background: #fff;
            border: 1px solid #e9ecef;
            border-radius: 12px;
            padding: 16px;
        }

        /* =============== HIGHLIGHTS (NO CARDS) =============== */
        .highlights-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 12px;
        }
        .highlight-item {
            background: #fff;
            border: 1px solid #e9ecef;
            border-radius: 12px;
            padding: 14px;
            display: flex;
            gap: 10px;
            align-items: flex-start;
        }
        .highlight-icon {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #D4AF35;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            margin-top: 2px;
        }
        .highlight-icon::after {
            content: '✓';
            color: #fff;
            font-size: 12px;
            font-weight: 800;
        }
        .highlight-text {
            font-size: .98rem;
            color: #4a5568;
            line-height: 1.55;
        }

        /* =============== FLIPKART-LIKE ITINERARY TIMELINE =============== */
        .itinerary-wrapper {
            margin-top: 10px;
        }
        .itinerary-timeline {
            position: relative;
            padding-left: 10px;
        }
        .timeline-row {
            display: grid;
            grid-template-columns: 56px 1fr;
            gap: 14px;
            margin-bottom: 18px;
            align-items: flex-start;
        }
        .timeline-left {
            position: relative;
            display: flex;
            justify-content: center;
        }
        .timeline-dot {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #D4AF35;
            color: #fff;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 6px 16px rgba(212,175,53,0.25);
            z-index: 2;
        }
        .timeline-line {
            position: absolute;
            top: 44px;
            left: 50%;
            transform: translateX(-50%);
            width: 3px;
            height: calc(100% - 44px);
            background: #e5e7eb;
            border-radius: 10px;
        }
        .timeline-cardless {
            background: transparent;
            border: none;
            padding: 0;
        }
        .timeline-title {
            margin: 0;
            font-size: 1.08rem;
            font-weight: 800;
            color: #1f2937;
        }
        .timeline-sub {
            margin-top: 6px;
            color: #6b7280;
            font-size: .95rem;
        }
        .timeline-steps {
            list-style: none;
            padding: 0;
            margin: 12px 0 0 0;
            display: grid;
            gap: 8px;
        }
        .timeline-step {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            padding: 10px 12px;
            background: #ffffff;
            border: 1px solid #e9ecef;
            border-radius: 12px;
        }
        .timeline-step .tick {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #D4AF35;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 11px;
            font-weight: 900;
            flex: 0 0 auto;
            margin-top: 2px;
        }
        .timeline-step .text {
            color: #374151;
            font-size: .98rem;
            line-height: 1.55;
        }

        .timeline-meta {
            margin-top: 12px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .meta-pill {
            display: inline-flex;
            gap: 8px;
            align-items: center;
            padding: 9px 12px;
            border-radius: 999px;
            background: #fff;
            border: 1px solid #e9ecef;
            color: #374151;
            font-weight: 600;
            font-size: .92rem;
        }

        /* =============== RIGHT BOOKING FORM (KEEP AS IS / STICKY) =============== */
        .booking-form {
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.08);
            padding: 28px;
            position: sticky;
            top: 20px;
            border: 1px solid #e9ecef;
        }
        .form-title {
            font-size: 1.3rem;
            font-weight: 800;
            color: #2d3748;
            margin-bottom: 1rem;
            text-align: center;
        }
        .form-group { margin-bottom: 14px; }
        .form-label {
            font-size: .9rem;
            font-weight: 700;
            color: #4a5568;
            margin-bottom: 6px;
            display: block;
        }
        .form-control {
            width: 100%;
            padding: .85rem 1rem;
            border: 2px solid #e9ecef;
            border-radius: 10px;
            font-size: 1rem;
            transition: .2s;
        }
        .form-control:focus {
            outline: none;
            border-color: #D4AF35;
            box-shadow: 0 0 0 3px rgba(212,175,53,.12);
        }
        .btn-book {
            width: 100%;
            padding: 1rem 1.2rem;
            background: #D4AF35;
            color: #fff;
            border: none;
            border-radius: 10px;
            font-size: 1.05rem;
            font-weight: 800;
            cursor: pointer;
            transition: .2s;
        }
        .btn-book:hover { transform: translateY(-1px); box-shadow: 0 10px 25px rgba(212,175,53,.25); }
        .btn-book:disabled { opacity: .6; cursor: not-allowed; transform: none; }

        /* =============== RESPONSIVE =============== */
        @media (max-width: 768px) {
            .package-hero-img { height: 260px; }
            .booking-form { position: static; margin-top: 18px; }
            .timeline-row { grid-template-columns: 52px 1fr; }
        }
    </style>

    <section class="content-section">
        <div class="container">
            <div class="row">
                <!-- LEFT -->
                <div class="col-lg-8">

                    <!-- IMAGE (NO CARD) -->
                    <div class="mb-4">
                        <img
                            src="{{ asset('assets/images/destinations/' . $tourPackage->image) }}?v={{ time() }}"
                            alt="{{ $tourPackage->title }}"
                            class="img-fluid package-hero-img"
                        >
                    </div>

                    <!-- OVERVIEW (NO CARD) -->
                    <div class="mb-4">
                        <h2 class="section-title">Destination Overview</h2>

                        <div class="info-grid">
                            <div class="info-item">
                                <div class="info-label"><i class="fas fa-plane-departure me-2"></i>Departure from</div>
                                <div class="info-value">Airport <i class="fas fa-exchange-alt me-1"></i> Airport</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label"><i class="fas fa-car me-2"></i>Transportation</div>
                                <div class="info-value">Private Vehicle</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label"><i class="fas fa-hotel me-2"></i>Accommodation</div>
                                <div class="info-value">5 Star Hotels</div>
                            </div>
                        </div>

                        <!--<div class="description-text">-->
                        <!--    {{ $tourPackage->description }}-->
                        <!--</div>-->

                        @if(isset($tourPackage->route_summary))
                            <div class="mt-3 info-item">
                                <div class="info-label">Route Summary</div>
                                <div class="info-value">{{ $tourPackage->route_summary }}</div>
                            </div>
                        @endif
                    </div>
                    
                    <div class="mb-4">
                        <h2 class="section-title">Highlights</h2>
                        <ul class="highlights-list">
                            @if(isset($tourPackage->highlights))
                                @foreach($tourPackage->highlights as $highlight)
                                <li class="highlight-item">
                                    <div class="highlight-icon"></div>
                                    <div class="highlight-text">{{ $highlight }}</div>
                                </li>
                                @endforeach
                            @endif
                        </ul>
                    </div>

                    <!-- HIGHLIGHTS (NO CARD) -->
                    <!--<div class="mb-4">-->
                    <!--    <h2 class="section-title">Highlights</h2>-->
                    <!--    <ul class="highlights-list">-->
                    <!--        <li class="highlight-item">-->
                    <!--            <div class="highlight-icon"></div>-->
                    <!--            <div class="highlight-text">Explore ancient cultural sites and UNESCO World Heritage locations</div>-->
                    <!--        </li>-->
                    <!--        <li class="highlight-item">-->
                    <!--            <div class="highlight-icon"></div>-->
                    <!--            <div class="highlight-text">Experience authentic Sri Lankan cuisine and local traditions</div>-->
                    <!--        </li>-->
                    <!--        <li class="highlight-item">-->
                    <!--            <div class="highlight-icon"></div>-->
                    <!--            <div class="highlight-text">Enjoy comfortable accommodations with stunning views</div>-->
                    <!--        </li>-->
                    <!--        <li class="highlight-item">-->
                    <!--            <div class="highlight-icon"></div>-->
                    <!--            <div class="highlight-text">Professional English-speaking guide throughout the journey</div>-->
                    <!--        </li>-->
                    <!--    </ul>-->
                    <!--</div>-->

                    <!-- ITINERARY (FLIPKART TRACKING STYLE - NO CARDS) -->
                    <div class="itinerary-wrapper mb-4">
                        <h2 class="section-title">Detailed Itinerary</h2>

                        <div class="itinerary-timeline">
                            @foreach($tourPackage->itinerary as $dayKey => $day)
                                <div class="timeline-row">

                                    <div class="timeline-left">
                                        <div class="timeline-dot">{{ explode('_', $dayKey)[1] }}</div>
                                        <div class="timeline-line"></div>
                                    </div>

                                    <div class="timeline-cardless">
                                        <h4 class="timeline-title">{{ $day['title'] }}</h4>

                                        @if(isset($day['steps']) && is_array($day['steps']))
                                            <ul class="timeline-steps">
                                                @foreach($day['steps'] as $step)
                                                    <li class="timeline-step">
                                                        <span class="tick">✓</span>
                                                        <span class="text">{{ $step }}</span>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        @endif

                                        <div class="timeline-meta">
                                            @if(isset($day['meals']))
                                                <span class="meta-pill">🍽️ {{ $day['meals'] }}</span>
                                            @endif

                                            @if(isset($day['overnight']))
                                                <span class="meta-pill">🏨 {{ $day['overnight'] }}</span>
                                            @endif
                                        </div>
                                    </div>

                                </div>
                            @endforeach
                        </div>
                    </div>

                </div>

                <!-- RIGHT -->
                <div class="col-lg-4">
                    <div class="booking-form">
                        <h3 class="form-title">Book This Tour</h3>

                        <form id="booking-form" method="POST" action="/contact" onsubmit="return false;">
                            @csrf

                            <div class="form-group">
                                <label class="form-label">Full Name *</label>
                                <input type="text" class="form-control" name="name" required placeholder="Enter your full name">
                            </div>

                            <div class="form-group">
                                <label class="form-label">Email Address *</label>
                                <input type="email" class="form-control" name="email" required placeholder="your@email.com">
                            </div>

                            <div class="form-group">
                                <label class="form-label">Phone Number *</label>
                                <input type="tel" class="form-control" name="phone" required placeholder="+1 234 567 8900">
                            </div>

                            <div class="form-group">
                                <label class="form-label">Number of Travelers *</label>
                                <input type="number" class="form-control" name="travelers" min="1" value="2" required>
                            </div>

                            <div class="form-group">
                                <label class="form-label">Travel Date *</label>
                                <input type="date" class="form-control" name="start_date" required>
                            </div>

                            <div class="form-group">
                                <label class="form-label">Special Requests</label>
                                <textarea class="form-control" name="message" rows="4" placeholder="Tell us about your preferences...">Package: {{ $tourPackage->title }}
Duration: {{ $tourPackage->duration }}
Destination: Sri Lanka

Travelers: [Will be filled by user]
Start Date: [Will be filled by user]
Phone: [Will be filled by user]

Special Requests:</textarea>
                            </div>

                            <input type="hidden" name="subject" value="Tour Booking Request - {{ $tourPackage->title }}">

                            <button type="submit" class="btn-book" id="submit-btn">Book Now</button>
                        </form>

                        <div class="text-center mt-3">
                            <small style="color:#6c757d;">
                                <i class="fas fa-lock me-1"></i>Your information is secures
                            </small>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <script>
        document.getElementById('booking-form').addEventListener('submit', function(e) {
            e.preventDefault();

            const formData = new FormData(this);
            const submitBtn = document.getElementById('submit-btn');
            const originalText = submitBtn.innerHTML;

            const travelers = formData.get('travelers') || '';
            const startDate = formData.get('start_date') || '';
            const phone = formData.get('phone') || '';

            let message = formData.get('message') || '';
            message = message.replace('[Will be filled by user]', travelers);
            message = message.replace('[Will be filled by user]', startDate);
            message = message.replace('[Will be filled by user]', phone);

            const newFormData = new FormData();
            newFormData.append('name', formData.get('name'));
            newFormData.append('email', formData.get('email'));
            newFormData.append('phone', formData.get('phone'));
            newFormData.append('subject', formData.get('subject'));
            newFormData.append('message', message);
            newFormData.append('_token', formData.get('_token'));

            console.log('Sending data:', Object.fromEntries(newFormData));

            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Processing...';
            submitBtn.disabled = true;

            fetch(this.action, {
                method: 'POST',
                body: newFormData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json'
                }
            })
            .then(response => {
                console.log('Response status:', response.status);
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                console.log('Response data:', data);
                if (data.success) {
                    // Show beautiful confirmation popup
                    showConfirmationPopup();
                    
                    // Reset form
                    this.reset();
                    document.querySelector('textarea[name="message"]').value = `Package: {{ $tourPackage->title }}
Duration: {{ $tourPackage->duration }}
Destination: Sri Lanka

Travelers: [Will be filled by user]
Start Date: [Will be filled by user]
Phone: [Will be filled by user]

Special Requests:`;
                } else {
                    showErrorPopup('There was an error submitting your request. Please try again.');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showErrorPopup('There was an error submitting your request. Please try again.');
            })
            .finally(() => {
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
            });
        });

        // Beautiful confirmation popup function
        function showConfirmationPopup() {
            const popupHtml = `
                <div id="confirmationPopup" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; display: flex; align-items: center; justify-content: center;">
                    <div style="background: white; border-radius: 15px; padding: 40px; max-width: 500px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.3); animation: slideIn 0.3s ease-out;">
                        <div style="width: 80px; height: 80px; background: linear-gradient(135deg, #28a745, #20c997); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;">
                            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3">
                                <path d="M20 6L9 17l-5-5"/>
                            </svg>
                        </div>
                        <h2 style="color: #2d3748; margin-bottom: 15px; font-size: 24px;">🎉 Booking Request Received!</h2>
                        <p style="color: #6c757d; margin-bottom: 10px; font-size: 16px;">Thank you for your booking request!</p>
                        <p style="color: #6c757d; margin-bottom: 25px; font-size: 14px;">We will contact you within 24 hours to confirm your tour details.</p>
                        <div style="background: #f8f9fa; border-radius: 10px; padding: 15px; margin-bottom: 25px; border-left: 4px solid #D4AF35;">
                            <p style="margin: 0; font-size: 14px; color: #495057;"><strong>📧 Check your email:</strong> You'll receive a confirmation email shortly.</p>
                        </div>
                        <button onclick="closeConfirmationPopup()" style="background: linear-gradient(135deg, #D4AF35, #B8941F); color: white; border: none; padding: 12px 30px; border-radius: 25px; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform 0.2s;">
                            Got it!
                        </button>
                    </div>
                </div>
                <style>
                    @keyframes slideIn {
                        from { transform: translateY(-50px); opacity: 0; }
                        to { transform: translateY(0); opacity: 1; }
                    }
                </style>
            `;
            
            document.body.insertAdjacentHTML('beforeend', popupHtml);
        }

        // Error popup function
        function showErrorPopup(message) {
            const popupHtml = `
                <div id="errorPopup" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; display: flex; align-items: center; justify-content: center;">
                    <div style="background: white; border-radius: 15px; padding: 40px; max-width: 500px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.3); animation: slideIn 0.3s ease-out;">
                        <div style="width: 80px; height: 80px; background: linear-gradient(135deg, #dc3545, #c82333); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;">
                            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3">
                                <line x1="18" y1="6" x2="6" y2="18"></line>
                                <line x1="6" y1="6" x2="18" y2="18"></line>
                            </svg>
                        </div>
                        <h2 style="color: #2d3748; margin-bottom: 15px; font-size: 24px;">❌ Oops! Something went wrong</h2>
                        <p style="color: #6c757d; margin-bottom: 25px; font-size: 16px;">${message}</p>
                        <button onclick="closeErrorPopup()" style="background: linear-gradient(135deg, #dc3545, #c82333); color: white; border: none; padding: 12px 30px; border-radius: 25px; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform 0.2s;">
                            Try Again
                        </button>
                    </div>
                </div>
                <style>
                    @keyframes slideIn {
                        from { transform: translateY(-50px); opacity: 0; }
                        to { transform: translateY(0); opacity: 1; }
                    }
                </style>
            `;
            
            document.body.insertAdjacentHTML('beforeend', popupHtml);
        }

        // Close popup functions
        function closeConfirmationPopup() {
            const popup = document.getElementById('confirmationPopup');
            if (popup) popup.remove();
        }

        function closeErrorPopup() {
            const popup = document.getElementById('errorPopup');
            if (popup) popup.remove();
        }
    </script>
</div>

@endsection