@extends('layouts.app')

@section('title', 'Rekap Bulanan Kehadiran')
@section('page-title', 'Rekapitulasi Bulanan Presensi')
@section('page-subtitle', 'Laporan agregat kehadiran, keterlambatan, izin, dan cuti seluruh karyawan per periode bulan.')

@section('page-actions')
<div class="d-flex justify-content-md-end gap-2 mt-2 mt-md-0">
    <button type="button" class="btn btn-outline-secondary" onclick="window.print()">
        <i class="bi bi-printer me-1"></i> Cetak / Print
    </button>
    <a href="{{ route('admin.reports.monthly.export', request()->query()) }}" class="btn btn-success">
        <i class="bi bi-file-earmark-excel me-1"></i> Export Excel (.xls)
    </a>
</div>
@endsection

@section('content')
{{-- Filter Card --}}
<div class="card shadow-sm border-0 mb-4 d-print-none">
    <div class="card-body p-3">
        <form method="GET" action="{{ route('admin.reports.monthly') }}" class="row g-2 align-items-center">
            <div class="col-6 col-md-3">
                <label class="form-label text-xs text-muted mb-1">Pilih Bulan</label>
                <select name="month" class="form-select bg-light border-0">
                    @for($m = 1; $m <= 12; $m++)
                        <option value="{{ $m }}" {{ $month == $m ? 'selected' : '' }}>
                            {{ \Carbon\Carbon::create(null, $m)->translatedFormat('F') }}
                        </option>
                    @endfor
                </select>
            </div>
            <div class="col-6 col-md-3">
                <label class="form-label text-xs text-muted mb-1">Pilih Tahun</label>
                <select name="year" class="form-select bg-light border-0">
                    @for($y = date('Y'); $y >= date('Y') - 4; $y--)
                        <option value="{{ $y }}" {{ $year == $y ? 'selected' : '' }}>{{ $y }}</option>
                    @endfor
                </select>
            </div>
            <div class="col-6 col-md-4">
                <label class="form-label text-xs text-muted mb-1">Departemen</label>
                <select name="department_id" class="form-select bg-light border-0">
                    <option value="">Semua Departemen</option>
                    @foreach($departments as $dept)
                        <option value="{{ $dept->id }}" {{ request('department_id') == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-6 col-md-2 d-flex align-items-end">
                <button type="submit" class="btn btn-primary w-100"><i class="bi bi-funnel me-1"></i> Tampilkan</button>
            </div>
        </form>
    </div>
</div>

{{-- Main Recap Matrix Table Card --}}
<div class="card shadow-sm border-0">
    <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
        <h5 class="card-title mb-0 fw-bold">
            <i class="bi bi-file-earmark-bar-graph me-2 text-primary"></i> 
            Periode: {{ \Carbon\Carbon::create($year, $month, 1)->translatedFormat('F Y') }}
        </h5>
        <span class="badge bg-light-primary text-primary">Total: {{ count($recapData) }} Karyawan Aktif</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover table-bordered align-middle mb-0 text-center">
                <thead class="bg-light">
                    <tr>
                        <th class="text-start ps-4" style="min-width: 220px;">Karyawan</th>
                        <th>Departemen</th>
                        <th class="text-success"><i class="bi bi-check-circle me-1"></i> Hadir</th>
                        <th class="text-warning"><i class="bi bi-clock me-1"></i> Terlambat</th>
                        <th class="text-info"><i class="bi bi-envelope-paper me-1"></i> Izin</th>
                        <th class="text-primary"><i class="bi bi-heart-pulse me-1"></i> Sakit</th>
                        <th class="text-secondary"><i class="bi bi-calendar-event me-1"></i> Cuti</th>
                        <th class="text-danger"><i class="bi bi-x-circle me-1"></i> Alpha</th>
                        <th class="bg-light fw-bold">Total Kehadiran</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($recapData as $row)
                        <tr>
                            <td class="text-start ps-4">
                                <div class="d-flex align-items-center">
                                    <div class="avatar avatar-sm bg-light-primary text-primary me-2 flex-shrink-0">
                                        @if($row['employee']->photo)
                                            <img src="{{ asset($row['employee']->photo) }}" alt="Avatar" style="width: 32px; height: 32px; object-fit: cover; border-radius: 50%;">
                                        @else
                                            <span class="avatar-content">{{ strtoupper(substr($row['employee']->name, 0, 2)) }}</span>
                                        @endif
                                    </div>
                                    <div>
                                        <h6 class="mb-0 fw-bold text-dark">{{ $row['employee']->name }}</h6>
                                        <small class="text-muted">{{ $row['employee']->nik }}</small>
                                    </div>
                                </div>
                            </td>
                            <td>{{ $row['employee']->department?->name ?? '-' }}</td>
                            <td class="fw-bold text-success">{{ $row['hadir'] }}</td>
                            <td class="fw-bold text-warning">{{ $row['terlambat'] }}</td>
                            <td class="fw-bold text-info">{{ $row['izin'] }}</td>
                            <td class="fw-bold text-primary">{{ $row['sakit'] }}</td>
                            <td class="fw-bold text-secondary">{{ $row['cuti'] }}</td>
                            <td class="fw-bold text-danger">{{ $row['alpha'] }}</td>
                            <td class="fw-bold bg-light">
                                <span class="badge bg-primary px-3 py-2 fs-6">{{ $row['total_hadir'] }} Hari</span>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="text-center py-5 text-muted">
                                Tidak ada data rekapitulasi karyawan untuk periode yang dipilih.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection