@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 opacity-50" style="background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNCI+PGNpcmNsZSBjeD0iMzAiIGN5PSIzMCIgcj0iMiIvPjwvZz48L2c+PC9zdmc+')"></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

@unless ($defaultTeacherCashbox)
    <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-3 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($pendingPayouts, 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>

{{-- Teachers Grid --}}
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-6">
    @foreach ($teachers as $t)
        <button onclick="openTeacherForm({{ $t->id }}, '{{ $t->name }}', {{ $t->cut_percent ?? 0 }})"
                class="bg-white rounded-[16px] border border-gray-200 p-4 shadow-sm hover:border-accent-500/40 hover:shadow-md transition-all text-right cursor-pointer">
            <div class="w-10 h-10 rounded-full bg-gradient-to-br from-accent-400 to-accent-600 text-white flex items-center justify-center text-sm font-bold mb-2">{{ mb_substr($t->name, 0, 1) }}</div>
            <div class="font-semibold text-sm text-primary-900">{{ $t->name }}</div>
            <div class="text-xs text-muted mt-0.5">
                نسبة الخصم: <span class="font-bold text-accent-500">{{ $t->cut_percent ?? 'غير محددة' }}{{ $t->cut_percent ? '%' : '' }}</span>
            </div>
        </button>
    @endforeach
</div>

{{-- Payouts Table --}}
<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><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 ($teacherPayouts as $p)
                    <tr class="hover:bg-surface/50 transition-colors text-sm">
                        <td class="px-4 py-3 font-semibold text-primary-900">{{ $p->teacher_name ?? '—' }}</td>
                        <td class="px-4 py-3 text-muted">{{ $p->course_name }}</td>
                        <td class="px-4 py-3">{{ $p->student_count }}</td>
                        <td class="px-4 py-3">{{ number_format($p->course_price, 2) }}</td>
                        <td class="px-4 py-3">{{ $p->cut_percent }}%</td>
                        <td class="px-4 py-3 font-bold">{{ number_format($p->student_count * $p->course_price, 2) }}</td>
                        <td class="px-4 py-3 text-accent-500 font-bold">{{ number_format($p->amount, 2) }}</td>
                        <td class="px-4 py-3 text-green-600 font-bold">{{ number_format(($p->student_count * $p->course_price) - $p->amount, 2) }}</td>
                        <td class="px-4 py-3">
                            <span class="text-xs px-2 py-0.5 rounded-full {{ $p->status === 'pending' ? 'bg-amber-50 text-amber-700' : 'bg-green-50 text-green-700' }}">
                                {{ $p->status === 'pending' ? 'معلق' : 'مدفوع' }}
                            </span>
                        </td>
                        <td class="px-4 py-3">
                            @if ($p->status === 'pending')
                                <form method="POST" action="{{ route('finance.teachers.pay-payout', $p->id) }}">
                                    @csrf
                                    <input type="hidden" name="cashbox_id" value="{{ $defaultTeacherCashbox->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" {{ $defaultTeacherCashbox ? '' : 'disabled' }}>💳 دفع</button>
                                </form>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="10" class="px-4 py-10 text-center text-muted text-sm">لا توجد مستحقات</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if (method_exists($teacherPayouts, 'links'))<div class="px-5 py-4 border-t border-gray-100">{{ $teacherPayouts->links() }}</div>@endif
</div>

{{-- Add Modal --}}
<div id="addModal" class="fixed inset-0 z-[9999] bg-black/40 backdrop-blur-sm flex items-center justify-center hidden" onclick="if(event.target===this)closeModal()">
    <div class="bg-white rounded-[20px] shadow-2xl border border-gray-200 p-8 w-full max-w-lg mx-4" onclick="event.stopPropagation()">
        <div class="flex items-center justify-between mb-6">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-accent-500/10 flex items-center justify-center text-lg">➕</div>
                <div>
                    <h2 class="text-lg font-bold text-primary-900">إضافة مستحقات معلم</h2>
                    <p id="teacherNameDisplay" class="text-xs text-muted"></p>
                </div>
            </div>
            <button onclick="closeModal()" class="w-8 h-8 rounded-lg bg-gray-100 text-muted hover:bg-gray-200 hover:text-text flex items-center justify-center transition-all cursor-pointer text-lg">&times;</button>
        </div>
        <form method="POST" action="{{ route('finance.teachers.payout') }}" x-data="{
            students: 0,
            price: 0,
            cutPercent: 0,
            get gross() { return this.students * this.price; },
            get payout() { return this.gross * (this.cutPercent / 100); },
            get net() { return this.gross - this.payout; }
        }">
            @csrf
            <input type="hidden" name="teacher_id" id="formTeacherId">
            <div class="mb-4">
                <label class="block text-xs font-semibold text-muted mb-1.5">اسم الدورة</label>
                <input type="text" name="course_name" required placeholder="اسم الدورة..."
                       class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
            </div>
            <div class="grid grid-cols-2 gap-3 mb-4">
                <div>
                    <label class="block text-xs font-semibold text-muted mb-1.5">عدد الطلاب المسجلين</label>
                    <input type="number" x-model="students" name="total_students" required min="1"
                           class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-muted mb-1.5">سعر الدورة</label>
                    <input type="number" step="0.01" x-model="price" name="course_price" required min="0"
                           class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
                </div>
            </div>
            <div class="grid grid-cols-2 gap-3 mb-4">
                <div>
                    <label class="block text-xs font-semibold text-muted mb-1.5">نسبة المعلم (%) <span class="text-[0.55rem] text-accent-500">(مسحوبة من ملف الموظف)</span></label>
                    <div class="w-full rounded-xl border border-gray-200 bg-gray-50 px-4 py-2.5 text-sm text-primary-900 font-bold" x-text="cutPercent + '%'">0%</div>
                    <input type="hidden" name="teacher_cut_percent" id="formCutPercent" x-model="cutPercent">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-muted mb-1.5">العملة</label>
                    <select name="currency" class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
                        <option value="USD">🇺🇸 USD</option>
                        <option value="TRY">🇹🇷 TRY</option>
                        <option value="EGP">🇪🇬 EGP</option>
                    </select>
                </div>
            </div>

            {{-- Live Calculation --}}
            <div class="p-4 rounded-xl bg-gray-50 border border-gray-200 mb-4 space-y-1.5">
                <p class="text-xs text-muted">حساب تلقائي:</p>
                <div class="flex items-center justify-between text-sm">
                    <span class="text-muted">إجمالي المبيعات</span>
                    <span class="font-bold text-primary-900" x-text="gross.toFixed(2)">0.00</span>
                </div>
                <div class="flex items-center justify-between text-sm">
                    <span class="text-muted">مستحق المعلم (<span x-text="cutPercent">0</span>%)</span>
                    <span class="font-bold text-accent-500" x-text="payout.toFixed(2)">0.00</span>
                </div>
                <hr class="border-gray-200">
                <div class="flex items-center justify-between text-sm">
                    <span class="font-semibold">صافي الإيراد</span>
                    <span class="font-bold text-green-600" x-text="net.toFixed(2)">0.00</span>
                </div>
            </div>

            <button type="submit" class="w-full px-5 py-3 bg-accent-500 text-white rounded-xl text-sm font-bold hover:bg-accent-600 transition-all shadow-sm shadow-accent-500/20 flex items-center justify-center gap-2 cursor-pointer">
                <span>➕</span> إضافة المستحقات
            </button>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
function openTeacherForm(id, name, cutPercent) {
    document.getElementById('formTeacherId').value = id;
    document.getElementById('teacherNameDisplay').textContent = name;
    document.getElementById('addModal').classList.remove('hidden');
    var form = document.querySelector('#addModal form');
    if (form && form._x_dataStack) {
        form._x_dataStack[0].cutPercent = cutPercent;
    }
}
function closeModal() {
    document.getElementById('addModal').classList.add('hidden');
}
</script>
@endpush