{% extends 'base.html' %}
{% load static %}

  {% block title %}
    <title>All Companies</title>
  {% endblock %}

  {% block css %}
    <!-- <link rel="stylesheet" href="{% static 'assets/vendors/mdi/css/materialdesignicons.min.css' %}">
    <link rel="stylesheet" href="{% static 'assets/vendors/css/vendor.bundle.base.css' %}">
    <link rel="stylesheet" href="{% static 'assets/css/style.css' %}">
    <link rel="shortcut icon" href="{% static 'assets/images/favicon.png' %}" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> -->

	<link rel="stylesheet" href="{% static 'assets/vendors/mdi/css/materialdesignicons.min.css' %}">
    <link rel="stylesheet" href="{% static 'assets/vendors/css/vendor.bundle.base.css' %}">
    
    <link rel="stylesheet" href="{% static 'assets/css/style.css' %}">
    <!-- End layout styles -->
    <link rel="shortcut icon" href="{% static 'assets/images/favicon.png' %}" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<!-- <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css"> -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
	<script  src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
	<script  src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
  {% endblock %}


{% block content %}
    <div class="container-scroller">
      {% include 'admin_header.html' %}
      <div class="container-fluid page-body-wrapper">
        {% include 'admin_sidebar.html' %}
        <div class="main-panel">
          <div class="content-wrapper">

            <div class="row  two-divs">
          		<div class="col-md-9">
	          	<div class="page-header">
	              <h3 class="page-title">
	                <span class="page-title-icon bg-gradient-primary text-white mr-2">
	                  <i class="mdi mdi-checkerboard"></i>
	                </span> All Companies </h3>
	            </div>
	        </div>
	        <div class="col-md-3 text-right">
	               <button id="open-add-company-modal" class="btn-c"><i class="mdi mdi-plus menu-icon"></i> Add Company </button>
	        </div>
        </div>


          
            <div class="row mt-50  table-row">
			<div class="table-responsive">
				{% csrf_token %}
				<table id="companies-table" class="table table-hover">
					<thead>
						<th>Name</th>
						<th>Email Address</th>
						<th>Phone Number</th>
						<th>Account Approved</th>
						<th>Action</th>
					</thead>
					<tbody>
						{% if all_companies %}
							{% for company in all_companies %}
								<tr>
									<td>{{company.name}}</td>
									<td>{{company.email}}</td>
									<td>{{company.countrycode}} {{company.phone}}</td>
									<td>{{company.accountapproved}}</td>
									<td>
										<i data-toggle="tooltip" title="View" class="mdi mdi-view-list view_company"></i>
										{% ifequal request.session.userrole 'superadmin' %}
											<i data-toggle="tooltip" title="Edit" class="mdi mdi-tooltip-edit edit_company"></i>
											<i data-toggle="tooltip" title="Delete" class="mdi mdi-delete delete_company"></i>
											{% ifequal company.accountapproved 'Yes' %}
												<i class="mdi mdi-check-circle" style="color:green;"></i>
											{% else %}
												<span class="approve_company"><i class="mdi mdi-checkbox-blank-circle-outline"></i></span></span>
											{% endifequal %}
										{% endifequal %}
										<span class="company_id" hidden>{{company.id}}</span>
									</td>
								</tr>
							{% endfor %}
						{% endif %}
					</tbody>
				</table>
			</div>
			</div>
		  </div>
          {% include 'admin_footer.html' %}
        </div>
      </div>
    </div>
	

<div id="AddCompanyModal" class="modal fade   popup-all" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header border-0">
				<h3 class="modal-title">Add Company</h3>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
			<div class="modal-body">
				<div class="container">
					<div class="row">
						<div class="col-md-12">
							{% csrf_token %}
							<div class="row">
								<div class="form-group col-md-12 profile-pic">
					                  <input type="file" name='add_im' id='add_im' onchange="previewFile()" accept="image/*" hidden>
					                  <label for="add_im">
					                    <span style="width:100px;"> Image : </span>
					                    <!-- <img id="add_show_image"  src="{% static 'images/camera.png'%}"  alt="your image" />    -->
					                    <img  src="{% static 'images/camera.png'%}" style="height: 75px;width: 75px;" id="show-im" alt="Image preview...">
					                  </label>
					                  <!-- <input type='file' name='add_im' id='add_im'   />  -->
					                      <!-- <input type='image' name='im' id="im" {% if data.image %} src={{data.image}}  {% else %} src="{% static 'images/camera.png'%}"{% endif %} alt="your image"  /> 
					                      -->
					                </div>
								<div class="form-group col-md-6">
									<label>First Name</label>
									<input type="text" id="add_company_firstname" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==50) return false;">
									<p class="text-danger" id="add_company_firstname_txt"></p>
								</div>
								<div class="form-group col-md-6">
									<label>Last Name</label>
									<input type="text" id="add_company_lastname" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==50) return false;">
									<p class="text-danger" id="add_company_lastname_txt"></p>
								</div>
								<div class="form-group col-md-6">
									<label>Company Name</label>
									<input type="text" id="add_company_name" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==50) return false;">
									<p class="text-danger" id="add_company_name_txt"></p>
								</div>
								<div class="form-group col-md-6">
									<label>Email</label>
									<input type="text" id="add_company_email" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==50) return false;">
									<p class="text-danger" id="add_company_email_txt"></p>
								</div>
								<div class="form-group col-md-6">
									<label>Password</label>
									<input type="password" id="add_company_password" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==50) return false;">
									<p class="text-danger" id="add_company_password_txt"></p>
								</div>
								<div class="form-group col-md-6">
									<label>Country Code</label>
									<input type="text" id="add_company_countrycode" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==50) return false;">
									<p class="text-danger" id="add_company_countrycode_txt"></p>
								</div>
								<div class="form-group col-md-6">
									<label>Phone Number</label>
									<input type="text" id="add_company_phone" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==50) return false;">
									<p class="text-danger" id="add_company_phone_txt"></p>
								</div>
								<div class="form-group col-md-6">
									<label>Address</label>
									<input type="text" id="add_company_address" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==50) return false;">
									<p class="text-danger" id="add_company_address_txt"></p>
								</div>
								<div class="w-100 d-flex justify-content-end px-3">
									<input type="hidden" id="add-image-srcdata" />
									<button id="add-company-btn" class="btn-c1">Add</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div id="EditCompanyModal" class="modal fade popup-all" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header border-0">
				<h3 class="modal-title">Edit Company</h3>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
			<div class="modal-body">
				<div class="container">
					<div class="row">
						<div class="col-md-12">
							<!-- <form action="/superadmin/addcity" method="POST"> -->
                			{% csrf_token %}
								<div class="row">
									<div class="form-group col-md-12 profile-pic">
					                  <input type="file" name='add_im' id='add_im' onchange="previewFile()" accept="image/*" hidden>
					                  <label for="add_im">
					                    <span style="width:100px;"> Image : </span>
					                    <!-- <img id="add_show_image"  src="{% static 'images/camera.png'%}"  alt="your image" />    -->
					                    <img  src="{% static 'images/camera.png'%}" style="height: 75px;width: 75px;" id="show-im" alt="Image preview...">
					                  </label>
					                  <!-- <input type='file' name='add_im' id='add_im'   />  -->
					                      <!-- <input type='image' name='im' id="im" {% if data.image %} src={{data.image}}  {% else %} src="{% static 'images/camera.png'%}"{% endif %} alt="your image"  /> 
					                      -->
					                </div>
									<div class="form-group col-md-6">
										<label>First Name</label>
										<input type="text" id="edit_company_firstname" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==50) return false;">
										<p class="text-danger" id="edit_company_firstname_txt"></p>
									</div>
									<div class="form-group col-md-6">
										<label>Last Name</label>
										<input type="text" id="edit_company_lastname" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==50) return false;">
										<p class="text-danger" id="edit_company_lastname_txt"></p>
									</div>
									<div class="form-group col-md-6">
										<label>Company Name</label>
										<input type="text" id="edit_company_name" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==50) return false;">
										<p class="text-danger" id="edit_company_name_txt"></p>
									</div>
									<div class="form-group col-md-6">
										<label>Email</label>
										<input type="text" id="edit_company_email" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==50) return false;" readonly>
										<p class="text-danger" id="edit_company_email_txt"></p>
									</div>
									<div class="form-group col-md-6">
										<label>Country Code</label>
										<input type="text" id="edit_company_countrycode" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==50) return false;">
										<p class="text-danger" id="edit_company_countrycode_txt"></p>
									</div>
									<div class="form-group col-md-6">
										<label>Phone Number</label>
										<input type="text" id="edit_company_phone" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==50) return false;">
										<p class="text-danger" id="edit_company_phone_txt"></p>
									</div>
									<div class="form-group col-md-6">
										<label>Address</label>
										<input type="text" id="edit_company_address" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==50) return false;">
										<p class="text-danger" id="edit_company_address_txt"></p>
									</div>
									<div class="w-100 d-flex justify-content-end px-3">
										<input type="hidden" id="edit_company_id">
										<input type="hidden" id="edit-image-srcdata" />
										<button id="update-company-btn " class="btn-c1">Update</button>
									</div>
								</div>
							<!-- </form> -->
						</div>
					</div>
				</div>
			</div>
			<!--   <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div> --></div>
	</div>
</div>

<div id="ViewCompanyModal" class="modal fade" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header border-0">
				<h3 class="modal-title">View Company</h3>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
			<div class="modal-body">
				<div class="container">
					<div class="row">
						<div class="col-md-12">
							<!-- <form action="/superadmin/addcity" method="POST"> -->
                			{% csrf_token %}
								<div class="row">
									<div class="form-group col-md-6 profile-pic ">
					                    <img id="view-show-image"  alt="your image" />
					                    </label>
					                </div>
									<div class="form-group col-md-6">
										<label>First Name</label>
										<input type="text" id="view_company_firstname" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==50) return false;" readonly>
										<p class="text-danger" id="view_company_firstname_txt"></p>
									</div>
									<div class="form-group col-md-6">
										<label>Last Name</label>
										<input type="text" id="view_company_lastname" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==50) return false;" readonly>
										<p class="text-danger" id="view_company_lastname_txt"></p>
									</div>
									<div class="form-group col-md-6">
										<label>Company Name</label>
										<input type="text" id="view_company_name" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==50) return false;" readonly>
										<p class="text-danger" id="view_company_name_txt"></p>
									</div>
									<div class="form-group col-md-6">
										<label>Email</label>
										<input type="text" id="view_company_email" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==50) return false;" readonly>
										<p class="text-danger" id="view_company_email_txt"></p>
									</div>
									<div class="form-group col-md-6">
										<label>Country Code</label>
										<input type="text" id="view_company_countrycode" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==20) return false;" readonly>
									</div>
									<div class="form-group col-md-6">
										<label>Phone Number</label>
										<input type="text" id="view_company_phone" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==20) return false;" readonly>
									</div>
									<div class="form-group col-md-6">
										<label>Address</label>
										<input type="text" id="view_company_address" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==20) return false;" readonly>
									</div>
									<div class="w-100 d-flex justify-content-end px-3">
										<button id="close-company-view-btn">Ok</button>
									</div>
								</div>
							<!-- </form> -->
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="success_modal_add" role="dialog" >
 <div class="modal-dialog">
   <div class="modal-content">
     <div class="modal-header border-0">
       <!-- <button type="button" class="close" data-dismiss="modal">&times;</button> -->
     </div>
     <div class="modal-body">
       <span class="green-thumb"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i></span>
       <h3 class="response-msg">Record added successfully.</h3>
     </div>          
   </div>
 </div>
</div>

<div class="modal fade" id="success_modal_updated" role="dialog" >
 <div class="modal-dialog">
   <div class="modal-content">
     <div class="modal-header border-0">
       <!-- <button type="button" class="close" data-dismiss="modal">&times;</button> -->
     </div>
     <div class="modal-body">
      <span class="green-thumb">  <i class="fa fa-thumbs-o-up" aria-hidden="true"></i></span>
       <h3 class="response-msg">Record updated successfully.</h3>
     </div>          
   </div>
 </div>
</div>

<div id="DeleteUserModal" class="modal fade modal-small" role="dialog" >
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header border-0">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <!-- <h4 class="modal-title">Modal Header</h4> -->
      </div>
      <div class="modal-body">
        <h5 class="text-center">Do you want to delete this record?</h5>
        <input id="delete-record-data" type="hidden" / >
        <!-- <input type="button" class="fa-trash1" value="Yes" /> -->
        <div class="text-center">
          <button type="button" class="btn btn-default delete-record-yes-btn py-2" >Yes</button>
          <button type="button" class="btn btn-default py-2" class="close" data-dismiss="modal">No</button>
        </div>
      </div>

    </div>

  </div>
</div>

<div id="ApproveModal" class="modal fade modal-small" role="dialog" >
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header border-0">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <!-- <h4 class="modal-title">Modal Header</h4> -->
      </div>
      <div class="modal-body">
        <h5 class="text-center">Do you want to Approve this account?</h5>
        <input id="tobeapproved_id" type="hidden" / >
        <div class="text-center">
          <button type="button" class="btn btn-default approve-account-btn py-2" >Yes</button>
          <button type="button" class="btn btn-default py-2" class="close" data-dismiss="modal">No</button>
        </div>
      </div>

    </div>

  </div>
</div>

<div class="modal fade" id="success_modal_deleted" role="dialog" >
 <div class="modal-dialog">
   <div class="modal-content">
     <div class="modal-header border-0">
       <!-- <button type="button" class="close" data-dismiss="modal">&times;</button> -->
     </div>
     <div class="modal-body">
       <span class="green-thumb"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i></span>
       <h3 class="response-msg">Record deleted successfully.</h3>
     </div>          
   </div>
 </div>
</div>

{% endblock %}


{% block js %}

<script src="{% static 'assets/vendors/js/vendor.bundle.base.js' %}"></script>
    <script src="{% static 'assets/vendors/chart.js/Chart.min.js' %}"></script>
    <script src="{% static 'assets/js/off-canvas.js' %}"></script>
    <script src="{% static 'assets/js/hoverable-collapse.js' %}"></script>
    <script src="{% static 'assets/js/misc.js' %}"></script>
    <script src="{% static 'assets/js/dashboard.js' %}"></script>
    <script src="{% static 'assets/js/todolist.js' %}"></script>



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
	<script  src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
	<script  src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
	<script src="{% static 'js/admin_showallcompanies.js' %}" ></script>
<script>
	function previewFile() {
	  // alert('in-add-preview-file')
	  var preview = document.querySelector('#show-im');
	  var file    = document.querySelector('input[type=file]').files[0];
	  var reader  = new FileReader();

	  reader.addEventListener("load", function () {
	    // alert(reader.result);
	    $('#add-image-srcdata').val(reader.result)
	    preview.src = reader.result;
	  }, false);

	  if (file) {
	    reader.readAsDataURL(file);
	  }
	}



function editpreviewFile() 
{
  var preview = document.querySelector('#edit-show-image');
  var file    = document.querySelector('#edit_im').files[0];
  var reader  = new FileReader();
  reader.addEventListener("load", function () {
    // alert(reader.result);
    $('#edit-image-srcdata').val(reader.result)
    preview.src = reader.result;
console.log(reader.result);
return false;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}
</script>
<script>
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip(); 
});
</script>
{% endblock %}