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

$userlogin = $_SESSION['studentid'];
$intake    = $_SESSION['intake'];
$program   = $_SESSION['program'];

if (!isset($_SESSION['studentid'])) {
    header("location:../index.php");
    exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Library</title>
    <link rel="stylesheet" href="../../boostrap/1.css">
    <link rel="stylesheet" href="../../boostrap/2.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="icon" href="favicon.png" type="image/png">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <meta name="theme-color" content="var(--primary)">
    <script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Signika+Negative:wght@300..700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="res/bootstrap@5.2.0.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Rowdies:wght@300;400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        body {
            padding: 0px;
            margin: 0px;
            font-size: 16px;
            width: 100%;
            background: white;
            font-family: 'Source Sans Pro', sans-serif;
        }
        nav {
            background: var(--primary);
            line-height: 60px;
        }
        nav a {
            color: white;
            text-decoration: none;
        }
        .content {
            margin-left: 200px;
            padding: 20px;
        }
        .btn {
            background: var(--primary);
            border: none;
            border-radius: 2px;
            outline: none;
            color: white;
            padding: 8px 15px;
        }
        .btn:hover {
            background: #b02a37;
            color: white;
        }
        
        /* Book card style with image as background */
        .book-card {
            position: relative;
            height: 280px;
            width: 100%;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 20px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }
        .book-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
        }
        .book-cover {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
        }
        .book-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: linear-gradient(transparent, rgba(0,0,0,0.8));
            padding: 15px;
            color: white;
            z-index: 2;
        }
        .book-title {
            font-weight: bold;
            font-size: 1rem;
            margin-bottom: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .book-author {
            font-size: 0.85rem;
            opacity: 0.9;
            margin-bottom: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .book-category {
            background: rgba(208, 63, 77, 0.8);
            padding: 3px 8px;
            border-radius: 15px;
            font-size: 0.75rem;
            display: inline-block;
        }
        .book-actions {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 3;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .book-card:hover .book-actions {
            opacity: 1;
        }
        .btn-sm {
            padding: 4px 8px;
            font-size: 0.8rem;
            margin-bottom: 5px;
        }
        .search-box {
            margin-bottom: 20px;
        }
        .header {
            background: var(--primary);
            color: white;
            padding: 20px 0;
            margin-bottom: 20px;
            text-align: center;
        }
        .book-count {
            font-size: 1.2rem;
            font-weight: bold;
        }
        @media only screen and (max-width: 768px) {
            .content {
                margin-left: 0;
            }
            .book-card {
                height: 240px;
            }
        }
        .content{
            padding:15px;
        }
    </style>
</head>
<body>
<?php include "../include/nav.php"; ?>

<div class="content">
  
    
    <div class="" style="padding:16px">
        <h2>Library Books</h2>
        <?php
        $count_sql = "SELECT COUNT(*) as total FROM library";
        $count_result = $conn->query($count_sql);
        $count = $count_result->fetch_assoc()['total'];
        ?>
        <p class="book-count"><?php echo $count; ?> Books Available</p>
    </div>

    <div class="container">
        <?php if (isset($_GET['success'])): ?>
            <div class="alert alert-success" style="text-align:center;">
                <p><i class="fa fa-check"></i> <?php echo $_GET['success']; ?></p>
            </div>
        <?php endif; ?>

        <?php if (isset($_GET['error'])): ?>
            <div class="alert alert-danger" style="text-align:center;">
                <p><i class="fa fa-exclamation-circle"></i> <?php echo $_GET['error']; ?></p>
            </div>
        <?php endif; ?>

        <!-- Search Box -->
        <div class="search-box">
            <input type="text" id="bookSearch" class="form-control" placeholder="Search books by title, author, or category...">
        </div>

        <!-- Books Grid -->
        <div class="row" id="booksContainer">
            <?php
            $sql = "SELECT * FROM library ORDER BY added_on DESC";
            $result = $conn->query($sql);
            
            if ($result->num_rows > 0) {
                while($row = $result->fetch_assoc()) {
                    $cover_path = !empty($row['cover']) ? "../../staff/staff/cover/" . $row['cover'] : "https://via.placeholder.com/300x400/333/fff?text=No+Cover";
                    $file_path = !empty($row['file']) ? "../../staff/staff/library/" . $row['file'] : "#";
                    ?>
                    <div class="col-xl-3 col-lg-4 col-md-4 col-sm-6 mb-4 book-item">
                        <div class="book-card">
                            <img src="<?php echo $cover_path; ?>" alt="Book Cover" class="book-cover" onerror="this.src='https://via.placeholder.com/300x400/333/fff?text=No+Cover'">
                            
                            <div class="book-actions">
                                <?php if (!empty($row['file'])): ?>
                                    <a href="<?php echo $file_path; ?>" target="_blank" class="btn btn-sm btn-primary d-block">
                                        <i class="fa fa-book"></i> Read
                                    </a>
                                <?php else: ?>
                                    <span class="btn btn-sm btn-secondary d-block disabled">
                                        <i class="fa fa-book"></i> No File
                                    </span>
                                <?php endif; ?>
                            </div>
                            
                            <div class="book-overlay">
                                <div class="book-title"><?php echo htmlspecialchars($row['title']); ?></div>
                                <div class="book-author"><?php echo htmlspecialchars($row['author']); ?></div>
                                <div class="book-category"><?php echo htmlspecialchars($row['category']); ?></div>
                            </div>
                        </div>
                    </div>
                    <?php
                }
            } else {
                echo '<div class="col-12 text-center text-muted"><p>No books found in the library.</p></div>';
            }
            ?>
        </div>
    </div>
</div>

<script>
// Live search functionality
document.getElementById('bookSearch').addEventListener('keyup', function() {
    let filter = this.value.toLowerCase();
    let books = document.querySelectorAll('.book-item');
    
    books.forEach(book => {
        let title = book.querySelector('.book-title').textContent.toLowerCase();
        let author = book.querySelector('.book-author').textContent.toLowerCase();
        let category = book.querySelector('.book-category').textContent.toLowerCase();
        
        if (title.includes(filter) || author.includes(filter) || category.includes(filter)) {
            book.style.display = 'block';
        } else {
            book.style.display = 'none';
        }
    });
});
</script>

</body>
</html>