@extends('layouts.website.main')
@section('main-section')
<!-- Page Banner -->
@include('component.Banner', ['pageTitle' => "Contact Us", "bannerImage" =>
"https://images.unsplash.com/photo-1596524430615-b46475ddff6e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"])



<!-- Contact us -->
<section style="background: var(--bs-gray-100);" class=" overflow-hidden">
   
    <div class="container">
        <div class="text-center width-100 width-lg-55 mx-auto">
            <h3 class=" font-28px font-lg-36px fw-600 mb-3">Get in touch with us & Our team are always
                happy to help.</h3>
            <div class="hb-line bg-primary mx-auto rounded-pill" style="width: 109px; height: 3px;"></div>
        </div>
        <br>
        <br>
        <div class="width-100 width-lg-80 mx-auto">
            <h2 class=" font-20px font-md-28px fw-600">Email us</h2>
            <p class=" font-18px tracking-3 fw-400">Drop us an email and we’ll get back to you within 48hrs… </p>
            <form method="POST" action="{{ route("contact_form") }}">

                @csrf
                <div class="row mt-3 g-4">
                    <div class="col-lg-12">
                        <div class="form-group">
                            <label for="" class=" font-26px font-md-18px fw-600">Full Name</label>
                            <input type="text" name="full_name" class=" form-control" placeholder="Your Full Name"
                                required>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="" class=" font-26px font-md-18px fw-600">Email </label>
                            <input type="email" name="email" class=" form-control" placeholder="Enter Email Address"
                                required>

                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="" class=" font-26px font-md-18px fw-600">Phone </label>
                            <input type="phone" name="phone" class=" form-control" placeholder="Enter Phone Number"
                                required>

                        </div>
                    </div>
                    <div class="col-12">
                        <div class="form-group">
                            <label for="" class=" font-26px font-md-18px fw-600">What's your Message? </label>
                            <textarea name="message" required class=" form-control" id="" rows="10"></textarea>

                        </div>
                    </div>

                </div>
                <div class="text-center mt-6">
                    <button type="submit"
                        class=" btn btn-primary extra-btn-padding-40 font-18px fw-600 transition hover-tracking">Submit</button>

                </div>
            </form>
        </div>
    </div>
</section>
@endsection
@push("scripts")
@if(session()->has('contact_success'))
<script>
    Swal.fire(
    "Contact"
    , "{{ session()->get('contact_success') }}"
    , "success"
  );

</script>
@endif
@endpush