

<?php $__env->startSection('content'); ?>
<div class="page-header">
    <h2><i class="fas fa-history"></i> Riwayat Uang Saku - <?php echo e($santri->nama_lengkap); ?></h2>
</div>


<div class="content-box" style="margin-bottom: 20px;">
    <form method="GET" action="<?php echo e(route('admin.uang-saku.riwayat', $santri->id_santri)); ?>" id="filterPeriode">
        <div style="display: flex; align-items: end; gap: 15px; flex-wrap: wrap;">
            <div class="form-group" style="margin-bottom: 0; flex: 1; min-width: 200px;">
                <label for="tanggal_dari" style="display: block; margin-bottom: 5px; font-weight: 600;">
                    <i class="fas fa-calendar-alt"></i> Dari Tanggal
                </label>
                <input type="date" 
                       name="tanggal_dari" 
                       id="tanggal_dari"
                       class="form-control" 
                       value="<?php echo e($tanggalDari); ?>"
                       max="<?php echo e(date('Y-m-d')); ?>">
            </div>
            
            <div class="form-group" style="margin-bottom: 0; flex: 1; min-width: 200px;">
                <label for="tanggal_sampai" style="display: block; margin-bottom: 5px; font-weight: 600;">
                    <i class="fas fa-calendar-check"></i> Sampai Tanggal
                </label>
                <input type="date" 
                       name="tanggal_sampai" 
                       id="tanggal_sampai"
                       class="form-control" 
                       value="<?php echo e($tanggalSampai); ?>"
                       max="<?php echo e(date('Y-m-d')); ?>">
            </div>

            <div style="display: flex; gap: 10px;">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-filter"></i> Terapkan
                </button>
                
                <button type="button" class="btn btn-success" onclick="setBulanIni()">
                    <i class="fas fa-calendar-day"></i> Bulan Ini
                </button>
                
                <a href="<?php echo e(route('admin.uang-saku.riwayat', $santri->id_santri)); ?>" class="btn btn-secondary">
                    <i class="fas fa-redo"></i> Reset
                </a>
            </div>
        </div>
    </form>
</div>


<div class="info-box" style="margin-bottom: 20px;">
    <p style="margin: 0;">
        <i class="fas fa-info-circle"></i> 
        <strong>Periode:</strong> 
        <?php echo e($periodeDari->format('d F Y')); ?> - <?php echo e($periodeSampai->format('d F Y')); ?>

        (<?php echo e($periodeDari->diffInDays($periodeSampai) + 1); ?> hari)
    </p>
</div>

<!-- Summary Cards -->
<div class="row-cards">
    <div class="card card-success hover-lift">
        <h3>Total Pemasukan</h3>
        <div class="card-value">Rp <?php echo e(number_format($totalPemasukan, 0, ',', '.')); ?></div>
        <p style="margin: 10px 0 0 0; font-size: 0.85rem; color: var(--text-light);">
            Periode yang dipilih
        </p>
        <i class="fas fa-arrow-down card-icon"></i>
    </div>
    
    <div class="card card-danger hover-lift">
        <h3>Total Pengeluaran</h3>
        <div class="card-value">Rp <?php echo e(number_format($totalPengeluaran, 0, ',', '.')); ?></div>
        <p style="margin: 10px 0 0 0; font-size: 0.85rem; color: var(--text-light);">
            Periode yang dipilih
        </p>
        <i class="fas fa-arrow-up card-icon"></i>
    </div>
    
    <div class="card card-info hover-lift">
        <h3>Selisih</h3>
        <div class="card-value" style="color: <?php echo e(($totalPemasukan - $totalPengeluaran) >= 0 ? '#6FBA9D' : '#FF8B94'); ?>">
            Rp <?php echo e(number_format($totalPemasukan - $totalPengeluaran, 0, ',', '.')); ?>

        </div>
        <p style="margin: 10px 0 0 0; font-size: 0.85rem; color: var(--text-light);">
            Pemasukan - Pengeluaran
        </p>
        <i class="fas fa-chart-line card-icon"></i>
    </div>
    
    <div class="card card-primary hover-lift">
        <h3>Saldo Saat Ini</h3>
        <div class="card-value" style="color: <?php echo e($saldoTerakhir >= 0 ? '#6FBA9D' : '#FF8B94'); ?>">
            Rp <?php echo e(number_format($saldoTerakhir, 0, ',', '.')); ?>

        </div>
        <p style="margin: 10px 0 0 0; font-size: 0.85rem; color: var(--text-light);">
            Total keseluruhan
        </p>
        <i class="fas fa-wallet card-icon"></i>
    </div>
</div>

<!-- Grafik -->
<div class="content-box" style="margin-bottom: 30px;">
    <h3 style="margin-bottom: 20px; color: var(--primary-color);">
        <i class="fas fa-chart-line"></i> Grafik Arus Uang Saku
    </h3>
    <canvas id="chartUangSaku" style="max-height: 400px;"></canvas>
</div>

<!-- Action Buttons -->
<div class="content-box" style="margin-bottom: 20px;">
    <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;">
        <div style="display: flex; gap: 10px; flex-wrap: wrap;">
            <a href="<?php echo e(route('admin.uang-saku.index')); ?>" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Kembali ke Daftar
            </a>
            <a href="<?php echo e(route('admin.santri.show', $santri->id)); ?>" class="btn btn-primary">
                <i class="fas fa-user"></i> Profil Santri
            </a>
        </div>
        <div style="display: flex; gap: 10px; flex-wrap: wrap;">
            <a href="<?php echo e(route('admin.uang-saku.create')); ?>?id_santri=<?php echo e($santri->id_santri); ?>" class="btn btn-success">
                <i class="fas fa-plus"></i> Tambah Transaksi
            </a>
        </div>
    </div>
</div>

<!-- Tabel Riwayat -->
<div class="content-box">
    <h3 style="margin-bottom: 15px; color: var(--text-color);">
        <i class="fas fa-list"></i> Daftar Transaksi 
        <?php if($transaksi->total() > 0): ?>
            <span style="color: var(--text-light);">(<?php echo e($transaksi->total()); ?> transaksi)</span>
        <?php endif; ?>
    </h3>
    
    <?php if($transaksi->count() > 0): ?>
        <table class="data-table">
            <thead>
                <tr>
                    <th style="width: 5%;">No</th>
                    <th style="width: 12%;">ID Transaksi</th>
                    <th style="width: 12%;">Tanggal</th>
                    <th style="width: 12%;">Jenis</th>
                    <th style="width: 15%;">Nominal</th>
                    <th style="width: 13%;">Saldo Sebelum</th>
                    <th style="width: 13%;">Saldo Sesudah</th>
                    <th style="width: 12%;">Keterangan</th>
                    <th style="width: 6%;" class="text-center">Aksi</th>
                </tr>
            </thead>
            <tbody>
                <?php $__currentLoopData = $transaksi; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <tr>
                        <td><?php echo e($transaksi->firstItem() + $index); ?></td>
                        <td><strong><?php echo e($item->id_uang_saku); ?></strong></td>
                        <td><?php echo e($item->tanggal_transaksi->format('d/m/Y')); ?></td>
                        <td>
                            <?php if($item->jenis_transaksi === 'pemasukan'): ?>
                                <span class="badge badge-success">
                                    <i class="fas fa-arrow-down"></i> Pemasukan
                                </span>
                            <?php else: ?>
                                <span class="badge badge-danger">
                                    <i class="fas fa-arrow-up"></i> Pengeluaran
                                </span>
                            <?php endif; ?>
                        </td>
                        <td class="nominal-highlight">
                            <?php echo e($item->nominal_format); ?>

                        </td>
                        <td>
                            Rp <?php echo e(number_format($item->saldo_sebelum, 0, ',', '.')); ?>

                        </td>
                        <td>
                            <strong style="color: <?php echo e($item->saldo_sesudah >= 0 ? '#6FBA9D' : '#FF8B94'); ?>">
                                <?php echo e($item->saldo_sesudah_format); ?>

                            </strong>
                        </td>
                        <td>
                            <div class="content-preview">
                                <?php echo e($item->keterangan ?? '-'); ?>

                            </div>
                        </td>
                        <td class="text-center">
                            <div style="display: flex; gap: 5px; justify-content: center;">
                                <a href="<?php echo e(route('admin.uang-saku.show', $item->id)); ?>" 
                                   class="btn btn-primary btn-sm" 
                                   title="Detail">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="<?php echo e(route('admin.uang-saku.edit', $item->id)); ?>" 
                                   class="btn btn-warning btn-sm" 
                                   title="Edit">
                                    <i class="fas fa-edit"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </tbody>
        </table>

        <div style="margin-top: 20px;">
            <?php echo e($transaksi->links()); ?>

        </div>
    <?php else: ?>
        <div class="empty-state">
            <i class="fas fa-calendar-times"></i>
            <h3>Tidak Ada Transaksi</h3>
            <p>Tidak ada transaksi pada periode <?php echo e($periodeDari->format('d F Y')); ?> - <?php echo e($periodeSampai->format('d F Y')); ?></p>
            <a href="<?php echo e(route('admin.uang-saku.create')); ?>?id_santri=<?php echo e($santri->id_santri); ?>" class="btn btn-success">
                <i class="fas fa-plus"></i> Tambah Transaksi
            </a>
        </div>
    <?php endif; ?>
</div>

<!-- Chart.js Library -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>

<script>
    // Data untuk grafik dari Laravel
    const dataGrafik = <?php echo json_encode($dataGrafik, 15, 512) ?>;
    
    // Format data untuk Chart.js (per hari)
    const labels = dataGrafik.map(item => {
        const date = new Date(item.tanggal);
        return date.toLocaleDateString('id-ID', { day: 'numeric', month: 'short' });
    });
    
    const pemasukan = dataGrafik.map(item => parseFloat(item.pemasukan));
    const pengeluaran = dataGrafik.map(item => parseFloat(item.pengeluaran));
    
    // Konfigurasi Chart
    const ctx = document.getElementById('chartUangSaku').getContext('2d');
    const chartUangSaku = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [
                {
                    label: 'Pemasukan',
                    data: pemasukan,
                    borderColor: '#6FBA9D',
                    backgroundColor: 'rgba(111, 186, 157, 0.1)',
                    borderWidth: 3,
                    fill: true,
                    tension: 0.4,
                    pointRadius: 5,
                    pointHoverRadius: 7,
                    pointBackgroundColor: '#6FBA9D',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2
                },
                {
                    label: 'Pengeluaran',
                    data: pengeluaran,
                    borderColor: '#FF8B94',
                    backgroundColor: 'rgba(255, 139, 148, 0.1)',
                    borderWidth: 3,
                    fill: true,
                    tension: 0.4,
                    pointRadius: 5,
                    pointHoverRadius: 7,
                    pointBackgroundColor: '#FF8B94',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            interaction: {
                intersect: false,
                mode: 'index'
            },
            plugins: {
                legend: {
                    display: true,
                    position: 'top',
                    labels: {
                        padding: 15,
                        font: {
                            size: 13,
                            family: "'Inter', sans-serif"
                        },
                        usePointStyle: true,
                        pointStyle: 'circle'
                    }
                },
                tooltip: {
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    padding: 12,
                    titleFont: {
                        size: 14,
                        weight: 'bold'
                    },
                    bodyFont: {
                        size: 13
                    },
                    callbacks: {
                        label: function(context) {
                            let label = context.dataset.label || '';
                            if (label) {
                                label += ': ';
                            }
                            label += 'Rp ' + new Intl.NumberFormat('id-ID').format(context.parsed.y);
                            return label;
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return 'Rp ' + new Intl.NumberFormat('id-ID', {
                                notation: 'compact',
                                compactDisplay: 'short'
                            }).format(value);
                        },
                        font: {
                            size: 12
                        }
                    },
                    grid: {
                        color: 'rgba(111, 186, 157, 0.1)',
                        drawBorder: false
                    }
                },
                x: {
                    grid: {
                        display: false,
                        drawBorder: false
                    },
                    ticks: {
                        font: {
                            size: 11
                        },
                        maxRotation: 45,
                        minRotation: 45
                    }
                }
            },
            animation: {
                duration: 1500,
                easing: 'easeInOutQuart'
            }
        }
    });

    // Function untuk set bulan ini
    function setBulanIni() {
        const today = new Date();
        const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
        const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0);
        
        document.getElementById('tanggal_dari').value = firstDay.toISOString().split('T')[0];
        document.getElementById('tanggal_sampai').value = lastDay.toISOString().split('T')[0];
        
        document.getElementById('filterPeriode').submit();
    }

    // Validasi tanggal
    document.getElementById('tanggal_sampai').addEventListener('change', function() {
        const dari = document.getElementById('tanggal_dari').value;
        const sampai = this.value;
        
        if (dari && sampai && sampai < dari) {
            alert('Tanggal sampai tidak boleh lebih kecil dari tanggal dari!');
            this.value = dari;
        }
    });
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\xampp\htdocs\TugasAkhir\sim-pkpps\resources\views/admin/uang-saku/riwayat.blade.php ENDPATH**/ ?>