@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;
            }
        }
        
        /* Custom Itinerary Styles */
        .itinerary-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            margin-bottom: 20px;
        }
        
        .itinerary-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        }
        
        .itinerary-image {
            height: 200px;
            object-fit: cover;
            width: 100%;
        }
        
        .day-number {
            background: linear-gradient(135deg, #FFD700, #FFA500);
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.2rem;
            box-shadow: 0 3px 10px rgba(255, 215, 0, 0.3);
        }
        
        .tour-item {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 3px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
            margin-bottom: 15px;
        }
        
        .tour-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 20px rgba(0,0,0,0.15);
        }
        
        .tour-image-container {
            position: relative;
            overflow: hidden;
            border-radius: 10px 10px 0 0;
        }
        
        .tour-image-container img {
            transition: transform 0.3s ease;
        }
        
        .tour-image-container:hover img {
            transform: scale(1.05);
        }
        
        .tour-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.7) 100%);
            display: flex;
            align-items: flex-end;
            padding: 15px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .tour-image-container:hover .tour-overlay {
            opacity: 1;
        }
    </style>

    <div class="container">
        <div class="row">
            <!-- Left Column - Booking Form First -->
            <div class="col-lg-4 booking-section">
                <div class="booking-section">
                    <div class="card border-0 shadow-lg" style="border-radius: 15px; background: white; position: relative; overflow: hidden;">
                        <!-- Background Image -->
                        <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.05; z-index: 1;">
                            <img src="{{ asset('assets/presets/default/images/shape/whychoose-bg2.png') }}" style="width: 100%; height: 100%; object-fit: cover;">
                        </div>
                        
                        <div class="card-body p-4" style="position: relative; z-index: 2;">
                            <div class="text-center mb-4">
                                <h3 class="mb-2" style="font-size: 1.6rem; font-weight: 700; color: #FFD700;">Book Your Dream Tour</h3>
                                <p class="text-muted" style="font-size: 0.9rem;">Fill in your details and we'll create your perfect Sri Lanka itinerary</p>
                            </div>
                             
                            <form id="booking-form" method="POST" action="/contact" onsubmit="return false;">
                                @csrf
                                
                                <div class="row">
                                    <div class="col-12">
                                        <div class="mb-3">
                                            <label class="form-label" style="font-size: 0.9rem; font-weight: 600; color: #333;">Full Name *</label>
                                            <input type="text" class="form-control" name="name" required placeholder="Your Full Name" style="font-size: 0.85rem; border-radius: 8px; border: 1px solid #dee2e6; padding: 10px 12px;">
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label" style="font-size: 0.9rem; font-weight: 600; color: #333;">Email *</label>
                                            <input type="email" class="form-control" name="email" required placeholder="Your Email" style="font-size: 0.85rem; border-radius: 8px; border: 1px solid #dee2e6; padding: 10px 12px;">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label" style="font-size: 0.9rem; font-weight: 600; color: #333;">Phone *</label>
                                            <input type="tel" class="form-control" name="phone" required placeholder="Your Phone Number" style="font-size: 0.85rem; border-radius: 8px; border: 1px solid #dee2e6; padding: 10px 12px;">
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label" style="font-size: 0.9rem; font-weight: 600; color: #333;">Number of Travelers *</label>
                                            <input type="number" class="form-control" name="travelers" min="1" value="2" required placeholder="Number of Travelers" style="font-size: 0.85rem; border-radius: 8px; border: 1px solid #dee2e6; padding: 10px 12px;">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label" style="font-size: 0.9rem; font-weight: 600; color: #333;">Start Date *</label>
                                            <input type="date" class="form-control" name="start_date" required style="font-size: 0.85rem; border-radius: 8px; border: 1px solid #dee2e6; padding: 10px 12px;">
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="mb-4">
                                    <label class="form-label fw-bold" style="font-size: 0.9rem; font-weight: 600; color: #333;">Subject *</label>
                                    <input type="text" class="form-control" name="subject" required value="Tour Booking Request - {{ $tourPackage->title }}" style="font-size: 0.85rem; border-radius: 8px; border: 1px solid #dee2e6; padding: 10px 12px;">
                                </div>
                                
                                <div class="mb-4">
                                    <label class="form-label fw-bold" style="font-size: 0.9rem; font-weight: 600; color: #333;">Message *</label>
                                    <textarea class="form-control" name="message" rows="4" required placeholder="Tell us about your dream Sri Lanka tour..." style="font-size: 0.85rem; border-radius: 8px; border: 1px solid #dee2e6; padding: 10px 12px;">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>
                                
                                <button type="submit" class="btn w-100" style="background: linear-gradient(135deg, #FFD700, #FFA500); border: none; color: white; font-weight: 600; padding: 12px; border-radius: 8px; font-size: 0.9rem;">
                                    <i class="fas fa-paper-plane me-2"></i>Send Booking Request
                                </button>
                                
                                <div class="text-center mt-3">
                                    <small class="text-muted">
                                        <i class="fas fa-lock me-1"></i>Your information is secure and will never be shared
                                    </small>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column - Custom Itinerary -->
            <div class="col-lg-8">
                <!-- Package Header -->
                <div class="destination-banner mb-4">
                    <div class="card border-0 shadow-lg" style="border-radius: 15px; overflow: hidden; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                        <div class="card-body p-5 text-center text-white">
                            <h1 class="display-4 fw-bold mb-3">Your Custom Sri Lanka Itinerary</h1>
                            <p class="lead mb-4">{{ $tourPackage->title }} - {{ $tourPackage->duration }}</p>
                            <div class="d-flex justify-content-center gap-3 flex-wrap">
                                <span class="badge bg-light text-dark px-3 py-2"><i class="fas fa-map-marked-alt me-2"></i>Sri Lanka</span>
                                <span class="badge bg-light text-dark px-3 py-2"><i class="fas fa-calendar me-2"></i>{{ $tourPackage->duration }}</span>
                                <span class="badge bg-light text-dark px-3 py-2"><i class="fas fa-star me-2"></i>4.8 Rating</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Custom Itinerary Section -->
                <div class="itinerary-summary mb-4">
                    <h3 class="mb-4" style="color: #333; font-weight: 700;">Your Custom Itinerary</h3>
                    <p class="text-muted mb-4">Explore your personalized day-by-day journey through Sri Lanka's most amazing destinations</p>
                    
                    <!-- Tour Images Gallery -->
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <div class="tour-item">
                                <div class="tour-image-container">
                                    <img src="{{ asset('assets/images/destinations/tour1.jpeg') }}?v={{ time() }}" alt="Sri Lanka Tour" class="img-fluid itinerary-image">
                                    <div class="tour-overlay">
                                        <h6 style="color: white; font-size: 1rem; margin: 0;">Cultural Triangle</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="tour-item">
                                <div class="tour-image-container">
                                    <img src="{{ asset('assets/images/destinations/tour19.jpeg') }}?v={{ time() }}" alt="Sri Lanka Tour" class="img-fluid itinerary-image">
                                    <div class="tour-overlay">
                                        <h6 style="color: white; font-size: 1rem; margin: 0;">Ancient Cities</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="tour-item">
                                <div class="tour-image-container">
                                    <img src="{{ asset('assets/images/destinations/tour7.jpeg') }}?v={{ time() }}" alt="Sri Lanka Tour" class="img-fluid itinerary-image">
                                    <div class="tour-overlay">
                                        <h6 style="color: white; font-size: 1rem; margin: 0;">Beach Paradise</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Day-by-Day Itinerary -->
                <div class="itinerary-days">
                    <h3 class="mb-4" style="color: #333; font-weight: 700;">Day-by-Day Details</h3>
                    
                    @foreach($tourPackage->itinerary as $dayKey => $day)
                    <div class="itinerary-card">
                        <div class="row g-0">
                            <div class="col-md-4">
                                <img src="{{ asset('assets/images/destinations/tour' . rand(1, 20) . '.jpeg') }}?v={{ time() }}" alt="Day {{ explode('_', $dayKey)[1] }}" class="itinerary-image">
                            </div>
                            <div class="col-md-8">
                                <div class="card-body p-4">
                                    <div class="d-flex align-items-center mb-3">
                                        <div class="day-number me-3">
                                            {{ explode('_', $dayKey)[1] }}
                                        </div>
                                        <h4 class="card-title mb-0" style="color: #333; font-weight: 600;">{{ $day['title'] }}</h4>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <h6 class="text-muted mb-2"><i class="fa-solid fa-map-marked-alt me-2"></i>Activities:</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="mb-2">
                                        <h6 class="text-muted mb-1"><i class="fa-solid fa-utensils me-2"></i>Meals:</h6>
                                        <p class="text-muted mb-0">{{ $day['meals'] }}</p>
                                    </div>
                                    @endif
                                    
                                    @if(isset($day['overnight']))
                                    <div>
                                        <h6 class="text-muted mb-1"><i class="fa-solid fa-bed me-2"></i>Overnight:</h6>
                                        <p class="text-muted mb-0">{{ $day['overnight'] }}</p>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <script>
        // Form submission handler
        document.getElementById('booking-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            const submitBtn = this.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            
            // Get additional field values
            const travelers = formData.get('travelers') || '';
            const startDate = formData.get('start_date') || '';
            const phone = formData.get('phone') || '';
            
            // Update message with user input
            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);
            
            // Create new FormData with updated message
            const newFormData = new FormData();
            newFormData.append('name', formData.get('name'));
            newFormData.append('email', formData.get('email'));
            newFormData.append('subject', formData.get('subject'));
            newFormData.append('message', message);
            newFormData.append('_token', formData.get('_token'));
            
            // Show loading state
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Sending...';
            submitBtn.disabled = true;
            
            // Submit form via AJAX
            fetch(this.action, {
                method: 'POST',
                body: newFormData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Show success message
                    alert('Thank you for your booking request! We will contact you soon.');
                    this.reset();
                    // Reset message to default
                    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 {
                    // Show error message
                    alert('There was an error submitting your request. Please try again.');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                // Fallback to regular form submission if AJAX fails
                this.submit();
            })
            .finally(() => {
                // Reset button state
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
            });
        });
    </script>
</div>
@endsection