@extends('layouts.app')

@section('title', 'Profit & Loss')

@section('breadcrumb')
    @include('components.breadcrumb', ['items' => ['Reports' => null, 'Profit & Loss' => null]])
@endsection

@section('content')
<div>
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
        <div>
            <h1 class="text-2xl font-bold text-slate-900 dark:text-white">Profit & Loss Statement</h1>
            <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">Income vs Expense from {{ $from }} to {{ $to }}</p>
        </div>
        <div class="flex flex-wrap items-center gap-2">
            <x-button variant="outline" icon="printer">Print</x-button>
            <x-button variant="success" icon="file-spreadsheet">Excel</x-button>
        </div>
    </div>

    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <x-stat-card title="Total Revenue" :value="$totalSales" icon="trending-up" iconBg="success" gradient />
        <x-stat-card title="Total Cost" :value="$totalPurchase" icon="trending-down" iconBg="danger" gradient />
        <x-stat-card title="Gross Profit" :value="$grossProfit" icon="award" iconBg="primary" gradient />
        <x-stat-card title="Net Margin" :value="$margin" prefix="" suffix="%" icon="percent" iconBg="purple" gradient />
    </div>

    <x-card :padding="false">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="bg-slate-50 dark:bg-slate-900/50 border-b border-slate-200 dark:border-slate-800">
                        <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-slate-500">Particulars</th>
                        <th class="px-4 py-3 text-right text-[11px] font-bold uppercase tracking-wider text-slate-500">Amount (৳)</th>
                        <th class="px-4 py-3 text-right text-[11px] font-bold uppercase tracking-wider text-slate-500">% of Revenue</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                    <tr class="bg-emerald-50/50 dark:bg-emerald-500/5 font-bold">
                        <td class="px-4 py-3 text-sm">A. Total Revenue</td>
                        <td class="px-4 py-3 text-right text-emerald-600 counter-num">৳{{ number_format($totalSales) }}</td>
                        <td class="px-4 py-3 text-right text-emerald-600">100%</td>
                    </tr>
                    <tr class="bg-rose-50/50 dark:bg-rose-500/5 font-bold">
                        <td class="px-4 py-3 text-sm">B. Total Expenses</td>
                        <td class="px-4 py-3 text-right text-rose-600 counter-num">৳{{ number_format($totalPurchase) }}</td>
                        <td class="px-4 py-3 text-right text-rose-600">{{ $totalSales > 0 ? round(($totalPurchase / $totalSales) * 100, 1) : 0 }}%</td>
                    </tr>
                    <tr class="bg-primary-50 dark:bg-primary-500/10 font-bold border-t-2 border-primary-200">
                        <td class="px-4 py-4 text-base text-primary-700 dark:text-primary-300">C. Net Profit (A - B)</td>
                        <td class="px-4 py-4 text-right text-lg text-primary-700 dark:text-primary-300 counter-num">৳{{ number_format($grossProfit) }}</td>
                        <td class="px-4 py-4 text-right text-lg text-primary-700 dark:text-primary-300">{{ $margin }}%</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </x-card>
</div>
@endsection
