@extends('layouts.admin_sidebar')

@section('content')
<style>
    input::-webkit-calendar-picker-indicator,
    input::-webkit-list-button {
        display: none !important;
        -webkit-appearance: none !important;
        opacity: 0 !important;
    }
</style>
<div x-data="{ 
    showAddModal: false, 
    showEditModal: false,
    editItem: { id: '', name: '', price: '', image: '' }
}" class="space-y-8 p-4 md:p-8">
    
    {{-- Header Section --}}
    <header class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
        <div class="space-y-3">
            <h1 class="text-4xl font-black text-slate-900 tracking-tight">Katalog Harga</h1>
            <div class="flex items-center gap-2">
                <span class="w-8 h-1 bg-orange-500 rounded-full"></span>
                <p class="text-slate-500 font-bold uppercase text-[10px] tracking-[0.2em]">Manajemen Produk & Harga Jual</p>
            </div>
        </div>
        
        <button @click="showAddModal = true" 
                class="group bg-slate-900 hover:bg-orange-500 text-white px-8 py-4 rounded-3xl font-black text-sm flex items-center gap-3 transition-all shadow-2xl shadow-slate-900/20 active:scale-95">
            <div class="bg-white/10 p-1.5 rounded-xl group-hover:bg-white/20 transition-colors">
                <i data-lucide="plus" class="w-5 h-5"></i>
            </div>
            TAMBAH PRODUK BARU
        </button>
    </header>


    {{-- Grid Content --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        @forelse($prices as $item)
            @php
                $namaProduk = $item->name ?? '';
                $is3Kg = stripos($namaProduk, '3') !== false;
                $is12Kg = stripos($namaProduk, '12') !== false;
                $is5Kg = stripos($namaProduk, '5.5') !== false || stripos($namaProduk, '5,5') !== false;
            @endphp
            <div class="bg-white rounded-[2.5rem] shadow-[0_20px_50px_rgba(0,0,0,0.02)] border border-slate-100 p-8 flex flex-col items-center relative group overflow-hidden transition-all hover:shadow-2xl hover:shadow-orange-500/10 hover:-translate-y-2">
                
                {{-- Decorative Background --}}
                <div class="absolute -top-10 -right-10 w-32 h-32 bg-slate-50 rounded-full group-hover:scale-150 transition-transform duration-700"></div>

                {{-- Product Icon / Custom Photo --}}
                <div class="relative w-20 h-20 rounded-[2.2rem] overflow-hidden border border-slate-100 flex items-center justify-center mb-6 shadow-sm group-hover:rotate-6 transition-all duration-300 bg-slate-50">
                    @if(!empty($item->image) && file_exists(public_path($item->image)))
                        <img src="{{ asset($item->image) }}" alt="{{ $item->name }}" class="w-full h-full object-cover">
                    @elseif($is3Kg)
                        <img src="{{ asset('images/gas_3kg_elpiji.jpg') }}" alt="Gas 3kg" class="w-full h-full object-cover">
                    @elseif($is12Kg)
                        <img src="{{ asset('images/gas_12kg_bright.jpg') }}" alt="Gas 12kg" class="w-full h-full object-cover">
                    @elseif($is5Kg)
                        <img src="{{ asset('images/gas5-5.jpg') }}" alt="Gas 5.5kg" class="w-full h-full object-cover">
                    @else
                        <div class="w-full h-full text-slate-400 flex items-center justify-center">
                            <i data-lucide="cylinder" class="w-10 h-10"></i>
                        </div>
                    @endif
                </div>

                <div class="relative text-center space-y-2 mb-8">
                    <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">{{ $item->id }}</p>
                    <h3 class="text-2xl font-black text-slate-800 tracking-tight leading-tight">{{ $item->name }}</h3>
                    <div class="inline-flex items-center gap-2 px-4 py-2 bg-slate-50 rounded-full">
                        <span class="text-orange-500 font-black text-lg">Rp</span>
                        <span class="text-2xl font-black text-slate-800 tracking-tighter">{{ number_format($item->price, 0, ',', '.') }}</span>
                    </div>
                </div>
                
                <div class="relative w-full grid grid-cols-2 gap-3 translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300">
                    <button @click="editItem = { id: '{{ $item->id }}', name: '{{ addslashes($item->name) }}', price: '{{ $item->price }}', image: '{{ $item->image ? asset($item->image) : '' }}' }; showEditModal = true" 
                            class="flex items-center justify-center gap-2 text-slate-600 bg-slate-50 hover:bg-slate-900 hover:text-white py-3.5 rounded-2xl text-[10px] font-black uppercase tracking-widest transition-all">
                        <i data-lucide="edit-3" class="w-4 h-4"></i> Edit
                    </button>
                    
                    <form action="{{ route('admin.harga.destroy', $item->id) }}" method="POST">
                        @csrf 
                        @method('DELETE')
                        <button type="button" onclick="confirmDeleteProduct(this)" class="w-full flex items-center justify-center gap-2 text-red-500 bg-red-50 hover:bg-red-500 hover:text-white py-3.5 rounded-2xl text-[10px] font-black uppercase tracking-widest transition-all">
                            <i data-lucide="trash-2" class="w-4 h-4"></i> Hapus
                        </button>
                    </form>
                </div>
            </div>
        @empty
            <div class="col-span-full text-center py-32 bg-white rounded-[3rem] border-4 border-dashed border-slate-100">
                <div class="w-24 h-24 bg-slate-50 rounded-[2.5rem] flex items-center justify-center mx-auto mb-6">
                    <i data-lucide="package-search" class="w-12 h-12 text-slate-300"></i>
                </div>
                <h3 class="text-xl font-black text-slate-800">Belum Ada Produk</h3>
                <p class="text-sm font-bold text-slate-400 mt-2">Klik tombol di atas untuk menambah produk baru</p>
            </div>
        @endforelse
    </div>

    {{-- Section Title for Zone Prices --}}
    <div class="pt-8 border-t border-slate-100 space-y-3">
        <h2 class="text-3xl font-black text-slate-900 tracking-tight">Tarif Ongkos Kirim per Zona</h2>
        <div class="flex items-center gap-2">
            <span class="w-8 h-1 bg-blue-500 rounded-full"></span>
            <p class="text-slate-500 font-bold uppercase text-[10px] tracking-[0.2em]">Pengaturan Biaya Pengiriman Berdasarkan Zona & Jenis Tabung</p>
        </div>
    </div>

    {{-- Grid Content for Zone Prices --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach($zonePrices as $item)
            @php
                $isZone1 = str_contains($item->id, 'ZONE_1');
                $isZone2 = str_contains($item->id, 'ZONE_2');
                $isZone3 = str_contains($item->id, 'ZONE_3');
                $is3Kg = str_contains($item->id, '3KG');
            @endphp
            <div class="bg-white rounded-[2.5rem] shadow-[0_20px_50px_rgba(0,0,0,0.02)] border border-slate-100 p-8 flex flex-col items-center relative group overflow-hidden transition-all hover:shadow-2xl hover:shadow-blue-500/10 hover:-translate-y-2">
                
                {{-- Decorative Background --}}
                <div class="absolute -top-10 -right-10 w-32 h-32 bg-slate-50 rounded-full group-hover:scale-150 transition-transform duration-700"></div>

                {{-- Map/Shipping Icon --}}
                <div class="relative w-20 h-20 rounded-[2.2rem] overflow-hidden border border-slate-100 flex items-center justify-center mb-6 shadow-sm group-hover:rotate-6 transition-all duration-300 bg-blue-50">
                    <div class="w-full h-full flex items-center justify-center text-blue-500">
                        @if($is3Kg)
                            <i data-lucide="map-pin" class="w-10 h-10"></i>
                        @else
                            <i data-lucide="navigation" class="w-10 h-10"></i>
                        @endif
                    </div>
                </div>

                <div class="relative text-center space-y-2 mb-8">
                    <p class="text-[10px] font-black text-blue-400 uppercase tracking-widest">{{ str_replace('_', ' ', $item->id) }}</p>
                    <h3 class="text-xl font-black text-slate-800 tracking-tight leading-tight">{{ $item->name }}</h3>
                    <div class="inline-flex items-center gap-2 px-4 py-2 bg-slate-50 rounded-full">
                        <span class="text-blue-500 font-black text-lg">Rp</span>
                        <span class="text-2xl font-black text-slate-800 tracking-tighter">{{ number_format($item->price, 0, ',', '.') }}</span>
                    </div>
                </div>
                
                <div class="relative w-full translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300">
                    <button @click="editItem = { id: '{{ $item->id }}', name: '{{ addslashes($item->name) }}', price: '{{ $item->price }}', image: '' }; showEditModal = true" 
                            class="w-full flex items-center justify-center gap-2 text-slate-600 bg-slate-50 hover:bg-blue-500 hover:text-white py-3.5 rounded-2xl text-[10px] font-black uppercase tracking-widest transition-all">
                        <i data-lucide="edit-3" class="w-4 h-4"></i> Edit Tarif
                    </button>
                </div>
            </div>
        @endforeach
    </div>

    {{-- Modal Add Produk --}}
    <template x-teleport="body">
        <div x-show="showAddModal" x-cloak 
             class="fixed inset-0 z-[9000] flex items-center justify-center bg-slate-950/40 backdrop-blur-2xl px-4" 
             x-transition:enter="transition ease-out duration-300" 
             x-transition:enter-start="opacity-0" 
             x-transition:enter-end="opacity-100"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0">
            
            <div class="bg-white rounded-[3rem] w-full max-w-md shadow-2xl p-10" 
                 @click.outside="showAddModal = false"
                 x-transition:enter="transition ease-out duration-300" 
                 x-transition:enter-start="scale-90 opacity-0" 
                 x-transition:enter-end="scale-100 opacity-100">
                
                <div class="flex justify-between items-center mb-8">
                    <div>
                        <h2 class="text-3xl font-black text-slate-900">Produk Baru</h2>
                        <p class="text-slate-400 text-xs font-bold uppercase tracking-widest mt-1">Lengkapi detail produk</p>
                    </div>
                    <button @click="showAddModal = false" class="w-12 h-12 flex items-center justify-center bg-slate-100 rounded-2xl hover:bg-red-100 hover:text-red-500 transition-all"><i data-lucide="x" class="w-6 h-6"></i></button>
                </div>

                <form action="{{ route('admin.harga.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
                    @csrf
                    <div class="space-y-2">
                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-4">Nama Produk</label>
                        <div class="relative">
                            <i data-lucide="box" class="absolute left-6 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400"></i>
                            <input type="text" name="name" required placeholder="Contoh: Gas Elpiji 12kg" 
                                   class="w-full pl-16 pr-6 py-5 rounded-3xl border border-slate-100 bg-slate-50 focus:bg-white focus:ring-4 focus:ring-orange-500/10 outline-none transition-all font-bold text-slate-800">
                        </div>
                    </div>

                    <div class="space-y-2">
                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-4">Harga Jual (Rp)</label>
                        <div class="relative">
                            <span class="absolute left-6 top-1/2 -translate-y-1/2 font-black text-slate-400">Rp</span>
                            <input type="number" name="price" required placeholder="0" 
                                   class="w-full pl-16 pr-6 py-5 rounded-3xl border border-slate-100 bg-slate-50 focus:bg-white focus:ring-4 focus:ring-orange-500/10 outline-none transition-all font-bold text-slate-800">
                        </div>
                    </div>

                    <div class="space-y-2">
                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-4">Foto Produk (Opsional)</label>
                        <div class="relative">
                            <input type="file" name="image" accept="image/*" 
                                   class="w-full px-5 py-4 rounded-3xl border border-slate-100 bg-slate-50 font-bold text-xs text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-xs file:font-black file:bg-orange-500 file:text-white hover:file:bg-orange-600 transition-all">
                        </div>
                        <p class="text-[9px] text-slate-400 font-bold ml-4">Format: JPG, PNG, WEBP (Maks: 2MB)</p>
                    </div>
                    
                    <button type="submit" class="w-full mt-4 bg-slate-900 text-white py-6 rounded-[2rem] font-black shadow-2xl shadow-slate-900/30 hover:bg-orange-500 active:scale-95 transition-all flex items-center justify-center gap-4 uppercase tracking-[0.2em] text-sm">
                        <i data-lucide="save" class="w-6 h-6"></i> Simpan Produk
                    </button>
                </form>
            </div>
        </div>
    </template>

    {{-- Modal Edit Harga --}}
    <template x-teleport="body">
        <div x-show="showEditModal" x-cloak 
             class="fixed inset-0 z-[9000] flex items-center justify-center bg-slate-950/40 backdrop-blur-2xl px-4"
             x-transition:enter="transition ease-out duration-300" 
             x-transition:enter-start="opacity-0" 
             x-transition:enter-end="opacity-100"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0">
            
            <div class="bg-white rounded-[3rem] w-full max-w-sm shadow-2xl p-10" 
                 @click.outside="showEditModal = false"
                 x-transition:enter="transition ease-out duration-300" 
                 x-transition:enter-start="scale-90 opacity-0" 
                 x-transition:enter-end="scale-100 opacity-100">
                
                <div class="flex justify-between items-center mb-8">
                    <div>
                        <h2 class="text-3xl font-black text-slate-900">Edit Produk / Harga</h2>
                        <p x-text="editItem.name" class="text-orange-500 text-xs font-bold uppercase tracking-widest mt-1"></p>
                    </div>
                    <button @click="showEditModal = false" class="w-12 h-12 flex items-center justify-center bg-slate-100 rounded-2xl hover:bg-red-100 hover:text-red-500 transition-all"><i data-lucide="x" class="w-6 h-6"></i></button>
                </div>

                <form :action="`{{ url('/admin/harga') }}/${editItem.id}`" method="POST" enctype="multipart/form-data" class="space-y-6">
                    @csrf
                    @method('PUT')
                    
                    <div class="space-y-2">
                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-4">Nominal Harga Baru (Rp)</label>
                        <div class="relative">
                            <span class="absolute left-6 top-1/2 -translate-y-1/2 font-black text-slate-400">Rp</span>
                            <input type="number" name="price" :value="editItem.price" required
                                   class="w-full pl-16 pr-6 py-5 rounded-3xl border border-slate-100 bg-slate-50 focus:bg-white focus:ring-4 focus:ring-orange-500/10 outline-none transition-all font-bold text-slate-800">
                        </div>
                    </div>

                    <div class="space-y-2">
                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-4">Ubah Foto Produk (Opsional)</label>
                        <template x-if="editItem.image">
                            <div class="mb-2 flex items-center gap-3 bg-slate-50 p-2 rounded-2xl border border-slate-100">
                                <img :src="editItem.image" class="w-10 h-10 rounded-xl object-cover border border-slate-200 shadow-sm">
                                <span class="text-[10px] font-bold text-slate-500">Foto Saat Ini</span>
                            </div>
                        </template>
                        <input type="file" name="image" accept="image/*" 
                               class="w-full px-5 py-4 rounded-3xl border border-slate-100 bg-slate-50 font-bold text-xs text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-xs file:font-black file:bg-orange-500 file:text-white hover:file:bg-orange-600 transition-all">
                    </div>
                    
                    <button type="submit" class="w-full mt-4 bg-slate-900 text-white py-6 rounded-[2rem] font-black shadow-2xl shadow-slate-900/30 hover:bg-orange-500 active:scale-95 transition-all flex items-center justify-center gap-4 uppercase tracking-[0.2em] text-sm">
                        <i data-lucide="check-circle-2" class="w-6 h-6"></i> Update Produk
                    </button>
                </form>
            </div>
        </div>
    </template>
</div>
@endsection

@push('scripts')
<script>
    // Lucide icons initialization is usually handled in layout, but ensuring it here
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }

    function confirmDeleteProduct(button) {
        Swal.fire({
            title: 'Hapus Produk?',
            text: 'Tindakan ini tidak dapat dibatalkan.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#ef4444',
            cancelButtonColor: '#94a3b8',
            confirmButtonText: 'Ya, Hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                button.closest('form').submit();
            }
        });
    }
</script>
@endpush
