@extends('layouts.franchise', ['heading' => 'Profit Analytics'])

@section('content')
    <form method="GET" class="user-card mb-4 grid grid-cols-1 gap-3 p-4 md:grid-cols-3">
        <div>
            <label class="text-xs text-[var(--user-muted)]">From</label>
            <input type="date" name="from" value="{{ $from }}" class="mt-1 w-full rounded-lg border border-[var(--user-border)] bg-transparent px-3 py-2 text-sm">
        </div>
        <div>
            <label class="text-xs text-[var(--user-muted)]">To</label>
            <input type="date" name="to" value="{{ $to }}" class="mt-1 w-full rounded-lg border border-[var(--user-border)] bg-transparent px-3 py-2 text-sm">
        </div>
        <div class="self-end">
            <button class="w-full rounded-lg bg-[var(--user-primary)] px-4 py-2 text-sm font-semibold text-white">Apply</button>
        </div>
    </form>

    <div class="grid grid-cols-1 gap-3 md:grid-cols-3">
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Gross Sales</div>
            <div class="mt-1 text-xl font-semibold">₹ {{ number_format((float) $summary['gross_sales'], 2) }}</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">COGS (Stock Out)</div>
            <div class="mt-1 text-xl font-semibold">₹ {{ number_format((float) $summary['cogs'], 2) }}</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Gross Margin</div>
            <div class="mt-1 text-xl font-semibold">₹ {{ number_format((float) $summary['gross_margin'], 2) }}</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Commission Income</div>
            <div class="mt-1 text-xl font-semibold">₹ {{ number_format((float) $summary['commission_income'], 2) }}</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Damage Loss</div>
            <div class="mt-1 text-xl font-semibold">₹ {{ number_format((float) $summary['damage_loss'], 2) }}</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Net Profit</div>
            <div class="mt-1 text-xl font-semibold {{ (float) $summary['net_profit'] >= 0 ? 'text-emerald-600' : 'text-rose-600' }}">
                ₹ {{ number_format((float) $summary['net_profit'], 2) }}
            </div>
        </div>
    </div>

    <div class="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-2">
        <div class="user-card p-4">
            <div class="mb-2 text-sm font-semibold">Sales Trend (7 days)</div>
            <div class="overflow-x-auto">
                <canvas id="profitSalesChart" style="min-width:340px;height:240px;"></canvas>
            </div>
        </div>
        <div class="user-card p-4">
            <div class="mb-2 text-sm font-semibold">Net Profit Trend (7 days)</div>
            <div class="overflow-x-auto">
                <canvas id="profitNetChart" style="min-width:340px;height:240px;"></canvas>
            </div>
        </div>
    </div>

    <script>
        new Chart(document.getElementById('profitSalesChart'), {
            type: 'line',
            data: {
                labels: {!! json_encode($chartLabels) !!},
                datasets: [{
                    label: 'Sales',
                    data: {!! json_encode($salesSeries) !!},
                    borderColor: '#0ea5e9',
                    backgroundColor: 'rgba(14,165,233,0.2)',
                    fill: true,
                    tension: 0.3
                }]
            },
            options: { responsive: true, maintainAspectRatio: false }
        });

        new Chart(document.getElementById('profitNetChart'), {
            type: 'bar',
            data: {
                labels: {!! json_encode($chartLabels) !!},
                datasets: [{
                    label: 'Net Profit',
                    data: {!! json_encode($profitSeries) !!},
                    backgroundColor: '#16a34a'
                }]
            },
            options: { responsive: true, maintainAspectRatio: false }
        });
    </script>
@endsection