@extends('welcome')
@section('content')
<style>
    .mb-1 {
        margin-bottom: 10px;
    }

    .me-1 {
        margin-right: 10px;
    }

    .galleryno {
        display: none;
    }
</style>
<section class="page-header page-header-classic">
    <div class="container">
        <div class="row">
            <div class="col">
                <ul class="breadcrumb">
                    <li><a href="{{URL::to('index')}}">Home</a></li>
                    <li class="active">Contact Us</li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col p-static">
                <span class="page-header-title-border visible" style="width: 216.938px;"></span>
                <h1 data-title-border="">Contact Us</h1>

            </div>
        </div>
    </div>
</section>
<section class="about-us padding-section yellow-bg">
    <section class="padding-section">
        <div class="container">

            <div class="row py-4">
                <div class="col-lg-6">

                    <h2 class="font-weight-bold text-8 mt-2 mb-0">Get In Touch</h2>
                    <p class="mb-4">Feel free to ask for details, don't save any questions!</p>

                    <form class="contact-form" action="" method="post">
                        @csrf
                        @if($suc=Session::get('success'))
                        <div class="contact-form-success alert alert-success  mt-4">
                            <strong>Success!</strong> {{$suc}}
                        </div>
                        @elseif($err=Session::get('error'))
                        <div class="contact-form-error alert alert-danger mt-4">
                            <strong>Error!</strong> {{$err}}
                            <span class="mail-error-message text-1 d-block"></span>
                        </div>
                        @endif

                        <div class="row">
                            <div class="form-group col-lg-12">
                                <label class="form-label text-2">Full Name</label>
                                <input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control text-3 h-auto py-2" name="name" required="">
                                @if($errors->any('name'))
                                <p class="text-danger">{{$errors->first('name')}}</p>
                                @endif
                            </div>
                            <div class="form-group col-lg-6">
                                <label class="form-label text-2">Email Address</label>
                                <input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control text-3 h-auto py-2" name="email" required="">
                                @if($errors->any('email'))
                                <p class="text-danger">{{$errors->first('email')}}</p>
                                @endif
                            </div>
                            <div class="form-group col-lg-6">
                                <label class="form-label text-2">Mobile No</label>
                                <div class="input-group">
                                    <select name="country_code">
                                @if(old('country_code'))
                                <option value="{{old('country_code')}}" selected>{{old('country_code')}}</option>
                                <option data-countryCode="IN"  value="+91">+91</option>
                                @else
                                <option data-countryCode="IN" selected value="+91">+91</option>
                                @endif
                                @include('partial.countryCode')
                            </select>
                                <input type="text" maxlength="10" value="" data-msg-required="Please enter your valid mobile no" data-msg-email="Please enter your valid mobile no" maxlength="100" class="form-control text-3 h-auto py-2" name="mobile">
                                </div>
                                @if($errors->any('mobile'))
                                <p class="text-danger">{{$errors->first('mobile')}}</p>
                                @endif
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col">
                                <label class="form-label text-2">Subject</label>
                                <input type="text" value="" data-msg-required="Please enter the subject." maxlength="100" class="form-control text-3 h-auto py-2" name="subject" >
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col">
                                <label class="form-label text-2">Message</label>
                                <textarea maxlength="5000" data-msg-required="Please enter your message." rows="4" class="form-control text-3 h-auto py-2" name="msg" required="" spellcheck="false" style="height: 77px;"></textarea>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col">
                                <input type="submit" id="sbtn" value="Send Message" class="btn btn-primary btn-modern" data-loading-text="Loading...">
                            </div>
                        </div>
                    </form>

                </div>
                <div class="col-lg-6">

                    <div class="appear-animation animated fadeIn appear-animation-visible" data-appear-animation="fadeIn" data-appear-animation-delay="800" style="animation-delay: 800ms;">
                        <h4 class="mt-2 mb-1">Our <strong>Office</strong></h4>
                        <ul class="list list-icons list-icons-style-2 mt-2">
                            <li><i class="fas fa-map-marker-alt top-6"></i> <strong class="text-dark">Address:</strong> Janki Vallabh Mandir, Narayan Ashram, Keshav Nagar, Vrindavan (Mathura), Uttar Pradesh INDIA. Pin- 281121.</li>
                            <li><i class="fas fa-map-marker-alt top-6"></i> <strong class="text-dark">Reg. Office:</strong> JD-24/387, Ambedkar Colony, 100 Feet Road, Chattarpur, New Delhi Pin- 110074</li>
                            <li><i class="fas fa-map-marker-alt top-6"></i> <strong class="text-dark">Branch Office:</strong> Sri RamaKrishna International, Hanumangarhi Temple, Balrampur.U.P Pin- 271201</li>
                            <li><i class="fas fa-map-marker-alt top-6"></i> <strong class="text-dark">EU/UK Office:</strong> 42-Schietbergen, 5672 SK, Nuenen , EINDHOVEN - Netherlands (EU) +31-645580020</li>
                            <li><i class="fas fa-phone top-6"></i> <strong class="text-dark">Phone:</strong> +91-9616734441</li>
                            <li><i class="fas fa-envelope top-6"></i> <strong class="text-dark">Email:</strong> <a href="mailto:info@sriseva.org"> info@sriseva.org</a></li>
                            <li><i class="fas fa-globe top-6"></i> <strong class="text-dark">Website:</strong> <a href="http://www.sriseva.org"> www.sriseva.org</a></li>
                        </ul>
                    </div>

                </div>

            </div>

        </div>
    </section>
    <div class="row">
        <div class="col-md-6">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14144.945443757018!2d77.68275953955082!3d27.586200800000007!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39736fb5588aa0d7%3A0x23326d5b15622ada!2sJanki%20Vallabh%20Mandir!5e0!3m2!1sen!2sin!4v1676622259398!5m2!1sen!2sin" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

        </div>
        <div class="col-md-6">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d454542.4784624464!2d81.89229457384938!3d27.121247018291324!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3999d8d19c44ca57%3A0x871b3ad154c44d18!2sHanuman%20gadi%20Mandir!5e0!3m2!1sen!2sin!4v1676621805445!5m2!1sen!2sin" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

        </div>
    </div>

</section>
<script>
    $(document).ready(function() {
        $('#sbtn').attr('disabled', true);
        let name = $("input[name='name']");
        let mobile = $("input[name='mobile']");
        let email = $("input[name='email']");
        let msg = $("textarea[name='msg']");
        name.on('keyup', function() {
            return checkvalid(name);
        });
        email.on('keyup', function() {
            return checkvalid(email);
        });
        msg.on('keyup', function() {
            return checkvalid(msg);
        });
        mobile.on('keyup', function() {
            return checkvalid(mobile);
        })
        $('#contact-form').on('submit', function(e) {
            e.preventDefault()
            if (checkvalid(name) && checkvalid(email) && checkvalid(mobile) ) {
                $(this).unbind('submit').submit();
            }
        });

    });
</script>
<script type="text/javascript" src="{{asset('assets/js/jqueryvalidation.js')}}"></script>
@stop