@extends('Template::layouts.frontend')
@section('content')
    @php
        $contactContent = getContent('contact_us.content', true);
        $contactElement = getContent('contact_us.element', orderById: true);
        $contactFormContent = getContent('contact_form.content', true);
        $partnerContent = getContent('brand.content', true);
        $brandElement = getContent('brand.element', orderById: true);
    @endphp
    <section class="contact-support-section my-120">
        <div class="container">
            <div class="row gy-5">
                <div class="col-lg-6">
                    <div class="contact-support-content">
                        <div class="section-title">
                            <span class="btn btn--base btn--section animate" data-direction="down">{{ __($contactContent?->data_values?->heading ?? '') }}</span>
                            <h2 class="main-title animate" data-direction="down">{{ __($contactContent?->data_values?->subheading ?? '') }}</h2>
                            <p class="animate" data-direction="down">{{ __($contactContent?->data_values?->short_details ?? '') }}</p>
                        </div>
                        <div class="contact-support-info">
                            <div class="contact-support-info-item">
                                <div class="d-flex align-items-center gap-3">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                        <path d="M0.991058 15.8587L7.66611 11.0907C8.06751 10.804 8.54844 10.6499 9.0417 10.6499H14.6084C15.1118 10.6499 15.6021 10.8105 16.008 11.1082L22.6996 16.0163C23.3074 16.462 23.6665 17.1709 23.6665 17.9246V21.2998C23.6665 22.6069 22.607 23.6665 21.2999 23.6665H2.36665C1.05958 23.6665 0 22.6069 0 21.2998V17.7844C0 17.0201 0.369114 16.3029 0.991058 15.8587Z" fill="#D7D6FB"></path>
                                        <path d="M11.8332 20.1165C13.7938 20.1165 15.3832 18.5272 15.3832 16.5666C15.3832 14.606 13.7938 13.0166 11.8332 13.0166C9.87258 13.0166 8.2832 14.606 8.2832 16.5666C8.2832 18.5272 9.87258 20.1165 11.8332 20.1165Z" fill="currentColor"></path>
                                        <path d="M15.576 6.91432C15.6264 7.2043 15.8034 7.46043 16.0633 7.61944L20.7569 10.4921C21.1698 10.7448 21.7119 10.6895 22.059 10.3592L22.1953 10.2295C24.1569 8.36306 24.1569 5.33696 22.1953 3.47053C21.9859 3.27136 21.7584 3.08834 21.512 2.93215C15.3597 -0.968325 8.32925 -0.978561 2.17124 2.90862C1.92109 3.06652 1.69024 3.25194 1.47799 3.4539C-0.492664 5.32892 -0.492664 8.36892 1.478 10.2439L1.5989 10.3589C1.94612 10.6893 2.48846 10.7446 2.90138 10.4917L7.6007 7.61425C7.85543 7.45826 8.03076 7.20874 8.08488 6.92515L8.507 4.71323C8.54702 4.50351 8.7173 4.33741 8.93786 4.30009C10.8656 3.97384 12.8417 3.97916 14.766 4.31203C14.9887 4.35054 15.1593 4.5202 15.1963 4.73265L15.576 6.91432Z" fill="currentColor"></path>
                                    </svg>
                                    <h5>@lang('Phone')</h5>
                                </div>
                                <p>{{ __($contactContent?->data_values?->contact_number_title ?? '') }}</p>
                                <a href="tel:{{ $contactContent?->data_values?->contact_number_one ?? '' }}">{{ __($contactContent?->data_values?->contact_number_one ?? '') }}</a>
                            </div>
                            <div class="contact-support-info-item">
                                <div class="d-flex align-items-center gap-3">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="29" height="23" viewBox="0 0 29 23" fill="none">
                                        <path d="M25.12 20.6724L14.8492 13.4224C14.6402 13.2748 14.3609 13.2748 14.152 13.4224L3.88119 20.6724C3.7205 20.7857 3.62489 20.97 3.625 21.1666V21.7708C3.62494 22.1045 3.89546 22.375 4.22913 22.375H24.7708C25.1045 22.375 25.375 22.1045 25.375 21.7708V21.1666C25.3753 20.9703 25.2802 20.7859 25.12 20.6724Z" fill="#C9C7FA"></path>
                                        <path d="M14.8492 13.4224L4.57838 6.17244C4.30611 5.97958 3.92899 6.04398 3.73613 6.31625C3.66357 6.41865 3.62472 6.54111 3.625 6.66663V21.1666C3.62432 21.5003 3.89433 21.7713 4.228 21.772C4.35351 21.7722 4.47597 21.7334 4.57838 21.6609L14.8492 14.4109C15.1218 14.2185 15.1868 13.8415 14.9944 13.5689C14.9547 13.5126 14.9055 13.4634 14.8492 13.4237V13.4224Z" fill="#D7D6FB"></path>
                                        <path d="M25.0488 6.13018C24.8479 6.02755 24.6069 6.0438 24.4217 6.17249L14.1509 13.4225C13.8782 13.6149 13.8132 13.9918 14.0056 14.2645C14.0454 14.3208 14.0945 14.3699 14.1509 14.4097L24.4217 21.6597C24.6939 21.8525 25.0711 21.7881 25.2639 21.5159C25.3362 21.4138 25.375 21.2918 25.375 21.1667V6.66668C25.375 6.44091 25.2492 6.234 25.0488 6.13018Z" fill="#D7D6FB"></path>
                                        <path d="M26.553 1.04069C26.4715 0.792656 26.2401 0.625 25.9791 0.625H3.02069C2.68702 0.625 2.4165 0.895516 2.4165 1.22919C2.4165 1.41933 2.50605 1.59843 2.65819 1.7125L14.1374 10.1708C14.3505 10.3277 14.6409 10.3277 14.8539 10.1708L26.3331 1.7125C26.5434 1.55929 26.632 1.2886 26.553 1.04069Z" fill="#D7D6FB"></path>
                                        <path d="M25.9792 0.625C25.8485 0.625 25.7212 0.667424 25.6167 0.745815L14.5 8.93713L3.38331 0.745815C3.27876 0.667424 3.15154 0.625 3.02081 0.625C1.35246 0.625 0 1.97746 0 3.64581V19.3541C0 21.0225 1.35246 22.375 3.02081 22.375H4.22913C4.5628 22.375 4.83331 22.1045 4.83331 21.7708V7.83269L14.1508 14.4109C14.3597 14.5585 14.639 14.5585 14.8479 14.4109L24.1666 7.83269V21.7708C24.1666 22.1045 24.4371 22.375 24.7708 22.375H25.9791C27.6475 22.375 29 21.0225 29 19.3542V3.64581C29 1.97746 27.6475 0.625 25.9792 0.625Z" fill="currentColor"></path>
                                    </svg>
                                    <h5>@lang('Email')</h5>
                                </div>
                                <p>{{ __($contactContent?->data_values?->email_address_title ?? '') }}</p>
                                <a href="mailto:{{ $contactContent?->data_values?->email_address ?? '' }}">{{ $contactContent?->data_values?->email_address ?? '' }}</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 d-none d-lg-block">
                    <div class="contact-support-image d-grid gap-4 ms-xxl-5">
                        <div class="d-flex gap-4">
                            @foreach ($contactElement as $contact)
                                <img src="{{ frontendImage('contact_us', $contact?->data_values?->image ?? '', '295x335') }} " alt="contact support">
                            @endforeach
                        </div>
                        <div class="d-flex align-items-start gap-4">
                            <img src="{{ frontendImage('contact_us', $contactContent?->data_values?->image ?? '', '175x205') }}" alt="contact support">
                            <div class="support-number">
                                <img src="{{ frontendImage('contact_us', $contactContent?->data_values?->image_two ?? '', '360x150') }}" alt="contact support">
                                <div class="support-number-content">
                                    <h6>@lang('Hotline :')</h6>
                                    <a href="tel:{{ $contactContent?->data_values?->contact_number_one ?? '' }}">{{ __($contactContent?->data_values?->contact_number_one ?? '') }}</a>
                                    <br>
                                    <a href="tel:{{ $contactContent?->data_values?->contact_number_two ?? '' }}">{{ __($contactContent?->data_values?->contact_number_two ?? '') }}</a>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="76" height="74" viewBox="0 0 76 74" fill="none">
                                        <circle cx="59.5" cy="59.5" r="48" stroke="currentColor" stroke-width="23"></circle>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="get-touch-section py-120">
        <div class="get-touch-shape">
            <img src="{{ getImage(activeTemplate(true) . 'images/contact/bg-shape.png') }}" alt="get touch">
        </div>
        <div class="container">
            <div class="row gy-5">
                <div class="col-lg-6 col-xl-7">
                    <div class="get-touch-content">
                        <div class="get-touch-content__item mb-auto text-center text-lg-start">
                            <h2>{{ __($contactFormContent?->data_values?->heading ?? '') }}</h2>
                            <p>{{ __($contactFormContent?->data_values?->subheading ?? '') }}</p>
                        </div>
                        <div class="get-touch-content__item mt-auto">
                            <div class="partner-logo-content">
                                <h6>{{ __($partnerContent?->data_values?->title ?? '') }}</h6>
                                <div class="d-flex flex-wrap gap-4 justify-content-center align-items-center">
                                    @foreach ($brandElement as $brand)
                                        <div class="partner-logo-content__item">
                                            <img src="{{ frontendImage('brand', $brand?->data_values?->image ?? '', '220x50') }}" alt="partner">
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-xl-5">
                    <div class="get-touch-form ms-xl-5">
                        <h3>{{ __($contactFormContent?->data_values?->title ?? '') }}</h3>
                        <form class="verify-gcaptcha" method="POST">
                            @csrf
                            <div class="row gy-3">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="form--label">@lang('Name')</label>
                                        <input name="name" type="text" class="form--control" value="{{ old('name', $user?->fullname) }}" @if ($user && $user->profile_complete) readonly @endif required>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="form--label">@lang('Email')</label>
                                        <input name="email" type="email" class="form--control" value="{{ old('email', $user?->email) }}" @if ($user) readonly @endif required>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label class="form--label">@lang('Subject')</label>
                                        <input name="subject" type="text" class="form--control" value="{{ old('subject') }}" required>
                                    </div>
                                </div>

                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label class="form--label">@lang('Message')</label>
                                        <textarea name="message" class="form--control" rows="4" required>{{ old('message') }}</textarea>
                                    </div>
                                </div>
                                <x-captcha label="form--label" class="true" />
                                <div class="col-sm-12">
                                    <button type="submit" class="btn btn--base w-100 rounded-3"> @lang('Send Message')</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @if (isset($sections->secs) && $sections->secs != null)
        @foreach (json_decode($sections->secs) as $sec)
            @include('Template::sections.' . $sec)
        @endforeach
    @endif
@endsection