@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
    <div class="bg-white rounded shadow p-4">
        <p class="text-xs text-slate-500">Toplam Satış</p>
        <p class="text-2xl font-bold">{{ $cards['total_sales'] }}</p>
    </div>
    @if ($isMasterAdmin)
        <div class="bg-white rounded shadow p-4">
            <p class="text-xs text-slate-500">Toplam Bayi</p>
            <p class="text-2xl font-bold">{{ $cards['total_dealers'] }}</p>
        </div>
        <div class="bg-white rounded shadow p-4">
            <p class="text-xs text-slate-500">Aktif Bayi</p>
            <p class="text-2xl font-bold">{{ $cards['active_dealers'] }}</p>
        </div>
        <div class="bg-white rounded shadow p-4">
            <p class="text-xs text-slate-500">Bekleyen Başvuru</p>
            <p class="text-2xl font-bold">{{ $cards['pending_applications'] }}</p>
        </div>
        <div class="bg-white rounded shadow p-4">
            <p class="text-xs text-slate-500">Tamamlanan Başvuru</p>
            <p class="text-2xl font-bold">{{ $cards['completed_applications'] }}</p>
        </div>
    @endif
    <div class="bg-white rounded shadow p-4">
        <p class="text-xs text-slate-500">Toplam Hakediş</p>
        <p class="text-2xl font-bold">{{ number_format($cards['total_earnings'], 2, ',', '.') }} TL</p>
    </div>
    <div class="bg-white rounded shadow p-4">
        <p class="text-xs text-slate-500">Toplam Ödeme</p>
        <p class="text-2xl font-bold">{{ number_format($cards['total_payments'], 2, ',', '.') }} TL</p>
    </div>
</div>

@if ($isMasterAdmin)
<div class="grid md:grid-cols-2 gap-6">
    <div class="bg-white rounded shadow p-4">
        <h2 class="font-semibold mb-2">Aylık Satış</h2>
        <canvas id="monthlySalesChart" height="120"></canvas>
    </div>
    <div class="bg-white rounded shadow p-4">
        <h2 class="font-semibold mb-2">Firma Bazlı Satış</h2>
        <canvas id="companySalesChart" height="120"></canvas>
    </div>
    <div class="bg-white rounded shadow p-4 md:col-span-2">
        <h2 class="font-semibold mb-2">En Çok Satan Bayiler</h2>
        <canvas id="dealerSalesChart" height="100"></canvas>
    </div>
</div>

@push('scripts')
<script>
new Chart(document.getElementById('monthlySalesChart'), {
    type: 'line',
    data: {
        labels: {!! json_encode($monthlySales->pluck('ym')) !!},
        datasets: [{ label: 'Satış', data: {!! json_encode($monthlySales->pluck('total')) !!}, borderColor: '#2563eb' }]
    }
});
new Chart(document.getElementById('companySalesChart'), {
    type: 'doughnut',
    data: {
        labels: {!! json_encode($salesByCompany->pluck('company')) !!},
        datasets: [{ data: {!! json_encode($salesByCompany->pluck('total')) !!} }]
    }
});
new Chart(document.getElementById('dealerSalesChart'), {
    type: 'bar',
    data: {
        labels: {!! json_encode($salesByDealer->pluck('dealer')) !!},
        datasets: [{ label: 'Satış', data: {!! json_encode($salesByDealer->pluck('total')) !!}, backgroundColor: '#2563eb' }]
    }
});
</script>
@endpush
@endif
@endsection