@extends('layouts.default')

@section('title', 'Contact')

@section('content')
<div class="custom-hero-img-map">
    <div class="container">
        <div class="row justify-content-center my-4">
            <div class="mt-6">
                @if(Auth::check())
                    @if(Auth::user()->isSuperAdmin() || Auth::user()->isTenant() || Auth::user()->isAdmin())
                        <div class="my-2">
                            <div class="edit-icon">
                                <i class="mdi mdi-pencil edit" data-toggle="modal" data-target="#contactHero"></i>
                            </div>
                        </div>
                    @endif
                @endif
                <div class="col-12">
                    <h1 class="fw-700 text-center">{{$contact_content->hero_section_title ?? 'Get In Touch'}}</h1>
                </div>
                <div class="col-12 col-xl-8 col-lg-8 mx-auto">
                    <div class="mt-4 text-center">
                        <p class="text-center">
                            {{$contact_content->hero_section_p ?? 'Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.
                            Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.'}}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="bg-white">
    <div class="container">
        <div class="card w-100 shadow-xss rounded-xxl border-0 negative-margin-top">
            <div class="row justify-content-center">
                <div class="col-12 col-xl-7 col-lg-7">
                    <div class="mt-1 p-5">
                        <span class="mb-3"><i class="mdi mdi-email-outline font-xxl text-color"></i></span>
                        <h4 class="fw-700 mb-4">Send us a message</h4>
                        <form action="{{route('contact-send')}}" method="POST">
                            @csrf
                            <div class="form-group">
                                <label> Name</label>
                                <input type="text" name="name" class="form-control" id="name" placeholder="Enter your name" value="{{ old('name') }}">
                            </div>
                            <div class="form-group">
                                <label> Email</label>
                                <input type="email" name="email" class="form-control" id="contactEmail" placeholder="Enter your email" value="{{ old('email') }}">
                            </div>
                            <div class="form-group">
                                <label> Phone</label>
                                <input type="number" name="phone" class="form-control" id="phoneNo" placeholder="Enter your phone" value="{{ old('phone') }}">
                            </div>
                            <div class="form-group">
                                <label> Message</label>
                                <textarea type="text" name="message" class="form-control" id="message" placeholder="Enter your message">{{ old('message') }}</textarea>
                            </div>
                            <div class="form-group mt-4">
                                <button class="custom-btn btn rounded-2 button_load" id="sendBtn" disabled onclick="this.classList.toggle('button--loading')">
                                    <span class="button__text"><i class="mdi mdi-send"></i> Send</span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-12 col-xl-5 col-lg-5 custom-bg-contact">
                    <div class="text-white p-5">
                        <span class="mb-3">
                            @if(Auth::check())
                                @if(Auth::user()->isSuperAdmin() || Auth::user()->isTenant() || Auth::user()->isAdmin())
                                    <div class="my-2">
                                        <div class="edit-icon">
                                            <i class="mdi mdi-pencil bg-white text-color edit" data-toggle="modal" data-target="#contactInfo"></i>
                                        </div>
                                    </div>
                                @endif
                            @endif
                            <i class="mdi mdi-email-outline font-xxl text-color" style="opacity: 0"></i>
                        </span>
                        <h4 class="fw-700 mb-4 text-white">Contact Information</h4>
                        <p class="mb-4 d-flex">
                            <i class="mdi mdi-map-marker mr-3"></i>
                            <span>{{$contact_content->address ?? '4517 Washington Ave. Manchester, Kentucky 39495'}}</span>
                        </p>
                        <p class="mb-4 d-flex">
                            <i class="mdi mdi-phone mr-3"></i>
                            <span><a href="tel://{{$contact_content->phone ?? '070 000 0000'}}" class="text-white">{{$contact_content->phone ?? '070 000 0000'}}</a></span>
                        </p>
                        <p class="mb-4 d-flex">
                            <i class="mdi mdi-email mr-3"></i>
                            <span><a href="mailto:{{$contact_content->email ?? 'example@mail.com'}}" class="text-white">{{$contact_content->email ?? 'example@mail.com'}}</a></span>
                        </p>
                    </div>
                    <div class="mt-2 mb-6 pl-5 d-flex">
                        @if(Auth::check())
                            @if(Auth::user()->isSuperAdmin() || Auth::user()->isTenant() || Auth::user()->isAdmin())
                                <div class="my-2">
                                    <div class="edit-icon">
                                        <i class="mdi mdi-pencil bg-white text-color edit" data-toggle="modal" data-target="#social"></i>
                                    </div>
                                </div>
                            @endif
                        @endif
                        <a href="{{$social->facebook ?? ''}}" class="p-2 text-center ms-3 menu-icon center-menu-icon"><i class="feather-facebook font-md alert-primary-d btn-round-lg theme-dark-bg text-white"></i></a>
                        <a href="{{$social->instagram ?? ''}}" class="p-2 text-center ms-3 menu-icon center-menu-icon"><i class="feather-instagram font-md alert-primary-d btn-round-lg theme-dark-bg text-white"></i></a>
                        <a href="{{$social->twitter ?? ''}}" class="p-2 text-center ms-3 menu-icon center-menu-icon"><i class="feather-twitter font-md alert-primary-d btn-round-lg theme-dark-bg text-white"></i></a>
                        <a href="{{$social->linkedin ?? ''}}" class="p-2 text-center ms-3 menu-icon center-menu-icon"><i class="feather-linkedin font-md alert-primary-d btn-round-lg theme-dark-bg text-white"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@include('elements.contact-hero')
@include('elements.contact-info')
@include('elements.social')
<script>
    const sendBtn = document.getElementById('sendBtn')

    const name = document.getElementById('name')
    const contactEmail = document.getElementById('contactEmail')
    const phoneNo = document.getElementById('phoneNo')
    const message = document.getElementById('message')

    const checkSendButton = () => {
        sendBtn.disabled = !(
            name.value &&
            contactEmail.value &&
            phoneNo.value &&
            message.value
        )
    }
    name.addEventListener('change', checkSendButton)
    contactEmail.addEventListener('change', checkSendButton)
    phoneNo.addEventListener('change', checkSendButton)
    message.addEventListener('change', checkSendButton)

</script>
@endsection