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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid py-4">
        <div class="row">
            <!-- COA Dibuat -->
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card shadow-sm hover-shadow">
                    <a href="{{ url('trscoa') }}" class="card-link text-dark text-decoration-none link-primary">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <p class="text-sm mb-0 text-uppercase font-weight-bold">COA made</p>
                                        <h5 class="font-weight-bolder">
                                            {{ number_format($coa) }}
                                        </h5>
                                        <p class="mb-0">
                                            <span
                                                class="text-success text-sm font-weight-bolder">+{{ number_format($coaAdd) }}</span>
                                            this week
                                        </p>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div
                                        class="icon icon-shape bg-gradient-primary shadow-primary text-center rounded-circle">
                                        <i class="ni ni-folder-17 text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>

            <!-- COA Belum Dibuat -->
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card shadow-sm hover-shadow h-100">
                    <a href="{{ url('trscoa') }}" class="card-link">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <h6 class="text-sm text-uppercase font-weight-bold mb-1">Pending COA</h6>
                                        <h5 class="font-weight-bolder mb-1">
                                            {{ number_format($coa_belum_dibuat) }}
                                        </h5>
                                        {{-- <span
                                            class="text-danger text-sm font-weight-bolder">-{{ number_format($coa_pending_today) }}
                                            masih menunggu</span> --}}
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div
                                        class="icon icon-shape bg-gradient-danger shadow-danger text-center rounded-circle">
                                        <i class="ni ni-time-alarm text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>

            <!-- Total COA -->
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card shadow-sm hover-shadow h-100">
                    <a href="{{ url('trscoa') }}" class="card-link">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <h6 class="text-sm text-uppercase font-weight-bold mb-1">Total DO</h6>
                                        <h5 class="font-weight-bolder mb-1">
                                            {{ number_format($total_coa) }}
                                        </h5>
                                        {{-- <span class="text-info text-sm font-weight-bolder">Total Keseluruhan</span> --}}
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div
                                        class="icon icon-shape bg-gradient-success shadow-success text-center rounded-circle">
                                        <i class="ni ni-collection text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            <!-- Sinkronisasi Data -->
            <div class="col-xl-3 col-sm-6">
                <button type="button" class="card border-0 shadow-sm hover-shadow w-100 p-0 bg-white"
                    style="text-align: left; border: none; background: none;" data-bs-toggle="modal"
                    data-bs-target="#syncModal">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Synchronize</p>
                                    <h5 class="font-weight-bolder">
                                        {{ $last_sync_time }}
                                    </h5>
                                    @php
                                        $isToday = false;
                                        if ($lastSync && strtotime($lastSync)) {
                                            $isToday = \Carbon\Carbon::parse($lastSync)->isToday();
                                        }
                                    @endphp
                                    <span
                                        class="{{ $isToday ? 'text-success' : 'text-danger' }} text-sm font-weight-bolder">
                                        {{ $lastSync }}
                                    </span>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-warning shadow-warning text-center rounded-circle">
                                    <i class="fas fa-rotate text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </button>
            </div>
        </div>

        <div class="row mt-4">
            <!-- Grafik COA Dibuat -->
            <div class="col-lg-7 mb-lg-0 mb-4">
                <div class="card z-index-2 h-100">
                    <div class="card-header pb-0 pt-3 bg-transparent d-flex justify-content-between align-items-center">
                        <h6 class="text-capitalize mb-0">Tren COA Dibuat</h6>
                        <div class="row">
                            <div class="col-md-6">
                                <label for="filter-bulan" class="form-label">Bulan</label>
                                <select id="filter-bulan" class="form-select form-select-xs select2">
                                    <option value="" selected disabled>-- Pilih Bulan --</option>
                                    @foreach ($bulan_list->pluck('bulan')->unique() as $bulan)
                                        <option value="{{ $bulan }}">
                                            {{ \Carbon\Carbon::create()->month((int) $bulan)->translatedFormat('F') }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label for="filter-tahun" class="form-label">Tahun</label>
                                <select id="filter-tahun" class="form-select form-select-xs select2">
                                    <option value="" selected disabled>-- Pilih Tahun --</option>
                                    @foreach ($bulan_list->pluck('tahun')->unique() as $tahun)
                                        <option value="{{ $tahun }}">{{ $tahun }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-3">
                        <div id="chart-coa" class="w-100 h-100" style="min-height: 420px;"></div>
                    </div>
                </div>
            </div>

            <!-- Tabel COA Terbaru -->
            <div class="col-lg-5 mb-lg-0 mb-4">
                <div class="card h-100">
                    <div class="card-header pb-0 p-3 d-flex justify-content-between align-items-center">
                        <h6 class="mb-0">COA Terbaru</h6>
                        <small class="text-muted">
                            {{ $latest_coa->isNotEmpty() && $latest_coa->first()->created_at
                                ? \Carbon\Carbon::parse($latest_coa->first()->created_at)->format('d M Y')
                                : 'Tidak ada data' }}
                        </small>
                    </div>
                    <div class="table-responsive">
                        <table class="table align-items-center mb-0">
                            <thead class="text-center">
                                <tr>
                                    <th class="text-uppercase text-xs font-weight-bolder">No</th>
                                    <th class="text-uppercase text-xs font-weight-bolder">COA Number</th>
                                    <th class="text-uppercase text-xs font-weight-bolder">Invoice</th>
                                    <th class="text-uppercase text-xs font-weight-bolder">Material</th>
                                    <th class="text-uppercase text-xs font-weight-bolder">Date</th>
                                </tr>
                            </thead>
                            <tbody class="text-center">
                                @forelse ($latest_coa as $index => $item)
                                    <tr>
                                        <td><span class="text-sm font-weight-normal">{{ $index + 1 }}</span></td>
                                        <td><span class="text-sm font-weight-normal">{{ $item->coa_number }}</span></td>
                                        <td><span class="text-sm font-weight-normal">{{ $item->invoice }}</span></td>
                                        <td><span class="text-sm font-weight-normal">{{ $item->material }}</span></td>
                                        <td><span
                                                class="text-sm font-weight-normal">{{ \Carbon\Carbon::parse($item->created_at)->format('d M Y') }}</span>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-danger text-center py-3">Tidak ada data COA
                                            terbaru.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        @php
            $userRole = $user_role ?? (session('user')->idroles ?? '');
        @endphp

        @if (in_array($userRole, ['admins', 'admpou', 'apvpou']))
        <div class="row mt-4">
            <!-- Grafik Pengetesan Product Outsource -->
            <div class="col-lg-7 mb-lg-0 mb-4">
                <div class="card z-index-2 h-100 shadow-sm">
                    <div class="card-header pb-0 pt-3 bg-transparent d-flex justify-content-between align-items-center flex-wrap gap-2">
                        <h6 class="text-capitalize mb-0">Tren Pengetesan Product Outsource</h6>
                        <div class="row g-2">
                            <div class="col-6 col-sm-auto">
                                <label for="filter-bulan-outsource" class="form-label mb-0 text-xs">Bulan</label>
                                <select id="filter-bulan-outsource" class="form-select form-select-xs select2">
                                    <option value="" selected disabled>-- Pilih Bulan --</option>
                                    @foreach ($outsource_bulan_list->pluck('bulan')->unique() as $bln)
                                        <option value="{{ $bln }}">
                                            {{ \Carbon\Carbon::create()->month((int) $bln)->translatedFormat('F') }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-6 col-sm-auto">
                                <label for="filter-tahun-outsource" class="form-label mb-0 text-xs">Tahun</label>
                                <select id="filter-tahun-outsource" class="form-select form-select-xs select2">
                                    <option value="" selected disabled>-- Pilih Tahun --</option>
                                    @foreach ($outsource_bulan_list->pluck('tahun')->unique() as $thn)
                                        <option value="{{ $thn }}">{{ $thn }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-3">
                        <div id="chart-outsource" class="w-100 h-100" style="min-height: 420px;"></div>
                    </div>
                </div>
            </div>

            <!-- Card Test Outsource Terbaru / Butuh Approval -->
            <div class="col-lg-5 mb-lg-0 mb-4">
                <div class="card h-100 shadow-sm">
                    <div class="card-header pb-0 p-3 d-flex justify-content-between align-items-center flex-wrap gap-2">
                        <div>
                            <h6 class="mb-0">
                                @if ($userRole === 'apvpou' || $userRole === 'admins')
                                    List Approval Outsource
                                @else
                                    List Test Outsource
                                @endif
                            </h6>
                            <small class="text-muted text-xs">
                                @if ($userRole === 'apvpou')
                                    Menunggu Approval Anda
                                @elseif ($userRole === 'admins')
                                    Semua Menunggu Approval
                                @elseif ($userRole === 'admpou')
                                    Pending & Reject
                                @else
                                    Daftar Uji Terkini
                                @endif
                            </small>
                        </div>
                        {{-- <span class="btn btn-sm {{ ($userRole === 'apvpou' || $userRole === 'admins') ? 'btn-warning' : 'btn-info' }} mb-0 py-1 px-2 text-white font-weight-bold" style="cursor: default;">
                            {{ count($latest_outsource ?? []) }} Data
                        </span> --}}
                    </div>
                    <div class="table-responsive p-0 mt-2">
                        <table class="table align-items-center mb-0">
                            <thead class="text-center">
                                <tr>
                                    <th class="text-uppercase text-xs font-weight-bolder">No</th>
                                    <th class="text-uppercase text-xs font-weight-bolder text-start ps-3">Material</th>
                                    <th class="text-uppercase text-xs font-weight-bolder">Batch</th>
                                    <th class="text-uppercase text-xs font-weight-bolder">Tgl Uji</th>
                                    <th class="text-uppercase text-xs font-weight-bolder">Status</th>
                                </tr>
                            </thead>
                            <tbody class="text-center">
                                @forelse ($latest_outsource ?? [] as $index => $item)
                                    @php
                                        if ($userRole === 'apvpou' || $userRole === 'admins') {
                                            // Role apvpou & admins: link ke apoutp/show/{id} untuk approve langsung
                                            $targetUrl = url('apoutp/show/' . encrypt($item->id));
                                            $linkTitle = 'Klik untuk periksa & approve material ini';
                                        } elseif ($userRole === 'admpou' && in_array($item->status, ['rejected', 'reject'])) {
                                            // Khusus role admpou jika status reject -> langsung ke form edit / revisi
                                            $targetUrl = url('troutp/edit/' . encrypt($item->id));
                                            $linkTitle = 'Klik untuk edit / revisi pengetesan';
                                        } else {
                                            $targetUrl = url('troutp/show/' . encrypt($item->id));
                                            $linkTitle = 'Klik untuk lihat detail pengetesan';
                                        }
                                    @endphp
                                    <tr class="align-middle">
                                        <td><span class="text-sm font-weight-bold">{{ $index + 1 }}</span></td>
                                        <td class="text-start ps-3">
                                            <a href="{{ $targetUrl }}" class="text-primary font-weight-bold text-sm text-decoration-none text-nowrap" title="{{ $linkTitle }}">
                                                <i class="fas fa-external-link-alt text-xs me-1 opacity-7"></i>
                                                {{ $item->material_code ?? '-' }}
                                            </a>
                                        </td>
                                        <td>
                                            <span class="text-sm font-weight-normal text-secondary">{{ $item->batch ?? '-' }}</span>
                                        </td>
                                        <td>
                                            <span class="text-sm font-weight-normal">
                                                {{ $item->test_date ? \Carbon\Carbon::parse($item->test_date)->format('d/m/Y') : '-' }}
                                            </span>
                                        </td>
                                        <td>
                                            @if ($item->status === 'pending')
                                                <span class="btn btn-sm btn-warning mb-0 py-1 px-2 text-white font-weight-bold" style="cursor: default;">PENDING</span>
                                            @elseif ($item->status === 'approved')
                                                <span class="btn btn-sm btn-success mb-0 py-1 px-2 text-white font-weight-bold" style="cursor: default;">APPROVED</span>
                                            @elseif ($item->status === 'rejected' || $item->status === 'reject')
                                                <span class="btn btn-sm btn-danger mb-0 py-1 px-2 text-white font-weight-bold" style="cursor: default;">REJECT</span>
                                            @else
                                                <span class="btn btn-sm btn-secondary mb-0 py-1 px-2 text-white font-weight-bold" style="cursor: default;">{{ ucfirst($item->status) }}</span>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-secondary text-center py-4">
                                            <i class="fas fa-check-circle text-success text-lg d-block mb-1"></i>
                                            <span class="text-sm">
                                                @if ($userRole === 'apvpou' || $userRole === 'admins')
                                                    Tidak ada pengetesan yang membutuhkan approval saat ini.
                                                @elseif ($userRole === 'admpou')
                                                    Tidak ada pengetesan pending atau reject saat ini.
                                                @else
                                                    Tidak ada data pengetesan outsource terbaru.
                                                @endif
                                            </span>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>

    <!-- Modal Sinkronisasi -->
    <div class="modal fade" id="syncModal" tabindex="-1" aria-labelledby="syncModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <form action="{{ route('sync.data') }}" method="POST" id="syncForm">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="syncModalLabel">Set Date Range</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="start_date" class="form-label">Start Date</label>
                            <input type="date" name="start_date" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label for="end_date" class="form-label">End Date</label>
                            <input type="date" name="end_date" class="form-control" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Synchronize</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('js')
    <script src="{{ asset('/') }}assets/js/echarts.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const selectBulan = document.getElementById('filter-bulan');

            // Jika belum ada yang dipilih, set default ke option pertama (selain placeholder)
            if (!selectBulan.value) {
                const firstOption = [...selectBulan.options].find(opt => opt.value !== '');
                if (firstOption) {
                    selectBulan.value = firstOption.value;

                    // Trigger event jika kamu pakai AJAX atau handler untuk update chart
                    const event = new Event('change');
                    selectBulan.dispatchEvent(event);
                }
            }
        });
        const chartDom = document.getElementById('chart-coa');
        const myChart = echarts.init(chartDom);

        function renderChart(data, values, bulanText) {
            const xLabels = data.map(item => item.label); // gunakan tanggal '01', '02', dst
            const tooltipLabels = data.map(item => item.tooltip);

            const hasValidData = values.some(v => v !== null && v !== 0);

            let option = {
                title: {
                    text: 'COA ' +
                        document.querySelector('#filter-bulan option:checked')?.text + ' ' +
                        document.querySelector('#filter-tahun option:checked')?.text,
                    left: 'center',
                    textStyle: {
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: xLabels,
                    axisLabel: {
                        formatter: function(value) {
                            return value;
                        }
                    }
                },
                yAxis: {
                    type: 'value'
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function(params) {
                        const index = params[0].dataIndex;
                        const tooltipDate = tooltipLabels[index];
                        const value = params[0].value;
                        return `${tooltipDate}<br/>COA Dibuat: ${value}`;
                    }
                },
                series: []
            };

            if (hasValidData) {
                option.series.push({
                    name: 'Jumlah COA',
                    type: 'line',
                    smooth: true,
                    data: values,
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#80CBC4'
                            },
                            {
                                offset: 0.33,
                                color: '#4DB6AC'
                            },
                            {
                                offset: 0.66,
                                color: '#26A69A'
                            },
                            {
                                offset: 1,
                                color: '#00796B'
                            }
                        ])
                    },
                    itemStyle: {
                        color: '#00897B'
                    }
                });
            } else {
                option.graphic = {
                    type: 'text',
                    left: 'center',
                    top: 'middle',
                    style: {
                        text: 'Data tidak tersedia',
                        fontSize: 18,
                        fill: '#999'
                    }
                };
            }

            myChart.clear();
            myChart.setOption(option);
        }

        document.addEventListener('DOMContentLoaded', function() {
            const selectBulan = document.getElementById('filter-bulan');
            const selectTahun = document.getElementById('filter-tahun');

            // Auto pilih bulan pertama (selain placeholder)
            if (!selectBulan.value) {
                const firstBulan = [...selectBulan.options].find(opt => opt.value && !opt.disabled);
                if (firstBulan) {
                    selectBulan.value = firstBulan.value;
                    selectBulan.dispatchEvent(new Event('change'));
                }
            }

            // Auto pilih tahun pertama (selain placeholder)
            if (!selectTahun.value) {
                const firstTahun = [...selectTahun.options].find(opt => opt.value && !opt.disabled);
                if (firstTahun) {
                    selectTahun.value = firstTahun.value;
                    selectTahun.dispatchEvent(new Event('change'));
                }
            }
        });

        // Event listener
        $('#filter-bulan, #filter-tahun').change(function() {
            const bulan = $('#filter-bulan').val();
            const tahun = $('#filter-tahun').val();
            console.log(bulan);
            console.log(tahun);
            if (bulan && tahun) {
                $.ajax({
                    url: '{{ route('dashboard.coa.chart') }}',
                    method: 'GET',
                    data: {
                        bulan,
                        tahun
                    },
                    success: function(response) {
                        renderChart(response.labels, response.values, response.bulanText);
                    },
                    error: function() {
                        Swal.fire('Error', 'Gagal mengambil data chart.', 'error');
                    }
                });
            }
        });

        $(document).ready(function() {
            $('#syncForm').on('submit', function(e) {
                e.preventDefault(); // Mencegah submit form langsung

                const startDate = new Date($("[name='start_date']").val());
                const endDate = new Date($("[name='end_date']").val());

                if (startDate > endDate) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Tanggal Tidak Valid',
                        text: 'Tanggal akhir tidak boleh lebih kecil dari tanggal awal.'
                    });
                    return false;
                }

                // Tutup modal setelah validasi
                $('#syncModal').modal('hide');

                // Tampilkan SweetAlert dengan loading bar animasi
                Swal.fire({
                    title: 'Memproses Sync Data...',
                    html: `
                    <div style="width: 100%; height: 20px; background-color: #f3f3f3; border-radius: 10px; position: relative; overflow: hidden;">
                        <div id="light-bar" style="
                            width: 50%;
                            height: 100%;
                            background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), #3498db, rgba(255, 255, 255, 0.2));
                            position: absolute;
                            top: 0;
                            left: 0;
                            border-radius: 10px;
                            animation: lightMove 1s infinite linear;
                        "></div>
                    </div>
                    <p id="progressText" style="margin-top: 10px; font-size: 14px; color: #555;">Mengambil data dari API...</p>

                    <style>
                        @keyframes lightMove {
                            0% { left: -20%; }
                            100% { left: 120%; }
                        }
                    </style>
                `,
                    allowOutsideClick: false,
                    showConfirmButton: false,
                    didOpen: () => {
                        const progressText = document.getElementById("progressText");

                        // Polling setiap detik ke endpoint progress
                        const interval = setInterval(() => {
                            $.get('{{ url('sync/progress') }}', function(res) {
                                if (res && res.total > 0) {
                                    const percent = Math.floor((res.processed /
                                        res.total) * 100);
                                    progressText.innerText =
                                        `Proses sinkronisasi ${percent}%...`;

                                    if (percent >= 100) {
                                        clearInterval(interval);
                                        progressText.innerText =
                                            'Sinkronisasi selesai!';
                                        setTimeout(() => {
                                            Swal.close();
                                            location
                                                .reload(); // Refresh halaman setelah sinkronisasi selesai
                                        }, 1000);
                                    }
                                } else {
                                    progressText.innerText =
                                        'Mengambil data dari API...';
                                }
                            }).fail(() => {
                                clearInterval(interval);
                                progressText.innerText =
                                    'Gagal mengambil status progres.';
                            });
                        }, 1000);
                    }
                });

                // Lanjutkan submit form ke backend
                this.submit();
            });
        });
        window.addEventListener('resize', () => {
            myChart.resize();
        });

        // ====================================================
        // Grafik Pengetesan Product Outsource
        // ====================================================
        const chartOutsourceDom = document.getElementById('chart-outsource');
        if (chartOutsourceDom) {
            const myOutsourceChart = echarts.init(chartOutsourceDom);

            function renderOutsourceChart(data, values, bulanText) {
                const xLabels = data.map(item => item.label);
                const tooltipLabels = data.map(item => item.tooltip);
                const hasValidData = values.some(v => v !== null && v !== 0);

                const bulanTextSelected = document.querySelector('#filter-bulan-outsource option:checked')?.text || '';
                const tahunTextSelected = document.querySelector('#filter-tahun-outsource option:checked')?.text || '';

                let option = {
                    title: {
                        text: 'Pengetesan Outsource ' + bulanTextSelected + ' ' + tahunTextSelected,
                        left: 'center',
                        textStyle: {
                            fontSize: 16,
                            fontWeight: 'bold',
                            color: '#344767'
                        }
                    },
                    grid: {
                        top: '15%',
                        left: '3%',
                        right: '4%',
                        bottom: '5%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: xLabels,
                        axisLine: { lineStyle: { color: '#e9ecef' } },
                        axisLabel: { color: '#67748e' }
                    },
                    yAxis: {
                        type: 'value',
                        splitLine: { lineStyle: { color: '#e9ecef', type: 'dashed' } },
                        axisLabel: { color: '#67748e' }
                    },
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: 'rgba(255, 255, 255, 0.95)',
                        borderColor: '#e9ecef',
                        borderWidth: 1,
                        textStyle: { color: '#344767' },
                        formatter: function(params) {
                            const index = params[0].dataIndex;
                            const tooltipDate = tooltipLabels[index] || params[0].name;
                            const value = params[0].value;
                            return `<strong>${tooltipDate}</strong><br/><span style="color:#5e72e4;">●</span> Uji Outsource: <b>${value}</b>`;
                        }
                    },
                    series: []
                };

                if (hasValidData) {
                    option.series.push({
                        name: 'Uji Outsource',
                        type: 'line',
                        smooth: true,
                        data: values,
                        symbolSize: 6,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(94, 114, 228, 0.45)' },
                                { offset: 1, color: 'rgba(94, 114, 228, 0.02)' }
                            ])
                        },
                        itemStyle: {
                            color: '#5e72e4',
                            borderWidth: 2
                        },
                        lineStyle: {
                            width: 3,
                            color: '#5e72e4'
                        }
                    });
                } else {
                    option.graphic = {
                        type: 'text',
                        left: 'center',
                        top: 'middle',
                        style: {
                            text: 'Data tidak tersedia',
                            fontSize: 16,
                            fill: '#8898aa'
                        }
                    };
                }

                myOutsourceChart.clear();
                myOutsourceChart.setOption(option);
            }

            function loadOutsourceChart() {
                const bulan = $('#filter-bulan-outsource').val();
                const tahun = $('#filter-tahun-outsource').val();
                if (bulan && tahun) {
                    $.ajax({
                        url: '{{ route('dashboard.outsource.chart') }}',
                        method: 'GET',
                        data: { bulan, tahun },
                        success: function(response) {
                            renderOutsourceChart(response.labels, response.values, response.bulanText);
                        },
                        error: function() {
                            console.error('Gagal mengambil data chart outsource');
                        }
                    });
                }
            }

            // Init select default
            const selBlnOut = document.getElementById('filter-bulan-outsource');
            const selThnOut = document.getElementById('filter-tahun-outsource');
            if (selBlnOut && !selBlnOut.value) {
                const firstBln = [...selBlnOut.options].find(opt => opt.value && !opt.disabled);
                if (firstBln) selBlnOut.value = firstBln.value;
            }
            if (selThnOut && !selThnOut.value) {
                const firstThn = [...selThnOut.options].find(opt => opt.value && !opt.disabled);
                if (firstThn) selThnOut.value = firstThn.value;
            }

            $('#filter-bulan-outsource, #filter-tahun-outsource').change(function() {
                loadOutsourceChart();
            });

            // Trigger initial load
            setTimeout(loadOutsourceChart, 200);

            window.addEventListener('resize', () => {
                myOutsourceChart.resize();
            });
        }

        $('.select2').select2({
            width: '100%',
        });
    </script>
@endpush