{{-- resources/views/admin/akademik/kurikulum/tltp_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 Tindak Lanjut TP')

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

@php
    $mapelReferensi = \App\Models\Akademik\Mapel::where('tahun_ajaran_id', $kurikulum->tahun_ajaran_id)
                        ->where('level_kelas_id', $kurikulum->level_kelas_id)
                        ->where('mapel_nama_id', $kurikulum->mapel_id)
                        ->first();
                        
    $alokasiMingguan = $mapelReferensi->alokasi_jam ?? 0;
    $estimasiJpSemester = $alokasiMingguan * 18; 

    $totalTerpakai = 0;
    $semuaCp = \App\Models\Akademik\KurikulumCp::where('kurikulum_id', $kurikulum->id)->get();
    
    foreach($semuaCp as $cp) { 
        $semuaAtp = \App\Models\Akademik\KurikulumAtp::with('tltps')->where('kurikulum_cp_id', $cp->id)->get();
        foreach($semuaAtp as $a) {
            $totalTerpakai += $a->tltps->sum('jam_pelajaran'); 
        }
    }
    
    $jpMateriIni = $tltpData->jam_pelajaran ?? 0;
    $sisaKuota = $estimasiJpSemester - ($totalTerpakai - $jpMateriIni);
@endphp

<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">Edit Tindak Lanjut TP</h3>
            <h6 class="op-7 mb-2">Kelola jatah waktu untuk materi ini.</h6>
        </div>
        <div class="ms-md-auto py-2 py-md-0">
            <a href="{{ route('admin.kurikulum.kelola', ['id' => $kurikulum->id, 'tab' => 'tltp']) }}" class="btn btn-secondary btn-round"><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 pt-3">
                    <h5 class="fw-bold"><i class="fas fa-edit me-2"></i> Form Rencana Pembelajaran</h5>
                </div>
                
                <form action="{{ route('admin.kurikulum.tltp.update') }}" method="POST">
                    @csrf 
                    <input type="hidden" name="atp_id" value="{{ $atp->id }}">
                    <input type="hidden" name="alur_index" value="{{ $alurIndex }}">

                    <div class="card-body p-4">
                        <div class="alert alert-info border-info border-start border-3 pb-3 mb-4 bg-light text-dark">
                            <h6 class="fw-bold text-primary border-bottom border-info pb-2 mb-3">
                                <i class="fa fa-bullseye me-2"></i> ATP / Elemen: {{ $nama_elemen ?? 'Nama Elemen' }}
                            </h6>
                            <span class="fw-bold text-dark d-block mb-1">Daftar Alur / Data Elemen:</span>
                            <ul class="ps-4 mb-0" style="list-style-type: square;">
                                @if(isset($alur['tps']))
                                    @foreach($alur['tps'] as $tp_text)
                                        <li class="mb-1">{{ $tp_text }}</li>
                                    @endforeach
                                @else
                                    <li>Data alur tidak ditemukan.</li>
                                @endif
                            </ul>
                        </div>

                        <div class="form-group mb-4 px-0">
                            <label class="form-label fw-bold text-dark fs-6">Tujuan Pembelajaran</label>
                            <textarea name="tujuan_pembelajaran" class="form-control summernote">{{ $tltpData->tujuan_pembelajaran ?? '' }}</textarea>
                            <small class="text-muted">Ketikkan tujuan pembelajaran secara detail.</small>
                        </div>
                        <div class="form-group mb-4 px-0">
                            <label class="form-label fw-bold text-dark fs-6">Materi</label>
                            <textarea name="materi" class="form-control summernote">{{ $tltpData->materi ?? '' }}</textarea>
                            <small class="text-muted">Uraikan rincian materi yang akan disampaikan.</small>
                        </div>
                        <div class="form-group mb-4 px-0">
                            <label class="form-label fw-bold text-dark fs-6">Perkakas / Media Belajar</label>
                            <textarea name="perkakas" class="form-control summernote">{{ $tltpData->perkakas ?? '' }}</textarea>
                            <small class="text-muted">Sebutkan alat, media, atau perkakas yang dibutuhkan.</small>
                        </div>

                        <hr class="mt-5 mb-4 border-secondary opacity-25">

                        <div class="form-group mb-4 px-0">
                            <label class="form-label fw-bold text-dark fs-6 d-block mb-3">Distribusi Jam Pelajaran (JP)</label>
                            
                            @if($alokasiMingguan > 0)
                                <div class="d-flex align-items-center mb-3 p-3 bg-light rounded-3 border border-secondary border-opacity-25">
                                    <div class="me-4 text-center">
                                        <span class="d-block text-muted small fw-bold">Sisa Kuota JP Semester</span>
                                        <span class="badge {{ $sisaKuota >= 0 ? 'bg-success' : 'bg-danger' }} fs-5 mt-1">{{ $sisaKuota }} JP</span>
                                    </div>
                                    <div class="small text-muted border-start ps-4">
                                        Mapel ini memiliki jatah <strong>{{ $alokasiMingguan }} JP/minggu</strong>.<br>
                                        Disarankan agar input JP materi ini tidak melebihi sisa kuota yang tersedia.
                                    </div>
                                </div>
                            @else
                                <div class="alert alert-warning mb-3 py-2 px-3 small border-0">
                                    <i class="fas fa-info-circle me-1"></i> Admin belum mengatur Alokasi JP Mingguan untuk mapel ini di Manajemen Mapel.
                                </div>
                            @endif

                            <div class="input-group" style="width: 250px;">
                                <input type="number" name="jam_pelajaran" 
                                       class="form-control border-primary text-center fw-bold fs-5" 
                                       value="{{ $jpMateriIni }}" 
                                       min="0" 
                                       required>
                                <span class="input-group-text bg-primary text-white border-primary px-3 fw-bold">JP</span>
                            </div>
                            <small class="text-muted d-block mt-2">Berapa Jam Pelajaran (JP) yang dibutuhkan untuk menyelesaikan materi di atas?</small>
                        </div>
                    </div>
                    
                    <div class="card-footer bg-light d-flex justify-content-end p-3 border-top-0">
                        <a href="{{ route('admin.kurikulum.kelola', ['id' => $kurikulum->id, 'tab' => 'tltp']) }}" class="btn btn-secondary btn-round me-2">Batal</a>
                        <button type="submit" class="btn btn-success btn-round px-4 shadow-sm">
                            <i class="fa fa-save me-1"></i> Simpan Perubahan
                        </button>
                    </div>
                </form>
            </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>
    $(document).ready(function() {
        $('.summernote').summernote({
            placeholder: 'Ketikkan data 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');
    });
</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