@extends('frontend::layouts.app')
@section('title', $metaTags['metaTitle'])
@section('description', $metaTags['metaDescription'])
@section('keywords', $metaTags['metaKeywords'])
@section('other_meta_tags')
    {!! $metaTags['otherMetaTags'] !!}
@endsection
@push('css')
    <!-- SELECT2-->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush
@section('content')
    <div id="pageWrapper" class="contactPage InnerPage">
        <!-- Cmn_Banner -->
        <section id="InnerBanner">
            <picture>
                <source media="(min-width: 468px)" srcset="{{ $pageBanner['image'] }}" />
                <img src="{{ $pageBanner['mobileImage'] }}" width="1920" height="480" alt="{{ $pageBanner['name'] }}"
                    loading="lazy" />
            </picture>
        </section>

        <section id="contactSec">
            <div class="container">
                <div class="topBx">
                    <div class="Btitle">{{ $cms->title }}</div>
                    <div class="flxB">
                        <div class="lftB">
                            <div class="subT">{{ $cms->get_in_touch_title }}</div>
                            @if ($registeredOffices->isNotEmpty())
                                <div class="btnFlx">
                                    <a href="javascript:void(0);" class="lTtle headquarters active" id="headquarters"
                                        aria-label="Show Headquarters information">Headquarters</a>
                                    <div class="selectB registeredOffice">
                                        <select class="select2 registered-office" data-select2-id="select2-2"
                                            aria-label="Registered Offices">
                                            <option value="" selected disabled="disabled">Registered Office</option>
                                            @foreach ($registeredOffices as $registeredOffice)
                                                <option value="{{ base64_encode($registeredOffice->id) }}">
                                                    {{ $registeredOffice->title }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            @endif
                            <div id="officeDetails" class="dtailBx">
                                <div class="item">
                                    <div class="lbl">Address</div>
                                    {!! $cms->address !!}
                                </div>
                                <div class="item">
                                    <div class="lbl">Phone</div>
                                    <a href="tel:{{ $cms->formatted_phone_number }}"
                                        aria-label="Call us at {{ $cms->phone_number }}">
                                        {{ $cms->phone_number }}
                                    </a>
                                </div>
                                <div class="item">
                                    <div class="lbl">Email</div>
                                    <a href="mailto:{{ $cms->email }}" aria-label="Email us at {{ $cms->email }}">
                                        {{ $cms->email }}
                                    </a>
                                </div>
                                @if (
                                    $siteCommonContent->youtube_link ||
                                        $siteCommonContent->facebook_link ||
                                        $siteCommonContent->instagram_link ||
                                        $siteCommonContent->x_link ||
                                        $siteCommonContent->linkedin_link)
                                    <div class="item">
                                        <div class="lbl">Follow Us</div>
                                        <div class="sclFlx">
                                            @if ($siteCommonContent->youtube_link)
                                                <a href="{{ $siteCommonContent->youtube_link }}" target="_blank"
                                                    aria-label="Visit our YouTube channel">
                                                    <img src="{{ asset('frontend/images/s1.svg') }}"
                                                        alt="{{ $siteCommonContent->youtube_link }}" width="26" height="26" loading="lazy">
                                                </a>
                                            @endif
                                            @if ($siteCommonContent->facebook_link)
                                                <a href="{{ $siteCommonContent->facebook_link }}" target="_blank"
                                                    aria-label="Visit our Facebook page">
                                                    <img src="{{ asset('frontend/images/s2.svg') }}"
                                                        alt="{{ $siteCommonContent->facebook_link }}" width="26" height="26" loading="lazy">
                                                </a>
                                            @endif
                                            @if ($siteCommonContent->instagram_link)
                                                <a href="{{ $siteCommonContent->instagram_link }}" target="_blank"
                                                    aria-label="Visit our Instagram profile">
                                                    <img src="{{ asset('frontend/images/s3.svg') }}"
                                                        alt="{{ $siteCommonContent->instagram_link }}" width="26" height="26" loading="lazy">
                                                </a>
                                            @endif
                                            @if ($siteCommonContent->x_link)
                                                <a href="{{ $siteCommonContent->x_link }}" target="_blank"
                                                    aria-label="Visit our X page">
                                                    <img src="{{ asset('frontend/images/s4.svg') }}"
                                                        alt="{{ $siteCommonContent->x_link }}" width="26" height="26" loading="lazy">
                                                </a>
                                            @endif
                                            @if ($siteCommonContent->linkedin_link)
                                                <a href="{{ $siteCommonContent->linkedin_link }}" target="_blank"
                                                    aria-label="Visit our LinkedIn profile">
                                                    <img src="{{ asset('frontend/images/s5.svg') }}"
                                                        alt="{{ $siteCommonContent->linkedin_link }}" width="26" height="26" loading="lazy">
                                                </a>
                                            @endif
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                        <div class="ritB">
                            <div id="officeMap" class="mapBx">
                                <div class="map">
                                    {!! $cms->iframe_src !!}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="formBx">
                    <div class="title">{{ $cms->enquiry_title }}</div>
                    <div class="formB">
                        <form action="{{ route('enquiry-submit') }}" method="POST" id="contact-form">
                            @csrf
                            @honeypot
                            <div class="row">
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <input type="text" class="form-control @error('name') is-invalid @enderror"
                                            placeholder="Name" id="name" name="name" value="{{ old('name') }}">
                                        <span class="error-block"></span>
                                        @error('name')
                                            <span class="error-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <input type="email" class="form-control @error('email') is-invalid @enderror"
                                            placeholder="Email Address" id="email" name="email"
                                            value="{{ old('email') }}">
                                        <span class="error-block"></span>
                                        @error('email')
                                            <span class="error-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <input type="tel"
                                            class="form-control @error('phone_number') is-invalid @enderror  phoneField"
                                            placeholder="Phone Number" id="phone_number" name="phone_number"
                                            value="{{ old('phone_number') }}">
                                        <span class="error-block"></span>
                                        @error('phone_number')
                                            <span class="error-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <input type="text" class="form-control  @error('subject') is-invalid @enderror"
                                            placeholder="Subject" id="subject" name="subject"
                                            value="{{ old('subject') }}">
                                        <span class="error-block"></span>
                                        @error('subject')
                                            <span class="error-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <textarea class="form-control @error('message') is-invalid @enderror" placeholder="Message" id="message"
                                            name="message">{{ old('message') }}</textarea>
                                        <span class="error-block"></span>
                                        @error('message')
                                            <span class="error-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="btn-sec">
                                        <button type="submit" class="send btn hoveranim submitBtn" aria-label="Submit">
                                            <span>Submit</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                @if ($dealers->isNotEmpty())
                    <div class="btmBx">
                        <div class="Btitle">{{ $cms->dealer_title }}</div>
                        <div class="flxBx">
                            <div class="lftB">
                                @if ($cities->isNotEmpty())
                                    <div class="frmBx">
                                        <div class="item">
                                            <select class="select2" data-select2-id="select2-3" aria-label="City"
                                                id="city_id" name="city_id">
                                                <option value="all" selected>Select City</option>
                                                @foreach ($cities as $city)
                                                    <option value="{{ base64_encode($city->id) }}"
                                                        {{ old('city_id') == $city->id ? 'selected' : '' }}>
                                                        {{ $city->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                @endif
                                <div class="addrsBx">
                                    <div id="dealersDetails" class="adrsFlw">
                                        @foreach ($dealers as $dealer)
                                            <div class="item">
                                                <div class="ttle">{{ $dealer->title }}</div>
                                                <div class="txt">{{ $dealer->address }}</div>
                                                <div class="name">{{ $dealer->name }}</div>
                                                <div class="call">Mobile :
                                                    <a href="tel:{{ $dealer->formatted_phone_number }}" class="call"
                                                        aria-label="Call {{ $dealer->phone_number }}">
                                                        {{ $dealer->phone_number }}
                                                    </a>
                                                </div>
                                                <div class="mail">Email:
                                                    <a href="mailto:{{ $dealer->email }}"
                                                        aria-label="Email {{ $dealer->email }}">
                                                        {{ $dealer->email }}
                                                    </a>
                                                </div>
                                                <div class="direction cta-button dealer-map" aria-label="Get Direction"
                                                    data-label="Get Direction"
                                                    data-dealer-id="{{ base64_encode($dealer->id) }}">
                                                    <span>Get Direction</span>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                            <div class="ritB">
                                <div id="dealersMap" class="mapBx">
                                    <div class="map">
                                        {!! $dealers->first()->iframe_src !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </section>
    </div>
@endsection
@push('js')
    <!-- SELECT2-->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(".select2").select2({
            minimumResultsForSearch: -1,
            maximumSelectionLength: 3,
            theme: "bootstrap-5",
            containerCssClass: "select2--small",
            selectionCssClass: "select2--small",
            dropdownCssClass: "select2--small",
        });
        $(document).ready(function() {
            // Get in Touch
            function fetchOfficeDetails(url, type = null) {
                $.ajax({
                    url: url,
                    dataType: 'json',
                    success: function(result) {
                        if (result.success) {
                            $('#officeDetails').html(result.data.officeDetails);
                            $('#officeMap').html(result.data.officeMap);
                            var isRegisteredOffice = (type === 'registered-office');
                            $('.registeredOffice').toggleClass('active', isRegisteredOffice);
                            $('.headquarters').toggleClass('active', !isRegisteredOffice);
                            if (!isRegisteredOffice) {
                                $('.registered-office').val('').trigger('change');
                            }
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.error('AJAX error:', textStatus, errorThrown);
                    }
                });
            }
            $(document).on('change', '.registered-office', function() {
                var registeredOfficeId = $(this).val();
                if (registeredOfficeId) {
                    var url =
                        "{{ route('contact.headquarters-or-registered-office', ':registeredOfficeId') }}"
                        .replace(
                            ':registeredOfficeId', registeredOfficeId);
                    fetchOfficeDetails(url, 'registered-office');
                }
            });
            $(document).on('click', '.headquarters', function() {
                var url = "{{ route('contact.headquarters-or-registered-office') }}";
                fetchOfficeDetails(url);
            });

            // Our Dealers
            $(document).on('change', '#city_id', function() {
                var cityId = $(this).val();
                if (cityId) {
                    $.ajax({
                        url: "{{ route('contact.dealers', ':cityId') }}"
                            .replace(
                                ':cityId', cityId),
                        dataType: 'json',
                        success: function(result) {
                            if (result.success) {
                                $('#dealersDetails').html(result.data.dealersDetails);
                                $('#dealersMap').html(result.data.dealersMap);
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            console.error('AJAX error:', textStatus, errorThrown);
                        }
                    });
                }
            });

            // Dealer Map
            $(document).on('click', '.dealer-map', function() {
                var dealerId = $(this).data('dealer-id');
                if (dealerId) {
                    $.ajax({
                        url: "{{ route('contact.dealer-map', ':dealerId') }}"
                            .replace(
                                ':dealerId', dealerId),
                        dataType: 'json',
                        success: function(result) {
                            if (result.success) {
                                $('#dealersMap').html(result.data.dealersMap);
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            console.error('AJAX error:', textStatus, errorThrown);
                        }
                    });
                }
            });

            // Real-time validation handler for form
            $("#contact-form").validate({
                rules: {
                    name: {
                        required: true,
                        maxlength: 100,
                        lettersOnly: true,
                        notHTML: true
                    },
                    phone_number: {
                        required: true,
                        intelPhoneNumbersOnly: true
                    },
                    email: {
                        required: true,
                        emailOnly: true
                    },
                    subject: {
                        required: true,
                        validText: true,
                        maxlength: 255,
                    }
                },
                messages: {
                    name: {
                        required: "The name field is required.",
                        maxlength: "The name field cannot exceed 100 characters.",
                        lettersOnly: "The name field must contain only letters.",
                        notHTML: "The name field cannot contain HTML."
                    },
                    phone_number: {
                        required: "The phone number field is required.",
                        intelPhoneNumbersOnly: "The phone number field must be a valid international phone number."
                    },
                    email: {
                        required: "The email field is required.",
                        emailOnly: "The email field must be a valid email address."
                    },
                    subject: {
                        required: "The subject field is required.",
                        validText: "The subject field must contain valid text.",
                        maxlength: "The subject field cannot exceed 255 characters."
                    }
                },
                errorPlacement: function(error, element) {
                    $(element).closest('.form-group').find('.error-block').text(error.text());
                },
                success: function(label, element) {
                    $(element).closest('.form-group').find('.error-block').text('');
                    $(element).removeClass('is-invalid');
                },
                onchange: function(element) {
                    $(element).valid(); // Validate the changed element
                },
                onfocusout: function(element, event) {
                    if (element.tagName === "TEXTAREA" || (element.tagName === "INPUT" && element
                            .type !== "password")) {
                        element.value = $.trim(element.value);
                    }
                    if (!this.checkable(element) && (element.name in this.submitted || !this.optional(
                            element))) {
                        this.element(element);
                    }
                },
                submitHandler: function(form) {
                    var $submitBtn = $(form).find(':submit');
                    var originalBtnHtml = $submitBtn.html(); // Store the original button HTML

                    $submitBtn.prop("disabled", true).html(
                        '<i class="mdi mdi-rotate-right"></i> <span>Submitting...</span>');

                    var formData = new FormData(form);
                    $.ajax({
                        type: "POST",
                        url: $(form).attr('action'),
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            if (response.success) {
                                showToast('success',
                                    'Thank you for contacting us. We will get back to you as soon as possible.'
                                );
                                $('#contact-form')[0].reset();
                            } else {
                                showToast('error',
                                    'Oops! Something went wrong. Please try again.');
                            }
                        },
                        error: function(xhr) {
                            if (xhr.status === 422) {
                                var errors = xhr.responseJSON.errors;
                                $.each(errors, function(field, messages) {
                                    $('[name="' + field + '"]').closest(
                                            '.form-group').find('.error-block')
                                        .text(messages.join(', '));
                                });
                            } else {
                                console.error('Unexpected error occurred.');
                            }
                        },
                        complete: function() {
                            $submitBtn.prop('disabled', false).html(
                                originalBtnHtml); // Restore the original button HTML
                        }
                    });
                }
            });
        });
    </script>
@endpush