@extends('layouts.app')

@section('content')
<div class="flex justify-between items-center mb-6">
    <h2 class="text-2xl font-bold text-gold">إدارة الرواتب</h2>
    @can('create_payrolls')
    <a href="{{ route('admin.payrolls.create') }}" class="btn-gold">إنشاء دورة رواتب جديدة</a>
    @endcan
</div>

<div class="bg-black/20 border border-gray-800 rounded-2xl p-6 mb-8">
    <form action="{{ route('admin.payrolls.index') }}" method="GET" class="flex gap-4">
        <div class="flex-1">
            <select name="branch_id" class="w-full bg-black border-gray-800 rounded-lg px-4 py-2 text-white outline-none">
                <option value="">جميع الفروع</option>
                @foreach($branches as $branch)
                <option value="{{ $branch->id }}" {{ request('branch_id') == $branch->id ? 'selected' : '' }}>{{ $branch->name }}</option>
                @endforeach
            </select>
        </div>
        <button type="submit" class="px-6 py-2 bg-gray-800 text-white rounded-lg">تصفية</button>
    </form>
</div>

<div class="bg-black/20 border border-gray-800 rounded-2xl overflow-hidden">
    <table class="w-full text-right">
        <thead>
            <tr class="bg-black/40 border-b border-gray-800">
                <th class="px-6 py-4 text-gray-400">الشهر</th>
                <th class="px-6 py-4 text-gray-400">الفرع</th>
                <th class="px-6 py-4 text-gray-400">الحالة</th>
                <th class="px-6 py-4 text-gray-400">أنشئ بواسطة</th>
                <th class="px-6 py-4 text-gray-400">العمليات</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-800">
            @foreach($cycles as $cycle)
            <tr class="hover:bg-white/5 transition-colors">
                <td class="px-6 py-4 font-bold">{{ $cycle->month }}</td>
                <td class="px-6 py-4">{{ $cycle->branch->name }}</td>
                <td class="px-6 py-4">
                    @if($cycle->status === 'approved')
                    <span class="px-3 py-1 rounded-full text-xs font-bold bg-green-500/20 text-green-400">معتمدة</span>
                    @else
                    <span class="px-3 py-1 rounded-full text-xs font-bold bg-yellow-500/20 text-yellow-400">مسودة</span>
                    @endif
                </td>
                <td class="px-6 py-4 text-gray-400">{{ $cycle->creator->name ?? '---' }}</td>
                <td class="px-6 py-4">
                    <a href="{{ route('admin.payrolls.show', $cycle->id) }}" class="text-gold hover:underline">عرض التفاصيل</a>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

<div class="mt-6">
    {{ $cycles->links() }}
</div>
@endsection