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

<script type="text/javascript">
url = window.location.pathname;

CheckPermission();
function CheckPermission() { 
  $.ajax({
    type: "POST",
    url: "/userauth/check-permission/",
    data: {'url':url,'csrfmiddlewaretoken': '{{ csrf_token }}'},

    success: function(data) {
      if(data == 'False'){
        $("#all").html('');
        $("#all").html("<p align='center'>Sorry you are not authorized to go back!!</p>").show();
        return false;
      } 
      else {
        $("#all").show();
      }
    }
  });
}
</script>

<div class="widget-box no-minht">
  <!-- <div class="col-md-12 col-sm-12">
    <div class="widget-title">
 
    </div>
  </div> -->
  <div class="widget-content no-padding add-sear-pos-slide">
    <!-- <div class="col-md-12 col-sm-12">
      <div class="btn-wrap">
          <div class="add-new">
              <a href="/userauth/add-client" class="button ripple hvr-sweep-to-right">Add New Client</a>
          </div>
      </div>
    </div> -->



    <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 New Client</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-client/" id="addclient" data-toggle="validator">
            {% csrf_token %}
            <input type="hidden" id="hid_stat" name="hid_stat" value="{{profiledetails.id}}" />
            
            <div class="row">
                <div class="col-md-6 col-sm-6">
                    <div class="form-group">
                        <div class="input-group no-padding">
                            <label for="">Client Name*</label>
                            <input class="form-input" type="text" maxlength="60" tabindex="1" name="profile_name" id="profile_name" required="required" value="{{profiledetails.name}}" placeholder="Client Name" data-error="Please enter Client Name.">
                            <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="">Client Site URL*</label>                        
                            <input class="form-input" type="url" maxlength="150" tabindex="2" name="profile_url" id="profile_url" required="required" onblur="validateURL()" value="{{profiledetails.url}}" placeholder="Client Site URL" data-error="Please enter a valid URL.">
                            <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="">Email Address*</label>
                            <input class="form-input" type="text" maxlength="120" tabindex="3" pattern="^\w+[\w-\.]*\@\w+((-\w+)|(\w*))\.[a-z]{2,3}$" name="email" id="email" required="required" placeholder="Email Address" data-error="Please enter Client Email Address.">
                            <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="">Office Address*</label>
                            <textarea class="form-text" rows="4" tabindex="4" id="address" name="address" placeholder="Office Address" data-error="Please enter Office Address." required>{{profiledetails.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="">Industry*</label>
                            <div class="dropdown-all">
                                <select name="industry" id="industry" data-error="Please select Industry." tabindex="5" required="">
                                    <option value="">Select Industry</option>
                                    {% for ind in industrylist %} {% if ind.id == profiledetails.industry %}
                                    <option value="{{ind.id}}" selected="selected">{{ind.name}}</option>
                                    {% else %}
                                    <option value="{{ind.id}}">{{ind.name}}</option>
                                    {% endif %}  {% endfor %}
                                </select>
                            </div>
                            <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="">Package*</label>
                            <div class="dropdown-all">
                               <select name="profile_type" id="profile_type" tabindex="6" data-error="Please select Package." required>
                                                <option value="">Select Package</option>
                                                {% for in in Package %}
                                                    {% if in.package_id == profiledetails.package_selected %}
                                                    <option value="{{in.package_id}}" selected="selected">{{in.packagename}}</option>
                                                    {% else %}
                                                    <option value="{{in.package_id}}">{{in.packagename}}</option>
                                                    {% endif %}
                                                {% endfor %}
                                            </select>     
                            </div>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                </div>  
            </div>
            <input type="hidden" name="profile_status" value="1"/>

            <!-- <div class="row"> 
                <div class="col-md-12 col-sm-12">
                    <div class="form-group">
                        <div class="input-group no-padding">
                            <label for="">Client Status</label>
                            
                            <div class="sign-radio">
                                
                                {% if profiledetails.status == 1 %}
                                <div class="custom-checkbox">
                                    <input type="radio" name="profile_status" tabindex="7" id="profile_status1" value="1" checked="checked" />
                                    <label for="profile_status1">Active</label>
                                </div>
                                <div class="custom-checkbox">
                                    <input type="radio" name="profile_status" tabindex="8" id="profile_status2" value="2" />
                                    <label for="profile_status2">Inactive</label>
                                </div>
                        
                                {% elif profiledetails.status == 0 %}
                                <div class="custom-checkbox">
                                    <input type="radio" tabindex="7" name="profile_status" id="profile_status3" value="1" />
                                    <label for="profile_status3">Active</label>
                                </div>
                                <div class="custom-checkbox">
                                    <input type="radio" tabindex="8" name="profile_status" id="profile_status4" value="2" checked="checked" />
                                    <label for="profile_status4">Inactive</label>
                                </div>

                                {% else %}
                                <div class="custom-checkbox">
                                    <input type="radio" tabindex="7" name="profile_status" id="profile_status5" value="1" checked="checked" />
                                    <label for="profile_status5">Active</label>
                                </div>
                                <div class="custom-checkbox">
                                    <input type="radio" tabindex="8" name="profile_status" id="profile_status6" value="2" />
                                    <label for="profile_status6">Inactive</label>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> -->

            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <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 type="submit" name="submit" tabindex="9" id="submit" class="hvr-sweep-to-right button ripple primary">Submit</button>
                                <button type="button" tabindex="10" class="hvr-sweep-to-right button cancel-light ripple">Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

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

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


    <table id="data-table" class="cl-table" width="100%" cellpadding="0" cellspacing="0">
        <thead>
            <th width="15%">Client Name</th>
            <th width="15%">Site Url</th>
            <th width="15%">Industry</th>
            <th width="12%">Package</th>
            <th width="15%" class="no-sort">Address</th>
            <th width="15%" class="no-sort">Status</th>
            <th width="18%" class="no-sort">Actions</th>
        </thead>
        <tbody>
            {% for profile in profiledetails %}
            <tr>
                <td width="15%">{{profile.name}}</td>
                <td width="15%" class="brk">{{profile.url}}</td>
                <td width="15%">{{profile.industry_name}}</td>
                <td width="12%">{{profile.packagename}}</td>
                <td width="15%">{{profile.address}}</td>
                <td width="15%">
                {% if profile.status == 1 %}
                    <div class="status-act-ina">                            
                        <div class="status-act-ina blue">
                            <i class="icon-tick"></i>
                        </div>                        
                    </div>
                {% else %}
                    <div class="status-act-ina">                            
                        <div class="status-act-ina grey">
                            <i class="icon-minus"></i> 
                        </div>                         
                    </div>
                {% endif %}
                </td>
                <td width="18%">
                    <div class="action">
                        <a tooltip="Edit" flow="left" href="/userauth/edit-client/{{profile.id}}"><i class="icon-edit"></i></a>
                        <a tooltip="Login" flow="left" href="/userauth/autologin/{{profile.id}}/"><i class="icon-login"></i></a>
                    </div>
                    <!-- 
                        <a href="/userauth/edit-client/{{profile.id}}">Edit/</a>
                        <a href="/userauth/autologin/{{profile.id}}/" class="menuEdit">Login/</a>
                        <a href="/settings/index/{{profile.id}}/" class="menuEdit">Settings</a> -->
                </td>
            </tr>
            {% endfor %}  
        </tbody>
    </table>
  </div>
</div>


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

// =======================
// add new client button
  $(".add-new").click(function(){
      $(".add-grp-cont").slideToggle('slow');
      $(this).find('i').toggleClass('minus');
  });

  $(".add-grp-cont .cancel-light").click(function(){
      $(".add-grp-cont").slideUp('slow');
      $(".add-new.slide-toggle-icon").find('i').removeClass('minus');
  });
// add new client button ends
// ========================

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

    $("#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
        }
    });

    $("#adcl-dd1").select2({});
    $("#industry").select2({});
    $("#profile_type").select2({});

    $('#data-table').DataTable({
      language: { 
          search: "",
          searchPlaceholder: "Search by Client Name",
          "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().data().length <= this.fnSettings()._iDisplayLength){
              $paginate.hide();
          }
          else{
              $paginate.show();
          }
      },
      "order": [[ 0, "asc" ]],
      "columnDefs": [
        {"targets"  : 'no-sort', "orderable": false},
        { "searchable": false, "targets": [5] }
      ]
  });  
});

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('');
                    alert('This url is already registered.');
                }
            }
        });
    } else {
        $("#profile_url").val('');
        // alert('Invalid Url');
    }
}

  
</script>
{% endblock %}