@extends('layouts.admin')

@section('title', 'Laporan - Report Admin')

@php
    $totalRevenue = $summaries->sum('total_revenue');
    $totalCost = $summaries->sum('total_cost');
    $totalProfit = $summaries->sum('total_profit');
    $totalOrders = $summaries->sum('total_orders');
@endphp

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Laporan Bulanan</h1>
            <p class="text-sm text-gray-500 mt-1">Ringkasan keuntungan per platform per bulan</p>
        </div>
        <a href="{{ route('admin.reports.export', array_filter(['year' => $year, 'platform' => $platform])) }}"
           class="h-9 px-4 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 flex items-center gap-2">
            <span class="material-symbols-outlined text-lg">download</span>
            Export CSV
        </a>
    </div>

    <!-- Year Summary Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
            <p class="text-sm text-gray-500">Total Orders ({{ $year }})</p>
            <p class="text-2xl font-bold text-gray-900 mt-1">{{ number_format($totalOrders) }}</p>
        </div>
        <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
            <p class="text-sm text-gray-500">Total Revenue</p>
            <p class="text-2xl font-bold text-gray-900 mt-1">Rp {{ number_format($totalRevenue, 0, ',', '.') }}</p>
        </div>
        <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
            <p class="text-sm text-gray-500">Total Cost</p>
            <p class="text-2xl font-bold text-red-600 mt-1">Rp {{ number_format($totalCost, 0, ',', '.') }}</p>
        </div>
        <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
            <p class="text-sm text-gray-500">Total Profit</p>
            <p class="text-2xl font-bold {{ $totalProfit >= 0 ? 'text-green-600' : 'text-red-600' }} mt-1">Rp {{ number_format($totalProfit, 0, ',', '.') }}</p>
        </div>
    </div>

    <!-- Filter Bar -->
    <form method="GET" action="{{ route('admin.reports') }}" class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm flex flex-col md:flex-row md:items-end gap-3">
        <div class="flex-1">
            <label class="block text-xs font-medium text-gray-500 mb-1">Toko</label>
            <select name="store_id" class="w-full h-9 px-3 rounded-lg border border-gray-300 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-500">
                <option value="">Semua Toko</option>
                @foreach($stores as $store)
                    <option value="{{ $store->id }}" {{ $storeId == $store->id ? 'selected' : '' }}>{{ $store->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="flex-1">
            <label class="block text-xs font-medium text-gray-500 mb-1">Tahun</label>
            <select name="year" class="w-full h-9 px-3 rounded-lg border border-gray-300 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-500">
                @forelse($years as $y)
                    <option value="{{ $y }}" {{ $year == $y ? 'selected' : '' }}>{{ $y }}</option>
                @empty
                    <option value="{{ date('Y') }}">{{ date('Y') }}</option>
                @endforelse
            </select>
        </div>
        <div class="flex-1">
            <label class="block text-xs font-medium text-gray-500 mb-1">Bulan</label>
            <select name="month" class="w-full h-9 px-3 rounded-lg border border-gray-300 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-500">
                <option value="">Semua Bulan</option>
                @foreach($months as $num => $name)
                    <option value="{{ $num }}" {{ $month == $num ? 'selected' : '' }}>{{ $name }}</option>
                @endforeach
            </select>
        </div>
        <div class="flex-1">
            <label class="block text-xs font-medium text-gray-500 mb-1">Platform</label>
            <select name="platform" class="w-full h-9 px-3 rounded-lg border border-gray-300 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-500">
                <option value="">Semua Platform</option>
                <option value="shopee" {{ $platform == 'shopee' ? 'selected' : '' }}>Shopee</option>
                <option value="tiktok" {{ $platform == 'tiktok' ? 'selected' : '' }}>TikTok Shop</option>
            </select>
        </div>
        <button type="submit" class="h-9 px-4 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700">Terapkan</button>
    </form>

    <!-- Monthly Summary Table -->
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left">
                <thead class="bg-gray-50 text-gray-500 text-xs uppercase">
                    <tr>
                        <th class="px-4 py-3 font-semibold">Periode</th>
                        <th class="px-4 py-3 font-semibold">Toko</th>
                        <th class="px-4 py-3 font-semibold">Platform</th>
                        <th class="px-4 py-3 font-semibold text-right">Total Orders</th>
                        <th class="px-4 py-3 font-semibold text-right">Products Sold</th>
                        <th class="px-4 py-3 font-semibold text-right">Total Revenue</th>
                        <th class="px-4 py-3 font-semibold text-right">Total Cost</th>
                        <th class="px-4 py-3 font-semibold text-right">Total Profit</th>
                        <th class="px-4 py-3 font-semibold text-right">Avg Order</th>
                    </tr>
                </thead>
                <tbody class="text-sm divide-y divide-gray-100">
                    @forelse($summaries as $summary)
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap">{{ \Carbon\Carbon::createFromFormat('Y-m', $summary->year_month)->format('M Y') }}</td>
                        <td class="px-4 py-3">
                            @if($summary->store)
                                <span class="px-2 py-0.5 bg-blue-50 text-blue-700 text-xs font-semibold rounded border border-blue-100">{{ $summary->store->name }}</span>
                            @else
                                <span class="text-gray-400 text-xs">-</span>
                            @endif
                        </td>
                        <td class="px-4 py-3">
                            @if($summary->platform == 'shopee')
                                <span class="px-2 py-0.5 bg-orange-500 text-white text-xs font-semibold rounded">Shopee</span>
                            @elseif($summary->platform == 'tiktok')
                                <span class="px-2 py-0.5 bg-cyan-400 text-black text-xs font-semibold rounded">TikTok</span>
                            @else
                                <span class="px-2 py-0.5 bg-gray-200 text-gray-700 text-xs font-semibold rounded capitalize">{{ $summary->platform }}</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-right text-gray-700">{{ number_format($summary->total_orders) }}</td>
                        <td class="px-4 py-3 text-right text-gray-700">{{ number_format($summary->total_products_sold) }}</td>
                        <td class="px-4 py-3 text-right font-medium text-gray-900 whitespace-nowrap">Rp {{ number_format($summary->total_revenue, 0, ',', '.') }}</td>
                        <td class="px-4 py-3 text-right text-red-600 whitespace-nowrap">Rp {{ number_format($summary->total_cost, 0, ',', '.') }}</td>
                        <td class="px-4 py-3 text-right font-semibold {{ $summary->total_profit >= 0 ? 'text-green-600' : 'text-red-600' }} whitespace-nowrap">
                            Rp {{ number_format($summary->total_profit, 0, ',', '.') }}
                        </td>
                        <td class="px-4 py-3 text-right text-gray-500 whitespace-nowrap">
                            @if($summary->total_orders > 0)
                                Rp {{ number_format($summary->total_revenue / $summary->total_orders, 0, ',', '.') }}
                            @else
                                -
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="px-4 py-12 text-center">
                            <span class="material-symbols-outlined text-5xl text-gray-300">bar_chart</span>
                            <p class="mt-3 text-gray-500">Belum ada data laporan untuk tahun {{ $year }}</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
                @if($summaries->count() > 0)
                <tfoot>
                    <tr class="bg-gray-100 font-semibold text-gray-900">
                        <td class="px-4 py-3" colspan="3">TOTAL {{ $year }}</td>
                        <td class="px-4 py-3 text-right">{{ number_format($totalOrders) }}</td>
                        <td class="px-4 py-3"></td>
                        <td class="px-4 py-3 text-right whitespace-nowrap">Rp {{ number_format($totalRevenue, 0, ',', '.') }}</td>
                        <td class="px-4 py-3 text-right text-red-600 whitespace-nowrap">Rp {{ number_format($totalCost, 0, ',', '.') }}</td>
                        <td class="px-4 py-3 text-right {{ $totalProfit >= 0 ? 'text-green-600' : 'text-red-600' }} whitespace-nowrap">Rp {{ number_format($totalProfit, 0, ',', '.') }}</td>
                        <td class="px-4 py-3"></td>
                    </tr>
                </tfoot>
                @endif
            </table>
        </div>
    </div>
</div>
@endsection