@extends('frontend.layouts.main')
@push('title')
    <title>Contact Us</title>
@endpush
@section('main-section')
    {{-- start-breadcrumb --}}
    <div class="breadcrumb-banner">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Contact Us</li>
                </ol>
            </nav>
            <h3>Contact Us</h3>
        </div>
    </div>
    {{-- end-breadcrumb --}}

    {{-- start-main --}}

    <main>
        <div class="contact-section">
            <div class="container ptb">
                <div class="row">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-5 mb-4 mb-md-0">
                                <h5>
                                    Reach Out
                                    <span class="title-accent"></span>
                                </h5>

                                <div class="d-flex contact-item">
                                    <div class="flex-shrink-0 cont-icons">
                                        <i class="fa-solid fa-location-dot"></i>
                                    </div>
                                    <div class="flex-grow-1 cont-text">
                                        <small>Our Location</small>
                                        <span>A4/43, Sushant Golf City, Shaheedpath, Lucknow-226030</span>
                                    </div>
                                </div>

                                <div class="d-flex contact-item">
                                    <div class="flex-shrink-0 cont-icons">
                                        <i class="fa-solid fa-envelope"></i>
                                    </div>
                                    <div class="flex-grow-1 cont-text">
                                        <small>Send an Email</small>
                                        <span>thesoul.anahat221223@gmail.com</span>
                                    </div>
                                </div>

                                <div class="d-flex contact-item">
                                    <div class="flex-shrink-0 cont-icons">
                                        <i class="fa-solid fa-phone-volume"></i>
                                    </div>
                                    <div class="flex-grow-1 cont-text">
                                        <small>Call Us</small>
                                        <span class="phone-highlight">+91-9450666662</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-7 contact-form-section">
                                <h5 class="form-title">
                                    Send a Message
                                    <span class="title-accent"></span>
                                </h5>
                                <form action="" class="mt-4" id="contactForm">
                                    <div class="row">
                                        <div class="col-md-6 mb-4">
                                            <label class="custom-label">Name</label>
                                            <input type="text" class="form-control custom-input" name="name"
                                                placeholder="John Doe">
                                            <font class="text-danger" id="name_err"></font>
                                        </div>

                                        <div class="col-md-6 mb-4">
                                            <label class="custom-label">Email</label>
                                            <input type="email" class="form-control custom-input" name="email"
                                                placeholder="email@example.com">
                                            <font class="text-danger" id="email_err"></font>
                                        </div>

                                        <div class="col-md-12 mb-4">
                                            <label class="custom-label">Mobile</label>
                                            <input type="text" class="form-control custom-input" name="mobile"
                                                placeholder="00000 00000">
                                            <font class="text-danger" id="mobile_err"></font>
                                        </div>

                                        <div class="col-md-12 mb-4">
                                            <label class="custom-label">Message</label>
                                            <textarea class="form-control custom-input" name="message" rows="4" placeholder="How can we help you?"></textarea>
                                            <font class="text-danger" id="message_err"></font>
                                        </div>
                                    </div>

                                    <button id="contactBtn" class="custom-bttn" type="button">
                                        Submit Message
                                        <span class="ps-2"><i class="fa-solid fa-paper-plane"></i></span>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    {{-- end-main --}}
    <script>
        $('#contactBtn').click(function() {

            let btn = $('#contactBtn');
            let formData = $("#contactForm").serialize();
            // Clear previous errors
            $(".text-danger").text('');

            $.ajax({
                url: "{{ url('contact-us') }}",
                type: "POST",
                data: formData,
                dataType: 'JSON',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },

                beforeSend: function() {
                    btn.prop('disabled', true);
                    btn.html('Processing...');
                },

                success: function(response) {

                    btn.prop('disabled', false);
                    btn.html('Submit Message');

                    if (response.success) {
                        alert(response.message);
                        document.getElementById('contactForm').reset();
                    } else {
                        $.each(response.errors, function(key, value) {
                            $("#" + key + "_err").text(value);
                        })
                    }
                },
                error: function(xhr) {
                    btn.prop('disabled', false);
                    btn.html('Submit Message');
                }
            });
        });
    </script>
@endsection