@extends('layouts.app')

@section('title', 'Data Absensi')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2>
            @if(auth()->user()->isPegawai())
                Absensi Saya
            @elseif(auth()->user()->isPimpinan())
                Laporan Absensi
            @else
                Data Absensi
            @endif
        </h2>
        @if(auth()->user()->isPegawai())
        <p class="text-muted mb-0 small">Riwayat absensi Anda</p>
        @elseif(auth()->user()->isPimpinan())
        <p class="text-muted mb-0 small">Rekapan laporan absensi pegawai (Read-Only)</p>
        @endif
    </div>
    <div class="d-flex gap-2">
        @if(auth()->user()->isKepalaTataUsaha())
        <a href="{{ route('absensi.create') }}" class="btn btn-primary">
            <i class="bi bi-plus-circle me-1"></i> Tambah
        </a>
        <a href="{{ route('absensi.import') }}" class="btn btn-success">
            <i class="bi bi-upload me-1"></i> Import
        </a>
        @endif
        @if(auth()->user()->isPimpinan())
        <span class="badge bg-info">
            <i class="bi bi-eye me-1"></i> Read-Only
        </span>
        @endif
    </div>
</div>

{{-- Grafik Absensi --}}
@if(isset($chartData))
<div class="row mb-4">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Trend Absensi (6 Bulan Terakhir)</h5>
            </div>
            <div class="card-body">
                <canvas id="absensiTrendChart" height="80"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Distribusi Status Absensi Bulan Ini</h5>
            </div>
            <div class="card-body">
                <canvas id="absensiStatusChart"></canvas>
            </div>
        </div>
    </div>
</div>
@endif

<div class="card">
    <div class="card-body">
        <form method="GET" action="{{ route('absensi.index') }}" class="mb-3">
            <div class="row g-3">
                <div class="col-md-3">
                    <input type="date" name="tanggal" class="form-control" value="{{ request('tanggal', date('Y-m')) }}">
                </div>
                @if(auth()->user()->isKepalaTataUsaha() || auth()->user()->isPimpinan())
                <div class="col-md-3">
                    <select name="pegawai_id" class="form-select">
                        <option value="">Semua Pegawai</option>
                        @foreach($pegawaiList as $p)
                        <option value="{{ $p->id }}" {{ request('pegawai_id') == $p->id ? 'selected' : '' }}>
                            {{ $p->nama_lengkap }}
                        </option>
                        @endforeach
                    </select>
                </div>
                @endif
                <div class="col-md-3">
                    <select name="status" class="form-select">
                        <option value="">Semua Status</option>
                        <option value="Hadir" {{ request('status') == 'Hadir' ? 'selected' : '' }}>Hadir</option>
                        <option value="Izin" {{ request('status') == 'Izin' ? 'selected' : '' }}>Izin</option>
                        <option value="Sakit" {{ request('status') == 'Sakit' ? 'selected' : '' }}>Sakit</option>
                        <option value="Cuti" {{ request('status') == 'Cuti' ? 'selected' : '' }}>Cuti</option>
                        <option value="Alpha" {{ request('status') == 'Alpha' ? 'selected' : '' }}>Alpha</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="bi bi-search"></i> Filter
                    </button>
                </div>
            </div>
        </form>

        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead>
                    <tr>
                        <th>Tanggal</th>
                        <th>Pegawai</th>
                        <th>Jam Masuk</th>
                        <th>Jam Keluar</th>
                        <th>Jam Kerja</th>
                        <th>Status</th>
                        <th>Keterangan</th>
                        <th class="text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($absensi as $a)
                    @php
                        $telat = $a->hitungTelat();
                        $totalJamKerja = $a->hitungJamKerja();
                        $jamLembur = $a->hitungLembur();
                        $jamKerja = $a->getJamKerjaPerHari();
                        
                        // Format jam kerja
                        $jamKerjaText = '-';
                        if ($totalJamKerja !== null) {
                            $jam = floor($totalJamKerja / 60);
                            $menit = $totalJamKerja % 60;
                            if ($jam > 0 && $menit > 0) {
                                $jamKerjaText = "{$jam} jam {$menit} menit";
                            } elseif ($jam > 0) {
                                $jamKerjaText = "{$jam} jam";
                            } elseif ($menit > 0) {
                                $jamKerjaText = "{$menit} menit";
                            } else {
                                $jamKerjaText = "0 menit";
                            }
                        }
                    @endphp
                    <tr>
                        <td>
                            <strong>{{ $a->tanggal->format('d/m/Y') }}</strong><br>
                            <small class="text-muted">{{ $a->tanggal->locale('id')->dayName }}</small>
                        </td>
                        <td>
                            <strong>{{ $a->pegawai->nama_lengkap }}</strong><br>
                            <small class="text-muted">{{ $a->pegawai->nip }}</small>
                        </td>
                        <td>
                            @if($a->jam_masuk)
                                @php
                                    $jamMasukFormatted = $a->jam_masuk instanceof \Carbon\Carbon 
                                        ? $a->jam_masuk->format('H:i') 
                                        : date('H:i', strtotime($a->jam_masuk));
                                @endphp
                                <span class="fw-bold">{{ $jamMasukFormatted }}</span>
                                @if($telat !== null && $telat > 0)
                                    <br><span class="badge bg-warning text-dark small">Telat {{ $a->status_telat }}</span>
                                @endif
                            @else
                                <span class="text-muted">-</span>
                            @endif
                        </td>
                        <td>
                            @if($a->jam_keluar)
                                @php
                                    $jamKeluarFormatted = $a->jam_keluar instanceof \Carbon\Carbon 
                                        ? $a->jam_keluar->format('H:i') 
                                        : date('H:i', strtotime($a->jam_keluar));
                                @endphp
                                <span class="fw-bold">{{ $jamKeluarFormatted }}</span>
                                @if($a->status_lembur && $jamLembur > 0)
                                    @php
                                        $jam = floor($jamLembur / 60);
                                        $menit = $jamLembur % 60;
                                        if ($jam > 0 && $menit > 0) {
                                            $lemburText = "{$jam} jam {$menit} menit";
                                        } elseif ($jam > 0) {
                                            $lemburText = "{$jam} jam";
                                        } elseif ($menit > 0) {
                                            $lemburText = "{$menit} menit";
                                        } else {
                                            $lemburText = "0 menit";
                                        }
                                    @endphp
                                    <br><span class="badge bg-danger small">Lembur {{ $lemburText }}</span>
                                @endif
                            @else
                                <span class="text-muted">-</span>
                            @endif
                        </td>
                        <td>
                            @if($totalJamKerja !== null)
                                <span class="fw-bold text-primary">{{ $jamKerjaText }}</span>
                                @if($jamKerja)
                                    @php
                                        $jamNormal = floor($jamKerja['jam_kerja_menit'] / 60);
                                        $menitNormal = $jamKerja['jam_kerja_menit'] % 60;
                                        if ($jamNormal > 0 && $menitNormal > 0) {
                                            $normalText = "{$jamNormal} jam {$menitNormal} menit";
                                        } elseif ($jamNormal > 0) {
                                            $normalText = "{$jamNormal} jam";
                                        } elseif ($menitNormal > 0) {
                                            $normalText = "{$menitNormal} menit";
                                        } else {
                                            $normalText = "0 menit";
                                        }
                                    @endphp
                                    <br><small class="text-muted">Normal: {{ $normalText }}</small>
                                @endif
                            @else
                                <span class="text-muted">-</span>
                            @endif
                        </td>
                        <td>
                            @php
                                $statusColors = [
                                    'Hadir' => 'success',
                                    'Izin' => 'info',
                                    'Sakit' => 'warning',
                                    'Cuti' => 'primary',
                                    'Alpha' => 'danger',
                                    'Terlambat' => 'warning'
                                ];
                                $color = $statusColors[$a->status] ?? 'secondary';
                            @endphp
                            <span class="badge bg-{{ $color }} mb-1 d-block">{{ $a->status }}</span>
                            @if($telat !== null && $telat > 0)
                                <span class="badge bg-warning text-dark small">Terlambat</span>
                            @endif
                            @if($a->status_lembur && $jamLembur > 0)
                                <span class="badge bg-danger small mt-1 d-block">Lembur</span>
                            @endif
                        </td>
                        <td>
                            @if($a->keterangan)
                                <small>{{ Str::limit($a->keterangan, 50) }}</small>
                            @else
                                <span class="text-muted">-</span>
                            @endif
                            @if($a->device_name)
                                <br><small class="text-muted"><i class="bi bi-fingerprint"></i> {{ $a->device_name }}</small>
                            @endif
                        </td>
                        <td class="text-center">
                            <a href="{{ route('absensi.show', $a) }}" class="btn btn-sm btn-info" title="Detail">
                                <i class="bi bi-eye"></i>
                            </a>
                            @if(auth()->user()->isKepalaTataUsaha())
                            <a href="{{ route('absensi.edit', $a) }}" class="btn btn-sm btn-warning" title="Edit">
                                <i class="bi bi-pencil"></i>
                            </a>
                            <form action="{{ route('absensi.destroy', $a) }}" method="POST" class="d-inline" onsubmit="return confirm('Yakin hapus?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger" title="Hapus">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="text-center">Tidak ada data absensi</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="mt-3">
            {{ $absensi->links() }}
        </div>
    </div>
</div>

@push('scripts')
@if(isset($chartData))
<script>
    // Grafik Trend Absensi
    const absensiTrendCtx = document.getElementById('absensiTrendChart');
    if (absensiTrendCtx) {
        new Chart(absensiTrendCtx, {
            type: 'line',
            data: {
                labels: @json($chartData['absensi_bulan_labels']),
                datasets: [{
                    label: 'Jumlah Absensi',
                    data: @json($chartData['absensi_per_bulan']),
                    borderColor: '#2563eb',
                    backgroundColor: 'rgba(37, 99, 235, 0.08)',
                    tension: 0.4,
                    fill: true,
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    }
                },
                scales: {
                    x: {
                        grid: {
                            display: false
                        },
                        border: {
                            color: '#e5e7eb'
                        }
                    },
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: '#f3f4f6'
                        },
                        border: {
                            color: '#e5e7eb'
                        },
                        ticks: {
                            stepSize: 5
                        }
                    }
                }
            }
        });
    }

    // Grafik Distribusi Status Absensi
    const absensiStatusCtx = document.getElementById('absensiStatusChart');
    if (absensiStatusCtx) {
        const statusData = @json($chartData['absensi_status']);
        const labels = Object.keys(statusData);
        const values = Object.values(statusData);
        
        new Chart(absensiStatusCtx, {
            type: 'doughnut',
            data: {
                labels: labels,
                datasets: [{
                    data: values,
                    backgroundColor: [
                        '#2563eb', // Hadir
                        '#10b981', // Izin
                        '#f59e0b', // Sakit
                        '#06b6d4', // Cuti
                        '#6b7280'  // Alpha
                    ]
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            font: {
                                size: 12
                            },
                            padding: 15
                        }
                    }
                }
            }
        });
    }
</script>
@endif
@endpush
@endsection