{% include "header.html"  %}
{% load static %}

    <!-- main page  -->
    <div class="mdk-header-layout__content">

        <div class="mdk-drawer-layout js-mdk-drawer-layout" data-push data-responsive-width="992px">
            <div class="mdk-drawer-layout__content page">

                <div class="container page__heading-container">
                    <div class="page__heading">
                       
                    </div>

                    <div class="row mb-3">
                        <div class="col-6">
                            <h1 class="heading">Lead Conversion Report</h1>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb mb-0">
                                    <li class="breadcrumb-item"><a href="#">Home</a></li>
            
                                    <li class="breadcrumb-item active" aria-current="page">Lead Conversion Report</li>
                                </ol>
                            </nav>
                        </div>
                        <div class="col-6">
                            <div class="d-flex justify-content-end">
                                <button type="button" class="add-btn" >export excel</button>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <form method="GET">
                            <div class="row mb-3 d-flex align-items-center">

                                <div class="col-lg-10">
                                    <div class="row g-4">

                                        <!-- Exam Category -->
                                        <div class="col-md-3">
                                            <label class="form-label fw-semibold mb-1">Exam Category</label>
                                            <select name="exam_category" id="exam_category" class="form-control">
                                                <option value="">All Exam Category</option>
                                                {% for exam in exam_categories %}
                                                    <option value="{{ exam.id }}"
                                                        {% if request.GET.exam_category == exam.id|stringformat:"s" %}selected{% endif %}>
                                                        {{ exam.exam_category_name }}
                                                    </option>
                                                {% endfor %}
                                            </select>
                                        </div>

                                        <!-- Course -->
                                        <div class="col-md-3">
                                            <label class="form-label fw-semibold mb-1">Course</label>
                                           <select name="course" id="course" class="form-control">
                                                <option value="">All Courses</option>
                                                {% for course in courses %}
                                                    <option value="{{ course.id }}"
                                                        {% if request.GET.course == course.id|stringformat:"s" %}selected{% endif %}>
                                                        {{ course.course_name }}
                                                    </option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                          <!-- Search -->
                                        <div class="col-md-6">
                                            <label class="form-label fw-semibold mb-1">Search</label>
                                            <input type="text"
                                                name="search"
                                                value="{{ request.GET.search }}"
                                                placeholder="Search by Name, Email or Mobile"
                                                class="form-control">
                                        </div>

                                        <!-- From Date -->
                                        <div class="col-md-6">
                                            <label class="form-label fw-semibold mb-1">From Date</label>
                                            <input type="date"
                                                name="from_date"
                                                value="{{ request.GET.from_date }}"
                                                class="form-control">
                                        </div>

                                        <!-- To Date -->
                                        <div class="col-md-6">
                                            <label class="form-label fw-semibold mb-1">To Date</label>
                                            <input type="date"
                                                name="to_date"
                                                value="{{ request.GET.to_date }}"
                                                class="form-control">
                                        </div>

                                      

                                    </div>
                                </div>

                                <!-- Buttons -->
                                <div class="col-lg-2 d-flex align-items-end">
                                    <div class="w-100 d-flex gap-2">
                                        <button type="submit" class="btn btn-primary w-50">Filter</button>
                                        <a href="{% url 'lead_conversion_report' %}" class="btn btn-secondary w-50">Reset</a>
                                    </div>
                                </div>

                            </div>
                        </form>
                    </div>
                </div>

                <div class="container page__container exam-module">
                    <div class="card card-body">
                        <div class="row no-gutters">

                            <div class="col-lg-12 card-body">

                                <div class="table-responsive border-bottom" data-toggle="lists"
                                    data-lists-values='["js-lists-values-employee-name"]'>

                                  

                                    <table class="table mb-0 thead-border-top-0 text-center">
                                        <thead class="table-heading text-center">
                                            <tr>
                                                <th class="table-head">Sr.No.</th>
                                                <th class="table-head">Student Name</th>
                                                <th class="table-head">Email</th>
                                                <th class="table-head">Mobile No</th>
                                                <th class="table-head">Course</th>
                                                <th class="table-head">Exam Category</th>
                                                <th class="table-head">Registration Date</th>
                                                <th class="table-head">Conversion Status</th>  <!-- NEW COLUMN -->
                                            </tr>
                                        </thead>

                                        <tbody class="tbody align-middle text-center">
                                            {% for student in students %}

                                            {% with student.filtered_orders as orders %}
                                                {% if orders %}
                                                    {% for order in orders %}
                                                        <tr>

                                                            {% if forloop.first %}
                                                                <!-- Student Details with Rowspan -->
                                                                <td rowspan="{{ orders|length }}">
                                                                    {{ students.start_index|add:forloop.parentloop.counter0 }}
                                                                </td>
                                                                <td rowspan="{{ orders|length }}">
                                                                    {{ student.first_name }} {{ student.last_name }}
                                                                </td>
                                                                <td rowspan="{{ orders|length }}">{{ student.email }}</td>
                                                                <td rowspan="{{ orders|length }}">{{ student.mobile }}</td>
                                                            {% endif %}

                                                            <!-- Course -->
                                                            <td>{{ order.course.course_name }}</td>

                                                            <!-- Exam Category -->
                                                            <td>
                                                                {% for exam in order.course.exams.all %}
                                                                    {{ exam.exam_category_name }}{% if not forloop.last %}, {% endif %}
                                                                {% empty %}
                                                                    -
                                                                {% endfor %}
                                                            </td>

                                                            <!-- Purchase Date -->
                                                            <td>{{ order.created_at|date:"d/m/Y" }}</td>

                                                            {% if forloop.first %}
                                                                <!-- Conversion Status with Rowspan -->
                                                                <td rowspan="{{ orders|length }}">
                                                                    {% if student.is_converted %}
                                                                        <span class="badge bg-success">Converted</span>
                                                                    {% else %}
                                                                        <span class="badge bg-danger">Not Converted</span>
                                                                    {% endif %}
                                                                </td>
                                                            {% endif %}

                                                        </tr>
                                                    {% endfor %}
                                                {% else %}
                                                    <!-- Student with No Orders -->
                                                    <tr>
                                                        <td>{{ students.start_index|add:forloop.counter0 }}</td>
                                                        <td>{{ student.first_name }} {{ student.last_name }}</td>
                                                        <td>{{ student.email }}</td>
                                                        <td>{{ student.mobile }}</td>
                                                        <td>-</td>
                                                        <td>-</td>
                                                        <td>{{ student.created_at|date:"d/m/Y" }}</td>
                                                        <td>
                                                            <span class="badge bg-danger">Not Converted</span>
                                                        </td>
                                                    </tr>
                                                {% endif %}
                                            {% endwith %}

                                            {% empty %}
                                            <tr>
                                                <td colspan="8">No Records Found</td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>

                                </div>
                               
                            </div>

                            <div class="col-lg-12 p-0">
                                <ul class="pagination m-0">

                                    {% if students.has_previous %}
                                    <li class="page-item">
                                        <a class="page-link"
                                        href="?page={{ students.next_page_number }}&exam_category={{ request.GET.exam_category }}&course={{ request.GET.course }}&sales_executive={{ request.GET.sales_executive }}&from_date={{ request.GET.from_date }}&to_date={{ request.GET.to_date }}&search={{ request.GET.search }}"">
                                            <span aria-hidden="true" class="material-icons">chevron_left</span>
                                            <span>Prev</span>
                                        </a>
                                    </li>
                                    {% endif %}

                                    <li class="page-item active">
                                        <a class="page-link" href="#">
                                            {{ students.number }}
                                        </a>
                                    </li>

                                    {% if students.has_next %}
                                    <li class="page-item">
                                        <a class="page-link"
                                        href="?page={{ students.next_page_number }}&exam_category={{ request.GET.exam_category }}&course={{ request.GET.course }}&sales_executive={{ request.GET.sales_executive }}&from_date={{ request.GET.from_date }}&to_date={{ request.GET.to_date }}&search={{ request.GET.search }}"">
                                            <span>Next</span>
                                            <span aria-hidden="true" class="material-icons">chevron_right</span>
                                        </a>
                                    </li>
                                    {% endif %}

                                </ul>
                            </div>
                        </div>
                      
                    </div>

                    
                   

               
                </div>
             
            </div>

            
            <!-- // END drawer-layout__content -->

            <!-- drawer -->
          {% include "sidebar.html"%}
            <!-- // END drawer -->
        </div>
        <!-- // END drawer-layout -->

    </div>
    <!-- // END header-layout__content -->

</div>a

<!-- // END header-layout -->

{% include "footer.html" %}


<script>
$(document).ready(function(){
    $('#course').prop('disabled', true);
    $('#exam_category').change(function(){

        var examId = $(this).val();

        if(examId){
             $('#course').prop('disabled', false);
            $.ajax({
                url: "{% url 'get_courses_by_exam' %}",
                data: {
                    'exam_id': examId
                },
                success: function(data){

                    $('#course').empty();
                    $('#course').append('<option value="">All Courses</option>');

                    $.each(data, function(key, value){
                        $('#course').append(
                            '<option value="'+ value.id +'">'+ value.course_name +'</option>'
                        );
                    });
                }
            });
        }
        else{
            $('#course').prop('disabled', true);
            $('#course').empty();
            $('#course').append('<option value="">All Courses</option>');
        }

    });

});
</script>