@extends('layouts.app')

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

@section('breadcrumbs')
    <div class="breadcrumb">
        <a href="{{ route('my.dashboard') }}">Dashboard</a>
        <span class="separator">/</span>
        <span class="current">My Leave</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">My Leave</h1>
            <p class="text-sm text-gray-500 mt-1">Year {{ $year }} — Your leave balances and requests</p>
        </div>
        <a href="{{ route('my.leave.request') }}" class="btn-primary">
            <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>
            Request Leave
        </a>
    </div>

    {{-- Balance Cards --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
        @forelse($balances as $balance)
            <div class="card p-4">
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center gap-2">
                        <div class="w-3 h-3 rounded-full" style="background-color: {{ $balance->leaveType?->color ?? "#64748B" }}"></div>
                        <span class="font-display text-sm font-semibold text-gray-800">{{ $balance->leaveType?->name ?? "Unknown" }}</span>
                    </div>
                    <span class="text-xxs font-mono bg-gray-100 px-1.5 py-0.5 rounded text-gray-500">{{ $balance->leaveType->code }}</span>
                </div>

                {{-- Remaining days (prominent) --}}
                <div class="text-center my-3">
                    <div class="font-display text-3xl font-bold {{ $balance->remaining_days <= 0 ? 'text-danger-500' : ($balance->remaining_days <= 3 ? 'text-warning-600' : 'text-gray-900') }}">
                        {{ $balance->remaining_days }}
                    </div>
                    <div class="text-xs text-gray-500 mt-0.5">days remaining</div>
                </div>

                {{-- Progress bar --}}
                <div class="w-full bg-gray-100 rounded-full h-2 mb-3">
                    @php $pct = $balance->total_available > 0 ? min(($balance->used_days / $balance->total_available) * 100, 100) : 0; @endphp
                    <div class="h-2 rounded-full transition-all duration-300 {{ $pct > 80 ? 'bg-danger-500' : ($pct > 60 ? 'bg-warning-500' : 'bg-success-500') }}"
                         style="width: {{ $pct }}%"></div>
                </div>

                {{-- Details --}}
                <div class="space-y-1 text-xs">
                    <div class="flex justify-between text-gray-500">
                        <span>Entitled</span>
                        <span class="text-gray-700">{{ $balance->entitled_days }}</span>
                    </div>
                    @if($balance->carried_forward_days > 0)
                        <div class="flex justify-between text-gray-500">
                            <span>Carried Forward</span>
                            <span class="text-gray-700">+{{ $balance->carried_forward_days }}</span>
                        </div>
                    @endif
                    @if($balance->adjustment_days != 0)
                        <div class="flex justify-between text-gray-500">
                            <span>Adjustment</span>
                            <span class="{{ $balance->adjustment_days > 0 ? 'text-success-600' : 'text-danger-500' }}">
                                {{ $balance->adjustment_days > 0 ? '+' : '' }}{{ $balance->adjustment_days }}
                            </span>
                        </div>
                    @endif
                    <div class="flex justify-between text-gray-500">
                        <span>Used</span>
                        <span class="text-warning-600">{{ $balance->used_days }}</span>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-span-full">
                <div class="empty-state py-10">
                    <div class="empty-state-title">No leave balances</div>
                    <div class="empty-state-text">Your leave balances for {{ $year }} have not been initialized yet.</div>
                </div>
            </div>
        @endforelse
    </div>

    {{-- Request History --}}
    <div class="card">
        <div class="card-header">
            <h2 class="card-header-title">Request History</h2>
        </div>
        @if($recentRequests->isEmpty())
            <div class="empty-state py-10">
                <div class="empty-state-title">No leave requests</div>
                <div class="empty-state-text">You haven't submitted any leave requests yet.</div>
                <a href="{{ route('my.leave.request') }}" class="btn-primary mt-3">Request Leave</a>
            </div>
        @else
            <div class="overflow-x-auto">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Leave Type</th>
                            <th>Dates</th>
                            <th>Days</th>
                            <th>Status</th>
                            <th>Reviewed</th>
                            <th class="text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($recentRequests as $req)
                            <tr>
                                <td>
                                    <div class="flex items-center gap-2">
                                        <div class="w-2.5 h-2.5 rounded-full" style="background-color: {{ $req->leaveType?->color ?? "#64748B" }}"></div>
                                        <span class="text-sm">{{ $req->leaveType?->name ?? "Unknown" }}</span>
                                    </div>
                                </td>
                                <td>
                                    <div class="text-sm">{{ $req->start_date->format('d M Y') }}</div>
                                    @if(!$req->start_date->eq($req->end_date))
                                        <div class="text-xxs text-gray-400">to {{ $req->end_date->format('d M Y') }}</div>
                                    @endif
                                </td>
                                <td>
                                    <span class="text-sm font-medium">{{ $req->duration_label }}</span>
                                </td>
                                <td>
                                    <span class="badge {{ $req->status_badge_class }}">
                                        <span class="badge-dot"></span>
                                        {{ ucfirst($req->status) }}
                                    </span>
                                </td>
                                <td>
                                    @if($req->reviewer)
                                        <div class="text-xs text-gray-500">{{ $req->reviewer->name }}</div>
                                        <div class="text-xxs text-gray-400">{{ $req->reviewed_at->format('d M Y') }}</div>
                                        @if($req->review_notes)
                                            <div class="text-xxs text-gray-500 italic mt-0.5 max-w-[200px] truncate" title="{{ $req->review_notes }}">
                                                "{{ $req->review_notes }}"
                                            </div>
                                        @endif
                                    @else
                                        <span class="text-xxs text-gray-400">—</span>
                                    @endif
                                </td>
                                <td class="text-right">
                                    @if($req->isPending())
                                        <form method="POST" action="{{ route('my.leave.cancel', $req->id) }}"
                                              onsubmit="return confirm('Cancel this leave request?')">
                                            @csrf
                                            <button type="submit" class="btn-ghost text-danger-500 hover:text-danger-600">Cancel</button>
                                        </form>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

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