@extends('layouts.app')

@section('title', 'Manajemen Komoditas')

@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 sm:items-center justify-between gap-3 mb-6 pb-4 border-b border-[#DECEA0]/60">
            <div>
                <span class="text-xs uppercase tracking-widest text-[#D69A2D] font-bold">Katalog Pasar</span>
                <h1 class="text-xl sm:text-2xl font-bold text-[#212B22] mt-0.5">🥕 Manajemen Komoditas Sayur</h1>
                <p class="text-xs text-[#55604F] mt-0.5">Kelola jenis sayuran dan komoditas pasar yang diperdagangkan</p>
            </div>
            <div class="flex flex-wrap items-center gap-2">
                <a href="{{ route('admin.commodities.create') }}" 
                   class="text-xs font-bold text-white bg-[#3E6B4B] hover:bg-[#24402D] px-4 py-2 rounded-full transition shadow-sm flex items-center gap-1.5 cursor-pointer">
                    <span>+</span> Tambah Komoditas
                </a>
                <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>
        </div>

        <!-- Mobile Cards View -->
        <div class="space-y-3.5 sm:hidden">
            @forelse($commodities as $commodity)
            <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 Jual: <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]">
                        {{ $commodity->prices_count }} data harga
                    </span>
                </div>

                <div class="flex justify-between items-center text-xs pt-3 border-t border-[#DECEA0]/50 mt-3">
                    <span class="text-[11px] text-[#55604F]">📅 Dibuat: {{ $commodity->created_at->locale('id')->isoFormat('DD MMM YYYY') }}</span>
                    <div class="flex items-center gap-1.5">
                        <a href="{{ route('admin.commodities.edit', $commodity) }}"
                           class="bg-[#D69A2D] hover:bg-[#b88322] text-[#212B22] px-3 py-1.5 rounded-lg text-xs font-bold transition shadow-sm">
                            Edit
                        </a>
                        <form action="{{ route('admin.commodities.destroy', $commodity) }}"
                              method="POST"
                              onsubmit="return confirm('Yakin hapus komoditas {{ $commodity->nama_komoditas }}?')"
                              class="inline">
                            @csrf
                            @method('DELETE')
                            <button type="submit" 
                                    class="bg-[#F7E1D9] hover:bg-[#BD3F0F] text-[#BD3F0F] hover:text-white border border-[#BD3F0F]/30 px-3 py-1.5 rounded-lg text-xs font-bold transition cursor-pointer">
                                Hapus
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            @empty
            <div class="text-center py-8 text-[#55604F] text-xs">
                Belum ada data komoditas sayur. Silakan tambahkan komoditas baru.
            </div>
            @endforelse
        </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">ID</th>
                        <th class="p-3.5">Nama Komoditas</th>
                        <th class="p-3.5">Satuan Jual</th>
                        <th class="p-3.5">Total Riwayat Harga</th>
                        <th class="p-3.5">Tanggal Dibuat</th>
                        <th class="p-3.5 text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-[#DECEA0]/50 bg-white">
                    @forelse($commodities as $commodity)
                    <tr class="hover:bg-[#FDFBF5] transition">
                        <td class="p-3.5 text-center text-[#55604F] font-bold">{{ $commodity->id }}</td>
                        <td class="p-3.5 font-bold text-[#212B22] text-sm">{{ $commodity->nama_komoditas }}</td>
                        <td class="p-3.5 text-[#55604F] font-medium">/ {{ $commodity->satuan }}</td>
                        <td class="p-3.5">
                            <span class="bg-[#EDE1C1] text-[#212B22] px-2.5 py-0.5 rounded-full text-[11px] font-bold border border-[#DECEA0]">
                                {{ $commodity->prices_count }} data
                            </span>
                        </td>
                        <td class="p-3.5 text-[#55604F]">{{ $commodity->created_at->locale('id')->isoFormat('DD MMM YYYY') }}</td>
                        <td class="p-3.5 text-center">
                            <div class="inline-flex items-center gap-2">
                                <a href="{{ route('admin.commodities.edit', $commodity) }}"
                                   class="bg-[#D69A2D] hover:bg-[#b88322] text-[#212B22] px-3 py-1.5 rounded-lg text-xs font-bold transition shadow-sm">
                                    Edit
                                </a>
                                <form action="{{ route('admin.commodities.destroy', $commodity) }}"
                                      method="POST"
                                      onsubmit="return confirm('Yakin hapus komoditas {{ $commodity->nama_komoditas }}?')"
                                      class="inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" 
                                            class="bg-[#F7E1D9] hover:bg-[#BD3F0F] text-[#BD3F0F] hover:text-white border border-[#BD3F0F]/30 px-3 py-1.5 rounded-lg text-xs font-bold transition cursor-pointer">
                                        Hapus
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="p-10 text-center text-[#55604F]">
                            Belum ada data komoditas sayur. Silakan tambahkan komoditas baru.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection