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

<!-- Begin Page Content -->
<title>Manimaran | Rating Review Listing</title>
<div class="container-fluid">
    <div class="inner-content">
        <!-- Page Heading -->
        <div class="top-bar mb-4 d-flex justify-content-between align-items-center">
            <h2 class="topHead">Rating Review</h2>
            <!-- <p class="f-13">Welcome to Lorem Ipsum Admin Dashboard</p> -->
        </div>
        <div class="export-btn">
            <button class="outline-btn" onclick="location.href='export-csv-rating-review'" type="submit">Export CSV</button>
        </div>
        <div class="manage-user-data table-customer border-0 mt-4">
            <div class="card px-0">
                <div class="card-header bg-white ">
                    <h2 class="f-20 mb-0">All Rating Review</h1>
                </div>
                <div class="manage-user-table">
                    <div class="table-responsive">
                        {% if rating_obj %}
                        <table class="table" id="dataTable" width="100%" cellspacing="0">
                            <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>Service Provider Name</th>
                                    <th>Customer Name</th>
                                    <th>Booking ID</th>
                                    <th>Rating</th>
                                    <th>Date</th>
                                    <th>Action</th>

                                </tr>
                            </thead>
                            <tbody>
                            {% for rating in rating_obj%}
                                <tr>
                                    <td>{{ rating.id }}</td>
                                    <td>
                                        <div class="table-users name"><img src="{% if rating.service_provider.avatar %} {{rating.service_provider.avatar}} {% else %}{% static 'admin/images/user.png' %}{% endif %}" alt=""> {{rating.service_provider.first_name}} {{rating.service_provider.last_name}}  </div>
                                    </td>
                                    <td>
                                        <div class="table-users name"><img src="{% if rating.user.avatar %} {{rating.user.avatar}} {% else %}{% static 'admin/images/user.png' %}{% endif %}" alt=""> {{rating.user.first_name}} {{rating.user.last_name}}  </div>
                                    </td>
                                    <td>{{ rating.booking.booking_id }}</td>
                                    <td>
                                        <ul class="rating-star">
                                            {% if rating.rating ==  1 %}
                                            <li><i class="fa-solid fa-star"></i></li>
                                            {% elif rating.rating ==  2 %}
                                            <li><i class="fa-solid fa-star"></i></li>
                                            <li><i class="fa-solid fa-star"></i></li>
                                            {% elif rating.rating ==  3 %}
                                            <li><i class="fa-solid fa-star"></i></li>
                                            <li><i class="fa-solid fa-star"></i></li>
                                            <li><i class="fa-solid fa-star"></i></li>
                                             {% elif rating.rating ==  4 %}
                                            <li><i class="fa-solid fa-star"></i></li>
                                            <li><i class="fa-solid fa-star"></i></li>
                                            <li><i class="fa-solid fa-star"></i></li>
                                            <li><i class="fa-solid fa-star"></i></li>
                                            {% else %}
                                            <li><i class="fa-solid fa-star"></i></li>
                                            <li><i class="fa-solid fa-star"></i></li>
                                            <li><i class="fa-solid fa-star"></i></li>
                                            <li><i class="fa-solid fa-star"></i></li>
                                            <li><i class="fa-solid fa-star"></i></li>
                                            {% endif %}

                                        </ul>
                                    </td>
                                    <td>{{ rating.start_date|date:"d M  Y" }}</td>
                                     <td>
                                        <div class="action-btns"> 
                                            <a onclick="theFunction({{rating.id}});"  class="edit-btn"><img src="{% static 'admin/images/delete.svg' %}"></a>

                                            <a href="/get-ratings-reviews-details/{{rating.id}}" class="edit-btn"><img src="{% static 'admin/images/view.svg' %}"></a>
                                        </div>
                                    </td>
                                </tr> 
                                {% endfor %}
                            </tbody>
                        </table>
                        {% else %}
                        <p style="text-align: center;">No data found</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</div>

 {% if rating_obj %}
        <div class="demo-inline-spacing">
            <div class="pagination justify-content-center">
             <ul class="pagination">
                  {% if rating_obj.has_previous %}
                       <li><a href="?page={{ rating_obj.previous_page_number }}">&laquo;</a></li>
                  {% else %}
                    <li class="disabled"><span>&laquo;</span></li>
                  {% endif %}
                  {% for i in rating_obj.paginator.page_range %}
                    {% if rating_obj.number == i %}
                      <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
                    {% else %}
                      <li><a class='page-link ' data-href="?page={{ i }}" href="?page={{ i }}">{{ i }}</a></li>
                    {% endif %}
                  {% endfor %}
                  {% if rating_obj.has_next %}
                    <li><a href="?page={{ rating_obj.next_page_number }}">&raquo;</a></li>
                  {% else %}
                    <li class="disabled"><span>&raquo;</span></li>
                  {% endif %}
                  </ul>
            </div>
          </div>
          {% endif %}


<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Do you want to delete this rating and review?</h5>
                    <button class="close" type="button"  data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                         <input type="hidden" id="model_delete_id">
                    </button>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button"  data-bs-dismiss="modal">Cancel</button>
                    <button type="btn btn-secondary" id="delete-customer" class="btn btn-primary">Yes</button>
                </div>
            </div>
        </div>
    </div>

<!-- /.container-fluid -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
  integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
  integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function theFunction(e){
    $('#model_delete_id').val(e)
        $('#deleteModal').modal('show');
        return false;
    }

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

</script>
{% endblock %}