@extends('admin.layouts.app')

@section('title', 'Edit Product')
@section('page-title', 'Edit Product')

@section('content')
<form method="POST" action="{{ route('admin.products.update', $product->id) }}" enctype="multipart/form-data" class="bg-white p-4 md:p-6 lg:p-8 rounded-2xl shadow-md border border-[#e8ddd0]">
    @csrf
    @method('PUT')
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
            <label for="name" class="block text-sm font-semibold mb-2 text-[#524438]">Product Name *</label>
            <input type="text" id="name" name="name" required value="{{ old('name', $product->name) }}" 
                   class="w-full px-3 md:px-4 py-2 md:py-3 border-2 border-[#e8ddd0] rounded-xl focus:ring-2 focus:ring-[#9d8566] focus:border-[#9d8566] transition-all outline-none text-[#524438] text-sm md:text-base">
        </div>
        
        <div>
            <label for="category_id" class="block text-sm font-semibold mb-2 text-[#524438]">Category *</label>
            <select id="category_id" name="category_id" required class="w-full px-3 md:px-4 py-2 md:py-3 border-2 border-[#e8ddd0] rounded-xl focus:ring-2 focus:ring-[#9d8566] focus:border-[#9d8566] transition-all outline-none text-[#524438] bg-white text-sm md:text-base">
                @foreach($categories as $category)
                    <option value="{{ $category->id }}" {{ $product->category_id == $category->id ? 'selected' : '' }}>
                        {{ $category->name }}
                    </option>
                @endforeach
            </select>
        </div>
        
        <div>
            <label for="price" class="block text-sm font-semibold mb-2 text-[#524438]">Price (R) *</label>
            <input type="number" id="price" name="price" step="0.01" min="0" required value="{{ old('price', $product->price) }}" 
                   class="w-full px-3 md:px-4 py-2 md:py-3 border-2 border-[#e8ddd0] rounded-xl focus:ring-2 focus:ring-[#9d8566] focus:border-[#9d8566] transition-all outline-none text-[#524438] text-sm md:text-base">
        </div>
        
        <div>
            <label for="sale_price" class="block text-sm font-semibold mb-2 text-[#524438]">Sale Price (R) <span class="text-[#9d8566] text-xs">(Optional)</span></label>
            <input type="number" id="sale_price" name="sale_price" step="0.01" min="0" value="{{ old('sale_price', $product->sale_price) }}" 
                   class="w-full px-3 md:px-4 py-2 md:py-3 border-2 border-[#e8ddd0] rounded-xl focus:ring-2 focus:ring-[#9d8566] focus:border-[#9d8566] transition-all outline-none text-[#524438] text-sm md:text-base">
            <p class="text-xs text-gray-500 mt-1">Leave empty if not on sale. Must be less than regular price.</p>
            @error('sale_price')<p class="text-red-500 text-sm mt-1">{{ $message }}</p>@enderror
        </div>
        
        <div class="flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-6">
            <label class="flex items-center cursor-pointer">
                <input type="checkbox" name="featured" value="1" {{ $product->featured ? 'checked' : '' }} class="w-4 h-4 text-[#7d6a52] border-[#e8ddd0] rounded focus:ring-[#9d8566] mr-2">
                <span class="text-sm md:text-base text-[#524438]">Featured Product</span>
            </label>
            <label class="flex items-center cursor-pointer">
                <input type="checkbox" name="availability" value="1" {{ $product->availability ? 'checked' : '' }} class="w-4 h-4 text-[#7d6a52] border-[#e8ddd0] rounded focus:ring-[#9d8566] mr-2">
                <span class="text-sm md:text-base text-[#524438]">Available</span>
            </label>
        </div>
        
        <div class="md:col-span-2">
            <label for="description" class="block text-sm font-semibold mb-2 text-[#524438]">Description</label>
            <textarea id="description" name="description" rows="4" 
                      class="w-full px-3 md:px-4 py-2 md:py-3 border-2 border-[#e8ddd0] rounded-xl focus:ring-2 focus:ring-[#9d8566] focus:border-[#9d8566] transition-all outline-none text-[#524438] resize-none text-sm md:text-base">{{ old('description', $product->description) }}</textarea>
        </div>
        
        @if($product->images->count() > 0)
            <div class="md:col-span-2">
                <label class="block text-sm font-medium mb-2">Current Images</label>
                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 md:gap-4">
                    @foreach($product->images as $image)
                        <div class="relative">
                            <img src="{{ $image->image_data_url }}" alt="Product Image" class="w-full h-32 object-cover rounded">
                            <div class="absolute top-2 left-2">
                                <label class="flex items-center">
                                    <input type="radio" name="primary_image" value="{{ $image->id }}" {{ $image->is_primary ? 'checked' : '' }} class="mr-1">
                                    <span class="text-xs text-white bg-black bg-opacity-50 px-1 rounded">Primary</span>
                                </label>
                            </div>
                            <label class="absolute top-2 right-2">
                                <input type="checkbox" name="delete_images[]" value="{{ $image->id }}" class="mr-1">
                                <span class="text-xs text-white bg-red-500 px-1 rounded">Delete</span>
                            </label>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
        
        <div class="md:col-span-2">
            <label for="images" class="block text-sm font-semibold mb-2 text-[#524438]">Add New Images</label>
            <input type="file" id="images" name="images[]" multiple accept="image/*" 
                   class="w-full px-3 md:px-4 py-2 md:py-3 border-2 border-[#e8ddd0] rounded-xl focus:ring-2 focus:ring-[#9d8566] focus:border-[#9d8566] transition-all outline-none text-[#524438] text-sm md:text-base"
                   onchange="previewNewImages(this)">
            <p class="text-sm text-[#645443] mt-2 bg-[#faf8f5] p-3 rounded-lg border border-[#e8ddd0]">
                <strong>💡 Tip:</strong> You can select multiple images at once. The first image will automatically be set as the primary (main) image.
            </p>
            <div id="new-image-preview" class="grid grid-cols-4 gap-4 mt-4"></div>
        </div>
        
        <div class="md:col-span-2">
            <label class="block text-sm font-semibold mb-2 text-[#524438]">
                Specifications
                <span class="text-[#9d8566] text-xs font-normal">(Optional)</span>
            </label>
            <div class="bg-[#faf8f5] p-4 rounded-xl border border-[#e8ddd0] mb-3">
                <p class="text-sm text-[#645443] mb-3"><strong>What are Specifications?</strong></p>
                <p class="text-xs text-[#645443] mb-2">Add additional product details that will be displayed on the product page. Examples: Size, Ingredients, Allergens, Storage instructions, etc.</p>
            </div>
            
            <div id="specifications-container" class="space-y-3 mb-3">
                <!-- Specifications will be added here dynamically -->
            </div>
            
            <button type="button" onclick="addSpecification()" class="bg-[#9d8566] text-white px-4 py-2 rounded-xl hover:bg-[#b8a088] transition-all font-medium text-sm flex items-center gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                </svg>
                Add Specification
            </button>
            
            <!-- Hidden input to store JSON -->
            <input type="hidden" id="specs" name="specs" value="{{ old('specs', $product->specs ? json_encode($product->specs) : '') }}">
        </div>
    </div>
    
    <div class="mt-8 flex gap-4">
        <button type="submit" class="w-full sm:w-auto bg-[#7d6a52] text-white px-6 md:px-8 py-2 md:py-3 rounded-full hover:bg-[#9d8566] transition-all font-semibold shadow-lg hover:shadow-xl transform hover:scale-105 text-sm md:text-base">
            Update Product
        </button>
        <a href="{{ route('admin.products.index') }}" class="w-full sm:w-auto bg-[#e8ddd0] text-[#524438] px-6 md:px-8 py-2 md:py-3 rounded-full hover:bg-[#d4c4b0] transition-all font-semibold text-center text-sm md:text-base">
            Cancel
        </a>
    </div>
</form>
@endsection

@push('scripts')
<script>
let specCounter = 0;

function addSpecification(key = '', value = '') {
    const container = document.getElementById('specifications-container');
    const div = document.createElement('div');
    div.className = 'flex gap-3 items-start bg-white p-4 rounded-xl border border-[#e8ddd0]';
    div.id = `spec-${specCounter}`;
    
    div.innerHTML = `
        <div class="flex-1">
            <input type="text" 
                   placeholder="Specification name (e.g., Size, Ingredients, Allergens)" 
                   value="${key.replace(/"/g, '&quot;')}"
                   class="spec-key w-full px-4 py-2 border-2 border-[#e8ddd0] rounded-lg focus:ring-2 focus:ring-[#9d8566] focus:border-[#9d8566] transition-all outline-none text-[#524438] text-sm"
                   onchange="updateSpecsJSON()">
        </div>
        <div class="flex-1">
            <input type="text" 
                   placeholder="Value (e.g., Medium, Flour, Sugar, Eggs)" 
                   value="${value.replace(/"/g, '&quot;')}"
                   class="spec-value w-full px-4 py-2 border-2 border-[#e8ddd0] rounded-lg focus:ring-2 focus:ring-[#9d8566] focus:border-[#9d8566] transition-all outline-none text-[#524438] text-sm"
                   onchange="updateSpecsJSON()">
        </div>
        <button type="button" 
                onclick="removeSpecification(${specCounter})" 
                class="bg-[#c97d60] text-white px-3 py-2 rounded-lg hover:bg-[#b86a4f] transition-all">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
        </button>
    `;
    
    container.appendChild(div);
    specCounter++;
    updateSpecsJSON();
}

function removeSpecification(id) {
    const element = document.getElementById(`spec-${id}`);
    if (element) {
        element.remove();
        updateSpecsJSON();
    }
}

function updateSpecsJSON() {
    const container = document.getElementById('specifications-container');
    const specs = {};
    
    container.querySelectorAll('[id^="spec-"]').forEach(specDiv => {
        const keyInput = specDiv.querySelector('.spec-key');
        const valueInput = specDiv.querySelector('.spec-value');
        
        if (keyInput && valueInput && keyInput.value.trim() && valueInput.value.trim()) {
            specs[keyInput.value.trim()] = valueInput.value.trim();
        }
    });
    
    document.getElementById('specs').value = Object.keys(specs).length > 0 ? JSON.stringify(specs) : '';
}

// Load existing specs
@php
    $existingSpecs = old('specs') ? (is_string(old('specs')) ? json_decode(old('specs'), true) : old('specs')) : ($product->specs ?? []);
    if (!is_array($existingSpecs)) {
        $existingSpecs = [];
    }
@endphp
@if($existingSpecs && count($existingSpecs) > 0)
    @foreach($existingSpecs as $key => $value)
        addSpecification('{{ addslashes($key) }}', '{{ addslashes($value) }}');
    @endforeach
@endif

function previewNewImages(input) {
    const preview = document.getElementById('new-image-preview');
    preview.innerHTML = '';
    
    if (input.files) {
        Array.from(input.files).forEach(file => {
            const reader = new FileReader();
            reader.onload = function(e) {
                const div = document.createElement('div');
                div.className = 'relative';
                div.innerHTML = `
                    <img src="${e.target.result}" class="w-full h-32 object-cover rounded">
                    <span class="absolute top-1 left-1 bg-green-600 text-white text-xs px-2 py-1 rounded">New</span>
                `;
                preview.appendChild(div);
            };
            reader.readAsDataURL(file);
        });
    }
}
</script>
@endpush