@extends('layouts.app')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">أرصدة الإجازات {{ $year }}</h1>
        <p class="page-subtitle">أرصدة إجازات الموظفين حسب أنواع الإجازات</p>
    </div>
    <div class="page-actions">
        <form action="{{ route('leave-management.initialize-balances') }}" method="POST" style="display: inline;">
            @csrf
            <input type="hidden" name="year" value="{{ $year }}">
            <button type="submit" class="btn btn-success" onclick="return confirm('تهيئة أرصدة الإجازات لجميع الموظفين؟')">
                <i class="fas fa-sync-alt"></i> تهيئة الأرصدة
            </button>
        </form>
        <a href="{{ route('leave-management.types') }}" class="btn btn-secondary"><i class="fas fa-cog"></i> أنواع الإجازات</a>
    </div>
</div>

@if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
@endif

<div class="card" style="margin-bottom: 1.5rem;">
    <div class="card-body">
        <form action="{{ route('leave-management.balances') }}" method="GET" class="filter-form">
            <div class="filter-group">
                <label class="form-label">السنة</label>
                <select name="year" class="form-select" onchange="this.form.submit()">
                    @for($y = now()->year + 1; $y >= now()->year - 2; $y--)
                    <option value="{{ $y }}" {{ $year == $y ? 'selected' : '' }}>{{ $y }}</option>
                    @endfor
                </select>
            </div>
            <div class="filter-group">
                <label class="form-label">القسم</label>
                <select name="department_id" class="form-select" onchange="this.form.submit()">
                    <option value="">جميع الأقسام</option>
                    @foreach($departments as $dept)
                    <option value="{{ $dept->id }}" {{ request('department_id') == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
                    @endforeach
                </select>
            </div>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-body" style="padding: 0;">
        <div class="table-responsive">
            <table class="data-table" style="min-width: 900px;">
                <thead>
                    <tr>
                        <th style="position: sticky; right: 0; background: var(--surface); z-index: 1; min-width: 180px;">الموظف</th>
                        @foreach($leaveTypes->take(6) as $type)
                        <th style="text-align: center; min-width: 100px;">
                            <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
                                <div style="width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: {{ $type->color ?? '#6b7280' }}20; color: {{ $type->color ?? '#6b7280' }};">
                                    <i class="fas {{ $type->icon ?? 'fa-calendar' }}" style="font-size: 1rem;"></i>
                                </div>
                                <small style="font-weight: 600;">{{ $type->name_ar }}</small>
                            </div>
                        </th>
                        @endforeach
                    </tr>
                </thead>
                <tbody>
                    @forelse($employees as $emp)
                    <tr>
                        <td style="position: sticky; right: 0; background: var(--surface);">
                            <strong>{{ $emp->full_name ?? $emp->first_name . ' ' . $emp->last_name }}</strong>
                            <br><small class="text-muted">{{ $emp->department->name ?? '—' }}</small>
                        </td>
                        @foreach($leaveTypes->take(6) as $type)
                        @php
                            $bal = $emp->leave_balances[$type->id] ?? null;
                        @endphp
                        <td style="text-align: center;">
                            @if($bal)
                                <strong style="color: {{ $bal->remaining_days > 0 ? 'var(--success)' : 'var(--danger)' }};">
                                    {{ $bal->remaining_days }}
                                </strong>
                                <br><small class="text-muted">من {{ $bal->total_entitled }}</small>
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>
                        @endforeach
                    </tr>
                    @empty
                    <tr>
                        <td colspan="{{ $leaveTypes->take(6)->count() + 1 }}">
                            <div class="empty-state">
                                <i class="fas fa-wallet" style="font-size: 3rem; color: var(--text-muted);"></i>
                                <h3>لا توجد أرصدة</h3>
                                <p>اضغط "تهيئة الأرصدة" لبدء حساب الأرصدة</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="pagination-wrap">
    {{ $employees->appends(request()->query())->links() }}
</div>
@endsection