@extends('admin.layout')

@section('header', 'Add 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.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="mb-4">
            <label class="block text-gray-700 font-bold mb-2">Name</label>
            <input type="text" name="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>
            <input type="file" name="image" class="w-full border rounded px-3 py-2" accept="image/*">
        </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"></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" class="w-full border rounded px-3 py-2">
        </div>
        
        <hr class="my-6">
        <h3 class="text-lg font-bold mb-4">Variations (Optional)</h3>
        <div id="variations-container">
            <div class="flex gap-4 mb-2 variation-row">
                <input type="text" name="variations[0][variation_name]" placeholder="Name (e.g. Size)" class="flex-1 border rounded px-3 py-2">
                <input type="text" name="variations[0][variation_value]" placeholder="Value (e.g. 500ml)" class="flex-1 border rounded px-3 py-2">
                <input type="number" step="0.01" name="variations[0][price]" placeholder="Variation Price (e.g. 15)" class="w-32 border rounded px-3 py-2" value="">
            </div>
        </div>
        <button type="button" id="add-variation" class="text-blue-600 text-sm mt-2 font-medium">+ Add Another 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">Save Product</button>
            <a href="{{ route('admin.products.index') }}" class="ml-4 text-gray-600 hover:underline">Cancel</a>
        </div>
    </form>
</div>

<script>
    let variationCount = 1;
    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="text" name="variations[${variationCount}][variation_name]" placeholder="Name (e.g. Size)" class="flex-1 border rounded px-3 py-2">
            <input type="text" name="variations[${variationCount}][variation_value]" placeholder="Value (e.g. 500ml)" class="flex-1 border rounded px-3 py-2">
            <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="">
        `;
        container.appendChild(row);
        variationCount++;
    });
</script>
@endsection