<?php
$pid = get_query_var('pid');


global $wpdb;
$PSY_CONTACT_US_DETAILS = $wpdb->prefix . PSY_CONTACT_US_DETAILS;

$curDate = date('Y-m-d H:i:s');
$ip_address = $_SERVER['REMOTE_ADDR'];
$locationArray = unserialize(file_get_contents('http://www.geoplugin.net/php.gp?ip=' . $ip_address));
$userLocation = $locationArray['geoplugin_timezone'];

//insert details
if (isset($_REQUEST['contact_us'])) {

    $your_name = $_REQUEST['your-name'];
    $your_email = $_REQUEST['your-email'];
    $your_subject = $_REQUEST['your-subject'];
    $your_number = $_REQUEST['your-number'];
    $your_message = $_REQUEST['your-message'];

    $insertContactDetails = "INSERT into $PSY_CONTACT_US_DETAILS set name='$your_name', email='$your_email', mobile='$your_number', subject='$your_subject', message='$your_message', ip_address='$ip_address', add_date='$curDate'";
    if ($wpdb->query($insertContactDetails)) {

?>
        <script>
            jQuery(document).ready(function() {
                toastr.success("Success:we will revert back to you soon")
            });
        </script>
    <?php
    } else {
    ?>
        <script>
            jQuery(document).ready(function() {
                toastr.error("Error:something went wrong")
            });
        </script>
<?php
    }
}

?>
<style>
    .CaptchaImageCodein {
        display: flex;
        gap: 20px;
    }

    .CaptchaImageCodein .fa-sync {
        padding: 10px;
    }

    .captcha-input {
        width: 44%;
        float: right;
        text-align: center;
        padding: 8px;
    }

    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        margin: 0;
    }
</style>

<!-- CONTACT US SECTION  -->

<section class="contactus-page-section">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-12">
                <h1 class="contactus-page-head">Contact Us</h1>
                <h4 class="email-text"><span>Email address</span> info@selfanalyse.com </h4>
                <h4 class="email-text"><span>Telephone</span> +011 23074446 </h4>
                <hr>
                <h4 class="contactus-page-subhead">Working Hours</h4>
                <p>On All Working Days 10:00 AM to 06:00 PM</p>
                <hr>
                <h4 class="contactus-page-subhead">Join Us On Social Media</h4>

                <ul class="contactus-social-ul">
                    <li><a href="https://twitter.com/self_analyse" target="_blank"><i class="fab fa-twitter"></i></a> </li>
                    <li><a href="https://facebook.com/selfanalyse" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
                    <li><a href="https://www.instagram.com/self_analyse/" target="_blank"><i class="fab fa-instagram"></i></a></li>
                    <li><a href="https://www.youtube.com/channel/UC_Y9Si7E4Xjt9hjYhGuo_gQ/videos" target="_blank"><i class="fab fa-youtube"></i></a></li>
                </ul>
            </div>

            <?php if ($userLocation == 'Asia/Kolkata') { ?>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <h4 class="contactus-page-head">How can we help?</h4>
                    <p>In case you would like to avail any of our services, please fill in the form below and we will reach out to you at earliest.</p>
                    <form method="POST" class="contact-form row m-0" onsubmit="return validate();">
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <label>Your Name</label>
                            <input type="text" name="your-name" id="c_name" value="" class="" aria-required="true" aria-invalid="false">
                        </div>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <label>Your Email</label>
                            <input type="email" name="your-email" id="c_email" value="" class="" aria-required="true" aria-invalid="false">
                        </div>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <label>Subject</label>
                            <input type="text" name="your-subject" id="c_subject" value="" class="" aria-required="true" aria-invalid="false">
                        </div>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <label>Your Mobile Number</label>
                            <input type="number" name="your-number" id="c_number" value="" class="" aria-required="true" aria-invalid="false">
                        </div>
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <label> Your Message </label>
                            <textarea name="your-message" id="c_message" cols="30" rows="3"></textarea>
                        </div>
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <div class="col-md-5 col-sm-5 col-xs-12">
                                <label class="captcha-label"> Enter Captcha </label>
                                <div class="CaptchaImageCodein">
                                    <div id="CaptchaImageCodein">
                                        <canvas id="capcodeIn" class="capcodeIn"></canvas>
                                    </div>
                                    <i class="fa fa-sync" onclick='CreateCaptchaSignIn()'></i>
                                </div>
                            </div>
                            <div class="col-md-7 col-sm-7 col-xs-12" style="margin-top:26px;">
                                <input type="text" placeholder="" name="captcha" id="captchaSignin" size="6" value="" class="captcha-input" />
                            </div>
                        </div>

                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <button type="submit" name="contact_us">Send Message
                            </button>
                        </div>
                    </form>
                </div>
            <?php } ?>
        </div>
    </div>
</section>

<!-- CONTACT US SECTION  -->
<script>
    //validate email
    function validateEmail($email) {
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        if (!emailReg.test($email)) {
            return false;
        } else {
            return true;
        }
    }
    //validate mobile number
    function validateMobile($mobile) {
        var mobilePat = /^\d{10}$/;
        if (!mobilePat.test($mobile)) {
            return false;
        } else {
            return true;
        }
    }

    function validateTEXT($message) {

        var regex = /^[a-zA-Z]*$/;
        if (regex.test($message)) {
            return true;
        } else {
            return false;
        }
    }


    function validate() {
        var Usercaptcha = cd;
        var CreatedCaptcha = Usercaptcha.split(" ").join("");
        var UserInputCaptcha = document.getElementById("captchaSignin").value;
        if (jQuery('#c_name').val() == "") {
            toastr.error("Please enter your name");
            jQuery('#c_name').focus();
            return false;
        }
        if (jQuery('#c_email').val() == "") {
            toastr.error("Please enter your email id");
            jQuery('#c_email').focus();
            return false;
        } else {
            if (!validateEmail(jQuery('#c_email').val())) {
                toastr.error("Please enter a valid email");
                jQuery('#c_email').focus();
                return false;
            }
        }
        if (jQuery('#c_number').val() == "") {
            toastr.error("Please enter a mobile number");
            jQuery('#c_number').focus();
            return false;
        } else if (!validateMobile(jQuery('#c_number').val())) {
            toastr.error("Please enter a valid mobile no of 10 digit only");
            jQuery('#c_number').focus();
            valid = false;
            return false;
        }
        if (jQuery('#c_subject').val() == "") {
            toastr.error("Please select your subject");
            jQuery('#c_subject').focus();
            return false;
        }
        if (jQuery('#c_message').val() == "") {
            toastr.error("Please enter your query");
            jQuery('#c_message').focus();
            return false;
        }

        if (jQuery('#c_message').val() != "") {
            var length = jQuery('#c_message').val().length;
            if (length >= 200) {
                toastr.error('Please enter less than 200 characters :)');
                jQuery('#c_message').focus();
                return false;
            } else if (!validateTEXT(jQuery('#c_message').val())) {
                toastr.error("Please enter only alphabet characters in message box :)");
                return false;
            }

        }
        if (UserInputCaptcha == '') {
            toastr.error('Enter Captcha');
            jQuery("#captchaSignin").focus();
            return false;
        }
        if (UserInputCaptcha != CreatedCaptcha) {
            toastr.error('Captcha does not match');
            jQuery("#captchaSignin").focus();
            return false;
        }
        return true;
    }
</script>
<script type="text/javascript">
    var cd;

    jQuery(function() {
        CreateCaptchaSignIn();
    });

    // Create Captcha
    function CreateCaptchaSignIn() {
        //$('#InvalidCapthcaError').hide();
        var alpha = new Array('A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9');

        var i;
        for (i = 0; i < 6; i++) {
            var a = alpha[Math.floor(Math.random() * alpha.length)];
            var b = alpha[Math.floor(Math.random() * alpha.length)];
            var c = alpha[Math.floor(Math.random() * alpha.length)];
            var d = alpha[Math.floor(Math.random() * alpha.length)];
            var e = alpha[Math.floor(Math.random() * alpha.length)];
            var f = alpha[Math.floor(Math.random() * alpha.length)];
        }
        cd = a + ' ' + b + ' ' + c + ' ' + d + ' ' + e + ' ' + f;
        jQuery('#CaptchaImageCodein').empty().append('<canvas id="capcodeIn" class="capcodeIn" width="130" height="40"></canvas>')

        var c = document.getElementById("capcodeIn"),
            ctx = c.getContext("2d"),
            x = c.width / 2,
            img = new Image();

        img.src = "<?php echo ROOT_LINK . 'wp-content/plugins/psychometrics/images/captcha-background.jpg'; ?>";
        img.onload = function() {
            var pattern = ctx.createPattern(img, "repeat");
            ctx.fillStyle = pattern;
            ctx.fillRect(0, 0, c.width, c.height);
            ctx.font = "18px Roboto Slab";
            ctx.fillStyle = '#ccc';
            ctx.textAlign = 'center';
            ctx.setTransform(1, -0.12, 0, 1, 0, 15);
            ctx.fillText(cd, x, 18);
        };


    }
</script>