@extends('layouts.master')

@section('styles')
    <link rel="stylesheet" href="{{ asset('build/assets/libs/sweetalert2/sweetalert2.min.css') }}">
    <style>
        .product-hero-card {
            background: linear-gradient(135deg, #102a1d 0%, #1c4532 50%, #2b5240 100%);
            color: #ffffff;
            border-radius: 16px;
            padding: 30px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(43, 82, 64, 0.18);
        }
        .product-hero-card::before {
            content: '';
            position: absolute;
            top: -50px;
            right: -50px;
            width: 260px;
            height: 260px;
            background: radial-gradient(circle, rgba(52, 211, 153, 0.25) 0%, rgba(43, 82, 64, 0) 70%);
            border-radius: 50%;
            pointer-events: none;
        }
        .hero-metric-box {
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 12px;
            padding: 16px 18px;
            transition: all 0.25s ease;
        }
        .hero-metric-box:hover {
            background: rgba(255, 255, 255, 0.14);
            transform: translateY(-2px);
        }
        .detail-spec-card {
            border: 1px solid rgba(0, 0, 0, 0.06);
            border-radius: 12px;
            transition: all 0.25s ease;
        }
        .detail-spec-card:hover {
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
        }
        .scheme-table th {
            background-color: #f1f5f9;
            color: #334155;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 12px 16px;
            border-bottom: 2px solid #e2e8f0;
        }
        .scheme-table td {
            padding: 14px 16px;
            vertical-align: middle;
            border-bottom: 1px solid #f1f5f9;
        }
        .scheme-table tbody tr:hover {
            background-color: #f8fafc;
        }
        .product-cover-wrapper {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid #e2e8f0;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
            background: #f8fafc;
        }
        .product-cover-img {
            width: 100%;
            height: 220px;
            object-fit: cover;
            display: block;
        }
        .benefit-item {
            padding: 10px 14px;
            border-radius: 10px;
            background: #f8fafc;
            border: 1px solid #edf2f7;
            margin-bottom: 8px;
            transition: all 0.2s ease;
        }
        .benefit-item:hover {
            background: #ffffff;
            border-color: #bbf7d0;
            box-shadow: 0 3px 10px rgba(22, 163, 74, 0.06);
            transform: translateX(3px);
        }
        .code-pill {
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
            font-size: 11px;
            padding: 3px 8px;
            background: rgba(255, 255, 255, 0.15);
            color: #ffffff;
            border-radius: 6px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            letter-spacing: 0.5px;
        }
        .timeframe-pill-btn {
            border-radius: 20px;
            font-size: 11px;
            font-weight: 600;
            padding: 4px 12px;
            border: 1px solid #e2e8f0;
            color: #64748b;
            background: #ffffff;
            transition: all 0.2s ease;
        }
        .timeframe-pill-btn:hover {
            background: #f1f5f9;
            color: #0f3625;
            border-color: #cbd5e1;
        }
        .timeframe-pill-btn.active {
            background: #102a1d;
            color: #ffffff;
            border-color: #102a1d;
            box-shadow: 0 2px 6px rgba(16, 42, 29, 0.25);
        }
        .nav-stat-chip {
            padding: 10px 14px;
            background: #f8fafc;
            border-radius: 10px;
            border: 1px solid #edf2f7;
        }
    </style>
@endsection

@section('content')

    <!-- Breadcrumb & Header Bar -->
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 my-4 page-header-breadcrumb">
        <div>
            <div class="d-flex align-items-center gap-2 mb-1">
                <span class="badge bg-primary-transparent text-primary fw-semibold px-2 py-1 fs-11">Katalog Produk</span>
                <span class="text-muted fs-12">&bull;</span>
                <span class="text-muted fs-12 font-monospace">{{ $product->code ?: 'ID: #' . $product->id }}</span>
            </div>
            <h1 class="page-title fw-bold fs-20 mb-0 text-dark">Detail Produk: {{ $product->name }}</h1>
        </div>
        <div class="d-flex align-items-center gap-2 flex-wrap">
            <a href="{{ route('investment-products.edit', $product->id) }}" class="btn btn-primary d-inline-flex align-items-center gap-1 shadow-sm">
                <i class="ri-edit-line fs-14"></i> Edit Produk
            </a>
            <a href="{{ route('investment-products.index') }}" class="btn btn-outline-secondary d-inline-flex align-items-center gap-1">
                <i class="ri-arrow-left-line fs-14"></i> Kembali ke Daftar
            </a>
        </div>
    </div>

    <!-- Alert Notifikasi Flash -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show d-flex align-items-center mb-4" role="alert">
            <i class="ri-checkbox-circle-line fs-18 me-2"></i>
            <div>{{ session('success') }}</div>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show d-flex align-items-center mb-4" role="alert">
            <i class="ri-error-warning-line fs-18 me-2"></i>
            <div>{{ session('error') }}</div>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- Hero Card Banner dengan Metrik Utama (Harga Sekarang & Total Dana Dikelola) -->
    <div class="product-hero-card mb-4">
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
            <div class="d-flex align-items-center gap-2 flex-wrap">
                <span class="badge bg-white text-dark fw-bold px-3 py-2 fs-12 rounded-pill shadow-sm">
                    <i class="ri-pie-chart-2-line text-primary me-1"></i>{{ $product->category }}
                </span>
                @if($product->code)
                    <span class="code-pill">{{ $product->code }}</span>
                @endif
            </div>
            <div class="d-flex align-items-center gap-2">
                @if($product->is_active)
                    <span class="badge bg-success-transparent text-white border border-white-50 px-3 py-1 fs-12 rounded-pill">
                        <i class="ri-checkbox-circle-fill text-success me-1"></i>Aktif di Mobile
                    </span>
                @else
                    <span class="badge bg-danger-transparent text-white border border-white-50 px-3 py-1 fs-12 rounded-pill">
                        <i class="ri-close-circle-fill text-danger me-1"></i>Nonaktif
                    </span>
                @endif

                @if($product->is_featured)
                    <span class="badge bg-warning text-dark px-3 py-1 fs-12 rounded-pill shadow-sm fw-semibold">
                        <i class="ri-star-fill me-1 text-dark"></i>Unggulan di Beranda
                    </span>
                @endif
            </div>
        </div>

        <h2 class="fw-bold mb-1 text-white fs-24">{{ $product->name }}</h2>
        <p class="text-white-50 fs-13 mb-4">
            Instrumen investasi portofolio DBIC yang disajikan secara transparan dan dikelola secara profesional sesuai regulasi.
        </p>

        <!-- 4 Metric Highlight Cards: Harga Sekarang, Dana Dikelola, Imbal Hasil, Tenor -->
        <div class="row g-3">
            <!-- Metrik 1: Harga Sekarang per Unit (NAV) -->
            <div class="col-xl-3 col-lg-6 col-md-6 col-12">
                <div class="hero-metric-box h-100">
                    <div class="d-flex align-items-center justify-content-between mb-1">
                        <span class="text-white-50 fs-11 text-uppercase fw-semibold">
                            <i class="ri-coin-line me-1 text-warning"></i>Harga Sekarang / Unit
                        </span>
                        @if($growthPercent >= 0)
                            <span class="badge bg-success text-white px-2 py-0-5 fs-10 rounded-pill">
                                <i class="ri-arrow-up-line me-0-5"></i>+{{ number_format($growthPercent, 2) }}%
                            </span>
                        @else
                            <span class="badge bg-danger text-white px-2 py-0-5 fs-10 rounded-pill">
                                <i class="ri-arrow-down-line me-0-5"></i>{{ number_format($growthPercent, 2) }}%
                            </span>
                        @endif
                    </div>
                    <h3 class="fs-22 fw-bold text-white mb-0">Rp {{ number_format($currentNav, 2, ',', '.') }}</h3>
                    <small class="d-block text-white-50 fs-11 mt-1">Nilai Perdana: Rp {{ number_format($baseNav, 2, ',', '.') }}</small>
                </div>
            </div>

            <!-- Metrik 2: Total Dana Dikelola (AUM) -->
            <div class="col-xl-3 col-lg-6 col-md-6 col-12">
                <div class="hero-metric-box h-100">
                    <span class="text-white-50 d-block fs-11 text-uppercase fw-semibold mb-1">
                        <i class="ri-wallet-3-line me-1 text-info"></i>Total Dana Dikelola (AUM)
                    </span>
                    <h3 class="fs-22 fw-bold text-white mb-0">Rp {{ number_format($currentAum, 0, ',', '.') }}</h3>
                    <small class="d-block text-white-50 fs-11 mt-1">
                        {{ $activeInvestorsCount }} Investor Aktif &bull; {{ number_format($activeUnits, 0, ',', '.') }} Unit
                    </small>
                </div>
            </div>

            <!-- Metrik 3: Indikasi Imbal Hasil -->
            <div class="col-xl-3 col-lg-6 col-md-6 col-12">
                <div class="hero-metric-box h-100">
                    <span class="text-white-50 d-block fs-11 text-uppercase fw-semibold mb-1">
                        <i class="ri-funds-line me-1 text-success"></i>Indikasi Imbal Hasil
                    </span>
                    <h3 class="fs-22 fw-bold text-white mb-0">{{ $product->expected_return }}</h3>
                    <small class="d-block text-white-50 fs-11 mt-1">{{ $product->return_type ?? 'Fixed rate' }}</small>
                </div>
            </div>

            <!-- Metrik 4: Jangka Waktu (Tenor) & Risiko -->
            <div class="col-xl-3 col-lg-6 col-md-6 col-12">
                <div class="hero-metric-box h-100">
                    <span class="text-white-50 d-block fs-11 text-uppercase fw-semibold mb-1">
                        <i class="ri-calendar-line me-1 text-light"></i>Tenor & Risiko
                    </span>
                    <h3 class="fs-22 fw-bold text-white mb-0">{{ $product->tenor }}</h3>
                    <small class="d-block text-white-50 fs-11 mt-1">Risiko {{ $product->risk_level }}</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content Grid -->
    <div class="row g-4">

        <!-- Left Column: Chart Kenaikan Harga, Deskripsi & Skema Finansial -->
        <div class="col-xl-8">

            <!-- Card 1: CHART KENAIKAN HARGA PER UNIT (HISTORIS NAV) -->
            <div class="card custom-card detail-spec-card mb-4 shadow-sm">
                <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <div class="card-title d-flex align-items-center gap-2 mb-0">
                        <span class="avatar avatar-sm bg-success-transparent text-success rounded-circle">
                            <i class="ri-line-chart-fill fs-16"></i>
                        </span>
                        <div>
                            <h6 class="fw-bold mb-0 text-dark fs-14">Grafik Kenaikan Harga per Unit (Historis NAV)</h6>
                            <small class="text-muted fs-11">Pergerakan performa Nilai Aktiva Bersih per unit produk {{ $product->name }}</small>
                        </div>
                    </div>
                    <!-- Timeframe Switcher Buttons -->
                    <div class="d-flex align-items-center gap-1" id="nav-chart-timeframe-group">
                        <button type="button" class="btn timeframe-pill-btn active" data-period="1M">1 Bulan</button>
                        <button type="button" class="btn timeframe-pill-btn" data-period="3M">3 Bulan</button>
                        <button type="button" class="btn timeframe-pill-btn" data-period="6M">6 Bulan</button>
                        <button type="button" class="btn timeframe-pill-btn" data-period="1Y">1 Tahun</button>
                        <button type="button" class="btn timeframe-pill-btn" data-period="ALL">Semua</button>
                    </div>
                </div>

                <div class="card-body">
                    <!-- Quick Performance Summary Chips -->
                    <div class="row g-2 mb-3">
                        <div class="col-md-3 col-6">
                            <div class="nav-stat-chip">
                                <span class="text-muted fs-11 d-block">Harga Saat Ini</span>
                                <div class="d-flex align-items-baseline gap-1">
                                    <span class="fs-15 fw-bold text-dark" id="display-stat-current">
                                        Rp {{ number_format($currentNav, 2, ',', '.') }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-6">
                            <div class="nav-stat-chip">
                                <span class="text-muted fs-11 d-block">Pertumbuhan Total</span>
                                <div class="d-flex align-items-baseline gap-1">
                                    <span class="fs-15 fw-bold text-success" id="display-stat-growth">
                                        +{{ number_format($growthPercent, 2) }}%
                                    </span>
                                    <small class="text-muted fs-10">dari base</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-6">
                            <div class="nav-stat-chip">
                                <span class="text-muted fs-11 d-block">NAV Tertinggi</span>
                                <span class="fs-15 fw-bold text-dark" id="display-stat-high">
                                    Rp {{ number_format($navHigh, 2, ',', '.') }}
                                </span>
                            </div>
                        </div>
                        <div class="col-md-3 col-6">
                            <div class="nav-stat-chip">
                                <span class="text-muted fs-11 d-block">NAV Terendah</span>
                                <span class="fs-15 fw-bold text-dark" id="display-stat-low">
                                    Rp {{ number_format($navLow, 2, ',', '.') }}
                                </span>
                            </div>
                        </div>
                    </div>

                    <!-- ApexCharts Area Chart Container -->
                    <div id="chart-product-nav-history" style="min-height: 310px;"></div>
                </div>

                <div class="card-footer bg-light border-top py-2 px-3">
                    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 text-muted fs-11">
                        <span>
                            <i class="ri-shield-check-line text-success me-1"></i>
                            Pergerakan harga per unit dihitung harian berdasarkan Nilai Aktiva Bersih (NAV) portofolio aset DBIC.
                        </span>
                        <span class="fw-semibold text-dark">
                            Basis Perdana: Rp {{ number_format($baseNav, 2, ',', '.') }}
                        </span>
                    </div>
                </div>
            </div>

            <!-- Card 2: Deskripsi & Karakteristik Produk (Bentuk Tulisan) -->
            <div class="card custom-card detail-spec-card mb-4 shadow-sm">
                <div class="card-header justify-content-between align-items-center">
                    <div class="card-title d-flex align-items-center gap-2 mb-0">
                        <span class="avatar avatar-sm bg-primary-transparent text-primary rounded-circle">
                            <i class="ri-article-line fs-16"></i>
                        </span>
                        <div>
                            <h6 class="fw-bold mb-0 text-dark fs-14">Deskripsi & Karakteristik Produk</h6>
                            <small class="text-muted fs-11">Ikhtisar detail profil instrumen investasi</small>
                        </div>
                    </div>
                    <span class="badge bg-light text-muted border fs-11">
                        <i class="ri-shield-check-line me-1 text-success"></i>Terverifikasi Admin
                    </span>
                </div>
                <div class="card-body">
                    @if($product->description)
                        <div class="p-3 bg-light rounded-3 mb-3 border text-dark fs-14" style="line-height: 1.75; white-space: pre-line;">
                            {{ $product->description }}
                        </div>
                    @else
                        <div class="p-3 bg-light rounded-3 mb-3 border text-muted fs-13" style="line-height: 1.7;">
                            Produk investasi <strong>{{ $product->name }}</strong> merupakan instrumen keuangan yang dirancang untuk memberikan imbal hasil optimal secara terukur bagi para nasabah investor DBIC. Dikelola secara profesional dengan alokasi aset yang berfokus pada ketahanan nilai pokok dan kepatuhan prinsip tata kelola yang amanah.
                        </div>
                    @endif

                    <!-- 4 Info Cards Grid -->
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="p-3 border rounded-3 bg-light-subtle h-100">
                                <div class="d-flex align-items-center gap-2 mb-2">
                                    <span class="avatar avatar-xs bg-success-transparent text-success rounded-circle">
                                        <i class="ri-shield-check-line fs-14"></i>
                                    </span>
                                    <h6 class="fs-13 fw-bold mb-0 text-dark">Profil Risiko Pasar</h6>
                                </div>
                                <p class="fs-12 text-muted mb-0">
                                    Tingkat risiko diklasifikasikan sebagai <strong class="text-dark">{{ $product->risk_level }}</strong>. Dikelola dengan diversifikasi aset berkualitas tinggi untuk meminimalkan fluktuasi pasar dan melindungi pokok dana.
                                </p>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="p-3 border rounded-3 bg-light-subtle h-100">
                                <div class="d-flex align-items-center gap-2 mb-2">
                                    <span class="avatar avatar-xs bg-primary-transparent text-primary rounded-circle">
                                        <i class="ri-time-line fs-14"></i>
                                    </span>
                                    <h6 class="fs-13 fw-bold mb-0 text-dark">Kebijakan Tenor & Penarikan</h6>
                                </div>
                                <p class="fs-12 text-muted mb-0">
                                    Masa penempatan berdurasi <strong class="text-dark">{{ $product->tenor }}</strong>. Nasabah dapat melakukan pencairan pokok dan imbal hasil setelah jatuh tempo atau sesuai ketentuan pencairan DBIC.
                                </p>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="p-3 border rounded-3 bg-light-subtle h-100">
                                <div class="d-flex align-items-center gap-2 mb-2">
                                    <span class="avatar avatar-xs bg-info-transparent text-info rounded-circle">
                                        <i class="ri-line-chart-line fs-14"></i>
                                    </span>
                                    <h6 class="fs-13 fw-bold mb-0 text-dark">Imbal Hasil & Distribusi</h6>
                                </div>
                                <p class="fs-12 text-muted mb-0">
                                    Indikasi hasil <strong class="text-success">{{ $product->expected_return }}</strong> bertipe <strong class="text-dark">{{ $product->return_type ?? 'Fixed rate' }}</strong>, dihitung proporsional terhadap nilai penempatan dana nasabah.
                                </p>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="p-3 border rounded-3 bg-light-subtle h-100">
                                <div class="d-flex align-items-center gap-2 mb-2">
                                    <span class="avatar avatar-xs bg-warning-transparent text-warning rounded-circle">
                                        <i class="ri-coin-line fs-14"></i>
                                    </span>
                                    <h6 class="fs-13 fw-bold mb-0 text-dark">Modal Investasi Awal</h6>
                                </div>
                                <p class="fs-12 text-muted mb-0">
                                    Investasi dapat dimulai dari minimal <strong class="text-dark">Rp {{ number_format($product->min_investment, 0, ',', '.') }}</strong>, memberikan akses fleksibel bagi investor pemula hingga institusional.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card 3: Skema Penempatan (Nominal vs Indikasi Hasil) -->
            <div class="card custom-card detail-spec-card mb-4 shadow-sm">
                <div class="card-header justify-content-between align-items-center">
                    <div class="card-title d-flex align-items-center gap-2 mb-0">
                        <span class="avatar avatar-sm bg-success-transparent text-success rounded-circle">
                            <i class="ri-table-line fs-16"></i>
                        </span>
                        <div>
                            <h6 class="fw-bold mb-0 text-dark fs-14">Skema Penempatan Investasi</h6>
                            <small class="text-muted fs-11">Simulasi nominal penempatan dan estimasi imbal hasil dana</small>
                        </div>
                    </div>
                    <span class="badge bg-success-transparent text-success fw-semibold">
                        <i class="ri-funds-box-line me-1"></i>Estimasi Imbal Hasil
                    </span>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table scheme-table mb-0 align-middle">
                            <thead>
                                <tr>
                                    <th style="width: 35%;">Nominal Penempatan</th>
                                    <th style="width: 30%;">Indikasi Hasil Dana</th>
                                    <th style="width: 35%;">Total Estimasi Diterima</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(!empty($product->placement_schemes))
                                    @foreach($product->placement_schemes as $scheme)
                                        @php
                                            $nominal = (float) ($scheme['nominal'] ?? 0);
                                            $indikasi = (float) ($scheme['indication'] ?? $scheme['indikasi'] ?? 0);
                                            $totalEst = $nominal + $indikasi;
                                            $persen = $nominal > 0 ? round(($indikasi / $nominal) * 100, 2) : 0;
                                        @endphp
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center gap-2">
                                                    <span class="avatar avatar-xs bg-primary-transparent text-primary rounded-circle">
                                                        <i class="ri-wallet-3-line fs-12"></i>
                                                    </span>
                                                    <span class="fw-bold text-dark fs-14">
                                                        Rp {{ number_format($nominal, 0, ',', '.') }}
                                                    </span>
                                                </div>
                                            </td>
                                            <td>
                                                <span class="badge bg-success-transparent text-success fw-bold fs-13 px-2 py-1">
                                                    + Rp {{ number_format($indikasi, 0, ',', '.') }}
                                                </span>
                                                <small class="text-muted d-block mt-1 fs-11">Estimasi {{ $persen }}%</small>
                                            </td>
                                            <td>
                                                <span class="fw-bold text-dark fs-14">
                                                    Rp {{ number_format($totalEst, 0, ',', '.') }}
                                                </span>
                                                <small class="text-muted d-block mt-1 fs-11">Pokok + Imbal Hasil</small>
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td colspan="3" class="text-center text-muted py-4">
                                            <i class="ri-information-line fs-24 d-block mb-1 text-muted"></i>
                                            Tidak ada skema penempatan khusus. Imbal hasil dihitung prorata sesuai indikasi return ({{ $product->expected_return }}).
                                        </td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer bg-light border-top py-2 px-3">
                    <small class="text-muted fs-11 d-flex align-items-center gap-1">
                        <i class="ri-information-line text-primary"></i>
                        Perhitungan di atas merupakan simulasi indikatif berdasarkan kesepakatan jangka waktu penempatan dana ({{ $product->tenor }}).
                    </small>
                </div>
            </div>

            <!-- Card 4: Disclaimer Regulasi & OJK -->
            @if($product->disclaimer)
                <div class="card custom-card detail-spec-card bg-light-subtle border mb-4">
                    <div class="card-body p-3">
                        <div class="d-flex align-items-start gap-2">
                            <span class="avatar avatar-sm bg-warning-transparent text-warning rounded-circle flex-shrink-0 mt-1">
                                <i class="ri-shield-alert-line fs-16"></i>
                            </span>
                            <div>
                                <h6 class="fs-12 fw-bold text-uppercase text-muted mb-1">Disclaimer Regulasi & Kepatuhan OJK</h6>
                                <p class="fs-12 text-secondary mb-0" style="line-height: 1.6;">
                                    {{ $product->disclaimer }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

        </div>

        <!-- Right Column: Product Cover, Info, Benefits & Actions -->
        <div class="col-xl-4">

            <!-- Card 1: Cover & Visual Produk -->
            <div class="card custom-card detail-spec-card mb-4 shadow-sm">
                <div class="card-header">
                    <div class="card-title fs-14 fw-bold text-dark">
                        <i class="ri-image-line text-primary me-2"></i>Cover Visual Kartu Produk
                    </div>
                </div>
                <div class="card-body p-3">
                    <div class="product-cover-wrapper mb-3">
                        @if($product->cover_image_url)
                            <img src="{{ $product->cover_image_url }}" alt="{{ $product->name }}" class="product-cover-img">
                        @else
                            <div class="d-flex flex-column align-items-center justify-content-center text-muted" style="height: 200px;">
                                <i class="ri-funds-box-line fs-40 mb-2"></i>
                                <span class="fs-12">Belum ada cover foto</span>
                            </div>
                        @endif
                    </div>

                    <div class="d-flex justify-content-between align-items-center p-2 rounded bg-light border">
                        <span class="fs-12 text-muted">Status Tayang:</span>
                        @if($product->is_active)
                            <span class="badge bg-success-transparent text-success fw-bold">
                                <i class="ri-check-line me-1"></i>Aktif di Mobile
                            </span>
                        @else
                            <span class="badge bg-secondary-transparent text-secondary fw-bold">Nonaktif</span>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Card 2: Informasi Spesifikasi Lengkap -->
            <div class="card custom-card detail-spec-card mb-4 shadow-sm">
                <div class="card-header">
                    <div class="card-title fs-14 fw-bold text-dark">
                        <i class="ri-information-line text-info me-2"></i>Spesifikasi Instrumen
                    </div>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush fs-13">
                        <li class="list-group-item d-flex justify-content-between align-items-center py-2 px-3">
                            <span class="text-muted">Kategori Produk</span>
                            <span class="badge bg-primary-transparent text-primary fw-semibold">{{ $product->category }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center py-2 px-3">
                            <span class="text-muted">Kode Produk</span>
                            <span class="font-monospace fw-bold text-dark">{{ $product->code ?: '-' }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center py-2 px-3">
                            <span class="text-muted">Harga Sekarang (NAV)</span>
                            <span class="fw-bold text-success fs-14">
                                Rp {{ number_format($currentNav, 2, ',', '.') }}
                            </span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center py-2 px-3">
                            <span class="text-muted">Dana Kelolaan (AUM)</span>
                            <span class="fw-bold text-dark">
                                Rp {{ number_format($currentAum, 0, ',', '.') }}
                            </span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center py-2 px-3">
                            <span class="text-muted">Investor Aktif</span>
                            <span class="fw-bold text-dark">
                                {{ $activeInvestorsCount }} Akun ({{ number_format($activeUnits, 2, ',', '.') }} Unit)
                            </span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center py-2 px-3">
                            <span class="text-muted">Tingkat Risiko</span>
                            <span class="badge bg-info-transparent text-info fw-semibold">{{ $product->risk_level }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center py-2 px-3">
                            <span class="text-muted">Minimal Investasi</span>
                            <span class="fw-bold text-dark">
                                Rp {{ number_format($product->min_investment, 0, ',', '.') }}
                            </span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center py-2 px-3">
                            <span class="text-muted">Urutan Tampil (Sort)</span>
                            <span class="badge bg-light text-dark border">Urutan ke-{{ $product->sort_order }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center py-2 px-3">
                            <span class="text-muted">Terakhir Diperbarui</span>
                            <span class="text-muted fs-12">{{ $product->updated_at ? $product->updated_at->format('d M Y, H:i') : '-' }}</span>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Card 3: Keunggulan Utama (Benefits) -->
            <div class="card custom-card detail-spec-card mb-4 shadow-sm">
                <div class="card-header justify-content-between align-items-center">
                    <div class="card-title fs-14 fw-bold text-dark mb-0">
                        <i class="ri-shield-star-line text-warning me-2"></i>Keunggulan Utama Produk
                    </div>
                    @if(!empty($product->benefits))
                        <span class="badge bg-light text-muted border fs-11">{{ count($product->benefits) }} Poin</span>
                    @endif
                </div>
                <div class="card-body p-3">
                    @if(!empty($product->benefits))
                        <div class="benefits-list">
                            @foreach($product->benefits as $benefit)
                                <div class="benefit-item d-flex align-items-start gap-2">
                                    <span class="avatar avatar-xs bg-success-transparent text-success rounded-circle flex-shrink-0 mt-1">
                                        <i class="ri-check-line fs-12"></i>
                                    </span>
                                    <span class="fs-13 text-dark fw-medium">{{ $benefit }}</span>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-3 text-muted">
                            <i class="ri-information-line fs-20 d-block mb-1"></i>
                            <span class="fs-12">Belum ada poin keunggulan khusus yang dicantumkan.</span>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Card 4: Panel Tindakan Admin & Restriksi Penghapusan Produk -->
            <div class="card custom-card detail-spec-card mb-4 bg-light border shadow-sm">
                <div class="card-body p-3">
                    <h6 class="fs-12 fw-bold text-uppercase text-muted mb-3">
                        <i class="ri-shield-keyhole-line me-1"></i>Tindakan Admin & Keamanan
                    </h6>
                    <div class="d-grid gap-2">
                        <a href="{{ route('investment-products.edit', $product->id) }}" class="btn btn-primary d-inline-flex align-items-center justify-content-center gap-1 shadow-sm">
                            <i class="ri-edit-line fs-14"></i> Edit Spesifikasi Produk
                        </a>
                        <a href="{{ route('investment-products.index') }}" class="btn btn-outline-secondary d-inline-flex align-items-center justify-content-center gap-1">
                            <i class="ri-list-check fs-14"></i> Kembali ke Daftar Produk
                        </a>

                        <hr class="my-2 border-secondary-subtle">

                        <!-- Blok Penghapusan Produk dengan Restriksi Dana Aktif -->
                        @if(!$canDelete)
                            <div class="p-2-5 rounded-3 bg-warning-transparent border border-warning text-start mb-1">
                                <div class="d-flex align-items-center gap-2 mb-1">
                                    <i class="ri-lock-2-line fs-16 text-warning"></i>
                                    <strong class="text-dark fs-12">Penghapusan Dilindungi</strong>
                                </div>
                                <p class="fs-11 text-muted mb-0" style="line-height: 1.5;">
                                    Produk ini tidak dapat dihapus karena masih memiliki dana kelolaan aktif (<strong>Rp {{ number_format($currentAum, 0, ',', '.') }}</strong>) atau transaksi investor aktif.
                                </p>
                            </div>
                            <button type="button" class="btn btn-outline-danger w-100 d-inline-flex align-items-center justify-content-center gap-1 opacity-75" id="btn-show-delete-restricted">
                                <i class="ri-lock-line fs-14"></i> Hapus Produk (Terkunci)
                            </button>
                        @else
                            <button type="button" class="btn btn-outline-danger w-100 d-inline-flex align-items-center justify-content-center gap-1" id="btn-show-delete-allowed">
                                <i class="ri-delete-bin-line fs-14"></i> Hapus Produk
                            </button>
                            <form id="form-delete-product" action="{{ route('investment-products.destroy', $product->id) }}" method="POST" style="display: none;">
                                @csrf
                                @method('DELETE')
                            </form>
                        @endif
                    </div>
                </div>
            </div>

        </div>

    </div>

@endsection

@section('scripts')
    <script src="{{ asset('build/assets/libs/apexcharts/apexcharts.min.js') }}"></script>
    <script src="{{ asset('build/assets/libs/sweetalert2/sweetalert2.all.min.js') }}"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Data time-series kenaikan harga per unit dari backend
            const navHistoryData = @json($navHistory);
            const currentPeriod = '1M';

            const formatRupiah = (val) => {
                if (val === null || val === undefined) return 'Rp 0';
                return 'Rp ' + Number(val).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
            };

            // Format data untuk series ApexCharts
            const getSeriesForPeriod = (period) => {
                const points = navHistoryData[period] || navHistoryData['1M'] || [];
                return [{
                    name: 'Harga per Unit (NAV)',
                    data: points.map(p => ({
                        x: p.date,
                        y: p.nav
                    }))
                }];
            };

            const initialSeries = getSeriesForPeriod(currentPeriod);

            // Opsi ApexCharts Area Performance Chart
            const chartOptions = {
                series: initialSeries,
                chart: {
                    type: 'area',
                    height: 310,
                    fontFamily: 'inherit',
                    toolbar: {
                        show: false
                    },
                    zoom: {
                        enabled: false
                    },
                    animations: {
                        enabled: true,
                        easing: 'easeinout',
                        speed: 500
                    }
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    curve: 'smooth',
                    width: 2.5,
                    colors: ['#047857'] // DBIC Emerald Green
                },
                fill: {
                    type: 'gradient',
                    gradient: {
                        shadeIntensity: 1,
                        opacityFrom: 0.45,
                        opacityTo: 0.05,
                        stops: [0, 95, 100],
                        colorStops: [
                            {
                                offset: 0,
                                color: '#10b981',
                                opacity: 0.4
                            },
                            {
                                offset: 100,
                                color: '#047857',
                                opacity: 0.02
                            }
                        ]
                    }
                },
                grid: {
                    borderColor: '#f1f5f9',
                    strokeDashArray: 3,
                    padding: {
                        top: 10,
                        right: 15,
                        bottom: 0,
                        left: 10
                    }
                },
                xaxis: {
                    type: 'datetime',
                    labels: {
                        style: {
                            colors: '#64748b',
                            fontSize: '11px'
                        },
                        format: 'dd MMM'
                    },
                    axisBorder: {
                        show: false
                    },
                    axisTicks: {
                        show: false
                    }
                },
                yaxis: {
                    labels: {
                        style: {
                            colors: '#64748b',
                            fontSize: '11px'
                        },
                        formatter: function (val) {
                            return 'Rp ' + Number(val).toLocaleString('id-ID');
                        }
                    }
                },
                tooltip: {
                    theme: 'light',
                    x: {
                        format: 'dd MMMM yyyy'
                    },
                    y: {
                        formatter: function (val) {
                            return formatRupiah(val) + ' / Unit';
                        }
                    }
                },
                markers: {
                    size: 0,
                    hover: {
                        size: 5,
                        sizeOffset: 3
                    }
                }
            };

            const chartElement = document.querySelector("#chart-product-nav-history");
            let navChart = null;
            if (chartElement) {
                navChart = new ApexCharts(chartElement, chartOptions);
                navChart.render();
            }

            // Timeframe button switcher
            const timeframeButtons = document.querySelectorAll('.timeframe-pill-btn');
            timeframeButtons.forEach(button => {
                button.addEventListener('click', function () {
                    timeframeButtons.forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');

                    const period = this.getAttribute('data-period');
                    if (navChart) {
                        const newSeries = getSeriesForPeriod(period);
                        navChart.updateSeries(newSeries, true);

                        // Update juga format tanggal jika '1Y' atau 'ALL'
                        if (period === '1Y' || period === 'ALL') {
                            navChart.updateOptions({
                                xaxis: {
                                    labels: {
                                        format: 'MMM yyyy'
                                    }
                                }
                            });
                        } else {
                            navChart.updateOptions({
                                xaxis: {
                                    labels: {
                                        format: 'dd MMM'
                                    }
                                }
                            });
                        }
                    }
                });
            });

            // Handle Klik Tombol Hapus Terestriksi
            const btnRestricted = document.getElementById('btn-show-delete-restricted');
            if (btnRestricted) {
                btnRestricted.addEventListener('click', function () {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Penghapusan Dibatasi',
                        html: `
                            <div class="text-start">
                                <p class="mb-2">Produk <strong>{{ addslashes($product->name) }}</strong> tidak dapat dihapus saat ini.</p>
                                <div class="alert alert-warning-transparent border border-warning fs-12 mb-3">
                                    <i class="ri-shield-keyhole-line me-1 fw-bold"></i>
                                    <strong>Alasan Proteksi Keamanan:</strong><br>
                                    {{ addslashes($restrictionMessage ?: 'Masih terdapat dana kelolaan aktif atau transaksi investor.') }}
                                </div>
                                <p class="text-muted fs-12 mb-0">
                                    <i class="ri-information-line me-1 text-primary"></i>
                                    Demi kepatuhan audit dan perlindungan aset pemegang unit, produk dengan dana aktif tidak dapat dihapus. Anda dapat <strong>menonaktifkan status tayang</strong> produk melalui menu Edit jika tidak ingin menerima transaksi baru.
                                </p>
                            </div>
                        `,
                        confirmButtonText: 'Saya Mengerti',
                        confirmButtonColor: '#0f3625'
                    });
                });
            }

            // Handle Klik Tombol Hapus yang Diizinkan (AUM 0 dan 0 order)
            const btnAllowed = document.getElementById('btn-show-delete-allowed');
            if (btnAllowed) {
                btnAllowed.addEventListener('click', function () {
                    Swal.fire({
                        title: 'Hapus Produk?',
                        text: 'Apakah Anda yakin ingin menghapus produk "{{ addslashes($product->name) }}"? Produk ini tidak memiliki dana kelolaan. Tindakan ini tidak dapat dibatalkan.',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#dc3545',
                        cancelButtonColor: '#6c757d',
                        confirmButtonText: 'Ya, Hapus Sekarang',
                        cancelButtonText: 'Batal'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            document.getElementById('form-delete-product').submit();
                        }
                    });
                });
            }
        });
    </script>
@endsection