{% extends 'store_layout_two.html' %}
{% load static %}
{% block content %}
{%csrf_token%}
<style>
      .btn{
    border-radius:0; !important
  }
</style>
<title>Beni | Service Request List</title>
<div class="content-body">

          
    <!-- row -->

    <div class="container-fluid">
          <div class="row page-titles profile mx-0">
            <div class="col">
                <h2 class="fs-32 mb-0">Service Request List</h2>
            </div>
        </div>
        <div class="top-form-user mt-4">
            <form action="/service-request-list" method="get" class="mb-0 d-flex align-items-end user-listing-form flex-grow-1 justify-content-between">
             {% csrf_token %}
            <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="/service-request-list" class="btn btn-add">Reset</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">
                       {% if req_obj %}
                        <div class="table-responsive">
                            <table class="table header-border table-hover verticle-middle">
                                <thead>
                                    <tr>
                                        <th scope="col">Order Id</th>
                                        <th scope="col">Service Id</th>
                                        <th scope="col">Service Name</th>
                                        <th scope="col">Order Date</th>
                                        <th scope="col">Buyer Name</th>
                                        <th scope="col">Buyer Mobile Number</th>
                                        <th scope="col">Delivery Status</th>
                                        <th scope="col">Payment Status</th>
                                        <th scope="col">Actions</th>
                                    </tr>
                                </thead>
                                <tbody> 
                                    {% for req in req_obj %}                     
                                    <tr>
                                        <th>#{{req.id}}</th>
                                         <td>{{ req.serviceId.id}}</td>
                                        <td>{{ req.serviceId.english_service_name}}</td>  
                                        <td>{{ req.start_date|date:"d M  Y"}}</td>       
                                        <td>{{ req.customer.first_name}} {{ req.customer.last_name}}</td>  
                                        <td>{{ req.customer.user.phone_number}}</td> 
                                        <td>
                                         <div class="table-select">
                                            <select class="form-select dropone" >
                                            <option value="0" id="{{req.id}}" {% if req.delivery_status == 0 %}selected{% endif %}>Pending</option>
                                            <option value="1" id="{{req.id}}" {% if req.delivery_status == 1 %}selected{% endif %}>In the way</option>
                                            <option value="2" id="{{req.id}}" {% if req.delivery_status == 2 %}selected{% endif %}>Delivered</option>
                                            </select>
                                         </div>      
                                        </td>
                                        <td>
                                          <label class="status">
                                          {% if req.payment_status == 0 %}
                                              <span>Unpaid</span>
                                            {% elif req.payment_status == 1%}
                                            <span>Paid</span>
                                            {% else %}
                                            <span> Rejected <span>
                                            {% endif %}
                                           </label>
                                        </td>
                                       <td>
                                          <span>
                                            <a class="edit-btn yellow" href="/view-service-request/{{req.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="/create-service-invoice/{{req.id}}" data-toggle="tooltip" data-placement="top" title="" data-original-title="Create Invoice" style="margin-left: 8px;"><i class="icon-envelope color-muted m-r-5"></i> </a>
                                          </span>
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            
                            </table>
                        </div>
                    </div>
                    {% else %}
                    <p> No data found </p>
                    {% endif %}
                </div>
            </div>
        </div>
       
    </div>
     {% if req_obj %}
    <div class="demo-inline-spacing">
            <div class="pagination justify-content-center">
                  {% if req_obj.has_previous %}
                       <li><a href="?page={{ req_obj.previous_page_number }}">&laquo;</a></li>
                  {% else %}
                    <li class="disabled"><span>&laquo;</span></li>
                  {% endif %}
                  {% for i in req_obj.paginator.page_range|slice:"0:10" %}
                    {% if req_obj.number == i %}
                      <li><a class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></a></li>
                    {% else %}
                      <li><a class='page-link' data-href="?page={{ i }}" href="?page={{ i }}">{{ i }}</a></li>
                    {% endif %}
                  {% endfor %}
                  {% if req_obj.has_next %}
                    <li><a href="?page={{ req_obj.next_page_number }}">&raquo;</a></li>
                  {% else %}
                    <li class="disabled"><span>&raquo;</span></li>
                  {% endif %}
            </div>
            {% endif %}
          </div>







  {% comment %} {% if req_obj %}
        <div class="demo-inline-spacing">
            <div class="pagination justify-content-center">
                    {% if req_obj.has_previous %}
                        <li><a href="?page={{ req_obj.previous_page_number }}">&laquo;</a></li>
                    {% else %}
                    <li class="disabled"><a href="#"><span>&laquo;</span></a></li>
                    {% endif %}
                    {% for i in req_obj.paginator.page_range %}
                    {% if req_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 req_obj.has_next %}
                    <li><a href="?page={{ req_obj.next_page_number }}">&raquo;</a></li>
                    {% else %}
                    <li class="disabled"><span>&raquo;</span></li>
                    {% endif %}
            </div>
            </div>
          {% endif %} {% endcomment %}
</div>

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
 function changeUserStatus(elem,main_id){
            var csrf_token = $('input[name="csrfmiddlewaretoken"]').val()
            var status;
                if(elem.checked) {
                    $(elem).prop("checked");
                }
                $('[name="status"]').val(elem.checked);
        
                if(elem.value == "true"){
                    status = 1;
                }else if(elem.value == "false"){
                    status = 0;
                }
                $.ajax({
                    url:"/change-user-status",
                    type:"POST",
                    data:{status:status,csrfmiddlewaretoken:csrf_token,main_id:main_id},
                    success:function(res){
                        window.location.href = res;	
                    }
                });
        }


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

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

            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")
            }



        $('.dropone').change(function() {    
            var csrf_token = $('input[name="csrfmiddlewaretoken"]').val()

            var item=$(this);
            var id = this.options[this.selectedIndex].id;
             $.ajax({
                type: "POST",
                url: "/change-service-status/"+id,
                data:{action:item.val(),csrfmiddlewaretoken:csrf_token},
                success:function(res){
                 window.location.href = res;	
                }
            });
        });
            </script>


{% endblock %}