<div class="container-fluid px-4 py-3">

    <!-- Header -->
    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <h4 class="mb-0 fw-bold text-dark">
                <i class="bi bi-exclamation-circle-fill me-2" style="color:#20c997;"></i>Kirim Pengaduan
            </h4>
            <small class="text-muted">Sampaikan pengaduan atau saran Anda kepada RT</small>
        </div>
        <a href="<?php echo base_url('pengaduan'); ?>" class="btn btn-sm btn-outline-secondary fw-semibold" style="border-radius:8px;">
            <i class="bi bi-arrow-left me-1"></i>Kembali
        </a>
    </div>

    <div class="row justify-content-center">
        <div class="col-md-8">

            <?php if($this->session->flashdata('error')): ?>
            <div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm mb-4" style="border-radius:10px;">
                <i class="bi bi-x-circle-fill me-2"></i><?php echo $this->session->flashdata('error'); ?>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
            <?php endif; ?>

            <?php if(validation_errors()): ?>
            <div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm mb-4" style="border-radius:10px;">
                <i class="bi bi-x-circle-fill me-2"></i><?php echo validation_errors(); ?>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
            <?php endif; ?>

            <div class="card border-0 shadow-sm" style="border-radius:14px; border-top:4px solid #20c997 !important;">
                <div class="card-body p-4">

                    <?php echo form_open_multipart('pengaduan/tambah'); ?>

                        <!-- Judul -->
                        <div class="mb-3">
                            <label class="form-label small fw-semibold text-muted">Judul <span class="text-danger">*</span></label>
                            <input type="text" name="judul" class="form-control" style="border-radius:8px;"
                                   placeholder="Judul singkat pengaduan..."
                                   value="<?php echo set_value('judul'); ?>" required>
                        </div>

                        <!-- Kategori -->
                        <div class="mb-3">
                            <label class="form-label small fw-semibold text-muted">Kategori <span class="text-danger">*</span></label>
                            <select name="kategori" class="form-select" style="border-radius:8px;" required>
                                <option value="">-- Pilih Kategori --</option>
                                <option value="infrastruktur"  <?php echo set_value('kategori') == 'infrastruktur'  ? 'selected' : ''; ?>>🏗️ Infrastruktur</option>
                                <option value="keamanan"       <?php echo set_value('kategori') == 'keamanan'       ? 'selected' : ''; ?>>🔒 Keamanan</option>
                                <option value="kebersihan"     <?php echo set_value('kategori') == 'kebersihan'     ? 'selected' : ''; ?>>🧹 Kebersihan</option>
                                <option value="sosial"         <?php echo set_value('kategori') == 'sosial'         ? 'selected' : ''; ?>>🤝 Sosial</option>
                                <option value="administrasi"   <?php echo set_value('kategori') == 'administrasi'   ? 'selected' : ''; ?>>📋 Administrasi</option>
                                <option value="lainnya"        <?php echo set_value('kategori') == 'lainnya'        ? 'selected' : ''; ?>>📌 Lainnya</option>
                            </select>
                        </div>

                        <!-- Isi -->
                        <div class="mb-3">
                            <label class="form-label small fw-semibold text-muted">Isi Pengaduan <span class="text-danger">*</span></label>
                            <textarea name="isi" class="form-control" rows="5" style="border-radius:8px;"
                                      placeholder="Jelaskan pengaduan Anda secara lengkap dan jelas..." required><?php echo set_value('isi'); ?></textarea>
                        </div>

                        <!-- Privasi -->
                        <div class="mb-3">
                            <label class="form-label small fw-semibold text-muted">Privasi</label>
                            <div class="d-flex gap-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="privasi" id="publik" value="publik"
                                           <?php echo set_value('privasi', 'publik') == 'publik' ? 'checked' : ''; ?>>
                                    <label class="form-check-label small" for="publik">
                                        🌐 Publik <span class="text-muted">(terlihat semua warga)</span>
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="privasi" id="privat" value="privat"
                                           <?php echo set_value('privasi') == 'privat' ? 'checked' : ''; ?>>
                                    <label class="form-check-label small" for="privat">
                                        🔒 Privat <span class="text-muted">(hanya admin & saya)</span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Lampiran -->
                        <div class="mb-4">
                            <label class="form-label small fw-semibold text-muted">Lampiran <span class="text-muted fw-normal">(Opsional)</span></label>
                            <input type="file" name="lampiran" class="form-control" style="border-radius:8px;"
                                   accept=".jpg,.jpeg,.png,.pdf">
                            <small class="text-muted">Format: JPG, PNG, PDF. Maksimal 5MB</small>
                        </div>

                        <!-- Footer -->
                        <div class="d-flex justify-content-between align-items-center pt-3" style="border-top:1px solid #f1f3f5;">
                            <a href="<?php echo base_url('pengaduan'); ?>" class="btn btn-sm fw-semibold px-4"
                               style="border-radius:8px; background:#f1f3f5; border:none; color:#6c757d;">
                                Batal
                            </a>
                            <button type="submit" class="btn btn-sm fw-semibold px-4 text-white"
                                    style="background:#20c997; border:none; border-radius:8px;">
                                <i class="bi bi-send me-1"></i>Kirim Pengaduan
                            </button>
                        </div>

                    <?php echo form_close(); ?>
                </div>
            </div>

            <!-- Info Box -->
            <div class="card border-0 shadow-sm mt-3" style="border-radius:12px; background:#f8fffe;">
                <div class="card-body px-4 py-3">
                    <p class="small fw-semibold mb-2" style="color:#20c997;"><i class="bi bi-info-circle me-1"></i>Informasi Penting</p>
                    <ul class="mb-0 small text-muted ps-3">
                        <li>Pastikan isi pengaduan jelas dan lengkap</li>
                        <li>Admin akan merespons dalam 1-3 hari kerja</li>
                        <li>Pantau status pengaduan di halaman daftar</li>
                        <li>Pengaduan privat hanya bisa dilihat admin dan Anda</li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
</div>

<style>
.form-control:focus, .form-select:focus { border-color: #20c997; box-shadow: 0 0 0 0.2rem rgba(32,201,151,.15); }
.form-check-input:checked { background-color: #20c997; border-color: #20c997; }
.btn:focus { box-shadow: none; }
</style>