@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
<div class="container-fluid p-0">
    <!-- Welcome Section -->
    <div class="row mb-4 mx-0">
        <div class="col-12 px-0">
            <div class="card border-0 shadow-sm rounded-0">
                <div class="card-body bg-gradient-primary text-white rounded-0" style="background: #198754;">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h1 class="card-title mb-2 fw-bold" style="font-size: 2.2rem;">Welcome back, {{ Auth::user()->name }}!</h1>
                            <p class="card-text mb-0 opacity-90" style="font-size: 1.3rem;">Here's an overview of your Credora system performance.</p>
                        </div>
                        <div class="col-md-4 text-end d-none d-md-block">
                            <i class="fas fa-chart-line fa-4x opacity-25"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- KPI Statistics Cards -->
    <div class="row mb-4 mx-0">
        <div class="col-xl-3 col-md-6 mb-4 px-1">
            <div class="card border-left-warning shadow-sm h-100 border-0">
                <div class="card-body p-3">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-lg font-weight-bold text-warning text-uppercase mb-1" style="font-size: 1.1rem;">Pending Loans</div>
                            <div class="h3 mb-0 font-weight-bold text-gray-800" style="font-size: 2.2rem;">{{ $pendingLoans }}</div>
                            <small class="text-muted" style="font-size: 1rem;">Awaiting review</small>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-clock fa-2x text-warning"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4 px-1">
            <div class="card border-left-info shadow-sm h-100 border-0">
                <div class="card-body p-3">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-lg font-weight-bold text-info text-uppercase mb-1" style="font-size: 1.1rem;">To Process</div>
                            <div class="h3 mb-0 font-weight-bold text-gray-800" style="font-size: 2.2rem;">{{ $loansToProcess }}</div>
                            <small class="text-muted" style="font-size: 1rem;">In processing stage</small>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-cogs fa-2x text-info"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4 px-1">
            <div class="card border-left-success shadow-sm h-100 border-0">
                <div class="card-body p-3">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-lg font-weight-bold text-success text-uppercase mb-1" style="font-size: 1.1rem;">To Disburse</div>
                            <div class="h3 mb-0 font-weight-bold text-gray-800" style="font-size: 2.2rem;">{{ $loansToDisburse }}</div>
                            <small class="text-muted" style="font-size: 1rem;">Ready for disbursement</small>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-money-bill-wave fa-2x text-success"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4 px-1">
            <div class="card border-left-danger shadow-sm h-100 border-0">
                <div class="card-body p-3">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-lg font-weight-bold text-danger text-uppercase mb-1" style="font-size: 1.1rem;">Loans in Arrears</div>
                            <div class="h3 mb-0 font-weight-bold text-gray-800" style="font-size: 2.2rem;">{{ $loansInArrears }}</div>
                            <small class="text-muted" style="font-size: 1rem;">Requiring attention</small>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-exclamation-triangle fa-2x text-danger"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Additional Statistics -->
    <div class="row mb-4 mx-0">
        <div class="col-xl-3 col-md-6 mb-4 px-1">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title text-muted mb-1" style="font-size: 1.1rem;">Total Clients</h5>
                            <h3 class="text-primary" style="font-size: 2.2rem;">{{ $totalClients }}</h3>
                        </div>
                        <div class="text-primary">
                            <i class="fas fa-users fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-4 px-1">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title text-muted mb-1" style="font-size: 1.1rem;">Active Loans</h5>
                            <h3 class="text-success" style="font-size: 2.2rem;">{{ $activeLoans }}</h3>
                        </div>
                        <div class="text-success">
                            <i class="fas fa-hand-holding-usd fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-4 px-1">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title text-muted mb-1" style="font-size: 1.1rem;">Total Loans</h5>
                            <h3 class="text-info" style="font-size: 2.2rem;">{{ $totalLoans }}</h3>
                        </div>
                        <div class="text-info">
                            <i class="fas fa-file-invoice-dollar fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-4 px-1">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title text-muted mb-1" style="font-size: 1.1rem;">Loan Portfolio</h5>
                            <h3 class="text-warning" style="font-size: 2rem;">${{ number_format($totalLoanAmount) }}</h3>
                        </div>
                        <div class="text-warning">
                            <i class="fas fa-chart-line fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="row mb-4 mx-0">
        <!-- Bar Chart - Business Written (Last 7 days) -->
        <div class="col-xl-6 col-lg-12 mb-4 px-1">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 py-3">
                    <h6 class="m-0 font-weight-bold text-primary" style="font-size: 1.3rem;">Business Written - Last 7 Days</h6>
                </div>
                <div class="card-body">
                    <canvas id="barChart" height="250"></canvas>
                </div>
            </div>
        </div>

        <!-- Line Chart - Cash vs Product Loans -->
        <div class="col-xl-6 col-lg-12 mb-4 px-1">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 py-3">
                    <h6 class="m-0 font-weight-bold text-primary" style="font-size: 1.3rem;">Loan Trends - Last 6 Months</h6>
                </div>
                <div class="card-body">
                    <canvas id="lineChart" height="250"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Performance Metrics & Quick Actions -->
    <div class="row mx-0">
        <!-- Performance Metrics -->
        <div class="col-lg-6 mb-4 px-1">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 py-3">
                    <h6 class="m-0 font-weight-bold text-primary" style="font-size: 1.3rem;">Performance Metrics</h6>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-md-6 mb-3">
                            <div class="border rounded p-3">
                                <div class="text-warning mb-2">
                                    <i class="fas fa-check-circle fa-2x"></i>
                                </div>
                                <h4 class="font-weight-bold" style="font-size: 2rem;">{{ $approvalRate }}%</h4>
                                <small class="text-muted" style="font-size: 1.1rem;">Approval Rate</small>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="border rounded p-3">
                                <div class="text-info mb-2">
                                    <i class="fas fa-clock fa-2x"></i>
                                </div>
                                <h4 class="font-weight-bold" style="font-size: 2rem;">{{ $avgProcessingTime }} days</h4>
                                <small class="text-muted" style="font-size: 1.1rem;">Avg Processing Time</small>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="border rounded p-3">
                                <div class="text-success mb-2">
                                    <i class="fas fa-wallet fa-2x"></i>
                                </div>
                                <h4 class="font-weight-bold" style="font-size: 1.8rem;">${{ number_format($portfolioValue) }}</h4>
                                <small class="text-muted" style="font-size: 1.1rem;">Portfolio Value</small>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="border rounded p-3">
                                <div class="text-primary mb-2">
                                    <i class="fas fa-chart-pie fa-2x"></i>
                                </div>
                                <h4 class="font-weight-bold" style="font-size: 2rem;">{{ $recoveryRate }}%</h4>
                                <small class="text-muted" style="font-size: 1.1rem;">Recovery Rate</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<!-- Chart.js Library -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Bar Chart - Business Written
    const barCtx = document.getElementById('barChart').getContext('2d');
    window.barChart = new Chart(barCtx, {
        type: 'bar',
        data: {
            labels: @json($barLabels),
            datasets: [{
                label: 'Loans Created',
                data: @json($barData),
                backgroundColor: 'rgba(25, 135, 84, 0.7)',
                borderColor: 'rgba(25, 135, 84, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1,
                        font: {
                            size: 12
                        }
                    }
                },
                x: {
                    ticks: {
                        font: {
                            size: 12
                        }
                    }
                }
            },
            plugins: {
                legend: {
                    labels: {
                        font: {
                            size: 13
                        }
                    }
                }
            }
        }
    });

    // Line Chart - Cash vs Product Loans
    const lineCtx = document.getElementById('lineChart').getContext('2d');
    window.lineChart = new Chart(lineCtx, {
        type: 'line',
        data: {
            labels: @json($lineLabels),
            datasets: [
                {
                    label: 'Cash Loans',
                    data: @json($cashData),
                    borderColor: 'rgba(13, 110, 253, 1)',
                    backgroundColor: 'rgba(13, 110, 253, 0.1)',
                    tension: 0.4,
                    fill: true
                },
                {
                    label: 'Product Loans',
                    data: @json($productData),
                    borderColor: 'rgba(255, 193, 7, 1)',
                    backgroundColor: 'rgba(255, 193, 7, 0.1)',
                    tension: 0.4,
                    fill: true
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        font: {
                            size: 12
                        }
                    }
                },
                x: {
                    ticks: {
                        font: {
                            size: 12
                        }
                    }
                }
            },
            plugins: {
                legend: {
                    labels: {
                        font: {
                            size: 13
                        }
                    }
                }
            }
        }
    });

    // Auto-refresh dashboard data every 2 minutes
    setInterval(() => {
        fetch('/dashboard/data')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Update KPI cards
                    document.querySelectorAll('[data-kpi="pendingLoans"]').forEach(el => {
                        el.textContent = data.kpi.pendingLoans;
                    });

                    // Update charts
                    if (window.barChart) {
                        window.barChart.data.datasets[0].data = data.barChart.data;
                        window.barChart.update();
                    }

                    if (window.lineChart) {
                        window.lineChart.data.datasets[0].data = data.lineChart.cash;
                        window.lineChart.data.datasets[1].data = data.lineChart.product;
                        window.lineChart.update();
                    }
                }
            })
            .catch(error => console.error('Error refreshing dashboard:', error));
    }, 120000);
});
</script>
@endpush

<style>
body {
    margin: 0;
    padding: 0;
}
.container-fluid {
    padding-left: 0;
    padding-right: 0;
}
.card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}
.bg-gradient-primary {
    background: #198754;
}
.border-left-warning {
    border-left: 4px solid #ffc107 !important;
}
.border-left-info {
    border-left: 4px solid #0dcaf0 !important;
}
.border-left-success {
    border-left: 4px solid #198754 !important;
}
.border-left-danger {
    border-left: 4px solid #dc3545 !important;
}
.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-info:hover,
.btn-outline-warning:hover {
    transform: translateY(-2px);
    transition: all 0.2s ease-in-out;
}

.quick-action-large {
    padding: 1.5rem 1rem;
    font-weight: 600;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.quick-action-large i {
    font-size: 1.5rem;
    margin-right: 0.5rem;
}

/* Increased font sizes for better readability */
.text-lg {
    font-size: 1.1rem !important;
}
.h3 {
    font-size: 2.2rem !important;
}
</style>
@endsection