@extends('layouts.franchise', ['heading' => 'Franchise Dashboard'])

@section('content')
    <div class="grid grid-cols-1 gap-4 md:grid-cols-3 xl:grid-cols-6">
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Assigned Members</div>
            <div class="mt-2 text-2xl font-semibold" data-count-to="{{ $stats['assigned_members'] ?? 0 }}">0</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Today Registrations</div>
            <div class="mt-2 text-2xl font-semibold" data-count-to="{{ $stats['today_registrations'] ?? 0 }}">0</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Total BV Generated</div>
            <div class="mt-2 text-2xl font-semibold" data-count-to="{{ $stats['total_bv'] ?? 0 }}">0</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Commission Wallet</div>
            <div class="mt-2 text-2xl font-semibold">Rs. <span data-count-to="{{ $stats['commission_wallet'] ?? 0 }}">0</span></div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Pending Payout</div>
            <div class="mt-2 text-2xl font-semibold">Rs. <span data-count-to="{{ $stats['pending_payout'] ?? 0 }}">0</span></div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Today Sales</div>
            <div class="mt-2 text-2xl font-semibold">Rs. <span data-count-to="{{ $stats['today_sales'] ?? 0 }}">0</span></div>
        </div>
    </div>

    <div class="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2">
        <div class="user-card p-4">
            <div class="mb-2 font-semibold">Area Growth (Members)</div>
            <div class="overflow-x-auto">
                <canvas id="areaGrowthChart" style="min-width:340px;height:240px;"></canvas>
            </div>
        </div>
        <div class="user-card p-4">
            <div class="mb-2 font-semibold">Monthly Business</div>
            <div class="overflow-x-auto">
                <canvas id="monthlyBusinessChart" style="min-width:340px;height:240px;"></canvas>
            </div>
        </div>
    </div>

    <div class="mt-6 grid grid-cols-1 gap-3 md:grid-cols-3">
        <a href="{{ route('franchise.members') }}" class="user-card p-4 text-center">
            Create Distributor ID
        </a>
        <a href="{{ route('franchise.pos') }}" class="user-card p-4 text-center">
            Sell Product
        </a>
        <a href="{{ route('franchise.stock') }}" class="user-card p-4 text-center">
            Transfer Stock
        </a>
        <a href="{{ route('franchise.pickups') }}" class="user-card p-4 text-center">
            Approve Pickup
        </a>
        <a href="{{ route('franchise.stock') }}" class="user-card p-4 text-center">
            Transfer BV to User
        </a>
        <a href="{{ route('franchise.reports.daily') }}" class="user-card p-4 text-center">
            View Reports
        </a>
    </div>

    <script>
        new Chart(document.getElementById('areaGrowthChart'), {
            type: 'line',
            data: {
                labels: {!! json_encode($chartLabels ?? []) !!},
                datasets: [{
                    label: 'New Members',
                    data: {!! json_encode($growthSeries ?? []) !!},
                    borderColor: '#16a34a',
                    backgroundColor: 'rgba(22,163,74,0.15)',
                    fill: true,
                    tension: 0.3
                }]
            },
            options: { responsive: true, maintainAspectRatio: false }
        });

        new Chart(document.getElementById('monthlyBusinessChart'), {
            type: 'bar',
            data: {
                labels: {!! json_encode($chartLabels ?? []) !!},
                datasets: [{
                    label: 'Business',
                    data: {!! json_encode($businessSeries ?? []) !!},
                    backgroundColor: '#0ea5e9'
                }]
            },
            options: { responsive: true, maintainAspectRatio: false }
        });
    </script>
@endsection