@extends('layouts.admin')

@section('pageTitle', 'سوابق خرید')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="flex justify-between items-center mb-8">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">سوابق خرید</h1>
        <a href="{{ route('admin.purchases.create') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg">
            <i class="fas fa-plus ml-2"></i>ثبت دستی
        </a>
    </div>

    @if (session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
            {{ session('success') }}
        </div>
    @endif

    <!-- Stats Cards -->
    <div class="grid grid-cols-3 gap-6 mb-8">
        <!-- Monthly Stats -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">آمار ماهانه</h3>
            <div class="space-y-3">
                <div class="flex justify-between items-center">
                    <span class="text-gray-600 dark:text-gray-400 text-sm">کل درآمد:</span>
                    <span class="text-xl font-bold text-green-600">{{ number_format($stats['month']['total']) }} تومان</span>
                </div>
                <div class="pt-3 border-t border-gray-200 dark:border-gray-700 space-y-2">
                    <div class="flex justify-between text-sm">
                        <span class="text-blue-600">زرین‌پال:</span>
                        <span class="font-semibold">{{ number_format($stats['month']['gateway']) }} تومان</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-purple-600">بازار:</span>
                        <span class="font-semibold">{{ number_format($stats['month']['market']) }} تومان</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-yellow-600">دستی:</span>
                        <span class="font-semibold">{{ number_format($stats['month']['manual']) }} تومان</span>
                    </div>
                </div>
                <div class="pt-2 border-t border-gray-200 dark:border-gray-700">
                    <span class="text-xs text-gray-600 dark:text-gray-400">تعداد: {{ $stats['month']['count'] }} خرید</span>
                </div>
            </div>
        </div>

        <!-- Weekly Stats -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">آمار هفتگی</h3>
            <div class="space-y-3">
                <div class="flex justify-between items-center">
                    <span class="text-gray-600 dark:text-gray-400 text-sm">کل درآمد:</span>
                    <span class="text-xl font-bold text-green-600">{{ number_format($stats['week']['total']) }} تومان</span>
                </div>
                <div class="pt-3 border-t border-gray-200 dark:border-gray-700 space-y-2">
                    <div class="flex justify-between text-sm">
                        <span class="text-blue-600">زرین‌پال:</span>
                        <span class="font-semibold">{{ number_format($stats['week']['gateway']) }} تومان</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-purple-600">بازار:</span>
                        <span class="font-semibold">{{ number_format($stats['week']['market']) }} تومان</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-yellow-600">دستی:</span>
                        <span class="font-semibold">{{ number_format($stats['week']['manual']) }} تومان</span>
                    </div>
                </div>
                <div class="pt-2 border-t border-gray-200 dark:border-gray-700">
                    <span class="text-xs text-gray-600 dark:text-gray-400">تعداد: {{ $stats['week']['count'] }} خرید</span>
                </div>
            </div>
        </div>

        <!-- Yearly Stats -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">آمار سالانه</h3>
            <div class="space-y-3">
                <div class="flex justify-between items-center">
                    <span class="text-gray-600 dark:text-gray-400 text-sm">کل درآمد:</span>
                    <span class="text-xl font-bold text-green-600">{{ number_format($stats['year']['total']) }} تومان</span>
                </div>
                <div class="pt-3 border-t border-gray-200 dark:border-gray-700 space-y-2">
                    <div class="flex justify-between text-sm">
                        <span class="text-blue-600">زرین‌پال:</span>
                        <span class="font-semibold">{{ number_format($stats['year']['gateway']) }} تومان</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-purple-600">بازار:</span>
                        <span class="font-semibold">{{ number_format($stats['year']['market']) }} تومان</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-yellow-600">دستی:</span>
                        <span class="font-semibold">{{ number_format($stats['year']['manual']) }} تومان</span>
                    </div>
                </div>
                <div class="pt-2 border-t border-gray-200 dark:border-gray-700">
                    <span class="text-xs text-gray-600 dark:text-gray-400">تعداد: {{ $stats['year']['count'] }} خرید</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
        <form method="GET" class="space-y-4">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div>
                    <label class="block text-sm font-semibold text-gray-900 dark:text-white mb-2">کاربر</label>
                    <select name="user_id" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white">
                        <option value="">تمام کاربران</option>
                        @foreach($users as $u)
                            <option value="{{ $u->id }}" {{ request('user_id') == $u->id ? 'selected' : '' }}>{{ $u->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-900 dark:text-white mb-2">پلن</label>
                    <select name="plan_id" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white">
                        <option value="">تمام پلن‌ها</option>
                        @foreach($plans as $p)
                            <option value="{{ $p->id }}" {{ request('plan_id') == $p->id ? 'selected' : '' }}>{{ $p->title }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-900 dark:text-white mb-2">منبع خرید</label>
                    <select name="source" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white">
                        <option value="">تمام منابع</option>
                        <option value="gateway" {{ request('source') == 'gateway' ? 'selected' : '' }}>
                            💳 زرین‌پال
                        </option>
                        <option value="market" {{ request('source') == 'market' ? 'selected' : '' }}>
                            🛍️ بازار/مایکت
                        </option>
                        <option value="manual" {{ request('source') == 'manual' ? 'selected' : '' }}>
                            📝 دستی
                        </option>
                    </select>
                </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-search ml-2"></i>جستجو
                    </button>
                </div>
            </div>

            <!-- Advanced Filters -->
            <div x-data="{ advancedOpen: {{ request('date_from') || request('date_to') ? 'true' : 'false' }} }" class="border-t border-gray-200 dark:border-gray-700 pt-4">
                <button type="button" @click="advancedOpen = !advancedOpen" class="text-blue-600 hover:text-blue-700 text-sm font-semibold">
                    <i class="fas" :class="advancedOpen ? 'fa-chevron-up' : 'fa-chevron-down'" style="margin-left: 6px;"></i>
                    فیلترهای پیشرفته
                </button>
                
                <div x-show="advancedOpen" x-transition class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-4">
                    <div>
                        <label class="block text-sm font-semibold text-gray-900 dark:text-white mb-2">از تاریخ</label>
                        <input type="date" name="date_from" value="{{ request('date_from') }}" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-900 dark:text-white mb-2">تا تاریخ</label>
                        <input type="date" name="date_to" value="{{ request('date_to') }}" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white">
                    </div>
                    <div class="flex items-end">
                        <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg">
                            اعمال فیلتر
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <!-- Purchases Table -->
    <div class="overflow-x-auto bg-white dark:bg-gray-800 rounded-lg shadow">
        <table class="w-full">
            <thead class="bg-gray-100 dark:bg-gray-700">
                <tr>
                    <th class="px-6 py-3 text-right text-sm font-semibold text-gray-900 dark:text-white">کاربر</th>
                    <th class="px-6 py-3 text-right text-sm font-semibold text-gray-900 dark:text-white">پلن</th>
                    <th class="px-6 py-3 text-right text-sm font-semibold text-gray-900 dark:text-white">منبع</th>
                    <th class="px-6 py-3 text-right text-sm font-semibold text-gray-900 dark:text-white">تاریخ شروع</th>
                    <th class="px-6 py-3 text-right text-sm font-semibold text-gray-900 dark:text-white">تاریخ انقضا</th>
                    <th class="px-6 py-3 text-right text-sm font-semibold text-gray-900 dark:text-white">وضعیت</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                @forelse($purchases as $purchase)
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                        <td class="px-6 py-4 text-sm text-gray-900 dark:text-white">
                            @if($purchase->user)
                                {{ $purchase->user->name }}
                            @else
                                <span class="text-gray-400 italic">کاربر حذف شده</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-300">{{ $purchase->plan->title }}</td>
                        <td class="px-6 py-4 text-sm">
                            @if($purchase->purchase_source == 'gateway')
                                <span class="px-3 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-800">درگاه</span>
                            @elseif($purchase->purchase_source == 'market')
                                <span class="px-3 py-1 rounded-full text-xs font-semibold bg-purple-100 text-purple-800">مارکت</span>
                            @else
                                <span class="px-3 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800">دستی</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-300">{{ \Carbon\Carbon::parse($purchase->starts_at)->format('Y/m/d H:i') }}</td>
                        <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-300">{{ \Carbon\Carbon::parse($purchase->expires_at)->format('Y/m/d H:i') }}</td>
                        <td class="px-6 py-4 text-sm">
                            <span class="px-3 py-1 rounded-full text-xs font-semibold {{ $purchase->status == 'active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                {{ $purchase->status == 'active' ? 'فعال' : 'منقضی' }}
                            </span>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="px-6 py-4 text-center text-gray-500">سابقه خریدی یافت نشد</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-4">
        {{ $purchases->links() }}
    </div>
</div>
@endsection