@extends('layouts.app')
@section('title', 'العمولات')
@section('content')
<div class="relative overflow-hidden rounded-[20px] bg-gradient-to-br from-primary-900 via-secondary-600 to-primary-800 p-7 mb-6 shadow-xl">
    <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNCI+PGNpcmNsZSBjeD0iMzAiIGN5PSIzMCIgcj0iMiIvPjwvZz48L2c+PC9zdmc+')] opacity-50"></div>
    <div class="relative flex items-start justify-between">
        <div>
            <span class="inline-block px-3 py-1 rounded-full bg-white/15 border border-white/20 text-[0.7rem] font-semibold tracking-wider mb-2">FINANCE</span>
            <h1 class="text-white text-[1.6rem] font-display font-extrabold">العمولات</h1>
            <p class="text-white/70 text-sm mt-1">متابعة عمولات المبيعات والقبولات</p>
        </div>
    </div>
</div>

@if (session('success'))
    <div class="mb-5 p-4 rounded-[14px] bg-success/10 border border-success/20 text-success text-sm font-semibold flex items-center gap-2">✅ {{ session('success') }}</div>
@endif
@if (session('error'))
    <div class="mb-5 p-4 rounded-[14px] bg-danger/10 border border-danger/20 text-danger text-sm font-semibold flex items-center gap-2">❌ {{ session('error') }}</div>
@endif

@unless ($defaultCashbox)
    <div class="mb-5 p-4 rounded-[14px] bg-amber-50 border border-amber-200 text-amber-800 text-sm font-semibold flex items-center gap-2">
        ⚠️ لم يتم تعيين خزنة افتراضية للعمولات — <a href="{{ route('finance.cashbox') }}" class="underline font-bold">اختر خزنة من هنا</a>
    </div>
@endunless

<div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-6">
    <div class="bg-white rounded-[16px] border border-gray-200 p-5 shadow-sm relative overflow-hidden">
        <div class="absolute top-0 left-0 right-0 h-1 bg-accent-500"></div>
        <div class="flex items-start justify-between">
            <div>
                <p class="text-xs font-semibold text-muted tracking-wide">عمولات المبيعات المعلقة</p>
                <p class="text-2xl font-display font-extrabold text-accent-500 mt-0.5">{{ number_format($totalPendingSales, 2) }} USD</p>
            </div>
            <div class="w-10 h-10 rounded-xl bg-accent-500/10 flex items-center justify-center text-lg shrink-0">💰</div>
        </div>
    </div>
    <div class="bg-white rounded-[16px] border border-gray-200 p-5 shadow-sm relative overflow-hidden">
        <div class="absolute top-0 left-0 right-0 h-1 bg-secondary-600"></div>
        <div class="flex items-start justify-between">
            <div>
                <p class="text-xs font-semibold text-muted tracking-wide">عمولات القبولات المعلقة</p>
                <p class="text-2xl font-display font-extrabold text-secondary-600 mt-0.5">{{ number_format($totalPendingAdmissions, 2) }} USD</p>
            </div>
            <div class="w-10 h-10 rounded-xl bg-secondary-500/10 flex items-center justify-center text-lg shrink-0">🎓</div>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
    <div class="bg-white rounded-[16px] border border-gray-200 shadow-sm overflow-hidden">
        <div class="px-5 py-4 border-b border-gray-100 flex items-center justify-between">
            <h2 class="font-display font-bold text-primary-900 text-sm flex items-center gap-2">💰 عمولات المبيعات</h2>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-right">
                <thead><tr class="border-b border-gray-100"><th class="px-4 py-3 text-xs font-semibold text-muted">مندوب</th><th class="px-4 py-3 text-xs font-semibold text-muted">الطالب</th><th class="px-4 py-3 text-xs font-semibold text-muted">المبلغ</th><th class="px-4 py-3 text-xs font-semibold text-muted">الحالة</th><th class="px-4 py-3 text-xs font-semibold text-muted"></th></tr></thead>
                <tbody class="divide-y divide-gray-50">
                    @forelse ($salesCommissions as $c)
                        <tr class="hover:bg-surface/50 transition-colors text-sm">
                            <td class="px-4 py-3 font-semibold text-primary-900">{{ $c->sales_name ?? '—' }}</td>
                            <td class="px-4 py-3 text-muted">{{ $c->lead_name ?? '—' }}</td>
                            <td class="px-4 py-3 font-bold">{{ number_format($c->amount, 2) }}</td>
                            <td class="px-4 py-3">
                                <span class="text-xs px-2 py-0.5 rounded-full {{ $c->status === 'pending' ? 'bg-amber-50 text-amber-700' : 'bg-green-50 text-green-700' }}">
                                    {{ $c->status === 'pending' ? 'معلق' : 'مدفوع' }}
                                </span>
                            </td>
                            <td class="px-4 py-3">
                                @if ($c->status === 'pending')
                                    <form method="POST" action="{{ route('finance.commissions.pay', ['type' => 'sales', 'id' => $c->id]) }}" class="inline">
                                        @csrf
                                        <input type="hidden" name="cashbox_id" value="{{ $defaultCashbox->id ?? '' }}">
                                        <button type="submit" onclick="this.disabled=true;this.textContent='جاري...';this.form.submit()" class="text-xs px-2 py-1 rounded-lg bg-success text-white hover:bg-green-700 transition-all cursor-pointer" {{ $defaultCashbox ? '' : 'disabled' }}>💳 دفع</button>
                                    </form>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="5" class="px-4 py-10 text-center text-muted text-sm">لا توجد عمولات مبيعات</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="bg-white rounded-[16px] border border-gray-200 shadow-sm overflow-hidden">
        <div class="px-5 py-4 border-b border-gray-100 flex items-center justify-between">
            <h2 class="font-display font-bold text-primary-900 text-sm flex items-center gap-2">🎓 عمولات القبولات</h2>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-right">
                <thead><tr class="border-b border-gray-100"><th class="px-4 py-3 text-xs font-semibold text-muted">موظف</th><th class="px-4 py-3 text-xs font-semibold text-muted">الطالب</th><th class="px-4 py-3 text-xs font-semibold text-muted">المبلغ</th><th class="px-4 py-3 text-xs font-semibold text-muted">الحالة</th><th class="px-4 py-3 text-xs font-semibold text-muted"></th></tr></thead>
                <tbody class="divide-y divide-gray-50">
                    @forelse ($admissionsCommissions as $c)
                        <tr class="hover:bg-surface/50 transition-colors text-sm">
                            <td class="px-4 py-3 font-semibold text-primary-900">{{ $c->admissions_name ?? '—' }}</td>
                            <td class="px-4 py-3 text-muted">{{ $c->lead_name ?? '—' }}</td>
                            <td class="px-4 py-3 font-bold">{{ number_format($c->amount, 2) }}</td>
                            <td class="px-4 py-3">
                                <span class="text-xs px-2 py-0.5 rounded-full {{ $c->status === 'pending' ? 'bg-amber-50 text-amber-700' : 'bg-green-50 text-green-700' }}">
                                    {{ $c->status === 'pending' ? 'معلق' : 'مدفوع' }}
                                </span>
                            </td>
                            <td class="px-4 py-3">
                                @if ($c->status === 'pending')
                                    <form method="POST" action="{{ route('finance.commissions.pay', ['type' => 'admissions', 'id' => $c->id]) }}" class="inline">
                                        @csrf
                                        <input type="hidden" name="cashbox_id" value="{{ $defaultCashbox->id ?? '' }}">
                                        <button type="submit" onclick="this.disabled=true;this.textContent='جاري...';this.form.submit()" class="text-xs px-2 py-1 rounded-lg bg-success text-white hover:bg-green-700 transition-all cursor-pointer" {{ $defaultCashbox ? '' : 'disabled' }}>💳 دفع</button>
                                    </form>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="5" class="px-4 py-10 text-center text-muted text-sm">لا توجد عمولات قبولات</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

@endsection