<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Cetak LKPD</title>
    <style>
        /* --- 1. SETTING KERTAS & FONT --- */
        body { 
            font-family: 'Times New Roman', serif; 
            margin: 0; 
            padding: 0; 
            color: #000;
            font-size: 11pt; /* Font dasar diperkecil sedikit agar muat banyak */
            line-height: 1.2; /* Spasi antar baris dirapatkan */
        }
        
        /* Margin Kertas Diperkecil */
        @page { size: A4; margin: 1cm 1.5cm; }
        
        /* --- 2. KOP SURAT --- */
        .kop-surat { 
            text-align: center; 
            border-bottom: 3px double #000; 
            padding-bottom: 8px; 
            margin-bottom: 15px; 
        }
        .kop-title-main { margin: 0; font-size: 13pt; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }
        .kop-address { margin: 2px 0 0 0; font-size: 10pt; }

        /* Judul Dokumen */
        .page-title {
            text-align: center; font-weight: bold; text-decoration: underline;
            margin-bottom: 15px; font-size: 12pt; text-transform: uppercase;
        }

        /* --- 3. TABEL INFORMASI (LEBIH RINGKAS) --- */
        .info-box-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 10px;
            border: 1px solid #000;
            font-size: 10.5pt; /* Font tabel diperkecil */
        }
        .info-box-table td {
            border: 1px solid #000;
            padding: 3px 6px; /* Padding diperkecil agar tidak menumpuk */
            vertical-align: middle;
        }
        .label-col {
            font-weight: bold;
            width: 140px; 
            background-color: #f0f0f0; 
        }
        
        /* --- 4. IDENTITAS SISWA --- */
        .student-details-table { width: 100%; border-collapse: collapse; margin-bottom: 15px; font-size: 11pt; }
        .student-details-table td { padding: 2px 0; vertical-align: bottom; }
        .dots { border-bottom: 1px dotted #000; display: inline-block; width: 95%; }

        /* --- 5. KONTEN ISI --- */
        .section-title { 
            font-weight: bold; 
            margin-top: 10px; 
            margin-bottom: 3px; 
            text-transform: uppercase; 
            font-size: 11pt;
        }
        
        /* Style untuk teks isi (Alat, Bahan, Langkah) */
        .content-text {
            margin-left: 18px; /* Indentasi sedikit saja */
            white-space: pre-wrap; 
            text-align: justify;
        }

        /* Style Khusus Kotak Diskusi */
        .content-box { 
            border: 1px solid #000; 
            padding: 8px 10px; 
            min-height: 80px; 
            margin-top: 5px;
        }

        /* Perbaikan Tampilan Pertanyaan Diskusi */
        .discussion-text {
            white-space: pre-wrap; /* Agar enter terbaca */
            margin: 0;
            padding: 0;
            line-height: 1.15; /* Spasi antar baris pertanyaan lebih rapat */
        }
        
        /* Utilitas */
        .page-break { page-break-after: always; }
        @media print { .no-print { display: none; } }
        .btn-print {
            background: #0d6efd; color: white; padding: 10px 20px; border: none; 
            border-radius: 5px; cursor: pointer; position: fixed; top: 20px; right: 20px; font-family: sans-serif;
        }
    </style>
</head>
<body>

    <button onclick="window.print()" class="no-print btn-print">🖨️ Cetak Dokumen</button>

    @foreach($data as $item)
    <div class="{{ !$loop->last ? 'page-break' : '' }}">
        
        <div class="kop-surat">
            <div class="kop-title-main">PEMERINTAH PROVINSI SULAWESI SELATAN</div>
            <div class="kop-title-main">DINAS PENDIDIKAN - SMKN 10 MAKASSAR</div>
            <div class="kop-address">Jl. Bonto Manai No. 14, Kota Makassar</div>
        </div>

        <div class="page-title">LEMBAR KERJA PESERTA DIDIK (LKPD)</div>

        <table class="info-box-table">
            <tr>
                <td class="label-col">Mata Pelajaran</td>
                <td>{{ $item->subject->name }}</td>
                <td class="label-col">Mode/Bentuk</td>
                <td>{{ ucfirst($item->mode) }}</td>
            </tr>
            <tr>
                <td class="label-col">Judul LKPD</td>
                <td>{{ $item->title }}</td>
                <td class="label-col">Jenis Kegiatan</td>
                <td>{{ $item->type }}</td>
            </tr>
        </table>

        <table class="student-details-table">
            <tr>
                <td width="15%">Kelompok</td>
                <td width="40%">: <span class="dots"></span></td>
                <td width="10%">Kelas</td>
                <td width="35%">: <span class="dots"></span></td>
            </tr>
            <tr>
                <td>Anggota</td>
                <td>: <span class="dots"></span></td>
                <td>Jurusan</td>
                <td>: <span class="dots"></span></td>
            </tr>
        </table>
        
        <hr style="border-top: 2px solid #000; margin-bottom: 10px;">

        <div class="section-title">A. TUJUAN PEMBELAJARAN</div>
        <div class="content-box">
        <div class="content-text">{!! e($item->objectives) !!}</div>
        </div>

        <div class="section-title">B. ALAT DAN BAHAN</div>
        <div class="content-box">
        <div class="content-text">{!! e($item->tools_materials) !!}</div>
        </div>

        <div class="section-title">C. LANGKAH KERJA / PROSEDUR</div>
        <div class="content-box">
        <div class="content-text">{!! e($item->activity_steps) !!}</div>
        
        </div>

        <div class="section-title" style="margin-top: 15px;">D. HASIL PENGAMATAN & DISKUSI</div>
        <div class="content-box">
            @if($item->discussion_questions)
                <div style="font-weight: bold; text-decoration: underline; margin-bottom: 5px;">Pertanyaan Diskusi:</div>
                {{-- Class baru untuk merapatkan spasi dan menghapus tab kiri --}}
                <div class="discussion-text">{!! e($item->discussion_questions) !!}</div>
            @else
                <p style="color: #ccc; text-align: center; padding-top: 20px; font-style: italic;">
                    (Tuliskan hasil pengamatan dan jawaban diskusi kelompok di sini)
                </p>
            @endif
        </div>

       

    </div>
    @endforeach

</body>
</html>