@extends('statistics.base')

@section('action-content')

<div class="container-fluid">

    <!-- PAGE TITLE -->
    <div class="row mb-3">
        <div class="col-12">
            <h3 class="text-center font-weight-bold">🏦 Financial Dashboard</h3>
        </div>
    </div>

    @if(auth()->user()->isAdmin() || auth()->user()->hasRole('manager'))

    <!-- ===================== CASH POSITION ===================== -->
    <div class="row mb-3">

        <div class="col-md-3 col-sm-6">
            <div class="small-box bg-primary shadow">
                <div class="inner">
                    <h4>{{ number_format($openingBalance,2) }}</h4>
                    <p>Opening Balance</p>
                </div>
                <div class="icon"><i class="fas fa-wallet"></i></div>
            </div>
        </div>

        <div class="col-md-3 col-sm-6">
            <div class="small-box bg-success shadow">
                <div class="inner">
                    <h4>{{ number_format($inflows,2) }}</h4>
                    <p>Total Inflows</p>
                </div>
                <div class="icon"><i class="fas fa-arrow-down"></i></div>
            </div>
        </div>

        <div class="col-md-3 col-sm-6">
            <div class="small-box bg-danger shadow">
                <div class="inner">
                    <h4>{{ number_format($outflows,2) }}</h4>
                    <p>Total Outflows</p>
                </div>
                <div class="icon"><i class="fas fa-arrow-up"></i></div>
            </div>
        </div>

        <div class="col-md-3 col-sm-6">
            <div class="small-box bg-dark shadow">
                <div class="inner">
                    <h4>{{ number_format($closingBalance,2) }}</h4>
                    <p>Closing Balance</p>
                </div>
                <div class="icon"><i class="fas fa-coins"></i></div>
            </div>
        </div>

    </div>

    <!-- ===================== DAILY ACTIVITY ===================== -->
    <div class="row mb-3">

        <div class="col-md-3 col-sm-6">
            <div class="info-box bg-info">
                <span class="info-box-icon"><i class="fas fa-plus"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Deposits</span>
                    <span class="info-box-number">{{ number_format($deposits,2) }}</span>
                </div>
            </div>
        </div>

        <div class="col-md-3 col-sm-6">
            <div class="info-box bg-warning">
                <span class="info-box-icon"><i class="fas fa-minus"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Withdrawals</span>
                    <span class="info-box-number">{{ number_format($withdrawals,2) }}</span>
                </div>
            </div>
        </div>

        <div class="col-md-3 col-sm-6">
            <div class="info-box bg-success">
                <span class="info-box-icon"><i class="fas fa-hand-holding-usd"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Loan Repayments</span>
                    <span class="info-box-number">{{ number_format($loanRepayments,2) }}</span>
                </div>
            </div>
        </div>

        <div class="info-box bg-light">
    <span class="info-box-icon bg-primary">
        <i class="fas fa-user-plus text-white"></i>
    </span>
    <div class="info-box-content">
        <span class="info-box-text">New Clients</span>
        <span class="info-box-number">{{ $newClients }}</span>
    </div>
</div>

    </div>

    <!-- ===================== LOAN ACTIVITY ===================== -->
    <div class="row mb-4">

        <div class="col-md-6">
            <div class="info-box bg-danger">
                <span class="info-box-icon"><i class="fas fa-money-check-alt"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Loan Disbursement Today</span>
                    <span class="info-box-number">{{ number_format($loanDisbursement,2) }}</span>
                </div>
            </div>
        </div>

    </div>

    <!-- ===================== PORTFOLIO ===================== -->
    <div class="row mb-4">

        <div class="col-md-6">
            <div class="card shadow">
                <div class="card-header bg-success text-white">
                    <strong>💰 Total Savings</strong>
                </div>
                <div class="card-body text-center">
                    <h3>{{ number_format($totalSavings,2) }}</h3>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card shadow">
                <div class="card-header bg-danger text-white">
                    <strong>📉 Outstanding Loans</strong>
                </div>
                <div class="card-body text-center">
                    <h3>{{ number_format($outstandingLoans,2) }}</h3>
                </div>
            </div>
        </div>

    </div>

    <!-- ===================== CHARTS ===================== -->
<div class="row mb-4">

    <!-- Cash Flow Trend -->
    <div class="col-md-8">
        <div class="card shadow">
            <div class="card-header bg-primary text-white">
                <strong>📈 Cash Flow Trend (Last 7 Days)</strong>
            </div>
            <div class="card-body">
                <canvas id="cashFlowChart" height="100"></canvas>
            </div>
        </div>
    </div>

    <!-- Deposit vs Withdrawal -->
    <div class="col-md-4">
        <div class="card shadow">
            <div class="card-header bg-info text-white">
                <strong>📊 Deposits vs Withdrawals</strong>
            </div>
            <div class="card-body">
                <canvas id="barChart" height="200"></canvas>
            </div>
        </div>
    </div>

</div>

    <!-- ===================== STAFF PERFORMANCE ===================== -->
    <div class="card shadow mb-4">
        <div class="card-header bg-dark text-white">
            <strong>👨‍💼 Staff Performance</strong>
        </div>

        <div class="card-body table-responsive">
            <table class="table table-bordered table-striped">
                <thead class="bg-light">
                    <tr>
                        <th>#</th>
                        <th>Staff Name</th>
                        <th>Total Transactions</th>
                        <th>Total Amount</th>
                    </tr>
                </thead>
                <tbody>
    @php
        $totalTransactions = $staffPerformance->sum('total_transactions');
        $totalAmount = $staffPerformance->sum('total_amount');
    @endphp

    @forelse($staffPerformance as $key => $staff)
        <tr>
            <td>{{ $key + 1 }}</td>
            <td>{{ $staff->staff_name }}</td>
            <td>{{ $staff->total_transactions }}</td>
            <td>{{ number_format($staff->total_amount,2) }}</td>
        </tr>
    @empty
        <tr>
            <td colspan="4" class="text-center text-muted">
                No data available
            </td>
        </tr>
    @endforelse

    <!-- TOTAL ROW -->
    @if($staffPerformance->count())
    <tr class="bg-dark text-white font-weight-bold">
        <td colspan="2" class="text-right">TOTAL</td>
        <td>{{ $totalTransactions }}</td>
        <td>{{ number_format($totalAmount,2) }}</td>
    </tr>
    @endif
</tbody>
            </table>
        </div>
    </div>

    @else

        <div class="alert alert-danger text-center">
            You are not authorized to view this dashboard.
        </div>

    @endif

</div>

@endsection

@section('scripts')

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>

// 🔥 DATA FROM CONTROLLER
const labels = @json($chartLabels);
const deposits = @json($depositChart);
const withdrawals = @json($withdrawalChart);

// ================= CASH FLOW LINE CHART =================
const ctx1 = document.getElementById('cashFlowChart').getContext('2d');

new Chart(ctx1, {
    type: 'line',
    data: {
        labels: labels,
        datasets: [
            {
                label: 'Deposits',
                data: deposits,
                borderWidth: 2,
                fill: false
            },
            {
                label: 'Withdrawals',
                data: withdrawals,
                borderWidth: 2,
                fill: false
            }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false
    }
});


// ================= BAR CHART =================
const ctx2 = document.getElementById('barChart').getContext('2d');

new Chart(ctx2, {
    type: 'bar',
    data: {
        labels: labels,
        datasets: [
            {
                label: 'Deposits',
                data: deposits
            },
            {
                label: 'Withdrawals',
                data: withdrawals
            }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false
    }
});

</script>
@endsection