@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2 class="mb-1">Dashboard</h2>
        <p class="text-muted mb-0 small">Puskesmas Muara Kumpeh</p>
    </div>
    <div>
        <span class="badge bg-primary">{{ ucfirst(str_replace('_', ' ', auth()->user()->role)) }}</span>
    </div>
</div>

@if(auth()->user()->isPimpinan() || auth()->user()->isKepalaTataUsaha())
<!-- Statistik Cards -->
<div class="row mb-4 g-3">
    <div class="col-md-3 col-sm-6">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="text-muted mb-2 small">Total Pegawai</p>
                        <h3 class="mb-0 fw-bold">{{ $data['total_pegawai'] ?? 0 }}</h3>
                    </div>
                    <div class="text-primary" style="font-size: 2.5rem; opacity: 0.15;">
                        <i class="bi bi-people"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="text-muted mb-2 small">Absensi Hari Ini</p>
                        <h3 class="mb-0 fw-bold">{{ $data['total_absensi_hari_ini'] ?? 0 }}</h3>
                    </div>
                    <div class="text-success" style="font-size: 2.5rem; opacity: 0.15;">
                        <i class="bi bi-calendar-check"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="text-muted mb-2 small">Cuti Menunggu</p>
                        <h3 class="mb-0 fw-bold">{{ $data['total_cuti_menunggu'] ?? 0 }}</h3>
                    </div>
                    <div class="text-warning" style="font-size: 2.5rem; opacity: 0.15;">
                        <i class="bi bi-calendar-event"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="text-muted mb-2 small">Aktifitas Terkini</p>
                        <h3 class="mb-0 fw-bold">{{ isset($data['recent_activities']) ? $data['recent_activities']->count() : 0 }}</h3>
                    </div>
                    <div class="text-info" style="font-size: 2.5rem; opacity: 0.15;">
                        <i class="bi bi-activity"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Grafik Dashboard untuk Kepala TU dan Pimpinan --}}
@if(isset($data['absensi_per_bulan']) && isset($data['absensi_bulan_labels']))
<div class="row mb-4">
    <!-- Grafik Absensi Per Bulan -->
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-graph-up"></i> Trend Absensi (6 Bulan Terakhir)</h5>
            </div>
            <div class="card-body">
                <canvas id="absensiChart" height="100"></canvas>
            </div>
        </div>
    </div>
    <!-- Grafik Distribusi Status Absensi -->
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-pie-chart"></i> Distribusi Status Absensi Bulan Ini</h5>
            </div>
            <div class="card-body">
                <canvas id="absensiStatusChart"></canvas>
            </div>
        </div>
    </div>
</div>

@if(isset($data['cuti_per_bulan']) && isset($data['cuti_bulan_labels']))
<div class="row mb-4">
    <!-- Grafik Cuti Per Bulan -->
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-graph-up"></i> Trend Pengajuan Cuti (6 Bulan Terakhir)</h5>
            </div>
            <div class="card-body">
                <canvas id="cutiChart" height="100"></canvas>
            </div>
        </div>
    </div>
    <!-- Grafik Status Cuti -->
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-pie-chart"></i> Status Cuti</h5>
            </div>
            <div class="card-body">
                <canvas id="cutiStatusChart"></canvas>
            </div>
        </div>
    </div>
</div>
@endif

@if(isset($data['pegawai_by_status']))
<div class="row mb-4">
    <!-- Grafik Distribusi Pegawai -->
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-pie-chart"></i> Distribusi Pegawai Berdasarkan Status Kepegawaian</h5>
            </div>
            <div class="card-body">
                <canvas id="pegawaiStatusChart"></canvas>
            </div>
        </div>
    </div>
</div>
@endif
@endif

<!-- Absensi Hari Ini -->
@if(isset($data['absensi_hari_ini']) && $data['absensi_hari_ini']->count() > 0)
<div class="card mb-4">
    <div class="card-header">
        <h5 class="mb-0"><i class="bi bi-calendar-check"></i> Absensi Hari Ini</h5>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead>
                    <tr>
                        <th><i class="bi bi-person me-1"></i> Pegawai</th>
                        <th><i class="bi bi-clock me-1"></i> Jam Masuk</th>
                        <th><i class="bi bi-clock-history me-1"></i> Jam Keluar</th>
                        <th><i class="bi bi-check-circle me-1"></i> Status</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($data['absensi_hari_ini'] as $absensi)
                    <tr>
                        <td>{{ $absensi->pegawai->nama_lengkap }}</td>
                        <td>{{ $absensi->jam_masuk ? date('H:i', strtotime($absensi->jam_masuk)) : '-' }}</td>
                        <td>{{ $absensi->jam_keluar ? date('H:i', strtotime($absensi->jam_keluar)) : '-' }}</td>
                        <td>
                            <span class="badge bg-{{ $absensi->status == 'Hadir' ? 'success' : ($absensi->status == 'Terlambat' ? 'warning' : 'danger') }}">
                                {{ $absensi->status }}
                            </span>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <a href="{{ route('absensi.index') }}" class="btn btn-sm btn-primary">Lihat Semua</a>
    </div>
</div>
@endif

<!-- Cuti Menunggu Persetujuan -->
@if(isset($data['cuti_menunggu']) && $data['cuti_menunggu']->count() > 0)
<div class="card mb-4">
    <div class="card-header bg-warning text-dark">
        <h5 class="mb-0"><i class="bi bi-calendar-event"></i> Cuti Menunggu Persetujuan</h5>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Pegawai</th>
                        <th>Jenis Cuti</th>
                        <th>Tanggal</th>
                        <th>Jumlah Hari</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($data['cuti_menunggu'] as $cuti)
                    <tr>
                        <td>{{ $cuti->pegawai->nama_lengkap }}</td>
                        <td>{{ $cuti->jenis_cuti }}</td>
                        <td>{{ $cuti->tanggal_mulai->format('d/m/Y') }} - {{ $cuti->tanggal_selesai->format('d/m/Y') }}</td>
                        <td>{{ $cuti->jumlah_hari }} hari</td>
                        <td>
                            <a href="{{ route('cuti.show', $cuti) }}" class="btn btn-sm btn-primary">
                                <i class="bi bi-eye"></i> Detail
                            </a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endif

@else
<!-- Dashboard untuk Pegawai -->
<div class="row mb-4 g-3">
    <div class="col-md-6">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="text-muted mb-2 small">Absensi Bulan Ini</p>
                        <h3 class="mb-0 fw-bold">{{ $data['absensi_bulan_ini'] ?? 0 }}</h3>
                    </div>
                    <div class="text-success" style="font-size: 2.5rem; opacity: 0.15;">
                        <i class="bi bi-calendar-check"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="text-muted mb-2 small">Cuti Aktif</p>
                        <h3 class="mb-0 fw-bold">{{ $data['cuti_aktif'] ?? 0 }}</h3>
                    </div>
                    <div class="text-info" style="font-size: 2.5rem; opacity: 0.15;">
                        <i class="bi bi-calendar-event"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Grafik untuk Pegawai --}}
@if(isset($data['absensi_per_bulan']) && isset($data['absensi_bulan_labels']))
<div class="row mb-4">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-graph-up"></i> Absensi Saya (6 Bulan Terakhir)</h5>
            </div>
            <div class="card-body">
                <canvas id="absensiChart" height="100"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-pie-chart"></i> Status Absensi Bulan Ini</h5>
            </div>
            <div class="card-body">
                <canvas id="absensiStatusChart"></canvas>
            </div>
        </div>
    </div>
</div>
@endif

@if(isset($data['absensi_terakhir']) && $data['absensi_terakhir']->count() > 0)
<div class="card mb-4">
    <div class="card-header">
        <h5 class="mb-0"><i class="bi bi-calendar-check"></i> Absensi Terakhir</h5>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>Tanggal</th>
                        <th>Jam Masuk</th>
                        <th>Jam Keluar</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($data['absensi_terakhir'] as $absensi)
                    <tr>
                        <td>{{ $absensi->tanggal->format('d/m/Y') }}</td>
                        <td>{{ $absensi->jam_masuk ? date('H:i', strtotime($absensi->jam_masuk)) : '-' }}</td>
                        <td>{{ $absensi->jam_keluar ? date('H:i', strtotime($absensi->jam_keluar)) : '-' }}</td>
                        <td>
                            <span class="badge bg-{{ $absensi->status == 'Hadir' ? 'success' : 'warning' }}">
                                {{ $absensi->status }}
                            </span>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endif
@endif

@if(auth()->user()->isPimpinan() && isset($data['recent_activities']))
<div class="card">
    <div class="card-header">
        <h5 class="mb-0"><i class="bi bi-activity"></i> Aktivitas Terkini</h5>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-sm table-hover align-middle">
                <thead>
                    <tr>
                        <th><i class="bi bi-clock me-1"></i> Waktu</th>
                        <th><i class="bi bi-person me-1"></i> User</th>
                        <th><i class="bi bi-activity me-1"></i> Aksi</th>
                        <th><i class="bi bi-file-text me-1"></i> Deskripsi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($data['recent_activities'] as $activity)
                    <tr>
                        <td>{{ $activity->created_at->format('d/m/Y H:i') }}</td>
                        <td>{{ $activity->user ? $activity->user->username : 'System' }}</td>
                        <td><span class="badge bg-secondary">{{ $activity->action }}</span></td>
                        <td>{{ $activity->description }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endif

@push('scripts')
@if(isset($data['absensi_per_bulan']) && isset($data['absensi_bulan_labels']))
<script>
    // Grafik Absensi Per Bulan (Line Chart)
    const absensiCtx = document.getElementById('absensiChart');
    if (absensiCtx) {
        new Chart(absensiCtx, {
            type: 'line',
            data: {
                labels: @json($data['absensi_bulan_labels']),
                datasets: [{
                    label: 'Jumlah Absensi',
                    data: @json($data['absensi_per_bulan']),
                    borderColor: '#198754',
                    backgroundColor: 'rgba(25, 135, 84, 0.1)',
                    tension: 0.4,
                    fill: true,
                    borderWidth: 3
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            stepSize: 1
                        }
                    }
                }
            }
        });
    }

    // Grafik Distribusi Status Absensi (Pie Chart)
    const absensiStatusCtx = document.getElementById('absensiStatusChart');
    if (absensiStatusCtx) {
        const absensiStatusData = @json($data['absensi_status']);
        new Chart(absensiStatusCtx, {
            type: 'doughnut',
            data: {
                labels: Object.keys(absensiStatusData),
                datasets: [{
                    data: Object.values(absensiStatusData),
                    backgroundColor: [
                        '#198754', // Hadir - green
                        '#0dcaf0', // Izin - info
                        '#ffc107', // Sakit - warning
                        '#fd7e14', // Cuti - orange
                        '#dc3545'  // Alpha - danger
                    ]
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });
    }

    @if(isset($data['cuti_per_bulan']) && isset($data['cuti_bulan_labels']))
    // Grafik Cuti Per Bulan (Line Chart)
    const cutiCtx = document.getElementById('cutiChart');
    if (cutiCtx) {
        new Chart(cutiCtx, {
            type: 'line',
            data: {
                labels: @json($data['cuti_bulan_labels']),
                datasets: [{
                    label: 'Jumlah Pengajuan Cuti',
                    data: @json($data['cuti_per_bulan']),
                    borderColor: '#ffc107',
                    backgroundColor: 'rgba(255, 193, 7, 0.1)',
                    tension: 0.4,
                    fill: true,
                    borderWidth: 3
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            stepSize: 1
                        }
                    }
                }
            }
        });
    }

    // Grafik Status Cuti (Pie Chart)
    const cutiStatusCtx = document.getElementById('cutiStatusChart');
    if (cutiStatusCtx) {
        const cutiStatusData = @json($data['cuti_status']);
        new Chart(cutiStatusCtx, {
            type: 'doughnut',
            data: {
                labels: Object.keys(cutiStatusData),
                datasets: [{
                    data: Object.values(cutiStatusData),
                    backgroundColor: [
                        '#ffc107', // Menunggu - warning
                        '#198754', // Disetujui - success
                        '#dc3545', // Ditolak - danger
                        '#6c757d'  // Dibatalkan - secondary
                    ]
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });
    }
    @endif

    @if(isset($data['pegawai_by_status']))
    // Grafik Distribusi Pegawai (Pie Chart)
    const pegawaiStatusCtx = document.getElementById('pegawaiStatusChart');
    if (pegawaiStatusCtx) {
        const pegawaiStatusData = @json($data['pegawai_by_status']);
        new Chart(pegawaiStatusCtx, {
            type: 'pie',
            data: {
                labels: Object.keys(pegawaiStatusData),
                datasets: [{
                    data: Object.values(pegawaiStatusData),
                    backgroundColor: [
                        '#198754', // PNS
                        '#0dcaf0', // CPNS
                        '#ffc107', // PPPK
                        '#fd7e14', // Honorer
                        '#6c757d'  // Kontrak
                    ]
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });
    }
    @endif
</script>
@endif

{{-- Grafik untuk Pegawai --}}
@if(auth()->user()->isPegawai() && isset($data['absensi_per_bulan']) && isset($data['absensi_bulan_labels']))
<script>
    // Grafik Absensi Pegawai Per Bulan
    const absensiCtx = document.getElementById('absensiChart');
    if (absensiCtx) {
        new Chart(absensiCtx, {
            type: 'line',
            data: {
                labels: @json($data['absensi_bulan_labels']),
                datasets: [{
                    label: 'Jumlah Absensi Saya',
                    data: @json($data['absensi_per_bulan']),
                    borderColor: '#198754',
                    backgroundColor: 'rgba(25, 135, 84, 0.1)',
                    tension: 0.4,
                    fill: true,
                    borderWidth: 3
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            stepSize: 1
                        }
                    }
                }
            }
        });
    }

    // Grafik Status Absensi Pegawai
    const absensiStatusCtx = document.getElementById('absensiStatusChart');
    if (absensiStatusCtx) {
        const absensiStatusData = @json($data['absensi_status']);
        new Chart(absensiStatusCtx, {
            type: 'doughnut',
            data: {
                labels: Object.keys(absensiStatusData),
                datasets: [{
                    data: Object.values(absensiStatusData),
                    backgroundColor: [
                        '#198754', // Hadir
                        '#0dcaf0', // Izin
                        '#ffc107', // Sakit
                        '#fd7e14', // Cuti
                        '#dc3545'  // Alpha
                    ]
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });
    }
</script>
@endif
@endpush
@endsection