@extends('layouts.app')

@section('title', 'Leave Balances')

@section('breadcrumbs')
    <div class="breadcrumb">
        <a href="{{ route('dashboard') }}">Dashboard</a>
        <span class="separator">/</span>
        <a href="{{ route('leave.requests') }}">Leave</a>
        <span class="separator">/</span>
        <span class="current">Balances</span>
    </div>
@endsection

@section('content')
<div class="space-y-5 animate-fade-up">

    {{-- Header --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="font-display text-2xl font-semibold text-gray-900">Leave Balances</h1>
            <p class="text-sm text-gray-500 mt-1">Year {{ $year }} — All employees' leave balance overview</p>
        </div>
        <div class="flex items-center gap-2">
            <a href="{{ route('leave.adjust') }}?year={{ $year }}" class="btn-secondary">
                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                Adjust Balance
            </a>
            <a href="{{ route('leave.export') }}?year={{ $year }}&type=balances" class="btn-secondary">
                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                Export
            </a>
        </div>
    </div>

    {{-- Filters --}}
    <div class="card">
        <div class="card-body">
            <form method="GET" action="{{ route('leave.balances') }}" class="flex flex-wrap items-center gap-3">
                <div class="flex-1 min-w-[200px] relative">
                    <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="Search employee..."
                           class="form-input pl-10">
                </div>
                <select name="department_id" class="form-select w-auto">
                    <option value="">All Departments</option>
                    @foreach($departments as $dept)
                        <option value="{{ $dept->id }}" {{ request('department_id') == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
                    @endforeach
                </select>
                <select name="year" class="form-select w-auto">
                    @for($y = now()->year + 1; $y >= now()->year - 2; $y--)
                        <option value="{{ $y }}" {{ $year == $y ? 'selected' : '' }}>{{ $y }}</option>
                    @endfor
                </select>
                <button type="submit" class="btn-secondary">Filter</button>
            </form>
        </div>
    </div>

    {{-- Balances Table --}}
    <div class="card">
        @if($employees->isEmpty())
            <div class="empty-state">
                <div class="empty-state-icon">
                    <svg class="w-full h-full" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
                </div>
                <div class="empty-state-title">No employees found</div>
                <div class="empty-state-text">No active employees match your filter criteria.</div>
            </div>
        @else
            <div class="overflow-x-auto">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th class="sticky left-0 bg-gray-50 z-10">Employee</th>
                            @foreach($leaveTypes as $type)
                                <th class="text-center" style="min-width: 120px">
                                    <div class="flex items-center justify-center gap-1.5">
                                        <div class="w-2 h-2 rounded-full" style="background-color: {{ $type->color }}"></div>
                                        <span>{{ $type->code }}</span>
                                    </div>
                                </th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($employees as $employee)
                            <tr>
                                <td class="sticky left-0 bg-white z-10">
                                    <div class="flex items-center gap-2.5">
                                        <div class="avatar avatar-sm bg-gradient-to-br from-primary-600 to-accent-500">
                                            {{ strtoupper(substr($employee->first_name, 0, 1)) }}
                                        </div>
                                        <div>
                                            <div class="font-medium text-gray-800 text-sm">{{ $employee->first_name }} {{ $employee->last_name }}</div>
                                            <div class="text-xxs text-gray-400">{{ $employee->employee_code }}</div>
                                        </div>
                                    </div>
                                </td>
                                @foreach($leaveTypes as $type)
                                    @php
                                        $balance = $employee->leaveBalances->firstWhere('leave_type_id', $type->id);
                                    @endphp
                                    <td class="text-center">
                                        @if($balance)
                                            <div class="text-sm font-medium {{ $balance->remaining_days <= 0 ? 'text-danger-500' : ($balance->remaining_days <= 3 ? 'text-warning-600' : 'text-gray-800') }}">
                                                {{ $balance->remaining_days }}
                                            </div>
                                            <div class="text-xxs text-gray-400">of {{ $balance->total_available }}</div>
                                            {{-- Mini progress bar --}}
                                            <div class="w-full bg-gray-100 rounded-full h-1 mt-1 max-w-[80px] mx-auto">
                                                <div class="h-1 rounded-full {{ $balance->utilization_percent > 80 ? 'bg-danger-500' : ($balance->utilization_percent > 60 ? 'bg-warning-500' : 'bg-success-500') }}"
                                                     style="width: {{ min($balance->utilization_percent, 100) }}%"></div>
                                            </div>
                                        @else
                                            <span class="text-xxs text-gray-300">—</span>
                                        @endif
                                    </td>
                                @endforeach
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            @if($employees->hasPages())
                <div class="px-5 py-4 border-t border-gray-100">
                    {{ $employees->links() }}
                </div>
            @endif
        @endif
    </div>
</div>
@endsection