@extends('front.layouts.app')
@section('style')

    <link rel="stylesheet" href="/assets/css/dropzone.min.css">
@endsection
@section('content')

<section class="contact-sec">
    <div class="container">
        <div class="row">
            <div class="col-lg-7">
                @include('vendor.errors')
                <div id="responseAx"></div>
                <form method="post" action="" class="mx-auto form-style" enctype="multipart/form-data" id="checkformValid">
                    @csrf
                    <div class="form-row">
                        <div class="col-12 form-title">{{__('front.price-Get In Touch')}}</div>
                        <div class="col-md-12">
                            <input type="text" class="form-control" required name="name" placeholder="{{__('front.price-Your Name')}}">
							@error('name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <input type="email" class="form-control" required  name="email" placeholder="{{__('front.price-Your Email')}}">
							@error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                        <div class="col-md-6" style=" direction: ltr; ">
                            <input type="tel" class="form-control phone-inp" required  name="phone" placeholder="{{__('front.price-Phone Number')}}">
							@error('phone')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                            @if(app()->getLocale() == 'ar')
                            <span class="error-msg">يرجي ادخال رقم هاتف صحيح</span>
                            @else
                            <span class="error-msg">Invalid phone number</span>
                            @endif
                        </div>
                        <div class="col-md-12">
                            <select class="form-control" required  name="subject">
                                <option value="">{{__('front.price-Choose The Service You Need')}}</option>
                                @foreach (getPriceOptions() as $item )
                                <option value="{{$item->title}}">{{$item->title}}</option>
                                @endforeach
                            </select>
							@error('subject')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                        <div class="col-12">
                            <!--<div class="custom-file">-->
                            <!--    <input type="file" name="files[]" class="custom-file-input" id="customFile" multiple>-->
                            <!--    <label class="custom-file-label form-control" for="customFile">{{__('front.price-Additional Attachments')}}</label>-->
                            <!--</div>-->
                                <div class="dropzone" id="myDropzone"></div>
							@error('files')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                        <div class="col-sm-12 mt-2">
                            <textarea class="form-control" name="message" required  placeholder="{{__('front.price-Your Message')}}" rows="5"></textarea>
							@error('message')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>

                        <div class="col-12 btn-wr">
                            <button type="submit" class="btn btnstyle4 hov2">
                                <span>
                                {{__('front.price-Send')}}
                                    <i data-feather="arrow-right"></i>
                                </span>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="d-none d-lg-block col-lg-5">
                <div class="ph-outer v2">
                    <div class="img-wr phov1">
                        <img src="{{getImage(getSettingValue('price_image'))}}" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection
@section('script')

<!-- Google-Maps -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB-MO9uPLS-ApTqYs0FpYdVG8cFwdq6apw"></script>
    <script src="/assets/js/dropzone.min.js"></script>
    <script>
        
        Dropzone.options.myDropzone = {
            dictDefaultMessage: "<i class=\"fas fa-cloud-upload-alt\"></i>  <span>Additional Attachments</span> ",
            url: '{{url("/price-quote")}}',
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 5,
            maxFiles: 5,
            maxFilesize: 8,
            acceptedFiles: 'application/pdf,image/png,image/jpeg',
            addRemoveLinks: true,
            init: function() {
                dzClosure = this; // Makes sure that 'this' is understood inside the functions below.
                // Customize the remove file link with Font Awesome 5 delete icon
                this.on("addedfile", function(file) {
                    var removeButton = Dropzone.createElement(
                        "<button class=\"dz-remove-btn\"><i class=\"fas fa-trash-alt\"></i></button>"
                    );
                    var _this = this;
                    removeButton.addEventListener("click", function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        _this.removeFile(file);
                    });
                    file.previewElement.querySelector(".dz-remove").appendChild(removeButton);
                });
                // for Dropzone to process the queue (instead of default form behavior):
                document.getElementById("checkformValid").addEventListener("submit", function(e) {
                    // Make sure that the form isn't actually being sent.
                    e.preventDefault();
                    e.stopPropagation();

                    // Check if telValed is true before processing the queue
                    if (telValed) {
                        dzClosure.processQueue();

                        // Log the input values
                        console.log("Your Name:", document.getElementById("checkformValid").elements.name
                            .value);
                        console.log("Your Email:", document.getElementById("checkformValid").elements.email
                            .value);
                        console.log("Phone Number:", document.getElementById("checkformValid").elements
                            .phone.value);
                        console.log("Service:", document.getElementById("checkformValid").elements.subject
                            .value);
                        console.log("Message:", document.getElementById("checkformValid").elements.message
                            .value);
                    } else {
                        console.log("Invalid phone number. Form cannot be submitted.");
                        errorSpan.style.display = 'block';
                    }
                });

                //send all the form data along with the files:
                this.on("sendingmultiple", function(data, xhr, formData) {
                    formData.append("name", document.getElementById("checkformValid").elements.name
                        .value);
                    formData.append("_token", document.getElementById("checkformValid").elements._token
                        .value);
                    formData.append("email", document.getElementById("checkformValid").elements.email
                        .value);
                    formData.append("phone", document.getElementById("checkformValid").elements.phone
                        .value);
                    formData.append("subject", document.getElementById("checkformValid").elements.subject
                        .value);
                    formData.append("message", document.getElementById("checkformValid").elements.message
                        .value);
                        console.log("xhr", xhr);
                        console.log("xhr", (xhr));
                        console.log("xhr", xhr.responseText);
                        if(xhr.status == 200){
                            $('#responseAx').html(xhr.responseText);
                        }else{
                            $('#responseAx').html(xhr.responseText);
                            
                        }
                });
                
                this.on('successmultiple', function(files, response) {
                    window.location.replace('{{url("/price-quote")}}');
                });
                this.on('errormultiple', function(files, response) {
                    window.location.replace('{{url("/price-quote")}}');
                });
            }
        }
        function parseXmlToJson(xml) {
    const json = {};
    for (const res of xml.matchAll(/(?:<(\w*)(?:\s[^>]*)*>)((?:(?!<\1).)*)(?:<\/\1>)|<(\w*)(?:\s*)*\/>/gm)) {
        const key = res[1] || res[3];
        const value = res[2] && parseXmlToJson(res[2]);
        json[key] = ((value && Object.keys(value).length) ? value : res[2]) || null;

    }
    return json;
}
    </script>
@endsection