<?php 
// 1. Mulai Session & Cek Login
session_start();
include '../includes/config.php'; 

if (!isset($_SESSION['pelapor_id'])) {
    header("Location: login_pelapor.php?pesan=wajib_login");
    exit();
}

include '../includes/header.php'; 
?>

<style>
    body { font-family: 'Poppins', sans-serif; background: #f0f2f5; }
    .card-modern { border-radius: 20px; border: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important; background: #ffffff; }
    .step-indicator { display: flex; justify-content: center; gap: 20px; margin-bottom: 40px; }
    .step-circle { width: 45px; height: 45px; border-radius: 50%; background: #e9ecef; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #adb5bd; transition: 0.4s; border: 4px solid #fff; box-shadow: 0 0 0 2px #e9ecef; }
    .step-circle.active { background: #0d6efd; color: #fff; box-shadow: 0 0 0 2px #0d6efd; }
    .form-control-modern { border-radius: 12px; padding: 12px 18px; border: 1.5px solid #dee2e6; transition: 0.3s; background-color: #f8f9fa; }
    .btn-modern { border-radius: 12px; padding: 14px 25px; font-weight: 600; transition: 0.3s; }
</style>

<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            <div class="text-center mb-4">
                <p class="text-muted small">Login sebagai: <strong><?= htmlspecialchars($_SESSION['pelapor_nama']) ?></strong></p>
            </div>

            <div class="card card-modern">
                <div class="card-body p-4 p-md-5">
                    <h3 class="text-center fw-bold text-primary mb-4">Formulir Pengaduan</h3>

                    <div class="step-indicator">
                        <div class="step-circle active" id="dot-1">1</div>
                        <div class="step-circle" id="dot-2">2</div>
                    </div>

                    <form action="proses_laporan.php" method="POST" enctype="multipart/form-data" id="wbsForm">
                        
                        <div id="step-1" class="form-step">
                            <div class="mb-3">
                                <label class="form-label fw-semibold"><i class="bi bi-list-ul me-2"></i>Jenis Pelanggaran</label>
                                <select name="apa" id="apaSelect" class="form-select form-control-modern" required onchange="cekJenisLainnya()">
                                    <option value="" selected disabled>Pilih Jenis...</option>
                                    <option value="Gravitasi">Gratifikasi</option>
                                    <option value="Korupsi">Korupsi</option>
                                    <option value="Pungli">Pungli</option>
                                    <option value="Disiplin">Pelanggaran Disiplin/ kode etik</option>
                                    <option value="Lainnya">Lainnya...</option>
                                </select>

                                <div id="inputLainnyaContainer" class="mt-2" style="display: none;">
                                    <input type="text" name="apa_lainnya" id="apa_lainnya" class="form-control form-control-modern" placeholder="Sebutkan jenis pelanggaran lainnya...">
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-semibold"><i class="bi bi-geo-alt me-2"></i>Lokasi Kejadian</label>
                                <input type="text" name="dimana" class="form-control form-control-modern" placeholder="Contoh: Kantor BPS Lamtim" required>
                            </div>

                            <div class="mb-4">
                                <label class="form-label fw-semibold"><i class="bi bi-calendar-event me-2"></i>Tanggal Kejadian</label>
                                <input type="date" name="kapan" class="form-control form-control-modern" required>
                            </div>

                            <div class="d-grid">
                                <button type="button" class="btn btn-primary btn-modern" onclick="goNext()">
                                    Lanjut <i class="bi bi-arrow-right ms-2"></i>
                                </button>
                            </div>
                        </div>

                        <div id="step-2" class="form-step" style="display: none;">
                            <div class="mb-3">
                                <label class="form-label fw-semibold"><i class="bi bi-person-badge me-2"></i>Pihak Terlapor</label>
                                <input type="text" name="siapa" class="form-control form-control-modern" placeholder="Nama atau Jabatan" required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-semibold"><i class="bi bi-chat-left-text me-2"></i>Deskripsi Kronologi</label>
                                <textarea name="bagaimana" class="form-control form-control-modern" rows="4" placeholder="Ceritakan detail kejadian..." required></textarea>
                            </div>

                            <div class="mb-4">
                                <label class="form-label fw-semibold"><i class="bi bi-paperclip me-2"></i>Bukti Pendukung</label>
                                <input type="file" name="bukti" class="form-control form-control-modern" accept="image/*,video/*,.pdf,.doc,.docx">
                                <small class="text-danger d-block mt-2">
                                    Format: Foto, Video, PDF, atau Word (Maks. 2MB)
                                </small>
                            </div>

                            <div class="row g-2">
                                <div class="col-4">
                                    <button type="button" class="btn btn-light btn-modern w-100" onclick="goBack()">
                                        <i class="bi bi-arrow-left"></i>
                                    </button>
                                </div>
                                <div class="col-8">
                                    <button type="submit" class="btn btn-warning btn-modern w-100 fw-bold">
                                        Kirim Laporan <i class="bi bi-send-fill ms-2"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function cekJenisLainnya() {
        const selectBox = document.getElementById('apaSelect');
        const container = document.getElementById('inputLainnyaContainer');
        const inputTeks = document.getElementById('apa_lainnya');

        if (selectBox.value === 'Lainnya') {
            container.style.display = 'block';
            inputTeks.focus();
        } else {
            container.style.display = 'none';
        }
    }

    function goNext() {
        const apa = document.getElementById('apaSelect').value;
        const dimana = document.getElementsByName('dimana')[0].value;
        const kapan = document.getElementsByName('kapan')[0].value;
        const apaLainnya = document.getElementById('apa_lainnya').value;

        if(!apa || !dimana || !kapan) {
            Swal.fire('Peringatan', 'Harap isi Jenis, Lokasi, dan Tanggal!', 'warning');
            return;
        }

        if(apa === 'Lainnya' && !apaLainnya) {
            Swal.fire('Peringatan', 'Sebutkan jenis pelanggaran lainnya!', 'warning');
            return;
        }

        document.getElementById('step-1').style.display = 'none';
        document.getElementById('step-2').style.display = 'block';
        document.getElementById('dot-1').classList.remove('active');
        document.getElementById('dot-2').classList.add('active');
    }

    function goBack() {
        document.getElementById('step-2').style.display = 'none';
        document.getElementById('step-1').style.display = 'block';
        document.getElementById('dot-2').classList.remove('active');
        document.getElementById('dot-1').classList.add('active');
    }
</script>

<?php include '../includes/footer.php'; ?>