{% extends 'admin_layout_two.html' %}
{% load static %}
{% block content %}

<style>
  .switch {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 34px;
}

.switch input {display:none;}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e2c38a;
    -webkit-transition: .4s;
    transition: .4s;
}
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
  opacity: 1;
}
.modal-dialog {
  top: 50px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 17px;
    width: 17px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}
span.off {
    margin-left: 10px;
}

span.on {
    right: -22px !important;
}
input:checked + .slider {
    background-color: #bc9948;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(38px);
  -ms-transform: translateX(38px);
  transform: translateX(38px);
}

/*------ ADDED CSS ---------*/
.on
{
  display: none;
}

.on, .off
{
  color: white;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
  font-size: 10px;
  font-family: Verdana, sans-serif;
}

input:checked+ .slider .on
{display: block;}

input:checked + .slider .off
{display: none;}

/*--------- END --------*/

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}
.modal-footer {
    justify-content: center;
}
.modal-body {
    text-align: center;
    font-size: 16px;
}
.slider.round:before {
  border-radius: 50%;}
</style>
<!--Content body start-->
<title>Beni | Store Requests</title>
<div class="content-body">

  <div class="container-fluid mt-3">
      <div class="row page-titles mx-0">
          <div class="col">
              <h2 class="fs-32 mb-0">Store Requests</h2>
          </div>
          <div class="col pl-0">
             
          </div>
      </div>
      <div class="top-form-user mt-4">
        <form action="" id="request-list" method="get" class="mb-0 d-flex align-items-end user-listing-form flex-grow-1 justify-content-between">
          <div class="table-search-form mr-3">
            <div class="navbar-nav align-items-center">
              <div class="nav-item d-flex align-items-center">
                  <input type="text" class="form-control border shadow-none search-input" name="search" value="{% if search_post %}{{search_post}}{% endif %}"   placeholder="Search..." aria-label="Search...">
                      <input type="submit" value="Submit">
                  </div>
                </div>
            </div>
            <div class="add-btn mr-1 text-right"> <a href="/store-request-listing" class="btn btn-add">Reset</a></div>

        </form>
      </div>
      <div class="row request-rw mt-4">
          <div class="col-12 col-md-12">
              <div class="card">
                  <div class="card-body">
                     
                      <div class="table-responsive">  
                        {% if store_obj %}       
                          <table class="table header-border table-hover verticle-middle">
                              <thead>
                                  <tr>
                                      <th scope="col">ID</th>
                                      <th scope="col">User Details</th>
                                      <th scope="col">Requested Date</th>
                                      <th scope="col">Status</th>
                                      <th scope="col">Actions</th>
                                  </tr>
                              </thead>
                             
                              {% for i in store_obj %}
                              <tbody>
                                  <tr>
                                      <th>{{ i.id }}</th>
                                      <td>{{ i.email }}</td>
                                      <td>{{ i.start_date|date:"d M  Y" }}</td>                                      
                                      <td>
                                        {% if i.status == 2 %}
                                        <span class="red" style="background:red; padding: 3px 8px; color: #fff;border-radius:5px;">Disapprove</span>
                                        {% elif i.status == 1 %}
                                        <span class="green" style="background:green; padding: 3px 8px; color: #fff;border-radius:5px;">Approved</span>
                                        {% else %}
                                        <span class="yellow" style="background:burlywood; padding: 3px 8px; color: #fff;border-radius:5px;">Pending</span>
                                        {% endif %}
                                      </td>
                                      <td>
                                        <span>
                                          <a class="edit-btn yellow" href="/view-store-request/{{i.id}}" data-toggle="tooltip" data-placement="top" title="" data-original-title="View"><i class="fa fa-eye color-muted m-r-5"></i> </a>  
                                          {% if i.status == 0 %}
                                          <button type="button" class="Close-btn p-0" style="border: none; color: #76838f; background-color: transparent;" onclick="theFunction({{i.id}});" data-toggle="tooltip" data-placement="top" title="" data-original-title="Approve"><i class="fa fa-check color-muted m-r-5"></i> </button>
                                          <a class="edit-btn yellow" href="/disapprove-store-request/{{ i.id }}" data-toggle="tooltip" data-placement="top" title="" data-original-title="Disapprove"><i class="fa fa-close color-muted m-r-5"></i> </a>
                                          {% endif %}
                                        </span>
                                      </td>
                                  </tr>          
                              </tbody>
                              {% endfor %}
                          </table>
                          {% else %}
                          <p> No data found </p>
                          {% endif %}
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
  {% if store_obj %}
  <div class="demo-inline-spacing">
      <div class="pagination justify-content-center">
            {% if store_obj.has_previous %}
                 <li><a href="?page={{ store_obj.previous_page_number }}">&laquo;</a></li>
            {% else %}
              <li class="disabled"><span>&laquo;</span></li>
            {% endif %}
            {% for i in store_obj.paginator.page_range %}
              {% if store_obj.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 store_obj.has_next %}
              <li><a href="?page={{ store_obj.next_page_number }}">&raquo;</a></li>
            {% else %}
              <li class="disabled"><span>&raquo;</span></li>
            {% endif %}
      </div>
    </div>
    {% endif %}
    <!--end of Pagination-->
     
        <!--end of Pagination-->
</div>
<!--Content body end-->


<!-- delete modal-->
<div class="bootstrap-modal">
<!-- Modal -->
<div class="modal fade" id="approveModal">
  <div class="modal-dialog" role="document">
      <div class="modal-content">
          <div class="modal-btn">
              <button type="button" class="close" data-dismiss="modal"><span>&times;</span>
              </button>
          </div>
          <div class="modal-body">Are you sure you want to Approve this store request?</div>
          <div class="modal-footer">
            <input type="hidden" id="model_delete_id">

              <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
              <button type="button" id="approve-store" class="btn btn-primary">Yes</button>
          </div>
      </div>
  </div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>

  function theFunction(e){
    $('#model_delete_id').val(e)
       $('#approveModal').modal('show');
       return false;
    }

    $(document).on('click','#approve-store',function(e){
     del_id = $('#model_delete_id').val()
     window.location.href='approve-store-request/'+ del_id;
    });
</script>
{% endblock %}