@extends('layouts.app')

@section('title', $pedagang->name . ' - Toko Sayur')

@section('content')
<style>
    :root {
        --ink: #212B22;
        --ink-soft: #55604F;
        --paper: #F7F1E3;
        --paper-dark: #EDE1C1;
        --paper-line: #DECEA0;
        --leaf: #3E6B4B;
        --leaf-dark: #24402D;
        --chili: #BD3F0F;
        --turmeric: #D69A2D;
    }

    .pib-detail-card {
        background: #FDFBF5;
        border: 1px solid var(--paper-line);
        border-radius: 20px;
        box-shadow: 0 8px 25px -10px rgba(33, 43, 34, 0.1);
    }

    .qty-btn {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        background: #EDE1C1;
        color: var(--ink);
        border: none;
        font-size: 15px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.15s;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .qty-btn:hover {
        background: var(--leaf);
        color: white;
    }
    .qty-input {
        width: 38px;
        text-align: center;
        border: none;
        font-weight: 700;
        font-size: 13px;
        background: transparent;
        color: var(--ink);
    }
    .qty-input:focus {
        outline: none;
    }
    .btn-buy {
        background: var(--turmeric);
        color: var(--ink);
        padding: 6px 14px;
        border-radius: 999px;
        font-weight: 700;
        font-size: 12px;
        transition: all 0.2s;
        border: none;
        cursor: pointer;
    }
    .btn-buy:hover {
        background: #b88322;
        transform: translateY(-1px);
    }
    #map {
        width: 100%;
        height: 280px;
        border-radius: 14px;
        z-index: 1;
        border: 1px solid var(--paper-line);
    }
    .map-container {
        position: relative;
        width: 100%;
        height: 280px;
    }
    .info-label {
        font-size: 11px;
        color: var(--ink-soft);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .info-value {
        font-size: 13px;
        color: var(--ink);
        font-weight: 700;
    }
    .shop-avatar {
        width: 80px;
        height: 80px;
        border-radius: 20px;
        object-fit: cover;
        border: 2px solid var(--paper-line);
    }
    .shop-avatar-placeholder {
        width: 80px;
        height: 80px;
        border-radius: 20px;
        background: #EDE1C1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36px;
        border: 2px solid var(--paper-line);
    }
    .badge-status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #DCEAE0;
        color: #24402D;
        padding: 3px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 700;
        border: 1px solid rgba(62, 107, 75, 0.3);
    }
    .badge-status .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--leaf);
        display: inline-block;
        animation: pulse 2s infinite;
    }
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.4; }
    }
    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 10px;
        margin-top: 12px;
    }
    .info-item {
        background: #F4EFE6;
        padding: 8px 12px;
        border-radius: 12px;
        border: 1px solid var(--paper-line);
    }
    .update-badge {
        font-size: 11px;
        color: var(--ink-soft);
        background: #EDE1C1;
        padding: 3px 10px;
        border-radius: 12px;
        font-weight: 600;
        display: inline-block;
    }
    .chart-container {
        position: relative;
        height: 200px;
    }
    .trend-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 10px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 700;
    }
    .trend-up {
        background: #F7E1D9;
        color: #BD3F0F;
        border: 1px solid rgba(189, 63, 15, 0.3);
    }
    .trend-down {
        background: #DCEAE0;
        color: #24402D;
        border: 1px solid rgba(62, 107, 75, 0.3);
    }
    .trend-stable {
        background: #EDE1C1;
        color: var(--ink-soft);
        border: 1px solid var(--paper-line);
    }
    .no-image-placeholder {
        width: 56px;
        height: 56px;
        background: #EDE1C1;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ink-soft);
        font-size: 10px;
        font-weight: 600;
    }
</style>

<div class="max-w-6xl mx-auto py-2">
    <!-- BACK BUTTON -->
    <div class="mb-5">
        <a href="{{ route('pembeli.dashboard') }}" class="text-xs font-bold text-[#3E6B4B] hover:text-[#24402D] px-3.5 py-1.5 rounded-full border border-[#DECEA0] bg-[#FDFBF5] hover:bg-[#EDE1C1] transition inline-flex items-center gap-1.5">
            ← Kembali ke Katalog Toko
        </a>
    </div>

    <!-- SHOP HEADER -->
    <div class="pib-detail-card p-6 sm:p-7 mb-6">
        <div class="flex flex-col md:flex-row items-start md:items-center gap-5">
            <div>
                <img src="{{ $pedagang->foto_toko_url ?: route('gambar.toko', ['filename' => 'default.jpg'], false) }}" 
                     alt="{{ $pedagang->nama_toko ?? $pedagang->name }}" 
                     class="shop-avatar"
                     onerror="this.onerror=null; this.src='{{ route('gambar.toko', ['filename' => 'default.jpg'], false) }}';">
            </div>

            <div class="flex-1">
                <div class="flex flex-wrap items-center gap-2.5">
                    <h1 class="text-xl sm:text-2xl font-bold text-[#212B22]">{{ $pedagang->nama_toko ?? $pedagang->name }}</h1>
                    @if($pedagang->isTokoBuka())
                    <span class="badge-status">
                        <span class="dot"></span>
                        Buka
                    </span>
                    @else
                    <span class="badge-status" style="background:#FEE2E2; color:#991B1B; border-color:rgba(185,28,28,0.3);">
                        <span class="dot" style="background:#DC2626; animation:none;"></span>
                        Tutup
                    </span>
                    @endif
                    <span class="text-xs font-bold text-[#212B22] bg-[#EDE1C1] px-2.5 py-0.5 rounded-full border border-[#DECEA0]">
                        {{ $prices->count() }} Komoditas
                    </span>
                    @php
                        $lastUpdate = $prices->first()?->tanggal;
                    @endphp
                    @if($lastUpdate)
                    <span class="update-badge">
                        📅 Update: {{ \Carbon\Carbon::parse($lastUpdate)->format('d/m/Y') }}
                    </span>
                    @endif
                </div>

                <p class="text-[#55604F] mt-1 text-xs sm:text-sm flex items-center gap-1.5">
                    <span>📍</span>
                    {{ $pedagang->alamat_toko ?? 'Pasar Induk Banjarnegara' }}
                </p>

                <div class="info-grid">
                    @if($pedagang->nomor_los)
                    <div class="info-item">
                        <div class="info-label">Nomor Los</div>
                        <div class="info-value">{{ $pedagang->nomor_los }}</div>
                    </div>
                    @endif

                    @if($pedagang->blok)
                    <div class="info-item">
                        <div class="info-label">Blok Pasar</div>
                        <div class="info-value">{{ $pedagang->blok }}</div>
                    </div>
                    @endif

                    @if($pedagang->latitude && $pedagang->longitude)
                    <div class="info-item">
                        <div class="info-label">Koordinat Lokasi</div>
                        <div class="info-value text-xs font-mono">
                            {{ $pedagang->latitude }}, {{ $pedagang->longitude }}
                        </div>
                    </div>
                    @endif

                    <div class="info-item">
                        <div class="info-label">Nama Pedagang</div>
                        <div class="info-value">{{ $pedagang->name }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- MAP & CHART SECTION -->
    @php
        $trend = 'tetap';
        $trendIcon = '➡️';
        $trendClass = 'trend-stable';
        $trendText = 'Stabil';
        
        if (count($chartPrices ?? []) >= 2) {
            $first = $chartPrices[0];
            $last = $chartPrices[count($chartPrices) - 1];
            
            if ($last > $first) {
                $trend = 'naik';
                $trendIcon = '📈';
                $trendClass = 'trend-up';
                $trendText = 'Naik';
            } elseif ($last < $first) {
                $trend = 'turun';
                $trendIcon = '📉';
                $trendClass = 'trend-down';
                $trendText = 'Turun';
            }
        }
    @endphp

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <!-- MAP -->
        <div class="pib-detail-card p-5 sm:p-6">
            <h2 class="font-bold text-base text-[#212B22] mb-3 flex items-center gap-2">
                <span>📍</span> Lokasi Toko di Pasar
            </h2>
            @if($pedagang->latitude && $pedagang->longitude)
                <div class="rounded-2xl overflow-hidden border border-[#DECEA0] shadow-sm" style="height: 240px; background: #EDE1C1;">
                    <iframe 
                        width="100%" 
                        height="100%" 
                        frameborder="0" 
                        scrolling="no" 
                        marginheight="0" 
                        marginwidth="0" 
                        src="https://maps.google.com/maps?q={{ $pedagang->latitude }},{{ $pedagang->longitude }}&hl=id&z=17&output=embed"
                        style="border:0;" 
                        allowfullscreen="" 
                        loading="lazy" 
                        referrerpolicy="no-referrer-when-downgrade">
                    </iframe>
                </div>
                <div class="flex justify-between items-center mt-2.5">
                    <p class="text-xs text-[#55604F]">
                        <span class="font-bold">Koordinat:</span> {{ $pedagang->latitude }}, {{ $pedagang->longitude }}
                    </p>
                    <a href="https://www.google.com/maps?q={{ $pedagang->latitude }},{{ $pedagang->longitude }}" 
                       target="_blank"
                       class="text-xs text-[#3E6B4B] font-bold hover:underline inline-flex items-center gap-1">
                        <span>🗺️</span> Buka di Google Maps →
                    </a>
                </div>
            @else
                <div class="w-full h-64 bg-[#F4EFE6] rounded-xl border border-[#DECEA0] flex items-center justify-center text-[#55604F]">
                    <div class="text-center">
                        <div class="text-4xl mb-2">🗺️</div>
                        <p class="font-bold text-xs">Lokasi toko belum diset</p>
                    </div>
                </div>
            @endif
        </div>

        <!-- CHART -->
        <div class="pib-detail-card p-5 sm:p-6">
            <div class="flex justify-between items-center mb-3">
                <h2 class="font-bold text-base text-[#212B22] flex items-center gap-2">
                    <span>📈</span> Tren Harga Komoditas
                </h2>
                <span class="text-xs text-[#55604F] font-semibold">30 hari terakhir</span>
            </div>

            <div class="mb-3">
                <select id="filterKomoditasChart" class="w-full bg-white border border-[#DECEA0] rounded-xl px-3 py-2 text-xs text-[#212B22] focus:outline-none focus:ring-2 focus:ring-[#3E6B4B]" onchange="window.location.href='?komoditas_id='+this.value">
                    @foreach($prices as $price)
                    <option value="{{ $price->commodity_id }}" {{ ($selectedCommodityId ?? '') == $price->commodity_id ? 'selected' : '' }}>
                        {{ $price->commodity->nama_komoditas }}
                    </option>
                    @endforeach
                </select>
            </div>

            @if(count($chartPrices ?? []) > 0)
                <div class="grid grid-cols-3 gap-2.5 mb-3">
                    <div class="bg-[#F4EFE6] rounded-xl p-2.5 text-center border border-[#DECEA0]">
                        <div class="text-[11px] text-[#55604F] font-bold">Harga Terkini</div>
                        <div class="text-sm font-bold text-[#3E6B4B] mt-0.5">
                            Rp {{ number_format($hargaTerbaru ?? 0, 0, ',', '.') }}
                        </div>
                    </div>
                    <div class="bg-[#F4EFE6] rounded-xl p-2.5 text-center border border-[#DECEA0]">
                        <div class="text-[11px] text-[#55604F] font-bold">Kondisi Tren</div>
                        <div class="text-xs font-bold {{ $trendClass }} trend-badge justify-center mt-1">
                            {{ $trendIcon }} {{ $trendText }}
                        </div>
                    </div>
                    <div class="bg-[#F4EFE6] rounded-xl p-2.5 text-center border border-[#DECEA0]">
                        <div class="text-[11px] text-[#55604F] font-bold">Total Sampel</div>
                        <div class="text-sm font-bold text-[#212B22] mt-0.5">{{ count($chartPrices) }} hari</div>
                    </div>
                </div>

                <div class="chart-container">
                    <canvas id="hargaChart"></canvas>
                </div>
            @else
                <div class="w-full h-56 bg-[#F4EFE6] rounded-xl border border-[#DECEA0] flex items-center justify-center text-[#55604F]">
                    <div class="text-center">
                        <div class="text-4xl mb-2">📊</div>
                        <p class="font-bold text-xs">Belum ada riwayat harga</p>
                    </div>
                </div>
            @endif
        </div>
    </div>

    @if(!$pedagang->isTokoBuka())
    <div class="mb-6 p-4 sm:p-5 rounded-2xl bg-rose-50 border border-rose-200 text-rose-900 flex items-start gap-3.5 shadow-sm">
        <span class="text-2xl flex-shrink-0">⛔</span>
        <div>
            <div class="font-bold text-sm sm:text-base text-rose-900">Lapak / Toko Ini Sedang Tutup</div>
            <p class="text-xs sm:text-sm text-rose-700/90 mt-1 leading-relaxed">
                Pedagang sedang tidak melayani penjualan atau telah menyelesaikan operasional hari ini. Anda tetap dapat melihat katalog dan grafik harga, namun fitur pemesanan dan tambah keranjang dinonaktifkan sementara hingga lapak dibuka kembali.
            </p>
        </div>
    </div>
    @endif

    <!-- DAFTAR KOMODITAS TOKO -->
    <div class="pib-detail-card p-6 sm:p-7">
        <div class="flex items-center justify-between mb-4 pb-3 border-b border-[#DECEA0]/60">
            <h2 class="font-bold text-base text-[#212B22] flex items-center gap-2">
                <span>📋</span> Daftar Sayuran di Toko Ini
            </h2>
            <span class="text-xs text-[#55604F] font-bold bg-[#EDE1C1] px-2.5 py-0.5 rounded-full border border-[#DECEA0]">
                {{ $prices->count() }} komoditas tersedia
            </span>
        </div>

        @if($prices->count() > 0)
        <!-- Mobile Cards View -->
        <div class="space-y-3.5 sm:hidden">
            @foreach($prices as $price)
            @php
                $isFair = \App\Services\PriceAnalysisService::isPriceFair(
                    $price->commodity_id, 
                    $pedagang->id, 
                    $price->harga
                );
            @endphp
            <div class="bg-white border border-[#DECEA0] rounded-2xl p-4 shadow-sm">
                <div class="flex items-start gap-3.5 mb-3">
                    <img src="{{ $price->gambar_url }}" 
                         alt="{{ $price->commodity->nama_komoditas }}"
                         class="w-16 h-16 object-cover rounded-xl border border-[#DECEA0] flex-shrink-0 cursor-pointer hover:scale-105 transition"
                         onclick="window.open(this.src)"
                         onerror="this.onerror=null; this.src='{{ $price->commodity?->gambar_url }}';">

                    <div class="flex-1">
                        <div class="flex justify-between items-start">
                            <h3 class="font-bold text-[#212B22] text-base">{{ $price->commodity->nama_komoditas }}</h3>
                            @if($isFair === true)
                                <span class="bg-[#DCEAE0] text-[#24402D] px-2.5 py-0.5 rounded-full text-[10px] font-bold border border-[#3E6B4B]/30">✅ Wajar</span>
                            @elseif($isFair === false)
                                <span class="bg-[#F7E1D9] text-[#BD3F0F] px-2.5 py-0.5 rounded-full text-[10px] font-bold border border-[#BD3F0F]/30">⚠️ Fluktuatif</span>
                            @else
                                <span class="bg-[#EDE1C1] text-[#212B22] px-2.5 py-0.5 rounded-full text-[10px] font-semibold">⏳ Cek Pasar</span>
                            @endif
                        </div>
                        <div class="text-xs text-[#55604F]">Satuan: <strong>/ {{ $price->commodity->satuan }}</strong></div>
                        <div class="text-lg font-bold text-[#3E6B4B] mt-1">
                            Rp {{ number_format($price->harga, 0, ',', '.') }}
                        </div>
                    </div>
                </div>

                <form action="{{ route('pembeli.cart.add') }}" method="POST" class="purchase-form pt-3 border-t border-[#DECEA0]/60 space-y-2.5">
                    @csrf
                    <input type="hidden" name="commodity_id" value="{{ $price->commodity_id }}">
                    <input type="hidden" name="pedagang_id" value="{{ $pedagang->id }}">
                    <input type="hidden" name="harga" value="{{ $price->harga }}">

                    <div class="flex items-center justify-between text-xs">
                        <span class="font-bold text-[#55604F] uppercase tracking-wider text-[11px]">Pilih Timbangan:</span>
                        <div class="subtotal-live font-bold text-[#3E6B4B] text-sm">
                            Rp {{ number_format($price->harga, 0, ',', '.') }}
                        </div>
                    </div>

                    <div class="flex items-center gap-2">
                        <select class="weight-select flex-1 bg-[#F4EFE6] border border-[#DECEA0] rounded-xl px-2.5 py-2 text-xs font-bold text-[#212B22] focus:outline-none focus:ring-1 focus:ring-[#3E6B4B]">
                            <option value="0.25">¼ kg (250 gram)</option>
                            <option value="0.50">½ kg (500 gram)</option>
                            <option value="0.75">¾ kg (750 gram)</option>
                            <option value="1.00" selected>1 kg (1.000 gram)</option>
                            <option value="1.50">1 ½ kg (1.500 gram)</option>
                            <option value="2.00">2 kg</option>
                            <option value="3.00">3 kg</option>
                            <option value="5.00">5 kg</option>
                            <option value="custom">Kustom (Ketik Sendiri)</option>
                        </select>

                        <div class="flex items-center bg-[#F4EFE6] rounded-xl border border-[#DECEA0] p-0.5">
                            <button type="button" class="qty-btn" data-type="down" title="Kurangi ¼ kg">−</button>
                            <input type="number" name="quantity" value="1" min="0.05" max="999" step="0.05" class="qty-input w-12 text-center text-xs font-bold bg-transparent">
                            <button type="button" class="qty-btn" data-type="up" title="Tambah ¼ kg">+</button>
                        </div>
                    </div>

                    @if($pedagang->isTokoBuka())
                    <button type="submit" class="w-full btn-buy flex items-center justify-center gap-1.5 shadow-sm py-2.5 text-xs font-bold">
                        <span>🛒</span> + Masukkan Keranjang
                    </button>
                    @else
                    <button type="button" disabled class="w-full bg-gray-200 text-gray-500 cursor-not-allowed rounded-full py-2.5 text-xs font-bold flex items-center justify-center gap-1.5 border border-gray-300">
                        <span>🔒</span> Lapak Tutup
                    </button>
                    @endif
                </form>
            </div>
            @endforeach
        </div>

        <!-- Desktop Table View -->
        <div class="hidden sm:block overflow-x-auto rounded-xl border border-[#DECEA0]">
            <table class="w-full text-left text-xs border-collapse">
                <thead>
                    <tr class="bg-[#F4EFE6] text-[#212B22] border-b border-[#DECEA0] font-bold">
                        <th class="p-3.5 text-center">Foto</th>
                        <th class="p-3.5">Nama Sayur / Komoditas</th>
                        <th class="p-3.5">Satuan</th>
                        <th class="p-3.5">Harga Dasar</th>
                        <th class="p-3.5">Indikator Deviasi</th>
                        <th class="p-3.5 text-center">Pilih Timbangan & Beli</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-[#DECEA0]/50 bg-white">
                    @foreach($prices as $price)
                    @php
                        $isFair = \App\Services\PriceAnalysisService::isPriceFair(
                            $price->commodity_id, 
                            $pedagang->id, 
                            $price->harga
                        );
                    @endphp
                    <tr class="hover:bg-[#FDFBF5] transition">
                        <td class="p-3.5 text-center">
                            <img src="{{ $price->gambar_url }}" 
                                 alt="{{ $price->commodity->nama_komoditas }}"
                                 class="w-12 h-12 object-cover rounded-xl border border-[#DECEA0] mx-auto cursor-pointer hover:scale-110 transition"
                                 onclick="window.open(this.src)"
                                 onerror="this.onerror=null; this.src='{{ $price->commodity?->gambar_url }}';">
                        </td>
                        <td class="p-3.5 font-bold text-[#212B22] text-sm">{{ $price->commodity->nama_komoditas }}</td>
                        <td class="p-3.5 text-[#55604F] font-semibold">/ {{ $price->commodity->satuan }}</td>
                        <td class="p-3.5 font-bold text-[#3E6B4B] text-sm">
                            Rp {{ number_format($price->harga, 0, ',', '.') }}
                        </td>
                        <td class="p-3.5">
                            @if($isFair === true)
                                <span class="bg-[#DCEAE0] text-[#24402D] px-2.5 py-0.5 rounded-full text-[11px] font-bold border border-[#3E6B4B]/30">✅ Wajar</span>
                            @elseif($isFair === false)
                                <span class="bg-[#F7E1D9] text-[#BD3F0F] px-2.5 py-0.5 rounded-full text-[11px] font-bold border border-[#BD3F0F]/30">⚠️ Fluktuatif</span>
                            @else
                                <span class="bg-[#EDE1C1] text-[#212B22] px-2.5 py-0.5 rounded-full text-[11px] font-semibold">⏳ Cek Pasar</span>
                            @endif
                        </td>
                        <td class="p-3.5">
                            <form action="{{ route('pembeli.cart.add') }}" method="POST" class="purchase-form flex flex-col items-center gap-1.5">
                                @csrf
                                <input type="hidden" name="commodity_id" value="{{ $price->commodity_id }}">
                                <input type="hidden" name="pedagang_id" value="{{ $pedagang->id }}">
                                <input type="hidden" name="harga" value="{{ $price->harga }}">

                                <div class="flex items-center gap-1.5">
                                    <select class="weight-select bg-[#F4EFE6] border border-[#DECEA0] rounded-xl px-2 py-1 text-xs font-bold text-[#212B22] focus:outline-none focus:ring-1 focus:ring-[#3E6B4B]">
                                        <option value="0.25">¼ kg (250 gr)</option>
                                        <option value="0.50">½ kg (500 gr)</option>
                                        <option value="0.75">¾ kg (750 gr)</option>
                                        <option value="1.00" selected>1 kg</option>
                                        <option value="1.50">1 ½ kg</option>
                                        <option value="2.00">2 kg</option>
                                        <option value="3.00">3 kg</option>
                                        <option value="5.00">5 kg</option>
                                        <option value="custom">Kustom</option>
                                    </select>

                                    <div class="flex items-center bg-[#F4EFE6] rounded-xl border border-[#DECEA0] p-0.5">
                                        <button type="button" class="qty-btn" data-type="down" title="Kurangi ¼ kg">−</button>
                                        <input type="number" name="quantity" value="1" min="0.05" max="999" step="0.05" class="qty-input w-11 text-center text-xs font-bold bg-transparent">
                                        <button type="button" class="qty-btn" data-type="up" title="Tambah ¼ kg">+</button>
                                    </div>

                                    @if($pedagang->isTokoBuka())
                                    <button type="submit" class="btn-buy flex items-center justify-center gap-1 shadow-sm px-3.5 py-1.5">
                                        <span>🛒</span> Beli
                                    </button>
                                    @else
                                    <button type="button" disabled class="bg-gray-200 text-gray-400 cursor-not-allowed rounded-full px-3 py-1.5 text-xs font-bold flex items-center gap-1 border border-gray-300" title="Lapak sedang tutup">
                                        <span>🔒</span> Tutup
                                    </button>
                                    @endif
                                </div>

                                <div class="subtotal-live text-[11px] font-bold text-[#3E6B4B]">
                                    Total: Rp {{ number_format($price->harga, 0, ',', '.') }}
                                </div>
                            </form>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @else
        <div class="text-center py-12 text-[#55604F]">
            <div class="text-4xl mb-2">🛒</div>
            <p class="font-bold text-xs">Belum ada komoditas terdaftar dari toko ini</p>
        </div>
        @endif
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const labels = @json($chartLabels ?? []);
        const prices = @json($chartPrices ?? []);
        
        const ctx = document.getElementById('hargaChart');
        
        if (ctx && labels.length > 0 && typeof Chart !== 'undefined') {
            try {
                const existingChart = Chart.getChart('hargaChart');
                if (existingChart) {
                    existingChart.destroy();
                }
                
                new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Harga (Rp)',
                            data: prices,
                            borderColor: '#2d6a4f',
                            backgroundColor: 'rgba(45, 106, 79, 0.15)',
                            fill: true,
                            tension: 0.4,
                            pointRadius: 3,
                            pointBackgroundColor: '#2d6a4f',
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: { display: false },
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        return 'Rp ' + context.raw.toLocaleString('id-ID');
                                    }
                                }
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: false,
                                ticks: {
                                    callback: function(value) {
                                        return 'Rp ' + value.toLocaleString('id-ID');
                                    }
                                }
                            },
                            x: {
                                ticks: {
                                    maxTicksLimit: 10,
                                    font: { size: 8 }
                                }
                            }
                        }
                    }
                });
            } catch(e) {
                console.log('Chart error:', e);
            }
        }
    });

    // ==========================================
    // LOGIKA PEMILIHAN TIMBANGAN & HITUNG HARGA LIVE
    // ==========================================
    document.addEventListener('DOMContentLoaded', function() {
        function formatRupiah(num) {
            return 'Rp ' + Math.round(num).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
        }

        function updateFormSubtotal(form) {
            const harga = parseFloat(form.querySelector('input[name="harga"]').value) || 0;
            const input = form.querySelector('.qty-input');
            const select = form.querySelector('.weight-select');
            const subtotalEl = form.querySelector('.subtotal-live');
            
            let qty = parseFloat(input.value);
            if (isNaN(qty) || qty < 0.05) qty = 0.05;
            
            // Sinkronkan select dropdown jika cocok dengan preset
            if (select) {
                let matched = false;
                for (let i = 0; i < select.options.length; i++) {
                    const optVal = parseFloat(select.options[i].value);
                    if (!isNaN(optVal) && Math.abs(optVal - qty) < 0.001) {
                        select.selectedIndex = i;
                        matched = true;
                        break;
                    }
                }
                if (!matched) {
                    select.value = 'custom';
                }
            }

            const subtotal = Math.round(harga * qty);
            if (subtotalEl) {
                subtotalEl.innerText = formatRupiah(subtotal);
            }
        }

        document.querySelectorAll('.purchase-form').forEach(form => {
            const select = form.querySelector('.weight-select');
            const input = form.querySelector('.qty-input');

            if (select) {
                select.addEventListener('change', function() {
                    if (this.value !== 'custom') {
                        input.value = parseFloat(this.value);
                        updateFormSubtotal(form);
                    } else {
                        input.focus();
                        input.select();
                    }
                });
            }

            if (input) {
                input.addEventListener('input', function() {
                    updateFormSubtotal(form);
                });
                input.addEventListener('change', function() {
                    let val = parseFloat(this.value);
                    if (isNaN(val) || val < 0.05) this.value = 0.25;
                    if (val > 999) this.value = 999;
                    updateFormSubtotal(form);
                });
            }

            form.querySelectorAll('.qty-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    let cur = parseFloat(input.value) || 1.0;
                    if (this.dataset.type === 'up') {
                        // Tambah 0.25 kg
                        let next = Math.round((cur + 0.25) * 100) / 100;
                        if (next <= 999) input.value = next;
                    } else {
                        // Kurangi 0.25 kg (minimal 0.25 kg)
                        let prev = Math.round((cur - 0.25) * 100) / 100;
                        if (prev >= 0.25) input.value = prev;
                        else input.value = 0.25;
                    }
                    updateFormSubtotal(form);
                });
            });

            // Initial calculation
            updateFormSubtotal(form);
        });
    });
</script>
@endpush
@endsection