<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-0">Detail Iuran</h4>
            <small class="text-muted">Informasi lengkap pembayaran iuran</small>
        </div>
        <a href="<?php echo base_url('iuran'); ?>" class="btn btn-secondary">
            <i class="bi bi-arrow-left me-2"></i>Kembali
        </a>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <!-- Card Info Iuran -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-primary text-white">
                    <h6 class="mb-0">
                        <i class="bi bi-info-circle me-2"></i>Informasi Iuran
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <small class="text-muted">ID Transaksi</small>
                            <p class="mb-0 fw-bold">#<?php echo str_pad($iuran->id, 6, '0', STR_PAD_LEFT); ?></p>
                        </div>
                        <div class="col-md-4">
                            <small class="text-muted">Jenis Iuran</small>
                            <p class="mb-0 fw-bold"><?php echo $iuran->nama_iuran; ?></p>
                        </div>
                        <div class="col-md-4">
                            <small class="text-muted">Periode</small>
                            <p class="mb-0 fw-bold">
                                <?php 
                                $bulan = ['','Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];
                                echo $bulan[(int)$iuran->periode_bulan] . ' ' . $iuran->periode_tahun; 
                                ?>
                            </p>
                        </div>
                    </div>

                    <hr>

                    <?php if(is_admin()): ?>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <small class="text-muted">NIK</small>
                            <p class="mb-0"><?php echo $iuran->nik; ?></p>
                        </div>
                        <div class="col-md-6">
                            <small class="text-muted">Nama Lengkap</small>
                            <p class="mb-0"><?php echo $iuran->nama_lengkap; ?></p>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <small class="text-muted">No. Rumah</small>
                            <p class="mb-0"><?php echo isset($iuran->nomor_rumah) ? $iuran->nomor_rumah : '-'; ?></p>
                        </div>
                        <div class="col-md-6">
                            <small class="text-muted">No. Telepon</small>
                            <p class="mb-0"><?php echo isset($iuran->telepon) ? $iuran->telepon : '-'; ?></p>
                        </div>
                    </div>

                    <hr>
                    <?php endif; ?>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <small class="text-muted">Nominal Iuran</small>
                            <h4 class="mb-0 text-primary">Rp <?php echo number_format($iuran->nominal, 0, ',', '.'); ?></h4>
                        </div>
                        <div class="col-md-6">
                            <small class="text-muted">Status Pembayaran</small>
                            <p class="mb-0">
                                <?php 
                                $status = isset($iuran->status_bayar) ? $iuran->status_bayar : $iuran->status;
                                if($status == 'lunas'): 
                                ?>
                                    <span class="badge bg-success fs-6">
                                        <i class="bi bi-check-circle me-1"></i>Lunas
                                    </span>
                                <?php elseif($status == 'menunggu_verifikasi'): ?>
                                    <span class="badge bg-warning text-dark fs-6">
                                        <i class="bi bi-clock-history me-1"></i>Menunggu Verifikasi
                                    </span>
                                <?php else: ?>
                                    <span class="badge bg-danger fs-6">
                                        <i class="bi bi-exclamation-triangle me-1"></i>Belum Dibayar
                                    </span>
                                <?php endif; ?>
                            </p>
                        </div>
                    </div>

                    <?php if(isset($iuran->tanggal_bayar) && $iuran->tanggal_bayar): ?>
                    <hr>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <small class="text-muted">Tanggal Bayar</small>
                            <p class="mb-0">
                                <i class="bi bi-calendar-event me-2"></i>
                                <?php echo date('d F Y, H:i', strtotime($iuran->tanggal_bayar)); ?>
                            </p>
                        </div>
                        <div class="col-md-6">
                            <small class="text-muted">Metode Pembayaran</small>
                            <p class="mb-0">
                                <i class="bi bi-wallet2 me-2"></i>
                                <?php echo isset($iuran->metode_bayar) ? ucfirst($iuran->metode_bayar) : 'Transfer Bank'; ?>
                            </p>
                        </div>
                    </div>
                    <?php endif; ?>

                    <?php if(isset($iuran->tanggal_verifikasi) && $iuran->tanggal_verifikasi): ?>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <small class="text-muted">Tanggal Verifikasi</small>
                            <p class="mb-0">
                                <i class="bi bi-check-circle me-2"></i>
                                <?php echo date('d F Y, H:i', strtotime($iuran->tanggal_verifikasi)); ?>
                            </p>
                        </div>
                        <div class="col-md-6">
                            <small class="text-muted">Diverifikasi Oleh</small>
                            <p class="mb-0">
                                <i class="bi bi-person-check me-2"></i>
                                <?php echo isset($iuran->nama_verifikator) ? $iuran->nama_verifikator : 'Admin'; ?>
                            </p>
                        </div>
                    </div>
                    <?php endif; ?>

                    <?php if(isset($iuran->catatan) && $iuran->catatan): ?>
                    <hr>
                    <div class="row">
                        <div class="col-12">
                            <small class="text-muted">Catatan</small>
                            <p class="mb-0 text-muted fst-italic"><?php echo $iuran->catatan; ?></p>
                        </div>
                    </div>
                    <?php endif; ?>
                </div>
            </div>

            <!-- Bukti Pembayaran -->
            <?php if(isset($iuran->bukti_bayar) && $iuran->bukti_bayar): ?>
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-info text-white">
                    <h6 class="mb-0">
                        <i class="bi bi-image me-2"></i>Bukti Pembayaran
                    </h6>
                </div>
                <div class="card-body text-center">
                    <img src="<?php echo base_url('uploads/bukti_iuran/'.$iuran->bukti_bayar); ?>" 
                         alt="Bukti Pembayaran" 
                         class="img-fluid rounded shadow-sm"
                         style="max-height: 400px; cursor: pointer;"
                         data-bs-toggle="modal" 
                         data-bs-target="#modalBukti">
                    <p class="text-muted mt-3 mb-0">
                        <small><i class="bi bi-info-circle me-1"></i>Klik gambar untuk memperbesar</small>
                    </p>
                </div>
            </div>
            <?php endif; ?>
        </div>

        <!-- Sidebar Kanan -->
        <div class="col-lg-4">
            <!-- Quick Actions -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white">
                    <h6 class="mb-0">
                        <i class="bi bi-lightning me-2"></i>Aksi Cepat
                    </h6>
                </div>
                <div class="card-body">
                    <?php if($status == 'pending'): ?>
                        <a href="<?php echo base_url('iuran/bayar/'.$iuran->id); ?>" 
                           class="btn btn-success w-100 mb-2">
                            <i class="bi bi-credit-card me-2"></i>Bayar Sekarang
                        </a>
                    <?php elseif($status == 'menunggu_verifikasi' && is_admin()): ?>
                        <a href="<?php echo base_url('iuran/verifikasi/'.$iuran->id); ?>" 
                           class="btn btn-warning w-100 mb-2">
                            <i class="bi bi-check-square me-2"></i>Verifikasi Pembayaran
                        </a>
                    <?php endif; ?>

                    <?php if(is_admin()): ?>
                        <a href="<?php echo base_url('iuran/edit/'.$iuran->id); ?>" 
                           class="btn btn-primary w-100 mb-2">
                            <i class="bi bi-pencil me-2"></i>Edit Data
                        </a>
                    <?php endif; ?>

                    <a href="<?php echo base_url('iuran/cetak/'.$iuran->id); ?>" 
                       class="btn btn-outline-primary w-100 mb-2" 
                       target="_blank">
                        <i class="bi bi-printer me-2"></i>Cetak Bukti
                    </a>

                    <a href="<?php echo base_url('iuran'); ?>" 
                       class="btn btn-outline-secondary w-100">
                        <i class="bi bi-arrow-left me-2"></i>Kembali ke Daftar
                    </a>
                </div>
            </div>

            <!-- Status Timeline -->
            <?php if($status != 'pending'): ?>
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white">
                    <h6 class="mb-0">
                        <i class="bi bi-clock-history me-2"></i>Riwayat Status
                    </h6>
                </div>
                <div class="card-body">
                    <div class="timeline">
                        <?php if(isset($iuran->tanggal_verifikasi) && $iuran->tanggal_verifikasi): ?>
                        <div class="timeline-item">
                            <div class="timeline-icon bg-success">
                                <i class="bi bi-check-circle"></i>
                            </div>
                            <div class="timeline-content">
                                <h6 class="mb-1">Pembayaran Diverifikasi</h6>
                                <small class="text-muted">
                                    <?php echo date('d F Y, H:i', strtotime($iuran->tanggal_verifikasi)); ?>
                                </small>
                            </div>
                        </div>
                        <?php endif; ?>

                        <?php if(isset($iuran->tanggal_bayar) && $iuran->tanggal_bayar): ?>
                        <div class="timeline-item">
                            <div class="timeline-icon bg-warning">
                                <i class="bi bi-upload"></i>
                            </div>
                            <div class="timeline-content">
                                <h6 class="mb-1">Bukti Pembayaran Diupload</h6>
                                <small class="text-muted">
                                    <?php echo date('d F Y, H:i', strtotime($iuran->tanggal_bayar)); ?>
                                </small>
                            </div>
                        </div>
                        <?php endif; ?>

                        <div class="timeline-item">
                            <div class="timeline-icon bg-primary">
                                <i class="bi bi-file-earmark-plus"></i>
                            </div>
                            <div class="timeline-content">
                                <h6 class="mb-1">Tagihan Dibuat</h6>
                                <small class="text-muted">
                                    <?php echo isset($iuran->created_at) ? date('d F Y, H:i', strtotime($iuran->created_at)) : '-'; ?>
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <?php endif; ?>
        </div>
    </div>
</div>

<!-- Modal untuk memperbesar gambar -->
<?php if(isset($iuran->bukti_bayar) && $iuran->bukti_bayar): ?>
<div class="modal fade" id="modalBukti" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Bukti Pembayaran</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center">
                <img src="<?php echo base_url('uploads/bukti_iuran/'.$iuran->bukti_bayar); ?>" 
                     alt="Bukti Pembayaran" 
                     class="img-fluid">
            </div>
        </div>
    </div>
</div>
<?php endif; ?>

<!-- Custom CSS untuk Timeline -->
<style>
.timeline {
    position: relative;
    padding-left: 40px;
}

.timeline-item {
    position: relative;
    padding-bottom: 25px;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-item:before {
    content: '';
    position: absolute;
    left: -29px;
    top: 30px;
    bottom: -10px;
    width: 2px;
    background: #dee2e6;
}

.timeline-item:last-child:before {
    display: none;
}

.timeline-icon {
    position: absolute;
    left: -40px;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.timeline-content h6 {
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.timeline-content small {
    font-size: 0.75rem;
}
</style>