{{ header }}
<!-- BREADCRUMB AREA START -->
<!-- <div class="ltn__breadcrumb-area ltn__breadcrumb-area-2
        ltn__breadcrumb-color-white bg-overlay-theme-black-90 bg-image" data-bg="{{ base }}catalog/view/theme/vb/img/banner/B1.png">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="ltn__breadcrumb-inner ltn__breadcrumb-inner-2 justify-content-between">
                    <div class="section-title-area ltn__section-title-2">
                        <h6 class="section-subtitle ltn__secondary-color">// Welcome to V Believers</h6>
                        <h1 class="section-title white-color">Register</h1>
                        <div class="ltn__breadcrumb-list">
                            <ul>
                                <li><a href="{{base}}">Home</a></li>
                                <li>Register</li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div> -->
<!-- BREADCRUMB AREA END -->
<div class="ltn__login-area pb-65" style="margin-top: 80px;">
    <div class="container">
        <div class="row" style="background-color: #FFFAF7;">
            {% if error_warning %}
              <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}</div>
            {% endif %}
            <div id="content" class="col-sm-12 fluid-sidebar">
                <div class="row">
                    <div class="col-sm-12 pho bord px-lg-5 px-md-2" style="border:2px solid #E4B7A0; border-radius: 10px;">
                        <div class="section-title-area text-center">
                            <h1 class="section-title" style="color: #C15B27 ;margin-top: 30px;font-size: 36px;font-weight: 100;">Create New Account</h1>
                        </div>
                        <div class="well col-sm-12">
                            <form action="{{ action }}" method="post" enctype="multipart/form-data">
                                <input type="hidden" name="customer_group_id" value="1">
                                <div id="account">
                                    <div class="form-group row">
                                        <div class="col-lg-2 col-md-2 col-12">
                                            <label style="color: #C38370;">Sponser Id*</label>
                                            <input type="text" style="border:1px solid #E4B7A0 !important;" name="sponsor" value="{{ sponsor }}" placeholder="{{ entry_sponsor }}" id="input-sponsor" class="form-control" />
                                              {% if error_sponsor %}
                                                <div class="text-danger" >{{ error_sponsor }}</div>
                                              {% endif %}
                                              <span  id="error-sponsor"></span>
                                        </div>
                                        <div class="col-lg-5 col-md-5 col-12">
                                            <label style="color: #C38370;">First Name*</label>
                                            <input type="text" name="firstname" value="{{ firstname }}"  style="border:1px solid #E4B7A0 !important;" placeholder="Enter your first name...." id="input-firstname" class="form-control" />
                                            {% if error_firstname %}
                                                <div class="text-danger">{{ error_firstname }}</div>
                                            {% endif %}
                                        </div>
                                        <div class="col-lg-5 col-md-5 col-12">
                                            <label style="color: #C38370;">Last Name*</label>
                                            <input type="text" name="lastname" value="{{ lastname }}"  style="border:1px solid #E4B7A0 !important;" placeholder="Enter your last name...." id="input-lastname" class="form-control" />
                                            {% if error_lastname %}
                                                <div class="text-danger">{{ error_lastname }}</div>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-12" style="color: #C38370;">Mobile No*</label>
                                        <div class="col-lg-2 col-md-2 col-3 ">
                                            <input style="border:1px solid #E4B7A0 !important;" type="tel" name="telephone" value="{{ telephone }}" placeholder="{{ entry_telephone }}" id="input-telephone" class="form-control" />
                                            {% if error_telephone %}
                                                <div class="text-danger">{{ error_telephone }}</div>
                                            {% endif %}
                                        </div>
                                        <div class="col-lg-5 col-md-5 col-9">
                                            <input  type="date" name="DOB" value="" placeholder="{{ entry_DOB }}" id="input-DOB" class="form-control" style="border:1px solid #E4B7A0 !important;  " />
                                            {% if error_DOB %}
                                                <div class="text-danger">{{ error_DOB }}</div>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-lg-7 col-md-7 col-12 ">
                                            <label style="color: #C38370;">E-mail Id:*</label>
                                            <input type="email" name="email" value="{{ email }}"  style="border:1px solid #E4B7A0 !important;" placeholder="{{ entry_email }}" id="input-email" class="form-control" />
                                            {% if error_email %}
                                                <div class="text-danger">{{ error_email }}</div>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="form-group row" id="aadhar-section">
                                        <div class="col-lg-7 col-md-7 col-12">
                                            <label style="color: #C38370;">Aadhar No:*</label>
                                            <input type="tel" name="aadhar" value="{{ aadhar }}" style="border:1px solid #E4B7A0 !important;" placeholder="Aadhar No" id="input-aadhar" class="form-control" />
                                            {% if error_aadhar %}
                                                <div class="text-danger">{{ error_aadhar }}</div>
                                            {% endif %}
                                        </div>
                                    </div>

                                    {% for custom_field in custom_fields %}
                                        <div class="form-group row custom-field" id="custom-field{{ custom_field.custom_field_id }}" data-sort="{{ custom_field.sort_order }}">
                                            <label for="input-custom-field{{ custom_field.custom_field_id }}" class="col-sm-2 col-form-label">{{ custom_field.name }}</label>
                                            <div class="col-sm-10">
                                                {% if custom_field.type == 'select' %}
                                                    <select name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" id="input-custom-field{{ custom_field.custom_field_id }}" class="form-control">
                                                        <option value="">{{ text_select }}</option>
                                                        {% for custom_field_value in custom_field.custom_field_value %}
                                                          <option value="{{ custom_field_value.custom_field_value_id }}" {% if register_custom_field[custom_field.custom_field_id] == custom_field_value.custom_field_value_id %}selected{% endif %}>{{ custom_field_value.name }}</option>
                                                        {% endfor %}
                                                      </select>
                                                    
                                                {% elseif custom_field.type == 'radio' %}
                                                    {% for custom_field_value in custom_field.custom_field_value %}
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{{ custom_field_value.custom_field_value_id }}" id="radio-{{ custom_field.custom_field_value_id }}" {% if register_custom_field[custom_field.custom_field_id] == custom_field_value.custom_field_value_id %}checked{% endif %}>
                                                            <label class="form-check-label" for="radio-{{ custom_field.custom_field_value_id }}">{{ custom_field_value.name }}</label>
                                                        </div>
                                                      {% endfor %}
                                                    
                                                {% elseif custom_field.type == 'checkbox' %}
                                                    {% for custom_field_value in custom_field.custom_field_value %}
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}][]" value="{{ custom_field_value.custom_field_value_id }}" id="checkbox-{{ custom_field.custom_field_value_id }}" {% if custom_field_value.custom_field_value_id in register_custom_field[custom_field.custom_field_id] %}checked{% endif %}>
                                                            <label class="form-check-label" for="checkbox-{{ custom_field.custom_field_value_id }}">{{ custom_field_value.name }}</label>
                                                      </div>
                                                    {% endfor %}
                                                
                                                {% elseif custom_field.type == 'text' %}
                                                    <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" id="input-custom-field{{ custom_field.custom_field_id }}" class="form-control" placeholder="{{ custom_field.name }}" value="{{ register_custom_field[custom_field.custom_field_id] ?? custom_field.value }}">
                                                
                                                {% elseif custom_field.type == 'textarea' %}
                                                    <textarea name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" id="input-custom-field{{ custom_field.custom_field_id }}" rows="5" class="form-control" placeholder="{{ custom_field.name }}">{{ register_custom_field[custom_field.custom_field_id] ?? custom_field.value }}</textarea>
                                                
                                                {% elseif custom_field.type == 'file' %}
                                                    <button type="button" id="button-custom-field{{ custom_field.custom_field_id }}" data-loading-text="{{ text_loading }}" class="btn btn-default">
                                                        <i class="fa fa-upload"></i> {{ button_upload }}
                                                    </button>
                                                    <input type="hidden" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{{ register_custom_field[custom_field.custom_field_id] ?? '' }}">
                                                
                                                {% elseif custom_field.type == 'date' %}
                                                    <div class="input-group">
                                                        <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{{ register_custom_field[custom_field.custom_field_id] ?? custom_field.value }}" class="form-control datepicker" placeholder="{{ custom_field.name }}">
                                                        <div class="input-group-append">
                                                            <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                                                        </div>
                                                  </div>

                                                {% elseif custom_field.type == 'time' %}
                                                    <div class="input-group">
                                                        <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{{ register_custom_field[custom_field.custom_field_id] ?? custom_field.value }}" class="form-control timepicker" placeholder="{{ custom_field.name }}">
                                                        <div class="input-group-append">
                                                            <span class="input-group-text"><i class="fa fa-clock"></i></span>
                                                        </div>
                                                    </div>

                                                {% elseif custom_field.type == 'datetime' %}
                                                    <div class="input-group">
                                                        <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{{ register_custom_field[custom_field.custom_field_id] ?? custom_field.value }}" class="form-control datetimepicker" placeholder="{{ custom_field.name }}">
                                                        <div class="input-group-append">
                                                            <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                                                        </div>
                                                    </div>
                                                {% endif %}

                                                {% if error_custom_field[custom_field.custom_field_id] %}
                                                    <div class="text-danger mt-1">{{ error_custom_field[custom_field.custom_field_id] }}</div>
                                                {% endif %}
                                            </div>
                                        </div>
                                    {% endfor %}
                                  
                                    <div class="form-group row">
                                        <div class="col-lg-4 col-md-4 col-12">
                                            <label style="color: #C38370;">Password:*</label>
                                            <input type="password" name="password" value="{{ password }}"  style="border:1px solid #E4B7A0 !important;" placeholder="" id="input-password" class="form-control" />
                                            {% if error_password %}
                                              <div class="text-danger">{{ error_password }}</div>
                                            {% endif %}
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-12">
                                            <label style="color: #C38370;">confirm Password:*</label>
                                              <input type="password" name="confirm" value="{{ confirm }}"  style="border:1px solid #E4B7A0 !important;" placeholder="" id="input-confirm" class="form-control" />
                                              {% if error_confirm %}
                                                <div class="text-danger">{{ error_confirm }}</div>
                                              {% endif %}
                                        </div>
                                    </div>
                                    <div class="form-group row" data-sort="900">
                                        <div class="col-lg-7 col-md-7 col-12 ">
                                            <input id="agree" class="form-check-input  mt-2" type="checkbox" name="agree" value="1" style="border:1px solid #E4B7A0 !important; accent-color:#C15B27;"/>
                                            <label class="form-check-label " style="color: #C38370;" for="agree">
                                                {{ text_agree }}
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group row"  data-sort="1000">
                                        <div class="col-3">
                                            <div class="btn-wrapper">
                                                <input style="width: auto;padding: 3px 20px;font-size: 16px;font-weight: normal;background: #fa7818;border-radius: 5px;box-shadow: 0px 0px 5px #afafafa6;" type="submit" value="Register" class="theme-btn-1 btn" />
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                <div class="form-group row"  data-sort="1100">
                                    <div class="col-3">
                                    <label style="color: #C38370;">Already Have n Account</label>
                                        <div class="btn-wrapper mt-0" >
                                            <!-- <input style="background-color: #E4B7A0;" type="submit" value="Login" class="theme-btn-1 btn" /> -->
                                            <!-- <input style="width: auto;padding: 0 26px;height: 40px;font-weight: normal;background: #C15B27;border-radius: 5px;" type="submit" value="{{ button_login }}" class="theme-btn-1 btn m-0" /> -->
                                            <a style="width: auto;padding: 4px 24px;color: #fff;font-size: 18px;font-weight: normal;background: #C15B27;border-radius: 5px;" class="theme-btn-1 btn m-0" href="index.php?route=account/login">Login</a>
                                        </div>
                                    </div>
                                </div>
                             <!--    <div class="btn-wrapper mt-3 mb-50" >
                                        <p class="m-0" style="color: #5b8345; font-size: 18px;">Login With</p>
                                        <a style="width: auto;padding: 3px 32px;font-size: 18px;font-weight: normal;background: #d8331c;border-radius: 5px;box-shadow: 0px 0px 5px #afafafa6;" href="#" class="theme-btn-1 btn" >Google</a>
                                        <a style="width: auto;padding: 3px 20px;font-size: 18px;font-weight: normal;background: #1f448c;border-radius: 5px;box-shadow: 0px 0px 5px #afafafa6;" href="#" class="theme-btn-1 btn ml-3" >Facebook</a>
                                </div> -->
                                 <!--  <div class="form-group">
                                      <input type="tel" name="telephone" value="{{ telephone }}" placeholder="{{ entry_telephone }}" id="input-telephone" class="form-control" />
                                      {% if error_telephone %}
                                        <div class="text-danger">{{ error_telephone }}</div>
                                      {% endif %}
                                  </div>
                                  <div class="form-group">
                                      <input type="tel" name="aadhar" value="{{ aadhar }}" placeholder="Aadhar No" id="input-aadhar" class="form-control" />
                                      {% if error_aadhar %}
                                        <div class="text-danger">{{ error_aadhar }}</div>
                                      {% endif %}
                                  </div> -->
                                </div>
                               <!--  <h2><u>Your Password</u></h2>
                                
                                <h2><u>Newslatter</u></h2>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Subscribe</label>
                                    <div class="col-sm-10">          
                                        <label class="radio-inline mr-20">
                                            <input type="radio" name="newsletter" value="1">
                                            Yes
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" name="newsletter" value="0" checked="checked">
                                            No
                                        </label>
                                    </div>
                                </div>
                                <div class="form-check">
                                  <input class="form-check-input  mt-2" type="checkbox" name="agree" value="1" />
                                  <label class="form-check-label ">
                                    {{ text_agree }}
                                  </label>
                                </div>
                                <div class="btn-wrapper">
                                    <input type="submit" value="{{ button_continue }}" class="theme-btn-1 btn" />
                                </div> -->
                            
                        </div>
                    </div>
                </div>
            </div>
            <!-- <aside class="col-md-3 col-sm-12 col-xs-12 pho">
                <div class="list-group">
                    <a href="{{ login_link }}" class="list-group-item">Login</a> 
                    <a href="{{ forgotten }}" class="list-group-item">Forgotten
                        Password</a>
                    <a href="{{ login_link }}" class="list-group-item"> Dashboard </a>
                    <div class=" list-group-item dropdown">
                      <span>Challanges</span>
                      <div class="dropdown-content">
                          <a class="list-group-item" href="{{ login_link }}">Challanges Details</a>
                          <a class="list-group-item" href="{{ login_link }}">Challanges Orders</a>
                      </div>
                    </div>
                </div>
            </aside> -->
        </div>
    </div>
</div>
<script type="text/javascript"><!--
// Sort the custom fields
$('#account .form-group[data-sort]').detach().each(function() {
    if ($(this).attr('data-sort') >= 0 && $(this).attr('data-sort') <= $('#account .form-group').length) {
        $('#account .form-group').eq($(this).attr('data-sort')).before(this);
    }

    if ($(this).attr('data-sort') > $('#account .form-group').length) {
        $('#account .form-group:last').after(this);
    }

    if ($(this).attr('data-sort') == $('#account .form-group').length) {
        $('#account .form-group:last').after(this);
    }

    if ($(this).attr('data-sort') < -$('#account .form-group').length) {
        $('#account .form-group:first').before(this);
    }
});


$('input[name=\'sponsor\']').on('change', function() {
    $.ajax({
        url: 'index.php?route=account/register/checkexits',
        dataType: 'json',
        type: 'post',
        data: 'sponsor=' + encodeURIComponent($('input[name=\'sponsor\']').val()),
        success: function(json) {
            $('.alert-dismissible').remove();
           
            if (json['error']) {
                //$('#error-sponsor').html('abdc');
           $('#error-sponsor').prepend('<div  class="text-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + ' </div>');
        }

        if (json['success']) {
          $('#error-sponsor').prepend('<div  class="text-success alert-dismissible"><i class="fa fa-check-circle"></i> ' + json['success'] + ' </div>');

          //$('#rank').load('index.php?route=customer/customer/rank&user_token={{ user_token }}&customer_id={{ customer_id }}');
          
        }
        },
        error: function(xhr, ajaxOptions, thrownError) {
            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
});

var sponsor = $('input[name=\'sponsor\']').val();
if(sponsor!=''){
    $.ajax({
        url: 'index.php?route=account/register/checkexits',
        dataType: 'json',
        type: 'post',
        data: 'sponsor=' + encodeURIComponent($('input[name=\'sponsor\']').val()),
        success: function(json) {
            $('.alert-dismissible').remove();
           
            if (json['error']) {
                //$('#error-sponsor').html('abdc');
           $('#error-sponsor').prepend('<div  class="text-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + ' </div>');
        }

        if (json['success']) {
          $('#error-sponsor').prepend('<div  class="text-success alert-dismissible"><i class="fa fa-check-circle"></i> ' + json['success'] + ' </div>');

          //$('#rank').load('index.php?route=customer/customer/rank&user_token={{ user_token }}&customer_id={{ customer_id }}');
          
        }
        },
        error: function(xhr, ajaxOptions, thrownError) {
            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
}
//--></script> 
<script type="text/javascript"><!--
/*$('.date').datetimepicker({
    language: '{{ datepicker }}',
    pickTime: false
});

$('.time').datetimepicker({
    language: '{{ datepicker }}',
    pickDate: false
});

$('.datetime').datetimepicker({
    language: '{{ datepicker }}',
    pickDate: true,
    pickTime: true
});*/
//--></script> 
{{ footer }}