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

<div class="grid grid-cols-1 md:grid-cols-4 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-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-primary-900 mt-0.5">{{ $totalEmployees }}</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 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">{{ $activeToday }}</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-blue-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">{{ $avgLoginMinutes ? number_format($avgLoginMinutes, 0) : 0 }} <span class="text-sm font-semibold text-muted">د</span></p>
            </div>
            <div class="w-10 h-10 rounded-xl bg-blue-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-green-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">{{ $totalLeadsContacted }}</p>
            </div>
            <div class="w-10 h-10 rounded-xl bg-green-500/10 flex items-center justify-center text-lg shrink-0">📞</div>
        </div>
    </div>
    @isset($externalCount)
    <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-primary-900 mt-0.5">{{ $externalCount }}</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>
    @endisset
</div>

{{-- Employee Roster --}}
<div class="bg-white rounded-[16px] border border-gray-200 shadow-sm overflow-hidden mb-6">
    <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>
        <a href="{{ route('hr.employees') }}" class="text-xs px-3 py-1.5 rounded-lg bg-secondary-500/10 text-secondary-700 hover:bg-secondary-500/20 font-medium transition-all no-underline">إدارة كاملة</a>
    </div>
    <div class="px-5 py-3 border-b border-gray-100">
        <form method="GET" action="{{ route('hr.dashboard') }}" class="flex gap-2">
            <input type="text" name="emp_search" value="{{ $empSearch ?? '' }}" placeholder="🔍 بحث بالـ ID أو الاسم..."
                   class="flex-1 rounded-xl border border-gray-200 bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
            <button type="submit" class="px-3 py-2 bg-accent-500 text-white rounded-xl text-sm cursor-pointer">بحث</button>
            @if ($empSearch)
                <a href="{{ route('hr.dashboard') }}" class="px-3 py-2 bg-gray-100 text-muted rounded-xl text-sm no-underline">مسح</a>
            @endif
        </form>
    </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></tr></thead>
            <tbody class="divide-y divide-gray-50">
                @forelse ($employees as $emp)
                    <tr class="hover:bg-surface/50 transition-colors text-sm">
                        <td class="px-4 py-3 text-muted">{{ $emp->id }}</td>
                        <td class="px-4 py-3 font-semibold text-primary-900">{{ $emp->name }}</td>
                        <td class="px-4 py-3 text-muted">{{ $emp->email }}</td>
                        <td class="px-4 py-3">
                            <span class="text-xs px-2 py-0.5 rounded-full bg-secondary-50 text-secondary-600 border border-secondary-200 font-medium">{{ $emp->role }}</span>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="4" class="px-4 py-10 text-center text-muted text-sm">لا يوجد موظفون</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-5 mb-6">
    {{-- Teacher Cut Config --}}
    <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">
            <h2 class="font-display font-bold text-primary-900 text-sm flex items-center gap-2">👨‍🏫 نسب المعلمين</h2>
        </div>
        <div class="p-4">
            {{-- Global Percentage --}}
            <form method="POST" action="{{ route('hr.global-setting.save') }}" class="mb-3 p-3 bg-accent-500/5 border border-accent-500/20 rounded-xl">
                @csrf
                <input type="hidden" name="key" value="global_teacher_cut_percent">
                <label class="text-xs font-semibold text-muted block mb-1.5">النسبة العامة لجميع المعلمين</label>
                <div class="flex gap-2">
                    <input type="number" step="0.01" name="value" required value="{{ $globalSettings['global_teacher_cut_percent'] ?? 0 }}" placeholder="%"
                           class="flex-1 rounded-xl border border-gray-200 bg-white px-3 py-2 text-sm text-center font-bold focus:outline-none focus:ring-2 focus:ring-accent-500/20">
                    <button class="px-4 py-2 bg-accent-500 text-white rounded-xl text-sm cursor-pointer font-semibold">حفظ</button>
                </div>
            </form>
            {{-- Per-Employee List --}}
            <div class="space-y-1.5">
                @foreach ($allEmployees->where('role', 'teacher') as $t)
                    @php $config = $teacherConfigs->firstWhere('user_id', $t->id); @endphp
                    <button type="button" onclick="openEmployeeModal({{ $t->id }}, 'teacher')"
                            class="w-full flex items-center justify-between bg-surface rounded-lg px-3 py-2 border border-gray-100 text-sm hover:border-accent-500/40 hover:bg-accent-500/5 transition-all cursor-pointer text-right">
                        <span class="font-semibold text-primary-900">{{ $t->name }}</span>
                        <span class="text-accent-500 font-bold text-xs">{{ $config ? $config->cut_percent . '%' : 'عام' }}</span>
                    </button>
                @endforeach
                @if ($allEmployees->where('role', 'teacher')->isEmpty())
                    <p class="text-xs text-muted text-center py-3">لا يوجد معلمين</p>
                @endif
            </div>
        </div>
    </div>

    {{-- Sales Commission Config --}}
    <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">
            <h2 class="font-display font-bold text-primary-900 text-sm flex items-center gap-2">💰 عمولات المبيعات</h2>
        </div>
        <div class="p-4">
            {{-- Global Amount --}}
            <form method="POST" action="{{ route('hr.global-setting.save') }}" class="mb-3 p-3 bg-accent-500/5 border border-accent-500/20 rounded-xl">
                @csrf
                <input type="hidden" name="key" value="global_sales_commission_percent">
                <label class="text-xs font-semibold text-muted block mb-1.5">المبلغ العام لكل مناديب المبيعات (USD)</label>
                <div class="flex gap-2">
                    <input type="number" step="0.01" name="value" required value="{{ $globalSettings['global_sales_commission_percent'] ?? 0 }}" placeholder="0.00"
                           class="flex-1 rounded-xl border border-gray-200 bg-white px-3 py-2 text-sm text-center font-bold focus:outline-none focus:ring-2 focus:ring-accent-500/20">
                    <button class="px-4 py-2 bg-accent-500 text-white rounded-xl text-sm cursor-pointer font-semibold">حفظ</button>
                </div>
            </form>
            {{-- Per-Employee List --}}
            <div class="space-y-1.5">
                @foreach ($allEmployees->where('role', 'sales') as $s)
                    @php $config = $salesCommissionConfigs->firstWhere('user_id', $s->id); @endphp
                    <button type="button" onclick="openEmployeeModal({{ $s->id }}, 'sales')"
                            class="w-full flex items-center justify-between bg-surface rounded-lg px-3 py-2 border border-gray-100 text-sm hover:border-accent-500/40 hover:bg-accent-500/5 transition-all cursor-pointer text-right">
                        <span class="font-semibold text-primary-900">{{ $s->name }}</span>
                        <span class="text-accent-500 font-bold text-xs">{{ $config ? number_format($config->amount, 2) . ' USD' : 'عام' }}</span>
                    </button>
                @endforeach
                @if ($allEmployees->where('role', 'sales')->isEmpty())
                    <p class="text-xs text-muted text-center py-3">لا يوجد مناديب مبيعات</p>
                @endif
            </div>
        </div>
    </div>

    {{-- Admissions Commission Config --}}
    <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">
            <h2 class="font-display font-bold text-primary-900 text-sm flex items-center gap-2">🎓 عمولات القبولات</h2>
        </div>
        <div class="p-4">
            {{-- Global Amount --}}
            <form method="POST" action="{{ route('hr.global-setting.save') }}" class="mb-3 p-3 bg-accent-500/5 border border-accent-500/20 rounded-xl">
                @csrf
                <input type="hidden" name="key" value="global_admissions_commission_percent">
                <label class="text-xs font-semibold text-muted block mb-1.5">المبلغ العام لجميع موظفي القبول (USD)</label>
                <div class="flex gap-2">
                    <input type="number" step="0.01" name="value" required value="{{ $globalSettings['global_admissions_commission_percent'] ?? 0 }}" placeholder="0.00"
                           class="flex-1 rounded-xl border border-gray-200 bg-white px-3 py-2 text-sm text-center font-bold focus:outline-none focus:ring-2 focus:ring-accent-500/20">
                    <button class="px-4 py-2 bg-accent-500 text-white rounded-xl text-sm cursor-pointer font-semibold">حفظ</button>
                </div>
            </form>
            {{-- Per-Employee List --}}
            <div class="space-y-1.5">
                @foreach ($allEmployees->where('role', 'admission') as $a)
                    @php $config = $admissionsCommissionConfigs->firstWhere('user_id', $a->id); @endphp
                    <button type="button" onclick="openEmployeeModal({{ $a->id }}, 'admission')"
                            class="w-full flex items-center justify-between bg-surface rounded-lg px-3 py-2 border border-gray-100 text-sm hover:border-accent-500/40 hover:bg-accent-500/5 transition-all cursor-pointer text-right">
                        <span class="font-semibold text-primary-900">{{ $a->name }}</span>
                        <span class="text-accent-500 font-bold text-xs">{{ $config ? number_format($config->amount, 2) . ' USD' : 'عام' }}</span>
                    </button>
                @endforeach
                @if ($allEmployees->where('role', 'admission')->isEmpty())
                    <p class="text-xs text-muted text-center py-3">لا يوجد موظفي قبول</p>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- Employee Detail Modal --}}
<div id="employeeModal" class="fixed inset-0 z-50 hidden">
    <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" onclick="closeEmployeeModal()"></div>
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-lg bg-white rounded-2xl shadow-2xl overflow-hidden max-h-[90vh] flex flex-col">
        <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between bg-gradient-to-r from-primary-900 to-secondary-600">
            <h3 id="modal-title" class="font-display font-bold text-white text-base"></h3>
            <button onclick="closeEmployeeModal()" class="text-white/70 hover:text-white text-xl cursor-pointer">✕</button>
        </div>
        <div id="modal-body" class="p-6 overflow-y-auto flex-1 space-y-4">
            <div class="text-center py-8 text-muted text-sm">جاري التحميل...</div>
        </div>
    </div>
</div>

<script>
function openEmployeeModal(userId, type) {
    const modal = document.getElementById('employeeModal');
    const body = document.getElementById('modal-body');
    const title = document.getElementById('modal-title');
    modal.classList.remove('hidden');
    body.innerHTML = '<div class="text-center py-8 text-muted text-sm">جاري التحميل...</div>';

    fetch('{{ route("hr.employee-detail") }}?user_id=' + userId)
        .then(r => r.json())
        .then(data => {
            const u = data.user;
            title.textContent = u.name;

            let configLabel = '';
            let configField = '';
            let configPlaceholder = '';
            if (type === 'teacher') {
                config = data.teacherConfig;
                configUrl = '{{ route("hr.teacher-cut.store") }}';
                configLabel = 'نسبة المعلم';
                configField = 'cut_percent';
                configPlaceholder = '%';
            } else if (type === 'sales') {
                config = data.salesConfig;
                configUrl = '{{ route("hr.sales-commission.store") }}';
                configLabel = 'عمولة المبيعات';
                configField = 'amount';
                configPlaceholder = 'USD';
            } else {
                config = data.admissionsConfig;
                configUrl = '{{ route("hr.admissions-commission.store") }}';
                configLabel = 'عمولة القبولات';
                configField = 'amount';
                configPlaceholder = 'USD';
            }

            let html = `
                <div class="bg-surface rounded-xl p-4 border border-gray-100">
                    <div class="grid grid-cols-2 gap-3 text-sm">
                        <div><span class="text-muted">الاسم:</span> <span class="font-semibold">${u.name}</span></div>
                        <div><span class="text-muted">البريد:</span> <span class="font-semibold">${u.email || '-'}</span></div>
                        <div><span class="text-muted">الدور:</span> <span class="font-semibold">${u.role}</span></div>
                        <div><span class="text-muted">تاريخ الانضمام:</span> <span class="font-semibold">${new Date(u.created_at).toLocaleDateString('ar')}</span></div>
                    </div>
                </div>
                <div class="bg-accent-500/5 border border-accent-500/20 rounded-xl p-4">
                    <h4 class="text-sm font-bold text-primary-900 mb-2">${configLabel} المخصص</h4>
                    <form method="POST" action="${configUrl}" class="flex gap-2">
                        @csrf
                        <input type="hidden" name="user_id" value="${u.id}">
                        <input type="number" step="0.01" name="${configField}" required
                               value="${config ? config[configField] : ''}" placeholder="${configPlaceholder}"
                               class="flex-1 rounded-xl border border-gray-200 bg-white px-3 py-2 text-sm text-center font-bold">
                        <button class="px-4 py-2 bg-accent-500 text-white rounded-xl text-sm cursor-pointer font-semibold">حفظ</button>
                    </form>
                    ${config ? '<p class="text-xs text-accent-500 mt-2 font-medium">✓ تم تخصيص مبلغ مسبقاً</p>' : '<p class="text-xs text-muted mt-2">لم يتم التخصيص — يستخدم المبلغ العام</p>'}
                </div>`;

            if (data.summaries && data.summaries.length > 0) {
                html += `<div class="bg-surface rounded-xl p-4 border border-gray-100">
                    <h4 class="text-sm font-bold text-primary-900 mb-2">📋 آخر التقارير اليومية</h4>
                    <div class="space-y-1.5">`;
                data.summaries.forEach(s => {
                    html += `<div class="flex justify-between text-xs border-b border-gray-100 pb-1">
                        <span class="text-muted">${s.report_date}</span>
                        <span class="font-semibold">${s.total_login_minutes} دقيقة — ${s.leads_contacted} ليد — ${s.tasks_completed} مهمة</span>
                    </div>`;
                });
                html += '</div></div>';
            }

            if (data.attendance && data.attendance.length > 0) {
                html += `<div class="bg-surface rounded-xl p-4 border border-gray-100">
                    <h4 class="text-sm font-bold text-primary-900 mb-2">⏱️ آخر الحضور</h4>
                    <div class="space-y-1.5">`;
                data.attendance.forEach(a => {
                    const login = new Date(a.login_time).toLocaleString('ar');
                    const logout = a.logout_time ? new Date(a.logout_time).toLocaleString('ar') : 'نشط';
                    html += `<div class="flex justify-between text-xs border-b border-gray-100 pb-1">
                        <span class="text-muted">${login}</span>
                        <span class="font-semibold">${logout}</span>
                    </div>`;
                });
                html += '</div></div>';
            }

            body.innerHTML = html;
        })
        .catch(() => {
            body.innerHTML = '<div class="text-center py-8 text-danger text-sm">خطأ في تحميل البيانات</div>';
        });
}

function closeEmployeeModal() {
    document.getElementById('employeeModal').classList.add('hidden');
}
</script>

{{-- Attendance & Top Employees --}}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-5 mb-6">
    <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 gap-2">
            <div class="w-7 h-7 rounded-lg bg-accent-500/10 flex items-center justify-center text-xs">⏱️</div>
            <h2 class="font-display font-bold text-primary-900 text-sm">الحضور اليوم</h2>
        </div>
        <div class="p-4 space-y-2">
            @forelse ($todayAttendance as $log)
                <div class="flex items-center justify-between bg-surface rounded-[12px] p-3 border border-gray-100">
                    <div class="flex items-center gap-2">
                        <span class="text-sm font-semibold text-primary-900">{{ $log->name }}</span>
                        <span class="text-[0.6rem] px-1.5 py-0.5 rounded-full bg-secondary-50 text-secondary-600">{{ \Carbon\Carbon::parse($log->login_time)->format('H:i') }}</span>
                    </div>
                    @if (!$log->logout_time)
                        <form method="POST" action="{{ route('hr.clockout', $log->id) }}" class="inline">
                            @csrf
                            <button class="text-xs px-2.5 py-1.5 rounded-lg bg-danger text-white hover:bg-red-700 transition-all cursor-pointer">🔒 تسجيل خروج</button>
                        </form>
                    @else
                        <span class="text-xs text-muted">{{ \Carbon\Carbon::parse($log->logout_time)->format('H:i') }}</span>
                    @endif
                </div>
            @empty
                <p class="text-xs text-muted text-center py-6">لا يوجد حضور اليوم</p>
            @endforelse
        </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 gap-2">
            <div class="w-7 h-7 rounded-lg bg-accent-500/10 flex items-center justify-center text-xs">🏆</div>
            <h2 class="font-display font-bold text-primary-900 text-sm">الأكثر تسجيلاً للدقائق</h2>
        </div>
        <div class="p-4 space-y-2">
            @forelse ($topEmployees as $emp)
                <div class="flex items-center justify-between bg-surface rounded-[12px] p-3 border border-gray-100">
                    <span class="text-sm font-semibold text-primary-900">{{ $emp->name }}</span>
                    <span class="text-xs font-bold text-accent-500">{{ $emp->total_login_minutes }} دقيقة</span>
                </div>
            @empty
                <p class="text-xs text-muted text-center py-6">لا توجد بيانات</p>
            @endforelse
        </div>
    </div>
</div>
@endsection