{{-- resources/views/admin/akademik/kurikulum/atp_create.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', 'Tambah 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">Tambah 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> 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-primary text-white">
                <h5 class="card-title fw-bold mb-0">Form Input E. Alur Tujuan Pembelajaran</h5>
            </div>
            <form action="{{ route('admin.kurikulum.atp.store') }}" method="POST" id="formATP">
                @csrf
                <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-primary" required>
                            <option value="">-- Pilih Elemen CP --</option>
                            @foreach($cps as $cp)
                                <option value="{{ $cp->id }}" data-teks="{{ strip_tags($cp->capaian_teks) }}">{{ $cp->elemen }}</option>
                            @endforeach
                        </select>
                        <div id="cp_view" class="view-box hidden mt-2 border-primary border-start border-3 p-3">
                            <strong class="text-primary" id="cp_view_elemen"></strong>
                            <p class="mb-0 mt-1 text-muted" id="cp_view_teks"></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-primary pb-2">
                            <label class="form-label fw-bold m-0 text-primary">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-primary 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-primary rounded">
                            @foreach($cps as $index => $cp)
                                <div class="mb-4">
                                    <h6 class="fw-bold text-primary mb-2 border-bottom border-primary 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)
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input border-primary" type="checkbox" name="alur_tp[{{ $index }}][]" value="{{ strip_tags($tp->tujuan_teks) }}" id="tp_{{ $cp->id }}_{{ $tp->id }}">
                                                    <label class="form-check-label text-dark" for="tp_{{ $cp->id }}_{{ $tp->id }}">
                                                        {{ strip_tags($tp->tujuan_teks) }}
                                                    </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">
                    <button type="submit" class="btn btn-primary btn-round px-4 py-2 fw-bold shadow-sm">
                        <i class="fa fa-save me-2"></i> Simpan Peta Kompetensi 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-primary text-white"><h5 class="modal-title">Input 2.a. Kompetensi</h5><button type="button" class="btn-close btn-close-white" 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-primary 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-primary text-white"><h5 class="modal-title">Input 2.b. Materi</h5><button type="button" class="btn-close btn-close-white" 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-primary 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-primary text-white"><h5 class="modal-title">Input 2.c. Tujuan Pembelajaran</h5><button type="button" class="btn-close btn-close-white" 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-primary 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-primary text-white"><h5 class="modal-title">Input 2.d. Eviden (Indikator)</h5><button type="button" class="btn-close btn-close-white" 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-primary 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>

<script>
    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_view').removeClass('hidden');
            } else {
                $('#cp_view').addClass('hidden');
            }
        });

        tambahSetBaru(); 
    });

    window.tambahSetBaru = function() {
        let setId = setCounter++;
        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}">
                    <input type="hidden" name="materi[]" id="hdn_mat_${setId}">
                    <input type="hidden" name="tujuan_pembelajaran[]" id="hdn_tp_${setId}">
                    <input type="hidden" name="indikator[]" id="hdn_ev_${setId}">

                    <div class="row">
                        <div class="col-md-3 border-end">
                            <div class="d-flex align-items-center mb-2">
                                <strong class="me-auto text-primary small">2.a. Kompetensi</strong>
                                <button type="button" class="btn btn-icon btn-sm btn-success btn-add-komp ms-1" 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 hidden ms-1" onclick="openModalKomp(${setId})" title="Edit"><i class="fa fa-edit"></i></button>
                            </div>
                            <div class="view-komp view-box hidden p-2 mb-0 text-dark small" style="min-height: 50px;"><span class="val-komp"></span></div>
                        </div>

                        <div class="col-md-3 border-end">
                            <div class="d-flex align-items-center mb-2">
                                <strong class="me-auto text-primary small">2.b. Materi</strong>
                                <button type="button" class="btn btn-icon btn-sm btn-success btn-add-mat hidden ms-1" 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 hidden ms-1" onclick="openModalMat(${setId})" title="Edit"><i class="fa fa-edit"></i></button>
                            </div>
                            <div class="view-mat view-box hidden p-2 mb-0 text-dark small" style="min-height: 50px;"><span class="val-mat"></span></div>
                        </div>

                        <div class="col-md-3 border-end">
                            <div class="d-flex align-items-center mb-2">
                                <strong class="me-auto text-primary small">2.c. Tujuan</strong>
                                <button type="button" class="btn btn-icon btn-sm btn-success btn-add-tp hidden ms-1" 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 hidden ms-1" onclick="openModalTp(${setId})" title="Edit"><i class="fa fa-edit"></i></button>
                            </div>
                            <div class="view-tp view-box hidden p-2 mb-0 text-dark small" style="min-height: 50px;"><span class="val-tp"></span></div>
                        </div>

                        <div class="col-md-3">
                            <div class="d-flex align-items-center mb-2">
                                <strong class="me-auto text-primary small">2.d. Eviden</strong>
                                <button type="button" class="btn btn-icon btn-sm btn-success btn-add-ev hidden ms-1" 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 hidden ms-1" onclick="openModalEv(${setId})" title="Edit"><i class="fa fa-edit"></i></button>
                            </div>
                            <div class="view-ev view-box hidden p-2 mb-0 text-dark small" style="min-height: 50px;"><span class="val-ev"></span></div>
                        </div>
                    </div>
                </div>
            </div>
        `;
        $('#set-wrapper').append(html);
    };

    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