@extends('layouts.app')

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

@push('styles')
<style>
h1 { color: var(--text-primary); }
p.text-secondary { color: var(--text-secondary); }
.btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-color); }
.btn-ghost:hover { background: var(--accent-light); color: var(--text-primary); }
</style>
@endpush

@section('content')
@can('view_leave_report')

<div class="mb-8 fade-in">
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-4">
            <div class="h-14 w-1 bg-gradient-to-b from-purple-400 to-purple-600 rounded-full"></div>
            <div>
                <h1 class="text-3xl font-bold tracking-tight">Leave Report</h1>
                <p class="text-secondary mt-1">Employee leave records and statistics</p>
            </div>
        </div>
        <div class="flex gap-2">
            <button onclick="window.print()" class="btn-ghost px-4 py-2.5 rounded-xl flex items-center gap-2 text-sm font-medium transition-all">
                <i class="fas fa-print"></i> Print
            </button>
            <a href="{{ route('reports.leave-report.pdf', request()->query()) }}" class="btn-primary px-4 py-2.5 rounded-xl flex items-center gap-2 text-sm font-medium transition-all">
                <i class="fas fa-file-pdf"></i> PDF
            </a>
        </div>
    </div>
</div>

<div class="table-container rounded-2xl p-4 mb-8 fade-in">
    <form method="GET" class="space-y-4">
        <div class="flex flex-wrap gap-2">
            <button type="button" onclick="setRange('this-month')" class="btn-ghost px-3 py-1.5 text-xs font-medium rounded-lg">This Month</button>
            <button type="button" onclick="setRange('last-month')" class="btn-ghost px-3 py-1.5 text-xs font-medium rounded-lg">Last Month</button>
            <button type="button" onclick="setRange('this-quarter')" class="btn-ghost px-3 py-1.5 text-xs font-medium rounded-lg">This Quarter</button>
            <button type="button" onclick="setRange('this-year')" class="btn-ghost px-3 py-1.5 text-xs font-medium rounded-lg">This Year</button>
        </div>
        <div class="flex flex-wrap items-end gap-4">
            <div class="flex-1 min-w-[200px]">
                <label class="block text-xs text-slate-400 mb-1.5 font-medium">Employee</label>
                <select name="employee_id" class="input-modern rounded-lg px-3 py-2 text-sm">
                    <option value="">All Employees</option>
                    @foreach($employees as $emp)
                        <option value="{{ $emp->id }}" {{ $employeeId == $emp->id ? 'selected' : '' }}>{{ $emp->full_name }} ({{ $emp->employee_id }})</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1">From</label>
                <input type="date" id="dateFrom" name="date_from" value="{{ $dateFrom }}" class="input-modern rounded-lg px-3 py-2 text-sm">
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1">To</label>
                <input type="date" id="dateTo" name="date_to" value="{{ $dateTo }}" class="input-modern rounded-lg px-3 py-2 text-sm">
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1.5 font-medium">Leave Type</label>
                <select name="leave_type" class="input-modern rounded-lg px-3 py-2 text-sm">
                    <option value="">All Types</option>
                    @foreach($leaveTypes as $lt)
                        <option value="{{ $lt }}" {{ $leaveType == $lt ? 'selected' : '' }}>{{ ucfirst($lt) }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1.5 font-medium">Status</label>
                <select name="status" class="input-modern rounded-lg px-3 py-2 text-sm">
                    <option value="">All Status</option>
                    <option value="approved" {{ $status === 'approved' ? 'selected' : '' }}>Approved</option>
                    <option value="pending" {{ $status === 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="rejected" {{ $status === 'rejected' ? 'selected' : '' }}>Rejected</option>
                </select>
            </div>
            @include('reports.partials.branch-filter')
            <button type="submit" class="btn-primary px-5 py-2 rounded-lg text-sm font-medium transition-colors">
                <i class="fas fa-search mr-1"></i> View Report
            </button>
        </div>
    </form>
</div>

<script>
function formatDate(d) { const yyyy = d.getFullYear(); const mm = String(d.getMonth() + 1).padStart(2, '0'); const dd = String(d.getDate()).padStart(2, '0'); return `${yyyy}-${mm}-${dd}`; }
function setRange(preset) {
    const today = new Date(); let from, to;
    switch (preset) {
        case 'this-month': from = new Date(today.getFullYear(), today.getMonth(), 1); to = new Date(today); break;
        case 'last-month': from = new Date(today.getFullYear(), today.getMonth() - 1, 1); to = new Date(today.getFullYear(), today.getMonth(), 0); break;
        case 'this-quarter': from = new Date(today.getFullYear(), Math.floor(today.getMonth() / 3) * 3, 1); to = new Date(today); break;
        case 'this-year': from = new Date(today.getFullYear(), 0, 1); to = new Date(today); break;
    }
    document.getElementById('dateFrom').value = formatDate(from); document.getElementById('dateTo').value = formatDate(to); document.getElementById('dateFrom').closest('form').submit();
}
</script>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-7 gap-4 mb-6">
    <div class="stat-card rounded-2xl p-5 fade-in">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-slate-500/20 flex items-center justify-center">
                <i class="fas fa-calendar-alt text-slate-400"></i>
            </div>
            <p class="text-sm text-slate-400 font-medium">Total Leaves</p>
        </div>
        <p class="text-2xl font-extrabold text-white">{{ $totalLeaves }}</p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-slate-500/20 flex items-center justify-center">
                <i class="fas fa-clock text-slate-400"></i>
            </div>
            <p class="text-sm text-slate-400 font-medium">Total Days</p>
        </div>
        <p class="text-2xl font-extrabold text-white">{{ $totalDays }}</p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in glow-emerald">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-emerald-500/20 flex items-center justify-center">
                <i class="fas fa-check-circle text-emerald-400"></i>
            </div>
            <p class="text-sm text-slate-400 font-medium">Approved</p>
        </div>
        <p class="text-2xl font-extrabold text-emerald-400">{{ $approvedLeaves }}</p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-amber-500/20 flex items-center justify-center">
                <i class="fas fa-hourglass-half text-amber-400"></i>
            </div>
            <p class="text-sm text-slate-400 font-medium">Pending</p>
        </div>
        <p class="text-2xl font-extrabold text-amber-400">{{ $pendingLeaves }}</p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-red-500/20 flex items-center justify-center">
                <i class="fas fa-times-circle text-red-400"></i>
            </div>
            <p class="text-sm text-slate-400 font-medium">Rejected</p>
        </div>
        <p class="text-2xl font-extrabold text-red-400">{{ $rejectedLeaves }}</p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-cyan-500/20 flex items-center justify-center">
                <i class="fas fa-thermometer text-cyan-400"></i>
            </div>
            <p class="text-sm text-slate-400 font-medium">Sick</p>
        </div>
        <p class="text-2xl font-extrabold text-cyan-400">{{ $sickLeaves }}</p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-purple-500/20 flex items-center justify-center">
                <i class="fas fa-umbrella-beach text-purple-400"></i>
            </div>
            <p class="text-sm text-slate-400 font-medium">Casual / Annual</p>
        </div>
        <p class="text-2xl font-extrabold text-purple-400">{{ $casualLeaves }} / {{ $annualLeaves }}</p>
    </div>
</div>

<div class="table-container rounded-2xl overflow-hidden fade-in">
    <div class="px-5 py-4" style="border-bottom: 1px solid var(--border-color);">
        <div>
            <h3 class="text-base font-semibold text-white">Leave Records</h3>
            <p class="text-xs text-slate-500 mt-0.5">{{ displayDate(\Carbon\Carbon::parse($dateFrom)) }} — {{ displayDate(\Carbon\Carbon::parse($dateTo)) }}</p>
        </div>
        <span class="text-xs text-slate-400 bg-slate-700/50 px-3 py-1.5 rounded-full font-medium">{{ $leaves->count() }} records</span>
    </div>
    <div class="overflow-x-auto">
        <table class="min-w-full">
            <thead class="table-header">
                <tr>
                    <th class="px-5 py-3.5 text-left text-[10px] font-bold text-slate-500 uppercase tracking-widest">#</th>
                    <th class="px-5 py-3.5 text-left text-[10px] font-bold text-slate-500 uppercase tracking-widest">Employee</th>
                    <th class="px-5 py-3.5 text-left text-[10px] font-bold text-slate-500 uppercase tracking-widest">Type</th>
                    <th class="px-5 py-3.5 text-left text-[10px] font-bold text-slate-500 uppercase tracking-widest">Start Date</th>
                    <th class="px-5 py-3.5 text-left text-[10px] font-bold text-slate-500 uppercase tracking-widest">End Date</th>
                    <th class="px-5 py-3.5 text-center text-[10px] font-bold text-slate-500 uppercase tracking-widest">Days</th>
                    <th class="px-5 py-3.5 text-left text-[10px] font-bold text-slate-500 uppercase tracking-widest">Reason</th>
                    <th class="px-5 py-3.5 text-center text-[10px] font-bold text-slate-500 uppercase tracking-widest">Status</th>
                    <th class="px-5 py-3.5 text-left text-[10px] font-bold text-slate-500 uppercase tracking-widest">Approved By</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-700/50">
                @forelse($leaves as $i => $l)
                <tr class="table-row transition-colors">
                    <td class="px-5 py-3.5 text-sm text-slate-400">{{ $i + 1 }}</td>
                    <td class="px-5 py-3.5 text-sm font-medium text-white">{{ $l->employee?->full_name ?? 'Deleted' }}</td>
                    <td class="px-5 py-3.5 text-sm">
                        @if($l->leave_type === 'sick')
                            <span class="px-2 py-0.5 text-[11px] font-semibold rounded-full bg-cyan-500/15 text-cyan-400 border border-cyan-500/20">Sick</span>
                        @elseif($l->leave_type === 'casual')
                            <span class="px-2 py-0.5 text-[11px] font-semibold rounded-full bg-purple-500/15 text-purple-400 border border-purple-500/20">Casual</span>
                        @elseif($l->leave_type === 'annual')
                            <span class="px-2 py-0.5 text-[11px] font-semibold rounded-full bg-amber-500/15 text-amber-400 border border-amber-500/20">Annual</span>
                        @else
                            <span class="px-2 py-0.5 text-[11px] font-semibold rounded-full bg-slate-500/15 text-slate-400 border border-slate-500/20">{{ ucfirst($l->leave_type) }}</span>
                        @endif
                    </td>
                    <td class="px-5 py-3.5 text-sm text-slate-300">{{ displayDate($l->start_date) }}</td>
                    <td class="px-5 py-3.5 text-sm text-slate-300">{{ displayDate($l->end_date) }}</td>
                    <td class="px-5 py-3.5 text-sm text-center font-bold text-white">{{ $l->days }}</td>
                    <td class="px-5 py-3.5 text-sm text-slate-400 max-w-[200px] truncate" title="{{ $l->reason }}">{{ $l->reason ?? '—' }}</td>
                    <td class="px-5 py-3.5 text-sm text-center">
                        @if($l->status === 'approved')
                            <span class="px-2 py-0.5 text-[11px] font-semibold rounded-full bg-emerald-500/15 text-emerald-400 border border-emerald-500/20">Approved</span>
                        @elseif($l->status === 'pending')
                            <span class="px-2 py-0.5 text-[11px] font-semibold rounded-full bg-amber-500/15 text-amber-400 border border-amber-500/20">Pending</span>
                        @else
                            <span class="px-2 py-0.5 text-[11px] font-semibold rounded-full bg-red-500/15 text-red-400 border border-red-500/20">Rejected</span>
                        @endif
                    </td>
                    <td class="px-5 py-3.5 text-sm text-slate-300">{{ $l->approver?->name ?? '—' }}</td>
                </tr>
                @empty
                <tr>
                    <td colspan="9" class="px-5 py-12 text-center text-slate-500">
                        <div class="flex flex-col items-center">
                            <div class="w-12 h-12 bg-slate-700/50 rounded-full flex items-center justify-center mb-3">
                                <i class="fas fa-plane text-slate-500 text-xl"></i>
                            </div>
                            <p class="font-medium text-slate-400">No leave records found</p>
                            <p class="text-xs text-slate-600 mt-1">Try adjusting the date range or filters</p>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
            @if($leaves->count() > 0)
            <tfoot class="bg-slate-700/30">
                <tr>
                    <td class="px-5 py-4 text-sm font-bold text-white" colspan="2">Totals</td>
                    <td class="px-5 py-4"></td>
                    <td class="px-5 py-4"></td>
                    <td class="px-5 py-4"></td>
                    <td class="px-5 py-4 text-center font-bold text-white">{{ $totalDays }} days</td>
                    <td class="px-5 py-4" colspan="2">
                        <span class="text-emerald-400 font-semibold">{{ $approvedLeaves }} approved</span>
                        <span class="text-slate-600 mx-1">|</span>
                        <span class="text-amber-400 font-semibold">{{ $pendingLeaves }} pending</span>
                        <span class="text-slate-600 mx-1">|</span>
                        <span class="text-red-400 font-semibold">{{ $rejectedLeaves }} rejected</span>
                    </td>
                    <td class="px-5 py-4"></td>
                </tr>
            </tfoot>
            @endif
        </table>
    </div>
</div>

@endcan
@endsection