@extends('web.layouts.master')

@section('page_title', 'Index')


@section('content')

<section class="section-padding page-heading-section" style="background-image: url({{ asset('web_assets/images/hero-bg.jpg') }}">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="page-heading">
                    <h2>Contact Us</h2>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-padding">
    <div class="container">
        <div class="row justify-content-between">
            <div class="col-xl-6 mb-4">
                <div class="contact-img wow animate__fadeInUp" data-wow-duration="1s">
                    <img src="{{ asset('web_assets/images/contact.jpg') }}" alt="" />
                </div>
            </div>
            <div class="col-xl-6 mb-4 wow animate__fadeInUp" data-wow-duration="0.5s">
                <div class="contact-data-box">
                    <div class="contact-icon">
                        <i class="fa fa-map-marker-alt"></i>
                    </div>
                    <div class="contact-detail">
                        <h6>Address</h6>
                        <ul>
                            <li>"J.D. Gabani Library" Turava Compound, Hirabaug, Varachha Road, Surat</li>
                            <li>Phone :<a href="tel:(0261)2558814">(0261)2558814</a></li>
                            <li>Mobile No:<a href="tel:9687658814">96876 58814</a></li>
                            <li>Email : <a href="mailto:spkmlibrary@gmail.com">spkmlibrary@gmail.com</a></li>
                            <li>Website : <a href="spkmlibrary.org">spkmlibrary.org</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-4 mt-4 wow animate__fadeInUp" data-wow-duration="1s">
                <div class="contact-data-box">
                    <div class="contact-icon">
                        <i class="fa fa-hands-helping"></i>
                    </div>
                    <div class="contact-detail">
                        <h6>Secretary:</h6>
                        <ul>
                            <li>Dr. Mukeshbhai A. Navadia</li>
                            <li>Email : <a href="mailto:manavadia@gmail.com">manavadia@gmail.com</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 mt-4 wow animate__fadeInUp" data-wow-duration="1.5s">
                <div class="contact-data-box">
                    <div class="contact-icon">
                        <i class="fa fa-book"></i>
                    </div>
                    <div class="contact-detail">
                        <h6>Librarian:</h6>
                        <ul>
                            <li>Mr. Dhanjibhai B. Bhanderi</li>
                            <li>Email : <a href="mailto:bhanderidhanjibhai@gmail.com">bhanderidhanjibhai@gmail.com</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 mt-4 wow animate__fadeInUp" data-wow-duration="2s">
                <div class="contact-data-box">
                    <div class="contact-icon">
                        <i class="fa fa-user"></i>
                    </div>
                    <div class="contact-detail">
                        <h6>President:</h6>
                        <ul>
                            <li>Dr. C. M. Vaghani</li>
                            <li>Email : <a href="mailto:cmvaghani1962@gmail.com">cmvaghani1962@gmail.com</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="row justify-content-center">
            <div class="col-lg-8 mt-5  wow animate__fadeInUp" data-wow-duration="1s">

                <div class="section-title text-center wow animate__fadeInUp" data-wow-duration="1s" style="visibility: visible; animation-duration: 1s; animation-name: fadeInUp;">
                    <h2>Contact <strong> Us</strong></h2>
                    <div class="title-line">
                        <i class="fa fa-phone"></i>
                    </div>
                </div>

                <div class="contact-data-box h-auto">
                    <form id="contact_us" name="contact_us" method="POST">
                        @csrf
                        <div class="form-group">
                            <label>Name</label>
                            <input type="text" name="name" id="name" class="form-control" placeholder="Enter Name">
                        </div>
                        <div class="form-group">
                            <label>Email</label>
                            <input type="text" name="email" id="email" class="form-control" placeholder="Enter Email">
                        </div>
                        <div class="form-group">
                            <label>Mobile Number</label>
                            <input type="text" name="mobile_number" id="mobile_number" class="form-control" placeholder="Enter Mobile Number">
                        </div>
                        <div class="form-group">
                            <label>Subject</label>
                            <input type="text" name="subject" id="subject" class="form-control" placeholder="Enter Subject">
                        </div>
                        <div class="form-group">
                            <label>Message</label>
                            <textarea name="message" id="message" cols="30" rows="5" class="form-control"></textarea>
                        </div>

                        <div class="text-center">
                            <input type="submit" class="submit-cnt-btn" value="Submit">
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
</section>

@endsection

@push('page_scripts')

<script src="{{ asset('assets/js/jquery.validate.min.js') }}"></script>
<script src="{{ asset('assets/js/toastr.min.js') }}"></script>
<script>
    function contactUs(form) {
        
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            },
            url: '{{ route("web.contact-us") }}',
            type: 'post',
            processData: false,
            contentType: false,
            data : new FormData(form),
            beforeSend: function() {
                // setting a timeout
                $("#preloader").show();
            },
            success: function(data){
                $("#preloader").hide();
                if (data.status == "success") {
                    $("#contact_us")[0].reset();
                    toastr.success('SPKM Library', data.message);
                }
                else {
                    toastr.error('SPKM Library', data.message);
                }
            },
            error: function (data) {
                $("#preloader").hide();
                if(data.status === 422) {
                    var errors = $.parseJSON(data.responseText);
                    $.each(errors.errors, function (key, value) {
                        toastr.error('SPKM Library', value);
                    });
                }
                if(data.status === 500) {
                    toastr.error('SPKM Library', "Something Went Wrong");
                }
            }
        });
    }

    $("#contact_us").validate({
        errorClass: 'invalid-feedback animated fadeInDown',
        errorElement: 'div',
        rules: {
            name : {
                required: true,
            },
            email : {
                required: true,
                email: true
            },
            mobile_number : {
                required: true,
                minlength: 5,
                maxlength: 15
            },
            subject : {
                required: true,
            },
            message : {
                required: true,
            }
        },
        messages: {
            name: {
                required: "The name field is required.",
            },
            email: {
                required: "The email field is required.",
            },
            mobile_number: {
                required: "The mobile number field is required.",
            },
            subject: {
                required: "The subject field is required.",
            },
            message: {
                required: "The message field is required.",
            },
        },
        submitHandler: function (form) {
            contactUs(form);
        },
        highlight: function(element, errorClass, validClass) {
            $(element).parents("div.form-control").addClass(errorClass).removeClass(validClass);
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).parents(".error").removeClass(errorClass).addClass(validClass);
        }
    });
</script>

@endpush