{% extends 'templates/callluge/site_layout.html' %} {% block content %}

<div class="widget-box">
    <!-- <div class="col-md-12 col-sm-12">
        <div class="widget-title">
       <h2>{{request.session.name}}</h2>
       </div>
    </div> -->
    <div id="div_msg" style="color: red; padding: 15px;"></div>
    <div class="widget-content">
        <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <form class="inner-form" method="POST" id="addagency" action="/userauth/editagency/{{agency_id}}/" data-toggle="validator">
                        {% csrf_token %}
                        <div class="row">
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <div class="input-group no-padding">
                                        <label for="agency_name">Name*</span></label>

                                        <input tabindex="1" maxlength="60" class="form-input" type="text" placeholder="Agency Name" name="name" value="{{agency_client.name}}"  id="agency_name" data-error="Please enter Agency Name." required>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <div class="input-group no-padding">
                                        <label for="">Company Name*</span></label>             
                                        <input tabindex="2" maxlength="100" class="form-input" type="text" name="company_name" id="company_name" value="{{agency_client.company_name}}" placeholder="Company Name" data-error="Please enter Company Name." required>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <div class="input-group no-padding">
                                        <label tabindex="3" for="phone_num">Phone Number*</span></label>
                                        <input class="form-input" tabindex="3" type="text" pattern="^(\(?\+?[0-9]*\)?)?[0-9_\- \(\)]*$" name="phone_num" id="phone_num" value="{{agency_client.phone}}" placeholder="Agency Phone Number" data-error="Please enter Phone Number." maxlength="15" required>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <div class="input-group no-padding">
                                        <label for="ag_email">Email Address*</span></label>
                                        <input tabindex="4" class="form-input" type="text" pattern="^\w+[\w-\.]*\@\w+((-\w+)|(\w*))\.[a-z]{2,3}$" name="company_email" maxlength="120" id="ag_email" value="{{agency_client.email}}" placeholder="Agency Email Address" data-error="Please enter Agency Email Address." required>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                            </div>            
                        </div>

                        <div class="row">
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <div class="input-group no-padding">
                                        <label for="site_url">Site URL*</span></label>
                                        <input tabindex="5" maxlength="150" class="form-input" type="url" name="company_url" id="site_url" value="{{agency_client.url}}" placeholder="http(s)://www.domain.com/..." data-error="Please enter Site URL." required>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <div class="input-group no-padding">
                                        <label for="">Address*</label>
                                        <textarea tabindex="6" class="form-text" rows="2"  id="address" name="address" placeholder="Agency Address" data-error="Please enter Agency Address." required>{{agency_client.address}}</textarea>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <div class="input-group no-padding">
                                        <label for="ag_pwd">Password</span></label>
                                        <input tabindex="7" maxlength="50" class="form-input" type="password" name="pwd" id="ag_pwd" value="" placeholder="Agency Password" data-error="Please enter Password.">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <div class="input-group no-padding">
                                        <label for="ag_confpwd">Confirm password</span></label>
                                        <input tabindex="8" maxlength="50" class="form-input" type="password" name="confpwd" id="ag_confpwd" data-match="#ag_pwd" value="" placeholder="Confirm Password" data-error="Your Password and Confirmation Password do not match.">
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                            </div> 
                        </div>
                        <div class="row">    
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <div class="input-group no-padding">
                                        <label for="profile_status">Status</label>
                                        <div class="sign-radio">

                                            <div class="custom-checkbox">

                                                <input tabindex="9" type="radio" name="profile_status" id="profile_status1" value="1" 
                                               {% if agency_client.status == 1 %}
checked="checked"
                                        {% endif %}  />
                                                <label for="profile_status1">Active</label>
                                            </div>
                                            <div class="custom-checkbox">
                                                <input tabindex="10" type="radio" name="profile_status" id="profile_status2" value="0"
                                                  {% if agency_client.status == 0 %}
checked="checked"
                                        {% endif %} />
                                                <label for="profile_status2">Inactive</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group no-margin">
                                    <div class="input-group no-padding">
                                        <label for="">&nbsp;</label>
                                        <div class="btn-wrap">
                                            <!-- <input type="submit" value="Submit" name="submit" id="submit" class="button hvr-sweep-to-right ripple"> -->
                                            <button tabindex="11" type="submit" name="submit" id="submit" class="hvr-sweep-to-right button ripple primary">Submit</button>
                                            <!-- <button tabindex="12" type="button" class="hvr-sweep-to-right button cancel-light ripple"></button> -->
                                            <a href="/userauth/"  class="hvr-sweep-to-right button cancel-light ripple">Cancel</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        </div>                        

                        <div class="g-signin2" data-onsuccess="onSignIn"></div>

                    </form>
                </div>
        </div>
    </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function() {

    // setTimeout(function(){
    //  $('#div_msg').html('Submitted Successfully.'); 
    // }, 8000);

    $('#ag_confpwd').attr('disabled', true);

    $('#ag_pwd').on('change',function() {
        if($(this).val() != '' || $(this).val() != undefined || $(this).val() != null){
            $('#ag_confpwd').removeAttr('disabled');
           $('#ag_confpwd').attr('required',true); 
        }
        else{
            $('#ag_confpwd').attr('required',false);
            $('#ag_confpwd').removeAttr('required');
            // $('#ag_confpwd').attr('data-validate', false);
        }        
    });

    $("#form1").submit(function() {
        //return false;   
        var first_name = $("#user_name").val()
        var email = $("#email").val()
        if (first_name == '') {
            $("#user_name_err").html('Name Cannot be Null!')
            var first_name_null = 1
                //return false
        }
        if (email == '') {
            $("#email_err").html('Email Cannot be Null!')
            var email_null = 1
                //return false    
        } else {
            var status = validateForm();
            if (status == false) {
                $("#email_err").html('Not a Valid Email Address!')
                return false;
            }
        }

        if (first_name_null == 1 || email_null == 1) {
            return false
        }
    });
});

function validateURL() {
    var url = $("#profile_url").val();
    var regex = new RegExp("^(http[s]?:\\/\\/(www\\.)?|ftp:\\/\\/(www\\.)?|www\\.){1}([0-9A-Za-z-\\.@:%_\+~#=]+)+((\\.[a-zA-Z]{2,3})+)(/(.)*)?(\\?(.)*)?");
    var without_regex = new RegExp("^([0-9A-Za-z-\\.@:%_\+~#=]+)+((\\.[a-zA-Z]{2,3})+)(/(.)*)?(\\?(.)*)?");
    if (regex.test(url) || without_regex.test(url)) {
        $.ajax({
            type: "POST",
            url: "/userauth/check-profile/",
            data: {
                'url': url,
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success: function(data) {
                if (data.status == 'fail') {
                    $("#profile_url").val('');
                    $('#div_msg').html('This url is already registered.'); 
                    // alert('This url is already registered.');
                }
            }
        });
    } else {
        $("#profile_url").val('');
        alert('Invalid Url');
    }
}
</script>
<script>
$( document ).ready(function() {
    $("#adcl-dd1").select2({});
    $("#industry").select2({});
    $("#profile_type").select2({});        
});
</script>
{% endblock%}
</html>