<?php require_once 'layouts/header.php'; ?>
<?php require_once 'layouts/sidebar.php'; ?>

<div class="flex-1 flex flex-col min-w-0 h-full overflow-hidden" x-data='{ 
 showModal: <?php echo isset($editingMaterial) ? "true" : "false"; ?>,
 showViewModal: <?php echo isset($viewingMaterial) ? "true" : "false"; ?>,
 deleteModalOpen: false,
 deleteId: null,
 type: "<?php echo $editingMaterial["type"] ?? "file"; ?>",
 course_id: "<?php echo $editingMaterial["course_id"] ?? ""; ?>",
 previewUrl: null,
 previewType: null,
 handleFileChange(event) {
 const file = event.target.files[0];
 if (file) {
 this.previewUrl = URL.createObjectURL(file);
 this.previewType = file.type;
 }
 },
 confirmDelete(id) {
 this.deleteId = id;
 this.deleteModalOpen = true;
 }
}'>
 <?php require_once 'layouts/topbar.php'; ?>

 <main class="flex-1 relative overflow-y-auto py-4 sm:py-6 px-3 sm:px-6 lg:px-8 bg-gray-50 custom-scrollbar">
 <div class="max-w-6xl mx-auto space-y-4 pb-6">
 <!-- Header -->
 <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 px-1 py-2">
 <div>
 <h1 class="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">Study Materials</h1>
 <p class="text-[10px] sm:text-xs font-medium text-gray-400 mt-0.5">Manage notes, assignments and links for students</p>
 </div>
 <button @click="showModal = true" class="w-full sm:w-auto px-5 py-3 bg-blue-600 text-white text-xs font-semibold rounded-xl hover:bg-blue-700 transition-all flex items-center justify-center gap-2 active:scale-95 -600/20">
 <i class="fa-solid fa-plus text-sm"></i>
 <span>Add Material</span>
 </button>
 </div>

 <!-- Filters & Search -->
 <form action="<?php echo url('admin/study-materials'); ?>" method="GET" class="bg-white border border-gray-200 rounded-2xl p-4 space-y-4">
 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
 <div class="relative group">
 <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-gray-400 group-focus-within:text-blue-600 transition-colors">
 <i class="fa-solid fa-magnifying-glass text-xs"></i>
 </div>
 <input name="search" type="text" value="<?php echo htmlspecialchars($params['search']); ?>" class="w-full pl-10 pr-4 py-3 bg-white border border-gray-200 rounded-xl text-xs font-medium text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 transition-all outline-none" placeholder="Search by title or description...">
 </div>

 <div class="relative">
 <select name="filter_course" onchange="this.form.submit()" class="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl text-xs font-medium text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 transition-all outline-none appearance-none cursor-pointer">
 <option value="">All Courses</option>
 <?php foreach($courses as $course): ?>
 <option value="<?php echo $course['id']; ?>"<?php echo $params['filter_course'] == $course['id'] ? 'selected' : ''; ?>><?php echo $course['name']; ?></option>
 <?php endforeach; ?>
 </select>
 <div class="absolute inset-y-0 right-0 pr-3.5 flex items-center pointer-events-none text-gray-400 border-l border-gray-100 ml-2 pl-3">
 <i class="fa-solid fa-chevron-down text-[10px]"></i>
 </div>
 </div>

 <div class="relative sm:col-span-2 lg:col-span-1">
 <select name="filter_type" onchange="this.form.submit()" class="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl text-xs font-medium text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 transition-all outline-none appearance-none cursor-pointer">
 <option value="">All Types</option>
 <option value="file"<?php echo $params['filter_type'] === 'file' ? 'selected' : ''; ?>>File Uploads</option>
 <option value="link"<?php echo $params['filter_type'] === 'link' ? 'selected' : ''; ?>>External Links</option>
 </select>
 <div class="absolute inset-y-0 right-0 pr-3.5 flex items-center pointer-events-none text-gray-400 border-l border-gray-100 ml-2 pl-3">
 <i class="fa-solid fa-chevron-down text-[10px]"></i>
 </div>
 </div>
 </div>
 </form>

 <!-- Desktop View -->
 <div class="hidden md:block bg-white border border-gray-200 rounded-2xl overflow-hidden">
 <div class="overflow-x-auto">
 <table class="w-full text-left border-collapse">
 <thead>
 <tr class="bg-gray-50/80 border-b border-gray-200">
 <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest w-16 text-center">SL</th>
 <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest border-l border-gray-100/50">Material Info</th>
 <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest border-l border-gray-100/50">Assigned To</th>
 <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest text-center border-l border-gray-100/50">Type</th>
 <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest text-center border-l border-gray-100/50">Status</th>
 <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest text-right w-32 border-l border-gray-100/50">Actions</th>
 </tr>
 </thead>
 <tbody class="divide-y divide-gray-100">
 <?php if(empty($materials)): ?>
 <tr><td colspan="6" class="px-5 py-12 text-center text-xs font-bold text-gray-400">No study materials found</td></tr>
 <?php else: ?>
 <?php foreach($materials as $index => $material): ?>
 <tr class="group hover:bg-gray-50 transition-colors">
 <td class="px-6 py-4 text-center">
 <span class="text-[10px] font-bold text-gray-400"><?php echo str_pad($index + 1, 2, '0', STR_PAD_LEFT); ?></span>
 </td>
 <td class="px-6 py-5 border-l border-gray-100/50">
 <div>
 <h3 class="text-xs font-bold text-gray-900 mb-0.5 group-hover:text-blue-600 transition-colors"><?php echo $material['title']; ?></h3>
 <p class="text-[9px] font-medium text-gray-400 truncate max-w-[200px]"><?php echo $material['description'] ?: 'No description'; ?></p>
 </div>
 </td>
 <td class="px-6 py-5 border-l border-gray-100/50">
 <?php if($material['batch_id']): ?>
 <div class="flex flex-col">
 <span class="text-[10px] font-bold text-gray-700"><?php echo $material['batch_name']; ?></span>
 <span class="text-[9px] font-bold text-blue-600 uppercase"><?php echo $material['course_name']; ?></span>
 </div>
 <?php elseif($material['course_id']): ?>
 <span class="px-2 py-0.5 rounded-md bg-blue-600/10 text-blue-600 text-[9px] font-bold uppercase"><?php echo $material['course_name']; ?></span>
 <?php else: ?>
 <span class="px-2 py-0.5 rounded-md bg-gray-100 text-gray-500 text-[9px] font-bold uppercase">Public</span>
 <?php endif; ?>
 </td>
 <td class="px-6 py-5 text-center border-l border-gray-100/50">
 <span class="inline-flex items-center gap-1.5 px-2 py-1 rounded-lg text-[9px] font-bold <?php echo $material['type'] === 'file' ? 'bg-blue-50 text-blue-600 border border-blue-100' : 'bg-amber-50 text-amber-600 border border-amber-100'; ?>">
 <i class="fa-solid <?php echo $material['type'] === 'file' ? 'fa-file-pdf' : 'fa-link'; ?> text-[8px]"></i>
 <?php echo ucfirst($material['type']); ?>
 </span>
 </td>
 <td class="px-6 py-5 text-center border-l border-gray-100/50">
 <a href="<?php echo url('admin/study-materials/toggle-status?id=' . $material['id']); ?>" class="relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none <?php echo $material['is_active'] ? 'bg-blue-600' : 'bg-gray-200'; ?>">
 <span class="inline-block h-3 w-3 transform rounded-full bg-white transition-transform <?php echo $material['is_active'] ? 'translate-x-5' : 'translate-x-1'; ?>"></span>
 </a>
 </td>
 <td class="px-6 py-5 text-right border-l border-gray-100/50">
 <div class="flex items-center justify-end gap-2">
 <a href="<?php echo url('/admin/study-materials?view_id=' . $material['id']); ?>" class="h-8 w-8 flex items-center justify-center rounded-lg bg-gray-100 text-gray-600 hover:bg-gray-200 transition-all border border-gray-200"><i class="fa-solid fa-eye text-xs"></i></a>
 <a href="<?php echo url('/admin/study-materials?edit_id=' . $material['id']); ?>" class="h-8 w-8 flex items-center justify-center rounded-lg bg-blue-600/10 text-blue-600 hover:bg-blue-600 hover:text-white transition-all border border-blue-600/20"><i class="fa-solid fa-pen-to-square text-xs"></i></a>
 <button @click="confirmDelete(<?php echo $material['id']; ?>)" class="h-8 w-8 flex items-center justify-center rounded-lg bg-red-50 text-red-500 hover:bg-red-500 hover:text-white transition-all border border-red-100"><i class="fa-solid fa-trash-can text-xs"></i></button>
 </div>
 </td>
 </tr>
 <?php endforeach; ?>
 <?php endif; ?>
 </tbody>
 </table>
 </div>
 </div>

 <!-- Mobile View (Cards) -->
 <div class="md:hidden space-y-4">
 <?php foreach($materials as $index => $material): ?>
 <div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4 relative overflow-hidden">
 <div class="absolute top-0 right-0 px-3 py-1 bg-gray-50 border-b border-l border-gray-100 rounded-bl-xl">
 <span class="text-[9px] font-bold text-gray-400">#<?php echo str_pad($index + 1, 2, '0', STR_PAD_LEFT); ?></span>
 </div>
 <div class="flex items-start gap-4">
 <div class="h-12 w-12 rounded-2xl flex items-center justify-center flex-none <?php echo $material['type'] === 'file' ? 'bg-blue-600/10 text-blue-600' : 'bg-amber-600/10 text-amber-600'; ?>">
 <i class="fa-solid <?php echo $material['type'] === 'file' ? 'fa-file-pdf' : 'fa-link'; ?> text-xl"></i>
 </div>
 <div class="min-w-0 pr-8">
 <h3 class="text-sm font-bold text-gray-900 truncate"><?php echo $material['title']; ?></h3>
 <p class="text-[10px] font-medium text-gray-400 mt-0.5 truncate"><?php echo $material['description'] ?: 'No description'; ?></p>
 <div class="flex items-center gap-2 mt-2">
 <a href="<?php echo url('admin/study-materials/toggle-status?id=' . $material['id']); ?>" class="relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none <?php echo $material['is_active'] ? 'bg-blue-600' : 'bg-gray-200'; ?>">
 <span class="inline-block h-3 w-3 transform rounded-full bg-white transition-transform <?php echo $material['is_active'] ? 'translate-x-5' : 'translate-x-1'; ?>"></span>
 </a>
 </div> </div>
 </div>
 <div class="py-4 border-y border-gray-50">
 <p class="text-[8px] font-bold text-gray-400 uppercase tracking-widest mb-1.5">Assigned To</p>
 <div class="flex items-center gap-2">
 <?php if($material['batch_id']): ?>
 <span class="px-2 py-0.5 rounded-md bg-emerald-50 text-emerald-600 text-[9px] font-bold uppercase"><?php echo $material['batch_name']; ?></span>
 <?php elseif($material['course_id']): ?>
 <span class="px-2 py-0.5 rounded-md bg-blue-600/10 text-blue-600 text-[9px] font-bold uppercase"><?php echo $material['course_name']; ?></span>
 <?php else: ?>
 <span class="px-2 py-0.5 rounded-md bg-gray-100 text-gray-500 text-[9px] font-bold uppercase">Public</span>
 <?php endif; ?>
 </div>
 </div>
 <div class="flex items-center justify-between pt-1">
 <a href="<?php echo url('/admin/study-materials?view_id=' . $material['id']); ?>" class="text-[10px] font-bold text-blue-600 flex items-center gap-1.5"><i class="fa-solid fa-eye"></i> View Details</a>
 <div class="flex items-center gap-2">
 <a href="<?php echo url('/admin/study-materials?edit_id=' . $material['id']); ?>" class="h-9 w-9 flex items-center justify-center rounded-xl bg-blue-600/10 text-blue-600 border border-blue-600/20"><i class="fa-solid fa-pen-to-square text-xs"></i></a>
 <button @click="confirmDelete(<?php echo $material['id']; ?>)" class="h-9 w-9 flex items-center justify-center rounded-xl bg-red-50 text-red-600 border border-red-100 active:scale-95"><i class="fa-solid fa-trash-can text-xs"></i></button>
 </div>
 </div>
 </div>
 <?php endforeach; ?>
 </div>
 </div>
 </main>

 <!-- Add/Edit Modal -->
 <div x-show="showModal" class="fixed inset-0 z-50 overflow-y-auto" x-cloak>
 <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
 <div class="fixed inset-0 bg-gray-900/40 backdrop-blur-sm transition-opacity" @click="showModal = false; window.location.href='<?php echo url('admin/study-materials'); ?>'"></div>
 <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
 
 <div class="inline-block align-bottom bg-white rounded-3xl text-left overflow-hidden transform transition-all sm:my-8 sm:align-middle lg:max-w-4xl sm:w-full border-none">
 <div class="bg-white px-6 py-6 sm:p-10">
 <div class="flex items-center justify-between mb-10 border-b border-gray-50 pb-6">
 <div>
 <h3 class="text-xl font-bold text-gray-900 leading-tight"><?php echo isset($editingMaterial) ? 'Update' : 'Add New' ?> Material</h3>
 <p class="text-[11px] font-medium text-gray-400 mt-1 tracking-wide uppercase">Provide resources for student learning</p>
 </div>
 <button @click="showModal = false; window.location.href='<?php echo url('admin/study-materials'); ?>'" class="h-12 w-12 flex items-center justify-center rounded-2xl bg-gray-50 text-gray-400 hover:text-gray-600 transition-all border border-gray-200">
 <i class="fa-solid fa-xmark text-xl"></i>
 </button>
 </div>

 <form action="<?php echo url('admin/study-materials/save'); ?>" method="POST" enctype="multipart/form-data" class="space-y-8">
 <?php if(isset($editingMaterial)): ?>
 <input type="hidden" name="id" value="<?php echo $editingMaterial['id']; ?>">
 <input type="hidden" name="existing_file_path" value="<?php echo $editingMaterial['file_path']; ?>">
 <?php endif; ?>

 <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-12 gap-y-8">
 <div class="space-y-6">
 <div class="space-y-2">
 <label class="text-[10px] font-bold text-gray-400 ml-0.5 uppercase tracking-widest">Material Title</label>
 <input name="title" type="text" value="<?php echo $editingMaterial['title'] ?? ''; ?>" required class="w-full px-4 py-3.5 bg-white border border-gray-200 rounded-xl text-xs font-semibold text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 transition-all outline-none" placeholder="e.g. Physics Chapter 1 Notes">
 </div>

 <div class="space-y-2">
 <label class="text-[10px] font-bold text-gray-400 ml-0.5 uppercase tracking-widest">Description (Optional)</label>
 <textarea name="description" rows="3" class="w-full px-4 py-3.5 bg-white border border-gray-200 rounded-xl text-xs font-semibold text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 transition-all outline-none resize-none" placeholder="Context for the students..."><?php echo $editingMaterial['description'] ?? ''; ?></textarea>
 </div>

 <div class="grid grid-cols-2 gap-6">
 <div class="space-y-2">
 <label class="text-[10px] font-bold text-gray-400 ml-0.5 uppercase tracking-widest">Type</label>
 <div class="flex items-center gap-4 py-3">
 <label class="flex items-center gap-2 cursor-pointer group">
 <input type="radio" name="type" value="file" x-model="type" class="text-blue-600 focus:ring-blue-600">
 <span class="text-[11px] font-bold text-gray-700 group-hover:text-blue-600">File</span>
 </label>
 <label class="flex items-center gap-2 cursor-pointer group">
 <input type="radio" name="type" value="link" x-model="type" class="text-blue-600 focus:ring-blue-600">
 <span class="text-[11px] font-bold text-gray-700 group-hover:text-blue-600">Link</span>
 </label>
 </div>
 </div>
 <div class="space-y-2">
 <label class="text-[10px] font-bold text-gray-400 ml-0.5 uppercase tracking-widest">Status</label>
 <select name="is_active" class="w-full px-4 py-3.5 bg-white border border-gray-200 rounded-xl text-xs font-semibold text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 transition-all outline-none appearance-none">
 <option value="1"<?php echo (isset($editingMaterial) && $editingMaterial['is_active']) ? 'selected' : ''; ?>>Active</option>
 <option value="0"<?php echo (isset($editingMaterial) && !$editingMaterial['is_active']) ? 'selected' : ''; ?>>Inactive</option>
 </select>
 </div>
 </div>
 </div>

 <div class="space-y-6">
 <div class="space-y-2">
 <label class="text-[10px] font-bold text-gray-400 ml-0.5 uppercase tracking-widest text-blue-600">Assigned Course</label>
 <select name="course_id" x-model="course_id" required class="w-full px-4 py-3.5 bg-white border border-gray-200 rounded-xl text-xs font-semibold text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 transition-all outline-none appearance-none cursor-pointer">
 <option value="">Select Course</option>
 <?php foreach($courses as $course): ?>
 <option value="<?php echo $course['id']; ?>"><?php echo $course['name']; ?></option>
 <?php endforeach; ?>
 </select>
 </div>

 <div class="space-y-2">
 <label class="text-[10px] font-bold text-gray-400 ml-0.5 uppercase tracking-widest text-emerald-600">Specific Batch (Optional)</label>
 <select name="batch_id" class="w-full px-4 py-3.5 bg-white border border-gray-200 rounded-xl text-xs font-semibold text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 transition-all outline-none appearance-none cursor-pointer">
 <option value="">All Batches in Course</option>
 <?php foreach($batches as $batch): ?>
 <option x-show="course_id == '<?php echo $batch['course_id']; ?>'" value="<?php echo $batch['id']; ?>"<?php echo (isset($editingMaterial) && $editingMaterial['batch_id'] == $batch['id']) ? 'selected' : ''; ?>><?php echo $batch['name']; ?></option>
 <?php endforeach; ?>
 </select>
 </div>

 <div x-show="type === 'file'" class="space-y-4">
 <div class="space-y-2">
 <label class="text-[10px] font-bold text-gray-400 ml-0.5 uppercase tracking-widest">Resource File</label>
 <div class="relative group">
 <input name="file" type="file" class="hidden" id="material-file" @change="handleFileChange">
 <label for="material-file" class="flex flex-col items-center justify-center w-full px-4 py-8 bg-gray-50 border-2 border-dashed border-gray-200 rounded-2xl cursor-pointer hover:bg-blue-50/30 hover:border-blue-400 transition-all text-center">
 <i class="fa-solid fa-cloud-arrow-up text-2xl text-gray-300 group-hover:text-blue-500 mb-2"></i>
 <span class="text-[10px] font-bold text-gray-500 group-hover:text-blue-600">Click to upload resource</span>
 <span class="text-[8px] text-gray-400 mt-1 uppercase">Max 10MB (PDF, DOC, Images)</span>
 </label>
 </div>
 <?php if(isset($editingMaterial) && $editingMaterial['file_path']): ?>
 <p class="text-[10px] font-bold text-emerald-600 flex items-center gap-1.5 mt-2"><i class="fa-solid fa-file-circle-check"></i> Existing file: <?php echo basename($editingMaterial['file_path']); ?></p>
 <?php endif; ?>
 </div>

 <!-- Live Preview -->
 <div x-show="previewUrl" class="space-y-2 animate-in fade-in slide-in-from-top-2 duration-300">
 <div class="flex items-center justify-between">
 <label class="text-[10px] font-bold text-blue-600 ml-0.5 uppercase tracking-widest">Live Preview</label>
 <button type="button" @click="previewUrl = null; document.getElementById('material-file').value = ''" class="text-[9px] font-bold text-red-500 hover:underline uppercase">Clear</button>
 </div>
 <div class="border border-gray-100 rounded-2xl overflow-hidden bg-white min-h-[200px] flex items-center justify-center">
 <template x-if="previewType === 'application/pdf'">
 <iframe :src="previewUrl" class="w-full h-[300px] border-none"></iframe>
 </template>
 <template x-if="previewType && previewType.startsWith('image/')">
 <img :src="previewUrl" class="max-w-full h-auto max-h-[300px] object-contain p-2">
 </template>
 <template x-if="previewType && previewType !== 'application/pdf' && !previewType.startsWith('image/')">
 <div class="flex flex-col items-center gap-2 p-8 text-gray-400">
 <i class="fa-solid fa-file-circle-check text-3xl"></i>
 <span class="text-[10px] font-bold uppercase">Preview not available for this file type</span>
 </div>
 </template>
 </div>
 </div>
 </div>

 <div x-show="type === 'link'" class="space-y-2">
 <label class="text-[10px] font-bold text-gray-400 ml-0.5 uppercase tracking-widest">Resource URL</label>
 <input name="link_url" type="url" value="<?php echo $editingMaterial['link_url'] ?? ''; ?>" class="w-full px-4 py-3.5 bg-white border border-gray-200 rounded-xl text-xs font-semibold text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 transition-all outline-none" placeholder="https://youtube.com/watch?v=...">
 </div>
 </div>
 </div>

 <div class="pt-8 flex flex-col sm:flex-row items-center justify-end gap-3 border-t border-gray-50">
 <button type="button" @click="showModal = false; window.location.href='<?php echo url('admin/study-materials'); ?>'" class="w-full sm:w-auto px-8 py-3 bg-white border border-gray-200 text-gray-600 text-[11px] font-bold rounded-xl hover:bg-gray-50 transition-all">Discard</button>
 <button type="submit" class="w-full sm:w-auto px-8 py-3 bg-blue-600 text-white text-[11px] font-bold rounded-xl hover:bg-blue-700 transition-all -600/20 active:scale-95">Save Material</button>
 </div>
 </form>
 </div>
 </div>
 </div>
 </div>

 <!-- View Modal -->
 <?php if($viewingMaterial): ?>
 <div x-show="showViewModal" class="fixed inset-0 z-50 overflow-y-auto" x-cloak>
 <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
 <div class="fixed inset-0 bg-gray-900/40 backdrop-blur-sm transition-opacity" @click="showViewModal = false; window.location.href='<?php echo url('admin/study-materials'); ?>'"></div>
 <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
 
 <div class="inline-block align-middle bg-white rounded-3xl text-left overflow-hidden transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full border-none">
 <div class="bg-white p-6 sm:p-8">
 <div class="flex items-start justify-between mb-6">
 <div class="flex items-center gap-4">
 <div class="h-12 w-12 rounded-2xl flex items-center justify-center <?php echo $viewingMaterial['type'] === 'file' ? 'bg-blue-600/10 text-blue-600' : 'bg-amber-600/10 text-amber-600'; ?>">
 <i class="fa-solid <?php echo $viewingMaterial['type'] === 'file' ? 'fa-file-pdf' : 'fa-link'; ?> text-xl"></i>
 </div>
 <div>
 <h3 class="text-lg font-bold text-gray-900 leading-tight"><?php echo $viewingMaterial['title']; ?></h3>
 <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mt-0.5"><?php echo ucfirst($viewingMaterial['type']); ?> Material</p>
 </div>
 </div>
 <button @click="showViewModal = false; window.location.href='<?php echo url('admin/study-materials'); ?>'" class="h-10 w-10 flex items-center justify-center rounded-xl bg-gray-50 text-gray-400 hover:text-gray-600 transition-all"><i class="fa-solid fa-xmark text-lg"></i></button>
 </div>

 <div class="space-y-6">
 <?php if($viewingMaterial['type'] === 'file' && !empty($viewingMaterial['file_path'])): ?>
 <?php 
 $ext = strtolower(pathinfo($viewingMaterial['file_path'], PATHINFO_EXTENSION));
 $isPdf = ($ext === 'pdf');
 $isImage = in_array($ext, ['jpg', 'jpeg', 'png', 'gif', 'webp']);
 ?>
 <?php if($isPdf || $isImage): ?>
 <div class="border border-gray-100 rounded-2xl overflow-hidden bg-white">
 <div class="px-4 py-2 border-b border-gray-50 bg-gray-50/50 flex items-center justify-between">
 <span class="text-[9px] font-bold text-gray-400 uppercase tracking-widest">Resource Preview</span>
 <a href="<?php echo url($viewingMaterial['file_path']); ?>" target="_blank" class="text-[9px] font-bold text-blue-600 hover:underline uppercase">Full Screen</a>
 </div>
 <div class="flex items-center justify-center min-h-[200px]">
 <?php if($isPdf): ?>
 <iframe src="<?php echo url($viewingMaterial['file_path']); ?>" class="w-full h-[400px] border-none"></iframe>
 <?php else: ?>
 <img src="<?php echo url($viewingMaterial['file_path']); ?>" class="max-w-full h-auto max-h-[400px] object-contain p-2">
 <?php endif; ?>
 </div>
 </div>
 <?php endif; ?>
 <?php endif; ?>

 <div class="p-4 bg-gray-50 rounded-2xl border border-gray-100">
 <p class="text-[8px] font-bold text-gray-400 uppercase tracking-widest mb-2">Description</p>
 <p class="text-xs text-gray-600 leading-relaxed"><?php echo $viewingMaterial['description'] ?: 'No description provided'; ?></p>
 </div>

 <div class="grid grid-cols-2 gap-4">
 <div class="p-4 border border-gray-100 rounded-2xl">
 <p class="text-[8px] font-bold text-gray-400 uppercase tracking-widest mb-1.5">Assigned Course</p>
 <p class="text-[11px] font-bold text-gray-900"><?php echo $viewingMaterial['course_name'] ?: 'Public (All)'; ?></p>
 </div>
 <div class="p-4 border border-gray-100 rounded-2xl">
 <p class="text-[8px] font-bold text-gray-400 uppercase tracking-widest mb-1.5">Assigned Batch</p>
 <p class="text-[11px] font-bold text-gray-900"><?php echo $viewingMaterial['batch_name'] ?: 'All Batches'; ?></p>
 </div>
 </div>

 <div class="pt-4 flex items-center gap-3">
 <?php if($viewingMaterial['type'] === 'file'): ?>
 <a href="<?php echo url($viewingMaterial['file_path']); ?>" target="_blank" class="flex-1 px-6 py-3.5 bg-blue-600 text-white text-[11px] font-bold rounded-xl hover:bg-blue-700 transition-all flex items-center justify-center gap-2 -600/20"><i class="fa-solid fa-download"></i> Download Resource</a>
 <?php else: ?>
 <a href="<?php echo $viewingMaterial['link_url']; ?>" target="_blank" class="flex-1 px-6 py-3.5 bg-blue-600 text-white text-[11px] font-bold rounded-xl hover:bg-blue-700 transition-all flex items-center justify-center gap-2 -600/20"><i class="fa-solid fa-arrow-up-right-from-square"></i> Open External Link</a>
 <?php endif; ?>
 <button @click="showViewModal = false; window.location.href='<?php echo url('admin/study-materials'); ?>'" class="px-6 py-3.5 bg-gray-100 text-gray-600 text-[11px] font-bold rounded-xl hover:bg-gray-200 transition-all">Close</button>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 <?php endif; ?>

 <!-- Delete Modal Overlay -->
 <div x-show="deleteModalOpen" class="fixed inset-0 z-[110] overflow-y-auto" x-cloak>
 <div class="flex items-center justify-center min-h-screen px-4">
 <div class="fixed inset-0 bg-gray-900/40 backdrop-blur-sm" @click="deleteModalOpen = false"></div>
 <div class="bg-white rounded-3xl p-6 max-w-[440px] w-full relative z-[120] border border-gray-100">
 <div class="flex items-start gap-5">
 <div class="w-12 h-12 bg-red-50 text-red-500 rounded-2xl flex items-center justify-center flex-none text-lg">
 <i class="fa-solid fa-trash-can"></i>
 </div>
 <div class="flex-1">
 <h3 class="text-lg font-black text-gray-900">Delete Material?</h3>
 <p class="text-[11px] font-medium text-gray-400 leading-relaxed mt-1">This action is permanent. Students assigned to this resource will lose access immediately.</p>
 <div class="flex justify-end gap-2 mt-6">
 <button @click="deleteModalOpen = false" class="px-5 py-2.5 bg-white border border-gray-200 text-gray-500 text-[10px] font-bold rounded-xl hover:bg-gray-50 transition-all">Cancel</button>
 <a :href="'<?php echo url('admin/study-materials/delete'); ?>?id=' + deleteId" class="px-5 py-2.5 bg-red-500 text-white text-[10px] font-bold rounded-xl hover:bg-red-600 transition-all active:scale-95 flex items-center justify-center">Yes, Delete</a>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
</div>

<?php require_once 'layouts/footer.php'; ?>
