@extends('layouts.app')

@section('content')

{{-- STYLE TAMBAHAN --}}
<style>
    /* 1. Global Dark Mode & Modern Overrides */
    .modern-card {
        border-radius: 20px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    [data-theme="dark"] .modern-card {
        background-color: var(--bg-card, #1e293b);
        border: 1px solid var(--border-color, #334155);
    }

    [data-theme="dark"] .modal-content, [data-theme="dark"] .card {
        background-color: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main); border-radius: 24px;
    }
    [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--border-color); }
    [data-theme="dark"] .modal-header { border-top-left-radius: 24px; border-top-right-radius: 24px; }
    
    [data-theme="dark"] .form-control, [data-theme="dark"] .form-select {
        background-color: var(--hover-bg); border-color: var(--border-color); color: var(--text-main); border-radius: 12px; line-height: 1.4;
    }
    [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus {
        border-color: var(--primary-color); box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25);
    }
    [data-theme="dark"] .form-control::placeholder { color: var(--text-muted); opacity: 0.7; }
    [data-theme="dark"] .text-muted { color: #cbd5e1 !important; }
    [data-theme="dark"] h2, [data-theme="dark"] h5, [data-theme="dark"] h6, [data-theme="dark"] label { color: var(--text-main); }
    [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
    
    [data-theme="dark"] .table { color: var(--text-main); border-color: var(--border-color); }
    [data-theme="dark"] .table-light th, [data-theme="dark"] .table-secondary th { background-color: rgba(255,255,255,0.03) !important; color: var(--text-main); border-color: var(--border-color) !important; }
    [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,0.02); color: var(--text-main); }
    [data-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, 0.05); color: var(--text-main); }
    
    .btn-pill { border-radius: 50rem !important; }
    .form-control, .form-select { border-radius: 12px; }

    /* --- 2. Tampilan Kertas (Paper View) untuk Modal Lihat --- */
    .paper-view {
        background-color: #ffffff;
        padding: 40px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        color: #333;
        font-family: 'Times New Roman', Times, serif;
        line-height: 1.6;
        font-size: 12pt;
        border-radius: 8px;
    }
    [data-theme="dark"] .paper-view {
        background-color: var(--bg-card);
        color: var(--text-main);
        border: 1px solid var(--border-color);
        box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    }
    
    .paper-header {
        border-bottom: 3px double #333;
        padding-bottom: 15px;
        margin-bottom: 25px;
        text-align: center;
    }
    [data-theme="dark"] .paper-header { border-bottom-color: var(--border-color); }
    .paper-header h3 { margin: 0; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }
    .paper-header h5 { margin: 5px 0 0; font-weight: normal; }

    .section-title {
        background-color: #f8f9fa;
        color: #000;
        padding: 8px 12px;
        font-weight: bold;
        text-transform: uppercase;
        margin-top: 25px;
        margin-bottom: 15px;
        border-left: 5px solid var(--primary-color);
        border-bottom: 1px solid #ddd;
    }
    [data-theme="dark"] .section-title {
        background-color: var(--hover-bg);
        color: var(--text-main);
        border-bottom-color: var(--border-color);
    }

    /* --- 3. Styling Accordion Modern --- */
    .accordion-lkpd .accordion-item {
        border: 1px solid var(--border-color, #dee2e6);
        border-radius: 16px !important;
        margin-bottom: 20px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        overflow: hidden;
        background-color: transparent;
    }
    .accordion-lkpd .accordion-button { font-size: 1.05rem; padding: 1.25rem 1.5rem; }
    .accordion-lkpd .accordion-button:not(.collapsed) {
        background-color: rgba(59, 130, 246, 0.05);
        color: var(--primary-color, #3b82f6);
        box-shadow: none;
        border-bottom: 1px solid var(--border-color, #334155);
    }
    .accordion-lkpd .accordion-body { padding: 1.5rem; }
    
    [data-theme="dark"] .accordion-lkpd .accordion-item { background-color: var(--bg-card); border-color: var(--border-color); }
    [data-theme="dark"] .accordion-lkpd .accordion-button { background-color: var(--bg-card); color: var(--text-main); }
    [data-theme="dark"] .accordion-lkpd .accordion-button:not(.collapsed) { background-color: var(--hover-bg); color: #6ea8fe; border-bottom: 1px solid var(--border-color); }
    [data-theme="dark"] .accordion-lkpd .accordion-button::after { filter: invert(1); }
    [data-theme="dark"] .accordion-lkpd .accordion-body { background-color: var(--bg-card); }
</style>

<div class="container py-4">
    {{-- HEADER --}}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold"><i class="bi bi-file-earmark-text me-2 text-primary"></i>Lembar Kerja (LKPD)</h2>
            <p class="text-muted mb-0">Bank tugas siswa, panduan praktikum, dan lembar diskusi.</p>
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-outline-secondary btn-pill px-4 shadow-sm" data-bs-toggle="modal" data-bs-target="#modalCetakLKPD">
                <i class="bi bi-printer me-1"></i> Cetak LKPD
            </button>
            <button class="btn btn-primary btn-pill px-4 fw-bold shadow-sm" data-bs-toggle="modal" data-bs-target="#modalCreateLKPD">
                <i class="bi bi-plus-circle me-1"></i> Buat LKPD Baru
            </button>
        </div>
    </div>

    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show rounded-4 bg-success bg-opacity-25 border-0 border-start border-success border-4 text-success shadow-sm">
        <i class="bi bi-check-circle-fill me-2"></i> {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    {{-- GRUPING DATA BERDASARKAN MATA PELAJARAN --}}
    @php
        $groupedLkpds = $lkpds->groupBy(function($item) {
            return $item->subject->name ?? 'Tanpa Mata Pelajaran';
        })->map(function($group) {
            return $group->sortByDesc('created_at')->values();
        });
    @endphp

    <div class="accordion accordion-lkpd" id="accordionLKPDMapel">
        @forelse($groupedLkpds as $subjectName => $subjectLkpds)
            <div class="accordion-item">
                <h2 class="accordion-header" id="heading-{{ $loop->index }}">
                    <button class="accordion-button fw-bold collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ $loop->index }}" aria-expanded="false" aria-controls="collapse-{{ $loop->index }}">
                        <div class="d-flex align-items-center w-100">
                            <div class="bg-primary bg-opacity-25 text-primary rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                <i class="bi bi-journal-richtext"></i> 
                            </div>
                            <span class="fs-5">{{ $subjectName }}</span>
                            <span class="badge bg-primary ms-auto me-3 rounded-pill px-3 py-2">{{ $subjectLkpds->count() }} LKPD</span>
                        </div>
                    </button>
                </h2>
                <div id="collapse-{{ $loop->index }}" class="accordion-collapse collapse" aria-labelledby="heading-{{ $loop->index }}">
                    <div class="accordion-body p-4" style="background-color: rgba(0,0,0,0.02);">
                        <div class="row">
                            @foreach($subjectLkpds as $item)
                            <div class="col-md-6 mb-4">
                                <div class="card modern-card h-100 shadow-sm border-secondary">
                                    <div class="card-header d-flex justify-content-between align-items-center bg-transparent border-bottom-0 pt-4 pb-0">
                                        <span class="badge bg-primary bg-opacity-25 text-primary border border-primary-subtle rounded-pill px-3 py-2">{{ $item->subject->name }}</span>
                                        <small class="text-muted fw-bold"><i class="bi bi-calendar3 me-1"></i> {{ $item->created_at->format('d M Y') }}</small>
                                    </div>
                                    <div class="card-body px-4">
                                        <h5 class="card-title fw-bold mb-3">{{ $item->title }}</h5>
                                        <div class="mb-3 d-flex flex-wrap gap-2">
                                            <span class="badge bg-success bg-opacity-25 text-success border border-success-subtle rounded-pill px-3 py-2"><i class="bi bi-tag me-1"></i> {{ $item->type }}</span>
                                            <span class="badge bg-secondary bg-opacity-25 text-secondary border border-secondary-subtle rounded-pill px-3 py-2"><i class="bi bi-people me-1"></i> {{ ucfirst($item->mode) }}</span>
                                        </div>
                                        
                                        <div class="text-muted small p-3 rounded-4 border border-secondary" style="border-left: 4px solid #198754 !important; background-color: rgba(255,255,255,0.02);">
                                            <strong class="text-success d-block mb-1">Langkah Kerja (Preview):</strong>
                                            <span style="line-height: 1.6;">{{ Str::limit($item->activity_steps, 120) }}</span>
                                        </div>
                                    </div>
                                    <div class="card-footer bg-transparent border-top-0 pb-4 pt-0 px-4">
                                        <div class="d-flex justify-content-end gap-2">
                                            <button class="btn btn-sm btn-outline-info btn-pill px-3" data-bs-toggle="modal" data-bs-target="#detailModalLKPD{{ $item->id }}" title="Lihat Detail">
                                                <i class="bi bi-eye me-1"></i> Detail
                                            </button>
                                            <button class="btn btn-sm btn-outline-warning btn-pill px-3" data-bs-toggle="modal" data-bs-target="#editModalLKPD{{ $item->id }}" title="Edit">
                                                <i class="bi bi-pencil me-1"></i> Edit
                                            </button>
                                            <form action="{{ route('lkpd.destroy', $item->id) }}" method="POST" onsubmit="return confirm('Hapus LKPD ini?')">
                                                @csrf @method('DELETE')
                                                <button class="btn btn-sm btn-outline-danger btn-pill px-3" title="Hapus"><i class="bi bi-trash me-1"></i> Hapus</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="card modern-card border-0 py-5 text-center">
                <div class="card-body">
                    <div class="mb-3 text-muted opacity-50"><i class="bi bi-journal-text" style="font-size: 4rem;"></i></div>
                    <h5 class="fw-bold">Belum Ada LKPD</h5>
                    <p class="text-muted">Mulai buat Lembar Kerja Peserta Didik (LKPD) Anda sekarang.</p>
                </div>
            </div>
        @endforelse
    </div>
</div>

{{-- MODAL CETAK MASSAL --}}
<div class="modal fade" id="modalCetakLKPD" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content rounded-4 border-secondary shadow-lg">
            <div class="modal-header bg-secondary border-0 text-white rounded-top-4 py-3">
                <h5 class="modal-title fw-bold"><i class="bi bi-printer me-2"></i> Cetak Lembar Kerja</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('lkpd.print_bulk') }}" method="POST" target="_blank">
                @csrf
                <div class="modal-body p-4">
                    <div class="table-responsive border border-secondary rounded-4 overflow-hidden" style="max-height: 400px; overflow-y: auto;">
                        <table class="table table-hover mb-0">
                            <thead class="table-secondary sticky-top">
                                <tr>
                                    <th width="50" class="text-center align-middle"><input type="checkbox" id="checkAllLKPD" class="form-check-input mt-1" style="cursor:pointer; width:1.2rem; height:1.2rem;"></th>
                                    <th class="align-middle">Judul LKPD</th>
                                    <th class="align-middle">Mapel</th>
                                    <th class="align-middle">Jenis</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($lkpds as $m)
                                <tr>
                                    <td class="text-center align-middle border-secondary"><input type="checkbox" name="lkpd_ids[]" value="{{ $m->id }}" class="check-item-lkpd form-check-input mt-1" style="cursor:pointer; width:1.2rem; height:1.2rem;"></td>
                                    <td class="align-middle border-secondary fw-bold">{{ $m->title }}</td>
                                    <td class="align-middle border-secondary">{{ $m->subject->name }}</td>
                                    <td class="align-middle border-secondary">{{ $m->type }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer border-0 py-3" style="background-color: rgba(255,255,255,0.02);">
                    <button type="button" class="btn btn-outline-secondary btn-pill px-4" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary btn-pill px-4 fw-bold shadow-sm"><i class="bi bi-printer me-1"></i> Cetak Terpilih</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- MODAL CREATE BARU (DENGAN AI GENERATOR) --}}
<div class="modal fade" id="modalCreateLKPD" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content rounded-4 border-secondary shadow-lg">
            <div class="modal-header bg-primary border-0 text-white rounded-top-4 py-3">
                <h5 class="modal-title fw-bold"><i class="bi bi-robot me-2"></i> Buat LKPD Baru</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            
            <form action="{{ route('lkpd.store') }}" method="POST" id="formCreateLKPD">
                @csrf
                <div class="modal-body p-4">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold small text-muted text-uppercase">Mata Pelajaran <span class="text-danger">*</span></label>
                            <select name="subject_id" id="ai_lkpd_subject" class="form-select rounded-pill py-2" required>
                                <option value="" selected disabled>-- Pilih Mapel --</option>
                                @foreach($subjects as $s) 
                                    <option value="{{ $s->id }}" data-name="{{ $s->name }}">{{ $s->name }}</option> 
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold small text-muted text-uppercase">Judul LKPD <span class="text-danger">*</span></label>
                            <input type="text" name="title" id="ai_lkpd_title" class="form-control rounded-pill py-2" placeholder="Cth: Praktikum Hukum Ohm" required>
                        </div>
                    </div>

                    <div class="row p-4 rounded-4 border border-secondary mb-4 mx-0" style="background-color: rgba(255,255,255,0.02);">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold small text-muted text-uppercase">Jenis Kegiatan <span class="text-danger">*</span></label>
                            <select name="type" id="ai_lkpd_type" class="form-select" required>
                                <option value="" selected disabled>-- Pilih Jenis Kegiatan --</option>                                
                                <optgroup label="Praktik & Eksperimen">
                                    <option value="Eksperimen / Praktikum">Eksperimen / Praktikum</option>
                                    <option value="Demonstrasi">Demonstrasi Guru</option>
                                    <option value="Simulasi / Role Play">Simulasi / Role Play</option>
                                </optgroup>
                                <optgroup label="Pemecahan Masalah">
                                    <option value="Problem Based Learning (PBL)">Problem Based Learning (PBL)</option>
                                    <option value="Project Based Learning (PjBL)">Project Based Learning (PjBL)</option>
                                    <option value="Studi Kasus">Studi Kasus / Troubleshooting</option>
                                </optgroup>
                                <optgroup label="Literasi & Diskusi">
                                    <option value="Diskusi Kelompok / FGD">Diskusi Kelompok / FGD</option>
                                    <option value="Observasi Lapangan">Observasi Lapangan</option>
                                    <option value="Studi Literatur">Studi Literatur / Resensi</option>
                                </optgroup>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold small text-muted text-uppercase">Mode Pengerjaan <span class="text-danger">*</span></label>
                            <select name="mode" id="ai_lkpd_mode" class="form-select" required>
                                <option value="" selected disabled>-- Pilih Mode --</option>
                                <option value="kelompok">Kelompok</option>
                                <option value="individu">Individu</option>
                            </select>
                        </div>
                    </div>

                    {{-- AI GENERATOR SECTION --}}
                    <div class="p-4 mb-4 rounded-4 border border-primary border-opacity-50" style="background: linear-gradient(145deg, rgba(59,130,246,0.1) 0%, rgba(59,130,246,0.02) 100%);">
                        <h6 class="text-primary fw-bold border-bottom border-primary border-opacity-25 pb-2 mb-3"><i class="bi bi-cpu me-1"></i> Generator AI (Bantu Buat Langkah Kerja)</h6>
                        <div class="row align-items-center">
                            <div class="col-md-8 mb-3">
                                <input type="text" id="ai_lkpd_topic" class="form-control rounded-pill py-2" placeholder="Topik Utama (Cth: Instalasi Listrik)">
                            </div>
                            <div class="col-md-4 mb-3">
                                <button type="button" id="btnGenerateLKPDAI" class="btn btn-primary btn-pill w-100 fw-bold shadow-sm py-2">
                                    <i class="bi bi-magic me-1"></i> Generate Konten
                                </button>
                            </div>
                            <div class="col-12 mt-2">
                                <textarea id="ai_lkpd_material" class="form-control rounded-4" rows="3" placeholder="Ketik detail langkah atau spesifikasi yang diinginkan (Cth: Merakit rangkaian seri paralel, fokus pada prosedur keselamatan...)"></textarea>
                            </div>
                        </div>
                        <div id="loadingIndicatorLKPD" class="text-center mt-4" style="display:none;">
                            <div class="spinner-border text-primary" role="status"></div>
                            <div class="text-primary mt-2 fw-bold">AI sedang menyusun langkah kerja. Harap tunggu...</div>
                        </div>
                    </div>
                    
                    {{-- HASIL GENERATE --}}
                    <div class="mb-4">
                        <label class="form-label fw-bold small text-muted text-uppercase">Tujuan Pembelajaran</label>
                        <textarea name="objectives" id="lkpd_tujuan" class="form-control rounded-4" rows="4" placeholder="Hasil generate..."></textarea>
                    </div>

                    <div class="row g-4 mb-4">
                        <div class="col-md-6">
                            <label class="form-label fw-bold small text-muted text-uppercase">Alat & Bahan</label>
                            <textarea name="tools_materials" id="lkpd_alat" class="form-control rounded-4" rows="6" placeholder="Hasil generate..."></textarea>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold small text-muted text-uppercase">Langkah Kerja</label>
                            <textarea name="activity_steps" id="lkpd_langkah" class="form-control rounded-4" rows="6" placeholder="Hasil generate..."></textarea>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold small text-muted text-uppercase">Pertanyaan Diskusi</label>
                        <textarea name="discussion_questions" id="lkpd_diskusi" class="form-control rounded-4" rows="5" placeholder="Hasil generate..."></textarea>
                    </div>

                </div>
                <div class="modal-footer border-0 py-3" style="background-color: rgba(255,255,255,0.02);">
                    <button type="button" class="btn btn-outline-secondary btn-pill px-4" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-success btn-pill px-5 fw-bold shadow-sm"><i class="bi bi-save me-1"></i> Simpan LKPD</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- MODAL DETAIL & EDIT (LOOPING) --}}
@foreach($lkpds as $item)
    {{-- DETAIL --}}
    <div class="modal fade" id="detailModalLKPD{{ $item->id }}" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content rounded-4 border-secondary shadow-lg">
                <div class="modal-header bg-info border-0 text-dark rounded-top-4 py-3">
                    <h5 class="modal-title fw-bold"><i class="bi bi-file-text me-2"></i> {{ $item->title }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="p-4 rounded-4 mb-4 border border-secondary" style="background-color: rgba(255,255,255,0.02);">
                        <h6 class="fw-bold text-primary border-bottom border-secondary pb-2 mb-3"><i class="bi bi-bullseye me-1"></i> Tujuan Pembelajaran:</h6>
                        <p class="mt-2 mb-0" style="white-space: pre-line; line-height: 1.6;">{{ $item->objectives ?? '-' }}</p>
                    </div>
                    
                    <div class="row g-4 mb-4">
                        <div class="col-md-6">
                            <div class="p-4 rounded-4 h-100 border border-secondary" style="background-color: rgba(255,255,255,0.02);">
                                <h6 class="fw-bold text-warning border-bottom border-secondary pb-2 mb-3"><i class="bi bi-tools me-1"></i> Alat & Bahan:</h6>
                                <p class="mt-2 mb-0" style="white-space: pre-line; line-height: 1.6;">{{ $item->tools_materials ?? '-' }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="p-4 rounded-4 h-100 border border-secondary" style="background-color: rgba(255,255,255,0.02);">
                                <h6 class="fw-bold text-success border-bottom border-secondary pb-2 mb-3"><i class="bi bi-list-ol me-1"></i> Langkah Kerja / Prosedur:</h6>
                                <p class="mt-2 mb-0" style="white-space: pre-line; line-height: 1.6;">{{ $item->activity_steps }}</p>
                            </div>
                        </div>
                    </div>

                    <div class="p-4 rounded-4 border border-secondary" style="background-color: rgba(255,255,255,0.02);">
                        <h6 class="fw-bold text-info border-bottom border-secondary pb-2 mb-3"><i class="bi bi-chat-dots me-1"></i> Pertanyaan Diskusi:</h6>
                        <p class="mt-2 mb-0" style="white-space: pre-line; line-height: 1.6;">{{ $item->discussion_questions ?? '-' }}</p>
                    </div>
                </div>
                <div class="modal-footer border-0 py-3" style="background-color: rgba(255,255,255,0.02);">
                    <button type="button" class="btn btn-outline-secondary btn-pill px-4" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

    {{-- EDIT --}}
    <div class="modal fade" id="editModalLKPD{{ $item->id }}" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content rounded-4 border-secondary shadow-lg">
                <div class="modal-header bg-warning border-0 text-dark rounded-top-4 py-3">
                    <h5 class="modal-title fw-bold"><i class="bi bi-pencil-square me-2"></i> Edit LKPD</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form action="{{ route('lkpd.update', $item->id) }}" method="POST">
                    @csrf @method('PUT')
                    <div class="modal-body p-4">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold small text-muted text-uppercase">Mata Pelajaran</label>
                                <select name="subject_id" class="form-select py-2 rounded-pill" required>
                                    @foreach($subjects as $s) 
                                        <option value="{{ $s->id }}" {{ $item->subject_id == $s->id ? 'selected' : '' }}>{{ $s->name }}</option> 
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold small text-muted text-uppercase">Judul LKPD</label>
                                <input type="text" name="title" class="form-control py-2 rounded-pill" value="{{ $item->title }}" required>
                            </div>
                        </div>

                        <div class="row p-4 rounded-4 border border-secondary mb-4 mx-0" style="background-color: rgba(255,255,255,0.02);">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold small text-muted text-uppercase">Jenis Kegiatan</label>
                                <select name="type" class="form-select" required>
                                    <optgroup label="Praktik & Eksperimen">
                                        <option value="Eksperimen / Praktikum" {{ $item->type == 'Eksperimen / Praktikum' ? 'selected' : '' }}>Eksperimen / Praktikum</option>
                                        <option value="Demonstrasi" {{ $item->type == 'Demonstrasi' ? 'selected' : '' }}>Demonstrasi Guru</option>
                                        <option value="Simulasi / Role Play" {{ $item->type == 'Simulasi / Role Play' ? 'selected' : '' }}>Simulasi / Role Play</option>
                                    </optgroup>
                                    <optgroup label="Pemecahan Masalah">
                                        <option value="Problem Based Learning (PBL)" {{ $item->type == 'Problem Based Learning (PBL)' ? 'selected' : '' }}>Problem Based Learning (PBL)</option>
                                        <option value="Project Based Learning (PjBL)" {{ $item->type == 'Project Based Learning (PjBL)' ? 'selected' : '' }}>Project Based Learning (PjBL)</option>
                                        <option value="Studi Kasus" {{ $item->type == 'Studi Kasus' ? 'selected' : '' }}>Studi Kasus</option>
                                    </optgroup>
                                    <optgroup label="Literasi & Diskusi">
                                        <option value="Diskusi Kelompok / FGD" {{ $item->type == 'Diskusi Kelompok / FGD' ? 'selected' : '' }}>Diskusi Kelompok / FGD</option>
                                        <option value="Observasi Lapangan" {{ $item->type == 'Observasi Lapangan' ? 'selected' : '' }}>Observasi Lapangan</option>
                                        <option value="Studi Literatur" {{ $item->type == 'Studi Literatur' ? 'selected' : '' }}>Studi Literatur</option>
                                    </optgroup>
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold small text-muted text-uppercase">Mode Pengerjaan</label>
                                <select name="mode" class="form-select" required>
                                    <option value="kelompok" {{ $item->mode == 'kelompok' ? 'selected' : '' }}>Kelompok</option>
                                    <option value="individu" {{ $item->mode == 'individu' ? 'selected' : '' }}>Individu</option>
                                </select>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-bold small text-muted text-uppercase">Tujuan Pembelajaran</label>
                            <textarea name="objectives" class="form-control rounded-4" rows="4">{{ $item->objectives }}</textarea>
                        </div>

                        <div class="row g-4 mb-4">
                            <div class="col-md-6">
                                <label class="form-label fw-bold small text-muted text-uppercase">Alat & Bahan</label>
                                <textarea name="tools_materials" class="form-control rounded-4" rows="5">{{ $item->tools_materials }}</textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold small text-muted text-uppercase">Langkah Kerja</label>
                                <textarea name="activity_steps" class="form-control rounded-4" rows="5" required>{{ $item->activity_steps }}</textarea>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold small text-muted text-uppercase">Pertanyaan Diskusi</label>
                            <textarea name="discussion_questions" class="form-control rounded-4" rows="4">{{ $item->discussion_questions }}</textarea>
                        </div>
                    </div>
                    <div class="modal-footer border-0 py-3" style="background-color: rgba(255,255,255,0.02);">
                        <button type="button" class="btn btn-outline-secondary btn-pill px-4" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-warning text-dark btn-pill px-5 fw-bold shadow-sm"><i class="bi bi-check-circle me-1"></i> Simpan Perubahan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endforeach

{{-- SCRIPT DIBIARKAN SAMA SEPERTI ASLINYA --}}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const modalCreateLKPD = document.getElementById('modalCreateLKPD');
    if (modalCreateLKPD) {
        modalCreateLKPD.addEventListener('show.bs.modal', function () {
            document.getElementById('formCreateLKPD').reset();
            ['lkpd_tujuan','lkpd_alat','lkpd_langkah','lkpd_diskusi'].forEach(id => document.getElementById(id).value = '');
            
            const btnAI = document.getElementById('btnGenerateLKPDAI');
            btnAI.disabled = false;
            btnAI.innerHTML = '<i class="bi bi-magic me-1"></i> Generate Konten';
            document.getElementById('loadingIndicatorLKPD').style.display = 'none';
        });
    }

    function formatAIOutput(data) {
        if (!data) return "";
        if (Array.isArray(data)) return data.map(item => "- " + item).join('\n');
        return data;
    }

    const btnAI = document.getElementById('btnGenerateLKPDAI');
    if(btnAI) {
        btnAI.addEventListener('click', function() {
            const subjectSelect = document.getElementById('ai_lkpd_subject');
            if(subjectSelect.selectedIndex === 0 || !subjectSelect.value) { 
                alert("Pilih Mata Pelajaran terlebih dahulu."); 
                return; 
            }

            const mapelName = subjectSelect.options[subjectSelect.selectedIndex].getAttribute('data-name');
            const topikVal = document.getElementById('ai_lkpd_topic').value;
            const jenisVal = document.getElementById('ai_lkpd_type').value;
            const modeVal = document.getElementById('ai_lkpd_mode').value;

            if(!topikVal) { alert("Mohon isi Topik Utama agar AI dapat menyusun langkah kerja."); return; }
            if(!jenisVal) { alert("Mohon pilih Jenis Kegiatan terlebih dahulu."); return; }
            if(!modeVal) { alert("Mohon pilih Mode Pengerjaan terlebih dahulu."); return; }

            const payload = {
                mapel: mapelName || 'Umum',
                judul: document.getElementById('ai_lkpd_title').value,
                topik: topikVal,
                materi: document.getElementById('ai_lkpd_material').value,
                jenis: jenisVal,
                mode: modeVal
            };

            document.getElementById('loadingIndicatorLKPD').style.display = 'block';
            btnAI.disabled = true;
            btnAI.innerHTML = '<i class="spinner-border spinner-border-sm me-2"></i> Menyusun...';

            fetch("{{ asset('ai-lkpd.php') }}", { 
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            })
            .then(response => {
                if (!response.ok) throw new Error("Server Error: " + response.status);
                return response.json();
            })
            .then(data => {
                if(data.error) {
                    alert("Error AI: " + data.error);
                } else if(data.tujuan || data.langkah) {
                    document.getElementById('lkpd_tujuan').value = formatAIOutput(data.tujuan);
                    document.getElementById('lkpd_alat').value = formatAIOutput(data.alat);
                    document.getElementById('lkpd_langkah').value = formatAIOutput(data.langkah);
                    document.getElementById('lkpd_diskusi').value = formatAIOutput(data.diskusi);
                } else {
                    alert("Gagal memproses. Cek console.");
                    console.log(data);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Gagal menghubungi server AI. ' + error.message);
            })
            .finally(() => {
                document.getElementById('loadingIndicatorLKPD').style.display = 'none';
                btnAI.disabled = false;
                btnAI.innerHTML = '<i class="bi bi-magic me-1"></i> Generate Konten';
            });
        });
    }
    
    const checkAll = document.getElementById('checkAllLKPD');
    if(checkAll){
        checkAll.addEventListener('change', function(){
            document.querySelectorAll('.check-item-lkpd').forEach(c => c.checked = this.checked);
        });
    }
});
</script>
@endsection