<%- 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 class="btn btn-success add-btn" href="/job/create-edit/0" id="create-btn"><i class=""></i> Create Job</a>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card-body border border-dashed border-end-0 border-start-0">
                                        <form>
                                            <div class="row g-3">
                                                <div class="col-xl-8">
                                                    <div class="search-box">
                                                        <input type="text" name="searchText" value="<%= searchText %>" class="form-control search" placeholder="Search for title, company">
                                                        <i class="ri-search-line search-icon"></i>
                                                    </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 class="sort">Title</th>
                                                            <th class="sort">Company</th>
                                                            <th class="sort" data-sort="date">Opening Date</th>
                                                            <th class="sort" data-sort="date">Closing Date</th>
                                                            <th class="sort" data-sort="date">Status</th>
                                                            <th class="sort" data-sort="city">Action</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody class="list form-check-all">
                                                            <% jobList.forEach(job => { %>
                                                                <tr>
                                                                    <td><%= job.title %></td>
                                                                    <td><%= job.Company?.company_name %></td>
                                                                    <td><%= job.opening_date ? moment(job.opening_date).format("YYYY-MM-DD") : '' %></td>
                                                                    <td><%= job.closing_date ? moment(job.closing_date).format("YYYY-MM-DD") : '' %></td>
                                                                    <td><span class="badge badge-soft-<%= job.status === 'y' ? 'success' : 'warning' %> text-uppercase"><%= job.status === 'y' ? 'Active' : (job.status === 'n' ? 'Inactive' : (job.status === 'a' ? 'Archive' : 'Not Approved')) %></span><br></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="/job/create-edit/<%= job.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 edit" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Details">
                                                                                <a href="/job/details/<%= job.id%>"  class="text-primary d-inline-block edit-item-btn">
                                                                                    <i class="ri-eye-line fs-16"></i>
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </td>
                                                                </tr>
                                                            <% }) %>
                                                    </tbody>
                                                </table>
                                                <% if (!jobList || jobList.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+ Jobs We did not find any job 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 %>job/list?currentPage=<%= currentPage - 1 %>&pageSize=<%= pageSize %><% if (searchText) { %>&searchText=<%= searchText %><% } %>" 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 %>job/list?currentPage=<%= j %>&pageSize=<%= pageSize %><% if (searchText) { %>&searchText=<%= searchText %><% } %>" class="page-item pagination-next bg-primary text-white"><%= j %></a>
                                                                    </li>
                                                                    <% } else { %>
                                                                    <li>
                                                                        <a href="<%= baseurl %>job/list?currentPage=<%= j %>&pageSize=<%= pageSize %><% if (searchText) { %>&searchText=<%= searchText %><% } %>" class="page-item pagination-next"><%= j %></a>
                                                                    </li>
                                                                    <% } %>
                                                                <% } %>
                                                            <% } %>
                                                        </ul>
                                                        <% if (currentPage < pageCount) { %>
                                                                <a href="<%= baseurl %>job/list?currentPage=<%= currentPage + 1 %>&pageSize=<%= pageSize %><% if (searchText) { %>&searchText=<%= searchText %><% } %>" 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>
                            <!--end col-->
                        </div>
                        <!--end row-->
    
                    </div>
                    <!-- container-fluid -->
                </div>
                <!-- End Page-content -->


                <%- include("../partials/footer") %>
            </div>
                <!-- end main content-->

        </div><!-- END layout-wrapper -->
        <%- 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>
    </body>
</html>


<script>
    $("#clearListSearch").on("click", function () {
        $('input[name="search"]').val('');
        window.location.href = '/job/list';
    });
</script>



