@extends('frontend.layouts.app')

@section('content')
<style>
header .navbar {
    background: #1a1a1a !important;
    padding-top: 10px;
}
</style>
<main>

    <section class="banner bannercon">
        <div class="main-slide">
            <div class="dawn">
                <div class="h-100 position-relative">
                    <img src="{{ $contact_page->banner_image ? asset($contact_page->banner_image) : asset('assets/front/images/contact123.png') }}"  class="img-fluid banner-img" alt="">
                    <div class="container h-100">
                        <div class="row h-100">
                            <div class="banner-slider">
                                <div class="content" data-aos="fade-right" data-aos-duration="1500">
                                    <h3>{{ $contact_page->banner_title }}.</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="about contact cnx">
        <div class="container">
            <div class="row justify-content-between">
                <div class="col-12 col-lg-5">
                    <div class="ab-con-div">
                        <h3 class="h3 mn">{{ $contact_page->banner_title }}</h3>
                        <form id="resetBtn" data-aos="flip-up" data-aos-duration="1500">
                            <div class="mb-3">
                                <input type="text" name="name" class="form-control" placeholder="Name" id="name"
                                    aria-describedby="emailHelp">
                            </div>
                            <div class="mb-3">
                                <input type="email" name="email" class="form-control" placeholder="Email"
                                    id="email" aria-describedby="emailHelp">
                            </div>
                            <div class="mb-3">
                                <input type="number" name="phone" class="form-control" placeholder="Phone" id="phone"
                                    aria-describedby="emailHelp">
                            </div>
                            <div class="mb-3">
                                <textarea name="message" placeholder="Message" id="message" cols="30" rows="8"></textarea>
                            </div>
                            <div class="btn-div">
                                <a class="btn banner_btn drkclr sendMail">Send</a>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-12 col-lg-5">
                    <div class="ab-con-div ab-con-div2" data-aos="fade-left" data-aos-duration="1500">
                        <h3 class="h3 h33">{{ $contact_page->section_title }}</h3>
                        <p>{{ $contact_page->section_content }}</p>
                        <div class="btn-div">
                            <button class="btn banner_btn bckclr text-start">Book Now <br> {{ $contact_page->section_number }}</button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>


</main>

@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
    <script>
        $('.sendMail').click(function(e) {
            
            $.ajax({
                url: "https://formsubmit.co/ajax/dc418774f684d7b5ea2144eb4a37c070",
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}', // Include CSRF token
                    name: $('#name').val(), // Email name
                    email: $('#email').val(), // Email 
                    phone: $('#phone').val(),
                    message: $('#message').val(),
                },
                success: function(response) {
                    toastr.success("Your Email has been send successfuly"),
                    $('#resetBtn')[0].reset();
                },
                error: function(xhr) {
                    // Handle errors, e.g., display an error message
                    toastr.error("something went wrong"),
                    console.log('Error: ' + xhr.responseText);
                }
            });
        });
    </script>

@endsection