@extends('Template::layouts.frontend')
@section('content')
    @php
        $contactContent = getContent('contact_us.content', true);
        $contactElement = getContent('contact_us.element', false, null, true);
        $socialIcons = getContent('social_icon.element', orderById: true);
    @endphp
    <section class="contact my-120">
        <div class="container">
            <div class="row gy-4 mb-60">
                @php
                    $delay = 100;
                @endphp
                @foreach ($contactElement as $contact)
                    <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="{{ $delay }}">
                        <div class="contact-card ">
                            <div class="contact-card__header">
                                <div class="contact-card__icon">
                                    @php
                                        echo $contact?->data_values?->icon ?? '';
                                    @endphp
                                </div>
                            </div>
                            <div class="contact-card__body">
                                <h6 class="contact-card__title">{{ __($contact?->data_values?->title ?? '') }}</h6>
                                <p class="contact-card__desc">{{ __($contact?->data_values?->short_detail ?? '') }}.</p>
                            </div>
                            <div class="contact-card__footer">
                                <a class="contact-card__link" href="javascript:void(0)">
                                    <span class="text--gradient">{{ __($contact?->data_values?->contact_info ?? '') }}</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    @php
                        $delay += 100;
                    @endphp
                @endforeach
            </div>

            <div class="row gy-4 align-items-center justify-content-between">
                <div class="col-lg-6">
                    <div class="contact-content">
                        <div class="section-heading style-left">
                            <h2 class="section-heading__title" data-aos="fade-up" data-aos-duration="1500"
                                data-aos-delay="100">
                                {{ __($contactContent?->data_values?->heading ?? '') }}
                            </h2>
                            <p class="section-heading__desc" data-aos="fade-up" data-aos-duration="1500"
                               data-aos-delay="200">
                                {{ __($contactContent?->data_values?->short_details ?? '') }}
                            </p>
                            <div class="contact-social-list mt-3" data-aos="fade-up" data-aos-duration="1500"
                                 data-aos-delay="300">
                                <ul class="social-list">
                                    @foreach ($socialIcons as $social)
                                        <li class="social-list__item">
                                            <a href="{{ $social?->data_values?->url ?? '' }}" class="social-list__link" target="_blank">
                                                @php
                                                    echo $social?->data_values?->social_icon ?? '';
                                                @endphp
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                        <div class="contact-thumb" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="400">
                            <h5 class="contact-thumb__title">{{ __($contactContent?->data_values?->title ?? '') }}</h5>
                            <img class="contact-thumb__img" src="{{ frontendImage('contact_us', $contactContent?->data_values?->image ?? '', '570x360') }}" alt="">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <form class="contact-form" method="POST" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
                        @csrf
                        <div class="contact-form__body">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form--group">
                                        <label class="form--label">@lang('Name')</label>
                                        <div class="form--field">
                                            <input name="name" type="text" class="form-control form-control-lg form--control" value="{{ old('name', $user?->fullname) }}" @if ($user && $user->profile_complete) readonly @endif required>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form--group">
                                        <label class="form--label">@lang('Email')</label>
                                        <div class="form--field">
                                            <input name="email" type="email" class="form-control form-control-lg form--control" value="{{ old('email', $user?->email) }}" @if ($user) readonly @endif required>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="form--group">
                                        <label class="form--label">@lang('Subject')</label>
                                        <div class="form--field">
                                            <input name="subject" type="text" class="form-control form-control-lg form--control" value="{{ old('subject') }}" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="form--group">
                                        <label class="form--label">@lang('Message')</label>
                                        <div class="form--field">
                                            <textarea class="form-control form-control-lg form--control" id="message" name="message" required>{{ old('message') }}</textarea>
                                        </div>
                                    </div>
                                </div>

                                <x-captcha label="form--label" class="true" />
                            </div>
                        </div>
                        <div class="contact-form__footer">
                            <button class="w-100 btn btn--lg btn--base" type="submit">
                                @lang('Send Message')
                                <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-send-icon lucide-send">
                                    <path
                                          d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" />
                                    <path d="m21.854 2.147-10.94 10.939" />
                                </svg>
                            </button>
                        </div>
                    </form>
                </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
