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

{% block title %}
    <title>Wallet</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">
  <style>
    tr:hover { 
   background: #D3D3D3; 
}
td a { 
   display: block; 
   /*border: 1px solid black;*/
   /*padding: 16px; */
   text-decoration: none;
}

td a:hover 
 { 
   display: block; 
   /*border: 1px solid black;*/
   /*padding: 16px; */
   text-decoration: none;
     color:#00A0C6; 
     cursor:pointer;  
}


  </style>
{% endblock %}


{% block content %}
{% csrf_token %}
  <div class="container-scroller   wallet-c">
      {% include 'customer_header.html' %}
      <div class="container-fluid page-body-wrapper">
        {% include 'customer_sidebar.html' %}


<div class="main-panel">
  <div class="content-wrapper placehoder-sec my-jobs">

          <div class="row  two-divs companies-d">
              <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-account-multiple-plus"></i>
                </span> Wallet </h3>
                <input type="hidden" name="csrfmiddlewaretoken" value="h6CORAJA6BCaWJ5JIlrXOb8pXRPuOZCfbHs0WZ3OFdaj3DFpcsT4TW5moLWZcJYr">
            </div>
        </div>
        <div class="col-md-3 text-right">
               <button  class="btn-c" id="open-add-card-modal" ><i class="mdi mdi-plus menu-icon"></i>Add Card<div></div></button>
             
        </div>
        </div>

       

       <div class="row mt-50  table-row ">
      <div class="col-md-12 grid-margin ">
            <div class="">
              <div class="">
                
                <div class="table-responsive">
                  <table class="table  border-table" id="recent-companies-table">
                    <thead>
                      <tr>
                        <th>Serial No.</th>
                        <th>Card Number</th>
                        <th>Expiry Date</th>
                        <th>Action</th>
                        <!-- <th>Message</th>
                        <th>Created At</th>
                        <th>Status</th> -->
                      </tr>
                    </thead>
                    <tbody>
                      {% if storedcards_data %}
                        {% for card in storedcards_data %}
                          <tr>
                              <td>{{card.serialno}}</td>
                              <td>************{{card.last4digits}}</td>
                              <td>{{card.expiry_date}}</td>
                              <!-- <td>{{card.card_id}}</td> -->
                              <!-- <td class="mssg-all">{{credit_request.note_by_company}}</td>
                              
                              <td class="action-btns">
                                {% ifequal credit_request.status 'pending' %}Pending{% endifequal %}
                                  {% ifequal credit_request.status 'approved' %}Approved{% endifequal %}
                                  {% ifequal credit_request.status 'disapproved' %}Disapproved{% endifequal %}
                                <span class="credit_request_id" hidden>{{credit_request.id}}</span>
                              </td> -->
                              <td>
                                <i data-toggle="tooltip" title="Delete" class="mdi mdi-delete delete_card"></i>
                                <span class="card_id" hidden>{{card.card_id}}</span>
                              </td>
                          </tr>
                        {% endfor %}
                      {% else %}
                          <tr>
                              <td colspan="4" class="assigned-no-records"> No record exists</td>
                          </tr>
                      {% endif %}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>

         </div>
        
    </div>
  

     {% include 'customer_footer.html' %}

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




  <div id="wallet-modal" class="modal fade popup-all wallet-f" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header border-0">
          <h3 class="modal-title">Card Details</h3>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">

         <form>

                   <div class="form-group col-md-12">
                    <label>Name on Card</label>
                    <input type="text" id="add_card_name" class="form-control input_user" value="">
                    <p class="text-danger" id="add_card_name_txt"></p>
                  </div>


            <div class="form-group col-md-12">
                    <label>Card Number</label>
                    <input type="text" id="add_card_number" class="form-control input_user" value="">
                    <p class="text-danger" id="add_card_number_txt"></p>
                  </div>


            <div class='form-row form-group col-md-12'>
             
              <div class='col-xs-4 form-group expiration required'>
                <label class='control-label'>Expiration</label>
                <input class='form-control card-expiry-month' id="add_card_expiry_month" placeholder='MM' size='2' type='tel'>
                <p class="text-danger" id="add_card_expiry_month_txt"></p>
              </div>
              <div class='col-xs-4 form-group expiration required'>
                <label class='control-label'> </label>
                <input class='form-control card-expiry-year' id="add_card_expiry_year" placeholder='YYYY' size='4' type='tel'>
                <p class="text-danger" id="add_card_expiry_year_txt"></p>
              </div>
               <div class='col-xs-4 form-group cvc required'>
                <label class='control-label'>CVC</label>
                <input autocomplete='off' class='form-control card-cvc' id="add_card_expiry_cvc" placeholder='ex. 311' size='4' type='tel'>
                <p class="text-danger" id="add_card_expiry_cvc_txt"></p>
              </div>
            </div>
           
           
              <div class='col-md-12 form-group'>
                <button class='form-control btn submit-button' id="add-new-card-btn" type='button'>Add</button>
              </div>
          
           
          </form>





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

<div class="modal fade error-popup" id="ErrorMessageModal" 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">
           <h3 id="error-msg"></h3>
           <button type="button"  id="close-btn">Ok</button>
         </div>          
       </div>
     </div>
    </div>
{% endblock %}

{% block js %}
<!--     // <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="{% static 'js/placeorder.js' %}"></script>
    <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>




$( ".delete_card" ).on( "click", function() {
  // debugger;
  card_id = $ (this).closest('td').find('.card_id').text()
  var token=$('input[name="csrfmiddlewaretoken"]').val()
  $.ajax({
      type: 'POST',
      url: '/customer/deletecard/',
      data: { 'card_id' : card_id, 'csrfmiddlewaretoken' : token},
      success: function(response){
        console.log(response);
        $('#error-msg').text('Your card is deleted successfully.')
          $('#ErrorMessageModal').modal('show')
          setTimeout(function () {
              location.reload();
          }, 2000);
      }
    });
});




      $(document).on("click","#open-add-card-modal",function(e){

        $('#add_card_name_txt').text('')
        $('#add_card_number_txt').text('')
        $('#add_card_expiry_month_txt').text('')
        $('#add_card_expiry_year_txt').text('')
        $('#add_card_expiry_cvc_txt').text('')

        $('#add_card_name').val('')
        $('#add_card_number').val('')
        $('#add_card_expiry_month').val('')
        $('#add_card_expiry_year').val('')
        $('#add_card_expiry_cvc').val('')

        $('#wallet-modal').modal('show')

      });


      $(document).on("click","#add-new-card-btn",function(e){
        $('#add_card_name_txt').text('')
        $('#add_card_number_txt').text('')
        $('#add_card_expiry_month_txt').text('')
        $('#add_card_expiry_year_txt').text('')
        $('#add_card_expiry_cvc_txt').text('')

        var card_name = $('#add_card_name').val()
        var card_number = $('#add_card_number').val()
        var card_expiry_month = $('#add_card_expiry_month').val()
        var card_expiry_year = $('#add_card_expiry_year').val()
        var card_expiry_cvc = $('#add_card_expiry_cvc').val();

        if(card_name.length == '')
        {
          $('#add_card_number_txt').text('All fields are required')
          return false;
        }

        if(card_number.length == '')
        {
          $('#add_card_number_txt').text('All fields are required')
          return false;
        }

        if(card_expiry_month.length == '')
        {
          $('#add_card_number_txt').text('All fields are required')
          return false;
        }

        if(card_expiry_year.length == '')
        {
          $('#add_card_number_txt').text('All fields are required')
          return false;
        }
        if(card_expiry_cvc.length == '')
        {
          $('#add_card_number_txt').text('All fields are required')
          return false;
        }

        
        var token = $('input[name="csrfmiddlewaretoken"]').val()
  
        $.ajax({
            type: 'POST',
            url: '/customer/addcard/',
            data: { 'card_name' : card_name, 'card_number' : card_number, 'card_expiry_month' : card_expiry_month, 'card_expiry_year' : card_expiry_year, 'card_expiry_cvc' : card_expiry_cvc, 'csrfmiddlewaretoken' : token},
            success: function(response){
              
              console.log(response);
              if(response.status_code == 200)
              {
                $('#wallet-modal').modal('hide')
                $('#error-msg').text('Your card is added successfully.')
                $('#ErrorMessageModal').modal('show')
                setTimeout(function () {
                    location.reload();
                }, 2000);
              }
              else
              {
                $('#add_card_number_txt').text(response.status_message)
              }
            }
          })

      });
    </script>
{% endblock %}