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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'MSJ Absensi'])
    @php
        $dashboardDate = $dashboard_date ?? date('Y-m-d');
        $dashboardMonth = $dashboard_month ?? date('Y-m');
        $dashboardMonthLabel = $dashboard_month_label ?? date('F');
        [$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',
        ];
        $dashboardYearOptions = $dashboard_year_options ?? [$dashboardYear];
        if (empty($dashboardYearOptions)) {
            $dashboardYearOptions = [$dashboardYear];
        }
        $calendarYearOptions = $calendar_year_options ?? $dashboardYearOptions;
        if (empty($calendarYearOptions)) {
            $calendarYearOptions = $dashboardYearOptions;
        }
    @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;
        }
        .chart-filter {
            margin-bottom: 0.5rem;
        }
        .chart-filter select {
            font-size: 0.85rem;
            padding: 0.25rem 0.5rem;
        }
    </style>
    <div class="container-fluid py-4">
        <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 SPV</h6>
                        <p class="text-sm">Monitoring Unsafe Action - {{ $spv_scope['departemen'] ?? '-' }} / {{ $spv_scope['bagian'] ?? '-' }}</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 ?? ($months[$dashboardMonthNumber] ?? '-') }}
                                    </span>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- SPV Cards -->
        <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">Unsafe Action Saya - {{ $dashboardMonthLabel ?? ($months[$dashboardMonthNumber] ?? '-') }} {{ $dashboardYear }}</h6>
                    </div>
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-6 col-md-4 col-lg mb-3 mb-lg-0">
                                <div class="card border-0 shadow-sm h-100">
                                    <div class="card-body p-3 text-center d-flex flex-column justify-content-center" style="min-height: 190px;">
                                        <div class="mb-2">
                                            <i class="fas fa-file-alt text-secondary msj-icon-flat" aria-hidden="true"></i>
                                        </div>
                                        <h5 class="text-secondary font-weight-normal mb-2">Draft</h5>
                                        <h2 class="font-weight-bolder text-dark mb-3">{{ $spv_draft ?? 0 }}</h2>
                                        <div class="mt-auto">
                                            <a href="{{ url('/trssua?status=draft&user_create=1&bulan=' . $dashboardMonthNumber . '&tahun=' . $dashboardYear) }}" class="btn btn-primary px-4 font-weight-bold">Lihat</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6 col-md-4 col-lg mb-3 mb-lg-0">
                                <div class="card border-0 shadow-sm h-100">
                                    <div class="card-body p-3 text-center d-flex flex-column justify-content-center" style="min-height: 190px;">
                                        <div class="mb-2">
                                            <i class="fas fa-hourglass-half text-warning msj-icon-flat" aria-hidden="true"></i>
                                        </div>
                                        <h5 class="text-secondary font-weight-normal mb-2">Dalam Proses</h5>
                                        <h2 class="font-weight-bolder text-dark mb-3">{{ $spv_in_progress ?? 0 }}</h2>
                                        <div class="mt-auto">
                                            <a href="{{ url('/trspua?status=menunggu_approval,disetujui,menunggu_ttd_karyawan&user_create=1&bulan=' . $dashboardMonthNumber . '&tahun=' . $dashboardYear) }}" class="btn btn-primary px-4 font-weight-bold">Lihat</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6 col-md-4 col-lg mb-3 mb-lg-0">
                                <div class="card border-0 shadow-sm h-100">
                                    <div class="card-body p-3 text-center d-flex flex-column justify-content-center" style="min-height: 190px;">
                                        <div class="mb-2">
                                            <i class="fas fa-paper-plane text-primary msj-icon-flat" aria-hidden="true"></i>
                                        </div>
                                        <h5 class="text-secondary font-weight-normal mb-2">Total Diajukan</h5>
                                        <h2 class="font-weight-bolder text-dark mb-3">{{ $spv_total_submitted ?? 0 }}</h2>
                                        <div class="mt-auto">
                                            <a href="{{ url('/rptsp?tanggal_mulai=' . $dashboardYear . '-' . str_pad($dashboardMonthNumber, 2, '0', STR_PAD_LEFT) . '-01&tanggal_akhir=' . $dashboardYear . '-' . str_pad($dashboardMonthNumber, 2, '0', STR_PAD_LEFT) . '-' . date('t', strtotime($dashboardYear . '-' . $dashboardMonthNumber . '-01')) . '&user_create=1') }}" class="btn btn-primary px-4 font-weight-bold">Lihat</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Charts Row 1: Monthly UA, SP, ST -->
        <div class="row mt-2 dashboard-block">
            <div class="col-lg-4 mb-lg-0 mb-3">
                <div class="card z-index-2 h-100">
                    <div class="card-header pb-0 pt-3 bg-transparent">
                        <h6 class="text-capitalize">Unsafe Action Bulanan</h6>
                        <p class="text-sm mb-0">
                            <span class="font-weight-bold">{{ $dashboardMonthLabel ?? ($months[$dashboardMonthNumber] ?? '-') }} {{ $dashboardYear }}</span>
                        </p>
                    </div>
                    <div class="card-body p-3">
                        <div class="chart">
                            <canvas id="chart-spv-monthly-ua" class="chart-canvas" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 mb-lg-0 mb-3">
                <div class="card z-index-2 h-100">
                    <div class="card-header pb-0 pt-3 bg-transparent">
                        <h6 class="text-capitalize">Surat Peringatan (SP) Bulanan</h6>
                        <p class="text-sm mb-0">
                            <span class="font-weight-bold">{{ $dashboardMonthLabel ?? ($months[$dashboardMonthNumber] ?? '-') }} {{ $dashboardYear }}</span>
                        </p>
                    </div>
                    <div class="card-body p-3">
                        <div class="chart">
                            <canvas id="chart-spv-monthly-sp" class="chart-canvas" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 mb-3">
                <div class="card h-100">
                    <div class="card-header pb-0 pt-3 bg-transparent">
                        <h6 class="text-capitalize">Surat Teguran (ST) Bulanan</h6>
                        <p class="text-sm mb-0">
                            <span class="font-weight-bold">{{ $dashboardMonthLabel ?? ($months[$dashboardMonthNumber] ?? '-') }} {{ $dashboardYear }}</span>
                        </p>
                    </div>
                    <div class="card-body p-3">
                        <div class="chart">
                            <canvas id="chart-spv-monthly-st" class="chart-canvas" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Charts Row 2: UA by Violation & UA by Status -->
        <div class="row mt-2 dashboard-block">
            <div class="col-lg-6 mb-lg-0 mb-3">
                <div class="card z-index-2 h-100">
                    <div class="card-header pb-0 pt-3 bg-transparent">
                        <h6 class="text-capitalize">UA per Jenis Pelanggaran</h6>
                        <p class="text-sm mb-0">
                            <span class="font-weight-bold">{{ $dashboardMonthLabel ?? ($months[$dashboardMonthNumber] ?? '-') }} {{ $dashboardYear }}</span>
                        </p>
                    </div>
                    <div class="card-body p-3">
                        <div class="chart">
                            <canvas id="chart-spv-ua-violation" class="chart-canvas" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 mb-3">
                <div class="card h-100">
                    <div class="card-header pb-0 pt-3 bg-transparent">
                        <h6 class="text-capitalize">UA per Status</h6>
                        <p class="text-sm mb-0">
                            <span class="font-weight-bold">{{ $dashboardMonthLabel ?? ($months[$dashboardMonthNumber] ?? '-') }} {{ $dashboardYear }}</span>
                        </p>
                    </div>
                    <div class="card-body p-3">
                        <div class="chart">
                            <canvas id="chart-spv-ua-status" class="chart-canvas" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

@push('js')
    <script src="{{ asset('assets/js/plugins/chartjs.min.js') }}"></script>
    <script>
        @php $monthsArr = ['Jan','Feb','Mar','Apr','Mei','Jun','Jul','Agu','Sep','Okt','Nov','Des']; @endphp
        const months = @json($monthsArr);

        // Monthly UA Chart
        var monthlyUACanvas = document.getElementById("chart-spv-monthly-ua");
        if (monthlyUACanvas) {
            new Chart(monthlyUACanvas.getContext("2d"), {
                type: "bar",
                data: {
                    labels: months,
                    datasets: [{
                        label: "Total UA",
                        backgroundColor: "#f5365c",
                        data: @json($spv_monthly_ua ?? []),
                        maxBarThickness: 30
                    }]
                },
                options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { grid: { display: false } } } }
            });
        }

        // Monthly SP Chart
        var monthlySPCanvas = document.getElementById("chart-spv-monthly-sp");
        if (monthlySPCanvas) {
            new Chart(monthlySPCanvas.getContext("2d"), {
                type: "bar",
                data: {
                    labels: months,
                    datasets: [{
                        label: "Total SP",
                        backgroundColor: "#2dce89",
                        data: @json($spv_monthly_sp ?? []),
                        maxBarThickness: 30
                    }]
                },
                options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } },scales: { x: { grid: { display: false } } } }
            });
        }

        // Monthly ST Chart
        var monthlySTCanvas = document.getElementById("chart-spv-monthly-st");
        if (monthlySTCanvas) {
            new Chart(monthlySTCanvas.getContext("2d"), {
                type: "bar",
                data: {
                    labels: months,
                    datasets: [{
                        label: "Total ST",
                        backgroundColor: "#fb6340",
                        data: @json($spv_monthly_st ?? []),
                        maxBarThickness: 30
                    }]
                },
                options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { grid: { display: false } } } }
            });
        }

        // UA by Violation Chart
        var violationCanvas = document.getElementById("chart-spv-ua-violation");
        if (violationCanvas) {
            new Chart(violationCanvas.getContext("2d"), {
                type: "bar",
                data: {
                    labels: @json($spv_by_violation_labels ?? []),
                    datasets: [{
                        label: "Total UA",
                        backgroundColor: "#fb6340",
                        data: @json($spv_by_violation_data ?? []),
                        maxBarThickness: 40
                    }]
                },
                options: { 
                    responsive: true, 
                    maintainAspectRatio: false, 
                    indexAxis: 'x',
                    plugins: { legend: { display: false } },
                    scales: { x: { grid: { display: false } } }
                }
            });
        }

        // UA by Status Chart (Doughnut)
        var statusCanvas = document.getElementById("chart-spv-ua-status");
        if (statusCanvas) {
            new Chart(statusCanvas.getContext("2d"), {
                type: "doughnut",
                data: {
                    labels: @json($spv_by_status_labels ?? []),
                    datasets: [{
                        data: @json($spv_by_status_data ?? []),
                        backgroundColor: ["#f6c23e", "#11cdef", "#2dce89", "#fb6340", "#2dce89", "#e74a3b"],
                        borderWidth: 0
                    }]
                },
                options: { 
                    responsive: true, 
                    maintainAspectRatio: false, 
                    plugins: { legend: { position: 'bottom', labels: { font: { size: 11 } } } },
                    cutout: '60%'
                }
            });
        }
    </script>
@endpush