@extends('admin.layout')

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

@section('content')
<div class="mb-4">
    <a href="{{ route('admin.products.index') }}" class="text-blue-600 hover:text-blue-800 font-medium transition">&larr; Back to Products</a>
</div>
<div class="bg-white p-6 rounded shadow max-w-2xl">
    <form action="{{ route('admin.products.update', $product) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        <div class="mb-4">
            <label class="block text-gray-700 font-bold mb-2">Name</label>
            <input type="text" name="name" value="{{ $product->name }}" class="w-full border rounded px-3 py-2" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 font-bold mb-2">Product Image</label>
            @if($product->image)
                <div class="mb-2"><img src="{{ asset('storage/'.$product->image) }}" class="h-24 rounded border"></div>
            @endif
            <input type="file" name="image" class="w-full border rounded px-3 py-2" accept="image/*">
            <small class="text-gray-500">Leave blank to keep current image</small>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 font-bold mb-2">Description</label>
            <textarea name="description" class="w-full border rounded px-3 py-2">{{ $product->description }}</textarea>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 font-bold mb-2">Base Price</label>
            <input type="number" step="0.01" name="base_price" value="{{ $product->base_price }}" class="w-full border rounded px-3 py-2">
        </div>
        
        <hr class="my-6">
        <h3 class="text-lg font-bold mb-4">Variations</h3>        <div id="variations-container">
            @foreach($product->variations as $index => $variation)
            <div class="flex gap-4 mb-2 variation-row">
                <input type="hidden" name="variations[{{ $index }}][id]" value="{{ $variation->id }}">
                <input type="text" name="variations[{{ $index }}][variation_name]" value="{{ $variation->variation_name }}" class="flex-1 border rounded px-3 py-2" required>
                <input type="text" name="variations[{{ $index }}][variation_value]" value="{{ $variation->variation_value }}" class="flex-1 border rounded px-3 py-2" required>
                <input type="number" step="0.01" name="variations[{{ $index }}][price]" value="{{ $variation->price }}" class="w-32 border rounded px-3 py-2" required placeholder="Price">
            </div>
            @endforeach
        </div>
        <button type="button" id="add-variation" class="text-blue-600 text-sm mt-2 font-medium">+ Add New Variation</button>

        <div class="mt-6">
            <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded shadow hover:bg-blue-700">Update Product</button>
            <a href="{{ route('admin.products.index') }}" class="ml-4 text-gray-600 hover:underline">Cancel</a>
        </div>
    </form>
</div>

<script>
    let variationCount = {{ $product->variations->count() }};
    document.getElementById('add-variation').addEventListener('click', function() {
        const container = document.getElementById('variations-container');
        const row = document.createElement('div');
        row.className = 'flex gap-4 mb-2 variation-row';
        row.innerHTML = `
            <input type="hidden" name="variations[${variationCount}][id]" value="">
            <input type="text" name="variations[${variationCount}][variation_name]" placeholder="Name (e.g. Size)" class="flex-1 border rounded px-3 py-2" required>
            <input type="text" name="variations[${variationCount}][variation_value]" placeholder="Value (e.g. 500ml)" class="flex-1 border rounded px-3 py-2" required>
            <input type="number" step="0.01" name="variations[${variationCount}][price]" placeholder="Variation Price (e.g. 15)" class="w-32 border rounded px-3 py-2" value="" required>
        `;
        container.appendChild(row);
        variationCount++;
    });
</script>
@endsection