{% extends 'admin_layout_two.html' %}
{% load static %}
{% block content %}
<style>
    .modal-open .modal {
        overflow-x: hidden;
        overflow-y: auto;
        opacity: 1;
    }
    .modal-dialog {
        top: 50px;
    }
    .switch {
      position: relative;
      display: inline-block;
      width: 90px;
      height: 34px;
      vertical-align: middle;
      margin: 0;
  }
  .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;
      border-radius: 100%;
      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(55px);
    -ms-transform: translateX(55px);
    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;}
        .btn{
    border-radius:0; !important
  }
</style>

      <!--Content body start-->
      <title>Beni | Store Listing</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 Listing</h2>
                </div>
                <div class="col pl-0">
                   
                </div>
            </div>
            <div class="top-form-user mt-4">
              <form action="/store-listing" method="get" class="mb-0 d-flex align-items-end user-listing-form flex-grow-1 justify-content-between">
                {% csrf_token %}
                <div class="search-date-form">                          
                  <div class="date-filter">
                     <div class="date-field">
                         <label class="form-label">Start Date</label>
                         <input type="date" id="date" name="start_date" value="{{search_start}}" placeholder="12-02-2022">
                     </div>
                     <div class="date-field">
                         <label class="form-label">End Date</label>
                         <input type="date" id="date" value="{{search_end}}" name="end_date" placeholder="12-02-2022">
                     </div>
                     <div class="date-field">
                         <input type="submit" value="Submit">
                     </div>
                  </div>
                </div>
                <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="user-card-header-right d-flex gap-2 align-items-baseline"> 
                    {% comment %} <div class="add-btn mr-1 text-right"> <a href="/add-store" class="btn btn-add">Add Users</a></div> {% endcomment %}
                    <div class="add-btn"><a href="/store-listing" class="btn btn-add">Reset</a></div>
                </div>
              </form>
             
            </div>
            <div class="row faq-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">Sr. No.</th>
                                            <th scope="col">Store Icon</th>
                                            <th scope="col">Store name English</th>
                                            <th scope="col">Store name Arabic</th>
                                            <th scope="col">Store Email</th>
                                            <th scope="col">Store Phone Number</th>
                                            <th scope="col">Vip Store</th>
                                            <th scope="col">Created At</th>
                                            <th scope="col">Status</th>
                                            
                                            <th scope="col">Actions</th>
                                        </tr>
                                    </thead>
                                    
                                    <tbody>
                                        {% for store in store_obj %}
                                        <tr>
                                            <th>{{ store.user_id }}</th>
                                            <td><img src="{% if store.store_logo %}{{ store.store_logo }}{% endif %}"></td>
                                            <td>{{ store.store_name_english }}</td>
                                            <td>{{ store.store_name_arabic }}</td>
                                            <td>{{ store.store_email }}</td>   
                                            <td>{{ store.store_number}} </td>
                                            {% if store.is_vip == 'true' %}
                                            <td>True</td>
                                            {% else %}
                                            <td>False</td>
                                            {% endif %}
                                            <td>{{ store.start_date|date:"d M  Y" }}</td>                                        
                                            <td>
                                               <label class="switch">
                                                <input type="checkbox" id="switch" {% if store.status == 1 %} checked {% else %} {% endif %} name="status" onchange="changeStoreStatus(this,'{{store.id}}')">
                                                <span class="slider round"></span>
                                               </label>
                                            
                                            </td>
                                            <td>
                                              <span><a class="edit-btn yellow" href="/get-store-details/store.id" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"><i class="fa fa-pencil color-muted m-r-5"></i> </a> 
                                              <a class="edit-btn yellow" href="/get-store-details/{{store.id}}" data-toggle="tooltip" data-placement="top" title="" data-original-title="View"><i class="fa fa-eye color-muted m-r-5"></i> </a>  
                                              </span>
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                    
                                </table>
                                {% else %}
                                    <p class="no-data text-center bold">No data found!</p>
                                    {% endif %}
                            </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-->
        </div>
    </div>
      <!--Content body end-->


  <!-- delete modal-->
  <div class="bootstrap-modal">
    <!-- Modal -->
    <div class="modal fade" id="deleteModal">
        <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 delete this store?</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="delete-user" 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)
           $('#deleteModal').modal('show');
           return false;
        }

        $(document).on('click','#delete-user',function(e){
         del_id = $('#model_delete_id').val()
         window.location.href='/delete-user/'+ del_id;
        });

</script>
{% endblock %}