@extends('adminlte::page')

@section('title', 'Upload Materi | Smart Cendekia')

{{-- Aktifkan plugin Select2 --}}
@section('plugins.Select2', true)

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1 class="text-dark font-weight-bold" style="font-family: 'Plus Jakarta Sans', sans-serif;">Upload Materi Baru</h1>
            <ol class="breadcrumb bg-transparent p-0 mt-1">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('library.index') }}">Perpustakaan</a></li>
                <li class="breadcrumb-item active">Upload</li>
            </ol>
        </div>
    </div>
@stop

@section('content')
<form action="{{ route('library.store') }}" method="POST" enctype="multipart/form-data">
    @csrf

    <div class="row">
        
        {{-- KOLOM KIRI: FORM INPUT UTAMA --}}
        <div class="col-md-8">
            
            {{-- 1. INFORMASI MATERI --}}
            <div class="card border-0 shadow-sm mb-4" style="border-radius: 15px;">
                <div class="card-header bg-white py-3">
                    <h3 class="card-title font-weight-bold text-primary">
                        <i class="fas fa-book-reader mr-2"></i> Informasi Materi
                    </h3>
                </div>
                <div class="card-body">
                    
                    {{-- Judul --}}
                    <div class="form-group">
                        <label>Judul Materi <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text bg-light border-0"><i class="fas fa-heading text-muted"></i></span>
                            </div>
                            <input type="text" class="form-control bg-light border-0 @error('judul') is-invalid @enderror" 
                                   name="judul" value="{{ old('judul') }}" placeholder="Contoh: Modul Matematika Aljabar Kelas X" required autofocus>
                            @error('judul') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <div class="row">
                        {{-- Mata Pelajaran --}}
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Mata Pelajaran <span class="text-danger">*</span></label>
                                <select class="form-control select2 bg-light border-0 @error('mata_pelajaran_id') is-invalid @enderror" 
                                        name="mata_pelajaran_id" style="width: 100%;">
                                    <option value="" disabled selected>-- Pilih Mapel --</option>
                                    @foreach($mapels as $mapel)
                                        <option value="{{ $mapel->id }}" {{ old('mata_pelajaran_id') == $mapel->id ? 'selected' : '' }}>
                                            {{ $mapel->nama_mapel }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('mata_pelajaran_id') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                            </div>
                        </div>

                        {{-- Penulis (Otomatis) --}}
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Penulis / Guru</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-light border-0"><i class="fas fa-user-tie text-muted"></i></span>
                                    </div>
                                    <input type="text" class="form-control bg-light border-0" 
                                           name="penulis" value="{{ Auth::user()->name }}" readonly>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Deskripsi --}}
                    <div class="form-group mb-0">
                        <label>Deskripsi Singkat (Opsional)</label>
                        <div class="input-group">
                            <textarea class="form-control bg-light border-0" name="deskripsi" rows="3" placeholder="Tulis ringkasan materi...">{{ old('deskripsi') }}</textarea>
                        </div>
                    </div>

                </div>
            </div>

            {{-- 2. FILE & MEDIA --}}
            <div class="card border-0 shadow-sm" style="border-radius: 15px;">
                <div class="card-header bg-white py-3">
                    <h3 class="card-title font-weight-bold text-info">
                        <i class="fas fa-cloud-upload-alt mr-2"></i> File & Media
                    </h3>
                </div>
                <div class="card-body">
                    
                    {{-- Upload File Dokumen --}}
                    <div class="form-group">
                        <label>File Dokumen (PDF/DOCX/PPT) <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text bg-light border-0"><i class="fas fa-file-alt text-muted"></i></span>
                            </div>
                            <div class="custom-file">
                                <input type="file" class="custom-file-input @error('file_buku') is-invalid @enderror" 
                                       id="file_buku" name="file_buku" accept=".pdf,.doc,.docx,.ppt,.pptx" required>
                                <label class="custom-file-label bg-light border-0 text-muted" for="file_buku">Pilih file materi...</label>
                            </div>
                        </div>
                        @error('file_buku') <span class="text-danger text-xs mt-1">{{ $message }}</span> @enderror
                        <small class="text-muted ml-1">Maksimal ukuran file: 20MB.</small>
                    </div>

                    {{-- Upload Cover --}}
                    <div class="form-group mb-0 mt-4">
                        <label>Sampul Buku (Opsional)</label>
                        <div class="row align-items-center">
                            <div class="col-auto">
                                <div class="bg-light rounded border d-flex align-items-center justify-content-center" style="width: 80px; height: 100px; overflow: hidden;">
                                    <img id="preview-cover" src="{{ asset('vendor/adminlte/dist/img/AdminLTELogo.png') }}" alt="Preview" style="width: 100%; height: 100%; object-fit: cover; opacity: 0.3;">
                                </div>
                            </div>
                            <div class="col">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-light border-0"><i class="fas fa-image text-muted"></i></span>
                                    </div>
                                    <div class="custom-file">
                                        <input type="file" class="custom-file-input" id="cover" name="cover" accept="image/*" onchange="previewImage(this)">
                                        <label class="custom-file-label bg-light border-0 text-muted" for="cover">Pilih gambar sampul...</label>
                                    </div>
                                </div>
                                <small class="text-muted ml-1">Format: JPG, PNG. Rasio disarankan 3:4.</small>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>

        {{-- KOLOM KANAN: TOMBOL AKSI & INFO --}}
        <div class="col-md-4">
            
            {{-- Tombol Aksi --}}
            <div class="card border-0 shadow-sm mb-3" style="border-radius: 15px;">
                <div class="card-body">
                    <button type="submit" class="btn btn-primary btn-block shadow rounded-pill font-weight-bold py-2 mb-2" 
                            style="background: linear-gradient(90deg, #4F46E5 0%, #4338CA 100%); border: none;">
                        <i class="fas fa-paper-plane mr-2"></i> Publikasikan
                    </button>
                    <a href="{{ route('library.index') }}" class="btn btn-outline-secondary btn-block rounded-pill">
                        <i class="fas fa-arrow-left mr-1"></i> Batal / Kembali
                    </a>
                </div>
            </div>

            {{-- Panduan Upload --}}
            <div class="card bg-light-warning border-0 shadow-none mb-3" style="border-radius: 15px; background-color: #FFF4DE;">
                <div class="card-body">
                    <h5 class="text-warning font-weight-bold mb-3" style="color: #FFA800 !important;">
                        <i class="fas fa-lightbulb mr-2"></i> Tips Upload
                    </h5>
                    <ul class="pl-3 small text-muted mb-0" style="line-height: 1.6; color: #7E8299 !important;">
                        <li><strong>Judul:</strong> Gunakan judul yang jelas dan spesifik (misal: menyertakan kelas/bab).</li>
                        <li><strong>File:</strong> Pastikan file tidak dikunci password agar bisa dibaca siswa.</li>
                        <li><strong>Sampul:</strong> Menambahkan sampul membuat materi lebih menarik bagi siswa.</li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
</form>
@stop

@section('css')
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
    body { font-family: 'Plus Jakarta Sans', sans-serif; }
    
    /* Override Input Styles to Match Users/Create */
    .form-control.bg-light, .input-group-text.bg-light, .custom-file-label.bg-light { 
        background-color: #F8F9FA !important; 
        transition: all 0.3s ease; 
    }
    .form-control.bg-light:focus, .custom-file-input:focus ~ .custom-file-label { 
        background-color: #fff !important; 
        box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1); /* Indigo Focus */
    }
    
    /* Select2 Custom Styling */
    .select2-container .select2-selection--single { 
        height: 38px !important; 
        border: none !important; 
        background-color: #F8F9FA !important; 
        padding-top: 5px; 
    }
    
    /* Custom File Input Fix */
    .custom-file-label::after { background-color: #E9ECEF; color: #6C757D; }
</style>
@stop

@section('js')
<script>
    $(document).ready(function() {
        // Init Select2
        $('.select2').select2({ theme: 'default', width: '100%' });

        // Tampilkan Nama File saat dipilih
        $('.custom-file-input').on('change', function() {
            let fileName = $(this).val().split('\\').pop();
            $(this).next('.custom-file-label').addClass("selected").html(fileName);
        });
    });

    // Preview Gambar Sampul
    function previewImage(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#preview-cover').attr('src', e.target.result).css('opacity', '1');
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>
@stop