@extends('layouts.app')
@section('metades')
<meta name="description" content="{{ $data['metaDescription'] }}" />
<meta name="author" content="Kultikri Teacher Training Institute of Higher Studies (KTTIHS)" />
<meta name="keywords" content="Kultikri Teacher Training Institute of Higher Studies (KTTIHS)" />
@endsection
@section('title')
<title>{{ $data['metaTitle'] }}</title>
@endsection
@section('content')
<div class="container">
    <div class="w-100 mt-3 text-md-center title-bx1">
        <h3 class="one8">Contact Us</h3>
    </div>
    <div id="error_msg">
    </div>
    <div class="mb-5 contact-page">
        <div class="row">
            <div class="col-md-6 px-0 ">
                <div class="col-md-12">
                    <div class="c-area1">
                        <span class="icon-area">
                            <i class="fa fa-envelope" aria-hidden="true"></i>
                        </span>
                        <p>
                            @foreach ($data['moduleItems'] as $item)
                            @if ($item['attr1'] != '')
                            {{ $item['attr1'] }}
                            @endif
                            @endforeach
                        </p>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="c-area1">
                        <span class="icon-area">
                            <i class="fa fa-map-marker" aria-hidden="true"></i>
                        </span>
                        <p>
                            @foreach ($data['moduleItems'] as $item)
                            {{ $item['attr2'] }}
                            @endforeach
                        </p>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="c-area1">
                        <span class="icon-area">
                            <i class="fa fa-phone" aria-hidden="true"></i>
                        </span>
                        <p>
                            @foreach ($data['moduleItems'] as $item)
                            {{ $item['attr3'] }}
                            @endforeach
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 m-auto float-none">
                @if(Session::has('message'))
                <p class="alert alert-info">{{ Session::get('message') }}</p>
                @endif
                <div class="c-in-box d-flex">

                    <!-- <form name="box" class="col-md-12 px-0"> -->
                    <form action="{{ route('sendmsg') }}" method="POST">

                        @csrf
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label>Name</label>
                                <input type="text" id="name" name="name" class="form-control" />
                            </div>
                            <div class="form-group col-md-6">
                                <label>Phone</label>
                                <input type="text" id="phone" name="phone" class="form-control" />
                            </div>
                            <div class="form-group col-md-12">
                                <label>Email</label>
                                <input type="Email" id="email" name="email" class="form-control" />
                            </div>
                            <div class="form-group col-md-12">
                                <label>Message</label>
                                <textarea class="form-control" id="msg" name="msg"></textarea>
                            </div>
                            <div class="form-group col-md-12">
                                <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>
                            <p id="success"></p>
                            <div class="col-md-12 text-center mt-4">
                                <button type="button" id="em_sub" class="border-btn b-btn"
                                    onclick="sendmsg()">Send</button>
                            </div>
                        </div>
                    </form>
                    <!-- </form> -->
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
<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_name = true;
    err_phone = true;
    err_email = true;
    err_msg = true;

    $("#name").keyup(function() {
        name_check_fun();
    });

    $("#email").keyup(function() {
        email_check_fun();
    });

    $("#phone").blur(function() {
        phone_check_fun();
    });

    $("#msg").keyup(function() {
        msg_check_fun();
    });

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


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

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


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


    $("#em_sub").click(function() {
        err_name = true;
        err_phone = true;
        err_email = true;
        err_msg = true;
        name_check_fun();
        email_check_fun();
        msg_check_fun();
        phone_check_fun();


        if ((err_name == true) && (err_email == true) && (err_phone == true) && (err_msg == true)) {
            return true;
        } else {
            return false;

        }

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