@section('seo')
@include('layouts._front_includes._seo', ['seo' => $page->seo])
@endsection

@extends('layouts.frontend_master')

@section('content')


<div class="booking-tempate">
    <!-- Main Content -->
    <!-- Hero Banner Section -->
    <div class="booking-banner" style="background-image: url('{{$package->cover_image->getPath()}}')">
        <h1>Book Your Trip</h1>
    </div>

    <section class="booking-template-section">
        <div class="booking-template-section-heading">
            <span class="booking-template-section-title">Tailored for You</span>
            <h2 class="booking-template-section-main-heading">Pre-book your Trip</h2>

        </div>
    </section>

    <div class="booking-template-form-container">
        <form class="booking-template-form" action="{{ route('package-booking', ['package' => $package->id]) }}"
            id="bookingForm">
            @csrf
            <!-- Trip detail Card -->
            <div class="booking-template-form-card">
                <div class="booking-template-form-section">
                    <h2>Trip Details</h2>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="booking-template-form-group">
                                <label for="name" required>Trip*</label>
                                <input type="text" value="{{$package->title}}" disabled />
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="booking-template-form-group">
                                <label for="email">No. of Travellers*</label>
                                <input type="text" id="email" name="no_of_people" id="no_of_people" min="1"
                                    placeholder="eg. 4,8, ..." />
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="booking-template-form-group">
                                <label for="arrival_date">Arrival Date*</label>
                                <input type="date" id="arrival_date" name="arrival_date">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="booking-template-form-group">
                                <label for="departure_date">Departure Date*</label>
                                <input type="date" id="departure_date" name="departure_date"
                                    value="{{ isset($departure) ? $departure->end_date : '' }}"
                                    class="w-100 common-input" placeholder="End Date" {{ isset($departure) ? 'readonly'
                                    : '' }} />

                            </div>
                        </div>

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


            <input type="hidden" name="package_price" id="package_price"
                value="{{ isset($departure) && $departure->price ? $departure->price : $package->price }}">


            <!-- Personal Information Card -->
            <div class="booking-template-form-card">
                <div class="booking-template-form-section">
                    <h2>Personal Information</h2>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="booking-template-form-group">
                                <label for="name" required>Full Name*</label>
                                <input type="text" id="name" name="name" required placeholder="eg. John Doe" />
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="booking-template-form-group">
                                <label for="email" required>Email*</label>
                                <input type="text" id="email" name="email" required placeholder="eg. abc@gmail.com" />
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="booking-template-form-group">
                                <label for="phone" required>Contact No.</label>
                                <input type="text" name="phone" id="phone" required
                                    placeholder="eg. +977 - 4578962155" />
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="booking-template-form-group">
                                <label for="country" required>Nationality*</label>
                                <input type="text" id="country" name="country" required
                                    placeholder="eg. Nepali, Indian..." />
                            </div>
                        </div>

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

            <div class="booking-template-form-card">
                <div class="booking-template-form-section">
                    <h2>Additional Information</h2>
                    <div class="row g-3">
                        <div class="booking-template-form-group">
                            <label for="message">Message*</label>
                            <textarea id="message" name="message" placeholder="Your message here..."
                                required></textarea>
                        </div>
                    </div>
                </div>
            </div>

            <div class="booking-template-checkbox-group">
                <input type="checkbox" id="agree" name="agree" required />
                <label for="terms">
                    I agree to the <a href="{{route('page',$terms->slug)}}" style="color: red;">terms &
                        conditions</a>
                </label>
            </div>
            <button type="submit" id="submit-btn" class="g-recaptcha booking-template-submit-btn"
                data-sitekey="{{ config('services.recaptcha_v3.siteKey') }}" data-callback="onSubmit"
                data-action="submitInquiry">Submit</button>
        </form>
    </div>
</div>


@endsection

@push('frontend_js')
<script src="https://www.google.com/recaptcha/api.js?render={{ config('services.recaptcha_v3.siteKey') }}"></script>

<script>
    function onSubmit(token) {
        const submit_btn = document.getElementById("submit-btn");
        const attr = submit_btn.getAttribute("data-form");
        
        if (attr == "processing") {
            return false;
        }

        const form = document.getElementById('bookingForm');
        const url = form.action;
        const container = document.getElementById("bookingForm");

        try {
            submit_btn.classList.add("disabled");
            submit_btn.innerText = "Submitting...";
            
            const formData = new FormData(form);
            formData.append('g-recaptcha-response', token); 

            fetch(url, {
                method: 'POST',
                body: formData,
                redirect: 'follow',
                headers: {
                    "Accept": "application/json"
                }
            }).then(async response => {
                if (response.redirected) {
                    window.location.href = response.url;
                }
                let res = await response.json();
                res["flag"] = response.ok;
                submit_btn.setAttribute("data-form", "done");
                return res;
            }).then(response => {
                // Remove old error messages
                const oldErrors = document.querySelectorAll('.invalid-feedback');
                oldErrors.forEach(error => error.remove());

                if (!response.flag) {
                    // Show error messages
                    Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: response.message,
                        showConfirmButton: false,
                        timer: 2500
                    });

                    Object.keys(response.errors).forEach(input_name => {
                        const elements = container.querySelectorAll(`[name='${input_name}']`);
                        if (elements.length > 0) {
                            const element = elements[0];
                            response.errors[input_name].forEach(errorMessage => {
                                const errorElement = document.createElement("span");
                                errorElement.setAttribute("class", "invalid-feedback d-block");
                                errorElement.setAttribute("role", "alert");
                                errorElement.innerHTML = `<strong>${errorMessage}</strong>`;
                                element.closest('.form-group').appendChild(errorElement);
                            });

                            element.addEventListener("change", () => {
                                const errorElements = element.closest('.form-group')
                                    .querySelectorAll('.invalid-feedback');
                                errorElements.forEach(err => err.remove());
                            });
                        }
                    });
                } else {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: response.message,
                        showConfirmButton: false,
                        timer: 2000
                    }).then(() => {
                        form.reset();
                    });
                }
            }).finally(() => {
                submit_btn.classList.remove("disabled");
                submit_btn.innerText = "Submit";
            });
        } catch (error) {
            console.error(error, 'Form submitting error');
        }

        return false;
    }
</script>

@endpush