@extends('layouts.app')

@section('title', 'Dashboard Pedagang - Pasar Induk Banjarnegara')

@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-dashboard-card {
        background: #FDFBF5;
        border: 1px solid var(--paper-line);
        border-radius: 20px;
        box-shadow: 0 8px 25px -10px rgba(33, 43, 34, 0.1);
        transition: all 0.25s ease;
    }

    .chalkboard-bg {
        background: #212B22;
        border: 1px solid #3a4436;
        box-shadow: 0 15px 35px -10px rgba(33, 43, 34, 0.35);
    }

    .stat-card {
        background: #FDFBF5;
        border: 1px solid var(--paper-line);
        border-radius: 16px;
        padding: 16px;
        text-align: center;
        transition: all 0.25s ease;
        box-shadow: 0 4px 15px -8px rgba(33, 43, 34, 0.08);
    }

    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px -8px rgba(33, 43, 34, 0.15);
    }

    .form-input {
        width: 100%;
        background-color: #FFFFFF;
        border: 1px solid var(--paper-line);
        border-radius: 12px;
        padding: 11px 15px;
        transition: all 0.2s ease;
        font-size: 14px;
        color: var(--ink);
    }

    .form-input:focus {
        outline: none;
        border-color: var(--leaf);
        box-shadow: 0 0 0 3px rgba(62, 107, 75, 0.15);
    }

    .form-input-lg {
        padding: 12px 16px;
        font-size: 16px;
        font-weight: 600;
    }

    .tab-active {
        border-bottom-color: var(--leaf);
        color: var(--leaf);
        background: #F4EFE6;
    }

    .tab-inactive {
        border-bottom-color: transparent;
        color: var(--ink-soft);
    }

    .order-item {
        background: #FFFFFF;
        border: 1px solid var(--paper-line);
        transition: all 0.2s;
    }

    .order-item:hover {
        border-color: var(--leaf);
        transform: translateY(-1px);
    }

    .action-card {
        transition: all 0.25s ease;
        border-radius: 18px;
        padding: 18px;
        text-align: center;
        color: var(--ink);
        background: #FDFBF5;
        border: 1px solid var(--paper-line);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        box-shadow: 0 4px 15px -8px rgba(33, 43, 34, 0.08);
    }

    .action-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 25px -8px rgba(33, 43, 34, 0.18);
        border-color: var(--leaf);
    }

    .file-upload-wrapper {
        position: relative;
        overflow: hidden;
        display: inline-block;
        width: 100%;
    }

    .file-upload-wrapper input[type=file] {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    .file-upload-label {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        border: 2px dashed var(--paper-line);
        border-radius: 12px;
        background: #FFFFFF;
        transition: all 0.2s;
        cursor: pointer;
        font-size: 13px;
        color: var(--ink-soft);
    }

    .file-upload-label:hover {
        border-color: var(--leaf);
        background: #F4EFE6;
    }

    .file-upload-label .preview-img {
        width: 48px;
        height: 48px;
        object-fit: cover;
        border-radius: 8px;
        display: none;
    }

    .file-upload-label .preview-img.show {
        display: block;
    }

    .file-upload-label .file-name {
        font-size: 12px;
        color: var(--ink);
        font-weight: 500;
        display: none;
    }

    .file-upload-label .file-name.show {
        display: inline;
    }

    @media (max-width: 768px) {
        .stat-card {
            padding: 10px;
        }
    }
</style>

<div class="max-w-7xl mx-auto py-2">
    <!-- HEADER WELCOME CHALKBOARD -->
    <div class="chalkboard-bg rounded-2xl p-6 sm:p-8 mb-8 text-[#F7F1E3] relative overflow-hidden">
        <div class="relative z-10">
            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-5">
                <div class="flex items-center gap-4">
                    <div class="w-16 h-16 sm:w-20 sm:h-20 rounded-2xl overflow-hidden bg-white/10 border-2 border-white/20 flex-shrink-0 shadow-md">
                        <img src="{{ Auth::user()->foto_toko_url ?: route('gambar.toko', ['filename' => 'default.jpg'], false) }}" 
                             alt="{{ Auth::user()->nama_toko ?? Auth::user()->name }}"
                             class="w-full h-full object-cover"
                             onerror="this.onerror=null; this.src='{{ route('gambar.toko', ['filename' => 'default.jpg'], false) }}';">
                    </div>
                    <div>
                        <div class="inline-flex items-center gap-1.5 bg-white/10 border border-white/15 backdrop-blur-sm rounded-full px-3 py-0.5 text-xs text-[#D69A2D] mb-1.5 font-bold tracking-wide uppercase">
                            <span>🌿</span> {{ Auth::user()->nama_toko ?? 'Lapak Pedagang' }}
                        </div>
                        <h1 class="text-xl sm:text-2xl font-bold tracking-tight text-white mb-0.5">
                            Selamat Datang, {{ Auth::user()->name }}!
                        </h1>
                        <p class="text-[#EDE1C1]/80 text-xs">
                            📍 {{ Auth::user()->alamat_toko ?? 'Pasar Induk Banjarnegara' }} (Los {{ Auth::user()->nomor_los ?? '-' }}, Blok {{ Auth::user()->blok ?? '-' }})
                        </p>
                    </div>
                </div>
                <div class="flex flex-col sm:flex-row items-center gap-3 self-stretch sm:self-auto">
                    <!-- Toggle Switch Status Toko (Buka/Tutup) -->
                    <div class="bg-white/10 border border-white/15 backdrop-blur-sm rounded-xl px-4 py-2.5 flex items-center justify-between sm:justify-start gap-4 w-full sm:w-auto shadow-inner">
                        <div>
                            <div class="text-[10px] text-[#D69A2D] font-bold uppercase tracking-wider">Status Lapak</div>
                            <div id="tokoStatusDisplay" class="font-bold text-sm text-white flex items-center gap-1.5 mt-0.5">
                                <span id="tokoStatusDot" class="w-2.5 h-2.5 rounded-full {{ Auth::user()->isTokoBuka() ? 'bg-emerald-400 animate-pulse' : 'bg-rose-400' }}"></span>
                                <span id="tokoStatusLabel">{{ Auth::user()->isTokoBuka() ? 'Buka' : 'Tutup' }}</span>
                            </div>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer ml-auto" title="Klik untuk Buka/Tutup Toko">
                            <input type="checkbox" id="tokoToggleSwitch" class="sr-only peer" {{ Auth::user()->isTokoBuka() ? 'checked' : '' }}>
                            <div class="w-11 h-6 bg-rose-500/80 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-500 shadow-sm"></div>
                        </label>
                    </div>

                    <!-- Tanggal Hari Ini -->
                    <div class="bg-white/10 border border-white/15 backdrop-blur-sm rounded-xl px-4 py-2 text-center w-full sm:w-auto">
                        <div class="text-[11px] text-[#D69A2D] font-bold uppercase tracking-wider">Tanggal Hari Ini</div>
                        <div class="font-bold text-sm text-[#F7F1E3]">{{ \Carbon\Carbon::now()->locale('id')->isoFormat('dddd, D MMMM Y') }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- STATISTIK CEPAT HANGING TAGS -->
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4 mb-8">
        <div class="stat-card">
            <div class="text-2xl sm:text-3xl font-bold text-[#3E6B4B]">{{ $commodities->count() }}</div>
            <div class="text-xs text-[#55604F] mt-1 font-medium">Daftar Komoditas</div>
        </div>
        <div class="stat-card">
            <div class="text-2xl sm:text-3xl font-bold text-[#212B22]">{{ $totalDataCount ?? 0 }}</div>
            <div class="text-xs text-[#55604F] mt-1 font-medium">Total Input Harga</div>
        </div>
        <div class="stat-card">
            <div class="text-2xl sm:text-3xl font-bold text-[#BD3F0F]">{{ $pendingOrders->count() ?? 0 }}</div>
            <div class="text-xs text-[#55604F] mt-1 font-medium">Pesanan Masuk</div>
        </div>
        <div class="stat-card">
            <div class="text-2xl sm:text-3xl font-bold text-[#D69A2D]">{{ $recentInputs->count() ?? 0 }}</div>
            <div class="text-xs text-[#55604F] mt-1 font-medium">Input Terakhir</div>
        </div>
    </div>

    <!-- ACTION BUTTONS -->
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
        <a href="{{ route('pedagang.verify.index') }}" class="action-card group">
            <div class="flex items-center gap-3.5 text-left">
                <div class="w-12 h-12 rounded-xl bg-[#DCEAE0] text-[#24402D] flex items-center justify-center flex-shrink-0">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
                    </svg>
                </div>
                <div>
                    <div class="font-bold text-sm text-[#212B22] group-hover:text-[#3E6B4B] transition">Scan Barcode Pesanan</div>
                    <div class="text-xs text-[#55604F] mt-0.5">Konfirmasi pengambilan barang</div>
                </div>
            </div>
        </a>

        <a href="{{ route('pedagang.toko.edit') }}" class="action-card group">
            <div class="flex items-center gap-3.5 text-left">
                <div class="w-12 h-12 rounded-xl overflow-hidden bg-[#EDE1C1] border border-[#DECEA0] flex-shrink-0 flex items-center justify-center">
                    <img src="{{ Auth::user()->foto_toko_url ?: route('gambar.toko', ['filename' => 'default.jpg'], false) }}" 
                         alt="Foto Toko" 
                         class="w-full h-full object-cover"
                         onerror="this.onerror=null; this.src='{{ route('gambar.toko', ['filename' => 'default.jpg'], false) }}';">
                </div>
                <div>
                    <div class="font-bold text-sm text-[#212B22] group-hover:text-[#3E6B4B] transition">Pengaturan Toko</div>
                    <div class="text-xs text-[#55604F] mt-0.5">Edit foto, nomor los & alamat</div>
                </div>
            </div>
        </a>

        <a href="{{ route('pedagang.prices.history') }}" class="action-card group">
            <div class="flex items-center gap-3.5 text-left">
                <div class="w-12 h-12 rounded-xl bg-[#F7E1D9] text-[#BD3F0F] flex items-center justify-center flex-shrink-0">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <div>
                    <div class="font-bold text-sm text-[#212B22] group-hover:text-[#3E6B4B] transition">Riwayat Input Harga</div>
                    <div class="text-xs text-[#55604F] mt-0.5">Cek status persetujuan harga</div>
                </div>
            </div>
        </a>
    </div>

    <!-- MAIN CONTENT -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- SIDE KIRI: FORM INPUT HARGA -->
        <div class="lg:col-span-2">
            <div class="pib-dashboard-card p-5 sm:p-7">
                <div class="flex items-center justify-between pb-4 mb-6 border-b border-[#DECEA0]/60">
                    <div>
                        <span class="text-xs uppercase tracking-widest text-[#D69A2D] font-bold">Pembaruan Harian</span>
                        <h2 class="text-lg sm:text-xl font-bold text-[#212B22] mt-0.5">
                            Input / Perbarui Harga Hari Ini
                        </h2>
                    </div>
                </div>

                @if(isset($rejectedPrices) && $rejectedPrices->count() > 0)
                <div class="mb-5 bg-[#F7E1D9] border border-[#BD3F0F]/40 rounded-2xl p-4 text-xs text-[#BD3F0F] flex items-start gap-3 shadow-sm">
                    <div class="flex-1">
                        <div class="font-bold text-sm">Ada Harga yang Ditolak Admin</div>
                        <p class="mt-1 leading-relaxed text-[#212B22]">
                            Admin menolak input harga untuk komoditas:
                            @foreach($rejectedPrices as $rej)
                                <strong>{{ $rej->commodity->nama_komoditas }}</strong> 
                                (Alasan: <em>{{ $rej->alasan_reject ?: 'Di luar batas wajar pasar' }}</em>){{ !$loop->last ? ', ' : '' }}
                            @endforeach
                        </p>
                        <p class="mt-1.5 text-[#55604F]">
                            <em>Pilih komoditas di bawah untuk menginput harga baru yang telah disesuaikan, lalu kirim kembali untuk verifikasi admin.</em>
                        </p>
                    </div>
                </div>
                @endif

                <form action="{{ route('pedagang.prices.store') }}" method="POST" id="hargaForm" enctype="multipart/form-data">
                    @csrf

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <!-- Kolom Kiri -->
                        <div>
                            <!-- Pilih Komoditas -->
                            <div class="mb-4">
                                <label class="block text-xs font-semibold text-[#212B22] uppercase tracking-wider mb-1.5">Pilih Komoditas</label>
                                @php
                                    $selectedKomoditasId = request('komoditas_id') ?: old('commodity_id');
                                @endphp
                                <select name="commodity_id" id="commodity_select" class="form-input cursor-pointer" required>
                                    <option value="">-- Pilih Sayuran / Komoditas --</option>
                                    @foreach($commodities as $commodity)
                                    @php
                                        $todayPrice = $todayPricesMap[$commodity->id] ?? null;
                                        $statusLabel = '';
                                        if ($todayPrice) {
                                            if ($todayPrice->status == 'rejected') {
                                                $statusLabel = ' [Ditolak - Input Ulang]';
                                            } elseif ($todayPrice->status == 'pending') {
                                                $statusLabel = ' [Menunggu Verifikasi]';
                                            } elseif ($todayPrice->status == 'approved') {
                                                $statusLabel = ' [Disetujui: Rp ' . number_format($todayPrice->harga, 0, ',', '.') . ']';
                                            }
                                        }
                                    @endphp
                                    <option value="{{ $commodity->id }}" 
                                            data-satuan="{{ $commodity->satuan }}"
                                            {{ $selectedKomoditasId == $commodity->id ? 'selected' : '' }}>
                                        {{ $commodity->nama_komoditas }}{{ $statusLabel }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Harga -->
                            <div class="mb-4">
                                <label class="block text-xs font-semibold text-[#212B22] uppercase tracking-wider mb-1.5">Harga Komoditas (Rp)</label>
                                <input type="number" name="harga" id="harga_input"
                                    class="form-input form-input-lg"
                                    placeholder="Contoh: 15000" required min="0">
                            </div>

                            <!-- Satuan -->
                            <div class="mb-4">
                                <label class="block text-xs font-semibold text-[#212B22] uppercase tracking-wider mb-1.5">Satuan</label>
                                <input type="text" id="satuan_display" class="form-input bg-[#F4EFE6] text-[#55604F] font-semibold" readonly value="/ kg">
                            </div>
                        </div>

                        <!-- Kolom Kanan -->
                        <div>
                            <!-- Upload Foto -->
                            <div class="mb-4">
                                <label class="block text-xs font-semibold text-[#212B22] uppercase tracking-wider mb-1.5">Foto Komoditas (Opsional)</label>
                                <div class="file-upload-wrapper">
                                    <div class="file-upload-label" id="fileUploadLabel">
                                        <img id="previewImg" class="preview-img" src="#" alt="Preview">
                                        <span id="uploadIcon" class="text-base text-[#3E6B4B]">📷</span>
                                        <span id="uploadText">Klik untuk upload foto komoditas</span>
                                        <span id="fileName" class="file-name"></span>
                                    </div>
                                    <input type="file" name="gambar" id="gambar_input" accept="image/*"
                                           onchange="previewFile(this)">
                                </div>
                                <div class="text-[11px] text-[#55604F] mt-1">Format: JPG, PNG, WEBP. Maksimal 10MB</div>
                            </div>

                            <!-- Preview Rentang Wajar -->
                            <div id="rentangPreview" class="mb-4 hidden">
                                <div class="bg-[#F4EFE6] border border-[#DECEA0] rounded-xl p-4">
                                    <div class="text-xs font-bold text-[#3E6B4B] uppercase tracking-wider mb-1.5">
                                        Rentang Wajar Standar Deviasi
                                    </div>
                                    <div id="rentangContent" class="text-center font-bold text-sm text-[#212B22]"></div>
                                    <div class="text-[11px] text-[#55604F] mt-1.5 text-center">
                                        *Data referensi dari riwayat harga pasar
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Tombol Kirim -->
                    <div class="mt-6 pt-4 border-t border-[#DECEA0]/50">
                        <button type="submit" class="w-full bg-[#D69A2D] hover:bg-[#b88322] text-[#212B22] font-bold py-3 rounded-full text-sm transition shadow-sm flex items-center justify-center gap-2 cursor-pointer">
                            Simpan & Kirim Harga
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- SIDE KANAN: TAB PESANAN -->
        <div class="lg:col-span-1">
            <div class="pib-dashboard-card p-5 sm:p-6">
                <div class="border-b border-[#DECEA0]/60 mb-4">
                    <div class="flex gap-1.5 overflow-x-auto pb-1">
                        <button onclick="showTab('pending')" id="tabPending"
                            class="tab-active px-3 py-1.5 rounded-lg font-bold border-b-2 transition text-xs">
                            Pending ({{ $pendingOrders->count() }})
                        </button>
                        <button onclick="showTab('paid')" id="tabPaid"
                            class="tab-inactive px-3 py-1.5 rounded-lg font-bold border-b-2 transition text-xs">
                            Dibayar ({{ $paidOrders->count() }})
                        </button>
                        <button onclick="showTab('completed')" id="tabCompleted"
                            class="tab-inactive px-3 py-1.5 rounded-lg font-bold border-b-2 transition text-xs">
                            Selesai ({{ $completedOrders->count() }})
                        </button>
                    </div>
                </div>

                <!-- PENDING ORDERS -->
                <div id="pendingPanel" class="order-panel">
                    @if($pendingOrders->count() > 0)
                    <div class="space-y-3 max-h-[480px] overflow-y-auto pr-1">
                        @foreach($pendingOrders as $order)
                        <div class="order-item rounded-xl p-3.5">
                            <div class="flex flex-col gap-2">
                                <div class="flex items-center justify-between gap-1">
                                    <div class="font-mono font-bold text-xs text-[#212B22]">{{ $order->invoice_number }}</div>
                                    <span class="bg-[#EDE1C1] text-[#212B22] text-[10px] font-bold px-2 py-0.5 rounded-full">Pending</span>
                                </div>
                                <div class="text-xs text-[#55604F]">Pembeli: <strong class="text-[#212B22]">{{ $order->pembeli->name }}</strong></div>
                                <div class="text-[11px] text-[#55604F]">Waktu: {{ $order->created_at->locale('id')->isoFormat('DD MMM, HH:mm') }} WIB</div>
                                <div class="mt-1 font-bold text-[#3E6B4B] text-sm">
                                    Total: Rp {{ number_format($order->total_harga, 0, ',', '.') }}
                                </div>
                                <form action="{{ route('pedagang.order.update', $order) }}" method="POST">
                                    @csrf
                                    @method('PUT')
                                    <input type="hidden" name="status" value="paid">
                                    <button type="submit" class="bg-[#3E6B4B] hover:bg-[#24402D] text-white font-bold py-2 rounded-full transition text-xs w-full shadow-sm mt-1 cursor-pointer">
                                        Konfirmasi Pembayaran
                                    </button>
                                </form>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @else
                    <div class="text-center py-10 text-[#55604F] text-xs">
                        Tidak ada pesanan pending saat ini.
                    </div>
                    @endif
                </div>

                <!-- PAID ORDERS -->
                <div id="paidPanel" class="order-panel hidden">
                    @if($paidOrders->count() > 0)
                    <div class="space-y-3 max-h-[480px] overflow-y-auto pr-1">
                        @foreach($paidOrders as $order)
                        <div class="order-item rounded-xl p-3.5">
                            <div class="flex flex-col gap-2">
                                <div class="flex items-center justify-between gap-1">
                                    <div class="font-mono font-bold text-xs text-[#212B22]">{{ $order->invoice_number }}</div>
                                    <span class="bg-[#DCEAE0] text-[#24402D] text-[10px] font-bold px-2 py-0.5 rounded-full">Dibayar</span>
                                </div>
                                <div class="text-xs text-[#55604F]">Pembeli: <strong class="text-[#212B22]">{{ $order->pembeli->name }}</strong></div>
                                <div class="text-[11px] text-[#55604F]">Waktu: {{ $order->created_at->locale('id')->isoFormat('DD MMM, HH:mm') }} WIB</div>
                                <div class="mt-1 font-bold text-[#3E6B4B] text-sm">
                                    Total: Rp {{ number_format($order->total_harga, 0, ',', '.') }}
                                </div>
                                <form action="{{ route('pedagang.order.update', $order) }}" method="POST">
                                    @csrf
                                    @method('PUT')
                                    <input type="hidden" name="status" value="completed">
                                    <button type="submit" class="bg-[#D69A2D] hover:bg-[#b88322] text-[#212B22] font-bold py-2 rounded-full transition text-xs w-full shadow-sm mt-1 cursor-pointer">
                                        Selesaikan Pesanan
                                    </button>
                                </form>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @else
                    <div class="text-center py-10 text-[#55604F] text-xs">
                        Tidak ada pesanan menunggu diambil.
                    </div>
                    @endif
                </div>

                <!-- COMPLETED ORDERS -->
                <div id="completedPanel" class="order-panel hidden">
                    @if($completedOrders->count() > 0)
                    <div class="space-y-3 max-h-[480px] overflow-y-auto pr-1">
                        @foreach($completedOrders as $order)
                        <div class="order-item rounded-xl p-3.5 bg-[#F4EFE6]">
                            <div class="flex flex-col gap-2">
                                <div class="flex items-center justify-between gap-1">
                                    <div class="font-mono font-bold text-xs text-[#212B22]">{{ $order->invoice_number }}</div>
                                    <span class="bg-[#3E6B4B] text-white text-[10px] font-bold px-2 py-0.5 rounded-full">Selesai</span>
                                </div>
                                <div class="text-xs text-[#55604F]">Pembeli: <strong class="text-[#212B22]">{{ $order->pembeli->name }}</strong></div>
                                <div class="text-[11px] text-[#55604F]">Selesai: {{ $order->updated_at->locale('id')->isoFormat('DD MMM, HH:mm') }} WIB</div>
                                <div class="mt-1 font-bold text-[#3E6B4B] text-sm">
                                    Total: Rp {{ number_format($order->total_harga, 0, ',', '.') }}
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @else
                    <div class="text-center py-10 text-[#55604F] text-xs">
                        Belum ada pesanan selesai.
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // ========== PREVIEW FILE ==========
    function previewFile(input) {
        const label = document.getElementById('fileUploadLabel');
        const preview = document.getElementById('previewImg');
        const icon = document.getElementById('uploadIcon');
        const text = document.getElementById('uploadText');
        const fileName = document.getElementById('fileName');

        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                preview.src = e.target.result;
                preview.classList.add('show');
                icon.style.display = 'none';
                text.style.display = 'none';
                fileName.textContent = input.files[0].name;
                fileName.classList.add('show');
                label.style.borderColor = '#2d6a4f';
                label.style.background = '#f0fdf4';
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    // ========== AJAX RENTANG ==========
    $('#commodity_select').on('change', function() {
        var commodityId = $(this).val();
        var selectedOption = $(this).find(':selected');
        var satuan = selectedOption.data('satuan');
        $('#satuan_display').val('/ ' + satuan);

        if (commodityId) {
            $.ajax({
                url: '/pedagang/get-rentang/' + commodityId,
                method: 'GET',
                success: function(response) {
                    if (response.status === 'success') {
                        $('#rentangContent').html(`
                            <div class="text-center">
                                <div class="font-bold text-green-700 text-base">
                                    Rp ${formatNumber(response.lower_bound)} - Rp ${formatNumber(response.upper_bound)}
                                </div>
                                <div class="text-xs text-gray-500 mt-1">Berdasarkan ${response.data_count} data Anda</div>
                            </div>
                        `);
                        $('#rentangPreview').removeClass('hidden');
                    } else {
                        $('#rentangContent').html(`
                            <div class="text-yellow-600 text-sm text-center">${response.message}</div>
                        `);
                        $('#rentangPreview').removeClass('hidden');
                    }
                }
            });
        } else {
            $('#rentangPreview').addClass('hidden');
        }
    });

    // Otomatis load rentang jika komoditas sudah terpilih (misal saat klik Input Ulang dari riwayat)
    $(document).ready(function() {
        if ($('#commodity_select').val()) {
            $('#commodity_select').trigger('change');
        }
    });

    function formatNumber(num) {
        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
    }

    // ========== TOGGLE SWITCH BUKA / TUTUP TOKO ==========
    $('#tokoToggleSwitch').on('change', function() {
        const isChecked = $(this).is(':checked');
        const newStatus = isChecked ? 'buka' : 'tutup';
        
        $.ajax({
            url: "{{ route('pedagang.toko.toggle-status') }}",
            method: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                status: newStatus
            },
            success: function(res) {
                if (res.status === 'success') {
                    if (res.is_buka) {
                        $('#tokoStatusDot').removeClass('bg-rose-400').addClass('bg-emerald-400 animate-pulse');
                        $('#tokoStatusLabel').text('Buka');
                        showToast(res.message, 'success');
                    } else {
                        $('#tokoStatusDot').removeClass('bg-emerald-400 animate-pulse').addClass('bg-rose-400');
                        $('#tokoStatusLabel').text('Tutup');
                        showToast(res.message, 'warning');
                    }
                }
            },
            error: function() {
                // Rollback status switch jika gagal
                $('#tokoToggleSwitch').prop('checked', !isChecked);
                showToast('Gagal mengubah status toko. Silakan coba lagi.', 'error');
            }
        });
    });

    // ========== TAB SWITCHING ==========
    function showTab(tab) {
        const panels = ['pendingPanel', 'paidPanel', 'completedPanel'];
        const tabs = ['tabPending', 'tabPaid', 'tabCompleted'];
        
        panels.forEach(panel => {
            document.getElementById(panel).classList.add('hidden');
        });
        
        document.getElementById(tab + 'Panel').classList.remove('hidden');
        
        tabs.forEach(tabId => {
            const element = document.getElementById(tabId);
            element.classList.remove('tab-active');
            element.classList.add('tab-inactive');
        });
        
        const activeTab = document.getElementById('tab' + tab.charAt(0).toUpperCase() + tab.slice(1));
        activeTab.classList.remove('tab-inactive');
        activeTab.classList.add('tab-active');
    }
</script>
@endsection