{% extends 'base.html' %}

{% block title %}
  Certified Firearm Instructor Program | ArmaLaser
{% endblock %}

{% block metadescription %}
  Firearm Instructors - sign up today to learn more about ArmaLaser's Certified Firearm Instructor Program and earn commissions direct from ArmaLaser.
{% endblock %}


{% block css %}
<style>
#instructor-form-div {
    margin-top: 30px;
}
#instructor-form-div h2 {
    margin-top: 0px;
}
#pagetitle img{
    height: 40px;
    margin-top: -15px;
}
.help-block {
    color: #ff0000 !important;
}
.glyphicon-remove {
    color: #ff0000;
}
.glyphicon-ok {
    color: green;
}
#instructors-ad-copy h3 {
    font-size: 20px;
}
</style>
{% endblock %}


{% block outsidecontainer %}
{% endblock %}


{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1 id="pagetitle"><img src="/assets/images/page/instructors/new.png">{{ pagetitle }}</h1>
        </div>

        <div class="col-md-7" style="margin-bottom: 15px;">
            <picture>
                <source srcset="/assets/images/page/instructors/instructor.jpg"
                    alt="ArmaLaser Certified Firearm Instructor Program" media="(min-width:800px)">

                <source srcset="/assets/images/page/instructors/instructor_med.jpg"
                    alt="ArmaLaser Certified Firearm Instructor Program" media="(min-width:400px)">

                <source srcset="/assets/images/page/instructors/instructor_small.jpg"
                    alt="ArmaLaser Certified Firearm Instructor Program" media="(min-width:200px)">

                <img class="img-responsive center-block"
                    src="/assets/images/page/instructors/instructor_thumb.jpg"
                    alt="ArmaLaser Certified Firearm Instructor Program">
            </picture>

            <div class="panel panel-default" id="instructor-form-div">
                <div class="panel-body" style="padding:20px 32px;">

                    <h2>Yes! I want to learn more.</h2>
                    <h4>
                        Tell me more about how my students and I can both benefit
                        through my participation in ArmaLaser's new
                        <strong>Certified Firearm Instructor Program</strong>
                    </h4>

                    <form name="instructor-program-form" id="instructor-program-form"
                        action="instructors/learn-more" method="post">

                       <!-- honeypot -->
                       <input type="hidden" name="honeypot" id="honeypot">

                        <div class="form-group has-feedback">
                            <label for="email" class="control-label">
                              Email
                            </label>
                            <input type="email" class="form-control" name="email"
                                id="email" placeholder="user@example.com">
                            <span class="glyphicon form-control-feedback" id="email1"></span>
                        </div>

                        <div class="form-group has-feedback">
                            <label for="first_name" class="control-label">
                              First name
                            </label>
                            <input type="text" class="form-control" name="first_name"
                                id="first_name" placeholder="First name">
                            <span class="glyphicon form-control-feedback" id="first_name1"></span>
                        </div>

                        <div class="form-group has-feedback">
                            <label for="last_name" class="control-label">
                              Last name
                            </label>
                            <input type="text" class="form-control" name="last_name"
                                id="last_name" placeholder="Last name">
                            <span class="glyphicon form-control-feedback" id="last_name1"></span>
                        </div>

                        <div class="form-group has-feedback">
                            <label for="state">
                                State
                            </label>
                            <select class="form-control required" id="state" name="state">
                                <option value="">Select</option>
                                {% for state in states %}
                                    <option value="{{ state.name}}">{{ state.name }}</option>
                                {% endfor %}
                                <span class="glyphicon form-control-feedback" id="state1"></span>
                            </select>
                        </div>

                        <div class="form-group has-feedback">
                            <label for="experience">
                                Certified instructor experience
                            </label>
                            <select class="form-control required" id="experience" name="experience">
                                <option value="">Select</option>
                                {% for year in years %}
                                    <option value="{{ year }}">{{ year }}</option>
                                {% endfor %}
                                <span class="glyphicon form-control-feedback" id="experience1"></span>
                            </select>
                        </div>

                        <div class="form-group has-feedback">
                          <button id="registerBtn" type="submit" class="btn btn-lg btn-buy btn-block">
                              Submit
                          </button>
                        </div>

                    </form>

                </div><!--  // .panel-body  -->
            </div><!--  // .panel  -->
        </div>

        <div class="col-md-5">
            <div id="instructors-ad-copy">
                <h3 style="margin-top:0px;">
                    ArmaLaser and ArmaLaser Weapontronics™ is proud to announce the
                    launch of its <strong>Certified Firearm Instructor Program</strong>.
                </h3>
                <h3>
                    <strong>Certified Firearm Instructor Program</strong> is a unique
                    partnership between ArmaLaser and the best Certified Firearm
                    Instructors around the country.
                </h3>
                <h3>
                    Once accepted, the instructors can <strong>earn commissions</strong>
                    direct from ArmaLaser through participation.
                </h3>
                <h3>
                    ArmaLaser's <strong>Certified Firearm Instructor Program</strong> provides
                    benefits for instructors and their students. You and your students
                    will be eligible to receive a 10% discount off regular retail
                    pricing by using an assigned coupon during checkout.
                </h3>
                <h3>
                    ArmaLaser appreciates your interest in ArmaLaser Laser Sights, the most
                    technologically advanced in the industry.
                </h3>
                <h3>
                    To learn more about this exciting new program, <strong>send us
                    your contact information today! Act now!</strong>
                </h3>
            </div>
        </div>
    </div>
</div>
{% endblock %}


{% block bottomjs %}

<script>
$(document).ready(function(){

    //$("#registrationform").validate();


    $("#instructor-program-form").validate({
        rules: {
            email: {
                required: true,
                email: true
            },
            first_name: {
                minlength: 2,
                maxlength: 20,
                required: true
            },
            last_name: {
                minlength: 2,
                maxlength: 30,
                required: true
            },
            state: {
                required: true
            },
            state: {
                required: true
            }
        },
        messages: {
            email: {
                required: "Please enter your email address",
                email: "Please enter a valid email address"
            },
            first_name: {
                minlength: "Please enter at least 2 characters",
                maxlength: "Please enter less than 20 characters",
                required: "Please enter your first name"
            },
            last_name: {
              minlength: "Please enter at least 2 characters",
              maxlength: "Please enter less than 30 characters",
              required: "Please enter your last name"
            },
            state: {
                required: "Please select a state"
            },
            experience: {
                required: "Please select an experience level"
            }
        },
        highlight: function(element) {
            var id_attr = "#" + $( element ).attr("id") + "1";
            $(element).closest('.form-group has-feedback').removeClass('has-success').addClass('has-error');
            $(id_attr).removeClass('glyphicon-ok').addClass('glyphicon-remove');
        },
        unhighlight: function(element) {
            var id_attr = "#" + $( element ).attr("id") + "1";
            $(element).closest('.form-group has-feedback').removeClass('has-error').addClass('has-success');
            $(id_attr).removeClass('glyphicon-remove').addClass('glyphicon-ok');
        },
        errorElement: 'span',
            errorClass: 'help-block',
            errorPlacement: function(error, element) {
                if(element.length) {
                    error.insertAfter(element);
                } else {
                error.insertAfter(element);
                }
            }
     });


  /* - - - - Check if email in db  - - - -  */

    $("#register-email").blur(function(){
        var email = $( this ).val();
        console.log("email = " + email);

        $.ajax({
            url: "/register/checkIfEmailAvailable",
            type: 'POST',
            data: {
              email: email
            },
            cache: false,
            success: function(data){
                var available = '<div class="alert alert-success alert-padding">';
                available += 'Email address is available!';
                available += '</div>';

                var not_available = '<div class="alert alert-danger alert-padding">';
                not_available += 'Sorry, email address entered is not available.';
                not_available += '</div>';

                if( data === 'available' ){
                    $("#message").html(available);
                }
                else {
                    $("#message").html(not_available);
                }
            },
            error: function(){
                alert("An error occurred.");
            }
        });
    });

});
</script>
{% endblock %}