@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">ADMIN</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

    <div class="bg-white rounded-[16px] border border-gray-200 p-5 shadow-sm relative overflow-hidden mb-6">
        <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-primary-900 mt-0.5">{{ $pending->count() }}</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>

    @if ($pending->isEmpty())
        <div class="bg-white rounded-[16px] border border-gray-200 shadow-sm overflow-hidden">
            <div class="px-5 py-12 text-center">
                <div class="text-4xl mb-3">✅</div>
                <p class="text-muted text-sm font-semibold">لا توجد موافقات معلقة حالياً</p>
            </div>
        </div>
    @else
        <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-base flex items-center gap-2"><span class="w-6 h-6 rounded-md bg-accent-500/10 flex items-center justify-center text-xs">📋</span> طلبات الموافقة</h2>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-right">
                    <thead>
                        <tr class="border-b border-gray-100">
                            <th class="px-5 py-3.5 text-xs font-semibold text-muted tracking-wide">النوع</th>
                            <th class="px-5 py-3.5 text-xs font-semibold text-muted tracking-wide">مقدم الطلب</th>
                            <th class="px-5 py-3.5 text-xs font-semibold text-muted tracking-wide">التفاصيل</th>
                            <th class="px-5 py-3.5 text-xs font-semibold text-muted tracking-wide">التاريخ</th>
                            <th class="px-5 py-3.5 text-xs font-semibold text-muted tracking-wide text-center">إجراء</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        @foreach ($pending as $approval)
                            <tr class="hover:bg-surface/50 transition-colors">
                                <td class="px-5 py-4">
                                    @php $requestType = $approval->request_type ?? ''; @endphp
                                    <span class="text-xs px-2.5 py-1 rounded-full {{ $requestType === 'recurring_bill' ? 'bg-accent-50 text-accent-600 border border-accent-100' : 'bg-secondary-50 text-secondary-600 border border-secondary-100' }} font-medium">
                                        {{ $requestType === 'recurring_bill' ? 'فاتورة دورية' : $requestType }}
                                    </span>
                                </td>
                                <td class="px-5 py-4 font-semibold text-primary-900">{{ $approval->employee_name ?? '—' }}</td>
                                <td class="px-5 py-4 text-muted max-w-[250px]">
                                    @if ($approval->bill_title)
                                        <div class="text-sm font-semibold text-primary-900">{{ $approval->bill_title }}</div>
                                        <div class="text-xs">{{ number_format($approval->bill_amount, 2) }} {{ $approval->bill_currency }}</div>
                                        <div class="text-xs">{{ $approval->bill_frequency ? ['monthly'=>'شهري','weekly'=>'أسبوعي','daily'=>'يومي'][$approval->bill_frequency] ?? $approval->bill_frequency : 'لمرة واحدة' }}</div>
                                    @else
                                        <div class="text-xs">{{ Str::limit($approval->details_before ?? '', 120) }}</div>
                                    @endif
                                </td>
                                <td class="px-5 py-4 text-muted">{{ $approval->created_at ? \Carbon\Carbon::parse($approval->created_at)->format('Y-m-d') : '—' }}</td>
                                <td class="px-5 py-4 text-center">
                                    <div class="flex items-center justify-center gap-2">
                                        <form method="POST" action="{{ route('admin.approvals.recurring-bill.approve', $approval->id) }}" class="inline">
                                            @csrf
                                            <button type="submit" class="px-3 py-1.5 rounded-lg text-xs font-bold text-white bg-green-500 hover:bg-green-600 transition-all cursor-pointer">اعتماد</button>
                                        </form>
                                        <button onclick="document.getElementById('rejectModal{{ $approval->id }}').classList.remove('hidden')"
                                                class="px-3 py-1.5 rounded-lg text-xs font-bold text-white bg-red-500 hover:bg-red-600 transition-all cursor-pointer">رفض</button>
                                    </div>
                                    <div id="rejectModal{{ $approval->id }}" class="fixed inset-0 z-[9999] bg-black/40 backdrop-blur-sm flex items-center justify-center hidden" onclick="if(event.target===this)this.classList.add('hidden')">
                                        <div class="bg-white rounded-[20px] shadow-2xl border border-gray-200 p-6 w-full max-w-sm mx-4" onclick="event.stopPropagation()">
                                            <div class="flex items-center justify-between mb-4">
                                                <h3 class="text-base font-bold text-primary-900">سبب الرفض</h3>
                                                <button onclick="document.getElementById('rejectModal{{ $approval->id }}').classList.add('hidden')" class="w-7 h-7 rounded-lg bg-gray-100 text-muted hover:bg-gray-200 flex items-center justify-center transition-all cursor-pointer text-lg">&times;</button>
                                            </div>
                                            <form method="POST" action="{{ route('admin.approvals.recurring-bill.reject', $approval->id) }}">
                                                @csrf
                                                <textarea name="reason" rows="3" 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-red-500/20 focus:border-red-500 transition-all mb-4"></textarea>
                                                <button type="submit" class="w-full px-4 py-2.5 bg-red-500 text-white rounded-xl text-sm font-bold hover:bg-red-600 transition-all cursor-pointer">تأكيد الرفض</button>
                                            </form>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endif
@endsection