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

{% block content %}
<!-- <script src="https://apis.google.com/js/platform.js" async defer></script> -->
{% load static %}
<script src="{% static '/country_state.js' %}"></script>
<div class="widget-box no-minht">
   <!--  <div class="col-md-12 col-sm-12">
        <div class="widget-title">
            <div class="hor-menu"></div>
        </div>
    </div> -->
    <div class="widget-content no-padding add-sear-pos-slide">
      
        <div class="col-md-12 col-sm-12">
            <div class="btn-wrap" style="display: inline-block;">
                <div class="add-new slide-toggle-icon">
                    <a href="javascript:void(0);" class="button ripple hvr-sweep-to-right"><i class="icon icon-plus"></i>Add User</a>
                </div>
            </div>            
            {% if messages %}
                {% for message in messages %}
                    {% if message.tags == 'success' %}
                        <div class="msg_div {{ message.tags }}"><i class="glyphicon glyphicon-ok-sign"></i>{{ message }}</div>
                    {% elif message.tags == 'error' %}
                        <div class="msg_div {{ message.tags }}"><i class="glyphicon glyphicon-exclamation-sign"></i>{{ message }}</div>
                    {% endif %}
                {% endfor %}
            {% endif %}
        </div>

        <div class="col-md-12 col-sm-12">
            <div class="add-grp-cont" style="display: none;">
                <div class="up-arr"></div>
                <form class="inner-form" method="POST" action="/userauth/save-user/" id="adduser" data-toggle="validator" role="form">
                {% csrf_token %}
                <input type="hidden" id="hid_stat" name="hid_stat" value="{{userdetails.id}}" />
                <!-- <div class="add-user-frm"> -->
                    <!-- ===== test form elements === -->
                    <div class="row">
                        <!-- Name -->
                        <div class="col-md-6 col-sm-6">
                            <div class="form-group">
                                <div class="input-group no-padding">
                                    <label for="">Name*</label>
                                    <input class="form-input" type="text" name="user_name" id="user_name" required="required" tabindex="1"  maxlength="60" value="{{userdetails.name}}" placeholder="Name" data-error="Please enter Name.">
                                    <div class="help-block with-errors"></div>
                                </div>
                            </div>
                        </div>
                        <!-- Email -->
                        <div class="col-md-6 col-sm-6">
                            <div class="form-group">
                                <div class="input-group no-padding">
                                    <label for="">Email Address*</label>
                                    <input tabindex="2" maxlength="120" class="form-input" type="email" name="user_email" id="user_email" required="required" value="{{userdetails.email}}" placeholder="Email Address" data-error="Please enter Email.">
                                    <div class="help-block with-errors"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <!-- Phone -->
                        <div class="col-md-6 col-sm-6">
                            <div class="form-group">
                                <div class="input-group no-padding">
                                    <label for="">Phone*</label>
                                    <input class="form-input" type="text" pattern="^(\(?\+?[0-9]*\)?)?[0-9_\- \(\)]*$" name="user_phone" id="user_phone" required="required" tabindex="3" maxlength="15" value="{{userdetails.phone_no}}" placeholder="Phone Number" data-error="Please enter Phone Number.">
                                    <div class="help-block with-errors"></div>
                                </div>
                            </div>
                        </div>
                        <!-- Street -->
                        <div class="col-md-6 col-sm-6">
                            <div class="form-group">
                                <div class="input-group no-padding">
                                    <label for="">Street*</label>
                                    <input tabindex="4" maxlength="60" class="form-input" type="text" name="user_street" id="user_street" required="required" value="{{userdetails.street}}" placeholder="Street" data-error="Please enter Street.">
                                    <div class="help-block with-errors"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <!-- City -->
                        <div class="col-md-6 col-sm-6">
                            <div class="form-group">
                                <div class="input-group no-padding">
                                    <label for="">City*</label>
                                    <input tabindex="5" maxlength="30" class="form-input" type="text" name="user_city" id="user_city" required="required" value="{{userdetails.city}}" placeholder="City" data-error="Please enter City.">
                                    <div class="help-block with-errors"></div>
                                </div>
                            </div>
                        </div>
                        <!-- Country(dp) -->
                        <div class="col-md-6 col-sm-6">
                            <div class="form-group">
                                <div class="input-group no-padding">
                                    <label for="user_country">Country*</label>
                                    <div class="dropdown-all">
                                        <select tabindex="6" class="select2-hidden-accessible" aria-hidden="true" id="user_country" name="user_country" data-error="Please enter Country." required>
                                            <option selected="selected" value="">Select One</option>
                                            <option value="1">Group1</option>
                                            <option value="2">Group2</option>
                                        </select>
                                    </div>
                                    <div class="help-block with-errors"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <!-- State(dp) -->
                        <div class="col-md-6 col-sm-6">
                            <div class="form-group">
                                <div class="input-group no-padding">
                                    <label for="">State*</label>
                                    <div class="dropdown-all">
                                        <select title="" tabindex="7" class="select2-hidden-accessible" aria-hidden="true" name="user_state" id="user_state" data-error="Please enter State." required>
                                            <option selected="selected" value="">Select One</option>
                                            <option value="1">Group1</option>
                                            <option value="2">Group2</option>
                                        </select>
                                    </div>
                                    <div class="help-block with-errors"></div>
                                </div>
                            </div>
                        </div>
                        <!-- Postal Code -->
                        <div class="col-md-6 col-sm-6">
                            <div class="form-group">
                                <div class="input-group no-padding">
                                    <label for="">Postal Code*</label>
                                    <input tabindex="8" maxlength="9" class="form-input" type="text" name="user_postalcode" id="user_postalcode" pattern="[A-Za-z0-9 ].{4,8}" required="required" value="{{userdetails.postal_code}}" title="Min 5 and maximum 9 letter postal code" placeholder="Postal Code" data-error="Please enter a valid Postal Code.">
                                    <div class="help-block with-errors"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                     <input type="hidden" name="user_status" value="1"/>
                    <div class="row">
                        <!-- <div class="col-md-6 col-sm-6">
                            <div class="form-group">
                                <div class="input-group no-padding">
                                    <label for="">User Status</label>
                                    <div class="sign-radio">   
                                      {% if userdetails.status == 1 %}
                                                                                
                                      <div class="custom-checkbox">
                                          <input type="radio" tabindex="9" name="user_status" id="user_status1" value="1" checked="checked" />
                                          <label for="user_status1">Active</label>
                                      </div>
                                      <div class="custom-checkbox">
                                          <input type="radio" tabindex="10" name="user_status" id="user_status2" value="2" />
                                          <label for="user_status2">Inactive</label>
                                      </div>
                                      {% elif userdetails.status == 0 %}
                                     
                                      <div class="custom-checkbox">
                                          <input type="radio" tabindex="9" name="user_status" id="user_status3" value="1" />
                                          <label for="user_status3">Active</label>
                                      </div>
                                      <div class="custom-checkbox">
                                          <input type="radio" tabindex="10" name="user_status" id="user_status4" value="2" checked="checked" />
                                          <label for="user_status4">Inactive</label>
                                      </div>
                                      {% else %}
                                      
                                      <div class="custom-checkbox">
                                          <input type="radio" tabindex="9" name="user_status" id="user_status5" value="1" checked="checked" />
                                          <label for="user_status5">Active</label>
                                      </div>
                                      <div class="custom-checkbox">
                                          <input type="radio" tabindex="10" name="user_status" id="user_status6" value="2" />
                                          <label for="user_status6">Inactive</label>
                                      </div>
                                      {% endif %}
                                    </div> 
                                </div>
                            </div>
                        </div> -->
                        <div class="col-md-12 col-sm-12">
                            <div class="form-group no-margin">
                                <label for=""></label>
                                <div class="input-group">
                                    <div class="custom-box">
                                        <div class="btn-wrap">
                                            <button name="submit" tabindex="11" id="submit" class="hvr-sweep-to-right button ripple primary">Submit</button>
                                            <a tabindex="12" class="hvr-sweep-to-right button cancel-light ripple">Cancel</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                <!-- </div> -->
            </form>
            </div>
        </div>

        <table id="data-table" class="cl-table" width="100%" cellpadding="0" cellspacing="0">
            <thead> 
                <tr>
                    <th>Name</th>
                    <th>Email Address</th>
                    <th>Phone</th>
                    <th class="no-sort">Address</th>
                    <th class="no-sort">Status</th>
                    <th class="no-sort">Action</th>
                </tr>
            </thead>
          <!--  <tbody>
            {% if userdetails|length > 0%}

        		{% for m in userdetails %}
        			<tr>
        				<td>{{forloop.counter }}</td>
        				<td>{{m.name }}</td>
        				<td>{{m.email}}</td>
        				<td>{{m.phone_no}}</td>						
        				<td>{{m.street}}, {{m.city}}, {{m.state}}, {{m.country}}</td>
        				<td>
        					<!-- <a href="/userauth/edit-user/?id={{m.id}}" class="menuEdit">Edit</a> -->

<!--<div class="action">                          
<a flow="left" tooltip="Edit" href="/userauth/edit-user/?id={{m.id}}"><i class="icon-edit"></i></a>
</div>
</td>
 			</tr>
        		{% endfor %}
        	{% else %}
        		<tr>
        			<td colspan="7" style="text-align: center;">
        				<span style="color: red;">No records found</span>
        			</td>
        		</tr>						
        	{% endif %}  
            </tbody> -->
        </table>
    </div>
</div>

<script type="text/javascript">
/*
$('#data-table').dataTable(); 
    $(".dataTable").on("draw.dt", function (e) {                    
    //console.log("drawing");
    setCustomPagingSigns.call($(this));
}).each(function () {
    setCustomPagingSigns.call($(this)); // initialize
});    */
$(document).ready(function() {

    $('#adduser').validator().on('submit', function (e) {
        if (e.isDefaultPrevented()) {
            // handle the invalid form...
        } else {
            $('.overlay').show();
        }
    });

  $('.cancel-light').click(function(){
    $('.inner-form')[0].reset();
    $('#user_country').val('Canada');
  });
  

    $('#data-table').dataTable({
        "bProcessing": true,
        "bServerSide": true,
        "bPaginate": true,
        //"bLengthChange": true,
        "iDisplayLength": 10,
        "sServerMethod": "POST",
        // "sPaginationType": "full_numbers",
        "sAjaxSource": "/userauth/user-list-data/",
        "fnServerParams": function ( aoData ) {
          aoData.push( { "name": "csrfmiddlewaretoken", "value": "{{ csrf_token }}" } );
        },
        // "aoColumnDefs": [
        //       { "bSortable": false, "aTargets": [ 0, 5 ] }
        //     ],
        "aoColumns": [
              { mData: 'name' } ,
              { mData: 'email' },
              { mData: 'phone_no' },
              { mData: 'Address' },
              { mData: null,
                "mRender": function ( data ) {
                  if(data.status == 1){
                    return '<div class="status-act-ina"><div class="status-act-ina blue"><i class="icon-tick"></i></div></div>';
                  }else{
                    return '<div class="status-act-ina"><div class="status-act-ina grey"><i class="icon-minus"></i></div></div>';
                  }        
                }
              },
              { mData: null,
                "mRender": function ( data ) {
        return '<div class="action"><a tooltip="Edit" flow="left" href="/userauth/edit-user/?id='+data.id+'"><i class="icon-edit"></i></a></div>';
      } }
            ],
            language: { 
                search: "",
                searchPlaceholder: "Search by Name, Email Address",
                "processing": "<img src='../../static_/images/testinggif.gif'/>",
                "zeroRecords": "No records found!",
                "info": "Showing _START_ to _END_ of total _TOTAL_ record(s)",
                "infoEmpty": "No records available!",
                paginate: {
                    next: '&nbsp;', // space or ' '
                    previous: '&nbsp;' // space or ' ' 
                }
            },
            fnDrawCallback: function() {
                var $paginate = this.siblings('.dataTables_paginate');

                if (this.api().context[0]._iRecordsTotal <= this.fnSettings()._iDisplayLength){
                    $paginate.hide();
                }
                else{
                    $paginate.show();
                }
            },
            "order": [[ 0, "asc" ]],
            "columnDefs": [
              {"targets"  : 'no-sort', "orderable": false},
              { "searchable": false, "targets": [4] }
            ]
    });



   // ===================
    $(".add-new").click(function(){
        $(".add-grp-cont").slideToggle('slow');
        $('#user_name').focus();
        $(this).find('i').toggleClass('minus');
    });
    
    $(".cancel-light").click(function(){
        $(".add-grp-cont").slideUp('slow');
        $(".add-new.slide-toggle-icon").find('i').removeClass('minus');
    });
    // =========================

      $("#user_country").select2({});
      $("#user_state").select2({});
      loadmenu();
      populateCountries("user_country", "user_state");
      var user_country = "{{userdetails.country}}"
      if(user_country != ''){
        $('#user_country').val('{{userdetails.country}}');
      }else{
        $('#user_country').val('Canada');
      }
      
      populateStates("user_country", "user_state");
    
      var user_state = "{{userdetails.state}}"
      if(user_state != ''){
        $('#user_state').val('{{userdetails.state}}');
      }
  });

function populateStates(countryElementId, stateElementId) {
    
        var selectedCountryIndex = document.getElementById(countryElementId).selectedIndex;
    
        var stateElement = document.getElementById(stateElementId);
    
        stateElement.length = 0; // Fixed by Julian Woods
        stateElement.options[0] = new Option('Select State', '');
        stateElement.selectedIndex = 0;
    
        var state_arr = s_a[selectedCountryIndex].split("|");
    
        for (var i = 0; i < state_arr.length; i++) {
            stateElement.options[stateElement.length] = new Option(state_arr[i], state_arr[i]);
        }
    }
    
    function populateCountries(countryElementId, stateElementId) {
        // given the id of the <select> tag as function argument, it inserts <option> tags
        var countryElement = document.getElementById(countryElementId);
        countryElement.length = 0;
        countryElement.options[0] = new Option('Select Country', '');
        countryElement.selectedIndex = 0;
        for (var i = 0; i < country_arr.length; i++) {
            countryElement.options[countryElement.length] = new Option(country_arr[i], country_arr[i]);
        }
    
        // Assigned all countries. Now assign event listener for the states.
    
        if (stateElementId) {
            countryElement.onchange = function () {
                populateStates(countryElementId, stateElementId);
            };
        }
    }
</script>

{% endblock %}