<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>

<style>
.detail-jadwal-header {
    background: linear-gradient(135deg, #0d9488, #14b8a6);
    border-radius: 16px;
    padding: 24px;
    color: white;
    margin-bottom: 20px;
}
.kelompok-card {
    border-radius: 12px;
    border: 1.5px solid #e5e7eb;
    overflow: hidden;
    margin-bottom: 16px;
}
.kelompok-header {
    background: #f0fdfa;
    padding: 12px 16px;
    border-bottom: 1px solid #ccfbf1;
    font-weight: 700;
    color: #0f766e;
}
.kelompok-body {
    padding: 16px;
}
.petugas-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
}
.petugas-item:last-child {
    border-bottom: none;
}
.petugas-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #0d9488;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}
.info-jadwal {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.info-jadwal i {
    width: 20px;
    color: #0d9488;
    margin-top: 2px;
}
</style>

<div>
    <!-- Header -->
    <div class="ar-page-header">
        <div class="ar-header-left">
            <h5>
                <span class="hi"><i class="bi bi-calendar-check"></i></span>
                Detail 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>Detail</span>
            </div>
        </div>
    </div>

    <!-- Header Info -->
    <div class="detail-jadwal-header">
        <div class="d-flex justify-content-between align-items-start">
            <div>
                <span class="badge bg-white text-dark mb-2">
                    <?php 
                    $kategori_labels = array(
                        'ronda' => 'Ronda', 
                        'kerja_bakti' => 'Kerja Bakti',
                        'poskamling' => 'Poskamling', 
                        'arisan' => 'Arisan',
                        'rapat' => 'Rapat', 
                        'lainnya' => 'Lainnya'
                    );
                    echo isset($kategori_labels[$j->kategori]) ? $kategori_labels[$j->kategori] : $j->kategori;
                    ?>
                </span>
                <h4 class="mb-2"><?php echo htmlspecialchars($j->nama_kegiatan); ?></h4>
                <?php if(!empty($j->deskripsi)): ?>
                <p class="mb-0 opacity-75"><?php echo nl2br(htmlspecialchars($j->deskripsi)); ?></p>
                <?php endif; ?>
            </div>
            <?php if(can('jadwal', 'edit') || can('jadwal', 'delete')): ?>
            <div class="dropdown">
                <button class="btn btn-light btn-sm dropdown-toggle" data-bs-toggle="dropdown">
                    <i class="bi bi-three-dots-vertical"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    <?php if(can('jadwal', 'edit')): ?>
                    <li><a class="dropdown-item" href="<?php echo base_url('jadwal/edit/'.$j->id); ?>"><i class="bi bi-pencil me-2"></i>Edit</a></li>
                    <?php endif; ?>
                    <?php if(can('jadwal', 'delete')): ?>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item text-danger" href="<?php echo base_url('jadwal/hapus/'.$j->id); ?>" onclick="return confirm('Yakin hapus?')"><i class="bi bi-trash me-2"></i>Hapus</a></li>
                    <?php endif; ?>
                </ul>
            </div>
            <?php endif; ?>
        </div>
    </div>

    <div class="row">
        <!-- Info Utama -->
        <div class="col-lg-4 mb-4">
            <div class="section-card h-100">
                <div class="section-card-header">
                    <div class="title"><i class="bi bi-info-circle"></i> Informasi Jadwal</div>
                </div>
                <div class="p-3">
                    <?php 
                    $hari_labels = array(
                        'senin' => 'Senin',
                        'selasa' => 'Selasa', 
                        'rabu' => 'Rabu',
                        'kamis' => 'Kamis', 
                        'jumat' => 'Jumat', 
                        'sabtu' => 'Sabtu', 
                        'minggu' => 'Minggu'
                    );
                    $jenis_labels = array(
                        'harian' => 'Setiap Hari', 
                        'mingguan' => 'Mingguan',
                        'bulanan' => 'Bulanan', 
                        'tanggal_tentu' => 'Tanggal Tertentu',
                        'range_tanggal' => 'Rentang Tanggal'
                    );
                    ?>
                    
                    <div class="info-jadwal mb-3">
                        <i class="bi bi-tag"></i>
                        <div>
                            <small class="text-muted d-block">Jenis Jadwal</small>
                            <strong><?php echo isset($jenis_labels[$j->jenis_jadwal]) ? $jenis_labels[$j->jenis_jadwal] : $j->jenis_jadwal; ?></strong>
                        </div>
                    </div>

                    <?php if($j->jenis_jadwal == 'harian'): ?>
                        <div class="info-jadwal mb-3">
                            <i class="bi bi-clock"></i>
                            <div>
                                <small class="text-muted d-block">Waktu</small>
                                <strong>
                                    <?php echo $j->waktu_mulai ? date('H:i', strtotime($j->waktu_mulai)) : '-'; ?>
                                    <?php echo $j->waktu_selesai ? ' - ' . date('H:i', strtotime($j->waktu_selesai)) : ''; ?>
                                </strong>
                            </div>
                        </div>
                    <?php elseif($j->jenis_jadwal == 'mingguan'): ?>
                        <div class="info-jadwal mb-3">
                            <i class="bi bi-calendar-week"></i>
                            <div>
                                <small class="text-muted d-block">Hari</small>
                                <strong>Setiap <?php echo isset($hari_labels[$j->hari]) ? $hari_labels[$j->hari] : $j->hari; ?></strong>
                            </div>
                        </div>
                        <div class="info-jadwal mb-3">
                            <i class="bi bi-clock"></i>
                            <div>
                                <small class="text-muted d-block">Waktu</small>
                                <strong><?php echo $j->waktu_mulai ? date('H:i', strtotime($j->waktu_mulai)) : '-'; ?></strong>
                            </div>
                        </div>
                    <?php elseif($j->jenis_jadwal == 'tanggal_tentu'): ?>
                        <div class="info-jadwal mb-3">
                            <i class="bi bi-calendar-event"></i>
                            <div>
                                <small class="text-muted d-block">Tanggal</small>
                                <strong><?php echo $j->tanggal_mulai ? date('d F Y', strtotime($j->tanggal_mulai)) : '-'; ?></strong>
                            </div>
                        </div>
                        <div class="info-jadwal mb-3">
                            <i class="bi bi-clock"></i>
                            <div>
                                <small class="text-muted d-block">Waktu</small>
                                <strong><?php echo $j->waktu_mulai ? date('H:i', strtotime($j->waktu_mulai)) : '-'; ?></strong>
                            </div>
                        </div>
                    <?php elseif($j->jenis_jadwal == 'range_tanggal'): ?>
                        <div class="info-jadwal mb-3">
                            <i class="bi bi-calendar-range"></i>
                            <div>
                                <small class="text-muted d-block">Periode</small>
                                <strong>
                                    <?php echo $j->tanggal_mulai ? date('d M Y', strtotime($j->tanggal_mulai)) : '-'; ?> 
                                    s/d 
                                    <?php echo $j->tanggal_selesai ? date('d M Y', strtotime($j->tanggal_selesai)) : '-'; ?>
                                </strong>
                            </div>
                        </div>
                        <div class="info-jadwal mb-3">
                            <i class="bi bi-clock"></i>
                            <div>
                                <small class="text-muted d-block">Waktu</small>
                                <strong><?php echo $j->waktu_mulai ? date('H:i', strtotime($j->waktu_mulai)) : '-'; ?></strong>
                            </div>
                        </div>
                    <?php endif; ?>

                    <?php if($j->lokasi): ?>
                    <div class="info-jadwal mb-3">
                        <i class="bi bi-geo-alt"></i>
                        <div>
                            <small class="text-muted d-block">Lokasi</small>
                            <strong><?php echo htmlspecialchars($j->lokasi); ?></strong>
                        </div>
                    </div>
                    <?php endif; ?>

                    <?php if($j->penanggung_jawab): ?>
                    <div class="info-jadwal mb-3">
                        <i class="bi bi-person-badge"></i>
                        <div>
                            <small class="text-muted d-block">Penanggung Jawab</small>
                            <strong><?php echo htmlspecialchars($j->penanggung_jawab); ?></strong>
                        </div>
                    </div>
                    <?php endif; ?>

                    <div class="info-jadwal">
                        <i class="bi bi-activity"></i>
                        <div>
                            <small class="text-muted d-block">Status</small>
                            <?php if($j->status == 'aktif'): ?>
                                <span class="badge bg-success">Aktif</span>
                            <?php elseif($j->status == 'nonaktif'): ?>
                                <span class="badge bg-secondary">Nonaktif</span>
                            <?php else: ?>
                                <span class="badge bg-info">Selesai</span>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Kelompok/Petugas -->
        <div class="col-lg-8">
            <div class="section-card">
                <div class="section-card-header">
                    <div class="title"><i class="bi bi-people"></i> Kelompok & Petugas</div>
                    <span class="badge bg-secondary"><?php echo count($petugas); ?> orang</span>
                </div>
                
                <?php if(!empty($kelompok)): ?>
                    <?php foreach($kelompok as $nama_kelompok => $anggota): ?>
                    <div class="kelompok-card mb-3 mx-3">
                        <div class="kelompok-header d-flex justify-content-between align-items-center">
                            <span><i class="bi bi-collection me-2"></i><?php echo htmlspecialchars($nama_kelompok); ?></span>
                            <span class="badge bg-white text-dark"><?php echo count($anggota); ?> orang</span>
                        </div>
                        <div class="kelompok-body">
                            <?php foreach($anggota as $p): ?>
                            <div class="petugas-item">
                                <div class="petugas-avatar">
                                    <?php echo strtoupper(substr($p->nama_lengkap, 0, 1)); ?>
                                </div>
                                <div class="flex-fill">
                                    <div class="fw-semibold"><?php echo htmlspecialchars($p->nama_lengkap); ?></div>
                                    <small class="text-muted">NIK: <?php echo htmlspecialchars($p->nik ?? '-'); ?></small>
                                </div>
                                <?php if(!empty($p->no_hp)): ?>
                                <a href="https://wa.me/<?php echo preg_replace('/[^0-9]/', '', $p->no_hp); ?>" class="btn btn-sm btn-success" target="_blank" title="Hubungi via WhatsApp">
                                    <i class="bi bi-whatsapp"></i>
                                </a>
                                <?php endif; ?>
                            </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                    <?php endforeach; ?>
                <?php elseif(!empty($petugas)): ?>
                    <div class="kelompok-card mb-3 mx-3">
                        <div class="kelompok-header">
                            <i class="bi bi-people me-2"></i>Daftar Petugas
                        </div>
                        <div class="kelompok-body">
                            <?php foreach($petugas as $p): ?>
                            <div class="petugas-item">
                                <div class="petugas-avatar">
                                    <?php echo strtoupper(substr($p->nama_lengkap, 0, 1)); ?>
                                </div>
                                <div class="flex-fill">
                                    <div class="fw-semibold"><?php echo htmlspecialchars($p->nama_lengkap); ?></div>
                                    <small class="text-muted">NIK: <?php echo htmlspecialchars($p->nik ?? '-'); ?></small>
                                </div>
                                <?php if(!empty($p->no_hp)): ?>
                                <a href="https://wa.me/<?php echo preg_replace('/[^0-9]/', '', $p->no_hp); ?>" class="btn btn-sm btn-success" target="_blank" title="Hubungi via WhatsApp">
                                    <i class="bi bi-whatsapp"></i>
                                </a>
                                <?php endif; ?>
                            </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                <?php else: ?>
                    <div class="text-center py-5 text-muted">
                        <i class="bi bi-people fs-1 d-block mb-3 opacity-50"></i>
                        <div class="fw-semibold mb-2">Belum ada petugas yang ditugaskan</div>
                        <small>Admin dapat menambahkan petugas melalui menu Edit Jadwal</small>
                    </div>
                <?php endif; ?>
            </div>

            <!-- Info Tambahan untuk Warga -->
            <?php if(is_warga()): ?>
            <div class="alert alert-info d-flex align-items-start gap-3 mt-3" style="border-radius: 12px;">
                <i class="bi bi-info-circle-fill flex-shrink-0 mt-1"></i>
                <div>
                    <strong>Informasi:</strong> Jadwal ini dikelola oleh admin RT. 
                    Jika ada perubahan atau pertanyaan, silakan hubungi penanggung jawab atau ketua RT.
                </div>
            </div>
            <?php endif; ?>
        </div>
    </div>

    <!-- Tombol Kembali -->
    <div class="mt-4 d-flex gap-2">
        <a href="<?php echo base_url('jadwal'); ?>" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-2"></i>Kembali ke Daftar Jadwal
        </a>
        <?php if(can('jadwal', 'edit')): ?>
        <a href="<?php echo base_url('jadwal/edit/'.$j->id); ?>" class="btn btn-warning text-dark">
            <i class="bi bi-pencil me-2"></i>Edit Jadwal
        </a>
        <?php endif; ?>
    </div>
</div>