@extends('dashboard.base')

@section('action-content')

<section class="content">

    <style>
.border-left-primary { border-left: 4px solid #007bff; }
.border-left-success { border-left: 4px solid #28a745; }
.border-left-danger { border-left: 4px solid #dc3545; }
.border-left-warning { border-left: 4px solid #ffc107; }
.border-left-navy { border-left: 4px solid #07ffc1; }
.border-left-orange { border-left: 4px solid #FFA500; }
.card {
    border-radius: 10px;
}
</style>

    {{-- ================= KPI SECTION ================= --}}
    <div class="row">

        {{-- Total Deposits --}}
        <div class="col-lg-3 col-md-6 col-sm-12">
            <div class="box shadow-sm border-left-primary">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div>
                        <p class="text-muted mb-1">Total Deposits</p>
                        <h4 id="kpiDeposits" class="font-weight-bold text-primary">
                            ₵ {{ number_format($todayDeposits ?? 0,2) }}
                        </h4>
                    </div>
                    <i class="fa fa-university fa-2x text-primary"></i>
                </div>
            </div>
        </div>

        {{-- Savings Deposits --}}
        <div class="col-lg-3 col-md-6 col-sm-12">
            <div class="box shadow-sm border-left-success">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div>
                        <p class="text-muted mb-1">Savings Deposits</p>
                        <h4 id="kpiSavingsDeposits">₵ {{ number_format($savingsDeposits ?? 0,2) }}</h4>
                    </div>
                    <i class="fa fa-piggy-bank fa-2x text-success"></i>
                </div>
            </div>
        </div>

        {{-- Fixed Deposits --}}
        <div class="col-lg-3 col-md-6 col-sm-12">
            <div class="box shadow-sm border-left-danger">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div>
                        <p class="text-muted mb-1">Fixed Deposits</p>
                        <h4 id="kpiFixedDeposits">₵ {{ number_format($fixedDeposits ?? 0,2) }}</h4>
                    </div>
                    <i class="fa fa-lock fa-2x text-danger"></i>
                </div>
            </div>
        </div>

        {{-- Kids & Student Deposits --}}

        <div class="col-lg-3 col-md-6 col-sm-12">
            <div class="box shadow-sm border-left-navy">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div>
                        <p class="text-muted mb-1">Kids & Student Deposits</p>
                        <h4 id="kpiKidsStudent">₵ {{ number_format($kidsStudent ?? 0,2) }}</h4>
                    </div>
                    <i class="fa fa-child fa-2x text-navy"></i>
                </div>
            </div>
        </div>

        
        {{-- Total Withdrawals --}}

        <div class="col-lg-3 col-md-6 col-sm-12">
            <div class="box shadow-sm border-left-danger">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="text-muted mb-1">Total Withdrawals</h6>
                        <h4 class="font-weight-bold text-danger">
                            ₵ {{ number_format($todayWithdrawals ?? 0,2) }}
                        </h4>
                    </div>
                    <i class="fas fa-arrow-circle-down fa-2x text-danger"></i>
                </div>
            </div>
        </div>

        {{-- Total Savings Balance --}}
        <div class="col-lg-3 col-md-6 col-sm-12">
            <div class="box shadow-sm border-left-success">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="text-muted mb-1">Total Savings Balance</h6>
                        <h4 class="font-weight-bold text-success">
                            ₵ {{ number_format($totalSavings ?? 0,2) }}
                        </h4>
                    </div>
                    <i class="fas fa-piggy-bank fa-2x text-success"></i>
                </div>
            </div>
        </div>

        {{-- Active Loans --}}
        <div class="col-lg-3 col-md-6 col-sm-12">
            <div class="box shadow-sm border-left-warning">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="text-muted mb-1">Active Loans</h6>
                        <h4 class="font-weight-bold text-warning">
                            {{ $activeLoans ?? 0 }}
                        </h4>
                    </div>
                    <i class="fas fa-hand-holding-usd fa-2x text-warning"></i>
                </div>
            </div>
        </div>

        {{-- Active Loans --}}
        <div class="col-lg-3 col-md-6 col-sm-12">
            <div class="box shadow-sm border-left-success">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="text-muted mb-1">Shares Deposit</h6>
                        <h4 class="font-weight-bold text-success">
                            ₵ {{ number_format($sharesDeposit ?? 0,2) }}
                        </h4>
                    </div>
                    <i class="fas fa-share fa-2x text-success"></i>
                </div>
            </div>
        </div>

    </div>

    {{-- Second KPI Row --}}
    
    {{-- ================= LOAN PERFORMANCE ================= --}}
    <div class="row mb-4">

        <div class="col-lg-3 col-md-6 col-sm-12">
            <div class="box shadow-sm border-left-warning">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="text-muted mb-1">Loan Portfolio</h6>
                        <h4 class="font-weight-bold text-warning">
                            ₵ {{ number_format($totalLoanPortfolio ?? 0,2) }}
                        </h4>
                    </div>
                    <i class="fas fa-hand-holding-usd fa-2x text-warning"></i>
                </div>
            </div>
        </div>

<div class="col-lg-3 col-md-6 col-sm-12">
            <div class="box shadow-sm border-left-warning">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="text-muted mb-1">Outstanding Principal</h6>
                        <h4 class="font-weight-bold text-warning">
                            ₵ {{ number_format($totalOutstandingPrincipal ?? 0,2) }}
                        </h4>
                    </div>
                    <i class="fas fa-hand-holding-usd fa-2x text-warning"></i>
                </div>
            </div>
        </div>
        
<div class="col-lg-3 col-md-6 col-sm-12">
            <div class="box shadow-sm border-left-warning">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="text-muted mb-1">Interest Expected</h6>
                        <h4 class="font-weight-bold text-warning">
                            ₵ {{ number_format($totalInterestExpected ?? 0,2) }}
                        </h4>
                    </div>
                    <i class="fas fa-hand-holding-usd fa-2x text-warning"></i>
                </div>
            </div>
        </div>

       <div class="col-lg-3 col-md-6 col-sm-12">
            <div class="box shadow-sm border-left-warning">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="text-muted mb-1">Overdue Loans</h6>
                        <h4 class="font-weight-bold text-warning">
                            ₵ {{ number_format($totalOverdueAmount ?? 0,2) }}
                        </h4>
                    </div>
                    <i class="fas fa-hand-holding-usd fa-2x text-warning"></i>
                </div>
            </div>
        </div> 

    </div>


    {{-- ================= CHARTS SECTION ================= --}}
    <div class="row">

        {{-- Monthly Deposits --}}
        <div class="col-md-6">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Monthly Deposits ({{ now()->year }})</h3>
                </div>
                <div class="box-body">
                    <div id="depositsChart"></div>
                </div>
            </div>
        </div>

        {{-- Monthly Withdrawals --}}
        <div class="col-md-6">
            <div class="box box-danger">
                <div class="box-header with-border">
                    <h3 class="box-title">Monthly Withdrawals ({{ now()->year }})</h3>
                </div>
                <div class="box-body">
                    <div id="withdrawalsChart"></div>
                </div>
            </div>
        </div>

    </div>


    <div class="row">

        {{-- 30 Days Savings Trend --}}
        <div class="col-md-6">
            <div class="box box-success">
                <div class="box-header with-border">
                    <h3 class="box-title">Last 30 Days Savings Trend</h3>
                </div>
                <div class="box-body">
                    <div id="savingsChart"></div>
                </div>
            </div>
        </div>

        {{-- Loan Performance --}}
        <div class="col-md-6">
            <div class="box box-warning">
                <div class="box-header with-border">
                    <h3 class="box-title">Loan Performance</h3>
                </div>
                <div class="box-body">
                    <div id="loanChart"></div>
                </div>
            </div>
        </div>

    </div>

</section>

@endsection


@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<script>

const monthNames    = {!! json_encode($monthNames ?? []) !!};
const deposits      = {!! json_encode($monthlyDeposits ?? []) !!};
const withdrawals   = {!! json_encode($monthlyWithdrawals ?? []) !!};
const savingsLabels = {!! json_encode($labels ?? []) !!};
const savingsData   = {!! json_encode($savingsValues ?? []) !!};
const loanStats     = {!! json_encode($loanStats ?? ['active'=>0,'complete'=>0,'overdue'=>0]) !!};

/** ========== CHARTS ========== **/

window.depositsChart = new ApexCharts(document.querySelector("#depositsChart"), {
    chart: { type: 'bar', height: 300 },
    series: [{ name: 'Deposits', data: deposits }],
    xaxis: { categories: monthNames },
    colors: ['#00c0ef']
});
depositsChart.render();

window.withdrawalsChart = new ApexCharts(document.querySelector("#withdrawalsChart"), {
    chart: { type: 'line', height: 300 },
    series: [{ name: 'Withdrawals', data: withdrawals }],
    xaxis: { categories: monthNames },
    colors: ['#f56954']
});
withdrawalsChart.render();

window.savingsChart = new ApexCharts(document.querySelector("#savingsChart"), {
    chart: { type: 'area', height: 300 },
    series: [{ name: 'Net Movement', data: savingsData }],
    xaxis: { categories: savingsLabels },
    colors: ['#00a65a']
});
savingsChart.render();

window.loanChart = new ApexCharts(document.querySelector("#loanChart"), {
    chart: { type: 'donut', height: 300 },
    series: [
        loanStats.active ?? 0,
        loanStats.complete ?? 0,
        loanStats.overdue ?? 0
    ],
    labels: ['Active', 'Completed', 'Overdue'],
    colors: ['#f39c12', '#00a65a', '#f56954']
});
loanChart.render();


/** ========== AUTO REFRESH (45s) ========== **/
setInterval(() => {

    fetch("{{ route('dashboard.refresh') }}")
        .then(res => res.json())
        .then(data => {

            document.getElementById("kpiDeposits").innerHTML = "₵ " + data.todayDeposits;
            document.getElementById("kpiSavingsDeposits").innerHTML = "₵ " + data.savingsDeposits;
            document.getElementById("kpiFixedDeposits").innerHTML = "₵ " + data.fixedDeposits;
            document.getElementById("kpikidsStudent").innerHTML = "₵ " + data.kidsStudent;
            document.getElementById("kpiWithdrawals").innerHTML = "₵ " + data.todayWithdrawals;
            document.getElementById("kpiActiveLoans").innerHTML = data.activeLoans;
            document.getElementById("kpiTotalSavings").innerHTML = "₵ " + data.totalSavings;
            document.getElementById("kpisharesDeposit").innerHTML = "₵ " + data.sharesDeposit;

            depositsChart.updateSeries([{ data: data.monthlyDeposits }]);
            withdrawalsChart.updateSeries([{ data: data.monthlyWithdrawals }]);
            savingsChart.updateSeries([{ data: data.savingsValues }]);
            loanChart.updateSeries([
                data.loanStats.active ?? 0,
                data.loanStats.complete ?? 0,
                data.loanStats.overdue ?? 0
            ]);
        });

}, 45000);

</script>
@endsection