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

<style>

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
  opacity: 1;
}
.modal-dialog {
  top: 50px;
}
.modal-footer {
  justify-content: center;
}
.modal-body {
  text-align: center;
  font-size: 16px;
}
.btn{
    border-radius:0; !important
}
</style>
<!--Content body start-->
    <title>Beni | Today's Deal List</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">Today's Deal List</h2>
          </div>
          <div class="col pl-0">
             
          </div>
      </div>
      <div class="top-form-user mt-4">
        <form action="/deal-section-list" id="deal-section-list" method="get" class="mb-0 d-flex align-items-end user-listing-form flex-grow-1 justify-content-between">
          <div class="d-flex">
          <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"> <a href="/deal-section-list" class="btn btn-add">Reset</a></div> 

        </div>

            <div class="add-btn mr-1 text-right"> <a href="/add-deal-product" class="btn btn-add">Add Deal</a></div>
        </form>
       
      </div>
      <div class="row faq-rw offer-sec-tab mt-4">
          <div class="col-12 col-md-12">
              <div class="card">
                  <div class="card-body">
                     
                      <div class="table-responsive">
                      {% if today_obj %}
                          <table class="table header-border table-hover verticle-middle">
                              <thead>
                                  <tr>
                                      <th scope="col">English Name</th>
                                      <th scope="col">Arabic Name</th>
                                      <th scope="col">Original Price</th>
                                      <th scope="col">Special Price</th>
                                      <th scope="col">Start Date</th>
                                      <th scope="col">End Date</th>
                                      <th scope="col">Actions</th>
                                  </tr>
                              </thead>
                              
                              <tbody>
                              {% for today in today_obj %}
                                  <tr>
                             
                                      <td>{{ today.product_name_english}}</td>
                                      <td>{{ today.product_name_arabic}}</td>       
                                      <td>SAR {{ today.price }}</td>     
                                      <td>SAR {{today.price_discount}} <span class="special-prc"></span></td>
                                      <td>{{ today.today_deal_start_date|date:"d M  Y" }}</td>
                                      <td>{{ today.today_deal_start_date|date:"d M  Y" }}</td>
                                      <td>
                                            <button type="button" onclick="theFunction({{today.id}});" class="Close-btn p-0" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete" style="border: none; color: #76838f; background-color: transparent;"> <i class="fa fa-close color-danger"></i></button>
                                      </td>
                                  </tr>
                                  {% endfor %}
                              </tbody>
                           
                          </table>
                        {% else %}
                        <p>No data found</p>
                        {% endif %}
                      </div>
                     
                  </div>
              </div>
          </div>
      </div>
      {% if today_obj %}
        <div class="demo-inline-spacing">
            <div class="pagination justify-content-center">
                    {% if today_obj.has_previous %}
                        <li><a href="?page={{ today_obj.previous_page_number }}">&laquo;</a></li>
                    {% else %}
                    <li class="disabled"><a href="#"><span>&laquo;</span></a></li>
                    {% endif %}
                    {% for i in today_obj.paginator.page_range %}
                    {% if today_obj.number == i %}
                        <li><a class="active" href="?page={{ i }}"><span>{{ i }}</span></a></li>
                    {% else %}
                        <li><a href="?page={{ i }}">{{ i }}</a></li>
                    {% endif %}
                    {% endfor %}
                    {% if today_obj.has_next %}
                    <li><a href="?page={{ today_obj.next_page_number }}">&raquo;</a></li>
                    {% else %}
                    <li class="disabled"><span>&raquo;</span></li>
                    {% endif %}
            </div>
            </div>
          {% endif %}
  </div>
  <!-- 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>
            <input type="hidden" id="model_delete_id">
  
            <div class="modal-body">Are you sure you want to delete this deal?</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                <button type="button" id="delete-maincategory" class="btn btn-primary">Yes</button>
            </div>
        </div>
    </div>
  </div>
</div>

<!--Content body end-->

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
  function theFunction(e){
    $('#model_delete_id').val(e)
       $('#deleteModal').modal('show');
       return false;
    }

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