@extends('layouts.front-layout')

@section('content')

    <div class="preLoader black">
        <img src="{{( isset($setting) && $setting->getFirstMediaUrl('logo') ?  $setting->getFirstMediaUrl('logo') : asset('upload/placeholder.png'))}}" alt="img">
    </div>
    <div class="preLoader white"></div>


    <section class="innerBaner">
        <img src="{{( isset($contact) && $contact->getFirstMediaUrl('contact_top_banner_image') ?  $contact->getFirstMediaUrl('contact_top_banner_image') : asset('upload/placeholder.png'))}}" class="w-100" alt="img">
        <div class="container">
            <div class="content">
                <h2>{{ $pageData['Contact']['top_title'] ?? '' }}</h2>
                <ul>
                    <li><a href="{{route('home')}}">Home</a></li>
                    <li><i class="far fa-long-arrow-alt-right"></i></li>
                    <li><span>{{ $pageData['Contact']['top_title'] ?? '' }}</span></li>
                </ul>
            </div>
        </div>
    </section>

    <section class="contactInfo">
        <div class="container">
            <div class="row">
                <div class="col-md-5">
                    <div class="contactInfo__map">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d52784203.16337093!2d-161.37967564687162!3d36.14970978124419!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54eab584e432360b%3A0x1c3bb99243deb742!2sUnited%20States!5e0!3m2!1sen!2s!4v1718841923908!5m2!1sen!2s" width="100%" height="550" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>
                <div class="col-md-6">
                    <h2 class="heading">{{ $pageData['Contact']['heading'] ?? '' }}</h2>
                    <p>
                        There are many variations of passages of Lorem Ipsum available but the majority suffered ligula lacus eget injected
                    </p>
                    <ul class="contactInfo__links">
                        <li>
                            <a href="tel:1234567890">
                                <div class="icon"><i class="fas fa-phone-alt"></i></div>
                                <div>
                                    <span>Phone</span>
                                    +123.456.7890
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="mailto:info@yourdomain.com">
                                <div class="icon"><i class="far fa-envelope"></i></div>
                                <div>
                                    <span>Email</span>
                                    info@yourdomain.com
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="icon"><i class="fas fa-map-marker-alt"></i></div>
                                <div>
                                    <span>Location</span>
                                    Lorem Ipsum St, Road Abc
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section class="contact">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h2 class="sub-heading">CONTACT WITH US</h2>
                    <h3 class="mainHeading">How Can We Help You?</h3>
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    </p>
                    <ul class="socailIcon">
                        <li><a href="{{$setting->twitter ? : ''}}"><i class="fab fa-twitter"></i></a></li>
                        <li><a href="{{$setting->youtube ? : ''}}"><i class="fab fa-youtube"></i></a></li>
                        <li><a href="{{$setting->facebook ? : ''}}"><i class="fab fa-facebook-f"></i></a></li>
                        <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                    </ul>
                </div>
                <div class="col-md-6">
                    <form action="{{route('contact.submit')}}" class="contact__form"method="POST">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <input type="text" placeholder="Your Name"name="first_name">

                                <small
                                    class="text-danger">@error ('first_name') {{$message}} @enderror</small>
                            </div>


                            <div class="col-md-6">
                                <input type="text" placeholder="Enter Email"name="email">
                                <small
                                    class="text-danger">@error ('email') {{$message}} @enderror</small>
                            </div>
                            <div class="col-md-6">
                                <input type="text" placeholder="Subject"name="subject">
                                <small
                                    class="text-danger">@error ('subject') {{$message}} @enderror</small>
                            </div>
                            <div class="col-md-6">
                                <input type="text" placeholder="Phone"name="phone">
                                <small
                                    class="text-danger">@error ('phone') {{$message}} @enderror</small>
                            </div>
                            </div>
                            <div class="col-12">
                                <textarea rows="6" placeholder="Message"name="message"></textarea>
                                <small
                                    class="text-danger">@error ('message') {{$message}} @enderror</small>
                            </div>
                            <div class="col-12">
                                <button class="themeBtn" type="submit">Send Message</button>
                            </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

@endsection