@extends('layouts.admin')

@section('header', 'Edit Produk')

@section('content')
<div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md p-6">
    <form action="{{ route('admin.products.update', $product->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        
        <!-- Product Details -->
        <h3 class="text-lg font-bold text-gray-800 mb-4 border-b pb-2">Detail Produk</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Nama Produk</label>
                <input type="text" name="name" value="{{ old('name', $product->name) }}" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Kategori (Bisa pilih lebih dari satu)</label>
                <div class="border border-gray-300 rounded-lg p-3 h-48 overflow-y-auto bg-gray-50">
                    @php
                        $selectedCategories = old('categories', $product->categories->pluck('id')->toArray());
                        // Fallback to category_id if pivot table is empty (Legacy Data Support)
                        if (empty($selectedCategories) && $product->category_id && !old('categories')) {
                            $selectedCategories = [$product->category_id];
                        }
                    @endphp
                    @foreach($categories as $category)
                        <div class="flex items-center mb-2 last:mb-0">
                            <input type="checkbox" name="categories[]" value="{{ $category->id }}" id="cat_{{ $category->id }}" 
                                class="w-4 h-4 text-yellow-600 rounded border-gray-300 focus:ring-yellow-500"
                                {{ collect($selectedCategories)->contains($category->id) ? 'checked' : '' }}>
                            <label for="cat_{{ $category->id }}" class="ml-2 text-sm text-gray-700 cursor-pointer select-none">{{ $category->name }}</label>
                        </div>
                    @endforeach
                </div>
                <p class="text-xs text-gray-500 mt-1">Gulir untuk melihat semua kategori. Kategori pertama yang dipilih akan menjadi kategori utama.</p>
            </div>


            <!-- Product Variations Removed -->

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Harga Produk</label>
                <input type="number" name="starting_price" value="{{ old('starting_price', $product->starting_price) }}" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
            </div>
            


            <!-- Promotion Settings -->
            <div class="md:col-span-2 border p-4 rounded-lg bg-yellow-50">
                <label class="block text-sm font-bold text-gray-700 mb-3">Pengaturan Promosi</label>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Discount %</label>
                        <div class="flex items-center">
                            <input type="number" name="discount_percentage" value="{{ old('discount_percentage', $product->discount_percentage ?? 0) }}" min="0" max="100" class="w-full px-3 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
                            <span class="bg-gray-100 px-3 py-2 border border-l-0 border-gray-300 rounded-r-lg text-gray-600">%</span>
                        </div>
                        <p class="text-xs text-gray-500 mt-1">Akan muncul di atas harga produk</p>
                    </div>
                    
                    <div class="flex items-center h-full pt-6">
                        <label class="flex items-center space-x-3 cursor-pointer">
                            <input type="checkbox" name="is_top_seller" value="1" {{ old('is_top_seller', $product->is_top_seller) ? 'checked' : '' }} class="w-5 h-5 text-yellow-600 rounded border-gray-300 focus:ring-yellow-500">
                            <span class="text-sm font-medium text-gray-700">Tampilkan Badge "Top Seller"</span>
                        </label>
                    </div>
                </div>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
                <select name="status" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
                    <option value="active" {{ old('status', $product->status) == 'active' ? 'selected' : '' }}>Aktif</option>
                    <option value="closed" {{ old('status', $product->status) == 'closed' ? 'selected' : '' }}>Berakhir</option>
                    <option value="pending" {{ old('status', $product->status) == 'pending' ? 'selected' : '' }}>Pending</option>
                </select>
            </div>
        </div>



        <!-- Existing Images -->
        <h3 class="text-lg font-bold text-gray-800 mb-4 border-b pb-2">Gambar Saat Ini</h3>
        <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
            @foreach($product->images as $image)
                <div class="relative group">
                    <img src="{{ $image->image_path }}" alt="Product Image" class="w-full h-32 object-cover rounded-lg border">
                    <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition flex items-center justify-center rounded-lg">
                        <label class="flex items-center gap-2 text-white cursor-pointer">
                            <input type="checkbox" name="delete_images[]" value="{{ $image->id }}" class="w-4 h-4 text-red-600 rounded">
                            <span class="text-sm font-bold">Hapus</span>
                        </label>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Add New Images -->
        <h3 class="text-lg font-bold text-gray-800 mb-4 border-b pb-2">Tambah Gambar Baru</h3>
        <div class="mb-6">
            <div id="image-inputs" class="space-y-3">
                <!-- Dynamic Inputs will be added here -->
            </div>
            <button type="button" id="add-image-btn" class="mt-3 text-sm text-blue-600 hover:text-blue-800">
                <i class="fas fa-plus"></i> Tambah Gambar
            </button>
            <p class="text-xs text-gray-500 mt-2">Maksimal total gambar (termasuk yang lama) adalah 5.</p>
        </div>

        <div class="mt-8 flex gap-4">
            <a href="{{ route('admin.products.index') }}" class="w-1/3 bg-gray-500 text-white font-bold py-3 rounded-xl hover:bg-gray-600 transition shadow-lg text-center">
                Batal
            </a>
            <button type="submit" class="w-2/3 bg-yellow-600 text-white font-bold py-3 rounded-xl hover:bg-yellow-700 transition shadow-lg">
                Simpan Perubahan
            </button>
        </div>
    </form>
</div>

<script>
    // Image Input Logic
    const imageContainer = document.getElementById('image-inputs');
    const addImageBtn = document.getElementById('add-image-btn');
    let imageCount = {{ $product->images->count() }}; // Initial count from existing images

    addImageBtn.addEventListener('click', () => {
        if (imageCount < 5) {
            imageCount++;
            const div = document.createElement('div');
            div.className = 'p-4 border rounded-lg bg-gray-50 mb-3';
            div.innerHTML = `
                <div class="mb-2">
                    <label class="block text-xs font-bold text-gray-500 mb-1">Gambar Baru (Upload)</label>
                    <input type="file" name="images[${imageCount}][file]" accept="image/*" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-yellow-50 file:text-yellow-700 hover:file:bg-yellow-100">
                </div>
                <div class="text-center text-xs text-gray-400 my-1">- ATAU -</div>
                <div>
                    <label class="block text-xs font-bold text-gray-500 mb-1">Gambar Baru (URL)</label>
                    <input type="url" name="images[${imageCount}][url]" placeholder="https://..." class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                </div>
                <button type="button" class="text-red-500 hover:text-red-700 mt-2 text-sm" onclick="removeImage(this)">
                    <i class="fas fa-trash"></i> Batal
                </button>
            `;
            imageContainer.appendChild(div);
        } else {
            alert('Maksimal 5 gambar.');
        }
    });

    function removeImage(btn) {
        btn.parentElement.remove();
        imageCount--;
        addImageBtn.style.display = 'block';
    }
</script>
@endsection