<?php 
include '../koneksi.php';
cek_akses(['Kepala', 'Super Admin']);

// Ambil parameter dari URL (dikirim dari supervisi_menu.php)
$guru_id = isset($_GET['guru_id']) ? (int)$_GET['guru_id'] : 0;
$guru_nama = isset($_GET['guru_nama']) ? urldecode($_GET['guru_nama']) : '';

// Jika ada guru_id tapi nama kosong, ambil dari database
if($guru_id > 0 && empty($guru_nama)) {
    $query_guru = mysqli_query($conn, "SELECT full_name FROM users WHERE id = $guru_id AND role = 'Guru'");
    if($query_guru && mysqli_num_rows($query_guru) > 0) {
        $guru = mysqli_fetch_assoc($query_guru);
        $guru_nama = $guru['full_name'];
    }
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>Formulir Monitoring Tindakan Perbaikan dan Pencegahan</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/css/adminlte.min.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../assets/css/theme-istiqlal-green.css">
    <style>
        .form-container { max-width: 1400px; margin: 0 auto; }
        .section-card { margin-bottom: 20px; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
        .section-header { background: #0b5e4e; color: white; padding: 10px 15px; font-weight: 600; }
        .section-body { background: white; padding: 15px; }
        .monitoring-table { font-size: 11px; width: 100%; border-collapse: collapse; }
        .monitoring-table th, .monitoring-table td { border: 1px solid #cbd5e1; padding: 6px; vertical-align: top; }
        .monitoring-table th { background: #e8f0fe; text-align: center; }
        .btn-add-row { margin-top: 10px; }
        @media print { .no-print { display: none !important; } }
    </style>
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
    <?php include '../sidebar.php'; ?>
    
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0" style="font-size: 18px;"><i class="fas fa-chart-line text-danger"></i> FORMULIR MONITORING TINDAKAN PERBAIKAN DAN PENCEGAHAN</h1>
                        <small>F-025-KPM</small>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="../dashboard.php">Home</a></li>
                            <li class="breadcrumb-item"><a href="supervisi_menu.php">Supervisi</a></li>
                            <li class="breadcrumb-item active">Monitoring Tindakan</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <div class="content">
            <div class="container-fluid form-container">
                <form method="POST" action="cetak_dokumen.php" target="_blank">
                    <input type="hidden" name="form_type" value="pencegahan">
                    
                    <!-- Data Guru -->
                    <div class="section-card">
                        <div class="section-header"><i class="fas fa-user"></i> Data Guru</div>
                        <div class="section-body">
                            <div class="row">
                                <div class="col-md-3 mb-2">
                                    <label class="small fw-bold">Nama Guru</label>
                                    <input type="text" name="nama_guru" class="form-control form-control-sm" value="<?= htmlspecialchars($guru_nama) ?>" required>
                                    <?php if($guru_nama): ?>
                                    <small class="text-success d-block">✓ Data otomatis dari jadwal supervisi</small>
                                    <?php endif; ?>
                                </div>
                                <div class="col-md-3 mb-2">
                                    <label class="small fw-bold">Tahun</label>
                                    <input type="text" name="tahun" class="form-control form-control-sm" value="<?= date('Y') ?>">
                                </div>
                                <div class="col-md-6 mb-2">
                                    <label class="small fw-bold">Keterangan Jenis (*)</label>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label class="check-option"><input type="checkbox" name="jenis_keterangan[]" value="TI = Temuan Internal"> TI = Temuan Internal</label>
                                            <label class="check-option"><input type="checkbox" name="jenis_keterangan[]" value="KP = Keluhan Pelanggan"> KP = Keluhan Pelanggan</label>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="check-option"><input type="checkbox" name="jenis_keterangan[]" value="PTS = Produk/Layanan Tidak Sesuai"> PTS = Produk/Layanan Tidak Sesuai</label>
                                            <label class="check-option"><input type="checkbox" name="jenis_keterangan[]" value="OFI = Opportunity for Improvement"> OFI = Opportunity for Improvement</label>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="check-option"><input type="checkbox" name="jenis_keterangan[]" value="SM = Sasaran Mutu"> SM = Sasaran Mutu</label>
                                            <label class="check-option"><input type="checkbox" name="jenis_keterangan[]" value="L = Lain-lain"> L = Lain-lain</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Tabel Monitoring -->
                    <div class="section-card">
                        <div class="section-header"><i class="fas fa-table"></i> Daftar Monitoring Tindakan</div>
                        <div class="section-body">
                            <div class="table-responsive">
                                <table class="monitoring-table" id="monitoringTable">
                                    <thead>
                                        <tr>
                                            <th width="5%">No</th>
                                            <th width="8%">Jenis<br>(*)</th>
                                            <th width="20%">Uraian ketidaksesuaian/<br>potensi ketidaksesuaian</th>
                                            <th width="8%">PTPP<br>(Tanggal)</th>
                                            <th width="8%">Rencana<br>Penyelesaian</th>
                                            <th width="8%">Penyelesaian<br>Tindakan</th>
                                            <th width="8%">Peringatan</th>
                                            <th width="8%">Verifikasi</th>
                                            <th width="10%">Efektifitas<br>Tindakan</th>
                                            <th width="10%">Keterangan</th>
                                            <th width="5%">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableBody">
                                        <tr class="row-data">
                                            <td class="text-center">1</td>
                                            <td>
                                                <select name="jenis[]" class="form-control form-control-sm">
                                                    <option value="">Pilih</option>
                                                    <option value="TI">TI - Temuan Internal</option>
                                                    <option value="KP">KP - Keluhan Pelanggan</option>
                                                    <option value="PTS">PTS - Produk/Layanan Tidak Sesuai</option>
                                                    <option value="OFI">OFI - Opportunity for Improvement</option>
                                                    <option value="SM">SM - Sasaran Mutu</option>
                                                    <option value="L">L - Lain-lain</option>
                                                </select>
                                            </td>
                                            <td><textarea name="uraian[]" class="form-control form-control-sm" rows="2" placeholder="Uraian..."></textarea></td>
                                            <td><input type="date" name="ptpp[]" class="form-control form-control-sm"></td>
                                            <td><input type="date" name="rencana_penyelesaian[]" class="form-control form-control-sm"></td>
                                            <td><input type="date" name="penyelesaian_tindakan[]" class="form-control form-control-sm"></td>
                                            <td><input type="text" name="peringatan[]" class="form-control form-control-sm" placeholder="Peringatan"></td>
                                            <td><input type="text" name="verifikasi[]" class="form-control form-control-sm" placeholder="Verifikasi"></td>
                                            <td>
                                                <select name="efektifitas[]" class="form-control form-control-sm">
                                                    <option value="">Pilih</option>
                                                    <option value="Efektif">Efektif</option>
                                                    <option value="Cukup Efektif">Cukup Efektif</option>
                                                    <option value="Kurang Efektif">Kurang Efektif</option>
                                                    <option value="Tidak Efektif">Tidak Efektif</option>
                                                </select>
                                            </td>
                                            <td><input type="text" name="keterangan_monitoring[]" class="form-control form-control-sm" placeholder="Keterangan"></td>
                                            <td class="text-center"><button type="button" class="btn btn-sm btn-danger remove-row"><i class="fas fa-trash"></i></button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="text-center mt-2">
                                <button type="button" class="btn btn-success btn-sm" id="addRowBtn"><i class="fas fa-plus"></i> Tambah Baris</button>
                            </div>
                        </div>
                    </div>

                    <!-- Keterangan -->
                    <div class="section-card">
                        <div class="section-header"><i class="fas fa-info-circle"></i> Keterangan</div>
                        <div class="section-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <ul class="small mb-0">
                                        <li>TI = Temuan Internal</li>
                                        <li>KP = Keluhan Pelanggan</li>
                                        <li>PTS = Produk/Layanan Tidak Sesuai</li>
                                    </ul>
                                </div>
                                <div class="col-md-6">
                                    <ul class="small mb-0">
                                        <li>OFI = Opportunity for Improvement</li>
                                        <li>SM = Sasaran Mutu</li>
                                        <li>L = Lain-lain</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="mt-2">
                                <small><strong>PTPP = Permintaan Tindakan Perbaikan dan Pencegahan</strong></small>
                            </div>
                        </div>
                    </div>

                    <!-- Tanda Tangan -->
                    <div class="section-card">
                        <div class="section-header"><i class="fas fa-signature"></i> Tanda Tangan</div>
                        <div class="section-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <label class="small fw-bold">Dibuat oleh</label>
                                    <input type="text" name="dibuat_oleh" class="form-control form-control-sm" value="<?= $_SESSION['full_name'] ?>" readonly>
                                </div>
                                <div class="col-md-4">
                                    <label class="small fw-bold">Tanggal</label>
                                    <input type="date" name="tanggal_dibuat" class="form-control form-control-sm" value="<?= date('Y-m-d') ?>">
                                </div>
                                <div class="col-md-4">
                                    <label class="small fw-bold">Disetujui oleh (Penjamin Mutu)</label>
                                    <input type="text" name="disetujui_oleh" class="form-control form-control-sm">
                                </div>
                                <div class="col-md-4 mt-2">
                                    <label class="small fw-bold">Tanggal disetujui</label>
                                    <input type="date" name="tanggal_disetujui" class="form-control form-control-sm" value="<?= date('Y-m-d') ?>">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="text-center mb-4 no-print">
                        <button type="submit" class="btn btn-danger btn-sm"><i class="fas fa-file-pdf"></i> Simpan & Cetak PDF</button>
                        <button type="button" class="btn btn-secondary btn-sm" onclick="window.print()"><i class="fas fa-print"></i> Print</button>
                        <a href="supervisi_menu.php?guru_id=<?= $guru_id ?>&guru_nama=<?= urlencode($guru_nama) ?>" class="btn btn-outline-secondary btn-sm">
                            <i class="fas fa-arrow-left"></i> Kembali
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <footer class="main-footer no-print"><strong>&copy; <?= date('Y') ?> SIM ISTIQLAL</strong></footer>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    $('#addRowBtn').click(function() {
        var rowCount = $('#tableBody tr').length;
        var newRow = `
            <tr class="row-data">
                <td class="text-center">${rowCount + 1}</td>
                <td>
                    <select name="jenis[]" class="form-control form-control-sm">
                        <option value="">Pilih</option>
                        <option value="TI">TI - Temuan Internal</option>
                        <option value="KP">KP - Keluhan Pelanggan</option>
                        <option value="PTS">PTS - Produk/Layanan Tidak Sesuai</option>
                        <option value="OFI">OFI - Opportunity for Improvement</option>
                        <option value="SM">SM - Sasaran Mutu</option>
                        <option value="L">L - Lain-lain</option>
                    </select>
                </td>
                <td><textarea name="uraian[]" class="form-control form-control-sm" rows="2" placeholder="Uraian..."></textarea></td>
                <td><input type="date" name="ptpp[]" class="form-control form-control-sm"></td>
                <td><input type="date" name="rencana_penyelesaian[]" class="form-control form-control-sm"></td>
                <td><input type="date" name="penyelesaian_tindakan[]" class="form-control form-control-sm"></td>
                <td><input type="text" name="peringatan[]" class="form-control form-control-sm" placeholder="Peringatan"></td>
                <td><input type="text" name="verifikasi[]" class="form-control form-control-sm" placeholder="Verifikasi"></td>
                <td>
                    <select name="efektifitas[]" class="form-control form-control-sm">
                        <option value="">Pilih</option>
                        <option value="Efektif">Efektif</option>
                        <option value="Cukup Efektif">Cukup Efektif</option>
                        <option value="Kurang Efektif">Kurang Efektif</option>
                        <option value="Tidak Efektif">Tidak Efektif</option>
                    </select>
                </td>
                <td><input type="text" name="keterangan_monitoring[]" class="form-control form-control-sm" placeholder="Keterangan"></td>
                <td class="text-center"><button type="button" class="btn btn-sm btn-danger remove-row"><i class="fas fa-trash"></i></button></td>
            </tr>
        `;
        $('#tableBody').append(newRow);
        updateRowNumbers();
    });
    
    $(document).on('click', '.remove-row', function() {
        if($('#tableBody tr').length > 1) {
            $(this).closest('tr').remove();
            updateRowNumbers();
        } else {
            alert('Minimal 1 baris data!');
        }
    });
    
    function updateRowNumbers() {
        $('#tableBody tr').each(function(index) {
            $(this).find('td:first').text(index + 1);
        });
    }
</script>
</body>
</html>