@extends('layouts.app')
@section('title', 'مسير الرواتب')
@section('page_title', 'مسير الرواتب')

@section('content')
{{-- KPI Cards --}}
<div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-8">
    <div class="bg-gradient-to-br from-primary-600 to-blue-700 rounded-2xl p-6 text-white shadow-lg shadow-primary-500/20">
        <div class="flex items-center justify-between mb-4">
            <div class="h-12 w-12 bg-white/20 rounded-xl flex items-center justify-center">
                <i class="fa-solid fa-users text-2xl"></i>
            </div>
            <span class="text-xs bg-white/20 px-3 py-1 rounded-full">نشطون</span>
        </div>
        <p class="text-3xl font-extrabold">{{ number_format($activeEmployees) }}</p>
        <p class="text-sm text-blue-100 mt-1">موظف نشط</p>
    </div>
    <div class="bg-gradient-to-br from-emerald-600 to-teal-700 rounded-2xl p-6 text-white shadow-lg shadow-emerald-500/20">
        <div class="flex items-center justify-between mb-4">
            <div class="h-12 w-12 bg-white/20 rounded-xl flex items-center justify-center">
                <i class="fa-solid fa-money-bill-wave text-2xl"></i>
            </div>
            <span class="text-xs bg-white/20 px-3 py-1 rounded-full">شهري</span>
        </div>
        <p class="text-3xl font-extrabold">{{ number_format($totalPayrollBudget, 0) }}</p>
        <p class="text-sm text-emerald-100 mt-1">إجمالي الرواتب الأساسية</p>
    </div>
    <div class="bg-white dark:bg-slate-800 rounded-2xl p-6 border border-slate-200 dark:border-slate-700 shadow-sm">
        <div class="flex items-center justify-between mb-4">
            <div class="h-12 w-12 bg-amber-100 dark:bg-amber-900/30 rounded-xl flex items-center justify-center">
                <i class="fa-solid fa-calendar-check text-amber-600 text-2xl"></i>
            </div>
            @if($currentPeriod)
            <span class="text-xs {{ $currentPeriod->status === 'paid' ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700' }} px-3 py-1 rounded-full font-medium">
                {{ $currentPeriod->status_label }}
            </span>
            @endif
        </div>
        @if($currentPeriod)
        <p class="text-2xl font-extrabold text-slate-800 dark:text-white">{{ number_format($currentPeriod->total_net_salaries, 0) }}</p>
        <p class="text-sm text-slate-500 mt-1">{{ $currentPeriod->period_name }}</p>
        @else
        <p class="text-2xl font-extrabold text-slate-800 dark:text-white">—</p>
        <p class="text-sm text-slate-500 mt-1">لا توجد فترة للشهر الحالي</p>
        @endif
    </div>
</div>

{{-- Header --}}
<div class="flex items-center justify-between mb-6">
    <div>
        <h3 class="text-lg font-bold text-slate-800 dark:text-white">فترات مسير الرواتب</h3>
        <p class="text-sm text-slate-500 mt-0.5">إنشاء وإدارة مسير الرواتب الشهري</p>
    </div>
    <a href="{{ route('payroll.create') }}" class="flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white px-5 py-2.5 rounded-xl font-semibold text-sm transition-colors shadow-sm">
        <i class="fa-solid fa-plus"></i>
        فترة رواتب جديدة
    </a>
</div>

{{-- Payroll Periods Grid --}}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
    @forelse($periods as $period)
    @php
        $statusGradients = [
            'draft' => 'from-slate-500 to-slate-600',
            'calculated' => 'from-amber-500 to-orange-600',
            'approved' => 'from-blue-500 to-primary-700',
            'paid' => 'from-emerald-500 to-teal-600',
            'cancelled' => 'from-red-500 to-red-700',
        ];
        $gradient = $statusGradients[$period->status] ?? 'from-slate-500 to-slate-600';
    @endphp
    <div class="bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden hover:shadow-md transition-shadow">
        <div class="h-2 bg-gradient-to-r {{ $gradient }}"></div>
        <div class="p-5">
            <div class="flex items-start justify-between mb-4">
                <div>
                    <h4 class="font-bold text-slate-800 dark:text-white text-base">{{ $period->period_name }}</h4>
                    <p class="text-xs text-slate-400 mt-0.5">{{ $period->period_start->format('d/m') }} - {{ $period->period_end->format('d/m/Y') }}</p>
                </div>
                <span class="text-xs font-semibold px-2.5 py-1 rounded-lg bg-gradient-to-r {{ $gradient }} text-white">
                    {{ $period->status_label }}
                </span>
            </div>

            <div class="grid grid-cols-2 gap-3 mb-4">
                <div class="bg-slate-50 dark:bg-slate-700/50 rounded-xl p-3">
                    <p class="text-xs text-slate-400 mb-1">الموظفون</p>
                    <p class="font-bold text-slate-800 dark:text-white">{{ $period->total_employees }}</p>
                </div>
                <div class="bg-emerald-50 dark:bg-emerald-900/20 rounded-xl p-3">
                    <p class="text-xs text-emerald-600 dark:text-emerald-400 mb-1">صافي الرواتب</p>
                    <p class="font-bold text-emerald-700 dark:text-emerald-300">{{ number_format($period->total_net_salaries, 0) }}</p>
                </div>
            </div>

            <a href="{{ route('payroll.show', $period->id) }}" class="block text-center py-2.5 bg-slate-100 dark:bg-slate-700 hover:bg-primary-600 hover:text-white text-slate-700 dark:text-slate-300 rounded-xl text-sm font-semibold transition-colors">
                عرض التفاصيل
            </a>
        </div>
    </div>
    @empty
    <div class="col-span-3 py-20 text-center">
        <div class="h-20 w-20 bg-slate-100 dark:bg-slate-700 rounded-2xl flex items-center justify-center mx-auto mb-4">
            <i class="fa-solid fa-money-bills text-4xl text-slate-400"></i>
        </div>
        <p class="text-slate-500 font-medium mb-2">لم يتم إنشاء أي فترة رواتب بعد</p>
        <a href="{{ route('payroll.create') }}" class="text-primary-600 text-sm hover:underline">إنشاء أول فترة رواتب</a>
    </div>
    @endforelse
</div>

@if($periods->hasPages())
<div class="mt-6">{{ $periods->links() }}</div>
@endif
@endsection