{{-- resources/views/dashboard.blade.php --}}
{{-- CSS sudah dipisah ke: public/css/dashboard.css --}}
<x-app-layout>

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {

    // ── BAR CHART ──
    new Chart(document.getElementById('barChart'), {
        type: 'bar',
        data: {
            labels: {!! json_encode($chartLabels) !!},
            datasets: [{
                label: 'Penugasan',
                data: {!! json_encode($chartValues) !!},
                backgroundColor: {!! json_encode($chartBgColors) !!},
                borderRadius: 6,
                borderSkipped: false,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                tooltip: { callbacks: { label: c => ' ' + c.raw + ' penugasan' } }
            },
            scales: {
                x: { grid: { display: false }, ticks: { font: { size: 10 }, autoSkip: false } },
                y: { grid: { color: 'rgba(0,0,0,0.06)' }, ticks: { font: { size: 10 }, stepSize: 5 } }
            }
        }
    });

    // ── DONUT CHART ──
    new Chart(document.getElementById('donutChart'), {
        type: 'doughnut',
        data: {
            labels: {!! json_encode($chartLabels) !!},
            datasets: [{
                data: {!! json_encode($chartValues) !!},
                backgroundColor: {!! json_encode($chartBgColors) !!},
                borderWidth: 2,
                borderColor: '#fff',
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            cutout: '68%',
            plugins: {
                legend: { display: false },
                tooltip: { callbacks: { label: c => ' ' + c.raw + ' pekerjaan' } }
            }
        }
    });

    // ── LINE CHART TEKNISI ──
    new Chart(document.getElementById('teknisiChart'), {
        type: 'line',
        data: {
            labels: {!! json_encode($monthLabels) !!},
            datasets: {!! json_encode($teknisiDatasets) !!}
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { 
                    display: true, 
                    position: 'left',
                    labels: { usePointStyle: true, boxWidth: 8 }
                },
                tooltip: { callbacks: { label: c => ' ' + c.dataset.label + ': ' + c.raw + ' penugasan' } }
            },
            scales: {
                x: { grid: { display: false }, ticks: { font: { size: 10 }, autoSkip: false } },
                y: { grid: { color: 'rgba(0,0,0,0.06)' }, ticks: { font: { size: 10 }, stepSize: 1, beginAtZero: true } }
            }
        }
    });

});
</script>
@endpush

<div class="db-wrap">



    {{-- ── STAT CARDS ── --}}
    <div class="db-stats">
        <div class="db-stat s-green">
            <div class="db-stat-deco"></div>
            <div class="db-stat-ico">
                <svg fill="none" stroke="#085041" stroke-width="2" viewBox="0 0 24 24">
                    <path d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
                </svg>
            </div>
            <div class="db-stat-lbl">Total Teknisi</div>
            <div class="db-stat-num">{{ $totalTeknisi ?? 0 }}</div>
            <div class="db-stat-sub">Terdaftar dalam sistem</div>
        </div>

        <div class="db-stat s-blue">
            <div class="db-stat-deco"></div>
            <div class="db-stat-ico">
                <svg fill="none" stroke="#042c53" stroke-width="2" viewBox="0 0 24 24">
                    <path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                </svg>
            </div>
            <div class="db-stat-lbl">Teknisi Aktif</div>
            <div class="db-stat-num">{{ $teknisiAktif ?? 0 }}</div>
            <div class="db-stat-sub">Sedang bertugas</div>
        </div>

        <div class="db-stat s-amber">
            <div class="db-stat-deco"></div>
            <div class="db-stat-ico">
                <svg fill="none" stroke="#412402" stroke-width="2" viewBox="0 0 24 24">
                    <rect x="2" y="7" width="20" height="14" rx="2"/>
                    <path d="M16 7V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v2"/>
                </svg>
            </div>
            <div class="db-stat-lbl">Total Pekerjaan</div>
            <div class="db-stat-num">{{ $totalPekerjaan ?? 0 }}</div>
            <div class="db-stat-sub">Semua penugasan</div>
        </div>

        <div class="db-stat s-violet">
            <div class="db-stat-deco"></div>
            <div class="db-stat-ico">
                <svg fill="none" stroke="#26215c" stroke-width="2" viewBox="0 0 24 24">
                    <path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
            </div>
            <div class="db-stat-lbl">Total Laporan</div>
            <div class="db-stat-num">{{ $totalLaporan ?? 0 }}</div>
            <div class="db-stat-sub">Laporan kegiatan</div>
        </div>
    </div>

    {{-- ── BAR CHART ── --}}
    <div class="db-chart-wrap">
        <div class="db-panel-head">
            <div class="db-panel-head-dot" style="background:#1d9e75;"></div>
            <div class="db-panel-head-title">Penugasan per Jenis Pekerjaan — Bulan Ini</div>
        </div>
        <div class="db-bar-legend" style="flex-wrap: wrap;">
            @foreach($chartLabels as $index => $label)
            <span class="db-legend-item"><span class="db-legend-sq" style="background:{{ $chartBgColors[$index] }};"></span>{{ $label }}</span>
            @endforeach
        </div>
        <div style="position:relative; width:100%; height:250px;">
            <canvas id="barChart" role="img" aria-label="Bar chart penugasan per jenis pekerjaan bulan ini"></canvas>
        </div>
    </div>

    {{-- ── BAR CHART TEKNISI ── --}}
    <div class="db-chart-wrap" style="margin-bottom: 24px;">
        <div class="db-panel-head">
            <div class="db-panel-head-dot" style="background:#378add;"></div>
            <div class="db-panel-head-title">Beban Kerja Teknisi — Seluruh Data</div>
        </div>
        <div style="position:relative; width:100%; height:250px; padding-top: 16px;">
            <canvas id="teknisiChart" role="img" aria-label="Line chart penugasan per teknisi"></canvas>
        </div>
    </div>

    {{-- ── TARIF PEKERJAAN (FULL WIDTH) ── --}}
    <div class="db-panel" style="width: 100%; margin-bottom: 24px;">
        <div class="db-panel-head">
            <div class="db-panel-head-dot" style="background:#378add;"></div>
            <div class="db-panel-head-title">Tarif Pekerjaan — Referensi Cepat</div>
        </div>
        <table class="db-tarif-table">
            <thead>
                <tr>
                    <th>Pekerjaan</th>
                    <th>Kode</th>
                    <th>Tarif</th>
                    <th>Satuan</th>
                </tr>
            </thead>
            <tbody>
                @foreach($tarifPekerjaans ?? [] as $tarif)
                <tr>
                    <td>
                        @php
                            $badgeClass = match($tarif->jenis_pekerjaan) {
                                'sr'                          => 'bj-sr',
                                'pengembangan_jaringan_pipa',
                                'penyempurnaan_jaringan_pipa' => 'bj-pjp',
                                'perbaikan_jaringan_pipa'     => 'bj-perbaikan',
                                'gali_urug'                   => 'bj-gali',
                                'pemasangan_gate_valve',
                                'pengangkatan'                => 'bj-gv',
                                'pengecatan_pipa_besi'        => 'bj-cat',
                                default                       => 'bj-sr',
                            };
                            $priceColor = match($tarif->jenis_pekerjaan) {
                                'sr'                                                       => '#0f6e56',
                                'pengembangan_jaringan_pipa', 'penyempurnaan_jaringan_pipa'=> '#185fa5',
                                'perbaikan_jaringan_pipa'                                  => '#a32d2d',
                                'gali_urug'                                                => '#633806',
                                'pengecatan_pipa_besi'                                     => '#72243e',
                                default                                                    => '#3c3489',
                            };
                        @endphp
                        <span class="badge-jenis {{ $badgeClass }}">{{ $tarif->nama_item }}</span>
                    </td>
                    <td style="font-size:10px; color:#999;">{{ $tarif->kode_item }}</td>
                    <td class="db-tarif-price" style="color: {{ $priceColor }};">
                        Rp {{ number_format($tarif->tarif_per_unit ?? $tarif->tarif_per_meter, 0, ',', '.') }}
                    </td>
                    <td style="font-size:11px; color:#999;">
                        {{ $tarif->tarif_per_meter ? '/meter' : '/unit' }}
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    {{-- ── BOTTOM WIDGETS ── --}}
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-bottom: 24px;">

        {{-- INFO PERUMDA --}}
        <div class="db-info-card" style="margin: 0;">
            <div class="db-info-logo">PERUMDA Air Minum</div>
            <div class="db-info-name">Tirta Sanjiwani</div>
            <div class="db-info-region">Kabupaten Gianyar, Bali</div>
            <hr class="db-info-divider">
            <div class="db-info-row">
                <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                </svg>
                (0361) 943233
            </div>
            <div class="db-info-row">
                <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 00-2-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                </svg>
                tekleperumda@gmail.com
            </div>
        </div>

        {{-- DONUT CHART --}}
        <div class="db-donut-card" style="margin: 0; padding: 24px;">
            <div class="db-panel-head" style="margin-bottom: 12px;">
                <div class="db-panel-head-dot" style="background:#7f77dd;"></div>
                <div class="db-panel-head-title">Distribusi Pekerjaan</div>
            </div>
            <div style="display:flex; justify-content:center;">
                <div style="position:relative; width:150px; height:150px;">
                    <canvas id="donutChart" role="img" aria-label="Donut chart distribusi jenis pekerjaan bulan ini"></canvas>
                </div>
            </div>
            <div class="db-chart-legend" style="justify-content:center; margin-top:16px; flex-wrap:wrap; gap: 8px;">
                @foreach($chartLabels as $index => $label)
                <span class="db-legend-item" style="font-size: 10px; margin: 0;"><span class="db-legend-sq" style="background:{{ $chartBgColors[$index] }};"></span>{{ $label }}</span>
                @endforeach
            </div>
        </div>

    </div>

</div>

</x-app-layout>