{% extends 'admin_dash/base.html' %}


{% load static %}
{% load humanize %}
{% block content %}
<script src="https://cdn.ckeditor.com/ckeditor5/30.0.0/classic/ckeditor.js"></script>
<div class="content-wrapper">
    <div class="content">
        <div class="row">
            {% for field in form %}
            {% for error in field.errors %}
            <label class="text-{{msg.tags}} text-center col-12" style="text-align: center;">{{error}}</label>
            {% endfor %}
            {% endfor%}
            {% for course in webCourses %}
            <div class=" col-12">
                <!-- Top Sell Table -->
                <div class="card card-table-border-none" data-scroll-height="">
                    <div class="card-header">
                        <h4>{{course}}</h4>
                    </div>
                    <div class="card-body slim-scroll">
                       <table class="table card-table table-responsive table-responsive-large" style="width:100%">
                            <thead>
                                <tr>
                                    <th class="d-none d-md-table-cell">Bacth No</th>
                                    <th>Name</th>
                                    <th class="d-none d-md-table-cell">REG ID</th>
                                    <th class="d-none d-md-table-cell">Paid</th>
                                    <th class="d-none d-md-table-cell">Slot No</th>
                                    <th class="d-none d-md-table-cell">Completed</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for reg in reg_users %}
                                {% if reg.course == course %}
                                <tr>
                                    <td>{{reg.batch_no}}</td>
                                    <td>{{reg.user.get_full_name}}</td>
                                    <td>
                                        <a class="text-dark" href=""> {{reg.registration_id}}</a>
                                    </td>
                                    <td class="d-none d-md-table-cell">{{reg.paid}}</td>
                                    <td class="d-none d-md-table-cell">{{reg.number_of_slots}}</td>
                                     <td class="d-none d-md-table-cell">{{reg.completed}}</td>
                  
                                </tr>

                                <!--Order details Modal -->
                                <div class="modal fade" id="exampleModal{{order.order_id}}" tabindex="-1"
                                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalLabel">Order Details</h5>
                                                <button type="button" class="btn-close" data-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <label>Track ID: {{order.track_id}}</label><br>
                                                <label>Product Name: {{order.product.name}}</label><br>
                                                <label>Qty Bought: {{order.qty}}</label><br>
                                                <label>Order On: {{order.date_added}}</label><br>
                                                <label>Total Cost: #{{order.total_price}}</label><br>
                                                <label>Total Discount: #{{order.total_discount}}</label><br>
                                                <label>Delivery Address: {{order.street}} {{order.city}},
                                                    {{order.state}}</label><br>
                                                <label>Contact Number: {{order.contact}}</label>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-danger"
                                                    data-dismiss="modal">Close</button>
                                                {% if not order.cancelled%}
                                                {% if order.completed %}
                                                <a href=""><button
                                                        type="button" class="btn btn-warning text-white">Mark
                                                        Pending</button></a>
                                                {% else %}
                                                <a href=""><button
                                                        type="button" class="btn btn-success text-white">Mark
                                                        Completed</button></a>
                                                {% endif %}
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!--Cancel Order Modal -->
                                <div class="modal fade" id="exampleModal{{order.track_id}}{{order.pk}}" tabindex="-1"
                                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalLabel">Order Details</h5>
                                                <button type="button" class="btn-close" data-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <label>Do you want to cancel this order?</label><br>
                                                <label>Track ID: {{order.track_id}}</label><br>
                                                <label>Product Name: {{order.product.name}}</label><br>
                                                <label>Ordered By: {{order.user.first_name}}
                                                    {{order.user.last_name}}</label>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-success"
                                                    data-dismiss="modal">Close</button>
                                                <a href=""><button
                                                        type="button" class="btn btn-danger">Cancel Order</button></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% endif %}
                                {% endfor %}

                            </tbody>
                        </table>
                        
                       
                    </div>
                   
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
<script>
    ClassicEditor
        .create(document.querySelector('#editor'))
        .catch(error => {
            console.error(error);
        });

    ClassicEditor
        .create(document.querySelector('#editor1'))
        .catch(error => {
            console.error(error);
        });
</script>

{% endblock content %}