@extends('front.layouts.master')
@section('title', __('unlimited'))
@section('content')
    @if (isset($contactData))
        <section class="dark-overlay hero mx-3 overflow-hidden position-relative py-4 py-lg-5 rounded-4 text-white">
            <img class="bg-image" src="{{ asset('front/assets/images/header/01.jpg') }}" alt="Image">
            <div class="container overlay-content py-5 ">
                <div class="row justify-content-between align-items-center">
                    <div class="col-md-6 col-lg-6">
                        <!-- start section header -->
                        <div class="section-header" data-aos="fade-down">
                            <!-- start description -->
                            <div
                                class="bg-primary text-white d-inline-block fs-14 mb-3 px-4 py-2 rounded-5 sub-title text-uppercase">
                                {{ $contactData->button_text }}</div>
                            <!-- end /. section header sub title -->
                            <!-- start section header -->
                            <h2 class="display-4 text-white fw-semibold mb-3 section-header__title text-capitalize">
                                {{ $contactData->title }}
                                <span class="font-caveat text-white text-white">Let us Know!</span>
                            </h2>
                            <!-- end /. section header title -->
                            <p class="mb-0 text-white">{{ $contactData->subtitle }}</p>
                        </div>
                        <!-- end /. section header -->
                    </div>
                    <div class="col-md-5 col-lg-4">
                        <h5 class="fw-bold mb-4 text-white">General contact</h5>
                        <div class="mb-5 text-white">
                            <div>{{ $contactData->address }}</div>
                            <div class="mt-4">
                                <a class="d-block fw-medium mb-1" href="#">
                                    <i class="fa-solid fa-phone me-2"></i><span>{{ $contactData->phone }}</span>
                                </a>
                                <a class="email-link d-block fw-medium" href="#">
                                    <i class="fa-solid fa-envelope me-2"></i>
                                    {{ $contactData->email }}
                                </a>
                            </div>
                        </div>
                        <h5 class="fw-bold mb-4 text-white">follow us</h5>
                        <div class="d-flex gap-3">
                            <a href="{{ $contactData->facebook_link }}"
                                class="fb d-flex align-items-center justify-content-center fs-19 rounded mr-2">
                                <i class="fab fa-facebook-f"></i>
                            </a>
                            <a href="{{ $contactData->twitter_link }}"
                                class="tw d-flex align-items-center justify-content-center fs-21 rounded mr-2">
                                <i class="fab fa-twitter"></i>
                            </a>
                            <a href="{{ $contactData->instagram_link }}"
                                class="ins d-flex align-items-center justify-content-center fs-21 rounded mr-2">
                                <i class="fab fa-instagram"></i></a>
                            <a href="{{ $contactData->pinterest_link }}"
                                class="pr d-flex align-items-center justify-content-center fs-21 rounded mr-2">
                                <i class="fab fa-pinterest-p"></i>
                            </a>
                            <a href="{{ $contactData->linkedin_link }}"
                                class="li d-flex align-items-center justify-content-center fs-21 rounded mr-2">
                                <i class="fab fa-linkedin-in"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif

    <!-- end /. page header -->
    <div class="py-5 bg-light mx-3 rounded-4 my-3">

        <div class="container py-5">
            <form method="POST" action="{{ route('submit.enquiry') }}">
                <div class="row justify-content-between">
                    @csrf
                    <div class="col-md-6 col-xl-5">
                        @if (session('success'))
                            <div class="alert alert-success alert-dismissible show mx-2" role="alert">
                                {{ session('success') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        @endif
                        <h3 class="h1 mb-4 font-caveat text-primary">My contact data</h3>
                        <!-- Start Form Group -->
                        <div class="mb-4">
                            <label class="required fw-medium mb-2">Full Name</label>
                            <input type="text" class="form-control" name="name" id="firstName"
                                placeholder="David Hall" required="">
                        </div>
                        <!-- /.End Form Group -->
                        <!-- Start Form Group -->
                        <div class="mb-4">
                            <label class="required fw-medium mb-2">Your Email</label>
                            <input type="email" class="form-control" name="email" id="email"
                                placeholder="hello@email.com" required>
                        </div>
                        <!-- /.End Form Group -->
                        <!-- Start Form Group -->
                        <div class="mb-4">
                            <label class="required fw-medium mb-2">Your Phone</label>
                            <input type="number" class="form-control" name="mobile" required id="phone">
                        </div>
                        <!-- /.End Form Group -->
                    </div>
                    <div class="col-md-6 col-xl-5">
                        <h3 class="h1 mb-4 font-caveat text-primary">My message</h3>
                        <!-- Start Form Group -->
                        <div class="mb-4">
                            <label class="required fw-medium mb-2">Your Comments</label>
                            <textarea class="form-control" rows="7"name="message" required placeholder="Tell us what we can help you with!"></textarea>
                        </div>
                        <!-- /.End Form Group -->
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                            <label class="form-check-label" for="flexCheckDefault">
                                YES, I AUTHORIZE THE USE OF MY PERSONAL DATA IN ACCORDANCE WITH THE PRIVACY POLICY DESCRIBED
                                ON
                                THE WEBSITE.
                            </label>
                        </div>
                        <!-- Start Submit Button -->
                        <button type="submit" class="btn btn-primary btn-lg d-inline-flex hstack gap-2 mt-4">
                            <span>Send message</span>
                            <span class="vr"></span>
                            <i class="fa-arrow-right fa-solid fs-14"></i>
                        </button>
                        <!-- /.End Submit Button -->
                    </div>
                </div>
            </form>
            @if ($contactData->map_url)
                <div class="row g-4 gx-xxl-5 mt-5 justify-content-center">
                    <div class="col-md-12">
                        <h2 class="display-6 fw-medium text-dark">Are you coming to see us? Make an<br> <span
                                class="font-caveat text-primary">appointment</span> at any of our huts.</h2>
                    </div>
                    <div class="col-md-12">

                        <iframe src="{{ $contactData->map_url }}" width="100%" height="320" style="border:0;"
                            allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

                    </div>
                </div>
            @endif
        </div>
    </div>
    <div class="py-5 bg-light mx-3 rounded-4 my-3" style="display: none;">
        <div class="container py-4">
            <div class="row justify-content-center">
                <div class="col-sm-10 col-md-10 col-lg-8">
                    <!-- start section header -->
                    <div class="section-header text-center mb-5" data-aos="fade-down">
                        <!-- start subtitle -->
                        <div
                            class="d-inline-block font-caveat fs-1 fw-medium section-header__subtitle text-capitalize text-primary">
                            F.A.Q.</div>
                        <!-- end /. subtitle -->
                        <!-- start title -->
                        <h2 class="display-5 fw-semibold mb-3 section-header__title text-capitalize">Frequently asked
                            questions</h2>
                        <!-- end /. title -->
                        <!-- start description -->
                        <div class="sub-title fs-16">Discover exciting categories. <span
                                class="text-primary fw-semibold">Find what you’re looking for.</span></div>
                        <!-- end /. description -->
                    </div>
                    <!-- end /. section header -->
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="accordion" id="accordionExample">
                        <div class="accordion-item mb-3 rounded-4">
                            <h2 class="accordion-header">
                                <button class="accordion-button fs-5 p-4 text-dark" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true"
                                    aria-controls="collapseOne">
                                    What Types Of Houses Are Available For Rent?
                                </button>
                            </h2>
                            <div id="collapseOne" class="accordion-collapse collapse show"
                                data-bs-parent="#accordionExample">
                                <div class="accordion-body p-4 pt-0">
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                                    has been the industry's standard dummy text ever since the 1500s, when an unknown
                                    printer took a galley of type and scrambled it to make a type specimen book. It has
                                    survived not only five centuries, but also the leap into electronic typesetting,
                                    remaining essentially unchanged. It was <code>.accordion-body</code> popularised in the
                                    1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
                                    recently with desktop publishing software like Aldus PageMaker including versions.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item mb-3 rounded-4">
                            <h2 class="accordion-header">
                                <button class="accordion-button fs-5 p-4 text-dark collapsed" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false"
                                    aria-controls="collapseTwo">
                                    What Is The Rental Application Process?
                                </button>
                            </h2>
                            <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                                <div class="accordion-body p-4 pt-0">
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                                    has been the industry's standard dummy text ever since the 1500s, when an unknown
                                    printer took a galley of type and scrambled it to make a type specimen book. It has
                                    survived not only five centuries, but also the leap into electronic typesetting,
                                    remaining essentially unchanged. It was <code>.accordion-body</code> popularised in the
                                    1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
                                    recently with desktop publishing software like Aldus PageMaker including versions.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item mb-3 rounded-4">
                            <h2 class="accordion-header">
                                <button class="accordion-button fs-5 p-4 text-dark collapsed" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false"
                                    aria-controls="collapseThree">
                                    What Are Your Rental Rates?
                                </button>
                            </h2>
                            <div id="collapseThree" class="accordion-collapse collapse"
                                data-bs-parent="#accordionExample">
                                <div class="accordion-body p-4 pt-0">
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                                    has been the industry's standard dummy text ever since the 1500s, when an unknown
                                    printer took a galley of type and scrambled it to make a type specimen book. It has
                                    survived not only five centuries, but also the leap into electronic typesetting,
                                    remaining essentially unchanged. It was <code>.accordion-body</code> popularised in the
                                    1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
                                    recently with desktop publishing software like Aldus PageMaker including versions.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item mb-3 rounded-4">
                            <h2 class="accordion-header">
                                <button class="accordion-button fs-5 p-4 text-dark collapsed" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false"
                                    aria-controls="collapseFour">
                                    What Are The Lease Terms?
                                </button>
                            </h2>
                            <div id="collapseFour" class="accordion-collapse collapse"
                                data-bs-parent="#accordionExample">
                                <div class="accordion-body p-4 pt-0">
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                                    has been the industry's standard dummy text ever since the 1500s, when an unknown
                                    printer took a galley of type and scrambled it to make a type specimen book. It has
                                    survived not only five centuries, but also the leap into electronic typesetting,
                                    remaining essentially unchanged. It was <code>.accordion-body</code> popularised in the
                                    1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
                                    recently with desktop publishing software like Aldus PageMaker including versions.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item mb-3 rounded-4">
                            <h2 class="accordion-header">
                                <button class="accordion-button fs-5 p-4 text-dark collapsed" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false"
                                    aria-controls="collapseFive">
                                    What Is Your Policy On Pets?
                                </button>
                            </h2>
                            <div id="collapseFive" class="accordion-collapse collapse"
                                data-bs-parent="#accordionExample">
                                <div class="accordion-body p-4 pt-0">
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                                    has been the industry's standard dummy text ever since the 1500s, when an unknown
                                    printer took a galley of type and scrambled it to make a type specimen book. It has
                                    survived not only five centuries, but also the leap into electronic typesetting,
                                    remaining essentially unchanged. It was <code>.accordion-body</code> popularised in the
                                    1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
                                    recently with desktop publishing software like Aldus PageMaker including versions.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('styles')
    <style>
        .content .container {
            max-width: 1140px !important;
        }

        .form-control {
            background: white;
            color: black
        }

        .btn-primary:hover {
            background-color: black;
            border: 1px solid black;
        }
    </style>
@endpush
@push('script')
@endpush