<%- include("../partials/headerlinks") %>
<style>
    .edit_box{
        margin-left: 0;
        margin-right: -5.5%;
    }
    .edit_user_box{
        padding-right: unset;
        padding-left: unset;
    }
</style>
    <body>

        <!-- Begin page -->
        <div id="layout-wrapper">
            <%- include("../partials/header") %>
            <%- include("../partials/sidebar") %>

            <!-- Vertical Overlay-->
            <div class="vertical-overlay"></div>

            <!-- ============================================================== -->
            <!-- Start right Content here -->
            <!-- ============================================================== -->
            <div class="main-content">

                <div class="page-content">
                    <div class="container-fluid">
    
                        <!-- start page title -->
                        <div class="row">
                            <div class="col-12">
                                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                                    <h4 class="mb-sm-0"><%=title%></h4>
    
                                    <div class="page-title-right">
                                        <ol class="breadcrumb m-0">
                                            <li class="breadcrumb-item"><a href="/dashboard">Home</a></li>
                                            <li class="breadcrumb-item active"><%=title%></li>
                                        </ol>
                                    </div>
    
                                </div>
                            </div>
                        </div>
                        <!-- end page title -->
    
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="card" id="orderList">
                                    <div class="card-header  border-0">
                                        <div class="d-flex align-items-center">
                                            <h5 class="card-title mb-0 flex-grow-1"><%=title%></h5>
                                            <div class="flex-shrink-0">
                                                    <!-- <a href="#showModal" data-bs-toggle="modal" class="btn btn-success add-btn" id="create-btn"><i class="ri-add-line align-bottom me-1"></i>Create Co-ordinator</a> -->
                                                <!-- <button type="button" class="btn btn-info"><i class="ri-file-download-line align-bottom me-1"></i> Import</button>
                                                <button class="btn btn-soft-danger" onClick="deleteMultiple()"><i class="ri-delete-bin-2-line"></i></button> -->
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card-body border border-dashed border-end-0 border-start-0">
                                        <form id="searchForm">
                                            <div class="row g-3">
                                                <div class="col-xl-4">
                                                    <div class="search-box">
                                                        <input type="text" name="searchText" value="<%= searchItem %>" class="form-control search" placeholder="Search for name, email, phone, status or something...">
                                                        <i class="ri-search-line search-icon"></i>
                                                    </div>
                                                </div>
                                                <div class="col-xl-2">
                                                    <div>
                                                        <select class="form-select" name="status" id="statusFilter">
                                                            <option value="">All Statuses</option>
                                                            <option value="New" <%= statusFilter === 'New' ? 'selected' : '' %>>New</option>
                                                            <option value="Followup" <%= statusFilter === 'Followup' ? 'selected' : '' %>>Followup</option>
                                                            <option value="Complete" <%= statusFilter === 'Complete' ? 'selected' : '' %>>Complete</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-xl-2">
                                                    <div>
                                                        <select class="form-select" name="type" id="typeFilter">
                                                            <option value="">All Types</option>
                                                            <option value="support" <%= typeFilter === 'support' ? 'selected' : '' %>>Support</option>
                                                            <option value="subscription" <%= typeFilter === 'subscription' ? 'selected' : '' %>>Subscription</option>
                                                            <option value="call back" <%= typeFilter === 'call back' ? 'selected' : '' %>>Call Back</option>
                                                            <option value="other" <%= typeFilter === 'other' ? 'selected' : '' %>>Other</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-xl-4">
                                                    <div class="row g-3">
                                                        <div class="col-sm-6">
                                                            <div>
                                                                <button type="submit" class="btn btn-secondary w-100"> <i class="ri-search-line me-2 align-bottom"></i>Search</button>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <div>
                                                                <button type="button" class="btn btn-primary w-100" id="clearListSearch"> <i class=" ri-find-replace-line me-2 align-bottom"></i>Clear</button>
                                                            </div>
                                                        </div>
                                                        <!--end col-->
                                                    </div>
                                                </div>
                                            </div>
                                            <!--end row-->
                                        </form>
                                    </div>
                                    <div class="card-body pt-0">
                                        <div>
                                            <div class="table-responsive table-card mb-1 mt-2">
                                                <table class="table table-nowrap align-middle" id="orderTable">
                                                    <thead class="text-muted table-light">
                                                        <tr class="text-uppercase">
                                                            <th></th>
                                                            <th class="sort">Name</th>
                                                            <th class="sort">Phone No</th>
                                                            <th class="sort">Type</th>
                                                            <th class="sort" data-sort="date">Status</th>
                                                            <th class="sort" data-sort="date">Remarks</th>
                                                            <!-- <th class="sort">Action</th> -->
                                                        </tr>
                                                    </thead>
                                                    <tbody class="list form-check-all">
                                                            <% var cn=1; list.forEach(function(item) { %>
                                                                <tr>
                                                                    <td></td>
                                                                    <td><%=item.name%></td>
                                                                    <td><%=item.mobile%></td>
                                                                    <td><%=item.type%></td>
                                                                    <td>
                                                                        <select class="status-dropdown" data-id="<%= item.id %>">
                                                                          <% ["New", "Followup", "Complete"].forEach(function(status) { %>
                                                                            <option value="<%= status %>" <%= item.status === status ? "selected" : "" %>><%= status %></option>
                                                                          <% }) %>
                                                                        </select>
                                                                      </td>
                                                                    <td><%=item.remark%></td>
                                                                    <!-- <td>
                                                                        <ul class="list-inline hstack gap-2 mb-0">
                                                                            <li class="list-inline-item edit" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Edit">
                                                                                <a href="/inquery/edit/<%=item.id%>" class="text-primary d-inline-block edit-item-btn">
                                                                                    <i class="ri-pencil-fill fs-16"></i>
                                                                                </a>
                                                                            </li>
                                                                            <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Remove">
                                                                                <a class="text-danger d-inline-block remove-item-btn" data-bs-toggle="modal" href="#deleteOrder" data-id="<%=item.id%>">
                                                                                    <i class="ri-delete-bin-5-fill fs-16"></i>
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </td> -->
                                                                </tr>
                                                            <% cn++; }) %>
                                                    </tbody>
                                                </table>
                                                <% if (!list || list.length <1) { %>
                                                    <div class="noresult">
                                                        <div class="text-center">
                                                            <lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop" colors="primary:#405189,secondary:#0ab39c" style="width:75px;height:75px"></lord-icon>
                                                            <h5 class="mt-2">Sorry! No Result Found</h5>
                                                            <p class="text-muted">We've searched more than 150+ Orders We did not find any orders for you search.</p>
                                                        </div>
                                                    </div>
                                                <% } %>
                                            </div>
                                            <!--====================================== Pagination Start ======================================-->
                                            <% if (listCount > 0) { %>
                                                <div class="d-flex justify-content-between">
                                                    <div class="table_info text-center">
                                                        Showing
                                                        <% if (((currentPage - 1) * pageSize) + 1 == listCount) { %>
                                                        <%= listCount %>
                                                        <% } else { %>
                                                        <%= ((currentPage - 1) * pageSize) + 1 %> to <%= currentPage == pageCount ? listCount : (currentPage * pageSize) %>
                                                        <% } %>
                                                        of <%= listCount %> entries
                                                    </div>
                                                    <div class="pagination-wrap hstack gap-2">
                                                        <% if (currentPage > 1) { %>
                                                            <a href="<%= baseurl %>inquery/list/1?page=<%= currentPage - 1 %>&pagesize=<%= pageSize %><% if (searchItem) { %>&searchText=<%= searchItem %><% } %><% if (statusFilter) { %>&status=<%= statusFilter %><% } %><% if (typeFilter) { %>&type=<%= typeFilter %><% } %>" class="page-item pagination-prev">
                                                                Previous
                                                            </a>
                                                        <% } else { %>
                                                            <a href="javascript:void(0)" class="page-item pagination-prev disabled">
                                                                Previous
                                                            </a>
                                                        <% } %>
                                                        <ul class="pagination listjs-pagination mb-0">
                                                            <% for (var j = 1; j <= pageCount; j++) { %>
                                                                <% if (j >= currentPage - 2 && j <= currentPage + 2) { %> <!-- Display current page with +/- 2 pages -->
                                                                    <% if (currentPage == j) { %>
                                                                    <li>
                                                                        <a href="<%= baseurl %>inquery/list/1?page=<%= j %>&pagesize=<%= pageSize %><% if (searchItem) { %>&searchText=<%= searchItem %><% } %><% if (statusFilter) { %>&status=<%= statusFilter %><% } %><% if (typeFilter) { %>&type=<%= typeFilter %><% } %>" class="page-item pagination-next bg-primary text-white"><%= j %></a>
                                                                    </li>
                                                                    <% } else { %>
                                                                    <li>
                                                                        <a href="<%= baseurl %>inquery/list/1?page=<%= j %>&pagesize=<%= pageSize %><% if (searchItem) { %>&searchText=<%= searchItem %><% } %><% if (statusFilter) { %>&status=<%= statusFilter %><% } %><% if (typeFilter) { %>&type=<%= typeFilter %><% } %>" class="page-item pagination-next"><%= j %></a>
                                                                    </li>
                                                                    <% } %>
                                                                <% } %>
                                                            <% } %>
                                                        </ul>
                                                        <% if (currentPage < pageCount) { %>
                                                                <a href="<%= baseurl %>inquery/list/1?page=<%= currentPage + 1 %>&pagesize=<%= pageSize %><% if (searchItem) { %>&searchText=<%= searchItem %><% } %><% if (statusFilter) { %>&status=<%= statusFilter %><% } %><% if (typeFilter) { %>&type=<%= typeFilter %><% } %>" class="page-item pagination-next">Next</a>
                                                        <% } else { %>
                                                                <a href="javascript:void(0)" class="page-item pagination-next disabled">Next</a>
                                                        <% } %>
                                                    </div>
                                                </div>
                                            <% } %>
                                            <!--====================================== Pagination End ======================================-->
                                        </div>

    
                                        <!-- Modal -->
                                        <div class="modal fade flip" id="deleteOrder" tabindex="-1" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered">
                                                <div class="modal-content">
                                                    <div class="modal-body p-5 text-center">
                                                        <lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#405189,secondary:#f06548" style="width:90px;height:90px"></lord-icon>
                                                        <div class="mt-4 text-center">
                                                            <h4>You are about to delete the record?</h4>
                                                            <p class="text-muted fs-15 mb-4">Deleting this record will remove all of your information from our database.</p>
                                                            <div class="hstack gap-2 justify-content-center remove">
                                                                <button class="btn btn-link link-success fw-medium text-decoration-none" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</button>
                                                                <button class="btn btn-danger" id="delete-record">Yes, Delete It</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--end modal -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <%- include("../partials/footer") %>
            </div>
        </div>
        <%- include("../partials/footerlinks") %>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.2/dist/jquery.validate.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.2/dist/additional-methods.min.js"></script>

        <script>
            $(document).ready(function() {
                // Clear search functionality
                $("#clearListSearch").on("click", function () {
                    window.location.href = '/inquery/list/1?pagesize=<%= pageSize %>';
                });

                // Auto-submit form when status or type changes
                $("#statusFilter, #typeFilter").change(function() {
                    $("#searchForm").submit();
                });

                // Individual status update functionality
                $('.status-dropdown').change(function() {
                    const status = $(this).val();
                    const id = $(this).data('id');
            
                    $.ajax({
                        url: '/inquery/status-update', 
                        method: 'POST',
                        data: { id, status },
                        success: function(response) {
                            // Show success message
                            toastr.success('Status updated successfully');
                        },
                        error: function(err) {
                            toastr.error('Error updating status');
                        }
                    });
                });

                // Delete record functionality
                // $('#delete-record').click(function() {
                //     const id = $('.remove-item-btn').data('id');
                    
                //     $.ajax({
                //         url: '/inquery/delete/' + id,
                //         method: 'DELETE',
                //         success: function(response) {
                //             $('#deleteOrder').modal('hide');
                //             toastr.success('Record deleted successfully');
                //             setTimeout(function() {
                //                 location.reload();
                //             }, 1000);
                //         },
                //         error: function(err) {
                //             toastr.error('Error deleting record');
                //         }
                //     });
                // });
            });
        </script>
    </body>
</html>