@extends('layouts.app')

@section('title', 'Analisis Harga')

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

<div class="max-w-7xl mx-auto py-2">
    <div class="pib-table-card p-6 sm:p-8">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6 pb-4 border-b border-[#DECEA0]/60">
            <div>
                <span class="text-xs uppercase tracking-widest text-[#D69A2D] font-bold">Statistik & Analitika</span>
                <h1 class="text-xl sm:text-2xl font-bold text-[#212B22] mt-0.5">📊 Analisis Standar Deviasi Komoditas</h1>
                <p class="text-xs text-[#55604F] mt-0.5">Perhitungan dispersi harga dan deteksi harga wajar per pedagang lapak</p>
            </div>
            <a href="{{ route('admin.dashboard') }}" 
               class="text-xs font-bold text-[#3E6B4B] hover:text-[#24402D] px-3.5 py-2 rounded-full border border-[#DECEA0] bg-[#FDFBF5] hover:bg-[#EDE1C1] transition">
                ← Dashboard
            </a>
        </div>

        <!-- Info Box Metodologi -->
        <div class="bg-[#F4EFE6] border border-[#DECEA0] rounded-2xl p-5 mb-6">
            <h3 class="font-bold text-xs uppercase tracking-wider text-[#3E6B4B] flex items-center gap-1.5 mb-1.5">
                <span>📐</span> Metode & Rumus Standar Deviasi
            </h3>
            <p class="text-xs text-[#212B22] font-semibold leading-relaxed">
                Setiap pedagang dihitung standar deviasi secara mandiri berdasarkan riwayat transaksi harian mereka:
            </p>
            <div class="mt-2 flex flex-wrap items-center gap-2">
                <span class="bg-[#EDE1C1] text-[#212B22] px-3 py-1 rounded-full text-xs font-bold border border-[#DECEA0]">
                    Rentang Wajar = Rata-rata (x̄) ± Standar Deviasi (s)
                </span>
                <span class="bg-[#DCEAE0] text-[#24402D] px-3 py-1 rounded-full text-xs font-semibold border border-[#3E6B4B]/30">
                    Syarat: Minimal 2 sampel data
                </span>
            </div>
        </div>

        <!-- Mobile Cards View -->
        <div class="space-y-3.5 sm:hidden">
            @foreach($commodities as $commodity)
            @php
                $stats = $results[$commodity->id] ?? [];
                $totalPedagang = count($stats);
                $rataPasar = 0;
                $count = 0;
                foreach($stats as $stat) {
                    if($stat['status'] == 'success') {
                        $rataPasar += $stat['mean'];
                        $count++;
                    }
                }
                $rataPasar = $count > 0 ? $rataPasar / $count : 0;
            @endphp
            <div class="bg-white border border-[#DECEA0] rounded-2xl p-4 shadow-sm">
                <div class="flex justify-between items-start mb-2">
                    <div>
                        <h3 class="font-bold text-base text-[#212B22]">{{ $commodity->nama_komoditas }}</h3>
                        <span class="text-xs text-[#55604F]">Satuan: <strong>/ {{ $commodity->satuan }}</strong></span>
                    </div>
                    <span class="bg-[#EDE1C1] text-[#212B22] px-2.5 py-0.5 rounded-full text-[11px] font-bold border border-[#DECEA0]">
                        🏪 {{ $totalPedagang }} Pedagang
                    </span>
                </div>

                <div class="flex justify-between items-center text-xs pt-3 border-t border-[#DECEA0]/50 mt-3">
                    <div>
                        <span class="text-[#55604F] text-[10px] block">Rata-rata Pasar:</span>
                        @if($rataPasar > 0)
                        <strong class="text-[#3E6B4B] text-base">Rp {{ number_format($rataPasar, 0, ',', '.') }}</strong>
                        @else
                        <span class="text-[#55604F] italic text-xs">Belum cukup sampel</span>
                        @endif
                    </div>
                    <a href="{{ route('admin.analysis.show', $commodity) }}"
                       class="inline-flex items-center gap-1 bg-[#3E6B4B] hover:bg-[#24402D] text-white px-3.5 py-1.5 rounded-full text-xs font-bold transition shadow-sm">
                        <span>🔍</span> Detail
                    </a>
                </div>
            </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">Nama Komoditas</th>
                        <th class="p-3.5">Lapak Pedagang Aktif</th>
                        <th class="p-3.5">Rata-rata Harga Pasar</th>
                        <th class="p-3.5 text-center">Analisis Detail</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-[#DECEA0]/50 bg-white">
                    @foreach($commodities as $commodity)
                    @php
                        $stats = $results[$commodity->id] ?? [];
                        $totalPedagang = count($stats);
                        $rataPasar = 0;
                        $count = 0;
                        foreach($stats as $stat) {
                            if($stat['status'] == 'success') {
                                $rataPasar += $stat['mean'];
                                $count++;
                            }
                        }
                        $rataPasar = $count > 0 ? $rataPasar / $count : 0;
                    @endphp
                    <tr class="hover:bg-[#FDFBF5] transition">
                        <td class="p-3.5 font-bold text-[#212B22] text-sm">
                            {{ $commodity->nama_komoditas }}
                            <span class="text-[#55604F] text-xs font-normal">(/{{ $commodity->satuan }})</span>
                        </td>
                        <td class="p-3.5">
                            <span class="bg-[#EDE1C1] text-[#212B22] px-2.5 py-1 rounded-full text-[11px] font-bold border border-[#DECEA0]">
                                🏪 {{ $totalPedagang }} Pedagang
                            </span>
                        </td>
                        <td class="p-3.5">
                            @if($rataPasar > 0)
                            <span class="font-bold text-[#3E6B4B] text-sm">Rp {{ number_format($rataPasar, 0, ',', '.') }}</span>
                            @else
                            <span class="text-[#55604F] italic">Belum cukup sampel</span>
                            @endif
                        </td>
                        <td class="p-3.5 text-center">
                            <a href="{{ route('admin.analysis.show', $commodity) }}"
                               class="inline-flex items-center gap-1 bg-[#3E6B4B] hover:bg-[#24402D] text-white px-3.5 py-1.5 rounded-full text-xs font-bold transition shadow-sm">
                                <span>🔍</span> Lihat Detail
                            </a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection