@extends('layouts.app')

@section('title', 'Rekap Absensi Bulanan')

@push('styles')
<style>
.attendance-table {
    font-size: 11px;
}
.attendance-table th,
.attendance-table td {
    padding: 4px 2px;
    text-align: center;
    vertical-align: middle;
}
.day-header {
    min-width: 25px;
    font-weight: bold;
}
.employee-name {
    min-width: 150px;
    text-align: left !important;
    position: sticky;
    left: 0;
    background: white;
    z-index: 1;
}
.attendance-code {
    font-weight: bold;
    cursor: pointer;
}
.code-H { color: #28a745; } /* Hadir - Hijau */
.code-T { color: #fd7e14; } /* Terlambat - Orange */
.code-I { color: #17a2b8; } /* Izin - Biru */
.code-S { color: #6f42c1; } /* Sakit - Ungu */
.code-A { color: #dc3545; } /* Alfa - Merah */
.code-L { color: #6c757d; } /* Libur - Abu */
.weekend-col {
    background-color: #f8f9fa;
}
.summary-col {
    background-color: #e9ecef;
    font-weight: bold;
}
.table-wrapper {
    overflow-x: auto;
    position: relative;
}
@media print {
    .no-print { display: none; }
    .attendance-table { font-size: 9px; }
}
</style>
@endpush

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4 no-print">
    <div>
        <h4 class="mb-0">Rekap Absensi Bulanan</h4>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ route('reports.index') }}">Reports</a></li>
                <li class="breadcrumb-item active">Rekap Bulanan</li>
            </ol>
        </nav>
    </div>
    <div>
        <button type="button" class="btn btn-success" onclick="exportToExcel()">
            <i class="bi bi-file-earmark-excel me-2"></i>Export Excel
        </button>
        <button type="button" class="btn btn-danger" onclick="window.print()">
            <i class="bi bi-printer me-2"></i>Print
        </button>
    </div>
</div>

{{-- Legend --}}
<div class="card mb-3 no-print">
    <div class="card-body py-2">
        <div class="d-flex flex-wrap gap-3 align-items-center">
            <strong>Keterangan:</strong>
            <span class="code-H">H = Hadir</span>
            <span class="code-T">T = Terlambat</span>
            <span class="code-I">I = Izin</span>
            <span class="code-S">S = Sakit</span>
            <span class="code-A">A = Alfa</span>
            <span class="code-L">L = Libur</span>
            <span>- = Tidak ada data</span>
        </div>
    </div>
</div>

{{-- Filters --}}
<div class="card mb-4 no-print">
    <div class="card-body">
        <form method="GET" action="{{ route('reports.monthly-attendance-recap') }}" class="row g-3">
            <div class="col-md-3">
                <label class="form-label">Bulan</label>
                <select name="month" class="form-select">
                    @for($m = 1; $m <= 12; $m++)
                        <option value="{{ $m }}" {{ $month == $m ? 'selected' : '' }}>
                            {{ \Carbon\Carbon::create()->month($m)->format('F') }}
                        </option>
                    @endfor
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label">Tahun</label>
                <select name="year" class="form-select">
                    @for($y = now()->year; $y >= now()->year - 5; $y--)
                        <option value="{{ $y }}" {{ $year == $y ? 'selected' : '' }}>
                            {{ $y }}
                        </option>
                    @endfor
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label">Departemen</label>
                <select name="department_id" class="form-select">
                    <option value="">Semua Departemen</option>
                    @foreach($departments as $dept)
                        <option value="{{ $dept->id }}" {{ request('department_id') == $dept->id ? 'selected' : '' }}>
                            {{ $dept->department_name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2 d-flex align-items-end">
                <button type="submit" class="btn btn-primary w-100">
                    <i class="bi bi-funnel me-2"></i>Filter
                </button>
            </div>
        </form>
    </div>
</div>

{{-- Attendance Table --}}
<div class="card">
    <div class="card-header">
        <h5 class="mb-0">
            Rekap Absensi - {{ \Carbon\Carbon::create()->month($month)->format('F') }} {{ $year }}
        </h5>
        <div class="text-muted small mt-1">
            Periode: {{ $periodStart->format('d M Y') }} s/d {{ $periodEnd->format('d M Y') }}
            (Payday: {{ $payday }}, Total: {{ $daysInPeriod }} hari)
            @if($payday < $actualLastDay)
                | Bulan ini sampai tanggal {{ $actualLastDay }}
            @endif
        </div>
    </div>
    <div class="card-body p-0">
        <div class="table-wrapper">
            <table class="table table-bordered table-hover attendance-table mb-0" id="attendanceTable">
                <thead class="table-light">
                    <tr>
                        <th rowspan="2" class="employee-name">Nama Karyawan</th>
                        <th colspan="{{ $daysInPeriod }}" class="text-center">Tanggal (Periode Payday)</th>
                        <th colspan="5" class="text-center summary-col">Ringkasan</th>
                    </tr>
                    <tr>
                        @php
                            $currentDate = $periodStart->copy();
                        @endphp
                        @for($day = 1; $day <= $daysInPeriod; $day++)
                            @php
                                $isWeekend = $currentDate->dayOfWeek == 0 || $currentDate->dayOfWeek == 6;
                            @endphp
                            <th class="day-header {{ $isWeekend ? 'weekend-col' : '' }}" title="{{ $currentDate->format('d M Y') }}">
                                {{ $currentDate->day }}
                                <br><small style="font-size: 8px;">{{ $currentDate->format('D') }}</small>
                            </th>
                            @php
                                $currentDate->addDay();
                            @endphp
                        @endfor
                        <th class="summary-col">H</th>
                        <th class="summary-col">T</th>
                        <th class="summary-col">I</th>
                        <th class="summary-col">S</th>
                        <th class="summary-col">A</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($attendanceData as $data)
                        <tr>
                            <td class="employee-name">
                                <div class="d-flex align-items-center">
                                    <div class="avatar bg-label-primary me-2" style="width: 24px; height: 24px;">
                                        <span class="avatar-initial rounded-circle" style="font-size: 10px;">
                                            {{ strtoupper(substr($data['employee']->name ?? 'N', 0, 1)) }}
                                        </span>
                                    </div>
                                    <div>
                                        <strong>{{ $data['employee']->name }}</strong>
                                        <br><small class="text-muted">{{ $data['employee']->contract?->position?->department?->department_name }}</small>
                                    </div>
                                </div>
                            </td>
                            @for($day = 1; $day <= $daysInPeriod; $day++)
                                @php
                                    $dayData = $data['days'][$day] ?? ['code' => '-', 'status' => 'no_record', 'date' => null];
                                    $isWeekend = $dayData['date'] ? ($dayData['date']->dayOfWeek == 0 || $dayData['date']->dayOfWeek == 6) : false;
                                @endphp
                                <td class="attendance-code code-{{ $dayData['code'] }} {{ $isWeekend ? 'weekend-col' : '' }}"
                                    @if(isset($dayData['clock_in']) && $dayData['clock_in'])
                                        title="Masuk: {{ $dayData['clock_in'] }} | Keluar: {{ $dayData['clock_out'] ?? '-' }}{{ $dayData['late_minutes'] > 0 ? ' | Terlambat: ' . $dayData['late_minutes'] . ' menit' : '' }}"
                                    @elseif($dayData['date'])
                                        title="{{ $dayData['date']->format('d M Y') }}"
                                    @endif>
                                    {{ $dayData['code'] }}
                                </td>
                            @endfor
                            <td class="summary-col">{{ $data['summary']['hadir'] }}</td>
                            <td class="summary-col">{{ $data['summary']['terlambat'] }}</td>
                            <td class="summary-col">{{ $data['summary']['izin'] }}</td>
                            <td class="summary-col">{{ $data['summary']['sakit'] }}</td>
                            <td class="summary-col">{{ $data['summary']['alfa'] }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="{{ $daysInPeriod + 6 }}" class="text-center py-4">
                                Tidak ada data karyawan
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script>
function exportToExcel() {
    const table = document.getElementById('attendanceTable');
    const wb = XLSX.utils.table_to_book(table, {sheet: "Rekap Absensi"});

    // Set column widths
    const ws = wb.Sheets["Rekap Absensi"];
    const wscols = [
        {wch: 30}, // Employee name
        @for($i = 1; $i <= $daysInPeriod; $i++)
            {wch: 4}, // Day columns
        @endfor
        {wch: 4}, {wch: 4}, {wch: 4}, {wch: 4}, {wch: 4} // Summary columns
    ];
    ws['!cols'] = wscols;

    const monthName = '{{ \Carbon\Carbon::create()->month($month)->format("F") }}';
    XLSX.writeFile(wb, `Rekap_Absensi_${monthName}_{{ $year }}.xlsx`);
}

// Enable Bootstrap tooltips
document.addEventListener('DOMContentLoaded', function() {
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[title]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
});
</script>
@endpush
@endsection