@extends('layouts.master')

@section('content')
<div class="container-fluid">
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Master Files</h1>
    </div>

    <div class="row">
        <div class="col-xl-2 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Customers</div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($counts['customers']) }}</div>
                </div>
            </div>
        </div>
        <div class="col-xl-2 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Suppliers</div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($counts['suppliers']) }}</div>
                </div>
            </div>
        </div>
        <div class="col-xl-2 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Items / Products</div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($counts['items']) }}</div>
                </div>
            </div>
        </div>
        <div class="col-xl-2 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Warehouses</div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($counts['warehouses']) }}</div>
                </div>
            </div>
        </div>
        <div class="col-xl-2 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Currencies</div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($counts['currencies']) }}</div>
                </div>
            </div>
        </div>
        <div class="col-xl-2 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Cost Centres</div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($counts['cost_centres']) }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xl-6 col-lg-6">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Customers by Category</h6>
                </div>
                <div class="card-body">
                    <div class="chart-area">
                        <canvas id="customersByCategoryChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-6 col-lg-6">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Suppliers by Category</h6>
                </div>
                <div class="card-body">
                    <div class="chart-area">
                        <canvas id="suppliersByCategoryChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const customerCtx = document.getElementById('customersByCategoryChart');
    if (customerCtx) {
        new Chart(customerCtx, {
            type: 'bar',
            data: {
                labels: @json($customerCategoryLabels),
                datasets: [{
                    label: 'Customers',
                    backgroundColor: 'rgba(78, 115, 223, 0.8)',
                    borderColor: 'rgba(78, 115, 223, 1)',
                    data: @json($customerCategoryTotals),
                }]
            },
            options: {
                maintainAspectRatio: false,
                scales: { yAxes: [{ ticks: { beginAtZero: true } }] }
            }
        });
    }

    const supplierCtx = document.getElementById('suppliersByCategoryChart');
    if (supplierCtx) {
        new Chart(supplierCtx, {
            type: 'bar',
            data: {
                labels: @json($supplierCategoryLabels),
                datasets: [{
                    label: 'Suppliers',
                    backgroundColor: 'rgba(28, 200, 138, 0.8)',
                    borderColor: 'rgba(28, 200, 138, 1)',
                    data: @json($supplierCategoryTotals),
                }]
            },
            options: {
                maintainAspectRatio: false,
                scales: { yAxes: [{ ticks: { beginAtZero: true } }] }
            }
        });
    }
});
</script>
@endsection