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

<style>
.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;
    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;}

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

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
    height: 24px;
    width: 62px;
}
.modal-footer {
    justify-content: center;
}
.modal-body {
    text-align: center;
    font-size: 16px;
}
.slider.round:before {
  border-radius: 50%;}
        .btn{
    border-radius:0; !important
  }
</style>
<!--Content body start-->
<title>Beni | Service Invoices</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">Service Invoices</h2>
          </div>
          <div class="col pl-0">
             
          </div>
      </div>
      <div class="top-form-user reports-section mt-4">
        <form action="/store-service-report" 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>
          </div> 
          <div class="table-search-form mr-3">
            <div class="navbar-nav align-items-center store-reports-sec">
                <div class="store-select">
                    <label class="form-label">Select Store</label>
                    <select name="store_id">
                        <option disabled selected>Select</option>
                        {% for store in stores_obj %}
                        <option value= {{store.id}} {% if store_id_send|striptags == store.id  %}selected{% endif %}>{{ store.store_name_english }}</option>
                        {% endfor %}
                    </select>
                </div>
             
                <!-- <div class="store-select">
                    <label class="form-label">Delivery Status</label>
                    <select name="delivery_status" value="{{delivery_status_send}}">
                        <option disabled selected>Select</option>
                        <option value="0" {% if delivery_status_send == "0" %}selected{% endif %} >Pending</option>
                        <option value="1" {% if delivery_status_send == "1" %}selected{% endif %} >On the Way</option>
                        <option value="2" {% if delivery_status_send == "2" %}selected{% endif %} >Delivered</option>

                    </select>
                </div> -->
                <div class="store-select">
                    <label class="form-label">Payment Status</label>
                    <select name="payment_status" value="{{payment_status_send}}">
                        <option disabled selected>Select</option>
                        <option value="1" {% if payment_status_send == '1' %}selected{% endif %} >Paid</option>
                        <option value="0" {% if payment_status_send == '0' %}selected{% endif %}  >Unpaid</option>
                    </select>
                </div>
                                 <div class="store-select mt-4"> <a href="/store-service-report" class="btn btn-add">Reset</a></div>

                {% comment %} <div class="store-select">
                    <label class="form-label">Service</label>
                    <select>
                        <option disabled selected>Select</option>
                        <option>All Orders</option>
                        <option>Service 1 </option>
                        <option>Service 1 </option>
                    </select>
                </div> {% endcomment %}
            </div>
            </div>
            <div class="user-card-header-right d-flex gap-2 align-items-baseline"> 
            <div class="add-btn"> <input type="submit" value="Submit"></div>
          </div>
        </form>
        <div class="add-btn mt-3"> <input type="submit" id="exportcsv" value="Export Csv"></div>

       
      </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">ID</th>
                                    <th scope="col">Invoice No.</th>
                                    <th scope="col">Customer</th>
                                    <th scope="col">Order Date</th>
                                    <th scope="col">Total Amount</th>
                                    <th scope="col">Payment Status</th>
                                    <th scope="col">Store Id</th>

                                    {% comment %} <th scope="col">Actions</th> {% endcomment %}
                                </tr>
                            </thead>
                            {% for orders in all_order %}
                            <tbody>                                 
                                <tr>
                                    <th>#{{orders.id}}</th>
                                    <td>{{orders.invoice_number}}</td>     
                                    <td>{{orders.customer_name}}</td>     
                                    <td>{{orders.start_date|date:"d M  Y"}}</td>
                                    <td>{{orders.total_amount}}</td>
                                    <td>{% if orders.is_paid == True %}PAID{% else %}UNPAID{% endif %}</td>
                                    <td>
                                    {{orders.store.id}}
                                      {% comment %} <span>
                                        <a class="edit-btn yellow" href="/view-order-details/{{orders.id}}" data-toggle="tooltip" data-placement="top" title="" data-original-title="View"><i class="fa fa-eye color-muted m-r-5"></i> </a>
                                        <a class="edit-btn yellow" href="/get-invoice/{{orders.id}}" data-toggle="tooltip" data-placement="top" title="" data-original-title="Invoice"><i class="fa fa-download color-muted m-r-5" style="font-family: 'FontAwesome';"></i> </a>
                                      </span> {% endcomment %}
                                    </td> 
                                    
                                    <!-- <td>5.0 <i style="color: #bc9948" class="fas fa-star"></i> </td>
                                    <td>
                                      <label class="switch">
                                        <input type="checkbox" id="switch" name="status">
                                        <span class="slider round"></span>
                                       </label>
                                    
                                    </td>
                                    <td>
                                      <span><a class="edit-btn yellow" href="" 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>
                                        <a class="edit-btn yellow" href="" data-toggle="tooltip" data-placement="top" title="" data-original-title="View"><i class="fa fa-eye color-muted m-r-5"></i> </a>
                                        <button type="button" 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>
                            </tbody>
                            {% endfor %}
                        
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            {% if all_order %}
                <div class="demo-inline-spacing">
                <ul class="pagination justify-content-center">
                        {% if all_order.has_previous %}
                            <li><a href="?page={{ all_order.previous_page_number }}">&laquo;</a></li>
                        {% else %}
                        <li class="disabled"><a href="#"><span>&laquo;</span></a></li>
                        {% endif %}
                        {% for i in all_order.paginator.page_range %}
                        {% if all_order.number == i %}
                            <li><a class="active" href="?page={{ i }}"><span>{{ i }}</span></a></li>
                        {% else %}
                            <li><a class='page-link' data-href="?page={{ i }}" href="?page={{ i }}">{{ i }}</a></li>
                        {% endif %}
                        {% endfor %}
                        {% if all_order.has_next %}
                        <li><a href="?page={{ all_order.next_page_number }}">&raquo;</a></li>
                        {% else %}
                        <li class="disabled"><span>&raquo;</span></li>
                        {% endif %}
                </ul>
                </div>
            {% endif %}
        </div>
    </div>
  </div>
</div>
<!--Content body end-->

</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    let pag = document.querySelectorAll('a.page-link')
            console.log(pag.length)
            let url = window.location


            if (url.href.includes("?csrfmiddlewaretoken"))
            {
                for (let i = 0; i < pag.length; i++)
                {
                    pag[i].href = url.search + pag[i].getAttribute("data-href").replace("?","&")
                    console.log(pag[i].getAttribute("data-href"))
                }
            } else {
                console.log("not included")
            }

    $(document).ready(function() {
        $('#exportcsv').click(function() {
          var csv_export = '1'; 
          $.ajax({
            url: window.location.href, // Replace with your URL
            type: 'GET',
            data: {
            csv_export: csv_export
            },
            success: function(data) {
                var hiddenAnchor = document.createElement('a');
                hiddenAnchor.href = 'data:text/csv;charset=utf-8,' + encodeURI(data);
                hiddenAnchor.target = '_blank';
                hiddenAnchor.download = 'my-file.csv';
                document.body.appendChild(hiddenAnchor);
                hiddenAnchor.click();
                document.body.removeChild(hiddenAnchor);
            },
            error: function(xhr, textStatus, errorThrown) {
              // Handle any errors
            }
          });
        });
      });
      
</script>

{% endblock %}