@extends('layouts.admin')

@section('content')
<div class="container mx-auto">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-800">Profit & Loss Dashboard</h1>
        <div class="flex space-x-2">
            <a href="{{ route('admin.profit-loss.export', request()->all()) }}"
               class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center">
                <i class="fas fa-file-export mr-2"></i> Export CSV
            </a>
            <a href="{{ route('admin.expenses.index') }}"
               class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
                <i class="fas fa-receipt mr-2"></i> Manage Expenses
            </a>
        </div>
    </div>

    <!-- Date Filter -->
    <div class="bg-white rounded-lg shadow-lg p-6 mb-6">
        <form method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Date Range</label>
                <select name="date_range" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="today" {{ $dateRange == 'today' ? 'selected' : '' }}>Today</option>
                    <option value="yesterday" {{ $dateRange == 'yesterday' ? 'selected' : '' }}>Yesterday</option>
                    <option value="week" {{ $dateRange == 'week' ? 'selected' : '' }}>This Week</option>
                    <option value="month" {{ $dateRange == 'month' ? 'selected' : '' }}>This Month</option>
                    <option value="quarter" {{ $dateRange == 'quarter' ? 'selected' : '' }}>This Quarter</option>
                    <option value="year" {{ $dateRange == 'year' ? 'selected' : '' }}>This Year</option>
                    <option value="custom" {{ $dateRange == 'custom' ? 'selected' : '' }}>Custom Range</option>
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Start Date</label>
                <input type="date" name="start_date" value="{{ $startDate->format('Y-m-d') }}"
                       class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">End Date</label>
                <input type="date" name="end_date" value="{{ $endDate->format('Y-m-d') }}"
                       class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>

            <div class="flex items-end">
                <button type="submit"
                        class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">
                    <i class="fas fa-filter mr-2"></i> Apply Filter
                </button>
            </div>
        </form>
    </div>

    <!-- Key Metrics -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
        <!-- Total Revenue -->
        <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-green-500">
            <div class="flex items-center">
                <div class="p-3 bg-green-100 rounded-lg">
                    <i class="fas fa-dollar-sign text-green-600 text-xl"></i>
                </div>
                <div class="ml-4">
                    <h3 class="text-sm font-medium text-gray-600">Total Revenue</h3>
                    <p class="text-2xl font-bold text-gray-900">Rs.{{ number_format($revenueData['total_revenue'], 2) }}</p>
                    <p class="text-xs text-gray-500 mt-1">{{ number_format($revenueData['total_sales']) }} sales</p>
                </div>
            </div>
        </div>

        <!-- Gross Profit -->
        <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-blue-500">
            <div class="flex items-center">
                <div class="p-3 bg-blue-100 rounded-lg">
                    <i class="fas fa-chart-line text-blue-600 text-xl"></i>
                </div>
                <div class="ml-4">
                    <h3 class="text-sm font-medium text-gray-600">Gross Profit</h3>
                    <p class="text-2xl font-bold text-gray-900 {{ $grossProfit >= 0 ? 'text-green-600' : 'text-red-600' }}">
                        Rs.{{ number_format($grossProfit, 2) }}
                    </p>
                    <p class="text-xs text-gray-500 mt-1">{{ number_format($grossProfitMargin, 1) }}% margin</p>
                </div>
            </div>
        </div>

        <!-- Net Profit -->
        <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-purple-500">
            <div class="flex items-center">
                <div class="p-3 bg-purple-100 rounded-lg">
                    <i class="fas fa-calculator text-purple-600 text-xl"></i>
                </div>
                <div class="ml-4">
                    <h3 class="text-sm font-medium text-gray-600">Net Profit</h3>
                    <p class="text-2xl font-bold text-gray-900 {{ $netProfit >= 0 ? 'text-green-600' : 'text-red-600' }}">
                        Rs.{{ number_format($netProfit, 2) }}
                    </p>
                    <p class="text-xs text-gray-500 mt-1">{{ number_format($netProfitMargin, 1) }}% margin</p>
                </div>
            </div>
        </div>

        <!-- Expenses -->
        <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-red-500">
            <div class="flex items-center">
                <div class="p-3 bg-red-100 rounded-lg">
                    <i class="fas fa-receipt text-red-600 text-xl"></i>
                </div>
                <div class="ml-4">
                    <h3 class="text-sm font-medium text-gray-600">Total Expenses</h3>
                    <p class="text-2xl font-bold text-gray-900">Rs.{{ number_format($totalExpenses, 2) }}</p>
                    <p class="text-xs text-gray-500 mt-1">{{ number_format($expensesData['total_expenses_count']) }} expenses</p>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <!-- Profit & Loss Statement -->
        <div class="bg-white rounded-lg shadow-lg p-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">Profit & Loss Statement</h3>
            <div class="space-y-3">
                <!-- Revenue -->
                <div class="flex justify-between items-center pb-2 border-b">
                    <span class="font-medium text-gray-700">Revenue</span>
                    <span class="font-semibold text-green-600">Rs.{{ number_format($revenueData['total_revenue'], 2) }}</span>
                </div>

                <!-- COGS -->
                <div class="flex justify-between items-center text-sm">
                    <span class="text-gray-600 ml-4">Cost of Goods Sold</span>
                    <span class="text-red-600">(Rs.{{ number_format($cogsData['total_cogs'], 2) }})</span>
                </div>

                <!-- Gross Profit -->
                <div class="flex justify-between items-center pt-2 border-t font-semibold">
                    <span>Gross Profit</span>
                    <span class="{{ $grossProfit >= 0 ? 'text-green-600' : 'text-red-600' }}">
                        ${{ number_format($grossProfit, 2) }}
                    </span>
                </div>

                <!-- Expenses -->
                <div class="flex justify-between items-center pt-3 border-t">
                    <span class="font-medium text-gray-700">Operating Expenses</span>
                    <span class="text-red-600">(Rs.{{ number_format($totalExpenses, 2) }})</span>
                </div>

                <!-- Net Profit Before Tax -->
                <div class="flex justify-between items-center pt-2 border-t font-semibold">
                    <span>Net Profit Before Tax</span>
                    <span class="{{ $netProfitBeforeTax >= 0 ? 'text-green-600' : 'text-red-600' }}">
                        Rs.{{ number_format($netProfitBeforeTax, 2) }}
                    </span>
                </div>

                <!-- Returns & Refunds -->
                <div class="flex justify-between items-center text-sm">
                    <span class="text-gray-600 ml-4">Returns & Refunds</span>
                    <span class="text-red-600">(Rs.{{ number_format($returnsData['total_refunds'], 2) }})</span>
                </div>

                <!-- Net Profit -->
                <div class="flex justify-between items-center pt-3 border-t text-lg font-bold">
                    <span>Net Profit/Loss</span>
                    <span class="{{ $netProfit >= 0 ? 'text-green-600' : 'text-red-600' }}">
                        Rs.{{ number_format($netProfit, 2) }}
                    </span>
                </div>
            </div>
        </div>

        <!-- Expense Breakdown -->
        <div class="bg-white rounded-lg shadow-lg p-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">Expense Breakdown</h3>
            <div class="space-y-3">
                @foreach($expenseBreakdown as $expense)
                <div class="flex justify-between items-center">
                    <div class="flex items-center">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ [
                            'rent' => 'bg-purple-100 text-purple-800',
                            'utilities' => 'bg-blue-100 text-blue-800',
                            'salaries' => 'bg-green-100 text-green-800',
                            'transport' => 'bg-yellow-100 text-yellow-800',
                            'maintenance' => 'bg-red-100 text-red-800',
                            'supplies' => 'bg-indigo-100 text-indigo-800',
                            'marketing' => 'bg-pink-100 text-pink-800',
                            'other' => 'bg-gray-100 text-gray-800',
                        ][$expense->category] }}">
                            {{ ucfirst($expense->category) }}
                        </span>
                        <span class="text-xs text-gray-500 ml-2">{{ $expense->expense_count }} expenses</span>
                    </div>
                    <span class="font-semibold text-red-600">Rs.{{ number_format($expense->total_amount, 2) }}</span>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <!-- Monthly Profit Trend -->
        <div class="bg-white rounded-lg shadow-lg p-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">Monthly Profit Trend</h3>
            <div class="h-64">
                <canvas id="profitTrendChart"></canvas>
            </div>
        </div>

        <!-- Top Performing Products -->
        <div class="bg-white rounded-lg shadow-lg p-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">Top Performing Products</h3>
            <div class="space-y-3">
                @foreach($topProducts as $product)
                <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                    <div class="flex-1">
                        <h4 class="font-medium text-gray-800">{{ $product->product_name }}</h4>
                        <p class="text-xs text-gray-600">{{ $product->product_code }}</p>
                    </div>
                    <div class="text-right">
                        <p class="font-semibold {{ $product->total_profit >= 0 ? 'text-green-600' : 'text-red-600' }}">
                            Rs.{{ number_format($product->total_profit, 2) }}
                        </p>
                        <p class="text-xs text-gray-600">{{ number_format($product->total_sold) }} sold</p>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Detailed Metrics -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- COGS Metrics -->
        <div class="bg-white rounded-lg shadow-lg p-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">Cost Analysis</h3>
            <div class="space-y-2 text-sm">
                <div class="flex justify-between">
                    <span class="text-gray-600">Cost of Goods Sold:</span>
                    <span class="font-semibold">Rs.{{ number_format($cogsData['total_cogs'], 2) }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">Units Sold:</span>
                    <span class="font-semibold">{{ number_format($cogsData['total_units_sold']) }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">Avg. Margin per Unit:</span>
                    <span class="font-semibold text-green-600">Rs.{{ number_format($cogsData['avg_margin'], 2) }}</span>
                </div>
            </div>
        </div>

        <!-- Returns Metrics -->
        <div class="bg-white rounded-lg shadow-lg p-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">Returns Analysis</h3>
            <div class="space-y-2 text-sm">
                <div class="flex justify-between">
                    <span class="text-gray-600">Total Returns:</span>
                    <span class="font-semibold">{{ number_format($returnsData['total_returns']) }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">Total Refunds:</span>
                    <span class="font-semibold text-red-600">Rs.{{ number_format($returnsData['total_refunds'], 2) }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">Units Returned:</span>
                    <span class="font-semibold">{{ number_format($returnsData['total_units_returned']) }}</span>
                </div>
            </div>
        </div>

        <!-- Performance Metrics -->
        <div class="bg-white rounded-lg shadow-lg p-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">Performance Metrics</h3>
            <div class="space-y-2 text-sm">
                <div class="flex justify-between">
                    <span class="text-gray-600">Gross Profit Margin:</span>
                    <span class="font-semibold {{ $grossProfitMargin >= 20 ? 'text-green-600' : 'text-yellow-600' }}">
                        {{ number_format($grossProfitMargin, 1) }}%
                    </span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">Net Profit Margin:</span>
                    <span class="font-semibold {{ $netProfitMargin >= 10 ? 'text-green-600' : 'text-yellow-600' }}">
                        {{ number_format($netProfitMargin, 1) }}%
                    </span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">Return Rate:</span>
                    <span class="font-semibold {{ ($returnsData['total_returns'] / max($revenueData['total_sales'], 1) * 100) <= 5 ? 'text-green-600' : 'text-red-600' }}">
                        {{ number_format($returnsData['total_returns'] / max($revenueData['total_sales'], 1) * 100, 1) }}%
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Profit Trend Chart
    const profitCtx = document.getElementById('profitTrendChart').getContext('2d');
    const profitChart = new Chart(profitCtx, {
        type: 'line',
        data: {
            labels: @json($monthlyTrends->map(fn($item) => \Carbon\Carbon::create($item->year, $item->month)->format('M Y'))),
            datasets: [{
                label: 'Revenue',
                data: @json($monthlyTrends->pluck('revenue')),
                borderColor: '#10B981',
                backgroundColor: 'rgba(16, 185, 129, 0.1)',
                fill: true,
                yAxisID: 'y',
            }, {
                label: 'Profit',
                data: @json($monthlyTrends->pluck('profit')),
                borderColor: '#3B82F6',
                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                fill: true,
                yAxisID: 'y',
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return '$' + value.toLocaleString();
                        }
                    }
                }
            },
            plugins: {
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return context.dataset.label + ': $' + context.parsed.y.toLocaleString();
                        }
                    }
                }
            }
        }
    });
});
</script>
@endpush