@extends('layouts.admin')

@section('title', 'Laba & Transaksi - Report Admin')

@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">Laba & Transaksi</h1>
            <p class="text-sm text-gray-500 mt-1">Daftar semua transaksi dari Shopee & TikTok Shop</p>
        </div>
    </div>

    <!-- Filter Bar -->
    <form method="GET" action="{{ route('admin.orders') }}" class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm space-y-3">
        <!-- Row 1: Search + Quick Filters -->
        <div class="flex flex-col lg:flex-row gap-3">
            <!-- Text Search -->
            <div class="flex-1">
                <label class="block text-xs font-medium text-gray-500 mb-1">Cari</label>
                <div class="relative">
                    <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-lg">search</span>
                    <input type="text" name="q" value="{{ request('q') }}" placeholder="Order ID, nama produk..." class="w-full h-9 pl-9 pr-3 rounded-lg border border-gray-300 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
            </div>
            <!-- Platform -->
            <div class="w-full lg:w-36">
                <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</option>
                    <option value="shopee" {{ $platform == 'shopee' ? 'selected' : '' }}>Shopee</option>
                    <option value="tiktok" {{ $platform == 'tiktok' ? 'selected' : '' }}>TikTok</option>
                </select>
            </div>
            <!-- Toko -->
            <div class="w-full lg:w-44">
                <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>
            <!-- HPP Status -->
            <div class="w-full lg:w-44">
                <label class="block text-xs font-medium text-gray-500 mb-1">Status HPP</label>
                <select name="hpp" 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</option>
                    <option value="ok" {{ $hpp === 'ok' ? 'selected' : '' }}>✓ Dengan HPP</option>
                    <option value="missing" {{ $hpp === 'missing' ? 'selected' : '' }}>⚠ Tanpa HPP</option>
                </select>
            </div>
        </div>

        <!-- Row 2: Date Range + Quick Buttons -->
        <div class="flex flex-col sm:flex-row gap-3 items-end">
            <!-- Quick Date Buttons -->
            <div class="flex gap-1">
                @php
                    $today = \Carbon\Carbon::today();
                    $q7 = \Carbon\Carbon::today()->subDays(7)->format('Y-m-d');
                    $q30 = \Carbon\Carbon::today()->subDays(30)->format('Y-m-d');
                    $startOfMonth = \Carbon\Carbon::now()->startOfMonth()->format('Y-m-d');
                    $todayStr = $today->format('Y-m-d');
                @endphp
                <button type="button" onclick="setDateRange('{{ $todayStr }}','{{ $todayStr }}')" class="quick-date-btn h-9 px-3 rounded-lg border border-gray-300 text-xs font-medium text-gray-600 hover:bg-gray-50">Hari ini</button>
                <button type="button" onclick="setDateRange('{{ $q7 }}','{{ $todayStr }}')" class="quick-date-btn h-9 px-3 rounded-lg border border-gray-300 text-xs font-medium text-gray-600 hover:bg-gray-50">7 Hari</button>
                <button type="button" onclick="setDateRange('{{ $q30 }}','{{ $todayStr }}')" class="quick-date-btn h-9 px-3 rounded-lg border border-gray-300 text-xs font-medium text-gray-600 hover:bg-gray-50">30 Hari</button>
                <button type="button" onclick="setDateRange('{{ $startOfMonth }}','{{ $todayStr }}')" class="quick-date-btn h-9 px-3 rounded-lg border border-gray-300 text-xs font-medium text-gray-600 hover:bg-gray-50">Bulan Ini</button>
            </div>
            <div class="flex gap-2 items-end flex-1">
                <div class="flex-1">
                    <label class="block text-xs font-medium text-gray-500 mb-1">Dari</label>
                    <input type="date" name="start_date" value="{{ $startDate }}" id="start_date" 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">
                </div>
                <div class="flex-1">
                    <label class="block text-xs font-medium text-gray-500 mb-1">Sampai</label>
                    <input type="date" name="end_date" value="{{ $endDate }}" id="end_date" 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">
                </div>
            </div>
            <div class="flex gap-2">
                <button type="submit" class="h-9 px-4 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 flex items-center gap-1">
                    <span class="material-symbols-outlined text-base">filter_list</span>
                    Filter
                </button>
                <a href="{{ route('admin.orders') }}" class="h-9 px-4 rounded-lg border border-gray-300 text-gray-600 text-sm font-medium hover:bg-gray-50 flex items-center">Reset</a>
            </div>
        </div>

        <!-- Active Filters Summary -->
        @php $rq = request()->query(); @endphp
        @if(request('q') || request('platform') || request('store_id') || request('hpp') || request('start_date') || request('end_date'))
        <div class="flex items-center gap-2 flex-wrap">
            <span class="text-xs text-gray-400">Aktif:</span>
            @if(request('q'))<span class="inline-flex items-center gap-1 px-2 py-0.5 bg-blue-50 text-blue-700 text-xs rounded-full">🔍 {{ request('q') }} <a href="{{ request()->url() }}?{{ http_build_query(collect($rq)->except(['q','page'])->all()) }}" class="ml-1 hover:text-blue-900">×</a></span>@endif
            @if(request('platform'))<span class="inline-flex items-center gap-1 px-2 py-0.5 bg-orange-50 text-orange-700 text-xs rounded-full">{{ ucfirst(request('platform')) }} <a href="{{ request()->url() }}?{{ http_build_query(collect($rq)->except(['platform','page'])->all()) }}" class="ml-1 hover:text-orange-900">×</a></span>@endif
            @if(request('store_id'))<span class="inline-flex items-center gap-1 px-2 py-0.5 bg-purple-50 text-purple-700 text-xs rounded-full">{{ $stores->find(request('store_id'))?->name ?? request('store_id') }} <a href="{{ request()->url() }}?{{ http_build_query(collect($rq)->except(['store_id','page'])->all()) }}" class="ml-1 hover:text-purple-900">×</a></span>@endif
            @if(request('hpp'))<span class="inline-flex items-center gap-1 px-2 py-0.5 bg-amber-50 text-amber-700 text-xs rounded-full">{{ request('hpp') === 'ok' ? '✓ Dengan HPP' : '⚠ Tanpa HPP' }} <a href="{{ request()->url() }}?{{ http_build_query(collect($rq)->except(['hpp','page'])->all()) }}" class="ml-1 hover:text-amber-900">×</a></span>@endif
            @if(request('start_date') || request('end_date'))<span class="inline-flex items-center gap-1 px-2 py-0.5 bg-green-50 text-green-700 text-xs rounded-full">📅 {{ request('start_date') ?? ' awal' }} → {{ request('end_date') ?? 'sekarang' }} <a href="{{ request()->url() }}?{{ http_build_query(collect($rq)->except(['start_date','end_date','page'])->all()) }}" class="ml-1 hover:text-green-900">×</a></span>@endif
        </div>
        @endif
    </form>

    <script>
    function setDateRange(start, end) {
        document.getElementById('start_date').value = start;
        document.getElementById('end_date').value = end;
    }
    </script>

    <!-- Summary Cards -->
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
        <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
            <div class="flex items-center justify-between">
                <span class="text-xs text-gray-500">Total Orders</span>
                <div class="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center">
                    <span class="material-symbols-outlined text-blue-600 text-lg">shopping_bag</span>
                </div>
            </div>
            <p class="text-xl font-bold text-gray-900 mt-2">{{ number_format($totalOrders) }}</p>
        </div>
        <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
            <div class="flex items-center justify-between">
                <span class="text-xs text-gray-500">Revenue</span>
                <div class="w-8 h-8 rounded-lg bg-purple-100 flex items-center justify-center">
                    <span class="material-symbols-outlined text-purple-600 text-lg">payments</span>
                </div>
            </div>
            <p class="text-xl font-bold text-gray-900 mt-2">Rp {{ number_format($totalRevenue, 0, ',', '.') }}</p>
        </div>
        <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
            <div class="flex items-center justify-between">
                <span class="text-xs text-gray-500">Potongan Admin</span>
                <div class="w-8 h-8 rounded-lg bg-amber-100 flex items-center justify-center">
                    <span class="material-symbols-outlined text-amber-600 text-lg">admin_panel_settings</span>
                </div>
            </div>
            <p class="text-xl font-bold text-amber-600 mt-2">Rp {{ number_format($totalAdminFee + $totalTransactionFee + $totalServiceFee, 0, ',', '.') }}</p>
        </div>
        <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
            <div class="flex items-center justify-between">
                <span class="text-xs text-gray-500">Profit</span>
                <div class="w-8 h-8 rounded-lg bg-green-100 flex items-center justify-center">
                    <span class="material-symbols-outlined text-green-600 text-lg">account_balance_wallet</span>
                </div>
            </div>
            <p class="text-xl font-bold {{ $totalProfit >= 0 ? 'text-green-600' : 'text-red-600' }} mt-2">Rp {{ number_format($totalProfit, 0, ',', '.') }}</p>
        </div>
        <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
            <div class="flex items-center justify-between">
                <span class="text-xs text-gray-500">Margin</span>
                <div class="w-8 h-8 rounded-lg bg-teal-100 flex items-center justify-center">
                    <span class="material-symbols-outlined text-teal-600 text-lg">percent</span>
                </div>
            </div>
            <p class="text-xl font-bold {{ $totalMargin >= 0 ? 'text-teal-600' : 'text-red-600' }} mt-2">{{ number_format($totalMargin, 1, ',', '.') }}%</p>
        </div>
        @if($negativeMarginOrders > 0)
        <div class="bg-red-50 rounded-xl p-4 border border-red-200 shadow-sm">
            <div class="flex items-center justify-between">
                <span class="text-xs text-red-500">Margin Minus</span>
                <div class="w-8 h-8 rounded-lg bg-red-100 flex items-center justify-center">
                    <span class="material-symbols-outlined text-red-600 text-lg">trending_down</span>
                </div>
            </div>
            <p class="text-xl font-bold text-red-600 mt-2">Rp {{ number_format($negativeMarginAmount, 0, ',', '.') }}</p>
            <p class="text-xs text-red-500 mt-1">{{ $negativeMarginOrders }} transaksi</p>
        </div>
        @endif
    </div>

    <!-- Orders 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>
                        @php
                            function sortLink($col, $label, $sortBy, $sortDir, $baseUrl) {
                                $dir = ($sortBy === $col && $sortDir === 'asc') ? 'desc' : 'asc';
                                $icon = '';
                                if ($sortBy === $col) {
                                    $icon = $sortDir === 'asc' ? ' ↑' : ' ↓';
                                }
                                $params = array_merge(request()->all(), ['sort' => $col, 'dir' => $dir]);
                                return '<a href="' . url()->current() . '?' . http_build_query($params) . '" class="hover:text-blue-600">' . $label . $icon . '</a>';
                            }
                        @endphp
                        <th class="px-4 py-3 font-semibold">{!! sortLink('order_date', 'Order ID', $sortBy, $sortDir, '') !!}</th>
                        <th class="px-4 py-3 font-semibold">Tanggal</th>
                        <th class="px-4 py-3 font-semibold">{!! sortLink('product_name', 'Produk', $sortBy, $sortDir, '') !!}</th>
                        <th class="px-4 py-3 font-semibold">Toko</th>
                        <th class="px-4 py-3 font-semibold">{!! sortLink('platform', 'Platform', $sortBy, $sortDir, '') !!}</th>
                        <th class="px-4 py-3 font-semibold text-right">{!! sortLink('quantity', 'Qty', $sortBy, $sortDir, '') !!}</th>
                        <th class="px-4 py-3 font-semibold text-right">{!! sortLink('total_revenue', 'Revenue', $sortBy, $sortDir, '') !!}</th>
                        <th class="px-4 py-3 font-semibold text-right">Trans. Fee</th>
                        <th class="px-4 py-3 font-semibold text-right">Admin Fee</th>
                        <th class="px-4 py-3 font-semibold text-right">Service Fee</th>
                        <th class="px-4 py-3 font-semibold text-right">{!! sortLink('profit', 'Profit', $sortBy, $sortDir, '') !!}</th>
                        <th class="px-4 py-3 font-semibold text-right">{!! sortLink('margin', 'Margin', $sortBy, $sortDir, '') !!}</th>
                        <th class="px-4 py-3 font-semibold text-center">Detail</th>
                    </tr>
                </thead>
                <tbody class="text-sm divide-y divide-gray-100">
                    @forelse($orders as $order)
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-3 font-medium text-gray-900">{{ $order->order_id }}</td>
                        <td class="px-4 py-3 text-gray-500 whitespace-nowrap">{{ $order->order_date->format('d M Y') }}</td>
                        <td class="px-4 py-3 text-gray-900 max-w-[200px] truncate">{{ $order->product_name }}</td>
                        <td class="px-4 py-3">
                            @if($order->store)
                                <span class="px-2 py-0.5 bg-blue-50 text-blue-700 text-xs font-semibold rounded border border-blue-100">{{ $order->store->name }}</span>
                            @else
                                <span class="text-gray-400 text-xs">-</span>
                            @endif
                        </td>
                        <td class="px-4 py-3">
                            @if($order->platform == 'shopee')
                                <span class="px-2 py-0.5 bg-orange-500 text-white text-xs font-semibold rounded">Shopee</span>
                            @elseif($order->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">{{ $order->platform }}</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-right text-gray-700">{{ $order->quantity }}</td>
                        <td class="px-4 py-3 text-right font-medium text-gray-900 whitespace-nowrap">Rp {{ number_format($order->total_revenue, 0, ',', '.') }}</td>
                        <td class="px-4 py-3 text-right text-gray-500 whitespace-nowrap">Rp {{ number_format($order->transaction_fee, 0, ',', '.') }}</td>
                        <td class="px-4 py-3 text-right text-gray-500 whitespace-nowrap">Rp {{ number_format($order->admin_fee, 0, ',', '.') }}</td>
                        <td class="px-4 py-3 text-right text-gray-500 whitespace-nowrap">Rp {{ number_format($order->service_fee, 0, ',', '.') }}</td>
                        <td class="px-4 py-3 text-right whitespace-nowrap">
                            @if($order->hpp_missing)
                                <span class="text-gray-400 line-through">Rp {{ number_format($order->profit, 0, ',', '.') }}</span>
                            @else
                                <span class="font-semibold {{ $order->profit >= 0 ? 'text-green-600' : 'text-red-600' }}">Rp {{ number_format($order->profit, 0, ',', '.') }}</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-right whitespace-nowrap">
                            @if($order->total_revenue > 0)
                                <span class="{{ $order->profit >= 0 ? 'text-green-600' : 'text-red-600' }}">{{ round($order->profit / $order->total_revenue * 100, 1) }}%</span>
                            @else
                                <span class="text-gray-400">-</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-center">
                            <a href="{{ route('admin.orders.show', $order->id) }}" class="inline-flex p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded" title="Lihat Detail">
                                <span class="material-symbols-outlined text-lg">visibility</span>
                            </a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="14" class="px-4 py-12 text-center">
                            <span class="material-symbols-outlined text-5xl text-gray-300">inbox</span>
                            <p class="mt-3 text-gray-500">Tidak ada data transaksi</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        @if($orders->hasPages())
        <div class="px-4 py-3 border-t border-gray-200 flex flex-col sm:flex-row items-center justify-between gap-2">
            <p class="text-sm text-gray-500">
                Menampilkan {{ $orders->firstItem() }} - {{ $orders->lastItem() }} dari {{ number_format($orders->total()) }} transaksi
            </p>
            <div class="flex items-center gap-1">
                {{ $orders->links('pagination::tailwind') }}
            </div>
        </div>
        @endif
    </div>
</div>
@endsection