<?php
session_start();
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
include('includes/config.php');

if (strlen($_SESSION['login']) == 0) {
    header('location:index.php');
    exit;
}

// Dropdown data
$degree = $dbh->query("SELECT * FROM tbldegree ORDER BY degree_name ASC")->fetchAll(PDO::FETCH_OBJ);
$departments = $dbh->query("SELECT * FROM tbldepartment ORDER BY department_name ASC")->fetchAll(PDO::FETCH_OBJ);
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Library | Available Books</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="icon" href="<?= $_SESSION['logo']; ?>">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        .header-line {
            color: #0d6efd;
            font-size: 20px;
            margin-bottom: 15px;
        }

        .badge-available {
            background: #28a745;
            color: #fff;
        }
    </style>
</head>

<body>
    <?php include('includes/header.php'); ?>

    <div class="main-content p-4">

        <h5 class="header-line"><i class="fa fa-book mr-2"></i> AVAILABLE BOOKS LIST</h5>

        <!-- FILTERS -->
        <div class="card mb-3">
            <div class="card-body">
                <div class="form-row">

                    <div class="col-md-3 mb-2">
                        <select id="degree" class="form-control">
                            <option value="">All Degree</option>
                            <?php foreach ($degree as $deg): ?>
                                <option value="<?= $deg->degree_id ?>"><?= htmlentities($deg->degree_name) ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>

                    <div class="col-md-3 mb-2">
                        <select id="department" class="form-control">
                            <option value="">All Departments</option>
                            <?php foreach ($departments as $dep): ?>
                                <option value="<?= $dep->department_id ?>"><?= htmlentities($dep->department_name) ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>

                    <div class="col-md-4 mb-2">
                        <input type="text" id="search" class="form-control" placeholder="Search book name">
                    </div>

                    <div class="col-md-2 mb-2">
                        <button class="btn btn-primary btn-block" id="filterBtn">
                            <i class="fa fa-search"></i> Apply
                        </button>
                    </div>

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

        <!-- TABLE -->
        <div class="table-responsive">
            <table class="table table-bordered table-sm">
                <thead class="thead-light">
                    <tr>
                        <th>#</th>
                        <th>Book Name</th>
                        <th>Degree</th>
                        <th>Department</th>
                        <th>Edition</th>
                        <!-- <th>Status</th> -->
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody id="booksBody"></tbody>
            </table>
        </div>

        <div class="text-center mt-3">
            <button class="btn btn-outline-primary" id="loadMoreBtn">Load More</button>
        </div>

    </div>

    <!-- VIEW MODAL -->
    <div class="modal fade" id="viewBookModal">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">

                <div class="modal-header bg-secondary text-white">
                    <h5 class="modal-title"><i class="fa fa-book-open"></i> Book Details</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>

                <div class="modal-body" id="bookDetailsContent">
                    <div class="text-center">
                        <div class="spinner-border text-primary"></div>
                    </div>
                </div>

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

    <?php include('includes/footer.php'); ?>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        let limit = 100;
        let offset = 0;
        let loading = false;

        function loadBooks(reset = false) {
            if (loading) return;
            loading = true;

            if (reset) {
                offset = 0;
                $('#booksBody').html('');
                $('#loadMoreBtn').show();
            }

            $.ajax({
                url: 'fetch-books-server.php',
                type: 'POST',
                data: {
                    limit: limit,
                    offset: offset,
                    degree: $('#degree').val(),
                    department: $('#department').val(),
                    search: $('#search').val()
                },
                success: function (res) {
                    if ($.trim(res) === '') {
                        $('#loadMoreBtn').hide();
                    } else {
                        $('#booksBody').append(res);
                        offset += limit;
                    }
                    loading = false;
                }
            });
        }

        $('#loadMoreBtn').click(() => loadBooks());
        $('#filterBtn').click(() => loadBooks(true));

        loadBooks();

        // View book
        $(document).on('click', '.viewBookBtn', function () {
            let id = $(this).data('id');
            $('#viewBookModal').modal('show');
            $('#bookDetailsContent').html('<div class="text-center"><div class="spinner-border text-primary"></div></div>');

            $.get('student-view-book.php', { bookid: id }, function (res) {
                $('#bookDetailsContent').html(res);
            });
        });
    </script>

</body>

</html>