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

{% block title %}
	<title>All Credit Requests</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' %}">
    <!-- 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>

<style>

#customers-table td.mssg-all {
    white-space: normal;
line-height: 21px;
}

</style>




{% 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 approve-creds">
  	<div class="row  two-divs companies-d">
          		<div class="col-md-6">
          	<div class="page-header">
              <h3 class="page-title">
                <span class="page-title-icon bg-gradient-primary text-white mr-2">
                  <i class="mdi mdi-account-multiple-plus"></i>
                </span> All Credit Requests </h3>
                {% csrf_token %}
            </div>
        </div>
        
        </div>

          	
     <div class="row mt-50  table-row">
            	   <div class=" col-12 grid-margin">
            	<div class="">
                 <div class="">
				<div class="table-responsive">
				{% csrf_token %}
				<table id="customers-table" class="table table-hover border-table">
					<thead>
						<th>Serial No.</th>
						<th>Company Email Address</th>
						<th>Credits</th>
						<th>Message</th>
						<th>Created At</th>
						<th>Status</th>
					</thead>
					<tbody>
						{% if all_credit_requests %}
							{% for credit_request in all_credit_requests %}
								<tr>
									<td>{{credit_request.serialno}}</td>
									<td>{{credit_request.company_email}}</td>
									<td>{{credit_request.credits}}</td>
									<td class="mssg-all">{{credit_request.note_by_company}}</td>
									<td>{{credit_request.date}}</td>
									
									<td class="action-btns">
                                     	{% ifequal credit_request.status 'pending' %}
                                     		<button type="button" class="btn btn-default delete-record-yes-btn enable-btn py-2 btn-c1 approve-btn">Approve</button>
                                     		<button type="button" class="btn btn-default delete-record-yes-btn disable-btn py-2 btn-c1 disapprove-btn">Disapprove</button>
                                     	{% else %}
                                     		{% ifequal credit_request.status 'approved' %}Approved{% endifequal %}
                                     		{% ifequal credit_request.status 'disapproved' %}Disapproved{% endifequal %}
                                     	{% endifequal %}
                                     	<span class="credit_request_id" hidden>{{credit_request.id}}</span>
                                     </td>
								</tr>
							{% endfor %}
							
						{% endif %}
					</tbody>
				</table>

				</div>
				{% if all_credit_requests.has_other_pages %}
					<ul class="pagination">
					{% if all_credit_requests.has_previous %}
					  <li><a href="?page={{ all_credit_requests.previous_page_number }}">&laquo;</a></li>
					{% else %}
					  <li class="disabled"><span>&laquo;</span></li>
					{% endif %}
					{% for i in all_credit_requests.paginator.page_range %}
					  {% if all_credit_requests.number == i %}
					    <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
					  {% else %}
					    <li><a href="?page={{ i }}">{{ i }}</a></li>
					  {% endif %}
					{% endfor %}
					{% if all_credit_requests.has_next %}
					  <li><a href="?page={{ all_credit_requests.next_page_number }}">&raquo;</a></li>
					{% else %}
					  <li class="disabled"><span>&raquo;</span></li>
					{% endif %}
					</ul>
				{% endif %}
			
	</div>
		</div>
			</div>





			</div>
		  </div>
          {% include 'admin_footer.html' %}
        </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="DisapproveModal" class="modal fade modal-small popup-all confirm-popup" role="dialog" >
	  <div class="modal-dialog">
	    <!-- Modal content-->
	    <div class="modal-content">
	      <div class="modal-header border-0">
              <h3 class="modal-title">Disapprove Request</h3>
	        <button type="button" class="close" data-dismiss="modal">&times;</button>
	      </div>
	      <div class="modal-body">
	        <h5 class="text-center">Do you want to disapprove this request?</h5>
	        <input id="disapprove-credit-request-id" type="hidden" / >
	        
	        <div class="text-center">
	         <button type="button" class="btn btn-default disapprove-record-yes-btn py-2  btn-c1 confirm-btn" >Confirm</button>
	          <button type="button" class="btn btn-default py-2  btn-c1 cancel-btn" class="close" data-dismiss="modal">Cancel</button>
	        </div>
	      </div>
	    </div>
	  </div>
	</div>
	<div id="ApproveModal" class="modal fade modal-small popup-all confirm-popup" role="dialog" >
	  <div class="modal-dialog">
	    <!-- Modal content-->
	    <div class="modal-content">
	      <div class="modal-header border-0">
              <h3 class="modal-title">Approve Request</h3>
	        <button type="button" class="close" data-dismiss="modal">&times;</button>
	      </div>
	      <div class="modal-body">
	        <h5 class="text-center">Do you want to approve this request?</h5>
	        <input id="approve-credit-request-id" type="hidden" / >
	        
	        <div class="text-center">
	         <button type="button" class="btn btn-default approve-record-yes-btn py-2  btn-c1 confirm-btn" >Confirm</button>
	          <button type="button" class="btn btn-default py-2  btn-c1 cancel-btn" class="close" data-dismiss="modal">Cancel</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 disabled 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="https://unpkg.com/@popperjs/core@2" ></script> -->
	<script>
		
		$( ".disapprove-btn" ).on( "click", function() {
		  // debugger;
		  credit_request_id = $ (this).closest('td').find('.credit_request_id').text()
		  $('#disapprove-credit-request-id').val(credit_request_id)
		  $('#DisapproveModal').modal('show')

		});

		$( ".disapprove-record-yes-btn" ).on( "click", function() {
		  // debugger;
		  credit_request_id = $('#disapprove-credit-request-id').val()
		  new_status = 'disapprove'
		  var token=$('input[name="csrfmiddlewaretoken"]').val()
		  $.ajax({
		      type: 'POST',
		      url: '/admin/change_credit_request_status/',
		      data: { 'credit_request_id' : credit_request_id, 'new_status' : new_status, 'csrfmiddlewaretoken' : token},
		      success: function(response){
		        console.log(response);
		        if(response.status_code == 200)
		        {
		          $('#DisapproveModal').modal('hide');
		          $('.response-msg').text(response.status_message)
		          $('#success_modal_deleted').modal('show')
		          setTimeout(function () {
		              location.reload();
		          }, 2000);
		        }
		        
		      }
		    });
		});




		$( ".approve-btn" ).on( "click", function() {
		  // debugger;
		  credit_request_id = $ (this).closest('td').find('.credit_request_id').text()
		  $('#approve-credit-request-id').val(credit_request_id)
		  $('#ApproveModal').modal('show')

		});

		$( ".approve-record-yes-btn" ).on( "click", function() {
		  // debugger;
		  credit_request_id = $('#approve-credit-request-id').val()
		  new_status = 'approve'
		  var token=$('input[name="csrfmiddlewaretoken"]').val()
		  $.ajax({
		      type: 'POST',
		      url: '/admin/change_credit_request_status/',
		      data: { 'credit_request_id' : credit_request_id, 'new_status' : new_status, 'csrfmiddlewaretoken' : token},
		      success: function(response){
		        console.log(response);
		        if(response.status_code == 200)
		        {
		          $('#ApproveModal').modal('hide');
		          $('.response-msg').text(response.status_message)
		          $('#success_modal_deleted').modal('show')
		          setTimeout(function () {
		              location.reload();
		          }, 2000);
		        }
		        
		      }
		    });
		});

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