<?= $this->extend('layout/main') ?>

<?= $this->section('content') ?>

<div class="card-title">Dashboard Overview</div>

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 10px; margin-bottom: 30px;">
    <!-- Total Ruang -->
    <div style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); color: black; padding: 15px 20px; border-radius: 10px; position: relative; overflow: hidden; font-family: sans-serif; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
        <div style="position: relative; z-index: 2;">
            <div style="font-size: 3rem; font-weight: bold; margin-bottom: 2px;"><?= $total_ruangan ?></div>
            <div style="font-size: 2rem; font-weight: bold;">Total Ruang</div>
        </div>
        <i class="fas fa-door-open" style="position: absolute; right: -5px; bottom: -10px; font-size: 5rem; opacity: 0.15; z-index: 1; color: black;"></i>
    </div>
    
    <!-- Total Peminjaman -->
    <div style="background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%); color: black; padding: 15px 20px; border-radius: 10px; position: relative; overflow: hidden; font-family: sans-serif; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
        <div style="position: relative; z-index: 2;">
            <div style="font-size: 3rem; font-weight: bold; margin-bottom: 2px;"><?= $total_peminjaman ?></div>
            <div style="font-size: 1.5rem; font-weight: bold;">Total Peminjaman</div>
            <div style="font-size: 1.1rem; margin-top: 4px;">Pemasukan : <?= number_format($total_peminjaman_biaya, 0, ',', '.') ?></div>
        </div>
        <i class="fas fa-handshake" style="position: absolute; right: -5px; bottom: -10px; font-size: 5rem; opacity: 0.15; z-index: 1; color: black;"></i>
    </div>
    
    <!-- Total Perbaikan -->
    <div style="background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); color: black; padding: 15px 20px; border-radius: 10px; position: relative; overflow: hidden; font-family: sans-serif; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
        <div style="position: relative; z-index: 2;">
            <div style="font-size: 3rem; font-weight: bold; margin-bottom: 2px;"><?= $total_perbaikan ?></div>
            <div style="font-size: 1.5rem; font-weight: bold;">Total Perbaikan</div>
            <div style="font-size: 1.1rem; margin-top: 4px;">Pengeluaran : <?= number_format($total_perbaikan_biaya, 0, ',', '.') ?></div>
        </div>
        <i class="fas fa-tools" style="position: absolute; right: -5px; bottom: -10px; font-size: 5rem; opacity: 0.15; z-index: 1; color: black;"></i>
    </div>
    
    <!-- Total Pengajuan -->
    <div style="background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); color: black; padding: 15px 20px; border-radius: 10px; position: relative; overflow: hidden; font-family: sans-serif; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
        <div style="position: relative; z-index: 2;">
            <div style="font-size: 3rem; font-weight: bold; margin-bottom: 2px;"><?= $total_pengajuan ?></div>
            <div style="font-size: 1.5rem; font-weight: bold;">Total Pengajuan</div>
            <div style="font-size: 1.1rem; margin-top: 4px;">Pengeluaran : <?= number_format($total_pengajuan_biaya, 0, ',', '.') ?></div>
        </div>
        <i class="fas fa-file-invoice" style="position: absolute; right: -5px; bottom: -10px; font-size: 5rem; opacity: 0.15; z-index: 1; color: black;"></i>
    </div>
    
    <!-- Total Penghapusan -->
    <div style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); color: black; padding: 15px 20px; border-radius: 10px; position: relative; overflow: hidden; font-family: sans-serif; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
        <div style="position: relative; z-index: 2;">
            <div style="font-size: 3rem; font-weight: bold; margin-bottom: 2px;"><?= $total_penghapusan ?></div>
            <div style="font-size: 1.5rem; font-weight: bold;">Total Penghapusan</div>
            <div style="font-size: 1.1rem; margin-top: 4px;">Pemasukan : <?= number_format($total_penghapusan_biaya, 0, ',', '.') ?></div>
        </div>
        <i class="fas fa-trash-alt" style="position: absolute; right: -5px; bottom: -10px; font-size: 5rem; opacity: 0.15; z-index: 1; color: black;"></i>
    </div>
</div>

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; margin-top: 20px; margin-bottom: 20px;">
    <!-- Widget Barang -->
    <div style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: black; padding: 20px; border-radius: 15px; position: relative; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.1); font-family: sans-serif; font-size: 1.3rem; line-height: 1.6;">
        <div style="position: relative; z-index: 2;">
            <div style="font-weight: bold; text-transform: uppercase; margin-bottom: 8px; font-size: 2rem;">Aset Barang</div>
            <div>Total Barang : <?= $total_barang ?></div>
            <div>Nilai Awal : <?= number_format($total_nilai_barang_awal, 0, ',', '.') ?></div>
            <div>Penyusutan : - <?= number_format($total_nilai_penyusutan_barang, 0, ',', '.') ?></div>
            <div>Nilai Skrg : <?= number_format($total_nilai_sekarang_barang, 0, ',', '.') ?></div>
        </div>
        <i class="fas fa-boxes" style="position: absolute; right: -10px; bottom: -10px; font-size: 6.5rem; opacity: 0.15; z-index: 1; color: black;"></i>
    </div>
    
    <!-- Widget Buku -->
    <div style="background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); color: black; padding: 20px; border-radius: 15px; position: relative; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.1); font-family: sans-serif; font-size: 1.3rem; line-height: 1.6;">
        <div style="position: relative; z-index: 2;">
            <div style="font-weight: bold; text-transform: uppercase; margin-bottom: 8px; font-size: 2rem;">Aset Buku</div>
            <div>Total Buku : <?= $total_buku ?></div>
            <div>Nilai Awal : <?= number_format($total_nilai_buku_awal, 0, ',', '.') ?></div>
            <div>Penyusutan : - <?= number_format($total_nilai_penyusutan_buku, 0, ',', '.') ?></div>
            <div>Nilai Skrg : <?= number_format($total_nilai_sekarang_buku, 0, ',', '.') ?></div>
        </div>
        <i class="fas fa-book" style="position: absolute; right: -10px; bottom: -10px; font-size: 6.5rem; opacity: 0.15; z-index: 1; color: black;"></i>
    </div>

    <!-- Widget Tanah -->
    <div style="background: linear-gradient(135deg, #4ade80 0%, #2dd4bf 100%); color: #0f172a; padding: 25px; border-radius: 12px; position: relative; overflow: hidden; box-shadow: 0 4px 15px rgba(45,212,191,0.2); font-family: sans-serif; line-height: 1.6;">
        <div style="position: relative; z-index: 2;">
            <div style="font-weight: 800; font-size: 1.6rem; letter-spacing: 0.5px; margin-bottom: 20px; text-transform: uppercase;">ASET TANAH</div>
            <div style="font-size: 1.4rem; font-weight: 500; display: flex; flex-direction: column; gap: 8px;">
                <div>Nilai Awal : <?= number_format($total_nilai_tanah_awal, 0, ',', '.') ?></div>
                <div>Kenaikan : + <?= number_format($total_nilai_kenaikan_tanah, 0, ',', '.') ?></div>
                <div>Nilai Skrg : <?= number_format($total_nilai_sekarang_tanah, 0, ',', '.') ?></div>
            </div>
        </div>
        <i class="fas fa-map" style="position: absolute; right: -20px; bottom: -20px; font-size: 6rem; opacity: 0.15; z-index: 1; color: #000; transform: rotate(-15deg);"></i>
    </div>
    
    <!-- Widget Bangunan -->
    <div style="background: linear-gradient(135deg, #a78bfa 0%, #e879f9 100%); color: #0f172a; padding: 25px; border-radius: 12px; position: relative; overflow: hidden; box-shadow: 0 4px 15px rgba(167,139,250,0.2); font-family: sans-serif; line-height: 1.6;">
        <div style="position: relative; z-index: 2;">
            <div style="font-weight: 800; font-size: 1.6rem; letter-spacing: 0.5px; margin-bottom: 20px; text-transform: uppercase;">ASET BANGUNAN</div>
            <div style="font-size: 1.4rem; font-weight: 500; display: flex; flex-direction: column; gap: 8px;">
                <div>Nilai Awal : <?= number_format($total_nilai_bangunan_awal, 0, ',', '.') ?></div>
                <div>Penyusutan : - <?= number_format($total_nilai_penyusutan_bangunan, 0, ',', '.') ?></div>
                <div>Nilai Skrg : <?= number_format($total_nilai_sekarang_bangunan, 0, ',', '.') ?></div>
            </div>
        </div>
        <i class="fas fa-building" style="position: absolute; right: -15px; bottom: -15px; font-size: 6rem; opacity: 0.15; z-index: 1; color: #000; transform: rotate(-5deg);"></i>
    </div>
</div>

<div class="glass-card">
    <h3 class="card-title" style="text-align: center; font-size: 2rem; margin-bottom: 20px;">Manajemen Aset</h3>
    <canvas id="manajemenAsetChart" height="100"></canvas>
</div>

<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
    const chartDataObj = <?= $chartData ?>;
    const ctx = document.getElementById('manajemenAsetChart').getContext('2d');
    
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: chartDataObj.labels,
            datasets: [
                {
                    label: 'Peminjaman',
                    data: chartDataObj.peminjaman,
                    backgroundColor: '#4472c4',
                },
                {
                    label: 'Perbaikan',
                    data: chartDataObj.perbaikan,
                    backgroundColor: '#ed7d31',
                },
                {
                    label: 'Pengajuan',
                    data: chartDataObj.pengajuan,
                    backgroundColor: '#a5a5a5',
                },
                {
                    label: 'Penghapusan',
                    data: chartDataObj.penghapusan,
                    backgroundColor: '#ffc000',
                }
            ]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: { font: { size: 14 } }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: { precision: 0 }
                },
                x: {
                    grid: { display: false }
                }
            }
        }
    });
</script>
<?= $this->endSection() ?>
