{{-- resources/views/admin/akademik/kurikulum/atp_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', 'Edit Alur Tujuan Pembelajaran (ATP)')

@push('css')
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<style>
    .view-box { background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 5px; }
    .hidden { display: none !important; }
</style>
@endpush

@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-2">Edit Data Peta Kompetensi (Tabel E)</h3>
      <h6 class="op-7 mb-0">Kelola Kurikulum: {{ $kurikulum->mapelNama->nama_mapel ?? '-' }} (Kelas {{ $kurikulum->levelKelas->level_kelas ?? '-' }})</h6>
    </div>
    <div class="ms-md-auto py-2 py-md-0">
        <a href="{{ route('admin.kurikulum.kelola', ['id' => $kurikulum->id, 'tab' => 'atp']) }}" class="btn btn-secondary btn-round shadow-sm">
            <i class="fas fa-arrow-left me-2"></i> Batal & Kembali
        </a>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
        <div class="card card-round shadow-sm border-0">
            <div class="card-header bg-warning text-dark">
                <h5 class="card-title fw-bold mb-0"><i class="fa fa-edit me-2"></i> Form Edit Alur Tujuan Pembelajaran</h5>
            </div>
            <form action="{{ route('admin.kurikulum.atp.update', $atp->id) }}" method="POST" id="formATP">
                @csrf @method('PUT')
                <input type="hidden" name="kurikulum_id" value="{{ $kurikulum->id }}">
                <div class="card-body p-4">
                    
                    <div class="form-group px-0 mt-2">
                        <label class="form-label fw-bold">1. Capaian Pembelajaran <span class="text-danger">*</span></label>
                        <select id="cp_select" name="kurikulum_cp_id" class="form-select form-control-lg border-warning" required>
                            @foreach($cps as $cp)
                                <option value="{{ $cp->id }}" data-teks="{{ strip_tags($cp->capaian_teks) }}" {{ $atp->kurikulum_cp_id == $cp->id ? 'selected' : '' }}>{{ $cp->elemen }}</option>
                            @endforeach
                        </select>
                        <div id="cp_view" class="view-box mt-2 border-warning border-start border-3 p-3">
                            <strong class="text-dark" id="cp_view_elemen">Elemen Terpilih</strong>
                            <p class="mb-0 mt-1 text-muted" id="cp_view_teks">Pilih Elemen CP.</p>
                        </div>
                    </div>

                    <div class="form-group px-0 mt-4">
                        <div class="d-flex justify-content-between align-items-center mb-2 border-bottom border-warning pb-2">
                            <label class="form-label fw-bold m-0 text-dark">2. Kata Kunci, Tujuan & Eviden</label>
                            <button type="button" class="btn btn-sm btn-success btn-round shadow-sm" onclick="tambahSetBaru()">
                                <i class="fa fa-plus me-1"></i> Tambah Set Data Baru
                            </button>
                        </div>
                        <div id="set-wrapper">
                        </div>
                    </div>

                    <div class="form-group px-0 mt-4">
                        <label class="form-label fw-bold m-0 text-dark mb-3 d-block">3. Alur Tujuan Pembelajaran (ATP) <span class="text-danger">*</span></label>
                        
                        <div id="alur-wrapper" class="p-3 bg-light border border-warning rounded">
                            @php
                                $existingAlur = json_decode($atp->tahapan, true) ?? [];
                                $alurMap = [];
                                foreach($existingAlur as $al) {
                                    $alurMap[$al['cp_id']] = $al['tps'];
                                }
                            @endphp

                            @foreach($cps as $index => $cp)
                                @php $checkedTps = $alurMap[$cp->id] ?? []; @endphp
                                <div class="mb-4">
                                    <h6 class="fw-bold text-dark mb-2 border-bottom border-warning pb-1">Elemen: {{ $cp->elemen }}</h6>
                                    <input type="hidden" name="alur_elemen[{{ $index }}]" value="{{ $cp->id }}">
                                    
                                    @if($cp->tps->count() > 0)
                                        <div class="ms-3 mt-2">
                                            @foreach($cp->tps as $tp)
                                                @php
                                                    $tpTeks = strip_tags($tp->tujuan_teks);
                                                    $isChecked = in_array($tpTeks, $checkedTps) ? 'checked' : '';
                                                @endphp
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input border-warning" type="checkbox" name="alur_tp[{{ $index }}][]" value="{{ $tpTeks }}" id="tp_{{ $cp->id }}_{{ $tp->id }}" {{ $isChecked }}>
                                                    <label class="form-check-label text-dark" for="tp_{{ $cp->id }}_{{ $tp->id }}">
                                                        {{ $tpTeks }}
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    @else
                                        <div class="ms-3 mt-2 text-danger small">Tujuan Pembelajaran belum ada untuk Elemen ini.</div>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </div>

                </div>
                <div class="card-footer bg-light text-end border-0">
                    <button type="submit" class="btn btn-warning btn-round px-4 py-2 fw-bold shadow-sm">
                        <i class="fa fa-save me-2"></i> Simpan Perubahan Secara Keseluruhan
                    </button>
                </div>
            </form>
        </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modalKomp" data-bs-backdrop="static" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header bg-warning text-dark"><h5 class="modal-title">Input 2.a. Kompetensi</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div><div class="modal-body"><input type="text" id="input_modal_komp" class="form-control" placeholder="Cth: Menerapkan / Memahami"></div><div class="modal-footer border-0"><button type="button" class="btn btn-warning btn-round" onclick="saveModalKomp()">Simpan</button></div></div></div></div>
<div class="modal fade" id="modalMat" data-bs-backdrop="static" tabindex="-1"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-header bg-warning text-dark"><h5 class="modal-title">Input 2.b. Materi</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div><div class="modal-body"><textarea id="input_modal_mat"></textarea></div><div class="modal-footer border-0"><button type="button" class="btn btn-warning btn-round" onclick="saveModalMat()">Simpan</button></div></div></div></div>
<div class="modal fade" id="modalTp" data-bs-backdrop="static" tabindex="-1"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-header bg-warning text-dark"><h5 class="modal-title">Input 2.c. Tujuan Pembelajaran</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div><div class="modal-body"><textarea id="input_modal_tp"></textarea></div><div class="modal-footer border-0"><button type="button" class="btn btn-warning btn-round" onclick="saveModalTp()">Simpan</button></div></div></div></div>
<div class="modal fade" id="modalEv" data-bs-backdrop="static" tabindex="-1"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-header bg-warning text-dark"><h5 class="modal-title">Input 2.d. Eviden (Indikator)</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div><div class="modal-body"><textarea id="input_modal_ev"></textarea></div><div class="modal-footer border-0"><button type="button" class="btn btn-warning btn-round" onclick="saveModalEv()">Simpan</button></div></div></div></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>

@php
    $kompetensiDecoded = json_decode($atp->kompetensi, true) ?? (!empty($atp->kompetensi) ? [$atp->kompetensi] : []);
    $materiDecoded = json_decode($atp->materi, true) ?? (!empty($atp->materi) ? [$atp->materi] : []);
    $tpDecoded = json_decode($atp->tujuan_pembelajaran, true) ?? (!empty($atp->tujuan_pembelajaran) ? [$atp->tujuan_pembelajaran] : []);
    $evidenDecoded = json_decode($atp->indikator, true) ?? (!empty($atp->indikator) ? [$atp->indikator] : []);
    
    $kkDataArray = [];
    $maxKk = max(count($kompetensiDecoded), count($materiDecoded), count($tpDecoded), count($evidenDecoded));
    for($i = 0; $i < $maxKk; $i++) {
        $kkDataArray[] = [
            'komp' => $kompetensiDecoded[$i] ?? '',
            'mat'  => $materiDecoded[$i] ?? '',
            'tp'   => $tpDecoded[$i] ?? '',
            'ev'   => $evidenDecoded[$i] ?? ''
        ];
    }
@endphp

<script>
    let existingKk = @json($kkDataArray);
    let activeSetId = null;
    let setCounter = 0;

    $(document).ready(function() {
        $('#input_modal_mat, #input_modal_tp, #input_modal_ev').summernote({
            tabsize: 2, height: 150, toolbar: [['style', ['style']], ['font', ['bold', 'italic', 'clear']], ['para', ['ul', 'ol']]]
        });

        $('#cp_select').on('change', function() {
            let option = $(this).find('option:selected');
            if($(this).val()) {
                $('#cp_view_elemen').text("Elemen: " + option.text());
                $('#cp_view_teks').text(option.data('teks'));
            }
        });
        $('#cp_select').trigger('change');

        if(existingKk.length > 0) {
            existingKk.forEach(kk => { tambahSetBaru(kk.komp, kk.mat, kk.tp, kk.ev); });
        } else { tambahSetBaru(); }
    });

    window.tambahSetBaru = function(valKomp='', valMat='', valTp='', valEv='') {
        let setId = setCounter++;
        let hideKompAdd = valKomp ? 'hidden' : ''; let showKompView = valKomp ? '' : 'hidden';
        let hideMatAdd = valMat ? 'hidden' : '';   let showMatView = valMat ? '' : 'hidden';
        let hideTpAdd = valTp ? 'hidden' : '';     let showTpView = valTp ? '' : 'hidden';
        let hideEvAdd = valEv ? 'hidden' : '';     let showEvView = valEv ? '' : 'hidden';

        let html = `
            <div class="card mb-3 border-secondary" id="set-card-${setId}">
                <div class="card-header bg-light d-flex justify-content-between align-items-center py-2">
                    <span class="fw-bold">Set Data (Baris ${setId + 1})</span>
                    <button type="button" class="btn btn-sm btn-danger btn-round" onclick="$('#set-card-${setId}').remove()"><i class="fa fa-times"></i> Hapus Baris Ini</button>
                </div>
                <div class="card-body p-3">
                    <input type="hidden" name="kompetensi[]" id="hdn_komp_${setId}" value="${valKomp.replace(/"/g, '&quot;')}">
                    <input type="hidden" name="materi[]" id="hdn_mat_${setId}" value="${valMat.replace(/"/g, '&quot;')}">
                    <input type="hidden" name="tujuan_pembelajaran[]" id="hdn_tp_${setId}" value="${valTp.replace(/"/g, '&quot;')}">
                    <input type="hidden" name="indikator[]" id="hdn_ev_${setId}" value="${valEv.replace(/"/g, '&quot;')}">

                    <div class="row">
                        <div class="col-md-3 border-end">
                            <div class="d-flex align-items-center mb-2">
                                <strong class="me-auto text-dark small">2.a. Kompetensi</strong>
                                <button type="button" class="btn btn-icon btn-sm btn-success btn-add-komp ms-1 ${hideKompAdd}" onclick="openModalKomp(${setId})" title="Input"><i class="fa fa-plus"></i></button>
                                <button type="button" class="btn btn-icon btn-sm btn-warning view-komp ms-1 ${showKompView}" onclick="openModalKomp(${setId})" title="Edit"><i class="fa fa-edit"></i></button>
                            </div>
                            <div class="view-komp view-box ${showKompView} p-2 mb-0 text-dark small" style="min-height: 50px;"><span class="val-komp">${valKomp}</span></div>
                        </div>
                        <div class="col-md-3 border-end">
                            <div class="d-flex align-items-center mb-2">
                                <strong class="me-auto text-dark small">2.b. Materi</strong>
                                <button type="button" class="btn btn-icon btn-sm btn-success btn-add-mat ms-1 ${hideMatAdd}" onclick="openModalMat(${setId})" title="Input"><i class="fa fa-plus"></i></button>
                                <button type="button" class="btn btn-icon btn-sm btn-warning view-mat ms-1 ${showMatView}" onclick="openModalMat(${setId})" title="Edit"><i class="fa fa-edit"></i></button>
                            </div>
                            <div class="view-mat view-box ${showMatView} p-2 mb-0 text-dark small" style="min-height: 50px;"><span class="val-mat">${valMat}</span></div>
                        </div>
                        <div class="col-md-3 border-end">
                            <div class="d-flex align-items-center mb-2">
                                <strong class="me-auto text-dark small">2.c. Tujuan</strong>
                                <button type="button" class="btn btn-icon btn-sm btn-success btn-add-tp ms-1 ${hideTpAdd}" onclick="openModalTp(${setId})" title="Input"><i class="fa fa-plus"></i></button>
                                <button type="button" class="btn btn-icon btn-sm btn-warning view-tp ms-1 ${showTpView}" onclick="openModalTp(${setId})" title="Edit"><i class="fa fa-edit"></i></button>
                            </div>
                            <div class="view-tp view-box ${showTpView} p-2 mb-0 text-dark small" style="min-height: 50px;"><span class="val-tp">${valTp}</span></div>
                        </div>
                        <div class="col-md-3">
                            <div class="d-flex align-items-center mb-2">
                                <strong class="me-auto text-dark small">2.d. Eviden</strong>
                                <button type="button" class="btn btn-icon btn-sm btn-success btn-add-ev ms-1 ${hideEvAdd}" onclick="openModalEv(${setId})" title="Input"><i class="fa fa-plus"></i></button>
                                <button type="button" class="btn btn-icon btn-sm btn-warning view-ev ms-1 ${showEvView}" onclick="openModalEv(${setId})" title="Edit"><i class="fa fa-edit"></i></button>
                            </div>
                            <div class="view-ev view-box ${showEvView} p-2 mb-0 text-dark small" style="min-height: 50px;"><span class="val-ev">${valEv}</span></div>
                        </div>
                    </div>
                </div>
            </div>
        `;
        $('#set-wrapper').append(html);
        
        if(valKomp) { $(`#set-card-${setId} .btn-add-mat`).removeClass('hidden'); }
        if(valMat)  { $(`#set-card-${setId} .btn-add-tp`).removeClass('hidden'); }
        if(valTp)   { $(`#set-card-${setId} .btn-add-ev`).removeClass('hidden'); }
    };

    window.openModalKomp = function(setId) { activeSetId = setId; $('#input_modal_komp').val($(`#hdn_komp_${setId}`).val()); $('#modalKomp').modal('show'); };
    window.saveModalKomp = function() {
        let val = $('#input_modal_komp').val();
        $(`#hdn_komp_${activeSetId}`).val(val); $(`#set-card-${activeSetId} .val-komp`).text(val);
        $(`#set-card-${activeSetId} .btn-add-komp`).addClass('hidden'); $(`#set-card-${activeSetId} .view-komp`).removeClass('hidden');
        $(`#set-card-${activeSetId} .btn-add-mat`).removeClass('hidden'); $('#modalKomp').modal('hide');
    };

    window.openModalMat = function(setId) { activeSetId = setId; $('#input_modal_mat').summernote('code', $(`#hdn_mat_${setId}`).val()); $('#modalMat').modal('show'); };
    window.saveModalMat = function() {
        let val = $('#input_modal_mat').summernote('code');
        $(`#hdn_mat_${activeSetId}`).val(val); $(`#set-card-${activeSetId} .val-mat`).html(val);
        $(`#set-card-${activeSetId} .btn-add-mat`).addClass('hidden'); $(`#set-card-${activeSetId} .view-mat`).removeClass('hidden');
        $(`#set-card-${activeSetId} .btn-add-tp`).removeClass('hidden'); $('#modalMat').modal('hide');
    };

    window.openModalTp = function(setId) { activeSetId = setId; $('#input_modal_tp').summernote('code', $(`#hdn_tp_${setId}`).val()); $('#modalTp').modal('show'); };
    window.saveModalTp = function() {
        let val = $('#input_modal_tp').summernote('code');
        $(`#hdn_tp_${activeSetId}`).val(val); $(`#set-card-${activeSetId} .val-tp`).html(val);
        $(`#set-card-${activeSetId} .btn-add-tp`).addClass('hidden'); $(`#set-card-${activeSetId} .view-tp`).removeClass('hidden');
        $(`#set-card-${activeSetId} .btn-add-ev`).removeClass('hidden'); $('#modalTp').modal('hide');
    };

    window.openModalEv = function(setId) { activeSetId = setId; $('#input_modal_ev').summernote('code', $(`#hdn_ev_${setId}`).val()); $('#modalEv').modal('show'); };
    window.saveModalEv = function() {
        let val = $('#input_modal_ev').summernote('code');
        $(`#hdn_ev_${activeSetId}`).val(val); $(`#set-card-${activeSetId} .val-ev`).html(val);
        $(`#set-card-${activeSetId} .btn-add-ev`).addClass('hidden'); $(`#set-card-${activeSetId} .view-ev`).removeClass('hidden');
        $('#modalEv').modal('hide');
    };
</script>

@if($isGuru)
<style>
    #header { background-color: #263351 !important; }
    #header.header-scrolled { background-color: rgba(38, 51, 81, 0.95) !important; }
</style>
@endif
@endpush