@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'MSJ Absensi'])
    @php
        $dashboardMonth = $dashboard_month ?? date('Y-m');
        [$dashboardMonthYear, $dashboardMonthNumber] = array_pad(explode('-', $dashboardMonth), 2, null);
        $dashboardMonthYear = (int) ($dashboardMonthYear ?? date('Y'));
        $dashboardMonthNumber = (int) ($dashboardMonthNumber ?? date('n'));
        $dashboardYear = (int) ($dashboard_year ?? date('Y'));
        $months = [1=>'Januari',2=>'Februari',3=>'Maret',4=>'April',5=>'Mei',6=>'Juni',7=>'Juli',8=>'Agustus',9=>'September',10=>'Oktober',11=>'November',12=>'Desember'];
        $dashboardMonthLabel = $dashboard_month_label ?? ($months[$dashboardMonthNumber] ?? date('F'));
        $dashboardYearOptions = $dashboard_year_options ?? [$dashboardYear];
        if (empty($dashboardYearOptions)) $dashboardYearOptions = [$dashboardYear];
        $krlTotalDataMissing = $krl_total_data_missing ?? 0;
        $krlTotalDataMissingChecked = $krl_total_data_missing_checked ?? 0;
        $krlTotalDataMissingUnchecked = $krl_total_data_missing_unchecked ?? 0;
        $krlLinkPinLinked = $krl_link_pin_linked_count ?? 0;
        $krlLinkPinUnlinked = $krl_link_pin_unlinked_count ?? 0;
        $krlLinkPinPending = $krl_link_pin_pending_count ?? 0;
        $krlNama = $krl_nama ?? '';
        $detailTanggalMulai = $dashboardYear . '-' . str_pad($dashboardMonthNumber, 2, '0', STR_PAD_LEFT) . '-01';
        $detailTanggalAkhir = date('Y-m-t', strtotime($detailTanggalMulai));
    @endphp
    <style>
        .msj-icon-flat { font-size: 28px; line-height: 1; display: inline-block; }
        .dashboard-block { margin-top: 0.5rem !important; }
        .dashboard-block .card-body { padding-top: 1rem !important; padding-bottom: 1rem !important; }
        .krl-card { transition: transform 0.2s; }
        .krl-card:hover { transform: translateY(-2px); }
    </style>
    <div class="container-fluid py-4">
        {{-- Filter --}}
        <div class="row mt-1"><div class="col-12">
            <div class="card mb-4">
                <div class="card-header pb-0 p-3"><h6 class="mb-1">Dashboard Koordinator Lapangan</h6><p class="text-sm">{{ $krlNama !== '' ? $krlNama : 'Monitoring Data Missing' }}</p></div>
                <div class="card-body p-3 pt-2">
                    <form method="GET" action="{{ url()->current() }}" class="row g-3 align-items-end">
                        <div class="col-md-5 col-lg-4"><label for="dashboard_bulan" class="form-label text-sm font-weight-bold mb-1">Pilih Bulan</label>
                            <select class="form-select" id="dashboard_bulan" name="dashboard_bulan">
                                @for ($i = 1; $i <= 12; $i++)<option value="{{ $i }}" {{ $dashboardMonthNumber === $i ? 'selected' : '' }}>{{ $months[$i] }}</option>@endfor
                            </select>
                        </div>
                        <div class="col-md-3 col-lg-2"><label for="dashboard_tahun" class="form-label text-sm font-weight-bold mb-1">Tahun</label>
                            <select class="form-select" id="dashboard_tahun" name="dashboard_tahun">
                                @foreach ($dashboardYearOptions as $yearOption)<option value="{{ $yearOption }}" {{ (int) $dashboardMonthYear === (int) $yearOption ? 'selected' : '' }}>{{ $yearOption }}</option>@endforeach
                            </select>
                        </div>
                        <div class="col-md-4 col-lg-2"><button type="submit" class="btn btn-primary mb-0 w-100"><i class="fas fa-search me-1"></i>Tampilkan</button></div>
                        <div class="col-md-12 col-lg-4"><div class="text-md-end"><span class="badge bg-gradient-info px-3 py-2">Bulan aktif: {{ $dashboardMonthLabel }} {{ $dashboardMonthYear }}</span></div></div>
                    </form>
                </div>
            </div>
        </div></div>        {{-- Data Missing --}}
        <div class="row mt-2 dashboard-block"><div class="col-12 mb-3">
            <div class="card">
                <div class="card-header pb-0 p-3"><h6 class="mb-1">Monitoring Data Missing - {{ $dashboardMonthLabel }} {{ $dashboardMonthYear }}</h6><p class="text-sm mb-0">Data missing karyawan sesuai status Anda</p></div>
                <div class="card-body p-3">
                    <div class="row">
                        <div class="col-md-4 mb-3 mb-md-0">
                            <div class="card border-0 shadow-sm h-100 krl-card">
                                <div class="card-body p-3 text-center d-flex flex-column justify-content-center" style="min-height: 180px;">
                                    <div class="mb-2"><i class="fas fa-database text-primary msj-icon-flat"></i></div>
                                    <h5 class="text-secondary font-weight-normal mb-2">Total Data Missing</h5>
                                    <h2 class="font-weight-bolder text-dark mb-3">{{ $krlTotalDataMissing }}</h2>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3 mb-md-0">
                            <div class="card border-0 shadow-sm h-100 krl-card">
                                <div class="card-body p-3 text-center d-flex flex-column justify-content-center" style="min-height: 180px;">
                                    <div class="mb-2"><i class="fas fa-check-circle text-success msj-icon-flat"></i></div>
                                    <h5 class="text-secondary font-weight-normal mb-2">Data Missing Selesai Di Cek</h5>
                                    <h2 class="font-weight-bolder text-dark mb-3">{{ $krlTotalDataMissingChecked }}</h2>
                                    <div class="mt-auto"><a href="{{ url('/rptmissing?tanggal_mulai=' . $detailTanggalMulai . '&tanggal_akhir=' . $detailTanggalAkhir) }}" class="btn btn-success btn-sm px-3">Lihat Detail</a></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card border-0 shadow-sm h-100 krl-card">
                                <div class="card-body p-3 text-center d-flex flex-column justify-content-center" style="min-height: 180px;">
                                    <div class="mb-2"><i class="fas fa-hourglass-half text-warning msj-icon-flat"></i></div>
                                    <h5 class="text-secondary font-weight-normal mb-2">Data Missing Belum Di Cek</h5>
                                    <h2 class="font-weight-bolder text-dark mb-3">{{ $krlTotalDataMissingUnchecked }}</h2>
                                    <div class="mt-auto"><a href="{{ url('/trsmis?tanggal_mulai=' . $detailTanggalMulai . '&tanggal_akhir=' . ($krl_trsmis_tanggal_akhir ?? $detailTanggalAkhir)) }}" class="btn btn-warning btn-sm px-3">Lihat Detail</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div></div>        {{-- Link PIN Karyawan (sama dengan HR dashboard) --}}
        <div class="row mt-2 dashboard-block"><div class="col-12 mb-3">
            <div class="card">
                <div class="card-header pb-0 p-3"><h6 class="mb-1">Link PIN Karyawan</h6><p class="text-sm mb-0">Status link PIN seluruh karyawan aktif</p></div>
                <div class="card-body p-3">
                    <div class="row">
                        <div class="col-md-4 mb-3 mb-md-0">
                            <div class="card border-0 shadow-sm h-100 krl-card">
                                <div class="card-body p-3 text-center d-flex flex-column justify-content-center" style="min-height: 160px;">
                                    <div class="mb-2"><i class="fas fa-link text-success msj-icon-flat"></i></div>
                                    <h5 class="text-secondary font-weight-normal mb-2">Linked</h5>
                                    <h2 class="font-weight-bolder text-dark mb-3">{{ $krlLinkPinLinked }}</h2>
                                    <div class="mt-auto"><a href="{{ url('/mstlpk?status_link=Linked') }}" class="btn btn-success btn-sm px-3">Lihat Detail</a></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3 mb-md-0">
                            <div class="card border-0 shadow-sm h-100 krl-card">
                                <div class="card-body p-3 text-center d-flex flex-column justify-content-center" style="min-height: 160px;">
                                    <div class="mb-2"><i class="fas fa-unlink text-danger msj-icon-flat"></i></div>
                                    <h5 class="text-secondary font-weight-normal mb-2">Unlinked</h5>
                                    <h2 class="font-weight-bolder text-dark mb-3">{{ $krlLinkPinUnlinked }}</h2>
                                    <div class="mt-auto"><a href="{{ url('/mstlpk?status_link=Unlinked') }}" class="btn btn-danger btn-sm px-3">Lihat Detail</a></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card border-0 shadow-sm h-100 krl-card">
                                <div class="card-body p-3 text-center d-flex flex-column justify-content-center" style="min-height: 160px;">
                                    <div class="mb-2"><i class="fas fa-hourglass-half text-warning msj-icon-flat"></i></div>
                                    <h5 class="text-secondary font-weight-normal mb-2">Pending</h5>
                                    <h2 class="font-weight-bolder text-dark mb-3">{{ $krlLinkPinPending }}</h2>
                                    <div class="mt-auto"><a href="{{ url('/mstlpk?status_link=Pending') }}" class="btn btn-warning btn-sm px-3">Lihat Detail</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div></div>
        {{-- Grafik --}}
        <div class="row mt-2 dashboard-block">
            <!-- <div class="col-lg-6 mb-3">
                <div class="card chart-card">
                    <div class="card-header pb-0 pt-3 bg-transparent">
                        <h6 class="text-capitalize">Rekap Kehadiran per Departemen</h6>
                        <p class="text-sm mb-0">{{ $dashboardMonthLabel }} {{ $dashboardYear }}</p>
                    </div>
                    <div class="card-body"><div class="chart"><canvas id="chart-krl-hadir-dept" class="chart-canvas"></canvas></div></div>
                </div>
            </div> -->
            <div class="col-lg-6 mb-3">
                <div class="card chart-card">
                    <div class="card-header pb-0 pt-3 bg-transparent">
                        <h6 class="text-capitalize">Rekap Kehadiran per Bulan</h6>
                        <p class="text-sm mb-0">Tahun {{ $dashboardYear }}</p>
                    </div>
                    <div class="card-body"><div class="chart"><canvas id="chart-krl-hadir-monthly" class="chart-canvas"></canvas></div></div>
                </div>
            </div>
            <div class="col-lg-6 mb-3">
                <div class="card chart-card">
                    <div class="card-header pb-0 pt-3 bg-transparent">
                        <h6 class="text-capitalize">Jumlah Data Missing per Bulan</h6>
                        <p class="text-sm mb-0">Tahun {{ $dashboardYear }}</p>
                    </div>
                    <div class="card-body"><div class="chart"><canvas id="chart-krl-missing-monthly" class="chart-canvas"></canvas></div></div>
                </div>
            </div>
            <div class="col-lg-6 mb-3">
                <div class="card chart-card">
                    <div class="card-header pb-0 pt-3 bg-transparent">
                        <h6 class="text-capitalize">Mangkir, Pulang Cepat & Terlambat per Bulan</h6>
                        <p class="text-sm mb-0">Tahun {{ $dashboardYear }}</p>
                    </div>
                    <div class="card-body"><div class="chart"><canvas id="chart-krl-mpt-monthly" class="chart-canvas"></canvas></div></div>
                </div>
            </div>
            <div class="col-lg-6 mb-3">
                <div class="card chart-card">
                    <div class="card-header pb-0 pt-3 bg-transparent">
                        <h6 class="text-capitalize">Insidental, Skorsing, Izin, Cuti & Sakit per Bulan</h6>
                        <p class="text-sm mb-0">Tahun {{ $dashboardYear }}</p>
                    </div>
                    <div class="card-body"><div class="chart"><canvas id="chart-krl-isis-monthly" class="chart-canvas"></canvas></div></div>
                </div>
            </div>
            <div class="col-lg-6 mb-3">
                <div class="card chart-card">
                    <div class="card-header pb-0 pt-3 bg-transparent">
                        <h6 class="text-capitalize">Belum Scan In & Scan Out per Bulan</h6>
                        <p class="text-sm mb-0">Tahun {{ $dashboardYear }}</p>
                    </div>
                    <div class="card-body"><div class="chart"><canvas id="chart-krl-noscan-monthly" class="chart-canvas"></canvas></div></div>
                </div>
            </div>
            <div class="col-lg-6 mb-3">
                <div class="card chart-card">
                    <div class="card-header pb-0 pt-3 bg-transparent">
                        <h6 class="text-capitalize">Surat Peringatan per Departemen</h6>
                        <p class="text-sm mb-0">{{ $dashboardMonthLabel }} {{ $dashboardYear }}</p>
                    </div>
                    <div class="card-body"><div class="chart"><canvas id="chart-krl-sp-dept" class="chart-canvas"></canvas></div></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
<script src="{{ asset('assets/js/plugins/chartjs.min.js') }}"></script>
<script>
    var monthLabels = ["Jan","Feb","Mar","Apr","Mei","Jun","Jul","Agt","Sep","Okt","Nov","Des"];
    var deptLabels = @json($krl_chart_dept_labels ?? []);
    var chartDefaults = { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: true, position: 'top', labels: { boxWidth: 15, padding: 15, font: { size: 11 } } } }, scales: { y: { beginAtZero: true, grid: { drawOnChartArea: true, drawTicks: false, borderDash: [5,5] }, ticks: { padding: 10, color: '#9ca2b7', font: { size: 11 }, precision: 0 } }, x: { grid: { display: false }, ticks: { color: '#9ca2b7', font: { size: 11 } } } } };

    var c1 = document.getElementById('chart-krl-hadir-dept');
    if (c1) new Chart(c1.getContext('2d'), { type: 'bar', data: { labels: deptLabels, datasets: [{ label: 'Hadir', backgroundColor: '#0A9294', data: @json($krl_chart_hadir_dept ?? []), maxBarThickness: 35 }] }, options: chartDefaults });

    var c1b = document.getElementById('chart-krl-hadir-monthly');
    if (c1b) new Chart(c1b.getContext('2d'), { type: 'bar', data: { labels: monthLabels, datasets: [{ label: 'Rekap Kehadiran', backgroundColor: '#0A9294', data: @json($krl_chart_hadir_monthly ?? []), maxBarThickness: 35 }] }, options: chartDefaults });

    var c2 = document.getElementById('chart-krl-missing-monthly');
    if (c2) new Chart(c2.getContext('2d'), { type: 'line', data: { labels: monthLabels, datasets: [{ label: 'Data Missing', borderColor: '#fb6340', backgroundColor: 'rgba(251,99,64,0.15)', fill: true, tension: 0.3, data: @json($krl_chart_missing_monthly ?? []) }] }, options: chartDefaults });

    var c3 = document.getElementById('chart-krl-mpt-monthly');
    if (c3) new Chart(c3.getContext('2d'), { type: 'bar', data: { labels: monthLabels, datasets: [
        { label: 'Mangkir', backgroundColor: '#fb6340', data: @json($krl_chart_mangkir_monthly ?? []), maxBarThickness: 25 },
        { label: 'Pulang Cepat', backgroundColor: '#8965e0', data: @json($krl_chart_pulang_cepat_monthly ?? []), maxBarThickness: 25 },
        { label: 'Terlambat', backgroundColor: '#ffd600', data: @json($krl_chart_terlambat_monthly ?? []), maxBarThickness: 25 }
    ] }, options: chartDefaults });

    var c4 = document.getElementById('chart-krl-isis-monthly');
    if (c4) new Chart(c4.getContext('2d'), { type: 'bar', data: { labels: monthLabels, datasets: [
        { label: 'Insidental', backgroundColor: '#5e72e4', data: @json($krl_chart_insidental_monthly ?? []), maxBarThickness: 20 },
        { label: 'Skorsing', backgroundColor: '#f5365c', data: @json($krl_chart_skorsing_monthly ?? []), maxBarThickness: 20 },
        { label: 'Izin', backgroundColor: '#11cdef', data: @json($krl_chart_izin_monthly ?? []), maxBarThickness: 20 },
        { label: 'Cuti', backgroundColor: '#2dce89', data: @json($krl_chart_cuti_monthly ?? []), maxBarThickness: 20 },
        { label: 'Sakit', backgroundColor: '#fb8c00', data: @json($krl_chart_sakit_monthly ?? []), maxBarThickness: 20 }
    ] }, options: chartDefaults });

    var c5 = document.getElementById('chart-krl-noscan-monthly');
    if (c5) new Chart(c5.getContext('2d'), { type: 'bar', data: { labels: monthLabels, datasets: [
        { label: 'Belum Scan In', backgroundColor: '#f5365c', data: @json($krl_chart_noscan_in_monthly ?? []), maxBarThickness: 30 },
        { label: 'Belum Scan Out', backgroundColor: '#8965e0', data: @json($krl_chart_noscan_out_monthly ?? []), maxBarThickness: 30 }
    ] }, options: chartDefaults });

    var c6 = document.getElementById('chart-krl-sp-dept');
    if (c6) new Chart(c6.getContext('2d'), { type: 'bar', data: { labels: deptLabels, datasets: [{ label: 'Surat Peringatan', backgroundColor: '#5e72e4', data: @json($krl_chart_sp_dept ?? []), maxBarThickness: 35 }] }, options: chartDefaults });
</script>
@endpush