@extends('layouts.site')

@section('content')

    <!-- تحميل مكتبة intl-tel-input CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.0/build/css/intlTelInput.min.css">
    @php
        /**/ [
            $name,
            $email,
            $phone,
            $whatsapp,
            $google_map_url,
            $addresss,
            $facebook,
            $instagram,
            $twitter,
            $youtube,
            $tiktok,
        ] = getGeneralSettings();
        $lang = app()->getLocale();
        $name = 'name_' . $lang;
    @endphp


    <!--Page Header Start-->
    <section class="page-header">
        <div class="page-header__bg" style="background-image: url({{ asset('assets/front/img/pages/quotin.webp') }});"> </div>
        <div class="container">
            <div class="page-header__inner">
                <h2>
                    {{ app()->getLocale() == 'ar' ? 'احصل على عرض أسعار' : ' Get a Quote' }}</h5>
                </h2>
                <div class="thm-breadcrumb__box">
                    <ul class="thm-breadcrumb list-unstyled">
                        <li><a href="{{ route('home_index') }}">{{ __('Home') }}</a></li>
                        <li><span>-</span></li>
                        <li> {{ app()->getLocale() == 'ar' ? 'احصل على عرض أسعار' : ' Get a Quote' }}</li>
                    </ul>
                </div>
            </div>
        </div>
        <svg class="wave" viewBox="0 0 1440 40" xmlns="http://www.w3.org/2000/svg">
            <path fill="#fff" fill-opacity="1" d="M0,40 Q360,10 720,30 T1440,40 L1440,50 L0,50Z">
            </path>
        </svg>
    </section>


    <!--Get a Quote-->
    <section class="contact-two">
        <div class="container">
            <div class="row  justify-content">
                <div class="col-xl-8 col-lg-8 wow slideInRight" data-wow-delay="200ms" data-wow-duration="2500ms">
                    <div class="contact-two__left">
                        <div class="section-title text-left">
                            <div class="section-title__tagline-box">
                                <div class="section-title__shape"></div>
                                <span class="section-title__tagline">
                                    {{ app()->getLocale() == 'ar' ? 'احصل على عرض أسعار' : ' Get a Quote' }}</h5>
                            </div>
                        </div>
                        <form id="appointmentForm" class="contact-form-validated contact-two__form">
                            <div class="row">
                                <div class="col-xl-6 col-lg-6">
                                    <div class="contact-two__input-box">
                                        <input type="text" id="name" name="name"
                                            placeholder="{{ __('Name') }}" required>
                                        <span id="name_error" class="text-danger" style="font-size: 14px;"></span>
                                    </div>
                                </div>

                                <div class="col-xl-6 col-lg-6">
                                    <div class="contact-two__input-box">
                                        <input type="email" id="email" name="email"
                                            placeholder="{{ __('Email') }}" required>
                                        <span id="email_error" class="text-danger" style="font-size: 14px;"></span>
                                    </div>
                                </div>

                                <div class="col-xl-6 col-lg-6">
                                    <div class="contact-two__input-box">
                                        <input type="text" id="mobile" name="mobile"
                                            placeholder="{{ __('Mobile') }}" required>
                                        <span id="mobile_error" class="text-danger" style="font-size: 14px;"></span>
                                    </div>
                                </div>

                                <div class="col-xl-6 col-lg-6">
                                    <div class="contact-two__input-box">
                                        <input type="text" id="field" name="field"
                                            placeholder="{{ __('Field') }}" required>
                                        <span id="field_error" class="text-danger" style="font-size: 14px;"></span>
                                    </div>
                                </div>

                                <div class="col-xl-6 col-lg-6">
                                    <div class="contact-two__input-box">
                                        <input type="text" id="address" name="address"
                                            placeholder="{{ __('Address') }}" required>
                                        <span id="address_error" class="text-danger" style="font-size: 14px;"></span>
                                    </div>
                                </div>

                                <div class="col-xl-6 col-lg-6">
                                    <div class="contact-two__input-box">
                                        <div class="select-box">
                                            @php
                                                $services = \App\Models\Service::where('is_active', 1)->get();
                                            @endphp
                                            @if ($services && $services->count() > 0)
                                                <select class="selectmenu wide" id="service_id" name="service_id" required>
                                                    <option value="">{{ __('Select Service') }}</option>
                                                    @foreach ($services as $service)
                                                        <option value="{{ $service->id }}">{{ $service->$name }}</option>
                                                    @endforeach
                                                </select>
                                            @endif
                                        </div>
                                        <span id="service_id_error" class="text-danger" style="font-size: 14px;"></span>
                                    </div>
                                </div>

                                <div class="col-xl-12">
                                    <div class="contact-two__input-box text-message-box">
                                        <textarea id="message" name="message" placeholder="{{ __('Message') }}" required></textarea>
                                        <span id="message_error" class="text-danger" style="font-size: 14px;"></span>
                                    </div>
                                </div>

                                <div class="col-xl-12">
                                    <div class="contact-two__btn-box text-center">
                                        <button type="submit" class="thm-btn contact-two__btn">
                                            {{ __('Send') }}<span class="icon-right-arrow"></span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>




                        <div class="result"></div>
                    </div>
                </div>

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



@stop

@section('scripts')



    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


    <script>
        $(document).ready(function() {
            $("#appointmentForm").on("submit", function(e) {
                e.preventDefault();

                // مسح جميع رسائل الخطأ السابقة
                $(".text-danger").text("");

                let formData = {
                    name: $("input[name='name']").val(),
                    mobile: $("input[name='mobile']").val(),
                    email: $("input[name='email']").val(),
                    message: $("textarea[name='message']").val(),
                    address: $("input[name='address']").val(),
                    field: $("input[name='field']").val(),
                    service_id: $("select[name='service_id']").val(),
                    _token: "{{ csrf_token() }}"
                };

                $.ajax({
                    url: "{{ route('bookAppointment') }}",
                    type: "POST",
                    data: formData,
                    success: function(response) {
                        // toastr.success(response.msg);
                        window.location.href = "{{ route('thankyou') }}";
                        $("#appointmentForm")[0].reset();
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) { //
                            let errors = xhr.responseJSON.errors;
                            if (errors) {
                                //
                                if (errors.name) {
                                    $("#name_error").text(errors.name[0]);
                                }
                                if (errors.mobile) {
                                    $("#mobile_error").text(errors.mobile[0]);
                                }
                                if (errors.email) {
                                    $("#email_error").text(errors.email[0]);
                                }
                                if (errors.field) {
                                    $("#field_error").text(errors.field[0]);
                                }
                                if (errors.address) {
                                    $("#address_error").text(errors.address[0]);
                                }
                                if (errors.service_id) {
                                    $("#service_id_error").text(errors.service_id[0]);
                                }
                                if (errors.message) {
                                    $("#message_error").text(errors.message[0]);
                                }
                            }
                        } else {
                            toastr.error("حدث خطأ. يرجى المحاولة مرة أخرى.");
                        }
                    }
                });
            });
        });
    </script>

@stop