<style>
.jadwal-form-card {
    border-radius: 16px;
    border: 1.5px solid #e5e7eb;
    overflow: hidden;
}
.jadwal-form-header {
    background: linear-gradient(135deg, #0d9488, #14b8a6);
    color: white;
    padding: 20px 24px;
}
.jadwal-form-body {
    padding: 24px;
}
.section-title {
    font-size: .9rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.petugas-row {
    background: #f9fafb;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1.5px solid #e5e7eb;
}
</style>

<div>
    <!-- Header -->
    <div class="ar-page-header">
        <div class="ar-header-left">
            <h5>
                <span class="hi"><i class="bi bi-calendar-plus"></i></span>
                <?php echo isset($j) ? 'Edit Jadwal' : 'Tambah Jadwal'; ?>
            </h5>
            <div class="ar-breadcrumb">
                <a href="<?php echo base_url('dashboard'); ?>">Dashboard</a>
                <span class="sep">/</span>
                <a href="<?php echo base_url('jadwal'); ?>">Jadwal</a>
                <span class="sep">/</span>
                <span><?php echo isset($j) ? 'Edit' : 'Tambah'; ?></span>
            </div>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card jadwal-form-card">
                <div class="jadwal-form-header">
                    <h6 class="mb-0"><i class="bi bi-calendar-check me-2"></i>Informasi Jadwal</h6>
                </div>
                <div class="jadwal-form-body">
                    <form action="" method="post" id="formJadwal">
                        
                        <!-- Nama Kegiatan -->
                        <div class="mb-3">
                            <label class="form-label">Nama Kegiatan <span class="text-danger">*</span></label>
                            <input type="text" name="nama_kegiatan" class="form-control" 
                                   value="<?php echo isset($j) ? htmlspecialchars($j->nama_kegiatan) : ''; ?>" required
                                   placeholder="Contoh: Ronda Malam, Kerja Bakti, dll">
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Kategori <span class="text-danger">*</span></label>
                                <select name="kategori" class="form-select" required>
                                    <option value="">Pilih Kategori</option>
                                    <option value="ronda" <?php echo (isset($j) && $j->kategori=='ronda')?'selected':''; ?>>Ronda</option>
                                    <option value="kerja_bakti" <?php echo (isset($j) && $j->kategori=='kerja_bakti')?'selected':''; ?>>Kerja Bakti</option>
                                    <option value="poskamling" <?php echo (isset($j) && $j->kategori=='poskamling')?'selected':''; ?>>Poskamling</option>
                                    <option value="arisan" <?php echo (isset($j) && $j->kategori=='arisan')?'selected':''; ?>>Arisan</option>
                                    <option value="rapat" <?php echo (isset($j) && $j->kategori=='rapat')?'selected':''; ?>>Rapat</option>
                                    <option value="lainnya" <?php echo (isset($j) && $j->kategori=='lainnya')?'selected':''; ?>>Lainnya</option>
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Jenis Jadwal <span class="text-danger">*</span></label>
                                <select name="jenis_jadwal" id="jenisJadwal" class="form-select" required onchange="toggleJenisJadwal()">
                                    <option value="">Pilih Jenis</option>
                                    <option value="harian" <?php echo (isset($j) && $j->jenis_jadwal=='harian')?'selected':''; ?>>Setiap Hari (Harian)</option>
                                    <option value="mingguan" <?php echo (isset($j) && $j->jenis_jadwal=='mingguan')?'selected':''; ?>>Mingguan (Hari Tertentu)</option>
                                    <option value="tanggal_tentu" <?php echo (isset($j) && $j->jenis_jadwal=='tanggal_tentu')?'selected':''; ?>>Tanggal Tertentu</option>
                                    <option value="range_tanggal" <?php echo (isset($j) && $j->jenis_jadwal=='range_tanggal')?'selected':''; ?>>Rentang Tanggal</option>
                                </select>
                            </div>
                        </div>

                        <!-- Dynamic Fields Berdasarkan Jenis -->
                        <div id="fieldHarian" class="jenis-fields" style="display:none;">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Waktu Mulai</label>
                                    <input type="time" name="waktu_mulai" class="form-control" 
                                           value="<?php echo isset($j) ? $j->waktu_mulai : ''; ?>">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Waktu Selesai</label>
                                    <input type="time" name="waktu_selesai" class="form-control" 
                                           value="<?php echo isset($j) ? $j->waktu_selesai : ''; ?>">
                                </div>
                            </div>
                        </div>

                        <div id="fieldMingguan" class="jenis-fields" style="display:none;">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Hari <span class="text-danger">*</span></label>
                                    <select name="hari" class="form-select">
                                        <option value="">Pilih Hari</option>
                                        <?php 
                                        $hari_list = ['senin'=>'Senin','selasa'=>'Selasa','rabu'=>'Rabu','kamis'=>'Kamis','jumat'=>'Jumat','sabtu'=>'Sabtu','minggu'=>'Minggu'];
                                        foreach($hari_list as $k=>$v): 
                                        ?>
                                        <option value="<?php echo $k; ?>" <?php echo (isset($j) && $j->hari==$k)?'selected':''; ?>><?php echo $v; ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Waktu Mulai</label>
                                    <input type="time" name="waktu_mulai" class="form-control" 
                                           value="<?php echo isset($j) ? $j->waktu_mulai : ''; ?>">
                                </div>
                            </div>
                        </div>

                        <div id="fieldTanggalTentu" class="jenis-fields" style="display:none;">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Tanggal <span class="text-danger">*</span></label>
                                    <input type="date" name="tanggal_mulai" class="form-control" 
                                           value="<?php echo isset($j) ? $j->tanggal_mulai : ''; ?>">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Waktu Mulai</label>
                                    <input type="time" name="waktu_mulai" class="form-control" 
                                           value="<?php echo isset($j) ? $j->waktu_mulai : ''; ?>">
                                </div>
                            </div>
                        </div>

                        <div id="fieldRange" class="jenis-fields" style="display:none;">
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Tanggal Mulai <span class="text-danger">*</span></label>
                                    <input type="date" name="tanggal_mulai" class="form-control" 
                                           value="<?php echo isset($j) ? $j->tanggal_mulai : ''; ?>">
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Tanggal Selesai <span class="text-danger">*</span></label>
                                    <input type="date" name="tanggal_selesai" class="form-control" 
                                           value="<?php echo isset($j) ? $j->tanggal_selesai : ''; ?>">
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Waktu Mulai</label>
                                    <input type="time" name="waktu_mulai" class="form-control" 
                                           value="<?php echo isset($j) ? $j->waktu_mulai : ''; ?>">
                                </div>
                            </div>
                        </div>

                        <!-- Lokasi & PJ -->
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Lokasi</label>
                                <input type="text" name="lokasi" class="form-control" 
                                       value="<?php echo isset($j) ? htmlspecialchars($j->lokasi) : ''; ?>"
                                       placeholder="Contoh: Pos RT, Balai Warga, dll">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Penanggung Jawab</label>
                                <select name="penanggung_jawab_id" class="form-select">
                                    <option value="">Pilih Warga</option>
                                    <?php foreach($warga as $w): ?>
                                    <option value="<?php echo $w->id; ?>" <?php echo (isset($j) && $j->penanggung_jawab_id==$w->id)?'selected':''; ?>>
                                        <?php echo htmlspecialchars($w->nama_lengkap); ?>
                                    </option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                        </div>

                        <!-- Deskripsi -->
                        <div class="mb-3">
                            <label class="form-label">Deskripsi</label>
                            <textarea name="deskripsi" class="form-control" rows="3" placeholder="Deskripsi kegiatan..."><?php echo isset($j) ? htmlspecialchars($j->deskripsi) : ''; ?></textarea>
                        </div>

                        <?php if(isset($j)): ?>
                        <div class="mb-3">
                            <label class="form-label">Status</label>
                            <select name="status" class="form-select">
                                <option value="aktif" <?php echo ($j->status=='aktif')?'selected':''; ?>>Aktif</option>
                                <option value="nonaktif" <?php echo ($j->status=='nonaktif')?'selected':''; ?>>Nonaktif</option>
                                <option value="selesai" <?php echo ($j->status=='selesai')?'selected':''; ?>>Selesai</option>
                            </select>
                        </div>
                        <?php endif; ?>

                        <!-- Kelompok/Petugas -->
                        <div class="section-title mt-4">
                            <i class="bi bi-people"></i>
                            Kelompok / Petugas
                        </div>
                        
                        <div id="petugasContainer">
                            <?php 
                            if(isset($petugas) && !empty($petugas)): 
                                foreach($petugas as $i => $p):
                            ?>
                            <div class="petugas-row">
                                <div class="row g-2">
                                    <div class="col-md-5">
                                        <label class="form-label small">Nama Warga</label>
                                        <select name="petugas[]" class="form-select">
                                            <option value="">Pilih Warga</option>
                                            <?php foreach($warga as $w): ?>
                                            <option value="<?php echo $w->id; ?>" <?php echo ($p->warga_id==$w->id)?'selected':''; ?>>
                                                <?php echo htmlspecialchars($w->nama_lengkap); ?>
                                            </option>
                                            <?php endforeach; ?>
                                        </select>
                                    </div>
                                    <div class="col-md-5">
                                        <label class="form-label small">Kelompok (Opsional)</label>
                                        <input type="text" name="kelompok[]" class="form-control" 
                                               value="<?php echo htmlspecialchars($p->kelompok); ?>"
                                               placeholder="Contoh: Kelompok 1, Shift A">
                                    </div>
                                    <div class="col-md-2 d-flex align-items-end">
                                        <button type="button" class="btn btn-outline-danger w-100" onclick="hapusPetugas(this)">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <?php 
                                endforeach;
                            endif; 
                            ?>
                        </div>

                        <button type="button" class="btn btn-outline-primary w-100 mt-2" onclick="tambahPetugas()">
                            <i class="bi bi-plus-circle me-1"></i>Tambah Petugas/Kelompok
                        </button>

                        <!-- Submit -->
                        <div class="d-flex gap-2 mt-4">
                            <a href="<?php echo base_url('jadwal'); ?>" class="btn btn-outline-secondary flex-fill">
                                <i class="bi bi-x-circle me-1"></i>Batal
                            </a>
                            <button type="submit" class="btn btn-kirim flex-fill">
                                <i class="bi bi-check-circle me-1"></i><?php echo isset($j) ? 'Update' : 'Simpan'; ?>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function toggleJenisJadwal() {
    const jenis = document.getElementById('jenisJadwal').value;
    
    // Sembunyikan semua
    document.querySelectorAll('.jenis-fields').forEach(el => el.style.display = 'none');
    
    // Tampilkan yang sesuai
    if (jenis === 'harian') {
        document.getElementById('fieldHarian').style.display = 'block';
    } else if (jenis === 'mingguan') {
        document.getElementById('fieldMingguan').style.display = 'block';
    } else if (jenis === 'tanggal_tentu') {
        document.getElementById('fieldTanggalTentu').style.display = 'block';
    } else if (jenis === 'range_tanggal') {
        document.getElementById('fieldRange').style.display = 'block';
    }
}

function tambahPetugas() {
    const container = document.getElementById('petugasContainer');
    const row = document.createElement('div');
    row.className = 'petugas-row';
    row.innerHTML = `
        <div class="row g-2">
            <div class="col-md-5">
                <label class="form-label small">Nama Warga</label>
                <select name="petugas[]" class="form-select">
                    <option value="">Pilih Warga</option>
                    <?php foreach($warga as $w): ?>
                    <option value="<?php echo $w->id; ?>"><?php echo htmlspecialchars($w->nama_lengkap); ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="col-md-5">
                <label class="form-label small">Kelompok (Opsional)</label>
                <input type="text" name="kelompok[]" class="form-control" placeholder="Contoh: Kelompok 1, Shift A">
            </div>
            <div class="col-md-2 d-flex align-items-end">
                <button type="button" class="btn btn-outline-danger w-100" onclick="hapusPetugas(this)">
                    <i class="bi bi-trash"></i>
                </button>
            </div>
        </div>
    `;
    container.appendChild(row);
}

function hapusPetugas(btn) {
    btn.closest('.petugas-row').remove();
}

// Init
document.addEventListener('DOMContentLoaded', function() {
    toggleJenisJadwal();
});
</script>