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

// Check if user is logged in
if (!isset($_SESSION['studentid'])) {
    header("location:../index.php");
    exit();
}

// Search functionality
$search = "";
$whereClause = "1";
if (isset($_GET['search']) && !empty($_GET['search'])) {
    $search = mysqli_real_escape_string($conn, $_GET['search']);
    $whereClause = "(title LIKE '%$search%' OR author LIKE '%$search%' OR isbn LIKE '%$search%')";
}

// Get catalogue items
$query = "SELECT `id`, `title`, `author`, `isbn`, `edition`, `copies`, `cover` FROM `catalogue` WHERE $whereClause ORDER BY title ASC";
$result = mysqli_query($conn, $query);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Library Catalogue</title>
 <!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Source+Sans+Pro:wght@300;400;600&display=swap" rel="stylesheet">
<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">
   <!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Bootstrap JS -->
<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://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://kit.fontawesome.com/a076d05399.js' 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">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" rel="stylesheet">
</head>

<style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --accent-color: #e74c3c;
            --light-color: #ecf0f1;
            --dark-color: #2c3e50;
        }
        
        body {
            font-family: 'Montserrat', sans-serif;
            background-color: #f8f9fa;
            color: #333;
            padding-top: 20px;
        }
        
        .library-header {
            background: var(--primary-color);
            color: white;
            padding: 30px 0;
            margin-bottom: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .search-box {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.08);
            margin-bottom: 30px;
        }
        
        .book-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 300px; /* Reduced height */
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            position: relative;
            margin-bottom: 20px;
        }
        
        .book-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 20px rgba(0,0,0,0.15);
        }
        
        .book-cover-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            transition: transform 0.5s ease;
            z-index: 1;
        }
        
        .book-card:hover .book-cover-bg {
            transform: scale(1.05);
        }
        
        .book-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
            z-index: 2;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 15px;
            color: white;
        }
        
        .book-info {
            z-index: 3;
            position: relative;
        }
        
        .book-title {
            font-family: 'Merriweather', serif;
            font-weight: 700;
            font-size: 1rem;
            color: white;
            margin-bottom: 5px;
            line-height: 1.2;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
        }
        
        .book-author {
            color: rgba(255,255,255,0.9);
            font-size: 0.85rem;
            margin-bottom: 10px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
        }
        
        .book-details {
            border-top: 1px solid rgba(255,255,255,0.3);
            padding-top: 10px;
            margin-top: 10px;
        }
        
        .book-meta {
            display: flex;
            justify-content: space-between;
            font-size: 0.75rem;
            color: rgba(255,255,255,0.8);
        }
        
        .availability {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 20px;
            font-size: 0.7rem;
            font-weight: 600;
        }
        
        .available {
            background-color: rgba(46, 125, 50, 0.9);
            color: white;
        }
        
        .limited {
            background-color: rgba(239, 108, 0, 0.9);
            color: white;
        }
        
        .unavailable {
            background-color: rgba(198, 40, 40, 0.9);
            color: white;
        }
        
        .no-books {
            text-align: center;
            padding: 60px 20px;
            color: #6c757d;
        }
        
        .no-books i {
            font-size: 4rem;
            margin-bottom: 20px;
            color: #bdc3c7;
        }
        
        .pagination {
            justify-content: center;
            margin-top: 30px;
        }
        
        .btn-library {
            background-color: var(--secondary-color);
            border-color: var(--secondary-color);
            color: white;
            border-radius: 6px;
            padding: 10px 20px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .btn-library:hover {
            background-color: #2980b9;
            border-color: #2980b9;
            transform: translateY(-2px);
        }
        
        .btn-search {
            background-color: var(--accent-color);
            border-color: var(--accent-color);
            color: white;
        }
        
        .btn-search:hover {
            background-color: #c0392b;
            border-color: #c0392b;
        }
        
        .results-count {
            color: #7f8c8d;
            font-size: 0.95rem;
            margin-bottom: 20px;
        }
        
        @media (max-width: 768px) {
            .book-card {
                height: 250px;
            }
            
            .book-title {
                font-size: 0.9rem;
            }
        }
    </style>
</head>
<body>
    <?php include "../include/nav.php"; ?>
    <div class="content" style="padding:5px">
    <div class="container ">
        
        
        <!-- Header Section -->
        <div class="library-header text-center">
            <div class="container">
                <h1 class="display-4 fw-bold"><i class="fas fa-book-open me-2"></i>Library Catalogue</h1>
                <p class="lead">Explore our collection of books and resources</p>
            </div>
        </div>
        
        <!-- Search Box -->
        <div class="search-box">
            <form action="" method="GET">
                <div class="input-group">
                    <input type="text" name="search" class="form-control form-control-lg" 
                           placeholder="Search by title, author, or ISBN..." value="<?php echo htmlspecialchars($search); ?>">
                    <button class="btn btn-search btn-lg" type="submit">
                        <i class="fas fa-search me-1"></i> Search
                    </button>
                    <?php if (!empty($search)): ?>
                    <a href="catalogue.php" class="btn btn-outline-secondary btn-lg">
                        <i class="fas fa-times me-1"></i> Clear
                    </a>
                    <?php endif; ?>
                </div>
            </form>
        </div>
        
        <!-- Results Count -->
        <?php 
        $total_books = mysqli_num_rows($result);
        if (!empty($search)) {
            echo '<div class="results-count">';
            echo 'Found ' . $total_books . ' book' . ($total_books != 1 ? 's' : '') . ' matching "' . htmlspecialchars($search) . '"';
            echo '</div>';
        }
        ?>
        
        <!-- Books Grid -->
        <div class="row">
            <?php if (mysqli_num_rows($result) > 0): ?>
                <?php while ($book = mysqli_fetch_assoc($result)): 
                    // Determine availability status
                    $copies = intval($book['copies']);
                    if ($copies > 5) {
                        $availability_class = 'available';
                        $availability_text = 'Available';
                    } elseif ($copies > 0) {
                        $availability_class = 'limited';
                        $availability_text = 'Limited';
                    } else {
                        $availability_class = 'unavailable';
                        $availability_text = 'Out of Stock';
                    }
                    
                    // Handle cover image
                    $cover_path = !empty($book['cover']) ? "../../staff/staff/cover/" . $book['cover'] : "../uploads/covers/default.jpg";
                    // Check if file exists, if not use placeholder
                    if (!empty($book['cover']) && !file_exists($cover_path)) {
                        $cover_path = "https://via.placeholder.com/300x400/2c3e50/ecf0f1?text=" . urlencode(substr($book['title'], 0, 1));
                    } elseif (empty($book['cover'])) {
                        $cover_path = "https://via.placeholder.com/300x400/2c3e50/ecf0f1?text=" . urlencode(substr($book['title'], 0, 1));
                    }
                ?>
                <div class="col-md-4 col-lg-3 mb-4">
                    <div class="book-card">
                        <div class="book-cover-bg" style="background-image: url('<?php echo $cover_path; ?>');"></div>
                        <div class="book-overlay">
                            <div class="book-info">
                                <h3 class="book-title"><?php echo htmlspecialchars($book['title']); ?></h3>
                                <p class="book-author">by <?php echo htmlspecialchars($book['author']); ?></p>
                                
                                <div class="book-details">
                                    <div class="book-meta">
                                        <span><i class="fas fa-book me-1"></i> Ed. <?php echo htmlspecialchars($book['edition']); ?></span>
                                        <span><i class="fas fa-copy me-1"></i> <?php echo $book['copies']; ?></span>
                                    </div>
                                    <div class="book-meta mt-2">
                                        <span class="availability <?php echo $availability_class; ?>"><?php echo $availability_text; ?></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <?php endwhile; ?>
            <?php else: ?>
                <div class="col-12">
                    <div class="no-books">
                        <i class="fas fa-book-open-reader"></i>
                        <h3>No books found</h3>
                        <p><?php echo !empty($search) ? 'Try a different search term' : 'The library catalogue is currently empty'; ?></p>
                        <?php if (!empty($search)): ?>
                            <a href="catalogue.php" class="btn btn-library mt-3">View All Books</a>
                        <?php endif; ?>
                    </div>
                </div>
            <?php endif; ?>
        </div>
        
        <!-- Pagination would go here if implemented -->
    </div>
    


    <script>
        // Add some interactive features
        document.addEventListener('DOMContentLoaded', function() {
            // Add animation to book cards when they come into view
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.opacity = 1;
                        entry.target.style.transform = 'translateY(0)';
                    }
                });
            }, { threshold: 0.1 });
            
            // Apply to all book cards
            document.querySelectorAll('.book-card').forEach(card => {
                card.style.opacity = 0;
                card.style.transform = 'translateY(20px)';
                card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                observer.observe(card);
            });
        });
    </script>
</body>
</html>