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

<?= $this->section('content') ?>
<?php if (session()->getFlashdata('login_success')): ?>
    <div id="floating-welcome" class="alert shadow-lg text-dark d-flex align-items-center parse-alert" 
         style="position: fixed; top: 30px; right: 30px; z-index: 9999; min-width: 320px; background-color: #f1f587; border: none; border-radius: 8px; padding: 15px; opacity: 1; transition: opacity 0.6s ease, transform 0.6s ease; transform: translateY(0);">
        
        <div class="mr-3">
            <i class="fas fa-hand-wave fa-2x animate__animated animate__shakeY animate__infinite" style="font-size: 28px;"></i>
        </div>
        
        <div class="flex-grow-1">
            <h6 class="mb-0 font-weight-bold" style="font-size: 15px; letter-spacing: 0.5px;">Login Berhasil</h6>
            <small style="font-size: 13px; opacity: 0.95;"><?= session()->getFlashdata('login_success') ?></small>
        </div>
        
        <button type="button" class="close text-white ml-3" style="outline: none; opacity: 0.7;" onclick="tutupAlertManual()">
            <span>&times;</span>
        </button>
    </div>

    <script>
        function tutupAlertManual() {
            const alertBox = document.getElementById('floating-welcome');
            if (alertBox) {
                alertBox.style.opacity = '0';
                alertBox.style.transform = 'translateY(-20px)';
                setTimeout(() => alertBox.remove(), 600);
            }
        }

        document.addEventListener("DOMContentLoaded", function() {
            const alertBox = document.getElementById('floating-welcome');
            
            alertBox.style.transform = 'translateY(10px)';
            setTimeout(() => {
                alertBox.style.transform = 'translateY(0)';
            }, 100);

            setTimeout(function() {
                if (alertBox) {
                    alertBox.style.opacity = '0';
                    alertBox.style.transform = 'translateY(-20px)';
                    
                    setTimeout(() => {
                        alertBox.remove();
                    }, 600);
                }
            }, 4000);
        });
    </script>
<?php endif; ?>

<div class="row">
</div>

<!-- BARISAN UTAMA KOTAK INFORMASI (SMALL BOX) -->
<div class="row">
    <!-- Kotak 1: Data Petani (Diubah ke Biru Info) -->
    <div class="col-lg-4 col-6">
        <div class="small-box bg-info shadow">
            <div class="inner">
                <h3><?= $total_petani ?></h3>
                <p>Petani Terdaftar</p>
            </div>
            <div class="icon">
                <i class="fas fa-users"></i>
            </div>
            <a href="<?= base_url('petani') ?>" class="small-box-footer">Detail Petani <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>

    <!-- Kotak 2: Stok Gudang (Tetap Hijau Emerald) -->
    <div class="col-lg-4 col-6">
        <div class="small-box bg-emerald shadow">
            <div class="inner">
                <h3><?= number_format($total_stok, 0, ',', '.') ?> <sup style="font-size: 20px">Kg</sup></h3>
                <p>Total Stok Gudang</p>
            </div>
            <div class="icon">
                <i class="fas fa-warehouse"></i>
            </div>
            <a href="<?= base_url('pupuk') ?>" class="small-box-footer">Cek Stok <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>

    <!-- Kotak 3: Saldo Keuangan (Diubah ke Kuning/Emas Warning) -->
    <div class="col-lg-4 col-12">
        <div class="small-box bg-warning shadow">
            <div class="inner">
                <h3>Rp <?= number_format($saldo_kas, 0, ',', '.') ?></h3>
                <p>Saldo Kas Kelompok</p>
            </div>
            <div class="icon">
                <i class="fas fa-wallet"></i>
            </div>
            <a href="<?= base_url('keuangan') ?>" class="small-box-footer" style="color: rgba(0,0,0,0.6) !important;">Lihat Laporan <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card card-emerald card-outline">
            <div class="card-header">
                <h3 class="card-title text-bold"><i class="fas fa-bullhorn mr-1"></i> Informasi Sistem</h3>
            </div>
            <div class="card-body">
                <h5>Selamat Datang di SIM SARI RASA</h5>
                <p>Sistem ini dirancang untuk memantau penyaluran pupuk bersubsidi agar tepat sasaran sesuai dengan kuota <b>e-RDKK</b> yang telah ditetapkan.</p>
                <hr>
                <p class="text-muted italic small">Saran: Segera lakukan input data stok masuk jika kiriman dari distributor telah tiba.</p>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="info-box bg-light border-left border-emerald shadow-sm">
            <span class="info-box-icon bg-emerald text-white"><i class="far fa-calendar-alt"></i></span>
            <div class="info-box-content">
                <span class="info-box-text text-bold">Tahun Anggaran</span>
                <span class="info-box-number"><?= date('Y') ?></span>
            </div>
        </div>
    </div>
</div>
<?= $this->endSection() ?>