{% extends 'store_layout_two.html' %}
{% load static %}
{% block content %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.min.css"
crossorigin="anonymous" />
<link rel="stylesheet" href="{% static 'store/build/css/countrySelect.css' %}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.0/css/all.min.css" integrity="sha512-3PN6gfRNZEX4YFyz+sIyTF6pGlQiryJu9NlGhu9LrLMQ7eDjNgudQoFDK3WSNAayeIKc6B8WXXpo4a7HqxjKwg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="content-body">
<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;
    }
</style>
          
    <!-- row -->
   <title>Beni | Special Offer Category</title>
    <div class="container-fluid">
          <div class="row page-titles profile mx-0">
            <div class="col">
                <h2 class="fs-32 mb-0">Special Offer Category</h2>
            </div>

        </div>
        <div class="top-form-user mt-4">
            <form action="/special-offer-category" method="get" class="mb-0 d-flex align-items-end user-listing-form flex-grow-1 justify-content-between">
              {% csrf_token %}
                <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="" 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"> 
                  <div class="add-btn mr-1 text-right"> <a href="/add-special-offer-category" class="btn btn-add">Add Special Offer Category</a></div>
              </div>
            </form>
           
          </div>
        <div class="row prdct-rw mt-4">
            <div class="col-12 col-md-12">
                <div class="card">
                    <div class="card-body">
                       
                        <div class="table-responsive">
                            <table class="table header-border table-hover verticle-middle">
                                <thead>
                                    <tr>
                                        <th scope="col">Category Name</th>
                                        <th scope="col">Discount Percentage</th>
                                        <th scope="col">Actions</th> 
                                    </tr>
                                </thead>
                                <tbody>    
                                    {% for data in data_obj %}                             
                                    <tr>
                                        <td>{{ data.maincategory__category_name_english}}</td>     
                                        <td>{{ data.offer_discount}}%</td>     
                                        <td>
                                            <span><a class="edit-btn yellow" href="/edit-special-offer-category/{{ data.maincategory__id}}" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"><i class="fa fa-pencil color-muted m-r-5" style="font-family: 'FontAwesome';"></i> </a>
                                                <button type="button" onclick="theFunction({{ data.maincategory__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>
                                            </span>
                                          </td> 
                                    </tr>
                                    {% endfor %}
                                </tbody>
                               
                            
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% if data_obj %}
        <div class="demo-inline-spacing">
            <div class="pagination justify-content-center">
                    {% if data_obj.has_previous %}
                        <li><a href="?page={{ data_obj.previous_page_number }}">&laquo;</a></li>
                    {% else %}
                    <li class="disabled"><a href="#"><span>&laquo;</span></a></li>
                    {% endif %}
                    {% for i in data_obj.paginator.page_range %}
                    {% if data_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 data_obj.has_next %}
                    <li><a href="?page={{ data_obj.next_page_number }}">&raquo;</a></li>
                    {% else %}
                    <li class="disabled"><span>&raquo;</span></li>
                    {% endif %}
            </div>
            </div>
          {% endif %}
    </div>
</div>
        {% if product_obj %}
        <div class="demo-inline-spacing">
            <div class="pagination justify-content-center">
                    {% if product_obj.has_previous %}
                        <li><a href="?page={{ product_obj.previous_page_number }}">&laquo;</a></li>
                    {% else %}
                    <li class="disabled"><a href="#"><span>&laquo;</span></a></li>
                    {% endif %}
                    {% for i in product_obj.paginator.page_range %}
                    {% if product_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 product_obj.has_next %}
                    <li><a href="?page={{ product_obj.next_page_number }}">&raquo;</a></li>
                    {% else %}
                    <li class="disabled"><span>&raquo;</span></li>
                    {% endif %}
            </div>
            </div>
          {% endif %}
<!-- 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 offer?</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>

<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-offer/'+ del_id;
    });
</script>
{% endblock %}