@extends('layout.app')
@section('content')
<style>
    .contactPage {
        padding-top: 12rem;
        /* Adjust the padding to ensure the logo does not conflict with the section */
    }
</style>
{{-- <div class="preLoader black">--}}
{{-- <img src="{{asset('images/logo.webp')}}" alt="img" class="filterLight">--}}
{{-- </div>--}}
{{-- <div class="preLoader white"></div>--}}

{{-- <section class="innerBanner">--}}
{{-- <img src="{{asset('images/inrbg.jpg')}}" class="w-100" alt="img">--}}
{{-- <div class="container">--}}
{{-- <h2>Contact Us</h2>--}}
{{-- </div>--}}
{{-- </section>--}}




<main class="contactPage">
    <section class="pb-0">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-10">
                    <div class="row justify-content-between">
                        <div class="col-md-3">
                            <div class="contactInfo">
                                <figure>
                                    <img src="{{asset('images/addressicon.webp')}}" alt="img">
                                </figure>
                                <div>
                                    <h4>Address</h4>
                                    <p>{{$setting->address ?? ''}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="contactInfo">
                                <figure>
                                    <img src="{{asset('images/callicon.webp')}}" alt="img">
                                </figure>
                                <div>
                                    <h4>Phone</h4>
                                    <a href="{{$setting->phone ?? ''}}" class="bold">{{$setting->phone ?? ''}}</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="contactInfo">
                                <figure>
                                    <img src="{{asset('images/mailicon.webp')}}" alt="img">
                                </figure>
                                <div>
                                    <h4>Email</h4>
                                    <a href="mailto:info@hdomin.com">{{$setting->email ?? ''}}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="contactSec">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <figure>
                        <img src="{{ optional($contact->getMedia('contact_image')->first())->getUrl() }}" class="img-fluid" alt="">
                    </figure>
                </div>
                <div class="col-md-6 pl-xl-5">
                    <h2 class="heading mb-2" data-aos="fade-up">{{$data->title ?? ''}}</h2>
                    <p>{!! $data->contact_description ?? '' !!}</p>

                    <form class="contactForm contact-form" action="{{ route('contact.form.submit') }}" method="POST" novalidate="novalidate">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <input type="text" class="form-control @error('first_name') is-invalid @enderror" name="first_name" placeholder="First Name*">
                                @error('first_name')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <input type="text" class="form-control @error('last_name') is-invalid @enderror" name="last_name" placeholder="Last Name*">
                                @error('last_name')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <input type="text" class="form-control @error('phone') is-invalid @enderror" name="phone" placeholder="Phone*">
                                @error('phone')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <input type="text" class="form-control @error('email') is-invalid @enderror" name="email" placeholder="Email*">
                                @error('email')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="col-md-12">
                                <input type="text" class="form-control @error('address') is-invalid @enderror" name="address" placeholder="Address*">
                                @error('address')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="col-md-12">
                                <textarea rows="6" class="form-control @error('massage') is-invalid @enderror" name="massage" placeholder="Message*"></textarea>
                                @error('massage')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="col-12">
                                <button class="btn themeBtn" type="submit">Submit Now</button>
                            </div>
                        </div>
                    </form>
                    <div id="signupFormResult"></div>
                </div>
            </div>
        </div>
    </section>

</main>

@endsection