@extends('layouts.guru')

@section('title', 'Kelola Materi - SIPENA Guru')
@section('page_title', 'Kelola Materi')

@push('styles')
<style>
    /* Modernized Filters bar styling for consistent height, spacing, alignment */
    .filter-search-form {
        display: flex;
        gap: 12px;
        align-items: center;
        flex-wrap: wrap;
        margin: 0;
    }
    .filter-search-form .form-control {
        height: 42px !important;
        padding: 10px 16px !important;
        font-size: 0.9rem !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        background-color: #fff !important;
        color: #0f172a !important;
        transition: all 0.2s ease !important;
    }
    .filter-search-form .form-control:focus {
        outline: none !important;
        border-color: #2563eb !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
    }
    .filter-search-form select.form-control {
        appearance: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 14px center !important;
        padding-right: 36px !important;
    }
    .filter-search-form button, 
    .filter-search-form a.btn {
        height: 42px !important;
        padding: 0 20px !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        text-decoration: none !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }
    .filter-search-form .btn-primary {
        background-color: #2563eb !important;
        border: 1px solid #2563eb !important;
        color: #fff !important;
    }
    .filter-search-form .btn-primary:hover {
        background-color: #1d4ed8 !important;
        border-color: #1d4ed8 !important;
    }
    .filter-search-form .btn-outline {
        background-color: transparent !important;
        border: 1px solid #cbd5e1 !important;
        color: #475569 !important;
    }
    .filter-search-form .btn-outline:hover {
        background-color: #f1f5f9 !important;
        color: #0f172a !important;
    }

    /* Modal overlay styling matching SIPENA guidelines */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(15, 23, 42, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2000;
        opacity: 0;
        pointer-events: none;
        transition: all 0.3s ease;
    }
    .modal-overlay.show {
        opacity: 1;
        pointer-events: auto;
    }
    
    /* Modal content default scroll settings */
    .modal-content {
        background-color: white;
        border-radius: 12px;
        width: 90%;
        max-width: 600px;
        box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
        overflow: hidden;
        max-height: 90vh;
        display: flex;
        flex-direction: column;
        transition: all 0.3s ease;
    }
    
    /* Large Modal for Preview */
    .modal-content-large {
        width: 90vw !important;
        height: 90vh !important;
        max-width: 95vw !important;
        max-height: 95vh !important;
    }

    /* Fullscreen modal class override */
    .modal-content.fullscreen {
        max-width: 100% !important;
        width: 100vw !important;
        max-height: 100vh !important;
        height: 100vh !important;
        border-radius: 0 !important;
    }

    .modal-header {
        padding: 16px 24px;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-shrink: 0;
        background-color: #fff;
    }
    .modal-header h3 {
        font-size: 1.1rem;
        font-weight: 600;
        color: #1e293b;
        margin: 0;
    }
    .modal-header .close-btn {
        background: none;
        border: none;
        font-size: 1.25rem;
        color: #64748b;
        cursor: pointer;
    }
    
    /* Modal body scroll container */
    .modal-body-scroll {
        padding: 24px;
        overflow-y: auto;
        flex-grow: 1;
    }
    
    .modal-footer {
        padding: 16px 24px;
        background-color: #f8fafc;
        border-top: 1px solid #e2e8f0;
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        flex-shrink: 0;
    }
    .pagination-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
    }

    /* Loading Overlay styling */
    .loading-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(15, 23, 42, 0.7);
        z-index: 9999;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 16px;
        color: white;
    }
    .spinner {
        width: 50px;
        height: 50px;
        border: 5px solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        border-top-color: #2563eb;
        animation: spin 1s linear infinite;
    }
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
</style>
@endpush

@section('content')
<!-- Loading Overlay -->
<div class="loading-overlay" id="loadingOverlay">
    <div class="spinner"></div>
    <span style="font-weight: 500; font-size: 1.1rem; letter-spacing: 0.5px;">Sedang memproses data...</span>
</div>

<!-- Page Header -->
<div class="page-header">
    <h1>Kelola Materi Pembelajaran</h1>
    <p>Guru dapat mengupload dan mengelola materi pembelajaran siswa.</p>
</div>

<!-- Stats Cards (First on the hierarchy) -->
<div class="stats-grid" style="margin-bottom: 24px;">
    <div class="stat-card">
        <div class="stat-icon bg-blue">
            <i class="fa-solid fa-book-open"></i>
        </div>
        <div class="stat-details">
            <h3>Total Materi</h3>
            <p class="stat-value">{{ $totalMateri }}</p>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon bg-green">
            <i class="fa-solid fa-check-circle"></i>
        </div>
        <div class="stat-details">
            <h3>Materi Aktif</h3>
            <p class="stat-value">{{ $materiAktif }}</p>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon bg-orange">
            <i class="fa-solid fa-file-pen"></i>
        </div>
        <div class="stat-details">
            <h3>Materi Draft</h3>
            <p class="stat-value">{{ $materiDraft }}</p>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon bg-purple">
            <i class="fa-solid fa-cloud-arrow-up"></i>
        </div>
        <div class="stat-details">
            <h3>Total Upload</h3>
            <p class="stat-value">{{ $totalUpload }}</p>
        </div>
    </div>
</div>

<!-- Daftar Materi Table (Now the primary content) -->
<div class="card">
    <div class="card-header" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding: 20px 24px;">
        <h3 style="margin: 0; display: inline-flex; align-items: center; gap: 8px;"><i class="fa-solid fa-list text-primary"></i> Daftar Materi Pembelajaran</h3>
        <div style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
            
            <!-- Search & Filter Form with Standardized Layout -->
            <form action="{{ route('guru.materi') }}" method="GET" class="filter-search-form" style="width: auto;">
                <input type="text" name="search" class="form-control" placeholder="Cari materi..." value="{{ request('search') }}" style="width: 280px;">
                
                <select name="filter_mapel" class="form-control" style="width: 180px;">
                    <option value="">Semua Mapel</option>
                    @foreach($mataPelajaran as $mapel)
                        <option value="{{ $mapel->id }}" {{ request('filter_mapel') == $mapel->id ? 'selected' : '' }}>{{ $mapel->nama_mapel }}</option>
                    @endforeach
                </select>

                <select name="filter_kelas" class="form-control" style="width: 180px;">
                    <option value="">Semua Kelas</option>
                    @foreach($kelas as $k)
                        <option value="{{ $k->id }}" {{ request('filter_kelas') == $k->id ? 'selected' : '' }}>Kelas {{ $k->nama_kelas }}</option>
                    @endforeach
                </select>

                <select name="filter_status" class="form-control" style="width: 180px;">
                    <option value="">Semua Status</option>
                    <option value="aktif" {{ request('filter_status') == 'aktif' ? 'selected' : '' }}>Aktif</option>
                    <option value="draft" {{ request('filter_status') == 'draft' ? 'selected' : '' }}>Draft</option>
                </select>

                <button type="submit" class="btn btn-primary" style="width: 110px;"><i class="fa-solid fa-magnifying-glass"></i> Cari</button>
                @if(request()->has('search') || request()->has('filter_mapel') || request()->has('filter_kelas') || request()->has('filter_status'))
                    <a href="{{ route('guru.materi') }}" class="btn btn-outline" style="width: 110px;"><i class="fa-solid fa-rotate-left"></i> Reset</a>
                @endif
            </form>
            
            <!-- Upload Button on the right -->
            <button type="button" class="btn btn-primary" onclick="openUploadModal()" style="height: 42px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; box-sizing: border-box; border-radius: 8px;">
                <i class="fa-solid fa-plus"></i> Upload Materi
            </button>
        </div>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="modern-table">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Judul Materi</th>
                        <th>Mata Pelajaran</th>
                        <th>Kelas</th>
                        <th>Tanggal Upload</th>
                        <th>Nama File</th>
                        <th>Status</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($materiList as $index => $materi)
                        <tr>
                            <td>{{ $materiList->firstItem() + $index }}</td>
                            <td style="font-weight: 500;">{{ $materi->judul }}</td>
                            <td>{{ $materi->mataPelajaran?->nama_mapel }}</td>
                            <td>Kelas {{ $materi->kelas?->nama_kelas }}</td>
                            <td>{{ $materi->created_at->translatedFormat('d M Y') }}</td>
                            <td>
                                @if($materi->tipe_file === 'pdf')
                                    <i class="fa-solid fa-file-pdf" style="color: #ef4444; margin-right: 4px;"></i>
                                @elseif(in_array($materi->tipe_file, ['ppt', 'pptx']))
                                    <i class="fa-solid fa-file-powerpoint" style="color: #f97316; margin-right: 4px;"></i>
                                @else
                                    <i class="fa-solid fa-file-image" style="color: #10b981; margin-right: 4px;"></i>
                                @endif
                                {{ $materi->nama_file }}
                            </td>
                            <td>
                                @if($materi->status === 'aktif')
                                    <span class="badge badge-aktif">Aktif</span>
                                @else
                                     <span class="badge badge-draft">Draft</span>
                                @endif
                            </td>
                            <td>
                                <div class="action-buttons">
                                    <button class="btn-icon btn-icon-view" title="Lihat" onclick="openPreviewModal({{ json_encode($materi) }})"><i class="fa-solid fa-eye"></i></button>
                                    <button class="btn-icon btn-icon-edit" title="Edit" onclick="openEditModal({{ json_encode($materi) }})"><i class="fa-solid fa-pen"></i></button>
                                    <button class="btn-icon btn-icon-delete" title="Hapus" onclick="confirmDelete({{ $materi->id }}, '{{ addslashes($materi->judul) }}')"><i class="fa-solid fa-trash"></i></button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" style="text-align: center; color: #64748b; padding: 20px;">Belum ada materi pembelajaran yang diupload.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
            
            <!-- Pagination -->
            <div class="pagination-container">
                <span style="font-size: 0.9rem; color: var(--text-gray);">
                    Menampilkan {{ $materiList->firstItem() ?? 0 }} - {{ $materiList->lastItem() ?? 0 }} dari {{ $materiList->total() }} materi
                </span>
                <div>
                    {{ $materiList->links('vendor.pagination.custom') }}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Upload Materi -->
<div class="modal-overlay" id="uploadMateriModal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Upload Materi Pembelajaran</h3>
            <button class="close-btn" onclick="closeUploadModal()">&times;</button>
        </div>
        <form id="uploadMateriForm" action="{{ route('guru.materi.store') }}" method="POST" enctype="multipart/form-data" onsubmit="handleFormSubmit(this)">
            @csrf
            <div class="modal-body-scroll">
                <div class="form-group mb-3">
                    <label for="judul" class="form-label" style="font-weight: 500;">Judul Materi <span class="text-danger">*</span></label>
                    <input type="text" name="judul" id="judul" class="form-control" placeholder="Contoh: Belajar Pecahan Dasar" required style="width:100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; height: 40px; box-sizing: border-box;">
                </div>

                <div class="form-row mb-3" style="display: flex; gap: 16px;">
                    <div class="form-group" style="flex: 1;">
                        <label for="mata_pelajaran_id" class="form-label" style="font-weight: 500;">Mata Pelajaran <span class="text-danger">*</span></label>
                        <select name="mata_pelajaran_id" id="mata_pelajaran_id" class="form-control" required style="width:100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; height: 40px; box-sizing: border-box;">
                            <option value="">Pilih Mapel</option>
                            @foreach($mataPelajaran as $mapel)
                                <option value="{{ $mapel->id }}">{{ $mapel->nama_mapel }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group" style="flex: 1;">
                        <label for="kelas_id" class="form-label" style="font-weight: 500;">Kelas <span class="text-danger">*</span></label>
                        <select name="kelas_id" id="kelas_id" class="form-control" required style="width:100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; height: 40px; box-sizing: border-box;">
                            <option value="">Pilih Kelas</option>
                            @foreach($kelas as $k)
                                <option value="{{ $k->id }}">Kelas {{ $k->nama_kelas }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="form-row mb-3" style="display: flex; gap: 16px;">
                    <div class="form-group" style="flex: 1;">
                        <label for="status" class="form-label" style="font-weight: 500;">Status <span class="text-danger">*</span></label>
                        <select name="status" id="status" class="form-control" required style="width:100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; height: 40px; box-sizing: border-box;">
                            <option value="aktif">Aktif</option>
                            <option value="draft">Draft</option>
                        </select>
                    </div>
                    <div class="form-group" style="flex: 1;">
                        <!-- empty placeholder for grid balancing -->
                    </div>
                </div>

                <div class="form-group mb-3">
                    <label for="file" class="form-label" style="font-weight: 500;">File Materi <span class="text-danger">*</span></label>
                    <div class="file-drop-area" style="position: relative; border: 2px dashed #cbd5e1; border-radius: 8px; padding: 24px; text-align: center; background-color: #f8fafc; transition: all 0.2s ease;">
                        <i class="fa-solid fa-cloud-arrow-up" style="font-size: 2rem; color: var(--text-gray); margin-bottom: 8px;"></i>
                        <p id="upload-file-label" style="margin: 0; font-size: 0.9rem; color: var(--text-gray);">Klik atau drag & drop file di sini</p>
                        <span style="font-size: 0.8rem; color: var(--text-gray); display: block; margin-top: 4px;">Format: PDF, PPT, PPTX, JPG, JPEG, PNG, WEBP (Maksimal 10MB)</span>
                        <input type="file" name="file" id="file" required style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;">
                    </div>
                </div>

                <div class="form-group mb-3">
                    <label for="deskripsi" class="form-label" style="font-weight: 500;">Deskripsi</label>
                    <textarea name="deskripsi" id="deskripsi" class="form-control" rows="3" placeholder="Masukkan deskripsi materi pembelajaran (opsional)..." style="width:100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; resize: vertical; min-height: 80px;"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline" onclick="closeUploadModal()">Batal</button>
                <button type="submit" class="btn btn-primary" id="uploadSubmitBtn"><i class="fa-solid fa-upload"></i> Upload</button>
            </div>
        </form>
    </div>
</div>

<!-- Modal Preview Materi -->
<div class="modal-overlay" id="previewMateriModal">
    <div class="modal-content modal-content-large" id="preview-modal-content">
        <!-- Modern, beautifully layouted header with full info & actions -->
        <div class="modal-header" style="flex-wrap: wrap; gap: 12px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 14px 20px;">
            <div style="flex: 1; min-width: 250px;">
                <h3 id="preview-modal-title" style="font-size: 1.25rem; font-weight: 700; color: #0f172a; margin: 0; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">-</h3>
                <div style="display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 0.85rem; color: #475569;">
                    <span id="preview-modal-meta"><i class="fa-solid fa-graduation-cap"></i> -</span>
                    <span><i class="fa-solid fa-calendar"></i> <span id="preview-modal-date">-</span></span>
                    <span id="preview-modal-status-badge" class="badge">-</span>
                </div>
            </div>
            
            <!-- Modal actions: Zoom, Fullscreen, Download, Close -->
            <div style="display: flex; align-items: center; gap: 8px; flex-shrink: 0;">
                <!-- Zoom controls for images only -->
                <div id="image-zoom-controls" style="display: none; align-items: center; background: #fff; border: 1px solid #cbd5e1; border-radius: 6px; padding: 2px 6px; gap: 6px;">
                    <button class="btn-icon" title="Zoom Out" onclick="zoomImage(-0.1)" style="width: 28px; height: 28px; font-size: 0.8rem; border-radius: 4px; padding: 0;"><i class="fa-solid fa-magnifying-glass-minus"></i></button>
                    <span id="zoom-percentage" style="font-size: 0.85rem; font-weight: 600; min-width: 36px; text-align: center;">100%</span>
                    <button class="btn-icon" title="Zoom In" onclick="zoomImage(0.1)" style="width: 28px; height: 28px; font-size: 0.8rem; border-radius: 4px; padding: 0;"><i class="fa-solid fa-magnifying-glass-plus"></i></button>
                    <button class="btn-icon" title="Reset Zoom" onclick="resetZoom()" style="width: 28px; height: 28px; font-size: 0.8rem; border-radius: 4px; padding: 0; margin-left: 2px;"><i class="fa-solid fa-rotate"></i></button>
                </div>

                <a id="preview-header-download-btn" href="#" class="btn btn-outline" style="height: 34px !important; padding: 0 12px !important; font-size: 0.85rem !important; border-radius: 6px !important; display: inline-flex !important; align-items: center; gap: 6px;" download>
                    <i class="fa-solid fa-download"></i> Download
                </a>
                
                <button class="btn btn-outline" onclick="toggleFullscreen()" style="width: 34px; height: 34px; border-radius: 6px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: #fff;">
                    <i id="fullscreen-icon" class="fa-solid fa-expand"></i>
                </button>
                
                <button class="close-btn" onclick="closePreviewModal()" style="font-size: 1.5rem; color: #475569; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid #cbd5e1; background: #fff; cursor: pointer; transition: all 0.2s;">&times;</button>
            </div>
        </div>

        <div class="modal-body-scroll" style="padding: 0; display: flex; flex-direction: column; background-color: #f1f5f9; position: relative;">
            <!-- Loading Indicator inside modal -->
            <div id="preview-loading" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(241, 245, 249, 0.95); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 100; gap: 12px;">
                <div class="spinner" style="border-top-color: #2563eb; width: 40px; height: 40px; border-width: 4px;"></div>
                <span style="font-weight: 500; color: #475569; font-size: 0.95rem;">Membuka materi...</span>
            </div>

            <!-- Description section -->
            <div style="background-color: #fff; padding: 12px 20px; border-bottom: 1px solid #e2e8f0; flex-shrink: 0;">
                <h4 style="margin: 0 0 4px 0; font-size: 0.9rem; color: #475569; font-weight: 600;">Deskripsi:</h4>
                <p id="preview-modal-desc" style="margin: 0; font-size: 0.9rem; color: #0f172a; line-height: 1.4; max-height: 60px; overflow-y: auto;">-</p>
            </div>

            <!-- Preview content wrappers -->
            <div style="flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; height: 100%;">
                
                <!-- PDF Preview Container -->
                <div id="preview-container-pdf" style="display: none; width: 100%; height: 100%;">
                    <iframe id="preview-iframe-pdf" src="" style="width: 100%; height: 100%; border: none;"></iframe>
                </div>

                <!-- Image Preview Container -->
                <div id="preview-container-image" style="display: none; width: 100%; height: 100%; overflow: auto; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box;">
                    <img id="preview-img" src="" alt="Materi Preview" style="max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.2s ease; transform-origin: center center; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);">
                </div>

                <!-- PPT/PPTX Presentational Fallback -->
                <div id="preview-container-ppt" style="display: none; width: 100%; height: 100%; align-items: center; justify-content: center; padding: 40px; box-sizing: border-box;">
                    <div style="background-color: #fff; border-radius: 12px; padding: 40px; text-align: center; max-width: 450px; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); border: 1px solid #e2e8f0;">
                        <i class="fa-solid fa-file-powerpoint" style="font-size: 5rem; color: #ea580c; margin-bottom: 20px;"></i>
                        <h4 id="preview-ppt-filename" style="margin: 0 0 8px 0; font-size: 1.15rem; color: #0f172a; font-weight: 700; word-break: break-all;">Materi Presentation.pptx</h4>
                        <div style="color: #64748b; font-size: 0.9rem; margin-bottom: 24px;">
                            <span id="preview-ppt-size" style="display: block; margin-bottom: 4px;">Ukuran: -</span>
                            <span id="preview-ppt-date">Tanggal Upload: -</span>
                        </div>
                        <a id="preview-ppt-download-btn" href="#" class="btn btn-primary" style="width: 100%; height: 42px !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; font-weight: 600;">
                            <i class="fa-solid fa-download"></i> Download Materi
                        </a>
                    </div>
                </div>

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

<!-- Modal Edit Materi -->
<div class="modal-overlay" id="editMateriModal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Edit Materi Pembelajaran</h3>
            <button class="close-btn" onclick="closeEditModal()">&times;</button>
        </div>
        <form id="editMateriForm" action="" method="POST" enctype="multipart/form-data" onsubmit="handleFormSubmit(this)">
            @csrf
            @method('PUT')
            <div class="modal-body-scroll">
                <div class="form-group mb-3">
                    <label for="edit_judul" class="form-label" style="font-weight: 500;">Judul Materi <span class="text-danger">*</span></label>
                    <input type="text" name="judul" id="edit_judul" class="form-control" required style="width:100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; height: 40px; box-sizing: border-box;">
                </div>

                <div class="form-row mb-3" style="display: flex; gap: 16px;">
                    <div class="form-group" style="flex: 1;">
                        <label for="edit_mapel" class="form-label" style="font-weight: 500;">Mata Pelajaran <span class="text-danger">*</span></label>
                        <select name="mata_pelajaran_id" id="edit_mapel" class="form-control" required style="width:100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; height: 40px; box-sizing: border-box;">
                            <option value="">Pilih Mapel</option>
                            @foreach($mataPelajaran as $mapel)
                                <option value="{{ $mapel->id }}">{{ $mapel->nama_mapel }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group" style="flex: 1;">
                        <label for="edit_kelas" class="form-label" style="font-weight: 500;">Kelas <span class="text-danger">*</span></label>
                        <select name="kelas_id" id="edit_kelas" class="form-control" required style="width:100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; height: 40px; box-sizing: border-box;">
                            <option value="">Pilih Kelas</option>
                            @foreach($kelas as $k)
                                <option value="{{ $k->id }}">Kelas {{ $k->nama_kelas }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="form-row mb-3" style="display: flex; gap: 16px;">
                    <div class="form-group" style="flex: 1;">
                        <label for="edit_status" class="form-label" style="font-weight: 500;">Status <span class="text-danger">*</span></label>
                        <select name="status" id="edit_status" class="form-control" required style="width:100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; height: 40px; box-sizing: border-box;">
                            <option value="aktif">Aktif</option>
                            <option value="draft">Draft</option>
                        </select>
                    </div>
                    <div class="form-group" style="flex: 1;">
                        <!-- empty placeholder for grid balancing -->
                    </div>
                </div>

                <div class="form-group mb-3">
                    <label for="edit_file" class="form-label" style="font-weight: 500;">File Materi <span class="text-gray" style="font-size: 0.85rem; font-weight: normal;">(Biarkan kosong jika tidak ingin mengganti file)</span></label>
                    <div class="file-drop-area" style="position: relative; border: 2px dashed #cbd5e1; border-radius: 8px; padding: 24px; text-align: center; background-color: #f8fafc; transition: all 0.2s ease;">
                        <i class="fa-solid fa-cloud-arrow-up" style="font-size: 2rem; color: var(--text-gray); margin-bottom: 8px;"></i>
                        <p id="edit-file-label" style="margin: 0; font-size: 0.9rem; color: var(--text-gray);">Klik atau drag & drop file di sini jika ingin mengganti</p>
                        <span style="font-size: 0.8rem; color: var(--text-gray); display: block; margin-top: 4px;">Format: PDF, PPT, PPTX, JPG, JPEG, PNG, WEBP (Maksimal 10MB)</span>
                        <input type="file" name="file" id="edit_file" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;">
                    </div>
                </div>

                <div class="form-group mb-3">
                    <label for="edit_deskripsi" class="form-label" style="font-weight: 500;">Deskripsi</label>
                    <textarea name="deskripsi" id="edit_deskripsi" class="form-control" rows="3" placeholder="Masukkan deskripsi materi pembelajaran (opsional)..." style="width:100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; resize: vertical; min-height: 80px;"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline" onclick="closeEditModal()">Batal</button>
                <button type="submit" class="btn btn-primary" id="editSubmitBtn"><i class="fa-solid fa-save"></i> Perbarui Materi</button>
            </div>
        </form>
    </div>
</div>

<!-- Hidden Form for Deletion -->
<form id="deleteMateriForm" action="" method="POST" style="display: none;">
    @csrf
    @method('DELETE')
</form>
@endsection

@push('scripts')
<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<!-- SweetAlert2 Scripts for dynamic session alerts -->
@if (session('success'))
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            Swal.fire({
                icon: 'success',
                title: 'Berhasil',
                text: "{{ session('success') }}",
                confirmButtonColor: '#2563eb'
            });
        });
    </script>
@endif

@if (session('error'))
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: "{{ session('error') }}",
                confirmButtonColor: '#2563eb'
            });
        });
    </script>
@endif

@if ($errors->any())
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            Swal.fire({
                icon: 'error',
                title: 'Gagal menyimpan data',
                html: `{!! implode('<br>', array_map(function($e) { return '• ' . htmlspecialchars($e); }, $errors->all())) !!}`,
                confirmButtonColor: '#2563eb'
            });
        });
    </script>
@endif

<!-- Script for interactive Modal features -->
<script>
    let currentZoom = 1.0;

    // Helper function to format bytes to human readable format
    function formatBytes(bytes, decimals = 2) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const dm = decimals < 0 ? 0 : decimals;
        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
    }

    // Show loading spinner overlay
    function showLoading() {
        document.getElementById('loadingOverlay').style.display = 'flex';
    }

    // Hide loading spinner overlay
    function hideLoading() {
        document.getElementById('loadingOverlay').style.display = 'none';
    }

    // Handle Form Submit to show loading and disable submit buttons
    function handleFormSubmit(form) {
        showLoading();
        
        // Disable all submit buttons inside the form
        const submits = form.querySelectorAll('button[type="submit"]');
        submits.forEach(btn => {
            btn.disabled = true;
        });
        
        const uploadBtn = document.getElementById('uploadSubmitBtn');
        if (uploadBtn) uploadBtn.disabled = true;
        const editBtn = document.getElementById('editSubmitBtn');
        if (editBtn) editBtn.disabled = true;
    }

    document.addEventListener('DOMContentLoaded', function() {
        // Handle file upload styling & size display on selection
        const fileInput = document.getElementById('file');
        const fileWrapper = document.getElementById('upload-file-label');
        
        if (fileInput) {
            fileInput.addEventListener('change', function() {
                if (this.files && this.files.length > 0) {
                    const file = this.files[0];
                    const sizeStr = formatBytes(file.size);
                    fileWrapper.innerHTML = `<strong>${file.name}</strong> (${sizeStr}) berhasil dipilih`;
                    fileWrapper.style.color = 'var(--primary-color)';
                } else {
                    fileWrapper.innerHTML = `Klik atau drag & drop file di sini`;
                    fileWrapper.style.color = 'var(--text-gray)';
                }
            });
        }

        // Handle edit file upload styling & size display on selection
        const editFileInput = document.getElementById('edit_file');
        const editFileWrapper = document.getElementById('edit-file-label');
        
        if (editFileInput) {
            editFileInput.addEventListener('change', function() {
                if (this.files && this.files.length > 0) {
                    const file = this.files[0];
                    const sizeStr = formatBytes(file.size);
                    editFileWrapper.innerHTML = `<strong>${file.name}</strong> (${sizeStr}) berhasil dipilih`;
                    editFileWrapper.style.color = 'var(--primary-color)';
                } else {
                    editFileWrapper.innerHTML = `Klik atau drag & drop file di sini jika ingin mengganti`;
                    editFileWrapper.style.color = 'var(--text-gray)';
                }
            });
        }
    });

    // Upload Modal Controls
    function openUploadModal() {
        document.getElementById('uploadMateriModal').classList.add('show');
    }

    // Close Upload Modal
    function closeUploadModal() {
        document.getElementById('uploadMateriModal').classList.remove('show');
        document.getElementById('uploadMateriForm').reset();
        const label = document.getElementById('upload-file-label');
        if (label) {
            label.innerHTML = "Klik atau drag & drop file di sini";
            label.style.color = 'var(--text-gray)';
        }
    }

    // Preview Modal Controls with availability check
    function openPreviewModal(materi) {
        const downloadUrl = `{{ url('/guru/materi') }}/${materi.id}/download`;
        let fileUrl = "{{ route('materi.preview', ':id') }}";
        fileUrl = fileUrl.replace(':id', materi.id);

        showLoading(); // Show global spinner while verifying file availability

        // Verify file availability via background fetch
        fetch(fileUrl, { method: 'HEAD' })
            .then(response => {
                hideLoading();
                if (response.ok) {
                    // File exists on server, open preview
                    realOpenPreviewModal(materi, fileUrl, downloadUrl);
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal Membuka Materi',
                        text: 'File tidak dapat dimuat atau tidak ditemukan.',
                        confirmButtonColor: '#2563eb'
                    });
                }
            })
            .catch(error => {
                hideLoading();
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal Membuka Materi',
                    text: 'File tidak dapat dimuat atau tidak ditemukan.',
                    confirmButtonColor: '#2563eb'
                });
            });
    }

    // Internal open function after verification passes
    function realOpenPreviewModal(materi, fileUrl, downloadUrl) {
        document.getElementById('preview-modal-title').innerText = materi.judul;
        
        // Set modern header information
        const mapelName = materi.mata_pelajaran ? materi.mata_pelajaran.nama_mapel : '-';
        const kelasName = materi.kelas ? materi.kelas.nama_kelas : '-';
        document.getElementById('preview-modal-meta').innerText = `${mapelName} • Kelas ${kelasName}`;
        
        // Format date
        const dateObj = new Date(materi.created_at);
        const options = { day: 'numeric', month: 'long', year: 'numeric' };
        const formattedDate = dateObj.toLocaleDateString('id-ID', options);
        document.getElementById('preview-modal-date').innerText = formattedDate;

        // Status badge
        const statusBadge = document.getElementById('preview-modal-status-badge');
        statusBadge.innerText = materi.status === 'aktif' ? 'Aktif' : 'Draft';
        statusBadge.className = 'badge ' + (materi.status === 'aktif' ? 'badge-aktif' : 'badge-draft');

        // Set description text
        document.getElementById('preview-modal-desc').innerText = materi.deskripsi || 'Tidak ada deskripsi.';

        // Reset image scale & UI zoom indicators
        currentZoom = 1.0;
        const imgEl = document.getElementById('preview-img');
        if (imgEl) {
            imgEl.style.transform = `scale(${currentZoom})`;
        }
        document.getElementById('zoom-percentage').innerText = '100%';

        // Hide all layout view containers
        document.getElementById('preview-container-pdf').style.display = 'none';
        document.getElementById('preview-container-image').style.display = 'none';
        document.getElementById('preview-container-ppt').style.display = 'none';
        document.getElementById('image-zoom-controls').style.display = 'none';

        // Set header download button link
        document.getElementById('preview-header-download-btn').href = downloadUrl;

        // Reset modal fullscreen toggles
        const modalContent = document.getElementById('preview-modal-content');
        modalContent.classList.remove('fullscreen');
        const fsIcon = document.getElementById('fullscreen-icon');
        fsIcon.className = 'fa-solid fa-expand';

        // Show loading spinner inside modal body
        const previewLoading = document.getElementById('preview-loading');
        previewLoading.style.display = 'flex';

        if (materi.tipe_file === 'pdf') {
            const iframe = document.getElementById('preview-iframe-pdf');
            iframe.src = fileUrl; // Load inline PDF preview
            iframe.onload = function() {
                previewLoading.style.display = 'none';
            };
            document.getElementById('preview-container-pdf').style.display = 'block';
        } else if (materi.tipe_file === 'image') {
            const img = document.getElementById('preview-img');
            img.src = fileUrl; // Load inline Image preview
            img.onload = function() {
                previewLoading.style.display = 'none';
            };
            document.getElementById('preview-container-image').style.display = 'flex';
            document.getElementById('image-zoom-controls').style.display = 'flex';
        } else { // ppt or pptx presentational card
            previewLoading.style.display = 'none';
            
            document.getElementById('preview-ppt-filename').innerText = materi.nama_file;
            document.getElementById('preview-ppt-size').innerText = 'Ukuran: ' + formatBytes(materi.ukuran_file);
            document.getElementById('preview-ppt-date').innerText = 'Tanggal Upload: ' + formattedDate;
            document.getElementById('preview-ppt-download-btn').href = downloadUrl;
            document.getElementById('preview-container-ppt').style.display = 'flex';
        }

        document.getElementById('previewMateriModal').classList.add('show');
    }

    function closePreviewModal() {
        document.getElementById('previewMateriModal').classList.remove('show');
        document.getElementById('preview-iframe-pdf').src = '';
    }

    // Image Zoom controls
    function zoomImage(amount) {
        const img = document.getElementById('preview-img');
        if (!img) return;

        currentZoom = Math.min(Math.max(currentZoom + amount, 0.5), 3.0);
        img.style.transform = `scale(${currentZoom})`;
        document.getElementById('zoom-percentage').innerText = Math.round(currentZoom * 100) + '%';
    }

    function resetZoom() {
        const img = document.getElementById('preview-img');
        if (!img) return;

        currentZoom = 1.0;
        img.style.transform = `scale(${currentZoom})`;
        document.getElementById('zoom-percentage').innerText = '100%';
    }

    // Preview Fullscreen modal toggle
    function toggleFullscreen() {
        const modalContent = document.getElementById('preview-modal-content');
        const fsIcon = document.getElementById('fullscreen-icon');
        
        if (modalContent.classList.contains('fullscreen')) {
            modalContent.classList.remove('fullscreen');
            fsIcon.className = 'fa-solid fa-expand';
        } else {
            modalContent.classList.add('fullscreen');
            fsIcon.className = 'fa-solid fa-compress';
        }
    }

    // Edit Modal Controls
    function openEditModal(materi) {
        let actionUrl = "{{ route('guru.materi.update', ':id') }}";
        actionUrl = actionUrl.replace(':id', materi.id);
        document.getElementById('editMateriForm').action = actionUrl;
        
        document.getElementById('edit_judul').value = materi.judul;
        document.getElementById('edit_mapel').value = materi.mata_pelajaran_id;
        document.getElementById('edit_kelas').value = materi.kelas_id;
        document.getElementById('edit_status').value = materi.status;
        document.getElementById('edit_deskripsi').value = materi.deskripsi || '';
        
        // Reset file picker input in edit form
        document.getElementById('edit_file').value = '';
        document.getElementById('edit-file-label').innerHTML = `Klik atau drag & drop file di sini jika ingin mengganti`;
        document.getElementById('edit-file-label').style.color = 'var(--text-gray)';
        
        document.getElementById('editMateriModal').classList.add('show');
    }

    function closeEditModal() {
        document.getElementById('editMateriModal').classList.remove('show');
    }

    // Delete Confirm Control using SweetAlert2
    function confirmDelete(id, judul) {
        Swal.fire({
            title: 'Konfirmasi Hapus',
            text: `Apakah Anda yakin ingin menghapus materi "${judul}"?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#ef4444',
            cancelButtonColor: '#64748b',
            confirmButtonText: 'Ya, Hapus',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                showLoading();
                
                // Disable all action buttons
                document.querySelectorAll('.action-buttons button').forEach(btn => {
                    btn.disabled = true;
                });
                
                let actionUrl = "{{ route('guru.materi.destroy', ':id') }}";
                actionUrl = actionUrl.replace(':id', id);
                
                const form = document.getElementById('deleteMateriForm');
                form.action = actionUrl;
                form.submit();
            }
        });
    }
</script>
@endpush