<%- include('../layout/header.ejs') %>
<body id="kt_app_body" data-kt-app-header-fixed="true" data-kt-app-header-fixed-mobile="true" data-kt-app-sidebar-enabled="true" data-kt-app-sidebar-fixed="true" data-kt-app-sidebar-hoverable="true" data-kt-app-sidebar-push-toolbar="true" data-kt-app-sidebar-push-footer="true" data-kt-app-toolbar-enabled="true" data-kt-app-aside-enabled="true" data-kt-app-aside-fixed="true" data-kt-app-aside-push-toolbar="true" data-kt-app-aside-push-footer="true" class="app-default">
    <div class="d-flex flex-column flex-root app-root" id="kt_app_root">
        <div class="app-page flex-column flex-column-fluid" id="kt_app_page">
            <%- include('../layout/navbar.ejs') %>
            <div class="app-wrapper flex-column flex-row-fluid" id="kt_app_wrapper">
                <%- include('../layout/sidebar.ejs') %>
                <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
                    <div class="d-flex flex-column flex-column-fluid">
                        <div id="kt_app_toolbar" class="app-toolbar pt-5">
                            <div id="kt_app_toolbar_container" class="app-container container-fluid d-flex align-items-stretch">
                                <div class="app-toolbar-wrapper d-flex flex-stack flex-wrap gap-4 w-100">
                                    <div class="page-title d-flex flex-column gap-1 me-3 mb-2">
                                        <ul class="breadcrumb breadcrumb-separatorless fw-semibold mb-6">
                                            <li class="breadcrumb-item text-gray-700 fw-bold lh-1">
                                                <a href="/view-dashboard" class="text-gray-500">
                                                    <i class="ki-duotone ki-home fs-1 text-gray-900">
                                                        <span class="path1"></span>
                                                        <span class="path2"></span>
                                                        <span class="path3"></span>
                                                        <span class="path4"></span>
                                                    </i>
                                                </a>
                                            </li>
                                            <li class="breadcrumb-item">
                                                <i class="ki-duotone ki-right fs-4 text-gray-700 mx-n1"></i>
                                            </li>
                                            <li class="breadcrumb-item text-gray-900 fw-bold lh-1">Book</li>
                                            <li class="breadcrumb-item">
                                                <i class="ki-duotone ki-right fs-4 text-gray-700 mx-n1"></i>
                                            </li>
                                            <li class="breadcrumb-item text-gray-500 lh-1">View Book</li>
                                        </ul>
                                    </div>
                                    <a href="/add-book" class="btn btn-sm btn-primary d-flex align-items-center lh-1">
                                        <i class="ki-duotone ki-book-open fs-1 text-white-900">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                            <span class="path3"></span>
                                            <span class="path4"></span>
                                        </i>
                                        <span class="ms-2">Add Book</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div id="kt_app_content" class="app-content flex-column-fluid">
                            <div id="kt_app_content_container" class="app-container container-fluid">
                                <div class="row">
                                    <div class="card mb-5 mb-xl-10">
                                        <div class="card-header cursor-pointer book-list" role="button" data-bs-toggle="collapse" data-bs-target="#kt_account_profile_details" aria-expanded="true" aria-controls="kt_account_profile_details">
                                            <div class="card-title pt-5 m-0">
                                                <div class="d-flex align-items-center position-relative my-1">
                                                    <i class="ki-duotone ki-magnifier fs-3 position-absolute ms-4"><span class="path1"></span><span class="path2"></span></i>                
                                                    <input type="text" data-kt-list-table ="search" class="form-control form-control-solid w-250px ps-12" placeholder="Search Book">
                                                </div>
                                            </div>
                                            <div class="card-tool d-flex gap-10 align-items-center">
                                                <div class="select-status w-300px">
                                                    <select class="form-select form-select-solid" aria-label="Select example" name="categoryId" id="filterCategory" data-control="select2" data-hide-search="true" data-dropdown-parent="#kt_header_search" data-placeholder="Select Category...">
                                                        <% if(category.length> 0) { %>
                                                            <option>All</option>
                                                        <% for(let i=0; i < category.length; i++) { %>
                                                            <option value="<%= category[i]._id %>"><%= category[i].name %></option>
                                                        <% } } %> 
                                                    </select>
                                                </div>
                                                <div class="select-status w-300px">
                                                    <select class="form-select form-select-solid" aria-label="Select example" name="authorId" id="filterAuthor" data-control="select2" data-hide-search="true" data-dropdown-parent="#kt_header_search" data-placeholder="Select Author...">
                                                        <% if(author.length> 0) { %>
                                                            <option>All</option>
                                                        <% for(let i=0; i < author.length; i++) { %>
                                                            <option value="<%= author[i]._id %>"><%= author[i].name %></option>
                                                        <% } } %> 
                                                    </select>
                                                </div>
                                                <button id="clearFilters" class="btn btn-sm btn-light">Clear Filters</button>
                                            </div>

                                            <script>
                                                const clearFiltersBtn = document.getElementById('clearFilters');
                                                if (clearFiltersBtn) {
                                                    clearFiltersBtn.addEventListener('click', function() {
                                                    // Reset category dropdown
                                                    document.getElementById('filterCategory').value = 'All';
                                                    // Reset author dropdown 
                                                    document.getElementById('filterAuthor').value = 'All';
                                                    // Reset search input if exists
                                                    const searchInput = document.querySelector('[data-kt-list-table="search"]');
                                                    if (searchInput) searchInput.value = '';
                                                    // Trigger change events to update table
                                                    $('#filterCategory, #filterAuthor').trigger('change');
                                                });
                                                }
                                            </script>
                                        </div>
                                        <div class="card-body pt-5 p-9">
                                                <div class="table-responsive">   
                                        <!-- <table class="table table-hover table-rounded table-row-bordered border gy-7 gs-7" id="kt_datatable_zero_configuration"> -->
                                        <table class="table table-hover table-rounded table-row-bordered border gy-7 gs-7" id="ebook-table">
                                            <thead>
                                                <tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">
                                                    <th>Sr No</th>
                                                    <th>Name</th>
                                                    <th>Access</th>
                                                    <th>Catgeory</th>
                                                    <th>Author</th>
                                                    <th>Status</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody class="fw-semibold text-gray-600">
                                                <% let cnt=1 %>
                                                    <% book.forEach(function(book){ %>
                                                            <tr>
                                                                <td><%= cnt %></td>
                                                                <td><div class="d-flex">
                                                                    <div class="symbol symbol-50px">
                                                                        <span class="symbol-label symbol symbol-50px" style="background-image:url('/assets/bookImages/<%= book.image %>');"></span>
                                                                    </div>
                                                                    <h2  class="text-gray-800 ps-5 pt-5 fs-5"><%= book.name %></h2>
                                                                </div>
                                                                </td>
                                                                <td class="text-gray-800 fs-5"><%= book.access_type %></td>
                                                                <td class="text-gray-800 fs-5">
                                                                    <span class="badge badge-success"><%= book.categoryId ? book.categoryId.name : 'Uncategorized' %></span>
                                                                </td>
                                                                <td class="text-gray-800 fs-5"><%= book.authorId.name %></td>
                                                                <% if(loginData.is_admin == 1) { %>
                                                                <td>
                                                                    <form action="/book-is-active/<%= book._id %>/toggle" id="featureForm" method="POST">
                                                                        <a id="toggleButton">
                                                                            <div class="form-check form-switch mb-0">
                                                                                <input type="hidden" name="title" value="<%= book.name%>"/>
                                                                                <input class="form-check-input" type="checkbox" name="is_active"
                                                                            id="flexSwitchCheckDefault" <% if(book.is_active==1) { %> checked <% }else{} %>>
                                                                            </div>
                                                                        </a>
                                                                    </form>
                                                                </td>
                                                                <td>
                                                                    <div class="action-links d-flex align-items-center gap-5">
                                                                        <a href="/edit-book?id=<%= book._id %>">
                                                                            <i class="fa-regular fa-pen-to-square text-primary"></i>
                                                                        </a>
                                                                        <a href="" class="ms-3" data-bs-toggle="modal" data-bs-target="#kt_modal_stacked_<%= book._id %>">
                                                                            <i class="fa-solid fa-trash-can text-danger"></i>
                                                                        </a>
                                                                    </div>
                                                                </td> 
                                                                <% } else { %>
                                                                    <td>
                                                                        <div class="form-check form-switch mb-0" onclick="alert('You have no access to change status..!!*')">
                                                                        <input class="form-check-input" type="checkbox" name="is_active" id="flexSwitchCheckDefault"  <% if(book.is_active==1) { %> checked <% }else{} %>disabled>
                                                                    </div></td>
                                                                    <td>
                                                                        <div class="action-links d-flex align-items-center gap-5">
                                                                            <a onclick="alert('You have no access to edit Book..!!*')">
                                                                                <i class="fa-regular fa-pen-to-square text-primary"></i>
                                                                            </a>
                                                                            <a onclick="alert('You have no access to delete Book..!!*')" class="ms-3">
                                                                                <i class="fa-solid fa-trash-can text-danger"></i>
                                                                            </a>
                                                                        </div>
                                                                    </td>
                                                            <% }  %> 
                                                            </tr>
                                                            <div class="modal fade" tabindex="-1" id="kt_modal_stacked_<%= book._id %>" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                                                                <div class="modal-dialog modal-dialog-centered">
                                                                    <div class="modal-content">
                                                                        <div class="modal-header justify-content-center">
                                                                            <div class="modal-title">
                                                                                <img src="assets/media/logos/alert.png" class="h-50">
                                                                            </div>
                                                                            <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                                                                                <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i>
                                                                            </div>
                                                                        </div>
                                                                        <div class="modal-body text-center">
                                                                            <p class="fs-5 fw-semibold">Are you sure you want to delete <b><%= book.name%>?</b></br> 
                                                                                This process cannot be undone.</p>
                                                                        </div>
                                                                        <div class="modal-footer justify-content-center">
                                                                            <a href="/delete-book?id=<%= book._id %>"><button type="button" class="btn btn-danger me-5">Yes,delete!</button></a>
                                                                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">No,cancel</button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <% cnt++; %>
                                                    <% }); %>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    </div>
    <script>
        var flashSuccess = "<%= flash.success.length > 0 ? flash.success : '' %>";
        var flashError = "<%= flash.error.length > 0 ? flash.error : '' %>";
    </script>
    <script src="assets/js/statusEnable.js"></script>
<%- include('../layout/footer.ejs') %>
                                        