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

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

<style>
    /* Transisi Hover Card yang Lebih Halus Menggunakan CSS Murni */
    .card-hover {
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }
    .card-hover:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
    }
    /* Mengatur scrollbar halus untuk tabel responsif */
    .table-responsive {
        scrollbar-width: thin;
    }
    /* Tabel salesperson dengan lebar kolom tetap */
    .table-salesperson {
        table-layout: fixed;
        width: 100%;
    }
    .table-salesperson th.col-customer,
    .table-salesperson td.col-customer {
        width: 40%;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    .table-salesperson th.col-actual,
    .table-salesperson td.col-actual {
        width: 18%;
    }
    .table-salesperson th.col-target,
    .table-salesperson td.col-target {
        width: 18%;
    }
    .table-salesperson th.col-ratio,
    .table-salesperson td.col-ratio {
        width: 16%;
    }
    .table-scroll {
        max-height: 360px;
        overflow-y: auto;
    }
    .row-yellow {
        background-color: #fff9c4 !important;
    }
    .row-pink {
        background-color: #f8d7da !important;
    }
</style>

<div class="container-fluid py-4">
    <!-- Header Welcome Card -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center">
                        <div>
                            <h5 class="mb-1 font-weight-bold text-dark">Dashboard MSJso</h5>
                            <p class="text-sm text-muted mb-0">Ringkasan status permohonan dan performa penjualan secara real-time.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Status Cards Row -->
    <div class="row g-4 mb-4">
        {{-- Card Pending Approval --}}
        <div class="col-sm-6 col-xl-3">
            <a href="{{ url('/trsapv') }}" class="text-decoration-none">
                <div class="card card-hover border-0 shadow-sm h-100">
                    <div class="card-body p-3">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <p class="text-xs mb-1 text-uppercase font-weight-bold text-muted">Pending Approval</p>
                                <h4 class="font-weight-bolder text-dark mb-1">
                                    {{ $count_pending ?? 0 }}
                                </h4>
                                <span class="text-warning text-xs font-weight-bold">
                                    <i class="fas fa-clock me-1"></i> Menunggu
                                </span>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-warning shadow-warning text-center rounded-circle ms-auto d-flex align-items-center justify-content-center">
                                    <i class="fas fa-hourglass-half text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        {{-- Card Approved --}}
        <div class="col-sm-6 col-xl-3">
            <a href="{{ url('/trsapd') }}" class="text-decoration-none">
                <div class="card card-hover border-0 shadow-sm h-100">
                    <div class="card-body p-3">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <p class="text-xs mb-1 text-uppercase font-weight-bold text-muted">Approved</p>
                                <h4 class="font-weight-bolder text-dark mb-1">
                                    {{ $count_approved ?? 0 }}
                                </h4>
                                <span class="text-success text-xs font-weight-bold">
                                    <i class="fas fa-check-circle me-1"></i> Disetujui
                                </span>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-success shadow-success text-center rounded-circle ms-auto d-flex align-items-center justify-content-center">
                                    <i class="fas fa-check text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        {{-- Card Rejected --}}
        <div class="col-sm-6 col-xl-3">
            <a href="{{ url('/trsrjc') }}" class="text-decoration-none">
                <div class="card card-hover border-0 shadow-sm h-100">
                    <div class="card-body p-3">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <p class="text-xs mb-1 text-uppercase font-weight-bold text-muted">Rejected</p>
                                <h4 class="font-weight-bolder text-dark mb-1">
                                    {{ $count_rejected ?? 0 }}
                                </h4>
                                <span class="text-danger text-xs font-weight-bold">
                                    <i class="fas fa-times-circle me-1"></i> Ditolak
                                </span>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-danger shadow-danger text-center rounded-circle ms-auto d-flex align-items-center justify-content-center">
                                    <i class="fas fa-times text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        {{-- Card Unreviewed --}}
        <div class="col-sm-6 col-xl-3">
            <a href="{{ url('/trsign') }}" class="text-decoration-none">
                <div class="card card-hover border-0 shadow-sm h-100">
                    <div class="card-body p-3">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <p class="text-xs mb-1 text-uppercase font-weight-bold text-muted">Unreviewed</p>
                                <h4 class="font-weight-bolder text-dark mb-1">
                                    {{ $count_unreviewed ?? 0 }}
                                </h4>
                                <span class="text-secondary text-xs font-weight-bold">
                                    <i class="fas fa-ban me-1"></i> Belum Direview
                                </span>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-secondary shadow-secondary text-center rounded-circle ms-auto d-flex align-items-center justify-content-center">
                                    <i class="fas fa-ban text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>

    <!-- Summary Details Row (Side-by-Side Layout) -->
    <div class="row g-4 mb-4">
        {{-- Ringkasan Riwayat Permohonan --}}
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header pb-0 p-3 bg-transparent">
                    <h6 class="mb-0 text-dark font-weight-bold">Ringkasan Riwayat Permohonan</h6>
                    <p class="text-xs text-muted mb-0">Total akumulasi data permohonan</p>
                </div>
                <div class="card-body p-3">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item border-0 d-flex justify-content-between align-items-center px-0 mb-2">
                            <div class="d-flex align-items-center">
                                <div class="icon icon-shape icon-sm me-3 bg-gradient-success shadow-sm text-center rounded-3 d-flex align-items-center justify-content-center">
                                    <i class="fas fa-check text-white opacity-10 text-xs"></i>
                                </div>
                                <div class="d-flex flex-column">
                                    <h6 class="mb-0 text-dark text-sm font-weight-bold">Approved (Overall)</h6>
                                    <span class="text-xxs text-muted">Permohonan yang telah disetujui keseluruhan</span>
                                </div>
                            </div>
                            <span class="badge bg-gradient-success rounded-pill px-3 py-2">{{ $count_approved_ovr ?? 0 }}</span>
                        </li>
                        <li class="list-group-item border-0 d-flex justify-content-between align-items-center px-0">
                            <div class="d-flex align-items-center">
                                <div class="icon icon-shape icon-sm me-3 bg-gradient-danger shadow-sm text-center rounded-3 d-flex align-items-center justify-content-center">
                                    <i class="fas fa-times text-white opacity-10 text-xs"></i>
                                </div>
                                <div class="d-flex flex-column">
                                    <h6 class="mb-0 text-dark text-sm font-weight-bold">Rejected (Overall)</h6>
                                    <span class="text-xxs text-muted">Permohonan yang ditolak keseluruhan</span>
                                </div>
                            </div>
                            <span class="badge bg-gradient-danger rounded-pill px-3 py-2">{{ $count_rejected_ovr ?? 0 }}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        {{-- Jumlah Data per Divisi --}}
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header pb-0 p-3 bg-transparent">
                    <h6 class="mb-0 text-dark font-weight-bold">Jumlah Data per Divisi</h6>
                    <p class="text-xs text-muted mb-0">Pembagian permohonan berdasarkan divisi operasional</p>
                </div>
                <div class="card-body p-3">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item border-0 d-flex justify-content-between align-items-center px-0 mb-2">
                            <div class="d-flex align-items-center">
                                <div class="icon icon-shape icon-sm me-3 bg-gradient-primary shadow-sm text-center rounded-3 d-flex align-items-center justify-content-center">
                                    <i class="fas fa-hard-hat text-white opacity-10 text-xs"></i>
                                </div>
                                <div class="d-flex flex-column">
                                    <h6 class="mb-0 text-dark text-sm font-weight-bold">Hygiene and Medical (H&M)</h6>
                                    <span class="text-xxs text-muted">Total permohonan divisi H&M</span>
                                </div>
                            </div>
                            <span class="badge bg-gradient-primary rounded-pill px-3 py-2">{{ $count_hm ?? 0 }}</span>
                        </li>
                        <li class="list-group-item border-0 d-flex justify-content-between align-items-center px-0">
                            <div class="d-flex align-items-center">
                                <div class="icon icon-shape icon-sm me-3 bg-gradient-info shadow-sm text-center rounded-3 d-flex align-items-center justify-content-center">
                                    <i class="fas fa-industry text-white opacity-10 text-xs"></i>
                                </div>
                                <div class="d-flex flex-column">
                                    <h6 class="mb-0 text-dark text-sm font-weight-bold">Industrial</h6>
                                    <span class="text-xxs text-muted">Total permohonan divisi Industrial</span>
                                </div>
                            </div>
                            <span class="badge bg-gradient-info rounded-pill px-3 py-2">{{ $count_industrial ?? 0 }}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    {{-- Salesperson Dashboard Section --}}
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header pb-0 p-3 bg-transparent d-flex justify-content-between align-items-center border-bottom">
                    <div class="mb-2 mb-sm-0">
                        <h6 class="mb-0 font-weight-bold text-dark">Salesperson Dashboard</h6>
                        <p class="text-xs text-muted mb-0">Performa penjualan per salesperson</p>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        @if(!empty($can_sync_sap))
                        <form id="form-sync-sap" action="{{ route('rptsap.sync-current-year') }}" method="POST" class="d-inline">
                            @csrf
                            <button type="submit" class="btn btn-sm btn-outline-primary shadow-sm mb-0">
                                <i class="fas fa-sync-alt me-1"></i> Sync SAP ({{ date('Y') }})
                            </button>
                        </form>
                        @endif
                        <a href="{{ route('sales.index') }}" class="btn btn-sm btn-primary shadow-sm mb-0">
                            <i class="fas fa-chart-bar me-1"></i> Laporan Lengkap
                        </a>
                    </div>
                </div>
                <div class="card-body p-3">
                    {{-- Filter Form --}}
                    <form method="GET" action="{{ request()->url() }}" class="mb-4 bg-light p-3 rounded-3">
                        <div class="row g-2 align-items-end">
                            <!-- Tahun -->
                            <div class="col-6 col-md-2 col-lg-2">
                                <label class="form-label text-xs font-weight-bold text-muted mb-1">Tahun</label>
                                <select class="form-select form-select-sm" name="sp_year">
                                    @foreach ($salesperson_year_options as $year)
                                        <option value="{{ $year }}" {{ $salesperson_selected_year == $year ? 'selected' : '' }}>{{ $year }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Bulan -->
                            <div class="col-6 col-md-2 col-lg-2">
                                <label class="form-label text-xs font-weight-bold text-muted mb-1">Bulan</label>
                                <select class="form-select form-select-sm" name="sp_month">
                                    @foreach ($salesperson_month_options as $monthValue => $monthLabel)
                                        <option value="{{ $monthValue }}" {{ $salesperson_selected_month == $monthValue ? 'selected' : '' }}>{{ $monthLabel }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Salesperson -->
                            <div class="col-12 col-md-5 col-lg-6">
                                <label class="form-label text-xs font-weight-bold text-muted mb-1">Salesperson</label>
                                <select class="form-select form-select-sm" name="sp_salesman">
                                    <option value="all" {{ $salesperson_selected_username == 'all' ? 'selected' : '' }}>Select Salesperson</option>
                                    @foreach ($salesperson_options as $username => $slsmanName)
                                        <option value="{{ $username }}" {{ $salesperson_selected_username == $username ? 'selected' : '' }}>{{ $slsmanName }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Tombol Update -->
                            <div class="col-12 col-md-3 col-lg-2">
                                <button type="submit" class="btn btn-sm btn-info w-100 mb-0 shadow-sm">
                                    <i class="fas fa-sync-alt me-1"></i> Update
                                </button>
                            </div>
                        </div>
                    </form>

                    @if(!empty($salesperson_dashboard))
                    @php
                        // Actual/On Hand USD sengaja null (sumber data tidak jelas) -> tampilkan '-'
                        $fmtUsd = fn($v) => $v === null ? '-' : number_format((float) $v, 2);
                        $fmtPct = fn($v) => $v === null ? '-' : number_format((float) $v, 1) . '%';
                        $fmtDiff = fn($a, $b) => ($a ?? null) === null ? '-' : number_format((float) $a - (float) $b, 2);
                    @endphp
                    {{-- Main Metrics Cards --}}
                    <div class="row g-3 mb-4">
                        <div class="col-md-4">
                            <div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); color: white;">
                                <div class="card-body p-3">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <p class="text-xs mb-0 text-uppercase font-weight-bold text-white opacity-8">Sales SO {{ $salesperson_month_options[$salesperson_selected_month] }} {{ $salesperson_selected_year }}</p>
                                        <div class="icon icon-shape bg-white shadow-sm text-center rounded-circle d-flex align-items-center justify-content-center" style="width:36px; height:36px;">
                                            <i class="fas fa-file-invoice text-sm opacity-10" style="color: #4f46e5;"></i>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6">
                                            <p class="text-xxs mb-0 opacity-8">QTY (kg)</p>
                                            <h5 class="font-weight-bolder mb-0 text-white">{{ number_format($salesperson_dashboard['sales_so_qty'] ?? 0, 2) }}</h5>
                                        </div>
                                        <div class="col-6 text-end">
                                            <p class="text-xxs mb-0 opacity-8">USD</p>
                                            <h5 class="font-weight-bolder mb-0 text-white">{{ number_format($salesperson_dashboard['sales_so'] ?? 0, 2) }}</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #00b7bd 0%, #009fa3 100%); color: white;">
                                <div class="card-body p-3">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <p class="text-xs mb-0 text-uppercase font-weight-bold text-white opacity-8">Sudah Dikirim & Dibayar {{ $salesperson_month_options[$salesperson_selected_month] }} {{ $salesperson_selected_year }}</p>
                                        <div class="icon icon-shape bg-white shadow-sm text-center rounded-circle d-flex align-items-center justify-content-center" style="width:36px; height:36px;">
                                            <i class="fas fa-dollar-sign text-sm opacity-10" style="color: #00b7bd;"></i>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6">
                                            <p class="text-xxs mb-0 opacity-8">Sudah Dikirim (kg)</p>
                                            <h5 class="font-weight-bolder mb-0 text-white">{{ number_format($salesperson_dashboard['sales_actual_qty'] ?? 0, 2) }}</h5>
                                        </div>
                                        <div class="col-6 text-end">
                                            <p class="text-xxs mb-0 opacity-8">Sudah Dibayar (USD)</p>
                                            <h5 class="font-weight-bolder mb-0 text-white">{{ $fmtUsd($salesperson_dashboard['sales_actual'] ?? null) }}</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #f6ad55 0%, #ed8936 100%); color: white;">
                                <div class="card-body p-3">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <p class="text-xs mb-0 text-uppercase font-weight-bold text-white opacity-8">Belum Dikirim & Dibayar {{ $salesperson_month_options[$salesperson_selected_month] }} {{ $salesperson_selected_year }}</p>
                                        <div class="icon icon-shape bg-white shadow-sm text-center rounded-circle d-flex align-items-center justify-content-center" style="width:36px; height:36px;">
                                            <i class="fas fa-shipping-fast text-sm opacity-10" style="color: #ed8936;"></i>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6">
                                            <p class="text-xxs mb-0 opacity-8">Belum Di Kirim (kg)</p>
                                            <h5 class="font-weight-bolder mb-0 text-white">{{ number_format($salesperson_dashboard['sales_on_hand_qty'] ?? 0, 2) }}</h5>
                                        </div>
                                        <div class="col-6 text-end">
                                            <p class="text-xxs mb-0 opacity-8">Belum Dibayar (USD)</p>
                                            <h5 class="font-weight-bolder mb-0 text-white">{{ $fmtUsd($salesperson_dashboard['sales_on_hand'] ?? null) }}</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- <div class="col-md-3">
                            <div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); color: white;">
                                <div class="card-body p-3">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <p class="text-xs mb-0 text-uppercase font-weight-bold text-white opacity-8">Est. Achievement {{ $salesperson_month_options[$salesperson_selected_month] }} {{ $salesperson_selected_year }}</p>
                                        <div class="icon icon-shape bg-white shadow-sm text-center rounded-circle d-flex align-items-center justify-content-center" style="width:36px; height:36px;">
                                            <i class="fas fa-bullseye text-sm opacity-10" style="color: #38a169;"></i>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6">
                                            <p class="text-xxs mb-0 opacity-8">QTY (kg)</p>
                                            <h5 class="font-weight-bolder mb-0 text-white">{{ number_format($salesperson_dashboard['estimated_achievement_qty'] ?? 0, 2) }}</h5>
                                        </div>
                                        <div class="col-6 text-end">
                                            <p class="text-xxs mb-0 opacity-8">USD</p>
                                            <h5 class="font-weight-bolder mb-0 text-white">{{ $fmtUsd($salesperson_dashboard['estimated_achievement'] ?? null) }}</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> --}}
                    </div>

                    {{-- Percentage Cards --}}
                    <div class="row g-3 mb-4">
                        <div class="{{ !empty($salesperson_dashboard['pct_excellence']) ? 'col-md-3' : 'col-md-4' }}">
                            <div class="card border-0 shadow-sm h-100 text-center p-3">
                                <p class="text-xs mb-2 text-uppercase font-weight-bold text-muted">% Budget</p>
                                <h3 class="font-weight-bolder text-primary mb-1">{{ $fmtPct($salesperson_dashboard['pct_budget'] ?? null) }}</h3>
                                <p class="text-xxs text-muted mb-0">Budget: {{ number_format($salesperson_dashboard['budget'] ?? 0, 2) }} kg</p>
                            </div>
                        </div>
                        <div class="{{ !empty($salesperson_dashboard['pct_excellence']) ? 'col-md-3' : 'col-md-4' }}">
                            <div class="card border-0 shadow-sm h-100 text-center p-3">
                                <p class="text-xs mb-2 text-uppercase font-weight-bold text-muted">% Threshold</p>
                                <h3 class="font-weight-bolder text-info mb-1">{{ $fmtPct($salesperson_dashboard['pct_threshold'] ?? null) }}</h3>
                                <p class="text-xxs text-muted mb-0">Threshold: {{ number_format($salesperson_dashboard['threshold'] ?? 0, 2) }} kg</p>
                            </div>
                        </div>
                        <div class="{{ !empty($salesperson_dashboard['pct_excellence']) ? 'col-md-3' : 'col-md-4' }}">
                            <div class="card border-0 shadow-sm h-100 text-center p-3">
                                <p class="text-xs mb-2 text-uppercase font-weight-bold text-muted">% Target</p>
                                <h3 class="font-weight-bolder text-warning mb-1">{{ $fmtPct($salesperson_dashboard['pct_target'] ?? null) }}</h3>
                                <p class="text-xxs text-muted mb-0">Target: {{ number_format($salesperson_dashboard['target'] ?? 0, 2) }} kg</p>
                            </div>
                        </div>
                        @if(!empty($salesperson_dashboard['pct_excellence']))
                        <div class="col-md-3">
                            <div class="card border-0 shadow-sm h-100 text-center p-3">
                                <p class="text-xs mb-2 text-uppercase font-weight-bold text-muted">% Excellence</p>
                                <h3 class="font-weight-bolder text-success mb-1">{{ $fmtPct($salesperson_dashboard['pct_excellence'] ?? null) }}</h3>
                                <p class="text-xxs text-muted mb-0">Excellence: {{ number_format($salesperson_dashboard['excellence_qty'] ?? 0, 2) }} kg</p>
                            </div>
                        </div>
                        @endif
                    </div>
                    
                    {{-- Customer Tables --}}
                    <div class="row g-4">
                        @if(!empty($salesperson_dashboard['hygiene_rows']))
                        <div class="col-12 mb-2">
                            <div class="card border-0 shadow-sm h-100">
                                <div class="card-header pb-0 p-3 bg-transparent">
                                    <h6 class="mb-0 text-sm font-weight-bold text-dark">Aplikasi: Hygiene</h6>
                                </div>
                                <div class="card-body p-3">
                                    <div class="table-responsive rounded-3 border">
                                        <table class="table table-sm table-hover align-items-center mb-0 table-salesperson datatable" style="min-width: 800px; table-layout: fixed; width: 100%;">
                                            <thead class="bg-light">
                                                <tr>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-start ps-3" style="width: 28%; min-width: 180px;">Customer Name</th>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end text-nowrap border-start" style="width: 12%; min-width: 90px;">SO (USD)</th>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end text-nowrap" style="width: 12%; min-width: 90px;">SO Qty (kg)</th>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end text-nowrap border-start" style="width: 12%; min-width: 90px;">Sudah Dibayar (USD)</th>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end text-nowrap" style="width: 12%; min-width: 90px;">Sudah Dikirim (kg)</th>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end text-nowrap border-start" style="width: 12%; min-width: 100px;">Belum Dibayar (USD)</th>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end text-nowrap pe-3" style="width: 12%; min-width: 100px;">Belum Di Kirim (kg)</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($salesperson_dashboard['hygiene_rows'] as $row)
                                                <tr>
                                                    <td class="text-start ps-3 py-2 text-wrap price-history-trigger" style="cursor:pointer;" data-code="{{ $row['customer_code'] }}" data-name="{{ $row['customer_name'] }}" title="Klik untuk riwayat harga">
                                                        <span class="text-xs font-weight-bold text-dark d-block">{{ $row['customer_name'] }} <i class="fas fa-chart-line text-primary text-xxs ms-1"></i></span>
                                                        <span class="d-block text-xxs text-muted">PIC {{ $salesperson_selected_salesperson }}</span>
                                                    </td>
                                                    <td class="text-end py-2 text-xs text-nowrap border-start detail-trigger" style="cursor:pointer;" data-type="so" data-code="{{ $row['customer_code'] }}" data-name="{{ $row['customer_name'] }}" title="Klik untuk detail SO">{{ number_format($row['so_amount'] ?? 0, 2) }} <i class="fas fa-info-circle text-xxs text-muted ms-1"></i></td>
                                                    <td class="text-end py-2 text-xs text-nowrap detail-trigger" style="cursor:pointer;" data-type="so_qty" data-code="{{ $row['customer_code'] }}" data-name="{{ $row['customer_name'] }}" title="Klik untuk detail SO Qty">{{ number_format($row['so_qty'] ?? 0, 2) }} <i class="fas fa-info-circle text-xxs text-muted ms-1"></i></td>
                                                    <td class="text-end py-2 text-xs text-nowrap border-start detail-trigger" style="cursor:pointer;" data-type="actual" data-code="{{ $row['customer_code'] }}" data-name="{{ $row['customer_name'] }}" title="Klik untuk detail Sudah Dibayar">{{ $fmtUsd($row['actual_amount']) }} <i class="fas fa-info-circle text-xxs text-muted ms-1"></i></td>
                                                    <td class="text-end py-2 text-xs text-nowrap detail-trigger" style="cursor:pointer;" data-type="actual_qty" data-code="{{ $row['customer_code'] }}" data-name="{{ $row['customer_name'] }}" title="Klik untuk detail Sudah Dikirim">{{ number_format($row['actual_qty'], 2) }} <i class="fas fa-info-circle text-xxs text-muted ms-1"></i></td>
                                                    <td class="text-end py-2 text-xs text-nowrap border-start detail-trigger" style="cursor:pointer;" data-type="on_hand" data-code="{{ $row['customer_code'] }}" data-name="{{ $row['customer_name'] }}" title="Klik untuk detail Belum Dibayar">{{ $fmtUsd($row['on_hand_amount'] ?? null) }} <i class="fas fa-info-circle text-xxs text-muted ms-1"></i></td>
                                                    <td class="text-end py-2 text-xs text-nowrap pe-3 detail-trigger" style="cursor:pointer;" data-type="on_hand_qty" data-code="{{ $row['customer_code'] }}" data-name="{{ $row['customer_name'] }}" title="Klik untuk detail Belum Di Kirim">{{ number_format($row['on_hand_qty'] ?? 0, 2) }} <i class="fas fa-info-circle text-xxs text-muted ms-1"></i></td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif

                        @if(!empty($salesperson_dashboard['medical_rows']))
                        <div class="col-12 mb-2">
                            <div class="card border-0 shadow-sm h-100">
                                <div class="card-header pb-0 p-3 bg-transparent">
                                    <h6 class="mb-0 text-sm font-weight-bold text-dark">Aplikasi: Medical</h6>
                                </div>
                                <div class="card-body p-3">
                                    <div class="table-responsive rounded-3 border">
                                        <table class="table table-sm table-hover align-items-center mb-0 table-salesperson datatable" style="min-width: 800px; table-layout: fixed; width: 100%;">
                                            <thead class="bg-light">
                                                <tr>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-start ps-3" style="width: 28%; min-width: 180px;">Customer Name</th>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end text-nowrap border-start" style="width: 12%; min-width: 90px;">SO (USD)</th>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end text-nowrap" style="width: 12%; min-width: 90px;">SO Qty (kg)</th>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end text-nowrap border-start" style="width: 12%; min-width: 90px;">Sudah Dibayar (USD)</th>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end text-nowrap" style="width: 12%; min-width: 90px;">Sudah Dikirim (kg)</th>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end text-nowrap border-start" style="width: 12%; min-width: 100px;">Belum Dibayar (USD)</th>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end text-nowrap pe-3" style="width: 12%; min-width: 100px;">Belum Di Kirim (kg)</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($salesperson_dashboard['medical_rows'] as $row)
                                                <tr>
                                                    <td class="text-start ps-3 py-2 text-wrap price-history-trigger" style="cursor:pointer;" data-code="{{ $row['customer_code'] }}" data-name="{{ $row['customer_name'] }}" title="Klik untuk riwayat harga">
                                                        <span class="text-xs font-weight-bold text-dark d-block">{{ $row['customer_name'] }} <i class="fas fa-chart-line text-primary text-xxs ms-1"></i></span>
                                                        <span class="d-block text-xxs text-muted">PIC {{ $salesperson_selected_salesperson }}</span>
                                                    </td>
                                                    <td class="text-end py-2 text-xs text-nowrap border-start detail-trigger" style="cursor:pointer;" data-type="so" data-code="{{ $row['customer_code'] }}" data-name="{{ $row['customer_name'] }}" title="Klik untuk detail SO">{{ number_format($row['so_amount'] ?? 0, 2) }} <i class="fas fa-info-circle text-xxs text-muted ms-1"></i></td>
                                                    <td class="text-end py-2 text-xs text-nowrap detail-trigger" style="cursor:pointer;" data-type="so_qty" data-code="{{ $row['customer_code'] }}" data-name="{{ $row['customer_name'] }}" title="Klik untuk detail SO Qty">{{ number_format($row['so_qty'] ?? 0, 2) }} <i class="fas fa-info-circle text-xxs text-muted ms-1"></i></td>
                                                    <td class="text-end py-2 text-xs text-nowrap border-start detail-trigger" style="cursor:pointer;" data-type="actual" data-code="{{ $row['customer_code'] }}" data-name="{{ $row['customer_name'] }}" title="Klik untuk detail Sudah Dibayar">{{ $fmtUsd($row['actual_amount']) }} <i class="fas fa-info-circle text-xxs text-muted ms-1"></i></td>
                                                    <td class="text-end py-2 text-xs text-nowrap detail-trigger" style="cursor:pointer;" data-type="actual_qty" data-code="{{ $row['customer_code'] }}" data-name="{{ $row['customer_name'] }}" title="Klik untuk detail Sudah Dikirim">{{ number_format($row['actual_qty'], 2) }} <i class="fas fa-info-circle text-xxs text-muted ms-1"></i></td>
                                                    <td class="text-end py-2 text-xs text-nowrap border-start detail-trigger" style="cursor:pointer;" data-type="on_hand" data-code="{{ $row['customer_code'] }}" data-name="{{ $row['customer_name'] }}" title="Klik untuk detail Belum Dibayar">{{ $fmtUsd($row['on_hand_amount'] ?? null) }} <i class="fas fa-info-circle text-xxs text-muted ms-1"></i></td>
                                                    <td class="text-end py-2 text-xs text-nowrap pe-3 detail-trigger" style="cursor:pointer;" data-type="on_hand_qty" data-code="{{ $row['customer_code'] }}" data-name="{{ $row['customer_name'] }}" title="Klik untuk detail Belum Di Kirim">{{ number_format($row['on_hand_qty'] ?? 0, 2) }} <i class="fas fa-info-circle text-xxs text-muted ms-1"></i></td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif

                        @if(!empty($salesperson_dashboard['industrial_rows']))
                        <div class="col-12 mb-2">
                            <div class="card border-0 shadow-sm h-100">
                                <div class="card-header pb-0 p-3 bg-transparent">
                                    <h6 class="mb-0 text-sm font-weight-bold text-dark">Aplikasi: Industrial</h6>
                                </div>
                                <div class="card-body p-3">
                                    <div class="table-responsive rounded-3 border">
                                        <table class="table table-sm table-hover align-items-center mb-0 table-salesperson datatable" style="min-width: 800px; table-layout: fixed; width: 100%;">
                                            <thead class="bg-light">
                                                <tr>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-start ps-3" style="width: 28%; min-width: 180px;">Customer Name</th>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end text-nowrap border-start" style="width: 12%; min-width: 90px;">SO (USD)</th>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end text-nowrap" style="width: 12%; min-width: 90px;">SO Qty (kg)</th>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end text-nowrap border-start" style="width: 12%; min-width: 90px;">Sudah Dibayar (USD)</th>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end text-nowrap" style="width: 12%; min-width: 90px;">Sudah Dikirim (kg)</th>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end text-nowrap border-start" style="width: 12%; min-width: 100px;">Belum Dibayar (USD)</th>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end text-nowrap pe-3" style="width: 12%; min-width: 100px;">Belum Di Kirim (kg)</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($salesperson_dashboard['industrial_rows'] as $row)
                                                <tr>
                                                    <td class="text-start ps-3 py-2 text-wrap price-history-trigger" style="cursor:pointer;" data-code="{{ $row['customer_code'] }}" data-name="{{ $row['customer_name'] }}" title="Klik untuk riwayat harga">
                                                        <span class="text-xs font-weight-bold text-dark d-block">{{ $row['customer_name'] }} <i class="fas fa-chart-line text-primary text-xxs ms-1"></i></span>
                                                        <span class="d-block text-xxs text-muted">PIC {{ $salesperson_selected_salesperson }}</span>
                                                    </td>
                                                    <td class="text-end py-2 text-xs text-nowrap border-start detail-trigger" style="cursor:pointer;" data-type="so" data-code="{{ $row['customer_code'] }}" data-name="{{ $row['customer_name'] }}" title="Klik untuk detail SO">{{ number_format($row['so_amount'] ?? 0, 2) }} <i class="fas fa-info-circle text-xxs text-muted ms-1"></i></td>
                                                    <td class="text-end py-2 text-xs text-nowrap detail-trigger" style="cursor:pointer;" data-type="so_qty" data-code="{{ $row['customer_code'] }}" data-name="{{ $row['customer_name'] }}" title="Klik untuk detail SO Qty">{{ number_format($row['so_qty'] ?? 0, 2) }} <i class="fas fa-info-circle text-xxs text-muted ms-1"></i></td>
                                                    <td class="text-end py-2 text-xs text-nowrap border-start detail-trigger" style="cursor:pointer;" data-type="actual" data-code="{{ $row['customer_code'] }}" data-name="{{ $row['customer_name'] }}" title="Klik untuk detail Sudah Dibayar">{{ $fmtUsd($row['actual_amount']) }} <i class="fas fa-info-circle text-xxs text-muted ms-1"></i></td>
                                                    <td class="text-end py-2 text-xs text-nowrap detail-trigger" style="cursor:pointer;" data-type="actual_qty" data-code="{{ $row['customer_code'] }}" data-name="{{ $row['customer_name'] }}" title="Klik untuk detail Sudah Dikirim">{{ number_format($row['actual_qty'], 2) }} <i class="fas fa-info-circle text-xxs text-muted ms-1"></i></td>
                                                    <td class="text-end py-2 text-xs text-nowrap border-start detail-trigger" style="cursor:pointer;" data-type="on_hand" data-code="{{ $row['customer_code'] }}" data-name="{{ $row['customer_name'] }}" title="Klik untuk detail Belum Dibayar">{{ $fmtUsd($row['on_hand_amount'] ?? null) }} <i class="fas fa-info-circle text-xxs text-muted ms-1"></i></td>
                                                    <td class="text-end py-2 text-xs text-nowrap pe-3 detail-trigger" style="cursor:pointer;" data-type="on_hand_qty" data-code="{{ $row['customer_code'] }}" data-name="{{ $row['customer_name'] }}" title="Klik untuk detail Belum Di Kirim">{{ number_format($row['on_hand_qty'] ?? 0, 2) }} <i class="fas fa-info-circle text-xxs text-muted ms-1"></i></td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>

                    {{-- Summary Table --}}
                    <div class="row mb-4 mt-3">
                        <div class="col-12">
                            <div class="card border-0 shadow-sm">
                                <div class="card-header pb-0 p-3 bg-transparent">
                                    <h6 class="mb-0 text-sm font-weight-bold text-dark">Summary</h6>
                                </div>
                                <div class="card-body p-3">
                                    <div class="table-responsive rounded-3 border">
                                        <table class="table table-sm table-hover align-items-center mb-0 datatable">
                                            <thead class="bg-light">
                                                <tr>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-start ps-3" style="min-width: 220px;">Metric</th>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end text-nowrap">Target (kg)</th>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end text-nowrap">SO Qty (kg)</th>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end text-nowrap">Sudah Dikirim (kg)</th>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end text-nowrap">Difference (kg)</th>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end pe-3 text-nowrap">% Achievement</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td class="text-start ps-3 py-2 text-xs font-weight-bold">Budget {{ $salesperson_selected_year }} VS Sudah Dikirim {{ $salesperson_month_options[$salesperson_selected_month] }} {{ $salesperson_selected_year }} {{ $salesperson_selected_salesperson }}</td>
                                                    <td class="text-end py-2 text-xs text-nowrap">{{ number_format($salesperson_dashboard['budget'] ?? 0, 2) }}</td>
                                                    <td class="text-end py-2 text-xs text-nowrap">{{ number_format($salesperson_dashboard['sales_so_qty'] ?? 0, 2) }}</td>
                                                    <td class="text-end py-2 text-xs text-nowrap">{{ number_format($salesperson_dashboard['sales_actual_qty'] ?? 0, 2) }}</td>
                                                    <td class="text-end py-2 text-xs text-nowrap">{{ $fmtDiff($salesperson_dashboard['sales_actual_qty'] ?? null, $salesperson_dashboard['budget'] ?? 0) }}</td>
                                                    <td class="text-end pe-3 py-2 text-xs font-weight-bold text-nowrap">{{ $fmtPct($salesperson_dashboard['pct_budget'] ?? null) }}</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-start ps-3 py-2 text-xs font-weight-bold">Threshold {{ $salesperson_selected_year }} VS Sudah Dikirim {{ $salesperson_month_options[$salesperson_selected_month] }} {{ $salesperson_selected_year }} {{ $salesperson_selected_salesperson }}</td>
                                                    <td class="text-end py-2 text-xs text-nowrap">{{ number_format($salesperson_dashboard['threshold'] ?? 0, 2) }}</td>
                                                    <td class="text-end py-2 text-xs text-nowrap">{{ number_format($salesperson_dashboard['sales_so_qty'] ?? 0, 2) }}</td>
                                                    <td class="text-end py-2 text-xs text-nowrap">{{ number_format($salesperson_dashboard['sales_actual_qty'] ?? 0, 2) }}</td>
                                                    <td class="text-end py-2 text-xs text-nowrap">{{ $fmtDiff($salesperson_dashboard['sales_actual_qty'] ?? null, $salesperson_dashboard['threshold'] ?? 0) }}</td>
                                                    <td class="text-end pe-3 py-2 text-xs font-weight-bold text-nowrap">{{ $fmtPct($salesperson_dashboard['pct_threshold'] ?? null) }}</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-start ps-3 py-2 text-xs font-weight-bold">Target {{ $salesperson_selected_year }} VS Sudah Dikirim {{ $salesperson_month_options[$salesperson_selected_month] }} {{ $salesperson_selected_year }} {{ $salesperson_selected_salesperson }}</td>
                                                    <td class="text-end py-2 text-xs text-nowrap">{{ number_format($salesperson_dashboard['target'] ?? 0, 2) }}</td>
                                                    <td class="text-end py-2 text-xs text-nowrap">{{ number_format($salesperson_dashboard['sales_so_qty'] ?? 0, 2) }}</td>
                                                    <td class="text-end py-2 text-xs text-nowrap">{{ number_format($salesperson_dashboard['sales_actual_qty'] ?? 0, 2) }}</td>
                                                    <td class="text-end py-2 text-xs text-nowrap">{{ $fmtDiff($salesperson_dashboard['sales_actual_qty'] ?? null, $salesperson_dashboard['target'] ?? 0) }}</td>
                                                    <td class="text-end pe-3 py-2 text-xs font-weight-bold text-nowrap">{{ $fmtPct($salesperson_dashboard['pct_target'] ?? null) }}</td>
                                                </tr>
                                                @if(!empty($salesperson_dashboard['pct_excellence']))
                                                <tr>
                                                    <td class="text-start ps-3 py-2 text-xs font-weight-bold text-success">Excellence {{ $salesperson_selected_year }} VS Sudah Dikirim {{ $salesperson_month_options[$salesperson_selected_month] }} {{ $salesperson_selected_year }} {{ $salesperson_selected_salesperson }}</td>
                                                    <td class="text-end py-2 text-xs text-nowrap text-success">{{ number_format($salesperson_dashboard['excellence_qty'] ?? 0, 2) }}</td>
                                                    <td class="text-end py-2 text-xs text-nowrap">{{ number_format($salesperson_dashboard['sales_so_qty'] ?? 0, 2) }}</td>
                                                    <td class="text-end py-2 text-xs text-nowrap">{{ number_format($salesperson_dashboard['sales_actual_qty'] ?? 0, 2) }}</td>
                                                    <td class="text-end py-2 text-xs text-nowrap">{{ $fmtDiff($salesperson_dashboard['sales_actual_qty'] ?? null, $salesperson_dashboard['target'] ?? 0) }}</td>
                                                    <td class="text-end pe-3 py-2 text-xs font-weight-bold text-nowrap text-success">{{ $fmtPct($salesperson_dashboard['pct_excellence'] ?? null) }}</td>
                                                </tr>
                                                @endif
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Detail Data untuk popup (prompt7) --}}
                    @php
                        $customerMap = $salesperson_dashboard['customer_map'] ?? [];
                        $priceHistoryMap = $salesperson_dashboard['price_history'] ?? [];
                        $detailJson  = [];
                        foreach ($customerMap as $code => $cdata) {
                            $detailJson[$code] = [
                                'so_amount'       => $cdata['so_amount'] ?? 0,
                                'so_qty'          => $cdata['so_qty'] ?? 0,
                                'so_details'      => $cdata['so_details'] ?? [],
                                'actual_amount'   => $cdata['actual_amount'] ?? 0,
                                'actual_qty'      => $cdata['actual_qty'] ?? 0,
                                'actual_details'  => $cdata['actual_details'] ?? [],
                                'actual_qty_details' => $cdata['actual_qty_details'] ?? [],
                                'on_hand_amount'  => ($cdata['so_amount'] ?? 0) - ($cdata['cumulative_actual_amount'] ?? 0),
                                'on_hand_qty'     => ($cdata['so_qty'] ?? 0) - ($cdata['actual_qty'] ?? 0),
                                'on_hand_details' => $cdata['on_hand_details'] ?? [],
                                'price_history'   => $priceHistoryMap[$code] ?? null,
                            ];
                        }
                    @endphp
                    <script>
                    window.dashboardDetail = {!! json_encode($detailJson, JSON_UNESCAPED_UNICODE) !!};
                    </script>

                    @else
                    <div class="text-center py-5 bg-light rounded-3">
                        <i class="fas fa-user-tie text-muted text-lg mb-2"></i>
                        <p class="text-muted text-sm mb-0">Pilih salesperson untuk melihat dashboard</p>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Data Source Indicator --}}
    <div class="row mt-2">
        <div class="col-12">
            @if(!empty($data_source_currency_missing))
            <div class="alert alert-warning alert-currency text-white py-2 mb-2" role="alert">
                <i class="fas fa-exclamation-triangle me-1"></i>
                Terdapat SO dengan mata uang selain USD yang belum punya kurs di data SAP (Z_GET_TCURR).
                Nilai SO ditampilkan tanpa konversi. Segera lakukan sync SAP exchange rate.
            </div>
            @endif
            <div class="text-end text-xxs text-muted border-top pt-2">
                @php
                    $indoMonths = [1=>'Januari',2=>'Februari',3=>'Maret',4=>'April',5=>'Mei',6=>'Juni',7=>'Juli',8=>'Agustus',9=>'September',10=>'Oktober',11=>'November',12=>'Desember'];
                    $fmtTgl = function($dt) use ($indoMonths) {
                        if (!$dt) return '-';
                        try {
                            $c = \Carbon\Carbon::parse($dt);
                            return $c->format('j') . ' ' . ($indoMonths[(int)$c->format('n')] ?? $c->format('F')) . ' ' . $c->format('Y H:i');
                        } catch (\Exception $e) { return $dt; }
                    };
                @endphp
                <span class="me-3">
                    <i class="fas fa-database me-1"></i> Data SAP: hingga {{ $fmtTgl($data_source_sap_until) }}
                </span>
                <span class="me-3">
                    <i class="fas fa-exchange-alt me-1"></i> Data Sistem: mulai {{ $fmtTgl($data_source_system_from) }}
                </span>
                @if(!empty($data_source_onhand_until))
                <span>
                    <i class="fas fa-shipping-fast me-1"></i> Data Belum Di Kirim: {{ $fmtTgl($data_source_onhand_until) }}
                </span>
                @else
                <span>
                    <i class="fas fa-shipping-fast me-1"></i> Data Belum Di Kirim: belum tersedia
                </span>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- Detail Popup Modal (prompt7) --}}
<div class="modal fade" id="customerDetailModal" tabindex="-1" aria-labelledby="customerDetailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header py-2 px-4">
                <h6 class="modal-title font-weight-bold text-dark mb-0" id="customerDetailModalLabel">Detail</h6>
            </div>
            <div class="modal-body p-3" id="customerDetailBody">
                <p class="text-center text-muted text-sm">Memuat...</p>
            </div>
        </div>
    </div>
</div>

{{-- Price History Popup Modal (prompt15) --}}
<div class="modal fade" id="priceHistoryModal" tabindex="-1" aria-labelledby="priceHistoryModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header py-2 px-4">
                <div class="me-auto">
                    <h6 class="modal-title font-weight-bold text-dark mb-0" id="priceHistoryModalLabel">Riwayat Harga</h6>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0 mt-1" style="--bs-breadcrumb-divider: '>';">
                            <li class="breadcrumb-item text-xxs"><a href="#" class="text-muted">Dashboard</a></li>
                            <li class="breadcrumb-item text-xxs"><a href="#" class="text-muted">Detail Customer</a></li>
                            <li class="breadcrumb-item active text-xxs text-dark fw-bold" id="priceHistoryBreadcrumb">-</li>
                        </ol>
                    </nav>
                </div>
                <div class="d-flex align-items-center gap-2 me-2">
                    <label class="text-xxs text-muted mb-0 me-1">Periode</label>
                    <select id="priceHistoryRange" class="form-select form-select-sm" style="width: auto;">
                        <option value="12" selected>Last 12 months</option>
                        <option value="24">Last 24 months</option>
                    </select>
                </div>
            </div>
            <div class="modal-body p-4" id="priceHistoryBody">
                <p class="text-center text-muted text-sm">Memuat...</p>
            </div>
        </div>
    </div>
</div>

@endsection

@push('js')
<script src="{{ asset('/') }}assets/js/plugins/chartjs.min.js"></script>
<script>
(function () {
    const MONTH_NAMES = ['Jan','Feb','Mar','Apr','Mei','Jun','Jul','Agt','Sep','Okt','Nov','Des'];
    const INDO_MONTHS = ['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];

    function fmtNum(v) {
        if (v === null || v === undefined) return '-';
        return parseFloat(v).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
    }

    function fmtUsd(v) {
        if (v === null || v === undefined) return '-';
        return parseFloat(v).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
    }

    function fmtDate(dateStr) {
        if (!dateStr || dateStr === '-' || dateStr === '0000-00-00') return '-';
        const clean = String(dateStr).trim().slice(0, 10);
        const parts = clean.split('-');
        if (parts.length === 3 && parts[0].length === 4) {
            const y = parseInt(parts[0], 10);
            const m = parseInt(parts[1], 10);
            const d = parseInt(parts[2], 10);
            if (!isNaN(y) && !isNaN(m) && !isNaN(d) && m >= 1 && m <= 12) {
                return `${d} ${INDO_MONTHS[m - 1]} ${y}`;
            }
        }
        return dateStr;
    }

    // prompt24: DO dianggap "Sudah Dikirim" hanya bila POSTGOODSISSUE='C';
    // null/kosong = data lama (dianggap dikirim agar angka historis tidak berubah).
    function isShipped(d) {
        return d.post_goods_issue === 'C'
            || d.post_goods_issue === null
            || d.post_goods_issue === undefined
            || d.post_goods_issue === '';
    }

    // Card terpisah untuk Amount (USD) dan Qty (kg) di dalam modal popup.
    function detailCard(title, bodyHtml, badge) {
        return `<div class="card border shadow-none mb-2">
            <div class="card-header py-2 px-3 bg-light d-flex justify-content-between align-items-center">
                <h6 class="mb-0 text-xs font-weight-bold text-dark">${title}</h6>
                ${badge ? `<span class="badge bg-secondary text-xxs">${badge}</span>` : ''}
            </div>
            <div class="card-body p-2">
                ${bodyHtml}
            </div>
        </div>`;
    }

    function buildSoTable(detail, customerName) {
        const rows = detail.so_details || [];
        const soTotal    = parseFloat(detail.so_amount || 0);
        const soQtyTotal = parseFloat(detail.so_qty    || 0);
        const intro = `<p class="text-xs text-muted mb-2">SO dokumen yang di-atribusikan ke periode ini untuk <strong>${customerName}</strong></p>`;
        if (rows.length === 0) {
            return intro + '<p class="text-center text-muted text-sm">Tidak ada data SO.</p>';
        }

        // Card SO Amount (USD): hanya SO yang masuk finalDocs bulan ini (so_usd != null).
        // Qty-only doc (jadwal DO bulan ini tapi USD di bulan lain, prompt16 opsi 1)
        // tidak dirender di sini.
        const usdRowsArr = rows.filter(r => r.so_usd != null);
        let usdBody = '<p class="text-center text-muted text-sm">Tidak ada SO Amount bulan ini.</p>';
        if (usdRowsArr.length > 0) {
            let usdRows = usdRowsArr.map(r => `<tr>
                <td class="ps-2 text-nowrap font-weight-bold">${r.salesdoc}</td>
                <td class="text-nowrap">${fmtDate(r.delivery_date)}</td>
                <td class="text-end pe-2 text-nowrap">${fmtUsd(r.so_usd)}</td>
            </tr>`).join('');
            usdBody = `
                <div class="table-responsive"><table class="table table-sm table-hover text-xs mb-0">
                    <thead class="bg-light"><tr>
                        <th class="text-start ps-2">SO Doc</th>
                        <th class="text-start">Tgl Pengiriman</th>
                        <th class="text-end pe-2">SO (USD)</th>
                    </tr></thead><tbody>${usdRows}</tbody>
                    <tfoot class="bg-light fw-bold"><tr>
                        <td class="ps-2" colspan="2">Total</td>
                        <td class="text-end pe-2">${fmtUsd(soTotal)}</td>
                    </tr></tfoot></table></div>`;
        }
        const usdCard = detailCard('SO Amount (USD)', usdBody);

        // SO Qty per data rpt_et_getdobyso (prompt8): tiap SALESDOCUMENT + DELIVERYDATE
        // ditampilkan sebagai baris terpisah, bukan agregat per SO doc. Qty mengikuti
        // jadwal DO (prompt16 opsi 1): termasuk SO yang hanya punya jadwal DO bulan ini
        // walau USD-nya di bulan lain (so_usd = null).
        let qtyRows = '';
        rows.forEach(r => {
            const qd = r.so_qty_details || [];
            if (qd.length > 0) {
                qd.forEach(d => {
                    qtyRows += `<tr>
                        <td class="ps-2 text-nowrap font-weight-bold">${r.salesdoc}</td>
                        <td class="text-nowrap">${fmtDate(d.delivery_date)}</td>
                        <td class="text-end pe-2 text-nowrap">${fmtNum(d.qty)}</td>
                    </tr>`;
                });
            } else if (r.so_usd != null) {
                // Fallback: tabel getdobyso kosong → tampilkan agregat per doc saja
                // (hanya untuk SO finalDocs, jangan tampilkan baris qty 0 untuk
                // qty-only doc yang tidak punya detail jadwal).
                qtyRows += `<tr>
                    <td class="ps-2 text-nowrap font-weight-bold">${r.salesdoc}</td>
                    <td class="text-nowrap">${fmtDate(r.delivery_date)}</td>
                    <td class="text-end pe-2 text-nowrap">${fmtNum(r.so_qty)}</td>
                </tr>`;
            }
        });
        const qtyCard = detailCard('SO Qty (kg)', `
            <div class="table-responsive"><table class="table table-sm table-hover text-xs mb-0">
                <thead class="bg-light"><tr>
                    <th class="text-start ps-2">SO Doc</th>
                    <th class="text-start">Tgl Pengiriman</th>
                    <th class="text-end pe-2">SO Qty (kg)</th>
                </tr></thead><tbody>${qtyRows}</tbody>
                <tfoot class="bg-light fw-bold"><tr>
                    <td class="ps-2" colspan="2">Total</td>
                    <td class="text-end pe-2">${fmtNum(soQtyTotal)}</td>
                </tr></tfoot></table></div>`);

        return intro + usdCard + qtyCard;
    }

    function buildActualTable(detail, customerName, year, month) {
        const rows        = detail.actual_details || [];
        const doRows      = detail.actual_qty_details || [];
        const actualTotal    = parseFloat(detail.actual_amount || 0);
        const actualQtyTotal = parseFloat(detail.actual_qty    || 0);
        const monthName = INDO_MONTHS[parseInt(month) - 1] + ' ' + year;
        const intro = `<p class="text-xs text-muted mb-2">Data billing & pengiriman bulan <strong>${monthName}</strong> untuk <strong>${customerName}</strong></p>`;

        // Card 1: Sudah Dibayar (USD) — dari billing (rpt_ET_ZVBILLING). Bisa kosong
        // walaupun qty delivery sudah ada (billing belum masuk).
        let usdBody = '<p class="text-center text-muted text-sm">Belum ada pembayaran di bulan ini.</p>';
        if (rows.length > 0) {
            let usdRows = rows.map(r => `<tr>
                <td class="ps-2 text-nowrap font-weight-bold">${r.salesdoc}</td>
                <td class="text-nowrap">${fmtDate(r.billdate)}</td>
                <td class="text-end pe-2 text-nowrap">${fmtUsd(r.actual_usd)}</td>
            </tr>`).join('');
            usdBody = `
                <div class="table-responsive"><table class="table table-sm table-hover text-xs mb-0">
                    <thead class="bg-light"><tr>
                        <th class="text-start ps-2">SO Doc</th>
                        <th class="text-start">Tgl Billing</th>
                        <th class="text-end pe-2">Sudah Dibayar (USD)</th>
                    </tr></thead><tbody>${usdRows}</tbody>
                    <tfoot class="bg-light fw-bold"><tr>
                        <td class="ps-2" colspan="2">Total Sudah Dibayar</td>
                        <td class="text-end pe-2">${fmtUsd(actualTotal)}</td>
                    </tr></tfoot></table></div>`;
        }
        const usdCard = detailCard('Sudah Dibayar (USD)', usdBody);

        // Card 2: Sudah Dikirim (kg) — prioritas per DO dari rpt_et_getonhand (prompt8):
        // tiap DO (DOCUMENTNUMBER) punya baris sendiri dengan QUANTITY-nya. Tetap
        // ditampilkan walau billing kosong (prompt9), karena qty delivery bisa sudah
        // tercatat sebelum billing masuk. Fallback ke baris billing bila detail DO
        // tidak ada.
        // prompt24: baris yang POSTGOODSISSUE != 'C' (belum dikirim) tetap ditampilkan
        // namun ditandai kuning "Akan di Kirim" dan tidak dihitung ke total Sudah Dikirim.
        let qtyBody = '<p class="text-center text-muted text-sm">Belum ada delivery order tercatat.</p>';
        if (doRows.length > 0) {
            let shippedTotal = 0;
            let qtyRows = doRows.map(d => {
                const shipped = isShipped(d);
                if (shipped) shippedTotal += parseFloat(d.qty || 0);
                const flag = shipped ? '' : `<span class="badge bg-secondary text-light ms-1 text-xxs">Akan di Kirim</span>`;
                return `<tr class="${shipped ? '' : 'row-yellow'}">
                    <td class="ps-2 text-nowrap font-weight-bold">${d.salesdoc}</td>
                    <td class="text-nowrap">${d.do_number || '-'}</td>
                    <td class="text-nowrap">${fmtDate(d.delivery_date)}</td>
                    <td class="text-end pe-2 text-nowrap">${fmtNum(d.qty)}${flag}</td>
                </tr>`;
            }).join('');
            qtyBody = `
                <div class="table-responsive"><table class="table table-sm table-hover text-xs mb-0">
                    <thead class="bg-light"><tr>
                        <th class="text-start ps-2">SO Doc</th>
                        <th class="text-start">No. DO</th>
                        <th class="text-start">Tgl Pengiriman</th>
                        <th class="text-end pe-2">Sudah Dikirim (kg)</th>
                    </tr></thead><tbody>${qtyRows}</tbody>
                    <tfoot class="bg-light fw-bold"><tr>
                        <td class="ps-2" colspan="3">Total Sudah Dikirim</td>
                        <td class="text-end pe-2">${fmtNum(actualQtyTotal)}</td>
                    </tr></tfoot></table></div>`;
        } else if (rows.length > 0) {
            // Fallback: tidak ada detail DO → tampilkan agregat per baris billing
            let qtyRows = rows.map(r => `<tr>
                <td class="ps-2 text-nowrap font-weight-bold">${r.salesdoc}</td>
                <td class="text-nowrap">-</td>
                <td class="text-nowrap">${fmtDate(r.billdate)}</td>
                <td class="text-end pe-2 text-nowrap">${fmtNum(r.actual_qty)}</td>
            </tr>`).join('');
            qtyBody = `
                <div class="table-responsive"><table class="table table-sm table-hover text-xs mb-0">
                    <thead class="bg-light"><tr>
                        <th class="text-start ps-2">SO Doc</th>
                        <th class="text-start">No. DO</th>
                        <th class="text-start">Tgl Billing</th>
                        <th class="text-end pe-2">Sudah Dikirim (kg)</th>
                    </tr></thead><tbody>${qtyRows}</tbody>
                    <tfoot class="bg-light fw-bold"><tr>
                        <td class="ps-2" colspan="3">Total Sudah Dikirim</td>
                        <td class="text-end pe-2">${fmtNum(actualQtyTotal)}</td>
                    </tr></tfoot></table></div>`;
        }
        const qtyCard = detailCard('Sudah Dikirim (kg)', qtyBody);

        return intro + usdCard + qtyCard;
    }

    function buildOnHandTable(detail, customerName, year, month) {
        const rows      = detail.on_hand_details || [];
        const soTotal   = parseFloat(detail.so_amount     || 0);
        const soQty     = parseFloat(detail.so_qty        || 0);
        const actQty    = parseFloat(detail.actual_qty    || 0);
        const onHand    = parseFloat(detail.on_hand_amount || 0);
        const onHandQty = parseFloat(detail.on_hand_qty   || 0);
        const cumPaid   = soTotal - onHand;
        const intro = `<p class="text-xs text-muted mb-2">Rincian pembayaran & pengiriman kumulatif sampai periode ini untuk <strong>${customerName}</strong></p>`;

        // ---------- Card 1: Belum Dibayar (USD) ----------
        let usdSummary = `<div class="row g-2 mb-2">
            <div class="col-4"><div class="border rounded p-2 text-center">
                <div class="text-xxs text-muted">SO (Full Value)</div>
                <div class="font-weight-bold text-sm">${fmtUsd(soTotal)} USD</div>
            </div></div>
            <div class="col-4"><div class="border rounded p-2 text-center">
                <div class="text-xxs text-muted">Sudah Dibayar</div>
                <div class="font-weight-bold text-sm text-success">${fmtUsd(cumPaid)} USD</div>
            </div></div>
            <div class="col-4"><div class="border rounded p-2 text-center">
                <div class="text-xxs text-muted">Belum Dibayar (Sisa)</div>
                <div class="font-weight-bold text-sm ${onHand < 0 ? 'text-danger' : 'text-warning'}">${fmtUsd(onHand)} USD</div>
            </div></div>
        </div>`;
        let usdTable = '<p class="text-center text-muted text-sm">Belum ada pembayaran tercatat.</p>';
        if (rows.length > 0) {
            let running = 0;
            let trows = rows.map(r => {
                running += r.billed_usd;
                return `<tr>
                    <td class="ps-2 font-weight-bold">${MONTH_NAMES[r.billing_month - 1]} ${r.billing_year}</td>
                    <td class="text-end pe-2 text-nowrap">${fmtUsd(r.billed_usd)}</td>
                    <td class="text-end pe-2 text-nowrap">${fmtUsd(running)}</td>
                </tr>`;
            }).join('');
            usdTable = `<div class="table-responsive"><table class="table table-sm table-hover text-xs mb-0">
                <thead class="bg-light"><tr>
                    <th class="text-start ps-2">Periode</th>
                    <th class="text-end pe-2">Amount (USD)</th>
                    <th class="text-end pe-2">Sudah di Bayar (USD)</th>
                </tr></thead><tbody>${trows}</tbody>
                <tfoot class="bg-light fw-bold"><tr>
                    <td class="ps-2">Total Kumulatif</td>
                    <td class="text-end pe-2">${fmtUsd(cumPaid)}</td>
                    <td class="text-end pe-2">${fmtUsd(cumPaid)}</td>
                </tr></tfoot></table></div>`;
        }
        const usdCard = detailCard('Belum Dibayar (USD)', usdSummary + usdTable);

        // ---------- Card 2: Belum Di Kirim (kg) ----------
        // Prompt8: hanya amount USD yang kumulatif; untuk qty tidak kumulatif
        // karena data SO sudah by bulan berjalan saja. Tabel qty ditampilkan
        // per SO doc (So Doc | Qty (kg) | Sudah Dikirim (kg)).
        let qtySummary = `<div class="row g-2 mb-2">
            <div class="col-4"><div class="border rounded p-2 text-center">
                <div class="text-xxs text-muted">SO Qty</div>
                <div class="font-weight-bold text-sm">${fmtNum(soQty)} kg</div>
            </div></div>
            <div class="col-4"><div class="border rounded p-2 text-center">
                <div class="text-xxs text-muted">Sudah Dikirim Bulan Ini</div>
                <div class="font-weight-bold text-sm text-success">${fmtNum(actQty)} kg</div>
            </div></div>
            <div class="col-4"><div class="border rounded p-2 text-center">
                <div class="text-xxs text-muted">Belum Di Kirim (Sisa)</div>
                <div class="font-weight-bold text-sm ${onHandQty < 0 ? 'text-danger' : 'text-warning'}">${fmtNum(onHandQty)} kg</div>
            </div></div>
        </div>`;
        // Per SO doc: Qty (kg) = SO qty per doc, Bulan Ini (kg) = actual qty per doc.
        // Hanya DO yang sudah dikirim (POSTGOODSISSUE='C') yang dihitung (prompt24).
        const soRows2   = detail.so_details || [];
        const doRows2   = detail.actual_qty_details || [];
        const qtyDocMap = {}; // salesdoc -> actual qty bulan ini
        doRows2.forEach(d => {
            if (isShipped(d)) {
                qtyDocMap[d.salesdoc] = (qtyDocMap[d.salesdoc] || 0) + parseFloat(d.qty || 0);
            }
        });
        let qtyTable = '<p class="text-center text-muted text-sm">Belum ada data qty.</p>';
        if (soRows2.length > 0 || doRows2.length > 0) {
            let qtyRows2 = soRows2.map(r => {
                const act = qtyDocMap[r.salesdoc] || 0;
                return `<tr>
                    <td class="ps-2 font-weight-bold text-nowrap">${r.salesdoc}</td>
                    <td class="text-end pe-2 text-nowrap">${fmtNum(r.so_qty)}</td>
                    <td class="text-end pe-2 text-nowrap">${fmtNum(act)}</td>
                </tr>`;
            }).join('');
            qtyTable = `<div class="table-responsive"><table class="table table-sm table-hover text-xs mb-0">
                <thead class="bg-light"><tr>
                    <th class="text-start ps-2">So Doc</th>
                    <th class="text-end pe-2">Qty (kg)</th>
                    <th class="text-end pe-2">Sudah Dikirim (kg)</th>
                </tr></thead><tbody>${qtyRows2}</tbody>
                <tfoot class="bg-light fw-bold"><tr>
                    <td class="ps-2">Total Bulan Ini</td>
                    <td class="text-end pe-2">${fmtNum(soQty)}</td>
                    <td class="text-end pe-2">${fmtNum(actQty)}</td>
                </tr></tfoot></table></div>`;
        }
        const qtyCard = detailCard('Belum Di Kirim (kg)', qtySummary + qtyTable);

        return intro + usdCard + qtyCard;
    }

    document.addEventListener('click', function (e) {
        const cell = e.target.closest('.detail-trigger');
        if (!cell) return;

        const code   = cell.dataset.code;
        const name   = cell.dataset.name;
        const type   = cell.dataset.type;
        const detail = (window.dashboardDetail || {})[code];
        const year   = document.querySelector('select[name="sp_year"]')?.value  || '';
        const month  = document.querySelector('select[name="sp_month"]')?.value || '';

        if (!detail) return;

        let title = '';
        let body  = '';

        if (type === 'so' || type === 'so_qty') {
            title = (type === 'so_qty' ? 'Detail SO Qty (kg)' : 'Detail SO (USD)') + ' – ' + name;
            body  = buildSoTable(detail, name);
        } else if (type === 'actual' || type === 'actual_qty') {
            title = (type === 'actual_qty' ? 'Detail Sudah Dikirim (kg)' : 'Detail Sudah Dibayar (USD)') + ' – ' + name;
            body  = buildActualTable(detail, name, year, month);
        } else if (type === 'on_hand' || type === 'on_hand_qty') {
            title = (type === 'on_hand_qty' ? 'Detail Belum Di Kirim (kg)' : 'Detail Belum Dibayar (USD)') + ' – ' + name;
            body  = buildOnHandTable(detail, name, year, month);
        }

        document.getElementById('customerDetailModalLabel').textContent = title;
        document.getElementById('customerDetailBody').innerHTML = body;

        bootstrap.Modal.getOrCreateInstance(document.getElementById('customerDetailModal')).show();
    });

    // ---------- Price History popup (prompt15) ----------
    // Prompt17: tiap tab MATGR punya sub kategori MATNR (dropdown); klik point
    // pada chart memuat baris transaksi pembentuk point via endpoint AJAX.
    // Revisi: default sub kategori = '__all__' (gabungan semua MATNR dalam MATGR).
    const PRICE_COLORS = ['#5e72e4', '#f5365c', '#2dce89', '#fb6340', '#8965e0', '#11cdef'];
    const MATNR_ALL = '__all__';  // nilai khusus dropdown = gabungan semua MATNR
    // URL endpoint detail point memakai url() Laravel agar mengikuti base URL host
    // (aman di production sub path seperti app.spunindo.com/msjso/...).
    const PRICE_HISTORY_DETAIL_URL = @json(url('dashboard/api/price-history-detail'));
    // URL endpoint data riwayat per rentang bulan (prompt19): dipanggil saat user
    // mengganti dropdown 12/24 bulan — data diambil sesuai pilihan, bukan dipotong
    // client-side dari payload 24 bulan.
    const PRICE_HISTORY_URL = @json(url('dashboard/api/price-history'));
    let activePriceHistoryMatgr = null;  // material (MATGR) aktif di popup (default = paling sering dibeli)
    let activePriceHistoryMatnr = MATNR_ALL;  // sub kategori (MATNR) aktif; default = semua
    let currentPriceHistoryCode = null;  // kode customer yang popupnya sedang terbuka

    // Resolve KPI sesuai matnr aktif: '__all__' → kpi_all[matgr], selain itu kpi_by_matnr
    function resolvePriceHistoryKpi(ph, matgr, matnr) {
        if (matnr === MATNR_ALL) {
            return ((ph.kpi_all || {})[matgr] || null);
        }
        return (((ph.kpi_by_matnr || {})[matgr] || {})[matnr] || null);
    }

    // Resolve deret harga sesuai matnr aktif: '__all__' → series_all[matgr], selain itu series[matgr][matnr]
    function resolvePriceHistorySerie(ph, matgr, matnr) {
        if (matnr === MATNR_ALL) {
            return ((ph.series_all || {})[matgr] || []);
        }
        return (((ph.series || {})[matgr] || {})[matnr] || []);
    }

    function buildPriceHistory(detail, name) {
        const ph = detail.price_history || {};
        const months = ph.months || [];
        const materialOrder = ph.material_order || [];
        const matnrOrder = ph.matnr_order || {};
        activePriceHistoryMatgr = materialOrder[0] || null;
        activePriceHistoryMatnr = MATNR_ALL;  // default = gabungan semua MATNR (revisi)

        // Tab per MATGR, urut dari yang paling sering dibeli (backend sudah sort desc)
        let tabHtml = '';
        if (materialOrder.length > 1) {
            tabHtml = '<div class="d-flex flex-wrap gap-2 mb-2" id="priceHistoryTabs">' +
                materialOrder.map((m, i) =>
                    `<button type="button" class="btn btn-sm ${i === 0 ? 'btn-primary' : 'btn-outline-secondary'} price-history-tab" data-matgr="${m}">${m}</button>`
                ).join('') +
                '</div>';
        } else if (materialOrder.length === 1) {
            tabHtml = `<div class="d-flex flex-wrap gap-2 mb-2" id="priceHistoryTabs">
                <button type="button" class="btn btn-sm btn-primary price-history-tab" data-matgr="${materialOrder[0]}">${materialOrder[0]}</button>
            </div>`;
        }

        // Dropdown sub kategori MATNR (prompt17) — dibuat/diisi lewat renderMatnrSelect
        const matnrHtml = '<div id="priceHistoryMatnrWrap" class="mb-2"></div>';

        // KPI cards material aktif (wadah id=priceHistoryKpi agar bisa di-update saat ganti tab/matnr)
        const kpiHtml = `<div id="priceHistoryKpi"></div>`;

        // Chart container (Chart.js)
        const chartHtml = `<div class="card border shadow-none mb-2">
            <div class="card-header py-2 px-3 bg-light d-flex justify-content-between align-items-center">
                <h6 class="mb-0 text-xs font-weight-bold text-dark">Riwayat Harga Jual (USD/kg) – ${name}</h6>
                <span class="badge bg-secondary text-xxs" id="priceHistoryChartRange">12 bulan</span>
            </div>
            <div class="card-body p-3">
                <div style="position: relative; height: 300px;">
                    <canvas id="priceHistoryChart"></canvas>
                </div>
                <p class="text-xxs text-muted mt-2 mb-0"><i class="fas fa-info-circle"></i> Klik sebuah titik pada grafik untuk melihat rincian transaksi yang membentuknya.</p>
            </div>
        </div>`;

        // Container detail point (diisi saat klik point, prompt17)
        const pointHtml = '<div id="priceHistoryPointDetail" class="mb-2"></div>';

        return tabHtml + matnrHtml + kpiHtml + chartHtml + pointHtml;
    }

    // Render dropdown MATNR sesuai MATGR aktif (prompt17). Opsi pertama = All
    // (gabungan semua MATNR, revisi) dan dipilih secara default.
    function renderMatnrSelect(ph, matgr) {
        const wrap = document.getElementById('priceHistoryMatnrWrap');
        if (!wrap) return;
        const matnrOrder = (ph.matnr_order || {})[matgr] || [];
        const descMap = ((ph.matnr_desc || {})[matgr]) || {};
        if (matnrOrder.length === 0) {
            activePriceHistoryMatnr = MATNR_ALL;
            wrap.innerHTML = '';
            return;
        }
        wrap.innerHTML = `<div class="d-flex align-items-center gap-2">
            <span class="text-xxs text-muted text-nowrap">Sub kategori (MATNR):</span>
            <select class="form-select form-select-sm price-history-matnr" style="max-width: 320px;">
                <option value="${MATNR_ALL}" ${activePriceHistoryMatnr === MATNR_ALL ? 'selected' : ''}>All (Semua MATNR)</option>
                ${matnrOrder.map(m =>
                    `<option value="${m}" ${m === activePriceHistoryMatnr ? 'selected' : ''}>${m}${descMap[m] ? ' – ' + descMap[m] : ''}</option>`
                ).join('')}
            </select>
        </div>`;
    }

    function buildKpiCards(kpi, resinKpi) {
        if (!kpi) return '<p class="text-center text-muted text-sm">Belum ada data billing untuk customer ini.</p>';
        const changeCls = kpi.price_change_pct >= 0 ? 'text-success' : 'text-danger';
        const changeArrow = kpi.price_change_pct >= 0 ? '▲' : '▼';
        // kpi.matnr null (kpi_all) = gabungan semua MATNR dalam MATGR
        const matnrBadge = kpi.matnr
            ? '<span class="badge bg-light text-dark">' + kpi.matnr + '</span>'
            : '<span class="badge bg-light text-dark">Semua MATNR</span>';

        // Card resin price change
        let resinCardHtml = '';
        if (resinKpi) {
            const rCls = resinKpi.price_change_pct >= 0 ? 'text-success' : 'text-danger';
            const rArrow = resinKpi.price_change_pct >= 0 ? '▲' : '▼';
            resinCardHtml = `<div class="col-3"><div class="border rounded p-3 text-center" style="border-color: #fb6340 !important;">
                <div class="text-xxs text-muted text-dark font-weight-bold">PP Resin Price Change</div>
                <div class="font-weight-bold text-lg ${rCls}">${rArrow} ${Math.abs(resinKpi.price_change_pct).toFixed(2)}%</div>
                <div class="text-xxs text-muted">vs bulan sebelumnya</div>
            </div></div>`;
        } else {
            resinCardHtml = `<div class="col-3"><div class="border rounded p-3 text-center bg-light">
                <div class="text-xxs text-muted">PP Resin Price Change</div>
                <div class="font-weight-bold text-lg text-muted">-</div>
                <div class="text-xxs text-muted">Belum ada data master</div>
            </div></div>`;
        }

        const colCls = 'col-3';

        return `<div class="row g-2 mb-3">
            <div class="${colCls}"><div class="border rounded p-3 text-center" style="border-color: #5e72e4 !important;">
                <div class="text-xxs text-muted">Current avg price</div>
                <div class="font-weight-bold text-lg">${fmtUsd(kpi.current_avg_price)} <span class="text-xxs">USD/kg</span></div>
                <div class="text-xxs text-muted">Material: ${kpi.matgr} ${matnrBadge}</div>
            </div></div>
            <div class="${colCls}"><div class="border rounded p-3 text-center" style="border-color: #5e72e4 !important;">
                <div class="text-xxs text-muted">Price change</div>
                <div class="font-weight-bold text-lg ${changeCls}">${changeArrow} ${Math.abs(kpi.price_change_pct).toFixed(2)}%</div>
                <div class="text-xxs text-muted">vs bulan sebelumnya</div>
            </div></div>
            ${resinCardHtml}
            <div class="${colCls}">
                <div
                    class="border rounded p-3 text-center"
                    style="
                        border-color: #fb6340 !important;
                        box-shadow: 0 0 0 1px #5e72e4;
                    "
                >
                    <div class="text-xxs text-muted">Suggested new price</div>
                    <div class="font-weight-bold text-lg">
                        ${fmtUsd(kpi.suggested_price)}
                        <span class="text-xxs">USD/kg</span>
                    </div>
                    <div class="text-xxs text-muted">proyeksi tren harga</div>
                </div>
            </div>
        </div>`;
    }

    function renderPriceHistoryChart(months, series, seriesAll, matgr, matnr, rangeMonths, ppResinSeries) {
        const canvas = document.getElementById('priceHistoryChart');
        if (!canvas || typeof Chart === 'undefined') return;

        const startIdx = Math.max(0, months.length - rangeMonths);
        const labels = months.slice(startIdx);
        const serie = matnr === MATNR_ALL
            ? ((seriesAll || {})[matgr] || [])
            : (((series || {})[matgr] || {})[matnr] || []);
        const label = matnr === MATNR_ALL ? `${matgr} (Semua MATNR)` : `${matgr} ${matnr}`;

        const datasets = [{
            label: label || 'Harga',
            data: serie.slice(startIdx),
            borderColor: PRICE_COLORS[0],
            backgroundColor: PRICE_COLORS[0] + '22',
            tension: 0.35,
            pointRadius: 3,
            fill: false,
            yAxisID: 'y',
        }];

        // Dataset PP resin cost: garis putus-putus oranye, Y-axis kanan
        const resinSlice = (ppResinSeries || []).slice(startIdx);
        if (resinSlice.some(v => v !== null)) {
            datasets.push({
                label: 'PP Resin Cost Index',
                data: resinSlice,
                borderColor: '#fb6340',
                backgroundColor: 'transparent',
                borderDash: [6, 4],
                tension: 0.2,
                pointRadius: 2,
                fill: false,
                yAxisID: 'y2',
            });
        }

        if (window._priceHistoryChart) {
            window._priceHistoryChart.destroy();
        }

        const hasResin = datasets.length > 1;
        const ctx = canvas.getContext('2d');
        window._priceHistoryChart = new Chart(ctx, {
            type: 'line',
            data: { labels, datasets },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: { mode: 'index', intersect: false },
                scales: {
                    y: {
                        beginAtZero: false,
                        position: 'left',
                        ticks: { callback: v => '$' + Number(v).toFixed(2) }
                    },
                    y2: {
                        display: hasResin,
                        beginAtZero: false,
                        position: 'right',
                        grid: { drawOnChartArea: false },
                        ticks: { callback: v => '$' + Number(v).toFixed(2), color: '#fb6340' },
                        title: { display: hasResin, text: 'PP Resin (USD/kg)', color: '#fb6340', font: { size: 10 } },
                    }
                },
                plugins: {
                    legend: { display: hasResin },
                    tooltip: {
                        callbacks: {
                            label: ctx => ` ${ctx.dataset.label}: $${Number(ctx.parsed.y).toFixed(2)}/kg`
                        }
                    }
                },
                onClick: (evt, elements) => {
                    if (!elements || elements.length === 0) return;
                    const idx = elements[0].index;
                    const ym = labels[idx];
                    loadPriceHistoryPoint(ym);
                }
            }
        });
    }

    // Muat baris transaksi pembentuk point (prompt17) via endpoint AJAX.
    // matnr aktif '__all__' → kirim matnr=all (backend kembalikan semua baris MATGR).
    function loadPriceHistoryPoint(ym) {
        const wrap = document.getElementById('priceHistoryPointDetail');
        if (!wrap || !currentPriceHistoryCode) return;
        const params = new URLSearchParams({
            code: currentPriceHistoryCode,
            matgr: activePriceHistoryMatgr || '',
            matnr: activePriceHistoryMatnr === MATNR_ALL ? 'all' : activePriceHistoryMatnr,
            ym: ym || ''
        });
        wrap.innerHTML = '<p class="text-center text-muted text-sm mb-2"><i class="fas fa-spinner fa-spin"></i> Memuat rincian transaksi...</p>';
        fetch(PRICE_HISTORY_DETAIL_URL + '?' + params.toString())
            .then(res => res.json())
            .then(data => renderPriceHistoryPoint(wrap, ym, data.rows || [], data.resin_rows || []))
            .catch(() => {
                wrap.innerHTML = '<p class="text-center text-muted text-sm mb-2">Gagal memuat rincian transaksi.</p>';
            });
    }

    function renderPriceHistoryPoint(wrap, ym, rows, resinRows) {
        const monthLabel = ym ? (MONTH_NAMES[parseInt(ym.slice(5), 10) - 1] + ' ' + ym.slice(0, 4)) : '';
        if (!rows || rows.length === 0) {
            wrap.innerHTML = '<p class="text-center text-muted text-sm mb-2">Tidak ada transaksi pada ' + (monthLabel || 'titik ini') + ' (Klik titik lain).</p>';
            return;
        }
        // Ringkasan memakai kg (ACTWEIGHT) — prompt19: harga per kg = JOURVALUSD/ACTWEIGHT,
        // total = JOURVALUSD; qty tampilan tetap BILLQTY (unit SAP) per baris.
        const totalKg = rows.reduce((s, r) => s + parseFloat(r.weight_kg || 0), 0);
        const totalUsd = rows.reduce((s, r) => s + parseFloat(r.total_usd || 0), 0);
        const avgPrice = totalKg > 0 ? totalUsd / totalKg : 0;
        let trs = rows.map(r => `<tr>
            <td class="ps-2 text-nowrap">${fmtDate(r.billdate)}</td>
            <td class="text-nowrap">${r.billdoc || '-'}</td>
            <td class="text-nowrap">${r.salesdoc || '-'}</td>
            <td class="text-nowrap">${r.matnr || '-'}</td>
            <td class="text-nowrap">${fmtNum(r.qty)} ${r.unit || ''}</td>
            <td class="text-end pe-2">${r.price_usd != null ? fmtUsd(r.price_usd) : '-'}</td>
            <td class="text-end pe-2">${r.total_usd != null ? fmtUsd(r.total_usd) : '-'}</td>
        </tr>`).join('');

        let resinHtml = '';
        if (resinRows && resinRows.length > 0) {
            let rTrs = resinRows.map(r => `<tr>
                <td class="ps-2 text-nowrap">${fmtDate(r.effective_date)}</td>
                <td class="text-end pe-2">${r.price_per_kg != null ? fmtUsd(r.price_per_kg) : '-'}</td>
            </tr>`).join('');
            resinHtml = `<div class="col-md-4 col-12">
                <div class="card border shadow-none mb-2">
                    <div class="card-header py-2 px-3 bg-light d-flex justify-content-between align-items-center" style="border-bottom: 2px solid #fb6340;">
                        <h6 class="mb-0 text-xs font-weight-bold text-dark">Rincian PP Resin Cost ${monthLabel}</h6>
                        <span class="badge bg-warning text-xxs">${resinRows.length} baris</span>
                    </div>
                    <div class="card-body p-2">
                        <div class="table-responsive" style="max-height: 220px; overflow-y: auto;">
                            <table class="table table-sm table-hover text-xs mb-0">
                                <thead class="bg-light sticky-top"><tr>
                                    <th class="text-start ps-2">Tgl Berlaku</th>
                                    <th class="text-end pe-2">Harga (USD/kg)</th>
                                </tr></thead>
                                <tbody>${rTrs}</tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>`;
        } else {
            resinHtml = `<div class="col-md-4 col-12">
                <div class="card border shadow-none mb-2 bg-light">
                    <div class="card-body p-4 text-center">
                        <h6 class="text-xs font-weight-bold text-muted mb-1">Rincian PP Resin Cost ${monthLabel}</h6>
                        <p class="text-xxs text-muted mb-0">Tidak ada data master PP resin yang berlaku di bulan ini.</p>
                    </div>
                </div>
            </div>`;
        }

        const customerColCls = 'col-md-8 col-12';

        wrap.innerHTML = `<div class="row g-2">
            <div class="${customerColCls}">
                <div class="card border shadow-none mb-2">
                    <div class="card-header py-2 px-3 bg-light d-flex justify-content-between align-items-center">
                        <h6 class="mb-0 text-xs font-weight-bold text-dark">Rincian Transaksi ${monthLabel}</h6>
                        <span class="badge bg-secondary text-xxs">${rows.length} baris · ${fmtNum(totalKg)} kg · avg ${fmtUsd(avgPrice)}/kg</span>
                    </div>
                    <div class="card-body p-2">
                        <div class="table-responsive" style="max-height: 220px; overflow-y: auto;">
                            <table class="table table-sm table-hover text-xs mb-0">
                                <thead class="bg-light sticky-top"><tr>
                                    <th class="text-start ps-2">Tgl Billing</th>
                                    <th class="text-start">Bill Doc</th>
                                    <th class="text-start">SO Doc</th>
                                    <th class="text-start">MATNR</th>
                                    <th class="text-start">Qty</th>
                                    <th class="text-end pe-2">Harga (USD/kg)</th>
                                    <th class="text-end pe-2">Total (USD)</th>
                                </tr></thead>
                                <tbody>${trs}</tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            ${resinHtml}
        </div>`;
    }

    // Render isi popup riwayat harga (body, dropdown MATNR, KPI, chart) — dipakai
    // saat popup dibuka maupun saat periode dropdown berubah (prompt19: data per
    // rentang bulan diambil via AJAX, bukan dipotong dari payload 24 bulan).
    function renderPriceHistoryUi(detail, name, range, deferChart) {
        document.getElementById('priceHistoryModalLabel').textContent = 'Riwayat Harga';
        document.getElementById('priceHistoryBreadcrumb').textContent = name;
        document.getElementById('priceHistoryRange').value = String(range);
        document.getElementById('priceHistoryBody').innerHTML = buildPriceHistory(detail, name);
        document.getElementById('priceHistoryChartRange').textContent = range + ' bulan';

        const ph = detail.price_history || {};
        const matgr = activePriceHistoryMatgr;
        renderMatnrSelect(ph, matgr);
        const matnr = activePriceHistoryMatnr;
        const kpi = resolvePriceHistoryKpi(ph, matgr, matnr);
        document.getElementById('priceHistoryKpi').innerHTML = buildKpiCards(kpi, ph.pp_resin_kpi);

        const draw = () => renderPriceHistoryChart(
            ph.months || [], ph.series || {}, ph.series_all || {},
            activePriceHistoryMatgr, activePriceHistoryMatnr, range, ph.pp_resin || []
        );
        if (deferChart) {
            const modalEl = document.getElementById('priceHistoryModal');
            modalEl.addEventListener('shown.bs.modal', function onShown() {
                modalEl.removeEventListener('shown.bs.modal', onShown);
                draw();
            });
        } else {
            draw();
        }
    }

    // Ambil data riwayat harga untuk rentang bulan pilihan via AJAX (prompt19):
    // pilih 24 bulan → ambil 24, pilih 12 bulan → ambil 12.
    function loadPriceHistoryRange(range) {
        const bodyEl = document.getElementById('priceHistoryBody');
        if (!bodyEl || !currentPriceHistoryCode) return;
        document.getElementById('priceHistoryChartRange').textContent = range + ' bulan';
        bodyEl.innerHTML = '<p class="text-center text-muted text-sm py-4"><i class="fas fa-spinner fa-spin"></i> Memuat data ' + range + ' bulan...</p>';

        const params = new URLSearchParams({ code: currentPriceHistoryCode, months: range });
        fetch(PRICE_HISTORY_URL + '?' + params.toString())
            .then(res => res.json())
            .then(data => {
                const detail = (window.dashboardDetail || {})[currentPriceHistoryCode] || {};
                detail.price_history = data.price_history || null;
                if (!detail.price_history) {
                    bodyEl.innerHTML = '<p class="text-center text-muted text-sm">Belum ada data billing untuk customer ini dalam ' + range + ' bulan terakhir.</p>';
                    return;
                }
                renderPriceHistoryUi(detail, document.getElementById('priceHistoryBreadcrumb').textContent, range, false);
            })
            .catch(() => {
                bodyEl.innerHTML = '<p class="text-center text-muted text-sm">Gagal memuat data riwayat harga.</p>';
            });
    }

    document.addEventListener('DOMContentLoaded', function () {
        const formSync = document.getElementById('form-sync-sap');

        if (formSync) {
            formSync.addEventListener('submit', function (e) {
                e.preventDefault(); // Tahan pengiriman form otomatis

                Swal.fire({
                    title: 'Konfirmasi Sinkronisasi',
                    text: 'Mulai sinkronisasi SAP untuk tahun {{ date("Y") }}?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#028284',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Ya, Jalankan!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        this.submit(); // Submit form jika user klik 'Ya'
                    }
                });
            });
        }
    });

    document.addEventListener('click', function (e) {
        const cell = e.target.closest('.price-history-trigger');
        if (!cell) return;

        const code = cell.dataset.code;
        const name = cell.dataset.name;
        const detail = (window.dashboardDetail || {})[code];
        if (!detail) return;
        currentPriceHistoryCode = code;

        if (!detail.price_history) {
            document.getElementById('priceHistoryModalLabel').textContent = 'Riwayat Harga – ' + name;
            document.getElementById('priceHistoryBreadcrumb').textContent = name;
            document.getElementById('priceHistoryBody').innerHTML =
                '<p class="text-center text-muted text-sm">Belum ada data billing untuk customer ini dalam 12 bulan terakhir.</p>';
            bootstrap.Modal.getOrCreateInstance(document.getElementById('priceHistoryModal')).show();
            return;
        }

        // Default periode = 12 bulan terakhir; chart di-render setelah modal tampil
        renderPriceHistoryUi(detail, name, 12, true);
        bootstrap.Modal.getOrCreateInstance(document.getElementById('priceHistoryModal')).show();

        // Saat periode dropdown berubah: ambil data sesuai pilihan via AJAX
        document.getElementById('priceHistoryRange').onchange = function () {
            loadPriceHistoryRange(parseInt(this.value, 10));
        };
    });

    // Ganti dropdown MATNR di dalam MATGR aktif (prompt17)
    document.addEventListener('change', function (e) {
        const sel = e.target.closest('.price-history-matnr');
        if (!sel || !currentPriceHistoryCode) return;
        activePriceHistoryMatnr = sel.value;

        const detail = (window.dashboardDetail || {})[currentPriceHistoryCode] || {};
        const ph = detail.price_history || {};
        const matgr = activePriceHistoryMatgr;
        const kpi = resolvePriceHistoryKpi(ph, matgr, activePriceHistoryMatnr);
        const kpiEl = document.getElementById('priceHistoryKpi');
        if (kpiEl) kpiEl.innerHTML = buildKpiCards(kpi, ph.pp_resin_kpi);

        // Kosongkan detail point lama + render ulang chart
        const pointEl = document.getElementById('priceHistoryPointDetail');
        if (pointEl) pointEl.innerHTML = '';
        const range = parseInt(document.getElementById('priceHistoryRange').value, 10);
        renderPriceHistoryChart(ph.months || [], ph.series || {}, ph.series_all || {}, matgr, activePriceHistoryMatnr, range, ph.pp_resin || []);
    });

    // Ganti tab material (MATGR): reset sub kategori ke All + update KPI + render chart
    document.addEventListener('click', function (e) {
        const tab = e.target.closest('.price-history-tab');
        if (!tab || !currentPriceHistoryCode) return;

        activePriceHistoryMatgr = tab.dataset.matgr;
        // Toggle style tombol aktif
        document.querySelectorAll('#priceHistoryTabs .price-history-tab').forEach(b => {
            const active = b === tab;
            b.classList.toggle('btn-primary', active);
            b.classList.toggle('btn-outline-secondary', !active);
        });

        const detail = (window.dashboardDetail || {})[currentPriceHistoryCode] || {};
        const ph = detail.price_history || {};

        // Reset sub kategori ke All pada MATGR aktif (prompt17 revisi: default all)
        renderMatnrSelect(ph, activePriceHistoryMatgr);
        const kpi = resolvePriceHistoryKpi(ph, activePriceHistoryMatgr, activePriceHistoryMatnr);
        const kpiEl = document.getElementById('priceHistoryKpi');
        if (kpiEl) kpiEl.innerHTML = buildKpiCards(kpi, ph.pp_resin_kpi);

        // Kosongkan detail point lama + render ulang chart sesuai material + periode aktif
        const pointEl = document.getElementById('priceHistoryPointDetail');
        if (pointEl) pointEl.innerHTML = '';
        const range = parseInt(document.getElementById('priceHistoryRange').value, 10);
        renderPriceHistoryChart(ph.months || [], ph.series || {}, ph.series_all || {}, activePriceHistoryMatgr, activePriceHistoryMatnr, range, ph.pp_resin || []);
    });
})();
</script>
@endpush