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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid py-3">
        @include('components.alert')

        {{-- Dashboard Header --}}
        <div class="card mb-3">
            <div class="card-body p-3">
                <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
                    <div>
                        <div class="d-flex flex-wrap align-items-center gap-2 mb-1">
                            <h5 class="mb-0">Dashboard GL Biaya</h5>
                            <span class="badge bg-primary" id="dashboardPeriodLabel">{{ $global_period['label'] ?? '-' }}</span>
                            <span class="badge bg-light text-dark border" id="dashboardGlobalCurrency">Currency: -</span>
                        </div>
                        <div class="text-sm text-muted">
                            General ledger cost overview · Last data:
                            <strong id="dashboardLastData">{{ $last_data ?? 'Loading...' }}</strong>
                            <span class="mx-1">·</span>
                            Last posting selected: <strong id="selectedLastPosting">-</strong>
                        </div>
                    </div>

                    <div class="d-flex flex-wrap gap-2">
                        <button class="btn btn-sm btn-outline-info mb-0" id="btn-view-data" data-bs-toggle="modal" data-bs-target="#viewDataModal">
                            <i class="fas fa-eye me-1"></i> View Data
                        </button>
                        <button class="btn btn-sm btn-outline-primary mb-0" id="btn-get-data" data-bs-toggle="modal" data-bs-target="#getDataModal">
                            <i class="fas fa-sync-alt me-1"></i> Get Data
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Primary KPI --}}
        <div class="row g-3 mb-3">
            <div class="col-xl-3 col-md-6">
                <div class="card h-100">
                    <div class="card-body p-3">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <p class="text-sm text-uppercase fw-bold text-muted mb-1">Total Cost</p>
                                <h5 class="mb-1" id="summaryTotalCost">- 0</h5>
                                <div class="text-xs text-muted" id="summaryPreviousCost">Same period last year: -</div>
                            </div>
                            <div class="icon icon-shape bg-gradient-primary shadow-primary text-center rounded-circle">
                                <i class="ni ni-money-coins text-lg opacity-10"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6">
                <div class="card h-100">
                    <div class="card-body p-3">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <p class="text-sm text-uppercase fw-bold text-muted mb-1">Cost vs Last Year</p>
                                <h5 class="mb-1" id="summaryYoyPercent">-</h5>
                                <div class="text-xs text-muted" id="summaryYoyDifference">Difference: -</div>
                            </div>
                            <div class="icon icon-shape bg-gradient-success shadow-success text-center rounded-circle">
                                <i class="fas fa-chart-line text-white text-sm"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6">
                <div class="card h-100">
                    <div class="card-body p-3">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <p class="text-sm text-uppercase fw-bold text-muted mb-1">Cost Line Items</p>
                                <h5 class="mb-1" id="summaryLineItems">0</h5>
                                <div class="text-xs text-muted">
                                    <span id="summaryTotalGL">0</span> G/L accounts · <span id="summaryYoyCount">-</span>
                                </div>
                            </div>
                            <div class="icon icon-shape bg-gradient-info shadow-info text-center rounded-circle">
                                <i class="ni ni-bullet-list-67 text-lg opacity-10"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6">
                <div class="card h-100">
                    <div class="card-body p-3">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <p class="text-sm text-uppercase fw-bold text-muted mb-1">Average Cost / Line</p>
                                <h5 class="mb-1" id="summaryAverageCost">- 0</h5>
                                <div class="text-xs text-muted">Average value per cost line item</div>
                            </div>
                            <div class="icon icon-shape bg-gradient-warning shadow-warning text-center rounded-circle">
                                <i class="fas fa-calculator text-white text-sm"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Trend and Cost Source Overview --}}
        <div class="row g-3 mb-3">
            <div class="col-xl-8">
                <div class="card h-100">
                    <div class="card-header py-2 px-3">
                        <h6 class="mb-0">6-Month Cost Trend vs Last Year</h6>
                        <div class="text-xs text-muted">Current six-month company cost compared with the same months last year, based on Global Amount (KSL).</div>
                    </div>
                    <div class="card-body p-3">
                        <div id="amountTrendLoading" class="text-center text-muted py-5">
                            <span class="spinner-border spinner-border-sm me-2" role="status"></span>
                            Loading trend...
                        </div>
                        <div id="amountTrendEmpty" class="text-center text-muted py-5 d-none">
                            No trend data
                        </div>
                        <div id="amountTrendChartWrapper" class="d-none">
                            <canvas id="amountTrendChart" height="110"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="card h-100">
                    <div class="card-header py-2 px-3">
                        <h6 class="mb-0">Cost Source Overview</h6>
                        <div class="text-xs text-muted">How current-period company cost is attributed.</div>
                    </div>
                    <div class="card-body p-0">
                        <div class="px-3 py-3 border-bottom">
                            <div class="d-flex justify-content-between align-items-start gap-2">
                                <div>
                                    <div class="text-sm fw-bold">PO-linked Cost</div>
                                    <div class="text-xs text-muted" id="sourcePoMeta">0 lines · 0,0%</div>
                                </div>
                                <div class="text-end fw-bold text-sm" id="sourcePoCost">-</div>
                            </div>
                        </div>
                        <div class="px-3 py-3 border-bottom">
                            <div class="d-flex justify-content-between align-items-start gap-2">
                                <div>
                                    <div class="text-sm fw-bold">Non-PO Cost</div>
                                    <div class="text-xs text-muted" id="sourceNonPoMeta">0 lines · 0,0%</div>
                                </div>
                                <div class="text-end fw-bold text-sm" id="sourceNonPoCost">-</div>
                            </div>
                        </div>
                        <div class="px-3 py-3 border-bottom">
                            <div class="d-flex justify-content-between align-items-start gap-2">
                                <div>
                                    <div class="text-sm fw-bold">Vendor-linked Cost</div>
                                    <div class="text-xs text-muted" id="sourceVendorMeta">0 lines · 0,0%</div>
                                </div>
                                <div class="text-end fw-bold text-sm" id="sourceVendorCost">-</div>
                            </div>
                        </div>
                        <div class="px-3 py-3">
                            <div class="d-flex justify-content-between align-items-start gap-2">
                                <div>
                                    <div class="text-sm fw-bold">Internal Order Cost</div>
                                    <div class="text-xs text-muted" id="sourceOrderMeta">0 lines · 0,0%</div>
                                </div>
                                <div class="text-end fw-bold text-sm" id="sourceOrderCost">-</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- YoY Cost Driver Analysis --}}
        <div class="row g-3 mb-3">
            <div class="col-xl-6">
                <div class="card h-100">
                    <div class="card-header py-2 px-3">
                        <h6 class="mb-0">Top 5 YoY Cost Increase</h6>
                        <div class="text-xs text-muted">G/L accounts contributing the largest cost increase versus the same period last year.</div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-sm table-hover align-middle mb-0">
                            <thead class="bg-light">
                                <tr>
                                    <th class="ps-3">G/L Account</th>
                                    <th>Description</th>
                                    <th class="text-end">Last Year</th>
                                    <th class="text-end">Current</th>
                                    <th class="text-end pe-3">Change</th>
                                </tr>
                            </thead>
                            <tbody id="tbodyYoyIncrease"></tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-xl-6">
                <div class="card h-100">
                    <div class="card-header py-2 px-3">
                        <h6 class="mb-0">Top 5 YoY Cost Decrease</h6>
                        <div class="text-xs text-muted">G/L accounts contributing the largest cost reduction versus the same period last year.</div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-sm table-hover align-middle mb-0">
                            <thead class="bg-light">
                                <tr>
                                    <th class="ps-3">G/L Account</th>
                                    <th>Description</th>
                                    <th class="text-end">Last Year</th>
                                    <th class="text-end">Current</th>
                                    <th class="text-end pe-3">Change</th>
                                </tr>
                            </thead>
                            <tbody id="tbodyYoyDecrease"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        {{-- Top Cost Drivers --}}
        <div class="row g-3 mb-3">
            <div class="col-xl-4">
                <div class="card h-100">
                    <div class="card-header py-2 px-3">
                        <h6 class="mb-0">Top 5 G/L Cost Drivers</h6>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-sm table-hover align-middle mb-0">
                            <thead class="bg-light">
                                <tr>
                                    <th class="ps-3">G/L Account</th>
                                    <th>Description</th>
                                    <th class="text-end pe-3">Cost</th>
                                </tr>
                            </thead>
                            <tbody id="tbodyTopGl"></tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="card h-100">
                    <div class="card-header py-2 px-3">
                        <h6 class="mb-0">Top 5 Cost Centers</h6>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-sm table-hover align-middle mb-0">
                            <thead class="bg-light">
                                <tr>
                                    <th class="ps-3">Cost Center</th>
                                    <th class="text-end">Items</th>
                                    <th class="text-end pe-3">Cost</th>
                                </tr>
                            </thead>
                            <tbody id="tbodyTopCostCenter"></tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="card h-100">
                    <div class="card-header py-2 px-3">
                        <h6 class="mb-0">Top 5 Vendors by Cost</h6>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-sm table-hover align-middle mb-0">
                            <thead class="bg-light">
                                <tr>
                                    <th class="ps-3">Vendor</th>
                                    <th>Name</th>
                                    <th class="text-end pe-3">Cost</th>
                                </tr>
                            </thead>
                            <tbody id="tbodyTopVendor"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        {{-- Full GL Account Summary --}}
        <div class="card mb-3">
            <div class="card-header py-2 px-3 d-flex flex-wrap justify-content-between align-items-center gap-2">
                <div>
                    <h6 class="mb-0">G/L Account Summary</h6>
                    <div class="text-xs text-muted">Click a row to open line-item detail</div>
                </div>
                <span class="badge bg-primary" id="totalBiayaBadge">Total Cost: - 0</span>
            </div>
            <div class="table-responsive overflow-auto" id="tableDetailBiaya-wrapper" style="max-height: 480px;">
                <table class="table table-sm table-hover align-middle mb-0" id="tableDetailBiaya">
                    <thead class="bg-light sticky-top">
                        <tr>
                            <th class="ps-3">No</th>
                            <th>G/L Account</th>
                            <th>Description</th>
                            <th class="text-end">Line Items</th>
                            <th class="text-end pe-3">Cost</th>
                        </tr>
                    </thead>
                    <tbody id="tbodyDetailBiaya"></tbody>
                    <tfoot class="bg-light fw-bold sticky-bottom">
                        <tr>
                            <td class="ps-3" colspan="3">Grand Total</td>
                            <td class="text-end" id="footTotalTransaksi">0</td>
                            <td class="text-end pe-3" id="footAmount">0</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal Filter Periode -->
    <div class="modal fade" id="viewDataModal" tabindex="-1" aria-labelledby="viewDataModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content" style="max-height: 90vh;">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewDataModalLabel">View Data in Database</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="form-view-data" style="display:flex;flex-direction:column;overflow:hidden;flex:1;">
                    <div class="modal-body" style="overflow-y: auto; flex: 1;">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="view_date_from" class="form-label">Date From</label>
                                <input type="date" class="form-control" id="view_date_from" name="view_date_from" required>
                            </div>
                            <div class="col-md-6">
                                <label for="view_date_to" class="form-label">Date To</label>
                                <input type="date" class="form-control" id="view_date_to" name="view_date_to" required>
                            </div>
                        </div>
                        <div class="d-flex justify-content-end mb-3">
                            <button type="submit" class="btn btn-primary" id="btn-submit-view-data">
                                <i class="fas fa-search me-1"></i>Check Data
                            </button>
                        </div>
                        <hr>
                        <div id="view-data-result" class="mt-3">
                            <div class="text-center text-muted py-4">
                                <i class="fas fa-info-circle fa-3x mb-3"></i>
                                <p>Pilih periode dan klik "Check Data" untuk melihat data yang sudah ada di database</p>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal Get Data -->
    @php
        $syncDefaultYear = (int) ($global_period['year'] ?? now()->year);
        $syncDefaultMonth = (int) ($global_period['month'] ?? now()->month);
    @endphp

    <div class="modal fade" id="getDataModal" tabindex="-1" aria-labelledby="getDataModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title mb-0" id="getDataModalLabel">
                            <i class="fas fa-cloud-download-alt me-2"></i>Get Data
                        </h5>
                        <div class="text-xs text-muted mt-1">Perbarui data per bulan atau satu tahun penuh.</div>
                    </div>
                    <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="sap_sync_mode" class="form-label">Periode</label>
                        <select id="sap_sync_mode" class="form-select">
                            <option value="month" selected>Per Bulan</option>
                            <option value="year">Per Tahun</option>
                        </select>
                    </div>

                    <div class="row g-2">
                        <div class="col-md-6" id="sap_year_field">
                            <label for="sap_year" class="form-label">Tahun</label>
                            <select name="sap_year" id="sap_year" class="form-select" required>
                                @for ($y = now()->year; $y >= 2020; $y--)
                                    <option value="{{ $y }}" @selected($y === $syncDefaultYear)>{{ $y }}</option>
                                @endfor
                            </select>
                        </div>

                        <div class="col-md-6" id="sap_month_field">
                            <label for="sap_month" class="form-label">Bulan</label>
                            <select name="sap_month" id="sap_month" class="form-select">
                                @for ($p = 1; $p <= 12; $p++)
                                    @php
                                        $monthLabel = \Carbon\Carbon::create(2000, $p, 1)->locale('id')->translatedFormat('F');
                                    @endphp
                                    <option value="{{ $p }}"
                                            data-label="{{ $monthLabel }}"
                                            @selected($p === $syncDefaultMonth)>
                                        {{ $monthLabel }}
                                    </option>
                                @endfor
                            </select>
                        </div>
                    </div>

                    <div class="alert alert-light border mt-3 mb-0 py-2">
                        <div class="d-flex align-items-center justify-content-between gap-2">
                            <span class="text-sm text-muted">Periode yang akan diproses</span>
                            <strong class="text-sm" id="sap_sync_period_preview">-</strong>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-primary" id="btn-submit-get-data" onclick="submitGetData()">
                        <i class="fas fa-download me-1"></i>Get Data
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
<script src="{{ asset('/') }}assets/js/plugins/chartjs.min.js"></script>
<script>
    // =============================================
    // Global Variables
    // =============================================

    $(document).ready(function() {
        // =============================================
        // Utility
        // =============================================
        function formatCodeWithoutLeadingZero(value) {
            if (value === null || value === undefined) return '';

            const text = String(value).trim();
            if (!text) return '';

            // Hanya numeric identifier. Nilai alphanumeric tidak diubah.
            if (!/^\d+$/.test(text)) return text;

            return text.replace(/^0+(?=\d)/, '');
        }

        function formatNumber(num) {
            return new Intl.NumberFormat('id-ID').format(num);
        }

        function formatRupiah(num) {
            return 'Rp ' + new Intl.NumberFormat('id-ID').format(Math.round(num));
        }

        function formatDecimal(num, decimals) {
            return new Intl.NumberFormat('id-ID', { minimumFractionDigits: decimals, maximumFractionDigits: decimals }).format(num);
        }

        function formatCurrencyAmount(num, currency) {
            const code = (currency || '-').toUpperCase();
            const decimals = code === 'IDR' ? 0 : 2;
            return code + ' ' + formatDecimal(Number(num || 0), decimals);
        }

        function escapeHtml(value) {
            return $('<div>').text(value === null || value === undefined ? '' : String(value)).html();
        }

        function formatChangePercent(value) {
            if (value === null || value === undefined || Number.isNaN(Number(value))) {
                return 'No same-period last-year base';
            }

            const numeric = Number(value);
            const sign = numeric > 0 ? '+' : '';
            return sign + formatDecimal(numeric, 1) + '% vs same period last year';
        }

        // =============================================
        // Get Data Modal: Per Bulan / Per Tahun
        // =============================================
        function updateSyncPeriodPreview() {
            const mode = $('#sap_sync_mode').val() || 'month';
            const year = $('#sap_year').val() || '';
            const monthLabel = $('#sap_month option:selected').data('label') || '';
            const isYear = mode === 'year';

            $('#sap_month_field').toggleClass('d-none', isYear);
            $('#sap_year_field').toggleClass('col-md-6', !isYear).toggleClass('col-12', isYear);

            if (!year) {
                $('#sap_sync_period_preview').text('-');
                return;
            }

            $('#sap_sync_period_preview').text(
                isYear ? `Tahun ${year}` : (monthLabel ? `${monthLabel} ${year}` : '-')
            );
        }

        $('#sap_sync_mode, #sap_year, #sap_month').on('change', updateSyncPeriodPreview);

        $('#getDataModal').on('show.bs.modal', function() {
            updateSyncPeriodPreview();
        });

        // =============================================
        // Dashboard Data Loading
        // =============================================
        function setDashboardLoading() {
            $('#tbodyDetailBiaya').html('<tr><td colspan="5" class="text-center py-4"><span class="spinner-border spinner-border-sm me-2"></span>Loading G/L summary...</td></tr>');
            setTrendLoading();
            $('#tbodyTopGl').html('<tr><td colspan="3" class="text-center py-4 text-muted">Loading...</td></tr>');
            $('#tbodyTopCostCenter').html('<tr><td colspan="3" class="text-center py-4 text-muted">Loading...</td></tr>');
            $('#tbodyTopVendor').html('<tr><td colspan="3" class="text-center py-4 text-muted">Loading...</td></tr>');
        }

        function loadDashboardMeta() {
            $.ajax({
                url: '{{ URL::to($url_menu . "/dashboardmeta") }}',
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    if (!response || !response.success) return;

                    $('#dashboardLastData').text(response.last_data || '-');

                    if (response.global_period && response.global_period.label) {
                        $('#dashboardPeriodLabel').text(response.global_period.label);
                    }
                },
                error: function(xhr) {
                    console.error('Failed to load dashboard metadata', xhr.responseText);
                    $('#dashboardLastData').text('-');
                }
            });
        }

        function loadDashboardData() {
            setDashboardLoading();

            $.ajax({
                url: '{{ URL::to($url_menu . "/chartdata") }}',
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    if (!response.success) {
                        renderDashboardEmpty();
                        return;
                    }

                    renderBiayaTable(response.gl_summary || [], response.global_currency || '');
                    renderTrend(
                        response.trend || [],
                        response.global_currency || '',
                        response.trend_current_year || '',
                        response.trend_last_year || ''
                    );
                    renderTopGl(response.top_gl || [], response.global_currency || '');
                    renderTopCostCenters(response.top_cost_centers || [], response.global_currency || '');
                    renderTopVendors(response.top_vendors || [], response.global_currency || '');
                    renderYoyCostDrivers(
                        response.top_yoy_increase || [],
                        response.top_yoy_decrease || [],
                        response.global_currency || ''
                    );
                    updateCostSources(response.cost_sources || {}, response.global_currency || '');
                    updateSummaryCards(response);
                    updateFooterTotals(
                        response.total_transaksi || 0,
                        response.grand_total || 0,
                        response.global_currency || ''
                    );
                },
                error: function() {
                    renderDashboardEmpty();
                }
            });
        }

        function updateSummaryCards(response) {
            const globalCurrency = response.global_currency || '';
            const yoy = response.yoy || {};
            const lastYearLabel = response.last_year_period_label || 'same period last year';

            $('#dashboardPeriodLabel').text(response.period_label || '-');
            $('#dashboardGlobalCurrency').text('Currency: ' + (globalCurrency || '-'));
            $('#selectedLastPosting').text(response.last_posting_date || '-');

            $('#summaryTotalCost').text(formatCurrencyAmount(response.grand_total || 0, globalCurrency));
            $('#summaryPreviousCost').text(
                lastYearLabel + ': ' + formatCurrencyAmount(yoy.last_year_amount || 0, globalCurrency)
            );

            $('#summaryYoyPercent').text(formatChangePercent(yoy.amount_pct));
            $('#summaryYoyDifference').text(
                'Difference: ' + formatCurrencyAmount(yoy.amount_change || 0, globalCurrency)
            );

            $('#summaryLineItems').text(formatNumber(response.total_transaksi || 0));
            $('#summaryTotalGL').text(formatNumber(response.total_gl || 0));
            $('#summaryYoyCount').text(formatChangePercent(yoy.count_pct));
            $('#summaryAverageCost').text(formatCurrencyAmount(response.average_cost || 0, globalCurrency));

            $('#totalBiayaBadge').text('Total Cost: ' + formatCurrencyAmount(response.grand_total || 0, globalCurrency));
        }

        function updateFooterTotals(totalTransaksi, amount, globalCurrency) {
            $('#footTotalTransaksi').text(formatNumber(totalTransaksi));
            $('#footAmount').text(formatCurrencyAmount(amount || 0, globalCurrency));
        }

        function updateCostSources(costSources, globalCurrency) {
            const poLinked = costSources.po_linked || {};
            const nonPo = costSources.non_po || {};
            const vendorLinked = costSources.vendor_linked || {};
            const internalOrder = costSources.internal_order || {};

            const sourceMeta = function(item) {
                return formatNumber(item.lines || 0) + ' lines · ' + formatDecimal(Number(item.share || 0), 1) + '% of total cost';
            };

            $('#sourcePoMeta').text(sourceMeta(poLinked));
            $('#sourcePoCost').text(formatCurrencyAmount(poLinked.cost || 0, globalCurrency));

            $('#sourceNonPoMeta').text(sourceMeta(nonPo));
            $('#sourceNonPoCost').text(formatCurrencyAmount(nonPo.cost || 0, globalCurrency));

            $('#sourceVendorMeta').text(sourceMeta(vendorLinked));
            $('#sourceVendorCost').text(formatCurrencyAmount(vendorLinked.cost || 0, globalCurrency));

            $('#sourceOrderMeta').text(sourceMeta(internalOrder));
            $('#sourceOrderCost').text(formatCurrencyAmount(internalOrder.cost || 0, globalCurrency));
        }

        let amountTrendChart = null;

        function setTrendLoading() {
            if (amountTrendChart) {
                amountTrendChart.destroy();
                amountTrendChart = null;
            }

            $('#amountTrendLoading').removeClass('d-none');
            $('#amountTrendEmpty').addClass('d-none');
            $('#amountTrendChartWrapper').addClass('d-none');
        }

        function setTrendEmpty() {
            if (amountTrendChart) {
                amountTrendChart.destroy();
                amountTrendChart = null;
            }

            $('#amountTrendLoading').addClass('d-none');
            $('#amountTrendEmpty').removeClass('d-none');
            $('#amountTrendChartWrapper').addClass('d-none');
        }

        function renderTrend(items, globalCurrency, currentYear, lastYear) {
            if (!Array.isArray(items) || !items.length) {
                setTrendEmpty();
                return;
            }

            const canvas = document.getElementById('amountTrendChart');
            if (!canvas || typeof Chart === 'undefined') {
                setTrendEmpty();
                return;
            }

            if (amountTrendChart) {
                amountTrendChart.destroy();
                amountTrendChart = null;
            }

            const labels = items.map(function(item) {
                return item.label || item.period || '-';
            });

            const currentValues = items.map(function(item) {
                return Number(item.current_cost ?? item.cost_amount ?? item.net_amount ?? 0);
            });

            const lastYearValues = items.map(function(item) {
                return Number(item.last_year_cost ?? 0);
            });

            const resolvedCurrentYear = currentYear || (items[0] ? items[0].current_year : '') || 'Current Year';
            const resolvedLastYear = lastYear || (items[0] ? items[0].last_year : '') || 'Last Year';

            $('#amountTrendLoading').addClass('d-none');
            $('#amountTrendEmpty').addClass('d-none');
            $('#amountTrendChartWrapper').removeClass('d-none');

            amountTrendChart = new Chart(canvas.getContext('2d'), {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: 'Cost ' + resolvedCurrentYear,
                            data: currentValues,
                            borderColor: '#008b8b',
                            backgroundColor: '#008b8b',
                            borderWidth: 2.5,
                            pointRadius: 3,
                            pointHoverRadius: 5,
                            tension: 0.35,
                            fill: false
                        },
                        {
                            label: 'Cost ' + resolvedLastYear,
                            data: lastYearValues,
                            borderColor: '#94a3b8',
                            backgroundColor: '#94a3b8',
                            borderWidth: 2,
                            borderDash: [6, 4],
                            pointRadius: 3,
                            pointHoverRadius: 5,
                            tension: 0.35,
                            fill: false
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    interaction: {
                        mode: 'index',
                        intersect: false
                    },
                    plugins: {
                        legend: {
                            display: true,
                            position: 'top',
                            align: 'end',
                            labels: {
                                usePointStyle: true,
                                boxWidth: 8
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return context.dataset.label + ': ' +
                                        formatCurrencyAmount(context.parsed.y, globalCurrency);
                                },
                                afterBody: function(contexts) {
                                    if (!contexts || contexts.length < 2) {
                                        return '';
                                    }

                                    const current = Number(contexts[0].parsed.y || 0);
                                    const previous = Number(contexts[1].parsed.y || 0);

                                    if (previous === 0) {
                                        return 'YoY: -';
                                    }

                                    const yoy = ((current - previous) / Math.abs(previous)) * 100;
                                    return 'YoY: ' + (yoy >= 0 ? '+' : '') + formatDecimal(yoy, 1) + '%';
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: function(value) {
                                    return new Intl.NumberFormat('id-ID', {
                                        notation: 'compact',
                                        maximumFractionDigits: 1
                                    }).format(value);
                                }
                            }
                        }
                    }
                }
            });
        }

        function renderYoyCostDrivers(increaseItems, decreaseItems, globalCurrency) {
            const renderRows = function(items, emptyText) {
                if (!Array.isArray(items) || !items.length) {
                    return '<tr><td colspan="5" class="text-center text-muted py-4">' + escapeHtml(emptyText) + '</td></tr>';
                }

                let rows = '';
                items.forEach(function(item) {
                    const detailUrl = '{{ URL::to($url_menu) }}/detail?gl_account=' + encodeURIComponent(item.gl_account || '');
                    const variance = Number(item.variance || 0);
                    const yoyPct = item.yoy_pct;
                    const varianceLabel = (variance > 0 ? '+' : '') + formatCurrencyAmount(variance, globalCurrency);
                    let pctLabel = '';

                    if (item.is_new_cost) {
                        pctLabel = 'New cost';
                    } else if (yoyPct !== null && yoyPct !== undefined && !Number.isNaN(Number(yoyPct))) {
                        const numericPct = Number(yoyPct);
                        pctLabel = (numericPct > 0 ? '+' : '') + formatDecimal(numericPct, 1) + '% YoY';
                    } else {
                        pctLabel = 'No last-year base';
                    }

                    rows += `
                        <tr role="button" onclick="window.location.href='${detailUrl}'">
                            <td class="ps-3 fw-bold text-primary">${escapeHtml(formatCodeWithoutLeadingZero(item.gl_account))}</td>
                            <td>${escapeHtml(item.gl_long_text || '-')}</td>
                            <td class="text-end text-nowrap">${formatCurrencyAmount(item.last_year_cost || 0, globalCurrency)}</td>
                            <td class="text-end text-nowrap">${formatCurrencyAmount(item.current_cost || 0, globalCurrency)}</td>
                            <td class="text-end pe-3 text-nowrap fw-bold">
                                ${varianceLabel}
                                <div class="text-xs text-muted fw-normal">${escapeHtml(pctLabel)}</div>
                            </td>
                        </tr>
                    `;
                });

                return rows;
            };

            $('#tbodyYoyIncrease').html(renderRows(increaseItems, 'No YoY cost increase'));
            $('#tbodyYoyDecrease').html(renderRows(decreaseItems, 'No YoY cost decrease'));
        }

        function renderTopGl(items, globalCurrency) {
            if (!items.length) {
                $('#tbodyTopGl').html('<tr><td colspan="3" class="text-center text-muted py-4">No G/L data</td></tr>');
                return;
            }

            let rows = '';
            items.forEach(item => {
                const detailUrl = '{{ URL::to($url_menu) }}/detail?gl_account=' + encodeURIComponent(item.gl_account || '');
                rows += `
                    <tr role="button" onclick="window.location.href='${detailUrl}'">
                        <td class="ps-3 fw-bold text-primary">${escapeHtml(formatCodeWithoutLeadingZero(item.gl_account))}</td>
                        <td>${escapeHtml(item.gl_long_text || '-')}</td>
                        <td class="text-end pe-3 fw-bold">${formatCurrencyAmount(item.cost_amount || 0, globalCurrency)}</td>
                    </tr>
                `;
            });
            $('#tbodyTopGl').html(rows);
        }

        function renderTopCostCenters(items, globalCurrency) {
            if (!items.length) {
                $('#tbodyTopCostCenter').html('<tr><td colspan="3" class="text-center text-muted py-4">No cost center data</td></tr>');
                return;
            }

            let rows = '';
            items.forEach(item => {
                rows += `
                    <tr>
                        <td class="ps-3 fw-bold font-monospace">${escapeHtml(formatCodeWithoutLeadingZero(item.cost_center))}</td>
                        <td class="text-end">${formatNumber(item.line_items || 0)}</td>
                        <td class="text-end pe-3 fw-bold">${formatCurrencyAmount(item.cost_amount || 0, globalCurrency)}</td>
                    </tr>
                `;
            });
            $('#tbodyTopCostCenter').html(rows);
        }

        function renderTopVendors(items, globalCurrency) {
            if (!items.length) {
                $('#tbodyTopVendor').html('<tr><td colspan="3" class="text-center text-muted py-4">No vendor reference in this period</td></tr>');
                return;
            }

            let rows = '';
            items.forEach(item => {
                const detailUrl = '{{ URL::to($url_menu) }}/detail?vendor=' + encodeURIComponent(item.vendor || '');
                rows += `
                    <tr role="button" onclick="window.location.href='${detailUrl}'">
                        <td class="ps-3 fw-bold text-primary">${escapeHtml(formatCodeWithoutLeadingZero(item.vendor))}</td>
                        <td>${escapeHtml(item.vendor_name || '-')}</td>
                        <td class="text-end pe-3 fw-bold">${formatCurrencyAmount(item.cost_amount || 0, globalCurrency)}</td>
                    </tr>
                `;
            });
            $('#tbodyTopVendor').html(rows);
        }

        function renderDashboardEmpty() {
            $('#tbodyDetailBiaya').html('<tr><td colspan="5" class="text-center text-muted py-4"><i class="fas fa-inbox me-2"></i>No data for this period</td></tr>');
            setTrendEmpty();
            $('#tbodyTopGl').html('<tr><td colspan="3" class="text-center text-muted py-4">No data</td></tr>');
            $('#tbodyTopCostCenter').html('<tr><td colspan="3" class="text-center text-muted py-4">No data</td></tr>');
            $('#tbodyTopVendor').html('<tr><td colspan="3" class="text-center text-muted py-4">No data</td></tr>');
            $('#tbodyYoyIncrease').html('<tr><td colspan="5" class="text-center text-muted py-4">No data</td></tr>');
            $('#tbodyYoyDecrease').html('<tr><td colspan="5" class="text-center text-muted py-4">No data</td></tr>');
            updateCostSources({}, '');
            updateSummaryCards({
                total_gl: 0,
                total_transaksi: 0,
                grand_total: 0,
                average_cost: 0,
                global_currency: '',
                yoy: {},
                last_posting_date: null
            });
            updateFooterTotals(0, 0, '');
        }

        function renderBiayaTable(glSummary, globalCurrency) {
            if (!glSummary || glSummary.length === 0) {
                $('#tbodyDetailBiaya').html('<tr><td colspan="5" class="text-center text-muted py-4"><i class="fas fa-inbox me-2"></i>No G/L data for this period</td></tr>');
                return;
            }

            let rows = '';
            glSummary.forEach((item, idx) => {
                const detailUrl = '{{ URL::to($url_menu) }}/detail?gl_account=' + encodeURIComponent(item.gl_account || '');
                rows += `
                    <tr role="button" onclick="window.location.href='${detailUrl}'">
                        <td class="ps-3">${idx + 1}</td>
                        <td class="fw-bold text-primary">${escapeHtml(formatCodeWithoutLeadingZero(item.gl_account))}</td>
                        <td>${escapeHtml(item.gl_long_text || '-')}</td>
                        <td class="text-end">${formatNumber(item.line_items || 0)}</td>
                        <td class="text-end pe-3 fw-bold">${formatCurrencyAmount(item.cost_amount || 0, globalCurrency)}</td>
                    </tr>
                `;
            });
            $('#tbodyDetailBiaya').html(rows);
        }

        // =============================================
        // Global Period Init
        // =============================================
        $('#dashboardPeriodLabel').text(@json($global_period['label'] ?? '-'));
        loadDashboardMeta();
        loadDashboardData();

        function checkActiveGlBiayaSync() {
            $.ajax({
                url: '{{ URL::to($url_menu . "/getdatastatus") }}',
                type: 'GET',
                dataType: 'json',
                cache: false,
                success: function(response) {
                    if (!response || !response.active || !response.sync_id) {
                        return;
                    }

                    const syncId = Number(response.sync_id);
                    if (!syncId || window.__glBiayaTrackedSyncId === syncId) {
                        return;
                    }

                    if (!window.GlBiayaSync || typeof window.GlBiayaSync.start !== 'function') {
                        return;
                    }

                    window.__glBiayaTrackedSyncId = syncId;

                    const requestedBy = String(response.requested_by || '').trim();
                    const label = requestedBy && requestedBy !== '-'
                        ? `Background Sync · ${requestedBy}`
                        : 'Background Sync';

                    window.GlBiayaSync.start(syncId, label);
                },
                error: function(xhr) {
                    if (xhr.status !== 404) {
                        console.debug('Active GL Cost sync check failed', xhr.responseText);
                    }
                }
            });
        }

        setTimeout(checkActiveGlBiayaSync, 800);
        window.setInterval(checkActiveGlBiayaSync, 10000);

        // =============================================
        // View Data Modal
        // =============================================
        $('#form-view-data').on('submit', function(e) {
            e.preventDefault();
            
            const dateFrom = $('#view_date_from').val();
            const dateTo = $('#view_date_to').val();
            
            if (!dateFrom || !dateTo) { alert('Please select date range'); return; }
            
            $('#btn-submit-view-data').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i>Loading...');
            
            $.ajax({
                url: '{{ URL::to($url_menu . '/viewdata') }}',
                type: 'POST',
                data: { _token: '{{ csrf_token() }}', date_from: dateFrom, date_to: dateTo },
                success: function(response) {
                    $('#btn-submit-view-data').prop('disabled', false).html('<i class="fas fa-search me-1"></i>Check Data');
                    
                    if (response.success) {
                        let html = '';
                        if (response.data.length > 0) {
                            html += '<div class="alert alert-success" role="alert">';
                            html += '<h6 class="alert-heading"><i class="fas fa-check-circle me-2"></i>Data Ditemukan!</h6>';
                            html += '<p class="mb-2">Periode: <strong>' + dateFrom + '</strong> s/d <strong>' + dateTo + '</strong></p>';
                            html += '<hr><p class="mb-0">Total: <strong>' + response.data.length + ' transaksi</strong></p>';
                            html += '</div>';
                            html += '<div class="table-responsive" style="max-height:400px; overflow-y:auto;">';
                            html += '<table class="table table-sm table-hover table-bordered">';
                            html += '<thead class="table-light sticky-top"><tr>';
                            html += '<th>Doc Date</th><th>Doc No GL</th><th>Type</th><th>Text</th><th>Currency</th><th class="text-end">Amount</th>';
                            html += '</tr></thead><tbody>';
                            response.data.forEach(function(item) {
                                html += '<tr>';
                                html += '<td>' + item.doc_date + '</td>';
                                html += '<td>' + item.doc_no_gl + '</td>';
                                html += '<td><span class="badge bg-secondary">' + item.type + '</span></td>';
                                html += '<td>' + (item.text || '-') + '</td>';
                                html += '<td>' + item.currency + '</td>';
                                html += '<td class="text-end">' + new Intl.NumberFormat('id-ID', { minimumFractionDigits: 2 }).format(item.amount_dc) + '</td>';
                                html += '</tr>';
                            });
                            html += '</tbody></table></div>';
                        } else {
                            html += '<div class="alert alert-warning" role="alert">';
                            html += '<h6 class="alert-heading"><i class="fas fa-exclamation-triangle me-2"></i>Data Tidak Ditemukan</h6>';
                            html += '<p class="mb-0">Tidak ada data di database untuk periode ini.</p>';
                            html += '</div>';
                        }
                        $('#view-data-result').html(html);
                    }
                },
                error: function(xhr) {
                    $('#btn-submit-view-data').prop('disabled', false).html('<i class="fas fa-search me-1"></i>Check Data');
                    $('#view-data-result').html('<div class="alert alert-danger"><i class="fas fa-times-circle me-2"></i>Error: ' + (xhr.responseJSON?.message || 'Terjadi kesalahan') + '</div>');
                }
            });
        });

        $('#viewDataModal').on('hidden.bs.modal', function () {
            $('#view-data-result').html('<div class="text-center text-muted py-4"><i class="fas fa-info-circle fa-3x mb-3"></i><p>Pilih periode dan klik "Check Data"</p></div>');
        });

        var today = new Date();
        var firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
        $('#view_date_from').val(firstDay.toISOString().split('T')[0]);
        $('#view_date_to').val(today.toISOString().split('T')[0]);
    });

    // =============================================
    // Submit Get Data – AJAX with Full-Screen Overlay
    // =============================================
    function showSyncOverlay() {
        const overlayHtml = `
            <div id="syncOverlay" class="position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center" 
                 style="z-index: 99999; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(5px);">
                <div class="text-center text-white p-5" style="max-width: 600px;">
                    <div class="spinner-border text-primary mb-4" role="status" style="width: 4rem; height: 4rem; border-width: 0.4rem;">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <h3 class="mb-3"><i class="fas fa-sync-alt fa-spin me-2"></i>Sinkronisasi Data GL Biaya</h3>
                    <div class="alert alert-primary d-inline-block" style="background: rgba(102, 126, 234, 0.2); border: 2px solid #667eea;">
                        <strong id="syncOverlayStatus">Mengambil Data</strong>
                    </div>
                    <p class="mt-3 text-white-50"><i class="fas fa-info-circle me-1"></i>Mohon tunggu, proses sinkronisasi sedang berjalan...</p>
                    <div class="mt-4">
                        <div style="width: 100%; height: 20px; background-color: rgba(255,255,255,0.2); border-radius: 10px; position: relative; overflow: hidden;">
                            <div id="syncOverlayBar" style="width: 50%; height: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), #667eea, rgba(255, 255, 255, 0.2)); position: absolute; top: 0; left: 0; border-radius: 10px; animation: lightMove 1s infinite linear;"></div>
                        </div>
                    </div>
                    <style>@keyframes lightMove { 0% { left: -50%; } 100% { left: 100%; } }</style>
                </div>
            </div>`;

        const existing = document.getElementById('syncOverlay');
        if (existing) existing.remove();
        document.body.insertAdjacentHTML('beforeend', overlayHtml);
        document.body.style.overflow = 'hidden';
    }

    function closeSyncOverlay() {
        const overlay = document.getElementById('syncOverlay');
        if (overlay) {
            overlay.style.transition = 'opacity 0.3s ease';
            overlay.style.opacity = '0';
            setTimeout(() => { overlay.remove(); document.body.style.overflow = ''; }, 300);
        }
    }

    function submitGetData() {
        const syncMode = $('#sap_sync_mode').val() || 'month';
        const year = $('#sap_year').val();
        const month = parseInt($('#sap_month').val(), 10);
        const monthLabel = $('#sap_month option:selected').data('label') || '';

        if (!year) {
            Swal.fire({
                icon: 'warning',
                title: 'Peringatan',
                text: 'Tahun wajib dipilih.'
            });
            return;
        }

        let payload = {
            _token: '{{ csrf_token() }}',
            mode: 'year',
            v_year: String(year),
            v_poper: '',
            v_fdate: '',
            v_tdate: '',
        };

        let modeLabel = `Tahun ${year}`;

        if (syncMode === 'month') {
            if (!month || month < 1 || month > 12) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Peringatan',
                    text: 'Bulan wajib dipilih.'
                });
                return;
            }

            const monthText = String(month).padStart(2, '0');
            const lastDay = new Date(Number(year), month, 0).getDate();
            const lastDayText = String(lastDay).padStart(2, '0');

            payload = {
                _token: '{{ csrf_token() }}',
                mode: 'range',
                v_year: String(year),
                v_poper: monthText,
                v_fdate: `${year}${monthText}01`,
                v_tdate: `${year}${monthText}${lastDayText}`,
            };

            modeLabel = `${monthLabel} ${year}`;
        }

        const btn = document.getElementById('btn-submit-get-data');
        if (btn) btn.disabled = true;

        const modalEl = document.getElementById('getDataModal');
        if (modalEl) {
            const modal = bootstrap.Modal.getInstance(modalEl) || new bootstrap.Modal(modalEl);
            modal.hide();
        }

        setTimeout(function() {
            document.querySelectorAll('.modal-backdrop').forEach(el => el.remove());
            document.body.classList.remove('modal-open');
            document.body.style.removeProperty('padding-right');
            showSyncOverlay();
        }, 300);

        $.ajax({
            url: '{{ URL::to($url_menu . "/getdata") }}',
            type: 'POST',
            data: payload,
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            timeout: 30000,
            success: function(response) {
                closeSyncOverlay();

                if (!response.sync_id) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: response.message || 'Server tidak mengembalikan ID sinkronisasi.'
                    });
                    return;
                }

                if (window.GlBiayaSync) {
                    window.__glBiayaTrackedSyncId = Number(response.sync_id);
                    window.GlBiayaSync.start(response.sync_id, modeLabel);
                }
            },
            error: function(xhr, status) {
                closeSyncOverlay();
                let errorMsg = xhr.responseJSON?.message || 'Gagal membuat background job.';
                if (status === 'timeout') {
                    errorMsg = 'Server terlalu lama merespons saat membuat queue job.';
                }

                Swal.fire({
                    icon: 'error',
                    title: 'Error!',
                    html: `<div class="text-start"><p><strong>Mode:</strong> ${modeLabel}</p><p>${errorMsg}</p></div>`,
                    confirmButtonText: 'OK'
                });
            },
            complete: function() {
                if (btn) btn.disabled = false;
            }
        });
    }
</script>
@endpush