@extends('layouts.admin_sidebar')

@section('content')
<div x-data="{ 
    showAddModal: false, 
    showEditModal: false,
    editData: { id_produk: '', nama_produk: '', jumlah: '', originalJumlah: 0, tanggal_beli: '', harga_beli: '' },
    addForm: { nama_produk: '', jumlah: '' },
    stockMap: {{ json_encode($stokList->map(fn($s) => ['stok_isi' => (int)$s->stok_isi, 'total_aset' => (int)$s->total_aset])->toArray()) }},
    
    get isAddExceeded() {
        if (!this.addForm.nama_produk || !this.addForm.jumlah) return false;
        let info = this.stockMap[this.addForm.nama_produk];
        if (!info) return false;
        return (info.stok_isi + parseInt(this.addForm.jumlah)) > info.total_aset;
    },
    get addMaxAllowed() {
        if (!this.addForm.nama_produk) return 0;
        let info = this.stockMap[this.addForm.nama_produk];
        return info ? (info.total_aset - info.stok_isi) : 0;
    },
    get isEditExceeded() {
        if (!this.editData.nama_produk || !this.editData.jumlah) return false;
        let info = this.stockMap[this.editData.nama_produk];
        if (!info) return false;
        let diff = parseInt(this.editData.jumlah) - parseInt(this.editData.originalJumlah);
        return (info.stok_isi + diff) > info.total_aset;
    },
    get editMaxAllowed() {
        if (!this.editData.nama_produk) return 0;
        let info = this.stockMap[this.editData.nama_produk];
        return info ? (info.total_aset - info.stok_isi + parseInt(this.editData.originalJumlah)) : 0;
    }
}" 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>
            <div class="inline-flex items-center gap-2 px-3 py-1 bg-orange-50 text-orange-600 rounded-full text-[10px] font-black uppercase tracking-wider mb-3">
                <i data-lucide="layers" class="w-3 h-3"></i> Inventori System
            </div>
            <h1 class="text-2xl md:text-3xl font-black text-slate-800 tracking-tight leading-none">Riwayat Belanja</h1>
            <p class="text-slate-400 text-[10px] md:text-xs font-bold uppercase tracking-[0.2em] mt-2">Pantau Stok Masuk</p>
        </div>
        
        <div class="flex flex-col md:flex-row items-center gap-4 w-full md:w-auto">
            <div class="w-full md:w-auto text-center md:text-left bg-slate-50 px-6 py-3 md:px-8 md:py-4 rounded-[1.5rem] md:rounded-3xl border border-slate-100">
                <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Total Transaksi</p>
                <p class="text-xl md:text-2xl font-black text-slate-800">{{ count($purchases) }}</p>
            </div>
            
            <button @click="addForm = { nama_produk: '', jumlah: '' }; showAddModal = true" class="bg-slate-900 hover:bg-orange-500 text-white px-6 py-4 rounded-[1.5rem] font-black text-sm items-center gap-2 transition-all shadow-lg shadow-slate-900/10 active:scale-95 whitespace-nowrap">
                <i data-lucide="plus" class="w-5 h-5"></i> CATAT BELANJA
            </button>
        </div>
    </div>

    @if($stokList->count())
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
        @foreach($stokList as $namaProduk => $stok)
        @php
            $pct = $stok->total_aset > 0 ? ($stok->stok_isi / $stok->total_aset * 100) : 0;
            $barColor = $stok->stok_isi == 0 ? 'bg-red-500' : ($pct < 25 ? 'bg-amber-400' : 'bg-emerald-500');
            $badgeColor = $stok->stok_isi == 0 ? 'bg-red-50 text-red-600 border-red-100' : ($pct < 25 ? 'bg-amber-50 text-amber-700 border-amber-100' : 'bg-emerald-50 text-emerald-700 border-emerald-100');
            
            $nameLower = strtolower($namaProduk);
            if (str_contains($nameLower, '12')) {
                $stokImg = asset('images/gas_12kg_bright.jpg');
            } elseif (str_contains($nameLower, '5.5') || str_contains($nameLower, '5,5')) {
                $stokImg = asset('images/gas5-5.jpg');
            } elseif (str_contains($nameLower, '3')) {
                $stokImg = asset('images/gas_3kg_elpiji.jpg');
            } else {
                $stokImg = null;
            }
        @endphp
        <div class="bg-white rounded-[1.5rem] border border-slate-100 p-5 shadow-sm transition-transform hover:scale-[1.02]">
            <div class="flex items-center justify-between mb-3">
                <div class="flex items-center gap-2">
                    @if($stokImg)
                        <img src="{{ $stokImg }}" alt="{{ $namaProduk }}" class="w-6 h-6 object-contain">
                    @else
                        <i data-lucide="package" class="w-4 h-4 text-slate-400"></i>
                    @endif
                    <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest leading-tight">{{ $namaProduk }}</p>
                </div>
                <span class="text-[9px] font-black px-2 py-1 rounded-full border {{ $badgeColor }}">
                    {{ $stok->stok_isi == 0 ? 'Kosong' : ($pct < 25 ? 'Menipis' : 'Aman') }}
                </span>
            </div>
            <div class="flex items-baseline gap-1.5 mb-3">
                <span class="text-2xl font-black text-slate-800">{{ $stok->stok_isi }}</span>
                <span class="text-xs font-bold text-slate-400">isi</span>
                <span class="text-slate-200 mx-1">|</span>
                <span class="text-base font-black text-slate-400">{{ $stok->stok_kosong }}</span>
                <span class="text-xs font-bold text-slate-400">kosong</span>
            </div>
            <div class="w-full bg-slate-100 rounded-full h-1.5">
                <div class="{{ $barColor }} h-1.5 rounded-full transition-all" style="width: {{ min(100, $pct) }}%"></div>
            </div>
            <p class="text-[9px] text-slate-400 mt-1.5 font-bold">{{ $stok->total_aset }} total aset</p>
        </div>
        @endforeach
    </div>
    @endif

    <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>
                    <tr class="bg-slate-50/50 text-slate-400 text-[10px] uppercase font-black tracking-widest border-b border-slate-50">
                        <th class="px-8 py-6">Produk & ID</th>
                        <th class="px-8 py-6">Tanggal</th>
                        <th class="px-8 py-6 text-center">Stok Isi Kini</th>
                        <th class="px-8 py-6 text-right">Harga Satuan</th>
                        <th class="px-8 py-6 text-right">Total Biaya</th>
                        <th class="px-8 py-6 text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50 text-sm">
                    @forelse($purchases as $item)
                    <tr class="hover:bg-slate-50/80 transition-colors group">
                        <td class="px-8 py-5">
                            <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="box" 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-orange-500 uppercase tracking-widest mt-0.5">{{ $item->id_produk }}</p>
                                </div>
                            </div>
                        </td>
                        <td class="px-8 py-5 font-bold text-slate-600">
                            {{ \Carbon\Carbon::parse($item->tanggal_beli)->format('d M Y') }}
                        </td>
                        <td class="px-8 py-5 text-center">
                            @php
                                $stokAktual = $stokList->get($item->nama_produk);
                                $isi = $stokAktual?->stok_isi ?? null;
                                $totalAset = $stokAktual?->total_aset ?? 0;
                                $pctIsi = ($totalAset > 0 && $isi !== null) ? ($isi / $totalAset * 100) : 0;
                                $isKosong = $isi !== null && $isi == 0;
                                $isMenipis = $isi !== null && $isi > 0 && $pctIsi < 25;
                                $badgeClass = $isKosong
                                    ? 'bg-red-50 text-red-600 border border-red-100'
                                    : ($isMenipis
                                        ? 'bg-amber-50 text-amber-700 border border-amber-100'
                                        : 'bg-emerald-50 text-emerald-700 border border-emerald-100');
                                $dotClass = $isKosong ? 'bg-red-400' : ($isMenipis ? 'bg-amber-400' : 'bg-emerald-400');
                            @endphp
                            <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full font-black text-sm {{ $badgeClass }}">
                                <span class="w-1.5 h-1.5 rounded-full {{ $dotClass }}"></span>
                                {{ $isi !== null ? $isi . ' tabung' : 'N/A' }}
                            </span>
                        </td>
                        <td class="px-8 py-5 text-right font-bold text-slate-500">
                            Rp {{ number_format($item->harga_beli, 0, ',', '.') }}
                        </td>
                        <td class="px-8 py-5 text-right">
                            <span class="font-black text-slate-900 text-base">Rp {{ number_format($item->total_biaya, 0, ',', '.') }}</span>
                        </td>
                        <td class="px-8 py-5 text-center">
                            <div class="flex items-center justify-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                                <button @click="editData = { id_produk: '{{ $item->id_produk }}', nama_produk: '{{ $item->nama_produk }}', jumlah: '{{ $item->jumlah }}', originalJumlah: '{{ $item->jumlah }}', tanggal_beli: '{{ $item->tanggal_beli }}', harga_beli: '{{ $item->harga_beli }}' }; showEditModal = true" 
                                        class="p-2.5 text-blue-600 hover:bg-blue-50 rounded-xl transition-all">
                                    <i data-lucide="pencil" class="w-4 h-4"></i>
                                </button>
                                <form action="{{ route('admin.belanja.destroy', $item->id_produk) }}" method="POST" class="inline">
                                    @csrf @method('DELETE')
                                    <button type="button" onclick="confirmDelete(this)" class="p-2.5 text-red-500 hover:bg-red-50 rounded-xl transition-all">
                                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="py-20 text-center text-slate-400">
                            <i data-lucide="shopping-cart" class="w-12 h-12 mx-auto mb-3 opacity-20"></i>
                            <p class="font-bold text-[10px] uppercase tracking-widest">Belum ada riwayat belanja</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Modal Add Belanja --}}
    <div x-show="showAddModal" 
         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="showAddModal = false" 
             class="bg-white rounded-[2.5rem] w-full max-w-lg shadow-2xl p-8 transform transition-all"
             x-show="showAddModal" 
             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">
                <h2 class="text-2xl font-black text-slate-800 tracking-tight">Catat Belanja</h2>
                <button @click="showAddModal = 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 action="{{ route('admin.belanja.store') }}" method="POST" class="space-y-4">
                @csrf
                <div>
                    <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Pilih Produk Elpiji</label>
                    <select name="nama_produk" x-model="addForm.nama_produk" required class="w-full mt-1.5 px-5 py-4 rounded-2xl border border-slate-100 bg-slate-50 outline-none font-bold text-slate-800 appearance-none transition-all">
                        <option value="">Pilih varian...</option>
                        @foreach($products as $p)
                            <option value="{{ $p->name }}">{{ $p->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Jumlah (Tabung)</label>
                        <input type="number" name="jumlah" x-model.number="addForm.jumlah" required min="1" placeholder="0" 
                               class="w-full mt-1.5 px-5 py-4 rounded-2xl border border-slate-100 bg-slate-50 outline-none font-bold text-slate-800 transition-all">
                        <div x-show="isAddExceeded" x-cloak class="text-red-500 text-[10px] font-black uppercase tracking-wider mt-2 flex items-center gap-1.5 bg-red-50 p-3 rounded-xl border border-red-100">
                            <span>⚠️ Jumlah melebihi total aset! Maksimal restok: <span class="text-red-700 font-extrabold" x-text="addMaxAllowed"></span> tabung.</span>
                        </div>
                    </div>
                    <div>
                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Tanggal</label>
                        <input type="date" name="tanggal_beli" value="{{ date('Y-m-d') }}" 
                               class="w-full mt-1.5 px-5 py-4 rounded-2xl border border-slate-100 bg-slate-50 outline-none font-bold text-slate-800 transition-all">
                    </div>
                </div>

                <div>
                    <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Harga Beli / Tabung</label>
                    <div class="relative mt-1.5">
                        <span class="absolute left-5 top-1/2 -translate-y-1/2 font-black text-slate-400">Rp</span>
                        <input type="number" name="harga_beli" required placeholder="0" 
                               class="w-full pl-12 pr-5 py-4 rounded-2xl border border-slate-100 bg-slate-50 outline-none font-black text-slate-800 transition-all text-lg">
                    </div>
                </div>

                <button type="submit" :disabled="isAddExceeded" :class="isAddExceeded ? 'opacity-50 cursor-not-allowed bg-slate-700' : 'bg-slate-900 hover:bg-orange-500'" class="w-full mt-4 text-white py-5 rounded-2xl font-black shadow-xl shadow-slate-900/20 active:scale-95 transition-all flex items-center justify-center gap-3 uppercase tracking-widest">
                    <i data-lucide="save" class="w-4 h-4"></i> Update Stok Masuk
                </button>
            </form>
        </div>
    </div>

    {{-- Modal Edit Belanja --}}
    <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-lg 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">
                <h2 class="text-2xl font-black text-slate-800 tracking-tight">Edit Belanja</h2>
                <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 :action="`/admin/belanja/${editData.id_produk}`" method="POST" class="space-y-4">
                @csrf
                @method('PUT')
                <div>
                    <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Produk</label>
                    <select name="nama_produk" x-model="editData.nama_produk" required class="w-full mt-1.5 px-5 py-4 rounded-2xl border border-slate-100 bg-slate-50 outline-none font-bold text-slate-800 appearance-none transition-all">
                        @foreach($products as $p)
                            <option value="{{ $p->name }}">{{ $p->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Jumlah</label>
                        <input type="number" name="jumlah" x-model.number="editData.jumlah" required min="1" 
                               class="w-full mt-1.5 px-5 py-4 rounded-2xl border border-slate-100 bg-slate-50 outline-none font-bold text-slate-800 transition-all">
                        <div x-show="isEditExceeded" x-cloak class="text-red-500 text-[10px] font-black uppercase tracking-wider mt-2 flex items-center gap-1.5 bg-red-50 p-3 rounded-xl border border-red-100">
                            <span>⚠️ Jumlah melebihi total aset! Maksimal yang diperbolehkan: <span class="text-red-700 font-extrabold" x-text="editMaxAllowed"></span> tabung.</span>
                        </div>
                    </div>
                    <div>
                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Tanggal</label>
                        <input type="date" name="tanggal_beli" x-model="editData.tanggal_beli" 
                               class="w-full mt-1.5 px-5 py-4 rounded-2xl border border-slate-100 bg-slate-50 outline-none font-bold text-slate-800 transition-all">
                    </div>
                </div>

                <div>
                    <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Harga Beli</label>
                    <div class="relative mt-1.5">
                        <span class="absolute left-5 top-1/2 -translate-y-1/2 font-black text-slate-400">Rp</span>
                        <input type="number" name="harga_beli" x-model="editData.harga_beli" required 
                               class="w-full pl-12 pr-5 py-4 rounded-2xl border border-slate-100 bg-slate-50 outline-none font-black text-slate-800 transition-all text-lg">
                    </div>
                </div>

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

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function confirmDelete(button) {
        Swal.fire({
            title: 'HAPUS DATA?',
            html: 'Tindakan ini akan <b>mengurangi stok produk</b> Anda kembali secara otomatis.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#0F172A',
            cancelButtonColor: '#F1F5F9',
            confirmButtonText: 'YA, HAPUS SAJA',
            cancelButtonText: '<span class="text-slate-600 font-bold">BATAL</span>',
            customClass: {
                confirmButton: 'px-6 py-4 rounded-2xl font-black uppercase text-xs tracking-widest',
                cancelButton: 'px-6 py-4 rounded-2xl font-black uppercase text-xs tracking-widest'
            }
        }).then((result) => {
            if (result.isConfirmed) {
                button.closest('form').submit();
            }
        })
    }
</script>
@endpush