@extends('layouts.app')

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

@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">Reports</span>
    </div>
@endsection

@section('content')
<div class="space-y-5 animate-fade-up" x-data="{ tab: '{{ $tab }}' }">

    {{-- 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 Reports</h1>
            <p class="text-sm text-gray-500 mt-1">Year {{ $year }} leave analytics</p>
        </div>
        <div class="flex items-center gap-2">
            <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 Balances
            </a>
            <a href="{{ route('leave.export') }}?year={{ $year }}&type=requests" 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 Requests
            </a>
        </div>
    </div>

    {{-- Tabs --}}
    <div class="card">
        <div class="border-b border-gray-100 px-5">
            <nav class="flex gap-6">
                <a href="{{ route('leave.reports', ['tab' => 'utilization', 'year' => $year]) }}"
                   class="py-3 text-sm font-medium border-b-2 transition-colors {{ $tab === 'utilization' ? 'border-primary-600 text-primary-600' : 'border-transparent text-gray-500 hover:text-gray-700' }}">
                    Utilization
                </a>
                <a href="{{ route('leave.reports', ['tab' => 'balance', 'year' => $year]) }}"
                   class="py-3 text-sm font-medium border-b-2 transition-colors {{ $tab === 'balance' ? 'border-primary-600 text-primary-600' : 'border-transparent text-gray-500 hover:text-gray-700' }}">
                    Balance Summary
                </a>
                <a href="{{ route('leave.reports', ['tab' => 'department', 'year' => $year, 'month' => $month]) }}"
                   class="py-3 text-sm font-medium border-b-2 transition-colors {{ $tab === 'department' ? 'border-primary-600 text-primary-600' : 'border-transparent text-gray-500 hover:text-gray-700' }}">
                    Department-wise
                </a>
            </nav>
        </div>

        {{-- Filters --}}
        <div class="px-5 py-3 bg-gray-50 border-b border-gray-100">
            <form method="GET" action="{{ route('leave.reports') }}" class="flex items-center gap-3">
                <input type="hidden" name="tab" value="{{ $tab }}">
                <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>
                @if($tab === 'department')
                    <select name="month" class="form-select w-auto">
                        @for($m = 1; $m <= 12; $m++)
                            <option value="{{ $m }}" {{ $month == $m ? 'selected' : '' }}>
                                {{ \Carbon\Carbon::create(null, $m)->format('F') }}
                            </option>
                        @endfor
                    </select>
                @endif
                <button type="submit" class="btn-secondary">Apply</button>
            </form>
        </div>

        <div class="card-body">
            {{-- Utilization Tab --}}
            @if($tab === 'utilization')
                @if($utilizationData instanceof \Illuminate\Database\Eloquent\Collection && $utilizationData->isNotEmpty())
                    <div class="overflow-x-auto">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>Employee</th>
                                    @foreach($leaveTypes as $type)
                                        <th class="text-center">
                                            <div class="flex items-center justify-center gap-1">
                                                <div class="w-2 h-2 rounded-full" style="background-color: {{ $type->color }}"></div>
                                                {{ $type->code }}
                                            </div>
                                        </th>
                                    @endforeach
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($utilizationData as $emp)
                                    <tr>
                                        <td>
                                            <span class="font-medium text-gray-800 text-sm">{{ $emp->first_name }} {{ $emp->last_name }}</span>
                                            <span class="text-xxs text-gray-400 ml-1">{{ $emp->employee_code }}</span>
                                        </td>
                                        @foreach($leaveTypes as $type)
                                            @php $bal = $emp->leaveBalances->firstWhere('leave_type_id', $type->id); @endphp
                                            <td class="text-center">
                                                @if($bal)
                                                    <span class="text-sm {{ $bal->utilization_percent > 80 ? 'text-danger-500 font-medium' : 'text-gray-600' }}">
                                                        {{ $bal->used_days }}/{{ $bal->total_available }}
                                                    </span>
                                                    <div class="text-xxs text-gray-400">{{ $bal->utilization_percent }}%</div>
                                                @else
                                                    <span class="text-xxs text-gray-300">—</span>
                                                @endif
                                            </td>
                                        @endforeach
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="empty-state py-10">
                        <div class="empty-state-title">No utilization data</div>
                        <div class="empty-state-text">No leave balance data found for {{ $year }}.</div>
                    </div>
                @endif
            @endif

            {{-- Balance Summary Tab --}}
            @if($tab === 'balance')
                @if($balanceSummary->isNotEmpty())
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                        @foreach($balanceSummary as $summary)
                            <div class="p-4 border border-gray-200 rounded-xl">
                                <div class="flex items-center gap-2 mb-3">
                                    <div class="w-3 h-3 rounded-full" style="background-color: {{ $summary->leaveType?->color ?? "#64748B" }}"></div>
                                    <span class="font-display font-semibold text-gray-800">{{ $summary->leaveType?->name ?? "Unknown" }}</span>
                                </div>
                                <div class="space-y-2 text-sm">
                                    <div class="flex justify-between">
                                        <span class="text-gray-500">Employees</span>
                                        <span class="font-medium text-gray-800">{{ $summary->employee_count }}</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-gray-500">Total Entitled</span>
                                        <span class="font-medium text-gray-800">{{ number_format($summary->total_entitled, 1) }} days</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-gray-500">Total Used</span>
                                        <span class="font-medium text-warning-600">{{ number_format($summary->total_used, 1) }} days</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-gray-500">Total Remaining</span>
                                        <span class="font-medium text-success-600">{{ number_format($summary->total_remaining, 1) }} days</span>
                                    </div>
                                    <div class="flex justify-between border-t border-gray-100 pt-2">
                                        <span class="text-gray-500">Avg Used/Employee</span>
                                        <span class="font-medium text-gray-800">{{ number_format($summary->avg_used, 1) }} days</span>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="empty-state py-10">
                        <div class="empty-state-title">No balance data</div>
                        <div class="empty-state-text">No leave balances found for {{ $year }}.</div>
                    </div>
                @endif
            @endif

            {{-- Department-wise Tab --}}
            @if($tab === 'department')
                @if($departmentData->isNotEmpty())
                    <div class="overflow-x-auto">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>Department</th>
                                    <th class="text-center">Requests</th>
                                    <th class="text-center">Total Days</th>
                                    <th class="text-center">Avg Days/Request</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($departmentData as $dept)
                                    <tr>
                                        <td class="font-medium text-gray-800">{{ $dept->department_name }}</td>
                                        <td class="text-center">{{ $dept->request_count }}</td>
                                        <td class="text-center">{{ number_format($dept->total_days, 1) }}</td>
                                        <td class="text-center">{{ $dept->request_count > 0 ? number_format($dept->total_days / $dept->request_count, 1) : '0' }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="empty-state py-10">
                        <div class="empty-state-title">No department data</div>
                        <div class="empty-state-text">No approved leave requests found for {{ \Carbon\Carbon::create(null, $month)->format('F') }} {{ $year }}.</div>
                    </div>
                @endif
            @endif
        </div>
    </div>
</div>
@endsection