@extends('frontend::layouts.master')

@php
    $contact_section = site_configurations('contact_section', true);
@endphp

@section('title')
    <title>{{ $seo?->title }}</title>
    <meta name="title" content="{{ $seo?->title }}">
    <meta name="description" content="{{ $seo?->description }}">
    <meta name="keyword" content="{{ $seo?->keywords }}">
@endsection

@section('content')
    <main class="fix">
        <x-frontend::breadcrumb>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">{{ __('translate.Home') }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ __('frontend::translate.Contact With Us') }}</li>
            </ol>
        </x-frontend::breadcrumb>

        <!-- contact-area -->
        <section class="contact-area pt-80 pb-50">
            <div class="container">
                <div class="contact-info-wrap">
                    <div class="row justify-content-center">
                        @if (getTranslatedData($contact_section, 'location'))
                            <div class="col-xl-4 col-lg-6">
                                <div class="contact-info-item">
                                    <div class="icon">
                                        <img src="{{ asset('backend/assets/img/icon/contact_icon01.svg') }}" alt="">
                                    </div>
                                    <div class="content">
                                        <h5 class="title">{{ __('frontend::translate.Location') }}</h5>
                                        <p>{{ getTranslatedData($contact_section, 'location') }}</p>
                                    </div>
                                </div>
                            </div>
                        @endif

                        @if (getTranslatedData($contact_section, 'email'))
                            <div class="col-xl-4 col-lg-6">
                                <div class="contact-info-item">
                                    <div class="icon">
                                        <img src="{{ asset('backend/assets/img/icon/contact_icon02.svg') }}" alt="">
                                    </div>
                                    <div class="content">
                                        <h5 class="title">{{ __('frontend::translate.E-mail') }}</h5>
                                        <p>{{ getTranslatedData($contact_section, 'email') }}</p>
                                    </div>
                                </div>
                            </div>
                        @endif

                        @if (getTranslatedData($contact_section, 'phone'))
                            <div class="col-xl-4 col-lg-6">
                                <div class="contact-info-item">
                                    <div class="icon">
                                        <img src="{{ asset('backend/assets/img/icon/contact_icon03.svg') }}"
                                            alt="">
                                    </div>
                                    <div class="content">
                                        <h5 class="title">{{ __('frontend::translate.Phone') }}</h5>
                                        <p>{{ getTranslatedData($contact_section, 'phone') }}</p>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
                <div class="row justify-content-center">
                    @if (getTranslatedData($contact_section, 'left_bottom_image'))
                        <div class="col-lg-6 col-md-10">
                            <div class="contact-img">
                                <img src="{{ getSingleImage($contact_section, 'left_bottom_image') }}" alt="">
                            </div>
                        </div>
                    @endif

                    <div class="col-lg-6">
                        <div class="contact-form" x-data="contactMessageForm()">
                            @if (getTranslatedData($contact_section, 'title'))
                                <h4 class ="title">{{ getTranslatedData($contact_section, 'title') }}</h4>
                            @endif

                            @if (getTranslatedData($contact_section, 'short_description'))
                                <p>{{ getTranslatedData($contact_section, 'short_description') }}</p>
                            @endif

                            <form @submit.prevent="submitContactForm" id="contact-form" method="POST">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-grp">
                                            <input type="text" x-model="name" name="name" placeholder="{{ __('frontend::translate.Name') }}*"
                                                required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-grp">
                                            <input type="email" x-model="email" name="email" placeholder="{{ __('frontend::translate.E-mail') }}*"
                                                required>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-grp">
                                    <input type="text" x-model="phone" name="phone" placeholder="{{ __('frontend::translate.Phone') }}">
                                </div>
                                <div class="form-grp">
                                    <textarea name="message" x-model="message" placeholder="{{ __('frontend::translate.Message') }}"></textarea>
                                </div>
                                @if (getTranslatedData($contact_section, 'button_text'))
                                    <button type="submit" class="btn btn-two" x-bind:disabled="loading">
                                        <span x-cloak
                                            x-show="!loading">{{ getTranslatedData($contact_section, 'button_text') }}</span>
                                        <span x-cloak x-show="loading">{{ __('frontend::translate.Please wait...') }}</span>
                                    </button>
                                @endif

                            </form>
                            <p class="ajax-response mb-0"></p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- contact-area-end -->

        <!-- contact-map -->
        @if (getTranslatedData($contact_section, 'contact-map'))
            <div class="contact-map">
                {!! getTranslatedData($contact_section, 'contact-map') !!}
            </div>
        @endif

        <!-- contact-map-end -->

        @include('frontend::components.newsletter_area')

    </main>
@endsection

@push('script')
    <script>
        function contactMessageForm() {
            return {
                name: '',
                email: '',
                phone: '',
                message: '',
                loading: false,

                submitContactForm() {
                    this.loading = true;

                    $.ajax({
                        url: "{{ route('contact.store') }}",
                        method: "POST",
                        contentType: "application/json",
                        data: JSON.stringify({
                            name: this.name,
                            email: this.email,
                            phone: this.phone,
                            message: this.message
                        }),
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                                'content')
                        },
                        success: (data) => {
                            if (data.success === false) {
                                toastr.error(data.message);
                            } else if (data.success === true) {
                                toastr.success(data.message);
                                this.name = '';
                                this.email = '';
                                this.phone = '';
                                this.message = '';
                            }
                        },
                        error: (xhr) => {
                            const message = xhr.responseJSON?.message || 'Something went wrong.';
                            toastr.error(message);
                        },
                        complete: () => {
                            this.loading = false;
                        }
                    });
                }
            }
        }
    </script>
@endpush