@extends('layouts.app')
@section('metades')
<meta name="description" content="{{ $data['metaDescription'] }}" />
<meta name="author" content="TezCommerce" />
<meta name="keywords" content="tezcommerce" />
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://www.binoysadanbedcollege.com/">
<meta property="og:type" content="website">
<meta property="og:title" content="Binoy Sadan B.Ed College of Women in Jhargram, West Bengal">
<meta property="og:description" content="Binoy Sadan B.Ed College of Women in Jhargram, West Bengal in Social Action is a registered organization established in the year 2015 Basic data of the NGO.">
<meta property="og:image" content="https://binoysadanbedcollege.comundefined">

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="binoysadanbedcollege.com">
<meta property="twitter:url" content="https://www.binoysadanbedcollege.com/">
<meta name="twitter:title" content="Binoy Sadan B.Ed College of Women in Jhargram, West Bengal">
<meta name="twitter:description" content="Binoy Sadan B.Ed College of Women in Jhargram, West Bengal in Social Action is a registered organization established in the year 2015 Basic data of the NGO.">
<meta name="twitter:image" content="https://binoysadanbedcollege.comundefined">

<!-- Meta Tags Generated via https://www.opengraph.xyz -->
@endsection
@section('title')
<title>{{ $data['metaTitle'] }}</title>
@endsection
@section('content')
<div class="banner" style="height: 250px; min-height: 300px; background-position: 0 0;">
    <div class="row">
        <div class="col-sm-12 col-lg-12 bn-text m-auto px-md-3 px-4">
            <h3 class="one8inr">Contact Us</h3>
        </div>
    </div>
</div>
<div class="container"></div>
<div class="container mb-5 mt-md-5 contact-page">
    <div class="row">
        <div class="col-md-12 px-0 d-flex flex-wrap mt-5 mb-4 my-md-5">
            <div class="col-md-4">
                <div class="c-area1"> <span class="icon-area">
                        <i class="fa fa-envelope" aria-hidden="true"></i>
                    </span>
                    <p> binoysadan.jhargram@rediffmail.com </p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="c-area1"> <span class="icon-area">
                        <i class="fa fa-map-marker" aria-hidden="true"></i>
                    </span>
                    <p> Jangal Khash Plot No- 158/194 Nedabora P.O & P.S-Jhargram, </p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="c-area1"> <span class="icon-area">
                        <i class="fa fa-phone" aria-hidden="true"></i>
                    </span>
                    <p> 9933611307 /<br> 9800446729 </p>
                </div>
            </div>
        </div>
        <div class="col-md-6 m-auto float-none">
            <div class="c-in-box ">
                @if (Session::has('message'))
                <div name="box" class="col-md-12 px-0">
                    <p class="alert alert-info text-center">{{ Session::get('message') }}</p>
                </div>
                @endif
                <div name="box" class="col-md-12 px-0">
                    <form action="{{ route('contactUsSave') }}" method="POST" class="Callback-Form">
                        @csrf
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label>Name</label>
                                <input type="text" class="form-control" name="name" id="callback_name"
                                    pattern="^[a-zA-Z\s]{1,100}$" />
                            </div>
                            <div class="form-group col-md-6">
                                <label>Phone</label>
                                <input type="text" class="form-control" name="mobile" id="callback_mobile"
                                    pattern="^[0-9+]{10,15}$" />
                            </div>
                            <div class="form-group col-md-12">
                                <label>Email</label>
                                <input type="Email" class="form-control" name="email" id="callback_email"
                                    pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" />
                            </div>
                            <div class="form-group col-md-12">
                                <label>Message</label>
                                <textarea class="form-control" name="message" id="callback_message"></textarea>
                            </div>
                        </div>
                        <div class="g-recaptcha" id="rcaptcha" data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}"
                            data-callback="recaptchaCallback"></div>
                        @if ($errors->has('g-recaptcha-response'))
                        <span class="text-danger">{{ $errors->first('g-recaptcha-response') }}</span>
                        @endif
                        <div class="col-md-12 text-center mt-4">
                            <button type="button" id="submitbtn"
                                class="border-btn b-btn">{{ __('Send Request') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')


<script type="text/javascript">
const Name = document.getElementById('callback-name')
const Mobile = document.getElementById('callback-mobile')
const Email = document.getElementById('callback-email')
const Form = document.querySelector('.Callback-Form')
const NameVerify = /^[a-zA-Z\s]{1,100}$/
const MobileVerify = /^[0-9+]{10,15}$/
const EmailVerify = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
Form.addEventListener('submit', (e) => {
    if ((NameVerify.test(Name.value)) == false) {
        alert(`Please Provide A Proper Name With No Numbers & Special Charaters`)
        e.preventDefault()
    } else if ((MobileVerify.test(Mobile.value)) == false) {
        alert(`Invalid Mobile Number`)
        e.preventDefault()
    } else if ((EmailVerify.test(Email.value)) == false) {
        alert(`Invalid Email Address`)
        e.preventDefault()
    } else {
        return
    }
})
</script>
@endpush
<script src="https://www.google.com/recaptcha/api.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
$(document).ready(function() {
    err_callback_name = true;
    err_callback_mobile = true;
    err_callback_email = true;
    err_callback_message = true;

    $("#callback_name").keyup(function() {
        callback_name_check_fun();
    });

    $("#callback_mobile").keyup(function() {
        callback_mobile_check_fun();
    });

    $("#callback_email").keyup(function() {
        callback_email_check_fun();
    });

    $("#callback_message").keyup(function() {
        callback_message_check_fun();
    });




    function callback_name_check_fun() {
        let k = $("#callback_name").val();
        let val = k.trim();
        if (val.length == "") {
            $("#callback_name").css("border", "2px solid red")
            err_callback_name = false;
            return false;
        } else {
            $("#callback_name").css("border", "2px solid green")
            err_callback_name = true;
        }
    }

    function callback_email_check_fun() {
        const regex = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/i;
        let k = $("#callback_email").val();
        let val = k.trim();
        if (val.length == "") {
            $("#callback_email").css("border", "2px solid red")
            err_callback_email = false;
            return false;
        } else if (!regex.test(val)) {
            $("#callback_email").css("border", "2px solid red")
            err_callback_email = false;
            return false;
        } else {
            $("#callback_email").css("border", "2px solid green")
            err_callback_email = true;
        }
    }

    function callback_mobile_check_fun() {
        const regex = /^(\+\d{1,3}[- ]?)?\d{10}$/;
        let k = $("#callback_mobile").val();
        let val = k.trim();
        if (val.length == "") {
            $("#callback_mobile").css("border", "2px solid red")
            err_callback_mobile = false;
            return false;
        } else if (!regex.test(val)) {
            $("#callback_mobile").css("border", "2px solid red")
            err_callback_mobile = false;
            return false;
        } else {
            $("#callback_mobile").css("border", "2px solid green")
            err_callback_mobile = true;
        }
    }

    function callback_message_check_fun() {
        let k = $("#callback_message").val();
        let val = k.trim();
        if (val.length == "") {
            $("#callback_message").css("border", "2px solid red")
            err_callback_message = false;
            return false;
        } else {
            $("#callback_message").css("border", "2px solid green")
            err_callback_message = true;
        }
    }

    $("#submitbtn").click(function() {
        err_callback_name = true;
        err_callback_mobile = true;
        err_callback_email = true;
        err_callback_message = true;
        callback_name_check_fun();
        callback_mobile_check_fun();
        callback_email_check_fun();
        callback_message_check_fun();

        if ((err_callback_name == true) && (err_callback_mobile == true) && (err_callback_email ==
            true) && (err_callback_message == true)) {
            return true;
        } else {
            return false;

        }

    });
});
</script>

<script>
function recaptchaCallback() {
    $("#submitbtn").attr("type", "submit")
}
</script>