@extends('site.pages')

@section('title', $page_title)

@section('breadcrumb_content')
    <h1 class="mb-3">{{$page_title}}</h1>
    <nav aria-label="breadcrumb" class="d-block">
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('home')}}">{{__('pages.home')}}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{$page_title}}</li>
        </ul>
    </nav>
@endsection

@section('content')

    @include('site.partials.breadcrumb')
    <!-- top Destination starts -->
    <form action="{{route('tailor_trip_store')}}" method="post" class="tailor_trip_form">
        @csrf
        <section class="tailor-trip pt-8 pb-0 bg-lgrey mb-5">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-11 col-sm-10 col-md-9 text-center p-0 mt-3 mb-2">
                        <div class="card px-0 pt-4 pb-0 mt-3 mb-3">
                            <div class="form-card">
                                <div class="payment-book">
                                    <div class="booking-box">
                                        <div class="customer-information">
                                            <h3 class="border-b pb-2 mb-2">{{__('pages.Select Your Destination')}}</h3>
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="alert alert-danger p-3" id="error_message"  style="display: none;" >
                                                        <ul id="error_message_list">
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group mb-2">
                                                        <label>{{__('pages.country')}} <span class="text-danger small">*</span></label>
                                                        <div class="input-box">
                                                            <select id="country_id" class="niceSelect custom-niceselect" style="display: none;" name="country_id">
                                                                <option >{{__('pages.select')}}
                                                                @foreach($countries as $country)
                                                                    <option value="{{$country['id']}}">{{$country['name']}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group mb-2">
                                                        <label>{{__('pages.city')}} <span class="text-danger small">*</span></label>
                                                        <div class="input-box">
                                                            <select class="niceSelect" style="display: none;" required id="city" name="city_id">
                                                                <option >{{__('pages.select')}}
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="mb-2">
                                                <h5>{{ __('pages.Let Us Know Who You Are') }}</h5>
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <div class="form-group mb-2">
                                                            <label>{{__('pages.title')}} <span class="text-danger small">*</span></label>
                                                            <div class="input-box">
                                                                <select class="niceSelect" style="display: none;" required id="title">
                                                                    <option value="0">{{__('pages.select')}}
                                                                    <option value="Mr.">Mr.</option>
                                                                    <option value="Mrs.">Mrs.</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <div class="form-group mb-2">
                                                            <label>{{__('pages.first_name')}} <span class="text-danger small">*</span></label>
                                                            <input type="text" placeholder="First Name" id="first_name">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <div class="form-group mb-2">
                                                            <label>{{__('pages.last_name')}} <span class="text-danger small">*</span></label>
                                                            <input type="text" placeholder="Last Name" id="last_name">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group mb-2">
                                                            <label>{{__('pages.email')}} <span class="text-danger small">*</span></label>
                                                            <input type="email" placeholder="Email Address" id="email">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group mb-2">
                                                            <label>{{__('pages.phone')}} <span class="text-danger small">*</span></label>
                                                            <input type="text" placeholder="Phone No." id="phone">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 col-sm-6">
                                                        <div class="form-group mb-2">
                                                            <label>{{__('pages.nationality')}} <span class="text-danger small">*</span></label>
                                                            <div class="input-box">
                                                                <select class="niceSelect" style="display: none;" id="nationality" required>
                                                                    <option value="0">{{__('pages.select')}}
                                                                    @foreach($countries as $country)
                                                                        <option value="{{$country['name']}}">{{$country['name']}}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 col-sm-12">
                                                        <div class="form-group mb-2">
                                                            <label>{{__('pages.budget')}} <span class="text-danger small">*</span></label>
                                                            <div class="input-box">
                                                                <select class="niceSelect" style="display: none;" id="budget" required>
                                                                    <option>{{__('pages.select')}}
                                                                    @foreach($budgets as $budget)
                                                                        <option value="{{$budget['id']}}">{{$budget['name']}}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <hr>
                                                <div class="row">
                                                    <h5>{{__('pages.Travel Information')}}</h5>
                                                    <div class="col-sm-6">
                                                        <div class="form-group mb-2">
                                                            <label for="start">{{__('pages.start_date')}}:</label>
                                                            <input type="date" id="start" name="trip-start" 
                                                            id="start" min="{{date('Y-m-d')}}"
                                                             />
                                                        </div>

                                                    </div>
                                                    <div class="col-sm-6">
                                                        <div class="form-group mb-2">
                                                            <label for="start">{{__('pages.end_date')}}:</label>
                                                            <input type="date" id="end" name="trip-start"  
                                                            id="end"
                                                             />
                                                        </div>

                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="new-panal">
                                                            <div class="input-row">
                                                                <div class="title">
                                                                    <h6 class="label">{{__('pages.adults')}}</h6>
                                                                    <p class="description">{{__('pages.People over 18 years old')}}</p>
                                                                    </p>
                                                                </div>
                                                                <div class="input">
                                                                    <button  type="button"  class="minus" aria-label="Decrease by one" disabled>
                                                                        <i class="fas fa-minus"></i>
                                                                    </button>
                                                                    <div id="adults" class="number dim">0</div>
                                                                    <button  type="button"  class="plus" aria-label="Increase by one">
                                                                        <i class="fas fa-plus"></i>
                                                                    </button>
                                                                </div>
                                                            </div>
                                                            <div class="input-row">
                                                                <div class="title">
                                                                    <h6 class="label">{{__('pages.children')}}</h6>
                                                                    <p class="description">{{__('pages.People under 18 years old')}}</p>
                                                                </div>
                                                                <div class="input">
                                                                    <button type="button" class="minus" aria-label="Decrease by one" disabled>
                                                                        <i class="fas fa-minus"></i>
                                                                    </button>
                                                                    <div id="children" class="number dim">0</div>
                                                                    <button  type="button"  class="plus" aria-label="Increase by one">
                                                                        <i class="fas fa-plus"></i>
                                                                    </button>
                                                                </div>
                                                            </div>
                                                            <div class="input-row">
                                                                <div class="title">
                                                                    <h6 class="label">{{__('pages.infants')}}</h6>
                                                                    <p class="description">{{__('pages.People under 2 years old')}}
                                                                </div>
                                                                <div class="input">
                                                                    <button  type="button"  class="minus" aria-label="Decrease by one" disabled>
                                                                        <i class="fas fa-minus"></i>
                                                                    </button>
                                                                    <div id="infants" class="number dim">0</div>
                                                                    <button  type="button"  class="plus" aria-label="Increase by one">
                                                                        <i class="fas fa-plus"></i>
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="form-group mb-2">
                                                            <textarea id="comment" placeholder="{{__('pages.comment')}}"></textarea>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="checkbox-input">
                                                            <input type="checkbox" required>
                                                            <div>
                                                                {{__('pages.By continuing, you agree to the')}} <a href="{{route('terms')}}" target="_blank" class="text-primary">
                                                                    {{__('pages.Terms and Conditions')}}</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="form-group"></div>
                                                            <button class="btn btn-primary btn-block" type="submit">
                                                                {{__('pages.submit')}}
                                                            </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </form>
@endsection

@push('js_scripts')
    <script>
      
       $(".niceSelect").niceSelect('destroy');

        var country_id = null;
        function get_cities(country_id){
            $.ajax({
                url: "/get_cities",
                type: 'GET',
                data: {country_id:country_id},
                success: function (data) {
                    var options = '<option>{{ trans("pages.select") }}</option>';
                    $.each(data, function(i, item) {
                        options += '<option value="'+item.id+'">'+item.name+'</option>';
                    });
                    $('#city').html(options);
                    $('#city').niceSelect('update');
                }
            });
        }
        $(document).ready(function(){
        $(".niceSelect").niceSelect('destroy');
           $('#country_id').on('change', function() {
                country_id = this.value;
                get_cities(country_id);
            });
            // on submit
            $('.tailor_trip_form').submit(function(e) {
                e.preventDefault();
                $('#error_message').hide();
                // go to error message div

                // Prevent multiple form submissions
                if ($(this).data('submitted')) {
                    return false;
                }

                // Validate form inputs
                var country = $('#country_id').val();
                var city = $('#city').val();
                var title = $('#title').val();
                var first_name = $('#first_name').val();
                var last_name = $('#last_name').val();
                var email = $('#email').val();
                var phone = $('#phone').val();
                var nationality = $('#nationality').val();
                var budget = $('#budget').val();
                var start = $('#start').val();
                var end = $('#end').val();
                var adults =  $('#adults').text();
                var children = $('#children').text();
                var infants = $('#infants').text();
                var comment = $('#comment').val();

                if (!country ||
                    country == 0 ||
                    country == "Select" ||
                     !city ||
                        city == 0 ||
                        city == "Select" ||
                     !title ||
                        title == 0 ||
                        title == "Select" ||
                    !first_name ||
                    !last_name ||
                    !email ||
                    !phone ||
                    !nationality ||
                    !budget ||
                    !start ||
                    !end ||
                    !adults ||
                    !children ||
                    !infants
                     ) {
                    $('#error_message_list').html('<li class="d-block">{{ __("pages.All fields marked with * are required.") }}</li>');
                    $('#error_message').show();
                    $('#error_message').get(0).scrollIntoView();
                    return false;
                }

                // Serialize the form data
                var formData = new FormData();
                formData.append('_token', '{{ csrf_token() }}');
                formData.append('country', country);
                formData.append('city', city);  
                formData.append('title', title);
                formData.append('first_name', first_name);
                formData.append('last_name', last_name);
                formData.append('email', email);
                formData.append('phone', phone);
                formData.append('nationality', nationality);
                formData.append('budget', budget);
                formData.append('start', start);
                formData.append('end', end);
                formData.append('adults', adults == '10+' ? 10 : adults);
                formData.append('children', children == '10+' ? 10 : children);
                formData.append('infants', infants == '10+' ? 10 : infants);
                formData.append('comment', comment);
                // Set flag to prevent multiple form submissions
                $(this).data('submitted', true);

                // AJAX request
                $.ajax({
                    url: "{{ route('tailor_trip_store') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType:  false,
                    success: function(data) {
                        if(data.status == 'success'){
                            $('.booking-box').html('<h3 class="text-success">{{ __("pages.Thank you for your inquiry. We will get back to you shortly") }}</h3>');
                            $('.booking-box').get(0).scrollIntoView();
                        }else{
                            $('#error_message_list').html('<li class="d-block">{{ __("pages.Something went wrong. Please try again.") }}</li>');
                            $('#error_message').show();
                            $('#error_message').get(0).scrollIntoView();
                        }
                    },
                    error: function(xhr, status, error) {
                        console.log(xhr.responseJSON);
                        var errors = xhr.responseJSON.errors;
                        var error_message = '';
                        var num = 1;
                        $.each(errors, function(key, value) {
                            error_message += '<li class="d-block"> ' + num + ' - ' + value + '</li>';
                            num++;
                        });
                        $('#error_message_list').html(error_message);
                        $('#error_message').show();
                        $('#error_message').get(0).scrollIntoView();
                    },
                    complete: function() {
                        // Reset flag to allow form submissions
                        $('.tailor_trip_form').data('submitted', false);
                    }
                });
            });


        });
    </script>
    <script>
        const buttons = document.querySelectorAll("button");
        const minValue = 0;
        const maxValue = 10;

        buttons.forEach((button) => {
            button.addEventListener("click", (event) => {

                // except the submit button
                if (event.target.type === "submit") {
                    return;
                }

                // 1. Get the clicked element
                const element = event.currentTarget;
                // 2. Get the parent
                const parent = element.parentNode;
                // 3. Get the number (within the parent)
                const numberContainer = parent.querySelector(".number");
                const number = parseFloat(numberContainer.textContent);
                // 4. Get the minus and plus buttons
                const increment = parent.querySelector(".plus");
                const decrement = parent.querySelector(".minus");
                // 5. Change the number based on click (either plus or minus)
                const newNumber = element.classList.contains("plus")
                    ? number + 1
                    : number - 1;
                numberContainer.textContent = newNumber;
                console.log(newNumber);
                // 6. Disable and enable buttons based on number value (and undim number)
                if (newNumber === minValue) {
                    decrement.disabled = true;
                    numberContainer.classList.add("dim");
                    // Make sure the button won't get stuck in active state (Safari)
                    element.blur();
                } else if (newNumber > minValue && newNumber < maxValue) {
                    decrement.disabled = false;
                    increment.disabled = false;
                    numberContainer.classList.remove("dim");
                } else if (newNumber === maxValue) {
                    increment.disabled = true;
                    numberContainer.textContent = `${newNumber}+`;
                    element.blur();
                }
            });
        });
    </script>
@endpush