@php
    $contact = getContent('contact_us.content', true);
    $contactElements = getContent('contact_us.element', false, 2, true);
@endphp
@extends('Template::layouts.frontend')
@section('content')
    <section class="contact my-120">
        <div class="container">
            <div class="row gy-4 mb-60">
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
                    <div class="contact-info">
                        <div class="contact-info__icon">
                            @php
                                echo $contact?->data_values?->email_icon ?? '';
                            @endphp
                        </div>
                        <h6 class="contact-info__title">{{ __($contact?->data_values?->email_title ?? '') }}</h6>
                        <p class="contact-info__desc">{{ __($contact?->data_values?->email_description ?? '') }}</p>
                        <a class="contact-info__link" href="mailto: {{ $contact?->data_values?->email_details ?? '' }}">
                            {{ $contact?->data_values?->email_details ?? '' }}
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                 stroke-linejoin="round" class="lucide lucide-move-right-icon lucide-move-right">
                                <path d="M18 8L22 12L18 16" />
                                <path d="M2 12H22" />
                            </svg>
                        </a>
                    </div>
                </div>

                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
                    <div class="contact-info">
                        <div class="contact-info__icon">
                            @php
                                echo $contact?->data_values?->phone_icon ?? '';
                            @endphp
                        </div>
                        <h6 class="contact-info__title">{{ __($contact?->data_values?->phone_title ?? '') }}</h6>
                        <p class="contact-info__desc">{{ __($contact?->data_values?->phone_description ?? '') }}</p>
                        <a class="contact-info__link" href="tel:{{ $contact?->data_values?->phone_details ?? '' }}">
                            {{ __($contact?->data_values?->phone_details ?? '') }}
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                 stroke-linejoin="round" class="lucide lucide-move-right-icon lucide-move-right">
                                <path d="M18 8L22 12L18 16" />
                                <path d="M2 12H22" />
                            </svg>
                        </a>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
                    <div class="contact-info">
                        <div class="contact-info__icon">
                            @php
                                echo $contact?->data_values?->address_icon ?? '';
                            @endphp
                        </div>
                        <h6 class="contact-info__title">{{ __($contact?->data_values?->address_title ?? '') }}</h6>
                        <p class="contact-info__desc">{{ __($contact?->data_values?->address_description ?? '') }}</p>
                        <a class="contact-info__link" href="javascript:void(0);">
                            {{ __($contact?->data_values?->address_details ?? '') }}
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                 stroke-linejoin="round" class="lucide lucide-move-right-icon lucide-move-right">
                                <path d="M18 8L22 12L18 16" />
                                <path d="M2 12H22" />
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
            <div class="contact-card">
                <div class="row gy-4">
                    <div class="col-lg-6">
                        <div class="section-heading style-left">
                            <span class="section-heading__tagline" data-aos="fade-up" data-aos-duration="1500"
                                  data-aos-delay="100">{{ __($contact?->data_values?->title ?? '') }}</span>
                            <h2 class="section-heading__title" data-aos="fade-up" data-aos-duration="1500"
                                data-aos-delay="200">
                                {{ __($contact?->data_values?->heading ?? '') }}
                            </h2>
                            <p class="section-heading__desc" data-aos="fade-up" data-aos-duration="1500"
                               data-aos-delay="300">
                                {{ __($contact?->data_values?->subtitle ?? '') }}
                            </p>
                        </div>
                        <ul class="contact-step">
                            @foreach ($contactElements as $element)
                                <li class="contact-step-item" data-aos="fade-up" data-aos-duration="1500"
                                    data-aos-delay="400">
                                    <div class="contact-step-item__header">
                                        <div class="contact-step-item__icon">
                                            @php
                                                echo $element?->data_values?->icon ?? '';
                                            @endphp
                                        </div>
                                        <div class="contact-step-item__content">
                                            <h6 class="contact-step-item__title">
                                                {{ __($element?->data_values?->title ?? '') }}
                                            </h6>
                                        </div>
                                    </div>
                                    <div class="contact-step-item__body">
                                        <p class="contact-step-item__desc">
                                            {{ __($element?->data_values?->details ?? '') }}
                                        </p>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                    <div class="col-lg-6">
                        <form class="contact-form verify-gcaptcha needs-validation" method="post" data-aos="fade-up"
                              data-aos-duration="1500" data-aos-delay="300">
                            @csrf
                            <div class="contact-form__body">
                                <div class="row gy-3 gy-xl-4">
                                    <div class="form-group col-lg-6">
                                        <label for="name" class="form--label">@lang('Name')</label>
                                        <input type="text" name="name" autocomplete="off"
                                               class="form-control form--control"
                                               value="{{ old('name', $user->fullname ?? '') }}"
                                               @if ($user && $user->profile_complete) readonly @endif required>
                                    </div>
                                    <div class="form-group col-lg-6">
                                        <label for="email" class="form--label">@lang('Email')</label>
                                        <input type="email" name="email" autocomplete="off"
                                               class="form-control form--control"
                                               value="{{ old('email', $user->email ?? '') }}"
                                               @if (auth()->user()) readonly @endif required>
                                    </div>
                                    <div class="form-group col-sm-12">
                                        <label for="name" class="form--label">@lang('Subject')</label>
                                        <input type="text" name="subject" autocomplete="off"
                                               class="form-control form--control"
                                               value="{{ old('subject') }}" required>
                                    </div>
                                    <div class="form-group col-sm-12">
                                        <label for="message" class="form--label">@lang('Message')</label>
                                        <textarea name="message" class="form-control form--control" required>{{ old('message') }}</textarea>
                                    </div>
                                    <x-captcha />
                                    <div class="col-sm-12">
                                        <button class="btn btn--lg btn--base d-flex" type="submit">
                                            <span class="btn__text">@lang('Get started')</span>
                                            <span class="btn__icon">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                     viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                     class="lucide lucide-arrow-up-right-icon lucide-arrow-up-right">
                                                    <path d="M7 7h10v10"></path>
                                                    <path d="M7 17 17 7"></path>
                                                </svg>
                                            </span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

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