@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;
        }
        // Calculate start and end of selected month for rptsp report
        $reportTanggalMulai = $dashboardYear . '-' . str_pad($dashboardMonthNumber, 2, '0', STR_PAD_LEFT) . '-01';
        $reportTanggalAkhir = date('Y-m-t', strtotime($reportTanggalMulai));
    @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;
        }
        .card-header-with-filter {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        .card-header-with-filter h6 {
            margin-bottom: 0;
        }
        .card-header-with-filter .chart-filter {
            margin-bottom: 0;
        }
        .card-header-with-filter select {
            font-size: 0.8rem;
            padding: 0.2rem 0.5rem;
            min-width: 180px;
        }
    </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 Jishuken</h6>
                        <p class="text-sm">Monitoring Unsafe Action Karyawan</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>

        <!-- Unsafe Action 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 - {{ $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">{{ $unsafe_draft ?? 0 }}</h2>
                                        <div>
                                            <a href="{{ url('/trssua?status=draft&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-envelope text-info msj-icon-flat" aria-hidden="true"></i>
                                        </div>
                                        <h5 class="text-secondary font-weight-normal mb-2">Perlu Kirim Email</h5>
                                        <h2 class="font-weight-bolder text-dark mb-3">{{ $unsafe_need_email ?? 0 }}</h2>
                                        <div>
                                            <a href="{{ url('/trspua?status=disetujui&approval_token_null=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-clock text-primary msj-icon-flat" aria-hidden="true"></i>
                                        </div>
                                        <h5 class="text-secondary font-weight-normal mb-2">Menunggu Approval</h5>
                                        <h2 class="font-weight-bolder text-dark mb-3">{{ $unsafe_menunggu_approval ?? 0 }}</h2>
                                        <div>
                                            <a href="{{ url('/trspua?status=menunggu_approval&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 d-flex flex-column justify-content-center" style="min-height: 190px;">
                                        <div class="row mb-3">
                                            <div class="col-6 d-flex flex-column align-items-center">
                                                <i class="fas fa-check-circle text-success fa-2x mb-1"></i>
                                                <h5 class="text-secondary font-weight-normal mb-2">Selesai</h5>
                                                <h2 class="font-weight-bolder text-dark mb-0">{{ $unsafe_sudah_selesai ?? 0 }}</h2>
                                                
                                            </div>
                                            <div class="col-6 d-flex flex-column align-items-center">
                                                <i class="fas fa-times-circle text-danger fa-2x mb-1"></i>
                                                <h5 class="text-secondary font-weight-normal mb-2">Ditolak</h5>
                                                <h2 class="font-weight-bolder text-dark mb-0">{{ $unsafe_ditolak ?? 0 }}</h2>
                                                
                                            </div>
                                        </div>
                                        <div class="mt-auto text-center">
                                            <a href="{{ url('/rptsp?tanggal_mulai=' . $reportTanggalMulai . '&tanggal_akhir=' . $reportTanggalAkhir) }}" class="btn btn-primary px-4 font-weight-bold">Lihat</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Unsafe Action Charts Row -->
        <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">
                        <div class="card-header-with-filter">
                            <h6 class="text-capitalize">Unsafe Action per Departemen</h6>
                            <div class="chart-filter">
                                <select class="form-select form-select-sm" id="filter_dept_violation">
                                    <option value="">Semua Jenis Pelanggaran</option>
                                    @foreach ($unsafe_all_violations ?? [] as $id => $nama)
                                        <option value="{{ $id }}">{{ $nama }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <p class="text-sm mb-0 mt-2">
                            <span class="font-weight-bold">{{ $dashboardMonthLabel ?? ($months[$dashboardMonthNumber] ?? '-') }} {{ $dashboardYear }}</span>
                        </p>
                    </div>
                    <div class="card-body p-3">
                        <div class="chart">
                            <canvas id="chart-bar-unsafe-dept" 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">
                        <div class="card-header-with-filter">
                            <h6 class="text-capitalize">Unsafe Action per Jenis Pelanggaran</h6>
                            <div class="chart-filter">
                                <select class="form-select form-select-sm" id="filter_violation_dept">
                                    <option value="">Semua Departemen</option>
                                    @foreach ($unsafe_all_depts ?? [] as $dept)
                                        <option value="{{ $dept }}">{{ $dept }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <p class="text-sm mb-0 mt-2">
                            <span class="font-weight-bold">{{ $dashboardMonthLabel ?? ($months[$dashboardMonthNumber] ?? '-') }} {{ $dashboardYear }}</span>
                        </p>
                    </div>
                    <div class="card-body p-3">
                        <div class="chart">
                            <canvas id="chart-bar-unsafe-violation" 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>
        // Data untuk filter
        const deptViolationData = @json($unsafe_dept_violation_data ?? []);
        const violationDeptData = @json($unsafe_violation_dept_data ?? []);
        const allViolations = @json($unsafe_all_violations ?? []);
        const allDepts = @json($unsafe_all_depts ?? []);

        // Bar Chart - Unsafe Action per Departemen
        var unsafeDeptCanvas = document.getElementById("chart-bar-unsafe-dept");
        var deptChart = null;
        if (unsafeDeptCanvas) {
            var ctxUnsafeDept = unsafeDeptCanvas.getContext("2d");

            deptChart = new Chart(ctxUnsafeDept, {
                type: "bar",
                data: {
                    labels: @json($unsafe_by_dept_labels ?? []),
                    datasets: [{
                        label: "Total Unsafe Action",
                        backgroundColor: "#f5365c",
                        data: @json($unsafe_by_dept_data ?? []),
                        maxBarThickness: 40
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            grid: {
                                drawBorder: false,
                                display: true,
                                drawOnChartArea: true,
                                drawTicks: false,
                                borderDash: [5, 5]
                            },
                            ticks: {
                                display: true,
                                padding: 10,
                                color: '#9ca2b7',
                                font: {
                                    size: 11,
                                    family: "Open Sans",
                                    style: 'normal',
                                    lineHeight: 2
                                },
                            }
                        },
                        x: {
                            grid: {
                                drawBorder: false,
                                display: false,
                                drawOnChartArea: false,
                                drawTicks: false,
                            },
                            ticks: {
                                display: true,
                                color: '#9ca2b7',
                                padding: 10,
                                font: {
                                    size: 11,
                                    family: "Open Sans",
                                    style: 'normal',
                                    lineHeight: 2
                                },
                            }
                        },
                    },
                },
            });
        }

        // Bar Chart - Unsafe Action per Jenis Pelanggaran
        var unsafeViolationCanvas = document.getElementById("chart-bar-unsafe-violation");
        var violationChart = null;
        if (unsafeViolationCanvas) {
            var ctxUnsafeViolation = unsafeViolationCanvas.getContext("2d");

            violationChart = new Chart(ctxUnsafeViolation, {
                type: "bar",
                data: {
                    labels: @json($unsafe_by_violation_labels ?? []),
                    datasets: [{
                        label: "Total Unsafe Action",
                        backgroundColor: "#fb6340",
                        data: @json($unsafe_by_violation_data ?? []),
                        maxBarThickness: 40
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            grid: {
                                drawBorder: false,
                                display: true,
                                drawOnChartArea: true,
                                drawTicks: false,
                                borderDash: [5, 5]
                            },
                            ticks: {
                                display: true,
                                padding: 10,
                                color: '#9ca2b7',
                                font: {
                                    size: 11,
                                    family: "Open Sans",
                                    style: 'normal',
                                    lineHeight: 2
                                },
                            }
                        },
                        x: {
                            grid: {
                                drawBorder: false,
                                display: false,
                                drawOnChartArea: false,
                                drawTicks: false,
                            },
                            ticks: {
                                display: true,
                                color: '#9ca2b7',
                                padding: 10,
                                font: {
                                    size: 11,
                                    family: "Open Sans",
                                    style: 'normal',
                                    lineHeight: 2
                                },
                            }
                        },
                    },
                },
            });
        }

        // Filter event handlers
        document.getElementById('filter_dept_violation').addEventListener('change', function() {
            const selectedViolationId = this.value;
            if (!deptChart) return;

            if (selectedViolationId === '') {
                // Show all violations (original data)
                deptChart.data.datasets[0].data = @json($unsafe_by_dept_data ?? []);
                deptChart.data.datasets[0].label = "Total Unsafe Action";
            } else {
                // Show data filtered by violation
                const violationName = allViolations[selectedViolationId] || '';
                const newData = allDepts.map(dept => deptViolationData[dept]?.[selectedViolationId] ?? 0);
                deptChart.data.datasets[0].data = newData;
                deptChart.data.datasets[0].label = "Unsafe Action - " + violationName;
            }
            deptChart.update();
        });

        document.getElementById('filter_violation_dept').addEventListener('change', function() {
            const selectedDept = this.value;
            if (!violationChart) return;

            if (selectedDept === '') {
                // Show all departments (original data)
                violationChart.data.datasets[0].data = @json($unsafe_by_violation_data ?? []);
                violationChart.data.datasets[0].label = "Total Unsafe Action";
            } else {
                // Show data filtered by department
                const newData = Object.keys(allViolations).map(id => violationDeptData[id]?.[selectedDept] ?? 0);
                violationChart.data.datasets[0].data = newData;
                violationChart.data.datasets[0].label = "Unsafe Action - " + selectedDept;
            }
            violationChart.update();
        });
    </script>
@endpush