@extends('adminlte::page')

@section('title', 'Bank Materi Pembelajaran')

@section('content_header')
    <div class="row mb-2">
        <div class="col-sm-6">
            <h1 class="m-0 text-dark">Tambah Materi Baru</h1>
        </div>
        <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="{{ route('elearning.materi.index') }}">Perpustakaan</a></li>
                <li class="breadcrumb-item active">Tambah</li>
            </ol>
        </div>
    </div>
@stop

@section('content')
<div class="container-fluid">
    
    @if(session('success'))
        <div class="alert alert-success fade show border-0 shadow-sm" role="alert" style="border-radius: 10px;">
            <i class="fas fa-check-circle mr-2"></i> {{ session('success') }}
        </div>
    @endif

    <div class="card card-outline card-primary" style="border-radius: 15px;">
        <div class="card-header border-bottom-0">
            <h3 class="card-title font-weight-bold text-primary"><i class="fas fa-file-upload mr-2"></i> Form Upload Materi</h3>
        </div>
        <form action="{{ route('elearning.materi.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="card-body">
                
                {{-- Data Pokok --}}
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Judul Materi <span class="text-danger">*</span></label>
                            <input type="text" name="title" class="form-control" placeholder="Contoh: Rangkuman Hukum Newton" required value="{{ old('title') }}">
                            @error('title') <small class="text-danger d-block">{{ $message }}</small> @enderror
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Mata Pelajaran <span class="text-danger">*</span></label>
                            <select name="subject_id" class="form-control select2-custom" required style="width: 100%;">
                                <option value="" disabled selected>Pilih Mapel...</option>
                                @foreach($mapels as $mapel)
                                    <option value="{{ $mapel->id }}" {{ old('subject_id') == $mapel->id ? 'selected' : '' }}>{{ $mapel->nama_mapel }}</option>
                                @endforeach
                            </select>
                            @error('subject_id') <small class="text-danger d-block">{{ $message }}</small> @enderror
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Kelas Target (Opsional)</label>
                            <select name="class_level_id" class="form-control select2-custom" style="width: 100%;">
                                <option value="">Semua Kelas</option>
                                @foreach($kelas as $k)
                                    <option value="{{ $k->id }}" {{ old('class_level_id') == $k->id ? 'selected' : '' }}>{{ $k->nama_kelas }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                {{-- Pilihan Tipe Konten --}}
                <div class="form-group border rounded p-3 bg-light">
                    <label class="d-block mb-2">Tipe Konten <span class="text-danger">*</span></label>
                    <div class="d-flex flex-wrap">
                        <div class="custom-control custom-radio custom-control-inline mr-4">
                            <input type="radio" id="typeYoutube" name="type" class="custom-control-input" value="youtube" required {{ old('type') == 'youtube' || !old('type') ? 'checked' : '' }}>
                            <label class="custom-control-label font-weight-normal" for="typeYoutube"><i class="fab fa-youtube text-danger mr-1"></i> Video YouTube</label>
                        </div>
                        <div class="custom-control custom-radio custom-control-inline mr-4">
                            <input type="radio" id="typePdf" name="type" class="custom-control-input" value="pdf" {{ old('type') == 'pdf' ? 'checked' : '' }}>
                            <label class="custom-control-label font-weight-normal" for="typePdf"><i class="fas fa-file-pdf text-primary mr-1"></i> PDF File</label>
                        </div>
                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio" id="typeDoc" name="type" class="custom-control-input" value="document" {{ old('type') == 'document' ? 'checked' : '' }}>
                            <label class="custom-control-label font-weight-normal" for="typeDoc"><i class="fas fa-file-word text-success mr-1"></i> Word/PPT/Doc</label>
                        </div>
                    </div>
                </div>

                {{-- KONTEN DINAMIS --}}
                <div id="content-input">
                    <!-- Ini akan diisi oleh JS -->
                </div>

                <div class="form-group">
                    <label>Deskripsi / Rangkuman (Opsional)</label>
                    <textarea name="description" class="summernote">{{ old('description') }}</textarea>
                </div>

            </div>
            <div class="card-footer text-right">
                <a href="{{ route('elearning.materi.index') }}" class="btn btn-default mr-2">Batal</a>
                <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Terbitkan Materi</button>
            </div>
        </form>
    </div>
</div>
@stop

@section('js')
<script>
    // Templates input dinamis
    const youtubeTemplate = `
        <div class="form-group">
            <label>Link Video YouTube <span class="text-danger">*</span></label>
            <input type="url" name="external_link" class="form-control" placeholder="https://www.youtube.com/watch?v=..." required>
            @error('external_link') <small class="text-danger d-block">{{ $message }}</small> @enderror
            <small class="text-muted">Masukkan URL lengkap dari YouTube.</small>
        </div>
    `;

    const fileTemplate = (tipe) => `
        <div class="form-group">
            <label>Upload File (${tipe}) <span class="text-danger">*</span></label>
            <div class="custom-file">
                <input type="file" name="content_file" class="custom-file-input" id="customFile" required>
                <label class="custom-file-label" for="customFile">Pilih file...</label>
            </div>
            @error('content_file') <small class="text-danger d-block">{{ $message }}</small> @enderror
            <small class="text-muted">Maksimal 5MB. Hanya format ${tipe} yang diizinkan.</small>
        </div>
    `;

    function updateContentInput() {
        const type = $('input[name="type"]:checked').val();
        const container = $('#content-input');
        container.empty(); // Kosongkan input lama

        if (type === 'youtube') {
            container.html(youtubeTemplate);
        } else if (type === 'pdf') {
            container.html(fileTemplate('PDF'));
            bsCustomFileInput.init(); // Re-initialize custom file input
        } else if (type === 'document') {
            container.html(fileTemplate('Word/PPT/Doc'));
            bsCustomFileInput.init(); // Re-initialize custom file input
        }
    }

    $(document).ready(function() {
        // Inisialisasi Select2
        $('.select2-custom').select2({
            theme: 'bootstrap4',
            placeholder: 'Pilih...',
            allowClear: true
        });

        // Inisialisasi Summernote
        $('.summernote').summernote({
            height: 150,
            toolbar: [
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['para', ['ul', 'ol']],
                ['insert', ['link', 'picture']],
                ['view', ['codeview']]
            ]
        });

        // Event handler untuk perubahan tipe konten
        $('input[name="type"]').on('change', updateContentInput);
        
        // Panggil saat load pertama kali
        updateContentInput();

        // Tampilkan input file jika ada error validasi saat reload
        @if (old('type') && (old('type') === 'pdf' || old('type') === 'document'))
            updateContentInput();
            bsCustomFileInput.init();
        @endif
    });
</script>
@stop