@extends('layouts.app')

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

@section('breadcrumbs')
    <div class="breadcrumb">
        <a href="{{ route('dashboard') }}">Dashboard</a>
        <span class="separator">/</span>
        <a href="{{ route('attendance.dashboard') }}">Attendance</a>
        <span class="separator">/</span>
        <span class="current">Reports</span>
    </div>
@endsection

@section('content')
<div class="space-y-6" x-data="{ activeTab: '{{ $tab }}' }">
    {{-- Page Header --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="font-display text-2xl font-semibold text-gray-900">Attendance Reports</h1>
            <p class="text-sm text-gray-500 mt-1">{{ \Carbon\Carbon::createFromDate($year, $month, 1)->format('F Y') }}</p>
        </div>
        <form method="GET" action="{{ route('attendance.reports') }}" class="flex items-center gap-3">
            <select name="month" class="form-select text-sm py-1.5 w-36">
                @foreach($monthOptions as $m => $label)
                    <option value="{{ $m }}" {{ $month == $m ? 'selected' : '' }}>{{ $label }}</option>
                @endforeach
            </select>
            <select name="year" class="form-select text-sm py-1.5 w-24">
                @foreach($yearOptions as $y)
                    <option value="{{ $y }}" {{ $year == $y ? 'selected' : '' }}>{{ $y }}</option>
                @endforeach
            </select>
            <input type="hidden" name="tab" :value="activeTab">
            <button type="submit" class="btn-primary py-1.5">Apply</button>
        </form>
    </div>

    {{-- Tabs --}}
    <div class="card">
        <div class="border-b border-gray-200">
            <nav class="flex gap-0 px-5 -mb-px">
                <button @click="activeTab = 'monthly'" :class="activeTab === 'monthly' ? 'border-primary-600 text-primary-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
                    class="py-3.5 px-4 text-sm font-medium border-b-2 transition-colors">Monthly Summary</button>
                <button @click="activeTab = 'department'" :class="activeTab === 'department' ? 'border-primary-600 text-primary-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
                    class="py-3.5 px-4 text-sm font-medium border-b-2 transition-colors">Department-wise</button>
                <button @click="activeTab = 'late'" :class="activeTab === 'late' ? 'border-primary-600 text-primary-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
                    class="py-3.5 px-4 text-sm font-medium border-b-2 transition-colors">Late Arrivals</button>
                <button @click="activeTab = 'overtime'" :class="activeTab === 'overtime' ? 'border-primary-600 text-primary-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
                    class="py-3.5 px-4 text-sm font-medium border-b-2 transition-colors">Overtime</button>
            </nav>
        </div>

        {{-- Monthly Summary Tab --}}
        <div x-show="activeTab === 'monthly'" x-cloak>
            <div class="p-4 flex justify-end">
                <a href="{{ route('attendance.export', ['month' => $month, 'year' => $year]) }}" class="btn-secondary text-sm">
                    <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 class="overflow-x-auto">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Employee</th>
                            <th>Department</th>
                            <th class="text-center">Present</th>
                            <th class="text-center">Absent</th>
                            <th class="text-center">Late</th>
                            <th class="text-center">Half Day</th>
                            <th class="text-center">Leave</th>
                            <th class="text-center">OT Hours</th>
                            <th class="text-center">Att. %</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($monthlySummary as $row)
                            <tr>
                                <td>
                                    <a href="{{ route('attendance.employee', ['employee' => $row['employee']->id, 'month' => $month, 'year' => $year]) }}"
                                        class="text-sm font-medium text-gray-800 hover:text-primary-600">
                                        {{ $row['employee']->full_name }}
                                    </a>
                                    <div class="text-xxs text-gray-400">{{ $row['employee']->employee_code }}</div>
                                </td>
                                <td class="text-sm text-gray-600">{{ $row['employee']->department?->name ?? '—' }}</td>
                                <td class="text-center text-sm text-success-600 font-medium">{{ $row['present'] }}</td>
                                <td class="text-center text-sm text-danger-500 font-medium">{{ $row['absent'] }}</td>
                                <td class="text-center text-sm {{ $row['late'] > 0 ? 'text-orange-500 font-medium' : 'text-gray-400' }}">{{ $row['late'] }}</td>
                                <td class="text-center text-sm text-warning-600">{{ $row['half_day'] }}</td>
                                <td class="text-center text-sm text-primary-600">{{ $row['leave'] }}</td>
                                <td class="text-center text-sm text-gray-700">{{ $row['overtime'] }}</td>
                                <td class="text-center">
                                    <span class="text-sm font-semibold {{ $row['attendance_pct'] >= 90 ? 'text-success-600' : ($row['attendance_pct'] >= 75 ? 'text-warning-600' : 'text-danger-500') }}">
                                        {{ $row['attendance_pct'] }}%
                                    </span>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="9"><div class="empty-state py-8"><div class="empty-state-title">No data for this period</div></div></td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Department-wise Tab --}}
        <div x-show="activeTab === 'department'" x-cloak>
            <div class="overflow-x-auto">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Department</th>
                            <th class="text-center">Employees</th>
                            <th class="text-center">Avg Attendance %</th>
                            <th class="text-center">Total Absent Days</th>
                            <th class="text-center">Total OT Hours</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($deptSummary as $row)
                            <tr>
                                <td class="text-sm font-medium text-gray-800">{{ $row['department']->name }}</td>
                                <td class="text-center text-sm text-gray-700">{{ $row['total_employees'] }}</td>
                                <td class="text-center">
                                    <span class="text-sm font-semibold {{ $row['avg_attendance'] >= 90 ? 'text-success-600' : ($row['avg_attendance'] >= 75 ? 'text-warning-600' : 'text-danger-500') }}">
                                        {{ $row['avg_attendance'] }}%
                                    </span>
                                </td>
                                <td class="text-center text-sm text-danger-500">{{ $row['total_absent'] }}</td>
                                <td class="text-center text-sm text-gray-700">{{ $row['total_overtime'] }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="5"><div class="empty-state py-8"><div class="empty-state-title">No department data</div></div></td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Late Arrivals Tab --}}
        <div x-show="activeTab === 'late'" x-cloak>
            <div class="overflow-x-auto">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Employee</th>
                            <th>Department</th>
                            <th class="text-center">Late Days</th>
                            <th class="text-center">Total Late Minutes</th>
                            <th>Worst Day</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($lateSummary as $row)
                            <tr>
                                <td>
                                    <span class="text-sm font-medium text-gray-800">{{ $row['employee']->full_name }}</span>
                                    <div class="text-xxs text-gray-400">{{ $row['employee']->employee_code }}</div>
                                </td>
                                <td class="text-sm text-gray-600">{{ $row['employee']->department?->name ?? '—' }}</td>
                                <td class="text-center text-sm text-orange-500 font-semibold">{{ $row['late_days'] }}</td>
                                <td class="text-center text-sm text-gray-700">{{ $row['total_late_minutes'] }}m</td>
                                <td class="text-sm text-gray-600">
                                    @if($row['worst_day'])
                                        {{ $row['worst_day']->date->format('d M') }} ({{ $row['worst_day']->late_minutes }}m late)
                                    @else
                                        —
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="5"><div class="empty-state py-8"><div class="empty-state-title">No late arrivals this month</div><p class="empty-state-text">Everyone was on time!</p></div></td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Overtime Tab --}}
        <div x-show="activeTab === 'overtime'" x-cloak>
            <div class="overflow-x-auto">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Employee</th>
                            <th>Department</th>
                            <th class="text-center">Total OT Hours</th>
                            <th class="text-center">Avg Daily OT</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($overtimeSummary as $row)
                            <tr>
                                <td>
                                    <span class="text-sm font-medium text-gray-800">{{ $row['employee']->full_name }}</span>
                                    <div class="text-xxs text-gray-400">{{ $row['employee']->employee_code }}</div>
                                </td>
                                <td class="text-sm text-gray-600">{{ $row['employee']->department?->name ?? '—' }}</td>
                                <td class="text-center text-sm text-accent-500 font-semibold">{{ $row['total_overtime'] }}h</td>
                                <td class="text-center text-sm text-gray-700">{{ $row['avg_daily_overtime'] }}h</td>
                            </tr>
                        @empty
                            <tr><td colspan="4"><div class="empty-state py-8"><div class="empty-state-title">No overtime this month</div></div></td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection