@extends('layouts.admin_sidebar')

@section('content')
<div x-data="{ 
    showEditModal: false, 
    editData: { id_produk: '', nama_produk: '', stok_isi: 0, stok_kosong: 0, total_aset: 0 },
    get stokKosongCalc() { return Math.max(0, this.editData.total_aset - this.editData.stok_isi); }
}" class="space-y-6">
    

    <div class="flex flex-col md:flex-row justify-between items-start md:items-center bg-white p-6 md:p-8 rounded-[2rem] md:rounded-[2.5rem] shadow-sm border border-slate-100 gap-4">
        <div>
            <h1 class="text-2xl md:text-3xl font-black text-slate-800 tracking-tight leading-none">Stok Produk</h1>
            <p class="text-slate-400 text-[10px] md:text-xs font-bold uppercase tracking-[0.2em] mt-2">Monitor Inventori Tabung</p>
        </div>
        <div class="flex items-center gap-6 bg-slate-50 px-6 py-3 md:px-8 md:py-4 rounded-[1.5rem] md:rounded-3xl border border-slate-100 w-full md:w-auto justify-center">
            <div class="text-center">
                <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Total Produk</p>
                <p class="text-xl md:text-2xl font-black text-slate-800">{{ count($stok) }}</p>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-[2.5rem] shadow-sm border border-slate-100 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead class="bg-slate-50/50 border-b border-slate-50">
                    <tr>
                        <th class="px-8 py-6 text-[10px] font-black text-slate-400 uppercase tracking-widest">Produk</th>
                        <th class="px-8 py-6 text-[10px] font-black text-emerald-600 uppercase tracking-widest text-center">Stok Isi (🔥)</th>
                        <th class="px-8 py-6 text-[10px] font-black text-slate-500 uppercase tracking-widest text-center">Stok Kosong (🌑)</th>
                        <th class="px-8 py-6 text-[10px] font-black text-blue-600 uppercase tracking-widest text-center bg-blue-50/30">Total Aset</th>
                        <th class="px-8 py-6 text-[10px] font-black text-slate-400 uppercase tracking-widest text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50">
                    @forelse($stok as $item)
                        <tr class="group hover:bg-slate-50/80 transition-all">
                            <td class="px-8 py-6">
                                <div class="flex items-center gap-4">
                                    <div class="w-12 h-12 rounded-2xl overflow-hidden flex items-center justify-center bg-slate-50 border border-slate-100 group-hover:border-orange-200 transition-all shrink-0">
                                        @php
                                            $nameLower = strtolower($item->nama_produk);
                                            if (str_contains($nameLower, '12')) {
                                                $produkImg = asset('images/gas_12kg_bright.jpg');
                                            } elseif (str_contains($nameLower, '5.5') || str_contains($nameLower, '5,5')) {
                                                $produkImg = asset('images/gas5-5.jpg');
                                            } elseif (str_contains($nameLower, '3')) {
                                                $produkImg = asset('images/gas_3kg_elpiji.jpg');
                                            } else {
                                                $produkImg = null;
                                            }
                                        @endphp
                                        @if($produkImg)
                                            <img src="{{ $produkImg }}" alt="{{ $item->nama_produk }}" class="w-full h-full object-contain p-0.5">
                                        @else
                                            <i data-lucide="package" class="w-6 h-6 text-slate-400 group-hover:text-orange-500 transition-colors"></i>
                                        @endif
                                    </div>
                                    <div>
                                        <p class="font-black text-slate-800 text-base leading-tight">{{ $item->nama_produk }}</p>
                                        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-0.5">{{ $item->id_produk }}</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-8 py-6 text-center">
                                <span class="text-xl font-black text-emerald-600">{{ $item->stok_isi }}</span>
                            </td>
                            <td class="px-8 py-6 text-center">
                                <span class="text-xl font-black text-slate-400">{{ $item->stok_kosong }}</span>
                            </td>
                            <td class="px-8 py-6 text-center bg-blue-50/20">
                                <span class="inline-block px-4 py-1.5 rounded-full bg-blue-100 text-blue-700 font-black text-lg">
                                    {{ $item->total_aset }}
                                </span>
                            </td>
                            <td class="px-8 py-6 text-right">
                                <button @click="showEditModal = true; editData = { id_produk: '{{ $item->id_produk }}', nama_produk: '{{ $item->nama_produk }}', stok_isi: {{ $item->stok_isi }}, stok_kosong: {{ $item->stok_kosong }}, total_aset: {{ $item->total_aset }} }" 
                                        class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-[#0F172A] text-white hover:bg-orange-500 transition-all shadow-lg shadow-slate-200">
                                    <i data-lucide="settings-2" class="w-4 h-4"></i>
                                    <span class="text-[10px] font-black uppercase tracking-widest">Update Stok</span>
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="py-20 text-center">
                                <i data-lucide="package-search" class="w-12 h-12 text-slate-200 mx-auto mb-4"></i>
                                <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Data stok tidak ditemukan.</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Modal Update Stok --}}
    <div x-show="showEditModal" 
         class="fixed inset-0 z-[100] flex items-center justify-center bg-slate-900/60 backdrop-blur-sm"
         x-cloak
         x-transition.opacity>
        
        <div @click.away="showEditModal = false" 
             class="bg-white rounded-[2.5rem] w-full max-w-md shadow-2xl p-8 transform transition-all"
             x-show="showEditModal" 
             x-transition:enter="transition ease-out duration-300" x-transition:enter-start="scale-95 opacity-0" x-transition:enter-end="scale-100 opacity-100">
            
            <div class="flex justify-between items-center mb-6">
                <div>
                    <h2 class="text-2xl font-black text-slate-800 tracking-tight" x-text="editData.nama_produk"></h2>
                    <p class="text-[10px] font-black text-orange-500 uppercase tracking-widest mt-0.5">Revisi Stok Tabung</p>
                </div>
                <button @click="showEditModal = false" class="p-2 bg-slate-100 rounded-full text-slate-500 hover:text-red-500 transition-colors">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <form id="stok-update-form" action="" method="POST" class="space-y-5"
                  x-effect="document.getElementById('stok-update-form').action = `{{ url('/admin/stok') }}/${editData.id_produk}`">
                @csrf
                <input type="hidden" name="_method" value="PUT">
                <input type="hidden" name="id_produk" :value="editData.id_produk">

                <div class="grid grid-cols-3 gap-3">
                    <div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-100 text-center">
                        <p class="text-[8px] font-black text-emerald-600 uppercase mb-1">Stok Isi 🔥</p>
                        <p class="text-2xl font-black text-emerald-700" x-text="editData.stok_isi"></p>
                    </div>
                    <div class="bg-amber-50 p-4 rounded-2xl border border-amber-100 text-center">
                        <p class="text-[8px] font-black text-amber-600 uppercase mb-1">Stok Kosong 🌑</p>
                        <p class="text-2xl font-black text-amber-700" x-text="stokKosongCalc"></p>
                    </div>
                    <div class="bg-blue-50 p-4 rounded-2xl border border-blue-100 text-center">
                        <p class="text-[8px] font-black text-blue-600 uppercase mb-1">Total Aset</p>
                        <p class="text-2xl font-black text-blue-700" x-text="editData.total_aset"></p>
                    </div>
                </div>

                <div class="space-y-2">
                    <label class="text-[11px] font-black text-slate-400 uppercase tracking-widest ml-1">Total Aset (Unit Fisik)</label>
                    <input type="number" name="total_aset" x-model.number="editData.total_aset" required min="0"
                           class="w-full px-6 py-4 rounded-2xl bg-slate-50 border border-slate-100 focus:ring-4 focus:ring-blue-500/10 focus:bg-white outline-none font-black text-slate-800 text-2xl transition-all">
                </div>

                <div class="space-y-2">
                    <label class="text-[11px] font-black text-emerald-600 uppercase tracking-widest ml-1">Stok Isi Saat Ini 🔥</label>
                    <input type="number" name="stok_isi" x-model.number="editData.stok_isi" required min="0" :max="editData.total_aset"
                           class="w-full px-6 py-4 rounded-2xl bg-emerald-50 border border-emerald-100 focus:ring-4 focus:ring-emerald-500/10 focus:bg-white outline-none font-black text-emerald-800 text-2xl transition-all">
                </div>

                <button type="submit" class="w-full bg-slate-900 text-white py-5 rounded-2xl font-black shadow-xl shadow-slate-900/20 hover:bg-orange-500 active:scale-95 transition-all flex items-center justify-center gap-3 uppercase tracking-widest text-xs mt-4">
                    <i data-lucide="save" class="w-4 h-4"></i> Simpan Revisi Stok
                </button>
            </form>
        </div>
    </div>
</div>
@endsection
