<?php
$baseUrl = env('API_BASE_URL');
$backBaseUrl = env('BACK_BASE_URL');
?>
<?php echo view ('header.php') ?>
    <style>
        .library-hero {
            background: linear-gradient(135deg, rgba(30, 64, 175, 0.9), rgba(59, 130, 246, 0.8)), 
                        url('/assets/images/library-hero.jpg') center/cover;
            height: 300px;
            margin-top: 160px;
            padding-bottom: 100px;
        }
        .sidebar-nav {
            position: sticky;
            top: 120px;
            max-height: calc(100vh - 140px);
            overflow-y: auto;
        }
        .nav-item {
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
            font-size: 0.875rem;
        }
        .nav-item:hover, .nav-item.active {
            background: rgba(30, 64, 175, 0.1);
            border-left-color: #1e40af;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 1rem;
        }
        .collection-card {
            transition: transform 0.3s ease;
        }
        .collection-card:hover {
            transform: translateY(-2px);
        }
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
        }
        .modal.active {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .modal-content {
            background: white;
            border-radius: 8px;
            padding: 2rem;
            max-width: 500px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
        }
        .form-group {
            margin-bottom: 1rem;
        }
        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            font-size: 0.875rem;
        }
        .form-input {
            width: 100%;
            padding: 0.5rem;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            font-size: 0.875rem;
        }
        .form-input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        .btn-primary {
            background: #1e40af;
            color: white;
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 4px;
            font-size: 0.875rem;
            cursor: pointer;
            transition: background 0.3s ease;
        }
        .btn-primary:hover {
            background: #1d4ed8;
        }
        .btn-secondary {
            background: #6b7280;
            color: white;
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 4px;
            font-size: 0.875rem;
            cursor: pointer;
            margin-left: 0.5rem;
        }
        .close-modal {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #6b7280;
        }
        .hours-table {
            font-size: 0.875rem;
        }
        .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
        }
        .notice-item {
            border-left: 4px solid #3b82f6;
            padding: 1rem;
            background: #f8fafc;
            margin-bottom: 1rem;
        }
    </style>

    
    <!-- Library Hero Section -->
    <section class="library-hero flex items-center justify-center text-white text-center pt-28">
        <div class="max-w-4xl mx-auto px-4">
            <!-- Breadcrumb -->
            <div class="mb-4">
                <a href="/" class="text-white/80 hover:text-white text-sm">
                    <i class="ri-home-line mr-1"></i>Home
                </a>
                <span class="text-white/60 mx-2">/</span>
                <span class="text-white text-sm">Central Library</span>
            </div>
            
            <h1 class="text-4xl md:text-5xl font-bold mb-4">Central Library</h1>
            <p class="text-xl opacity-90">Gateway to Knowledge and Research Excellence</p>
            
            <!-- Library Stats -->
            <div class="mt-6 stats-grid max-w-3xl mx-auto">
                                <div class="bg-white/20 px-3 py-2 rounded-full text-center">
                    <div class="font-bold text-lg">25,000+</div>
                    <div class="text-xs opacity-90">Total Books</div>
                </div>
                                <div class="bg-white/20 px-3 py-2 rounded-full text-center">
                    <div class="font-bold text-lg">50,000+</div>
                    <div class="text-xs opacity-90">Digital Resources</div>
                </div>
                                <div class="bg-white/20 px-3 py-2 rounded-full text-center">
                    <div class="font-bold text-lg">150+</div>
                    <div class="text-xs opacity-90">Journals</div>
                </div>
                                <div class="bg-white/20 px-3 py-2 rounded-full text-center">
                    <div class="font-bold text-lg">200</div>
                    <div class="text-xs opacity-90">Study Seats</div>
                </div>
                                <div class="bg-white/20 px-3 py-2 rounded-full text-center">
                    <div class="font-bold text-lg">300+</div>
                    <div class="text-xs opacity-90">Daily Visitors</div>
                </div>
                            </div>
        </div>
    </section>

    <div class="max-w-7xl mx-auto px-4 py-8">
        <div class="grid lg:grid-cols-4 gap-8">
            <!-- Left Sidebar Navigation -->
            <div class="lg:col-span-1">
                <div class="sidebar-nav bg-white rounded-lg shadow-sm border border-gray-200 p-4">
                    <h3 class="font-semibold text-gray-900 mb-4 flex items-center">
                        <i class="ri-navigation-line mr-2 text-blue-600"></i>
                        Library Sections
                    </h3>
                    <nav class="space-y-1">
                        <a href="#about" class="nav-item block px-3 py-2 text-gray-700 rounded hover:text-blue-600">
                            <i class="ri-information-line mr-2"></i>About Central Library
                        </a>
                        <a href="#collection" class="nav-item block px-3 py-2 text-gray-700 rounded hover:text-blue-600">
                            <i class="ri-book-line mr-2"></i>Library Collection
                        </a>
                        <a href="#services" class="nav-item block px-3 py-2 text-gray-700 rounded hover:text-blue-600">
                            <i class="ri-service-line mr-2"></i>Services
                        </a>
                        <a href="#" onclick="openModal('questionPapersModal')" class="nav-item block px-3 py-2 text-gray-700 rounded hover:text-blue-600">
                            <i class="ri-file-paper-line mr-2"></i>Previous Question Papers
                        </a>
                        <a href="#" onclick="openModal('membershipModal')" class="nav-item block px-3 py-2 text-gray-700 rounded hover:text-blue-600">
                            <i class="ri-user-add-line mr-2"></i>Membership Form
                        </a>
                        <a href="#" onclick="openModal('bookRequisitionModal')" class="nav-item block px-3 py-2 text-gray-700 rounded hover:text-blue-600">
                            <i class="ri-book-mark-line mr-2"></i>Library Book Requisition
                        </a>
                        <a href="#hours" class="nav-item block px-3 py-2 text-gray-700 rounded hover:text-blue-600">
                            <i class="ri-time-line mr-2"></i>Library Hours
                        </a>
                        <a href="#team" class="nav-item block px-3 py-2 text-gray-700 rounded hover:text-blue-600">
                            <i class="ri-team-line mr-2"></i>Team Members
                        </a>
                        <a href="#contact" class="nav-item block px-3 py-2 text-gray-700 rounded hover:text-blue-600">
                            <i class="ri-phone-line mr-2"></i>Contact
                        </a>
                        <a href="#notices" class="nav-item block px-3 py-2 text-gray-700 rounded hover:text-blue-600">
                            <i class="ri-notification-line mr-2"></i>Library Notices
                        </a>
                        <a href="#gallery" class="nav-item block px-3 py-2 text-gray-700 rounded hover:text-blue-600">
                            <i class="ri-gallery-line mr-2"></i>Gallery
                        </a>
                        <a href="#digital" class="nav-item block px-3 py-2 text-gray-700 rounded hover:text-blue-600">
                            <i class="ri-global-line mr-2"></i>Digital Initiatives
                        </a>
                    </nav>

                    <!-- Quick Links -->
                    <div class="mt-8 pt-6 border-t border-gray-200">
                        <h4 class="font-medium text-gray-900 mb-3 text-sm">Quick Links</h4>
                        <div class="space-y-1">
                            <a href="/" class="block px-2 py-1 text-xs text-gray-600 hover:text-blue-600 hover:bg-gray-50 rounded">
                                ← Back to Homepage
                            </a>
                            <a href="/faculty-directory.php" class="block px-2 py-1 text-xs text-gray-600 hover:text-blue-600 hover:bg-gray-50 rounded">
                                Faculty Directory
                            </a>
                            <a href="/research-portal.php" class="block px-2 py-1 text-xs text-gray-600 hover:text-blue-600 hover:bg-gray-50 rounded">
                                Research Portal
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Main Content -->
            <div class="lg:col-span-3 space-y-8">
                
                <!-- About Section -->
                <section id="about" class="compact-section bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                        <i class="ri-information-line mr-3 text-blue-600"></i>
                        About Central Library
                    </h2>
                    
                    <div class="grid md:grid-cols-2 gap-6">
                        <div>
                           <?php echo $library_details['library']['description']?>
                            
                            <div class="bg-gray-50 p-4 rounded-lg">
                                <div class="flex items-center mb-2">
                                    <img src="<?php echo $backBaseUrl?>uploads/library/<?php echo $library_details['library']['image']?>" alt="Librarian" class="w-12 h-12 rounded-full mr-3">
                                    <div>
                                        <p class="font-medium text-gray-900"><?php echo $library_details['library']['head_name']?></p>
                                        <p class="text-sm text-gray-600"><?php echo $library_details['library']['designation']?></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                       <?php echo $library_details['library']['vision']?>
                    </div>
                </section>

                <!-- Library Collection -->
                <section id="collection" class="compact-section bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                        <i class="ri-book-line mr-3 text-blue-600"></i>
                        Library Collection
                    </h2>

                    <!-- Physical Books -->
                    <div class="mb-8">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Physical Books Collection</h3>
                        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
                            <?php
                            if(!empty($library_details['collection'])){
                                foreach($library_details['collection'] as $collection){
                                    if($collection['type'] == 'Physical Books Collection'){
                                        echo $collection['description'];
                                    }   
                                }
                            }
                            ?>
                           
                        </div>
                    </div>

                    <!-- Digital Resources -->
                    <div class="mb-8">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Digital Resources</h3>
                        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
                            <?php
                            if(!empty($library_details['collection'])){
                                foreach($library_details['collection'] as $collection){
                                    if($collection['type'] == 'Digital Resources'){
                                        echo $collection['description'];
                                    }   
                                }
                            }
                            ?>
                        </div>
                    </div>

                    <!-- Journals & Databases -->
                   <?php echo $library_details['library']['featured_databases']?>
                </section>

                <!-- Services Section -->
                <section id="services" class="compact-section bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                        <i class="ri-service-line mr-3 text-blue-600"></i>
                        Library Services
                    </h2>

                    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                         <?php
                            if(!empty($library_details['collection'])){
                                foreach($library_details['collection'] as $collection){
                                    if($collection['type'] == 'Library Services'){
                                        echo $collection['description'];
                                    }   
                                }
                            }
                            ?>
                        
                    </div>
                </section>

                <!-- Library Hours -->
                 <?php echo $library_details['library']['featured_databases']?>

                <!-- Team Members -->
                <section id="team" class="compact-section bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                        <i class="ri-team-line mr-3 text-blue-600"></i>
                        Library Team
                    </h2>

                    <div class="team-grid">
                        <?php
                        if(!empty($library_details['teams'])){
                            foreach($library_details['teams'] as $tr){
                                ?>
                                <div class="collection-card bg-gray-50 p-4 rounded-lg border">
                                    <div class="text-center">
                                        <img src="<?php echo $backBaseUrl?><?php echo $tr['image']?>" alt="Team Member" class="w-20 h-20 rounded-full mx-auto mb-3 object-cover">
                                        <h3 class="font-medium text-gray-900"><?php echo $tr['name']?></h3>
                                        <p class="text-sm text-blue-600 mb-2"><?php echo $tr['designation']?></p>
                                        <p class="text-xs text-gray-600 mb-3"><?php echo $tr['small_description']?></p>
                                        <a href="mailto:<?php echo $tr['email']?>" class="text-xs text-blue-600 hover:underline">
                                            <?php echo $tr['email']?>                              </a>
                                    </div>
                                </div>
                                <?php
                            }
                        }
                        ?>                
                        </div>
                </section>

                <!-- Contact Information -->
                <?php echo $library_details['library']['contact_information']?>

                <!-- Recent Notices -->
                <section id="notices" class="compact-section bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                        <i class="ri-notification-line mr-3 text-blue-600"></i>
                        Recent Library Notices
                    </h2>

                    <div class="space-y-4">
                        <?php
                            if(!empty($library_details['collection'])){
                                foreach($library_details['collection'] as $collection){
                                    if($collection['type'] == 'Library Notices'){
                                        echo $collection['description'];
                                    }   
                                }
                            }
                        ?>
                                               
                    </div>
                </section>

                <!-- Digital Initiatives -->
                <section id="digital" class="compact-section bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                        <i class="ri-global-line mr-3 text-blue-600"></i>
                        Digital Initiatives
                    </h2>

                    <div class="grid md:grid-cols-2 gap-6">
                        <?php
                            if(!empty($library_details['collection'])){
                                foreach($library_details['collection'] as $collection){
                                    if($collection['type'] == 'Digital Initiatives'){
                                        echo $collection['description'];
                                    }   
                                }
                            }
                            ?>
                    </div>
                </section>

                <!-- Gallery -->
                <section id="gallery" class="compact-section bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                        <i class="ri-gallery-line mr-3 text-blue-600"></i>
                        Recent Events Gallery
                    </h2>

                    <div class="grid md:grid-cols-3 gap-4">
                        <?php
                            if(!empty($library_details['gallery'])){
                                foreach($library_details['gallery'] as $gallery){
                                    ?>
                                     <div class="collection-card bg-white border rounded-lg overflow-hidden">
                                        <img src="<?php echo $backBaseUrl?><?php echo $gallery['image']?>" alt="Event" class="w-full h-32 object-cover">
                                        <div class="p-3">
                                           <?php echo $gallery['description']?>
                                        </div>
                                    </div>
                                    <?php
                                }
                            }
                        ?>
                       
                        
                    </div>
                </section>

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

    <!-- Modals -->
    <!-- Membership Form Modal -->
    <div id="membershipModal" class="modal">
        <div class="modal-content">
            <button class="close-modal" onclick="closeModal('membershipModal')">&times;</button>
            <h3 class="text-lg font-bold text-gray-900 mb-4">Library Membership Form</h3>
            <form id="membershipForm">
                <div class="form-group">
                    <label class="form-label">Full Name *</label>
                    <input type="text" name="full_name" class="form-input" placeholder="Enter your full name" required>
                </div>
                <div class="form-group">
                    <label class="form-label">User Type *</label>
                    <select name="user_type" class="form-input" required>
                        <option value="">Select user type</option>
                        <option value="student">Student</option>
                        <option value="faculty">Faculty</option>
                        <option value="staff">Staff</option>
                        <option value="external">External Member</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Registration/Employee ID</label>
                    <input type="text" name="employee_id" class="form-input" placeholder="Enter your ID">
                </div>
                <div class="form-group">
                    <label class="form-label">Email Address *</label>
                    <input type="email" name="email" class="form-input" placeholder="Enter your email" required>
                </div>
                <div class="form-group">
                    <label class="form-label">Phone Number *</label>
                    <input type="tel" name="phone_no" class="form-input" placeholder="Enter your phone number" required>
                </div>
                <div class="form-group">
                    <label class="form-label">Department</label>
                    <input type="text" name="department" class="form-input" placeholder="Enter your department">
                </div>
                <div class="flex justify-end">
                    <button type="submit" class="btn-primary">Submit Application</button>
                    <button type="button" class="btn-secondary" onclick="closeModal('membershipModal')">Cancel</button>
                </div>
            </form>

        </div>
    </div>

    <!-- Book Requisition Modal -->
    <div id="bookRequisitionModal" class="modal">
        <div class="modal-content">
            <button class="close-modal" onclick="closeModal('bookRequisitionModal')">&times;</button>
            <h3 class="text-lg font-bold text-gray-900 mb-4">Book Requisition Form</h3>
           <form id="requisitionForm">
                <div class="form-group">
                    <label class="form-label">Book Title *</label>
                    <input type="text" name="book_title" class="form-input" placeholder="Enter book title" required>
                </div>
                <div class="form-group">
                    <label class="form-label">Author(s) *</label>
                    <input type="text" name="author" class="form-input" placeholder="Enter author name(s)" required>
                </div>
                <div class="form-group">
                    <label class="form-label">Publisher</label>
                    <input type="text" name="publisher" class="form-input" placeholder="Enter publisher name">
                </div>
                <div class="form-group">
                    <label class="form-label">ISBN (if known)</label>
                    <input type="text" name="isbn" class="form-input" placeholder="Enter ISBN">
                </div>
                <div class="form-group">
                    <label class="form-label">Your Name *</label>
                    <input type="text" name="name" class="form-input" placeholder="Enter your name" required>
                </div>
                <div class="form-group">
                    <label class="form-label">Your Email *</label>
                    <input type="email" name="email" class="form-input" placeholder="Enter your email" required>
                </div>
                <div class="form-group">
                    <label class="form-label">Department/Course</label>
                    <input type="text" name="course" class="form-input" placeholder="Enter your department or course">
                </div>
                <div class="form-group">
                    <label class="form-label">Justification</label>
                    <textarea name="justification" class="form-input" rows="3" placeholder="Why do you need this book?"></textarea>
                </div>
                <div class="flex justify-end">
                    <button type="submit" class="btn-primary">Submit Request</button>
                    <button type="button" class="btn-secondary" onclick="closeModal('bookRequisitionModal')">Cancel</button>
                </div>
            </form>

        </div>
    </div>

    <!-- Question Papers Modal -->
    <div id="questionPapersModal" class="modal">
        <div class="modal-content">
            <button class="close-modal" onclick="closeModal('questionPapersModal')">&times;</button>
            <h3 class="text-lg font-bold text-gray-900 mb-4">Previous Question Papers</h3>
            <div class="form-group">
                <label class="form-label">Select Year</label>
                <select class="form-input" id="paperYear">
                     <option value="">Choose year</option>
                        <?php
                            $currentYear = date('Y');
                            for ($i = 0; $i < 5; $i++) {
                                $year = $currentYear - $i;
                                echo "<option value=\"$year\">$year</option>";
                            }
                        ?>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">Select Subject</label>
                <select class="form-input" id="paperCourseId">
                    <option value="">Choose subject</option>
                        <?php
                        if(!empty($library_details['courses'])){
                            foreach($library_details['courses'] as $row){
                                ?>
                                <option value="<?php echo $row['id']?>"><?php echo $row['name']?></option>
                                <?php
                            }
                        }
                        ?>
                    </select>
            </div>
            <div class="bg-blue-50 p-3 rounded text-sm text-blue-800 mb-4">
                <i class="ri-information-line mr-1"></i>
                Previous question papers are available for academic reference. Valid student ID required.            </div>
            <div class="flex justify-end">
                <button type="button" class="btn-primary" onclick="goToQuestionPapers()">Search Papers</button>
                <button type="button" class="btn-secondary" onclick="closeModal('questionPapersModal')">Close</button>
            </div>
        </div>
    </div>

    <?php echo view ('footer.php') ?>

    <!-- JavaScript for Modal Functionality -->
    <script>
        function openModal(modalId) {
            document.getElementById(modalId).classList.add('active');
            document.body.style.overflow = 'hidden';
        }

        function closeModal(modalId) {
            document.getElementById(modalId).classList.remove('active');
            document.body.style.overflow = 'auto';
        }

        // Close modal when clicking outside
        document.querySelectorAll('.modal').forEach(modal => {
            modal.addEventListener('click', function(e) {
                if (e.target === this) {
                    closeModal(this.id);
                }
            });
        });

        // Smooth scrolling for navigation links
        document.querySelectorAll('.sidebar-nav a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                    
                    // Update active state
                    document.querySelectorAll('.sidebar-nav a').forEach(link => {
                        link.classList.remove('active');
                    });
                    this.classList.add('active');
                }
            });
        });

        // Update active navigation on scroll
        window.addEventListener('scroll', () => {
            const sections = document.querySelectorAll('section[id]');
            const scrollPos = window.scrollY + 150;
            
            sections.forEach(section => {
                const top = section.offsetTop;
                const bottom = top + section.offsetHeight;
                const id = section.getAttribute('id');
                
                if (scrollPos >= top && scrollPos <= bottom) {
                    document.querySelectorAll('.sidebar-nav a').forEach(link => {
                        link.classList.remove('active');
                    });
                    const activeLink = document.querySelector(`.sidebar-nav a[href="#${id}"]`);
                    if (activeLink) {
                        activeLink.classList.add('active');
                    }
                }
            });
        });

        // // Form submission handlers (placeholder functionality)
        // document.querySelectorAll('form').forEach(form => {
        //     form.addEventListener('submit', function(e) {
        //         e.preventDefault();
        //         alert('Form submitted successfully! (This is a demo - no data was actually sent)');
                
        //         // Close the modal
        //         const modal = this.closest('.modal');
        //         if (modal) {
        //             closeModal(modal.id);
        //         }
                
        //         // Reset form
        //         this.reset();
        //     });
        // });
    </script>
    <script>
    document.getElementById('membershipForm').addEventListener('submit', function (e) {
        const baseUrl = "<?php echo $baseUrl; ?>";
        e.preventDefault(); // Prevent page reload

        const form = e.target;
        const formData = new FormData(form);
        const data = {};

        formData.forEach((value, key) => {
            data[key] = value;
        });

        fetch($baseUrl +'library/submit-membership-form', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json' // or 'application/x-www-form-urlencoded' if your API expects that
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(response => {
            if (response.status === 'success') {
                alert('Membership form submitted successfully.');
                form.reset();
                closeModal('membershipModal');
            } else {
                alert('Submission failed: ' + response.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred. See console for details.');
        });
    });
    </script>
    <script>
    document.getElementById('requisitionForm').addEventListener('submit', function (e) {
        const baseUrl = "<?php echo $baseUrl; ?>";
        e.preventDefault(); // Stop normal form submission

        const form = e.target;
        const formData = new FormData(form);
        const data = {};

        // Convert FormData to JSON object
        formData.forEach((value, key) => {
            data[key] = value;
        });

        // Send JSON to the API
        fetch($baseUrl +'library/submit-requisition-form', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(response => {
            if (response.status === 'success') {
                alert('Requisition submitted successfully.');
                form.reset();
                closeModal('bookRequisitionModal');
            } else {
                alert('Submission failed: ' + response.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred. Please check console.');
        });
    });
    </script>
    <script>
        function goToQuestionPapers() {
            const year = document.getElementById('paperYear').value;
            const courseId = document.getElementById('paperCourseId').value;

            if (!year || !courseId) {
                alert('Please select both year and subject.');
                return;
            }

            // Update this base URL to match your actual route
            const baseUrl = '<?= base_url('question-papers') ?>';

            // Redirect with parameters
            window.location.href = `${baseUrl}/${year}/${courseId}`;
        }
    </script>


</body>
</html>