{{-- resources/views/admin/akademik/kurikulum/ma_edit.blade.php --}}
@php
    $isGuru = auth()->check() && auth()->user()->type == 3;
    $user = auth()->user();
    $guru = $isGuru ? \App\Models\Kepegawaian\Guru::where('email', $user->email)->first() : null;
@endphp

@extends($isGuru ? 'layouts.app' : 'layouts.admin')
@section('title', 'Susun Modul Ajar')

@section('content')
@if($isGuru)
    @include('public.guru._hero', ['user' => $user, 'guru' => $guru])
@endif

<div class="{{ $isGuru ? 'container py-5' : 'page-inner' }}" {!! $isGuru ? 'data-aos="fade-up"' : '' !!}>
    <div class="d-flex align-items-left align-items-md-center flex-column flex-md-row pt-2 pb-4">
        <div>
            <h3 class="fw-bold mb-3">Penyusunan Modul Ajar (MA)</h3>
            <h6 class="op-7 mb-2">Materi: <strong>{!! strip_tags($tltp->materi ?? 'Topik Belum Diatur') !!}</strong></h6>
        </div>
        <div class="ms-md-auto py-2 py-md-0">
            <a href="{{ route('admin.kurikulum.kelola', ['id' => $kurikulum->id, 'tab' => 'modul']) }}" class="btn btn-secondary btn-round shadow-sm">
                <i class="fas fa-arrow-left me-2"></i> Kembali
            </a>
        </div>
    </div>

    <form action="{{ route('admin.kurikulum.modul_ajar.update') }}" method="POST">
        @csrf
        <input type="hidden" name="kurikulum_id" value="{{ $kurikulum->id }}">
        <input type="hidden" name="kurikulum_atp_id" value="{{ $atp->id }}">
        <input type="hidden" name="alur_index" value="{{ $alur_index }}">

        <div class="row">
            <div class="col-md-12 mb-4">
                <div class="card card-round shadow-sm border-0">
                    <div class="card-header bg-primary text-white">
                        <h5 class="fw-bold m-0"><i class="fas fa-info-circle me-2"></i> I. INFORMASI UMUM</h5>
                    </div>
                    <div class="card-body p-4">
                        <div class="alert alert-info border-0 mb-4 py-3 px-4">
                            <h6 class="fw-bold mb-3 text-primary"><i class="fa fa-id-card me-2"></i> Identitas Modul (Otomatis dari Sistem)</h6>
                            <div class="row g-2 small text-dark">
                                <div class="col-md-3 fw-bold">Penyusun</div><div class="col-md-9">: {{ $kurikulum->guru->name ?? '-' }}</div>
                                <div class="col-md-3 fw-bold">Instansi</div><div class="col-md-9">: {{ \App\Models\Idse::first()->nama_sekolah ?? 'Nama Sekolah Belum Diatur' }}</div>
                                <div class="col-md-3 fw-bold">Tahun Ajaran</div><div class="col-md-9">: {{ $kurikulum->tahunAjaran->tahun_ajaran ?? '-' }}</div>
                                <div class="col-md-3 fw-bold">Mata Pelajaran</div><div class="col-md-9">: {{ $kurikulum->mapelNama->nama_mapel ?? '-' }}</div>
                                <div class="col-md-3 fw-bold">Fase / Kelas</div><div class="col-md-9">: Fase D / Kelas {{ $kurikulum->levelKelas->level_kelas ?? '-' }}</div>
                                <div class="col-md-3 fw-bold">Elemen</div><div class="col-md-9">: {{ $cp_induk->elemen }}</div>
                                <div class="col-md-3 fw-bold">Alokasi Waktu</div><div class="col-md-9">: {{ $tltp->jam_pelajaran ?? 0 }} JP</div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-4">
                                    <label class="form-label fw-bold">Profil Pelajar Pancasila <span class="text-danger">*</span></label>
                                    @php 
                                        $savedPPP = explode(', ', $modulAjar->profil_pancasila ?? ''); 
                                        $pppOptions = ['Beriman & Bertakwa', 'Berkebinekaan Global', 'Gotong Royong', 'Mandiri', 'Bernalar Kritis', 'Kreatif'];
                                    @endphp
                                    <div class="mt-2">
                                        @foreach($pppOptions as $ppp)
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" name="profil_pancasila[]" value="{{ $ppp }}" {{ in_array($ppp, $savedPPP) ? 'checked' : '' }} id="ppp-{{ $loop->index }}">
                                            <label class="form-check-label text-dark" for="ppp-{{ $loop->index }}">{{ $ppp }}</label>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label fw-bold">Target Peserta Didik</label>
                                    <input type="text" name="target_siswa" class="form-control border-primary-subtle" value="{{ $modulAjar->target_siswa ?? 'Peserta didik reguler/tipikal' }}" placeholder="Contoh: Reguler, Cerdas Istimewa, dsb.">
                                </div>
                                <div class="form-group mb-3">
                                    <label class="form-label fw-bold">Jumlah Siswa (Maksimal)</label>
                                    <input type="text" name="jumlah_siswa" class="form-control border-primary-subtle" value="{{ $modulAjar->jumlah_siswa ?? '34 Siswa' }}">
                                </div>
                                
                                <div class="form-group mb-3">
                                    <label class="form-label fw-bold">Model Pembelajaran</label>
                                    @php
                                        $savedModel = $modulAjar->model_pembelajaran ?? '';
                                        $isLainnya = !in_array($savedModel, ['', 'Tatap Muka', 'PJJ (Daring)', 'Blended Learning']);
                                    @endphp
                                    
                                    <select id="select_model" class="form-select border-primary-subtle mb-2">
                                        <option value="Tatap Muka" {{ $savedModel == 'Tatap Muka' ? 'selected' : '' }}>Tatap Muka</option>
                                        <option value="PJJ (Daring)" {{ $savedModel == 'PJJ (Daring)' ? 'selected' : '' }}>PJJ (Daring)</option>
                                        <option value="Blended Learning" {{ $savedModel == 'Blended Learning' ? 'selected' : '' }}>Blended Learning</option>
                                        <option value="Lainnya" {{ $isLainnya ? 'selected' : '' }}>Lainnya...</option>
                                    </select>
                                    
                                    <input type="text" id="input_model_lainnya" name="model_pembelajaran" class="form-control border-warning" placeholder="Ketik model pembelajaran spesifik di sini..." value="{{ $savedModel }}" style="{{ $isLainnya ? 'display:block;' : 'display:none;' }}">
                                </div>
                            </div>
                        </div>

                        <div class="form-group mb-0 px-0">
                            <label class="form-label fw-bold">Sarana dan Prasarana (Sarpras)</label>
                            <textarea name="sarana_prasarana" class="form-control summernote" rows="3" placeholder="Sebutkan alat, bahan, dan media yang digunakan...">{{ $modulAjar->sarana_prasarana ?? '' }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-12 mb-4">
                <div class="card card-round shadow-sm border-0">
                    <div class="card-header bg-dark text-white">
                        <h5 class="fw-bold m-0"><i class="fas fa-brain me-2"></i> II. KOMPONEN INTI</h5>
                    </div>
                    <div class="card-body p-4">
                        <div class="mb-4 p-3 bg-light rounded border-start border-4 border-warning">
                            <h6 class="fw-bold text-dark"><i class="fa fa-bullseye me-2"></i> Tujuan Kegiatan Pembelajaran (Otomatis)</h6>
                            <div class="small text-muted">{!! $tltp->tujuan_pembelajaran ?? 'Data tujuan belum tersedia.' !!}</div>
                        </div>

                        <div class="form-group px-0 mb-4">
                            <label class="form-label fw-bold">Pemahaman Bermakna</label>
                            <small class="text-muted d-block mb-2">Manfaat apa yang akan diperoleh siswa setelah mengikuti pembelajaran ini?</small>
                            <textarea name="pemahaman_bermakna" class="form-control summernote" rows="3">{{ $modulAjar->pemahaman_bermakna ?? '' }}</textarea>
                        </div>
                        
                        <div class="form-group px-0 mb-4">
                            <label class="form-label fw-bold">Pertanyaan Pemantik</label>
                            <small class="text-muted d-block mb-2">Pertanyaan pemantik untuk memancing rasa ingin tahu siswa di awal pelajaran.</small>
                            <textarea name="pertanyaan_pemantik" class="form-control summernote" rows="3">{{ $modulAjar->pertanyaan_pemantik ?? '' }}</textarea>
                        </div>

                        <hr class="my-4">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="fw-bold text-primary m-0"><i class="fa fa-walking me-2"></i> Skenario Kegiatan Pembelajaran</h6>
                            <button type="button" id="btnTambahPertemuan" class="btn btn-sm btn-primary btn-round shadow-sm">
                                <i class="fa fa-plus me-1"></i> Tambah Pertemuan
                            </button>
                        </div>
                        
                        <div id="containerPertemuan">
                            @php
                                function decodeSkenario($data) {
                                    if (empty($data)) return [''];
                                    $decoded = json_decode($data, true);
                                    return is_array($decoded) ? $decoded : [$data];
                                }

                                $arrPendahuluan = decodeSkenario($modulAjar->kegiatan_pendahuluan ?? '');
                                $arrInti = decodeSkenario($modulAjar->kegiatan_inti ?? '');
                                $arrPenutup = decodeSkenario($modulAjar->kegiatan_penutup ?? '');
                                
                                $jmlPertemuan = max(count($arrPendahuluan), count($arrInti), count($arrPenutup));
                                if ($jmlPertemuan < 1) $jmlPertemuan = 1;
                            @endphp

                            @for($i = 0; $i < $jmlPertemuan; $i++)
                            <div class="card border border-primary-subtle shadow-none mb-4 pertemuan-item">
                                <div class="card-header bg-light d-flex justify-content-between align-items-center py-2">
                                    <h6 class="fw-bold m-0 text-dark judul-pertemuan">Pertemuan ke-{{ $i + 1 }}</h6>
                                    @if($i > 0)
                                    <button type="button" class="btn btn-sm btn-danger btn-round btn-hapus-pertemuan" title="Hapus Pertemuan"><i class="fa fa-trash"></i></button>
                                    @endif
                                </div>
                                <div class="card-body p-3">
                                    <div class="form-group px-0 mb-4">
                                        <label class="form-label fw-bold text-success">A. Kegiatan Pendahuluan (10-15 Menit)</label>
                                        <textarea name="kegiatan_pendahuluan[]" class="form-control summernote">{{ $arrPendahuluan[$i] ?? '' }}</textarea>
                                    </div>
                                    <div class="form-group px-0 mb-4">
                                        <label class="form-label fw-bold text-primary">B. Kegiatan Inti</label>
                                        <textarea name="kegiatan_inti[]" class="form-control summernote">{{ $arrInti[$i] ?? '' }}</textarea>
                                    </div>
                                    <div class="form-group px-0 mb-0">
                                        <label class="form-label fw-bold text-danger">C. Kegiatan Penutup</label>
                                        <textarea name="kegiatan_penutup[]" class="form-control summernote">{{ $arrPenutup[$i] ?? '' }}</textarea>
                                    </div>
                                </div>
                            </div>
                            @endfor
                        </div>

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

            <div class="col-md-12 mb-4">
                <div class="card card-round shadow-sm border-0">
                    <div class="card-header bg-secondary text-white">
                        <h5 class="fw-bold m-0"><i class="fas fa-paperclip me-2"></i> III. REFLEKSI & LAMPIRAN</h5>
                    </div>
                    <div class="card-body p-4">
                        
                        <div class="form-group px-0 mb-4">
                            <label class="form-label fw-bold">Refleksi Guru & Siswa</label>
                            <textarea name="refleksi_guru" class="form-control summernote" rows="3">{{ $modulAjar->refleksi_guru ?? '' }}</textarea>
                        </div>
                        
                        <div class="form-group px-0 mb-4">
                            <label class="form-label fw-bold">Pengayaan & Remedial</label>
                            <textarea name="pengayaan_remedial" class="form-control summernote" rows="3">{{ $modulAjar->pengayaan_remedial ?? '' }}</textarea>
                        </div>

                        <hr class="my-4">

                        <div class="form-group px-0 mb-4">
                            <label class="form-label fw-bold">Bahan Bacaan Guru & Peserta Didik</label>
                            <textarea name="bahan_bacaan" class="form-control summernote">{{ $modulAjar->bahan_bacaan ?? '' }}</textarea>
                        </div>
                        <div class="form-group px-0 mb-4">
                            <label class="form-label fw-bold">Glosarium (Daftar Istilah)</label>
                            <textarea name="glosarium" class="form-control summernote">{{ $modulAjar->glosarium ?? '' }}</textarea>
                        </div>
                        <div class="form-group px-0 mb-0">
                            <label class="form-label fw-bold">Daftar Pustaka</label>
                            <textarea name="daftar_pustaka" class="form-control summernote">{{ $modulAjar->daftar_pustaka ?? '' }}</textarea>
                        </div>
                    </div>
                    
                    <div class="card-footer bg-light p-4 text-end rounded-bottom">
                        <button type="submit" class="btn btn-success btn-lg btn-round px-5 shadow">
                            <i class="fa fa-save me-2"></i> SIMPAN MODUL AJAR
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>

<script>
    $(document).ready(function() {
        const selectModel = $('#select_model');
        const inputLainnya = $('#input_model_lainnya');

        selectModel.on('change', function() {
            if ($(this).val() === 'Lainnya') {
                inputLainnya.show();
                inputLainnya.val(''); 
                inputLainnya.focus();
            } else {
                inputLainnya.hide();
                inputLainnya.val($(this).val()); 
            }
        });
        
        if(selectModel.val() !== 'Lainnya' && inputLainnya.val() == '') {
            inputLainnya.val(selectModel.val());
        }

        function initSummernote(selector) {
            $(selector).summernote({
                placeholder: 'Ketik isi di sini...',
                fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New'],
                tabsize: 2,
                height: 150,
                dialogsInBody: true, 
                dialogsFade: true,   
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'italic', 'underline', 'clear']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['insert', ['link', 'picture', 'table']],
                    ['view', ['fullscreen', 'codeview', 'help']]
                ]
            });
            $('.note-editor .dropdown-toggle').attr('data-bs-toggle', 'dropdown');
            $('.note-btn[data-toggle="tooltip"]').attr('data-bs-toggle', 'tooltip').removeAttr('data-toggle');
        }

        initSummernote('.summernote');

        let pertemuanCount = {{ $jmlPertemuan }};
        
        $('#btnTambahPertemuan').click(function() {
            pertemuanCount++;
            let htmlForm = `
            <div class="card border border-primary-subtle shadow-none mb-4 pertemuan-item" style="display:none;">
                <div class="card-header bg-light d-flex justify-content-between align-items-center py-2">
                    <h6 class="fw-bold m-0 text-dark judul-pertemuan">Pertemuan ke-${pertemuanCount}</h6>
                    <button type="button" class="btn btn-sm btn-danger btn-round btn-hapus-pertemuan" title="Hapus Pertemuan"><i class="fa fa-trash"></i></button>
                </div>
                <div class="card-body p-3">
                    <div class="form-group px-0 mb-4">
                        <label class="form-label fw-bold text-success">A. Kegiatan Pendahuluan</label>
                        <textarea name="kegiatan_pendahuluan[]" class="form-control summernote-new"></textarea>
                    </div>
                    <div class="form-group px-0 mb-4">
                        <label class="form-label fw-bold text-primary">B. Kegiatan Inti</label>
                        <textarea name="kegiatan_inti[]" class="form-control summernote-new"></textarea>
                    </div>
                    <div class="form-group px-0 mb-0">
                        <label class="form-label fw-bold text-danger">C. Kegiatan Penutup</label>
                        <textarea name="kegiatan_penutup[]" class="form-control summernote-new"></textarea>
                    </div>
                </div>
            </div>`;
            
            $('#containerPertemuan').append(htmlForm);
            let newItem = $('#containerPertemuan .pertemuan-item').last();
            newItem.fadeIn();
            
            initSummernote(newItem.find('.summernote-new'));
            newItem.find('.summernote-new').removeClass('summernote-new').addClass('summernote');
        });

        $(document).on('click', '.btn-hapus-pertemuan', function() {
            $(this).closest('.pertemuan-item').fadeOut(function() {
                $(this).find('.summernote').summernote('destroy');
                $(this).remove();
                
                $('#containerPertemuan .pertemuan-item').each(function(index) {
                    $(this).find('.judul-pertemuan').text('Pertemuan ke-' + (index + 1));
                });
                pertemuanCount = $('#containerPertemuan .pertemuan-item').length;
            });
        });

    });
</script>

<style>
    .note-modal { z-index: 1055 !important; }
    .modal-backdrop.show { z-index: 1050 !important; }
    .note-editor .dropdown-menu { z-index: 1056 !important; }
</style>
@if($isGuru)
<style>
    #header { background-color: #263351 !important; }
    #header.header-scrolled { background-color: rgba(38, 51, 81, 0.95) !important; }
</style>
@endif
@endpush