@include('frontend.header')



    <main class="main">
        <!-- breadcrumb -->
        <div class="site-breadcrumb" style="background: url(assets/img/breadcrumb/01.png)">
            <div class="container">
                <h2 class="breadcrumb-title">Contact Us</h2>
                <ul class="breadcrumb-menu">
                    <li><a href="#">Home</a></li>
                    <li class="active">Contact Us</li>
                </ul>
            </div>
        </div>
        <!-- breadcrumb end -->

        <!-- contact area -->

        <h2 style="text-align:center; padding-top:60px;">Reach Us</h2>
        <div class="contact-area py-120">
            <div class="container">
                <div class="contact-content">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="contact-info">
                                <div class="contact-info-icon">
                                    <i class="fal fa-map-location-dot"></i>
                                </div>
                                <div class="contact-info-content">
                                    <h5>Address</h5>
                                    <p>{{ $settings->address }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="contact-info">
                                <div class="contact-info-icon">
                                    <i class="fal fa-phone-volume"></i>
                                </div>
                                <div class="contact-info-content">
                                    <h5>Call Us</h5>
                                    <p>{{ $settings->phone }}</p>
                                    <br />
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="contact-info">
                                <div class="contact-info-icon">
                                    <i class="fal fa-envelopes"></i>
                                </div>
                                <div class="contact-info-content">
                                    <h5>Email Us</h5>
                                    <p>{{ $settings->email }}</p>
                                    <br />
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="contact-info">
                                <div class="contact-info-icon">
                                    <i class="fal fa-alarm-clock"></i>
                                </div>
                                <div class="contact-info-content">
                                    <h5>Open Time</h5>
                                    <p>Mon - Fri (09.30AM - 05.30PM)</p>
                                    <br />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="contact-wrapper">
                    <div class="row">
                        <div class="col-lg-5">
                            <div class="contact-img">
                                <img src="assets/img/contact/contact.png" alt="" />
                            </div>
                        </div>
                        <div class="col-lg-7 align-self-center">
                            <div class="contact-form">
                                <div class="contact-form-header">
                                    <h2>Get In Touch</h2>
                                    <p>
                                        It is a long established fact that a reader will be
                                        distracted by the readable content of a page randomised
                                        words which don't look even slightly when looking at its
                                        layout.
                                    </p>
                                </div>
                                <form method="post"
                                    id="contact-form">
                                     @csrf
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <input type="text" class="form-control" name="name"
                                                    placeholder="Your Name">
                                                <small class="text-danger error" data-error="name"></small>
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <input type="email" class="form-control" name="email"
                                                    placeholder="Your Email">
                                                <small class="text-danger error" data-error="email"></small>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <input type="text" class="form-control" name="subject"
                                            placeholder="Your Subject">
                                        <small class="text-danger error" data-error="subject"></small>
                                    </div>

                                    <div class="form-group">
                                        <textarea name="message" cols="30" rows="5" class="form-control"
                                            placeholder="Write Your Message"></textarea>
                                        <small class="text-danger error" data-error="message"></small>
                                    </div>

                                    <button type="submit" class="theme-btn">
                                        Send Message <i class="far fa-paper-plane"></i>
                                    </button>
                                </form>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end contact area -->

        <!-- map -->
        <div class="contact-map">
            <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3903.160182866488!2d79.8097291750598!3d11.963409288266908!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a5361466f55c323%3A0x36e975d728b448a!2sTagore%20Government%20Arts%20and%20Science%20College!5e0!3m2!1sen!2sin!4v1753300917373!5m2!1sen!2sin"
                width="600" height="450" style="border: 0" allowfullscreen="" loading="lazy"
                referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
    </main>

    @include('frontend.footer')
    <script>
$(document).ready(function () {

    $('#contact-form').on('submit', function (e) {
        e.preventDefault();

        $('.error').text(''); // clear old errors
        let isValid = true;

        // Simple validation
        $('#contact-form input, #contact-form textarea').each(function () {
            if ($(this).val().trim() === '') {
                isValid = false;
                let name = $(this).attr('name');
                $('[data-error="' + name + '"]').text('This field is required');
            }
        });

        if (!isValid) return;

        $.ajax({
            url: "{{ route('contact.store')}}",
            type: "POST",
            data: $(this).serialize(),
            success: function (response) {

        if (response.status === true) {
            Swal.fire({
                icon: 'success',
                title: 'Message Sent!',
                text: response.message,
                confirmButtonColor: '#3085d6'
            });

            $('#contact-form')[0].reset();
        }

    },
    error: function (xhr) {

        if (xhr.status === 422) {
            let errors = xhr.responseJSON.errors;
            $('.error').text('');

            $.each(errors, function (key, value) {
                $('[data-error="' + key + '"]').text(value[0]);
            });

        } else {
            Swal.fire({
                icon: 'error',
                title: 'Oops!',
                text: 'Something went wrong. Please try again.'
            });
        }
    }
        });
    });

});
</script>