<!-- <style>
    .edit_box{
        margin-left: 0;
        margin-right: -5.5%;
    }
    .edit_user_box{
        padding-right: unset;
        padding-left: unset;
    }
</style> -->
<%- include("../partials/headerlinks.ejs") %>
<%- include ("../partials/header.ejs") %>
<%- include ("../partials/sidebar.ejs") %>
    <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">Company</h4>

                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="/dashboard">Dashboards</a></li>
                                    <li class="breadcrumb-item active">Company</li>
                                </ol>
                            </div>

                        </div>
                    </div>
                </div>       
                <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">Company List</h5>
                                    <div class="flex-shrink-0">
                                        <a class="btn btn-success add-btn" href="/company/view" id="create-btn"><i class=""></i> Create Company</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-xxl-5 col-sm-6">
                                            <div class="search-box">
                                                <input type="text" class="form-control search" placeholder="Search for store name, email, store status or something..." name="searchText" value="<%= searchText %>" id="searchInput">
                                                <i class="ri-search-line search-icon"></i>
                                            </div>
                                        </div>
                                        <div class="col-xxl-2 col-sm-2">
                                            <button type="button" class="btn btn-primary" onclick="searchItem()">Search</button>
                                            <button type="button" class="btn btn-secondary" onclick="clearSearch()">Clear</button>
                                        </div>
                                    </div>
                                    <!--end row-->
                                </form>
                            </div>
                            <div class="card-body pt-0">
                                <div>
                                    <ul class="nav nav-tabs nav-tabs-custom nav-success mb-3" role="tablist">
                                    </ul>

                                    <div class="table-responsive table-card mb-1">
                                        <table class="table table-nowrap align-middle" id="orderTable">
                                            <thead class="text-muted table-light">
                                                <tr class="text-uppercase">                                                    
                                                    <th>Sl No</th>
                                                    <th>Logo</th>
                                                    <th>Company Name</th>
                                                    <th>Mobile No.</th>
                                                    <th>Email</th>
                                                    <th>Status</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                           <tbody>
                                            <% var i= 1;
                                            arrData.forEach(function(val) { %>
                                            <tr>                                                
                                                <td><a class="fw-medium link-primary "><%= i %></a></td>
                                                <td>
                                                    <% if(val.image !='' && val.image != null){%>
                                                        <a href="<%= baseurl + 'upload/company/' + val.image%>" target="_blank"><img src="<%= baseurl + 'upload/company/' + val.image%>" alt="<%= val.image %>" class="product_img" height="50px" width="50px" style="object-fit: contain;"></a>
                                                    <% }else{ %>
                                                        <a href="<%= baseurl+ 'admin/client/no_image.jpg' %>"><img src="<%= baseurl + 'admin/client/no_image.jpg' %>" class="product_img" height="50px" width="50px" ></a>
                                                    <% } %>
                                                </td>
                                                <td><%= val.company_name %> </td>
                                                <td><%= val.phone %> </td>
                                                <td><%= val.email %> </td>
                                                <td>
                                                    <%if(val.status=='y ' || val.status=='y') {%> <span class="badge badge-soft-warning text-uppercase">Active</span><% } else {%> <span class="badge badge-soft-warning text-uppercase">Inactive</span> <% } %>
                                                </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="/company/view/<%= val.id %>?page=<%= currentPage %>&pagesize=<%= pageSize %>" 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="#deleteRecordModal">
                                                        <i class="ri-delete-bin-5-fill fs-16 delete-icon" id="<%=val.id%>" data-currentPage="<%= currentPage %>" data-pageSize="<%= pageSize %>" data-searchText="<%= searchText %>"></i>
                                                    </a>
                                                </li>
                                                    </ul>
                                                </td>
                                                
                                            </tr>
                                            <% i++; }) %>
                                           </tbody>
                                        </table>
                                       <!-- Modal -->
                                      <div class="modal fade zoomIn" id="deleteRecordModal" tabindex="-1" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="btn-close"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="mt-2 text-center">
                                                        <lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#f7b84b,secondary:#f06548" style="width:100px;height:100px"></lord-icon>
                                                        <div class="mt-4 pt-2 fs-15 mx-4 mx-sm-5">
                                                            <h4>Are you sure ?</h4>
                                                            <p class="text-muted mx-4 mb-0">Are you sure you want to remove this record ?</p>
                                                        </div>
                                                    </div>
                                                    <div class="d-flex gap-2 justify-content-center mt-4 mb-2">
                                                        <button type="button" class="btn w-sm btn-light" data-bs-dismiss="modal">Close</button>
                                                        <button type="button" class="btn w-sm btn-danger" id="delete-record">Yes, Delete It!</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--end modal -->
                                    </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 %>company/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 %>company/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 %>company/list?currentPage=<%= j %>&pageSize=<%= pageSize %><% if (searchText) { %>&searchText=<%= searchText %><% } %>" class="page-item pagination-next"><%= j %></a>
                                                            </li>
                                                            <% } %>
                                                        <% } %>
                                                    <% } %>
                                                </ul>
                                                <% if (currentPage < pageCount) { %>
                                                        <a href="<%= baseurl %>company/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>
                            </div>
                        </div>

                    </div>
                    <!--end col-->
                </div>
                        <!--end row-->
                <!-- End Page-content -->
            </div>
            <!-- container-fluid -->
        </div>

        <script src="https://code.jquery.com/jquery-3.7.0.slim.min.js" integrity="sha256-tG5mcZUtJsZvyKAxYLVXrmjKBVLd6VpVccqz/r4ypFE=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.35.3/apexcharts.min.js"></script>
        <%- include("../partials/footerlinks.ejs") %>
        <%- include ("../partials/footer.ejs") %>
            <script type="text/javascript">
                function display1() {
                    var c = 0;
                    var element = document.activeElement;
                    while (c < 1) {
                        responsiveVoice.speak(element.value, "Hindi Female");
                        c++;
                    }
                }
                window.onload = function () {
                    document.getElementById("wel").focus();
                };
                function savetext() {
                    var cookieValue = document.activeElement.innerHTML;
                    responsiveVoice.speak(cookieValue, "Hindi Female");
                }

                function getval(cat) {
                    window.open('<%= adminbaseurl %>dashboard?filter=' + cat.value, "_self");
                }

            </script>
<script
src="https://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script type="text/javascript">
    function toggleFields() {
        var productDuration = document.getElementById("productDuration").value;

        window.location.href = `?productDuration=${productDuration}`
    }   
</script>

    

<script>
    function searchItem() {
        const searchText = $('input[name="searchText"]').map(function() {
        return $(this).val();
        }).get();
        window.location.href = `<%= baseurl %>company/list?searchText=${searchText}`
    };

    $("document").ready(function (){
        $(".delete-icon").click(function(){
            const id = $(this).attr("id");
            const currentPage = $(this).attr("data-currentPage");
            const pageSize = $(this).attr("data-pageSize");
            const searchText = $(this).attr("data-searchText");
            const url = `/company/delete/${id}?currentPage=${currentPage}&pageSize=${pageSize}&searchText=${searchText}`;
            $("#deleteRecordModal").attr("data-url", url);
        })
    })

    $("#delete-record").click(function (){
        const url = $(this).closest("#deleteRecordModal").attr("data-url");
        location.href = url;
    })
</script>


<script>
    function clearSearch() {
    document.getElementById('searchInput').value = '';
    
    searchItem();
}
    </script>