@extends('layouts.app')

@section('content')
<!-- Start Breadcrumbbar -->                    
<div class="breadcrumbbar">
    <div class="row align-items-center">
        <div class="col-md-8 col-lg-8">
            <h4 class="page-title">Dashboard</h4>
            <div class="breadcrumb-list">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
                </ol>
            </div>
        </div>
    </div>          
</div>
<!-- End Breadcrumbbar -->

<div class="row">
    <div class="col-md-4">
        <div class="card m-b-30">
            <div class="card-body">
                <div class="media">
                    <div class="media-body">
                        <h5 class="mb-2">Currencies</h5>
                        <h4 class="mb-0">{{ $currencyCount }}</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card m-b-30">
            <div class="card-body">
                <div class="media">
                    <div class="media-body">
                        <h5 class="mb-2">Accounts</h5>
                        <h4 class="mb-0">{{ $accountCount }}</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card m-b-30">
            <div class="card-body">
                <div class="media">
                    <div class="media-body">
                        <h5 class="mb-2">Currencies In Stock</h5>
                        <h4 class="mb-0">{{ $stockCount }}</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-8">
        <div class="card m-b-30">
            <div class="card-header">
                <h5 class="card-title mb-0">Total Profit by Day</h5>
            </div>
            <div class="card-body">
                <div style="height: 300px;">
                    <canvas id="profitChart"></canvas>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card m-b-30">
            <div class="card-header text-center">
                <h5 class="card-title mb-0">Currency Usage</h5>
            </div>
            <div class="card-body">
                <div style="height: 300px;">
                    <canvas id="currencyChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Profit Chart
    var profitData = @json($dailyProfits);
    var dates = profitData.map(item => item.date);
    var profits = profitData.map(item => item.total_profit);

    var ctxProfit = document.getElementById('profitChart').getContext('2d');
    new Chart(ctxProfit, {
        type: 'bar',
        data: {
            labels: dates,
            datasets: [
                {
                    label: 'Profit (Line)',
                    type: 'line',
                    data: profits,
                    borderColor: '#10b981',
                    backgroundColor: '#10b981',
                    borderWidth: 2,
                    tension: 0.1,
                    fill: false
                },
                {
                    label: 'Profit (Bar)',
                    type: 'bar',
                    data: profits,
                    backgroundColor: 'rgba(79, 70, 229, 0.5)',
                    borderColor: '#4f46e5',
                    borderWidth: 1
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    // Currency Chart
    var currencyData = @json($currencyDistribution);
    var currencyLabels = currencyData.map(item => item.currency.code);
    var currencyCounts = currencyData.map(item => item.count);

    var ctxCurrency = document.getElementById('currencyChart').getContext('2d');
    new Chart(ctxCurrency, {
        type: 'doughnut',
        data: {
            labels: currencyLabels,
            datasets: [{
                data: currencyCounts,
                backgroundColor: [
                    '#4f46e5', '#10b981', '#f59e0b', '#ef4444', 
                    '#8b5cf6', '#ec4899', '#06b6d4', '#6366f1'
                ],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
});
</script>
@endpush