@extends('admin.layouts.app')

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

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />
<style>
    .quill-editor {
        min-height: 250px;
        background: #fff;
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
    }
    .ql-toolbar.ql-snow {
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
        background: #f9fafb;
        border-color: #d1d5db;
    }
    .ql-container.ql-snow {
        border-color: #d1d5db;
    }
    /* Label styling consistency */
    .wysiwyg-label {
        display: block;
        font-size: 0.875rem;
        font-weight: 500;
        color: #111827;
        margin-bottom: 0.5rem;
    }
</style>
@endpush

@section('content')
<div class="max-w-2xl mx-auto bg-white rounded-lg shadow p-8">
    {{-- MAIN UPDATE FORM --}}
    <form id="product-form" action="{{ route('admin.products.update', $product) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        {{-- Basic Information --}}
        <div class="mb-6">
            <label for="name" class="block text-sm font-medium text-gray-900 mb-2">Product Name *</label>
            <input type="text" name="name" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 @error('name') border-red-500 @enderror" value="{{ old('name', $product->name) }}" required>
            @error('name') <p class="text-red-600 text-sm mt-1">{{ $message }}</p> @enderror
        </div>

        <div class="mb-6">
            <label for="sku" class="block text-sm font-medium text-gray-900 mb-2">SKU *</label>
            <input type="text" name="sku" id="sku" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 @error('sku') border-red-500 @enderror" value="{{ old('sku', $product->sku) }}" required>
            @error('sku') <p class="text-red-600 text-sm mt-1">{{ $message }}</p> @enderror
        </div>

        <div class="mb-6">
            <label for="category_id" class="block text-sm font-medium text-gray-900 mb-2">Category *</label>
            <select name="category_id" id="category_id" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500" required>
                <option value="">Select a category</option>
                @foreach ($categories as $category)
                    <option value="{{ $category->id }}" {{ old('category_id', $product->category_id) == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                @endforeach
            </select>
        </div>

        {{-- Description (WYSIWYG) --}}
        <div class="mb-6">
            <label for="description" class="wysiwyg-label">Description</label>
            {{-- Hidden textarea that CKEditor syncs to on submit --}}
            <textarea name="description" id="description" style="display:none;">{{ old('description', $product->description) }}</textarea>
            {{-- CKEditor mounts here --}}
            <div id="description-editor" class="quill-editor"></div>
            @error('description') <p class="text-red-600 text-sm mt-1">{{ $message }}</p> @enderror
        </div>

        <div class="grid grid-cols-2 gap-6 mb-6">
            <div>
                <label for="price" class="block text-sm font-medium text-gray-900 mb-2">Price *</label>
                <input type="number" name="price" id="price" step="0.01" class="w-full px-4 py-2 border border-gray-300 rounded-lg" value="{{ old('price', $product->price) }}" required>
            </div>
            <div>
                <label for="cost_price" class="block text-sm font-medium text-gray-900 mb-2">Cost Price</label>
                <input type="number" name="cost_price" id="cost_price" step="0.01" class="w-full px-4 py-2 border border-gray-300 rounded-lg" value="{{ old('cost_price', $product->cost_price) }}">
            </div>
        </div>

        <div class="mb-6">
            <label for="stock_quantity" class="block text-sm font-medium text-gray-900 mb-2">Stock Quantity *</label>
            <input type="number" name="stock_quantity" id="stock_quantity" class="w-full px-4 py-2 border border-gray-300 rounded-lg" value="{{ old('stock_quantity', $product->stock_quantity) }}" required>
        </div>

        <div class="mb-6">
            <label for="warranty" class="block text-sm font-medium text-gray-900 mb-2">Warranty</label>
            <select name="warranty" id="warranty" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent">
                <option value="">-- No Warranty --</option>
                <option value="3_months" {{ old('warranty', $product->warranty) === '3_months' ? 'selected' : '' }}>3 Months</option>
                <option value="6_months" {{ old('warranty', $product->warranty) === '6_months' ? 'selected' : '' }}>6 Months</option>
                <option value="1_year" {{ old('warranty', $product->warranty) === '1_year' ? 'selected' : '' }}>1 Year</option>
                <option value="2_years" {{ old('warranty', $product->warranty) === '2_years' ? 'selected' : '' }}>2 Years</option>
            </select>
        </div>

        <!-- {{-- Variants Section --}}
        <div class="mb-6 border-t pt-6" x-data='@json(["variants" => $product->variants])'>
            <h3 class="text-lg font-medium text-gray-900 mb-4">Product Variants</h3>
            <template x-for="(variant, index) in variants" :key="index">
                <div class="grid grid-cols-5 gap-4 mb-4 items-end bg-gray-50 p-4 rounded border">
                    <input type="hidden" :name="'variants['+index+'][id]'" x-model="variant.id">
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Value</label>
                        <input type="text" :name="'variants['+index+'][attribute_value]'" x-model="variant.attribute_value" class="w-full px-3 py-2 border border-gray-300 rounded">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Unit</label>
                        <input type="text" :name="'variants['+index+'][attribute_unit]'" x-model="variant.attribute_unit" class="w-full px-3 py-2 border border-gray-300 rounded">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Price</label>
                        <input type="number" step="0.01" :name="'variants['+index+'][price]'" x-model="variant.price" class="w-full px-3 py-2 border border-gray-300 rounded">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Stock</label>
                        <input type="number" :name="'variants['+index+'][stock_quantity]'" x-model="variant.stock_quantity" class="w-full px-3 py-2 border border-gray-300 rounded">
                    </div>
                    <div class="pb-1">
                        <button type="button" @click="variants.splice(index, 1)" class="text-red-500 hover:text-red-700 text-sm font-medium">Remove</button>
                    </div>
                </div>
            </template>
            <button type="button" @click="variants.push({ id: null, attribute_value: '', attribute_unit: 'g', price: '', stock_quantity: 0 })" class="text-sm font-medium text-orange-600 hover:text-orange-700">+ Add Variant</button>
        </div> -->

        {{-- Main Image --}}
        <div class="mb-6">
            <label for="image" class="block text-sm font-medium text-gray-900 mb-2">Main Product Image</label>
            @if ($product->image)
                <div class="mb-4">
                    <img src="{{ public_storage_url($product->image) }}" class="h-32 w-32 object-cover rounded shadow">
                </div>
            @endif
            <input type="file" name="image" id="image" class="w-full px-4 py-2 border border-gray-300 rounded-lg" accept="image/*">
        </div>

        {{-- Video Provider --}}
        <div class="grid grid-cols-2 gap-6 mb-6">
            <div>
                <label for="video_provider" class="block text-sm font-medium text-gray-900 mb-2">Video Provider</label>
                <select name="video_provider" id="video_provider" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
                    <option value="">-- Select Provider --</option>
                    <option value="youtube" {{ old('video_provider', $product->video_provider) === 'youtube' ? 'selected' : '' }}>YouTube</option>
                    <option value="vimeo" {{ old('video_provider', $product->video_provider) === 'vimeo' ? 'selected' : '' }}>Vimeo</option>
                </select>
            </div>
            <div>
                <label for="video_id" class="block text-sm font-medium text-gray-900 mb-2">Video ID</label>
                <input type="text" name="video_id" id="video_id" class="w-full px-4 py-2 border border-gray-300 rounded-lg" value="{{ old('video_id', $product->video_id) }}" placeholder="e.g., dQw4w9WgXcQ">
            </div>
        </div>

        {{-- Gallery Images --}}
        <div class="mb-6">
            <label class="block text-sm font-medium text-gray-900 mb-2">Gallery Images</label>
            @if ($product->images->count() > 0)
                <div class="mb-4 grid grid-cols-2 md:grid-cols-4 gap-4">
                    @foreach ($product->images as $productImage)
                        <div class="relative group">
                            <img src="{{ public_storage_url($productImage->image_path) }}" class="h-24 w-24 object-cover rounded border">
                            <div class="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition">
                                <button type="button" onclick="confirmDeleteGalleryImage({{ $productImage->id }})" class="bg-red-500 hover:bg-red-600 text-white p-1 rounded">✕</button>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
            <input type="file" name="gallery_images[]" id="gallery_images" class="w-full px-4 py-2 border border-gray-300 rounded-lg" accept="image/*" multiple>
        </div>

        <div class="mb-6">
            <label class="flex items-center cursor-pointer">
                <input type="checkbox" name="is_featured" value="1" class="rounded border-gray-300 text-orange-600" {{ old('is_featured', $product->is_featured) ? 'checked' : '' }}>
                <span class="ml-2 text-sm text-gray-900">Featured Product</span>
            </label>
        </div>

        <div class="flex gap-4 border-t pt-6">
            <button type="submit" class="px-6 py-2 bg-orange-500 hover:bg-orange-600 text-white rounded-lg font-bold shadow-md transition">
                Update Product
            </button>
            <a href="{{ route('admin.products.index') }}" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition text-center">
                Cancel
            </a>
        </div>
    </form>
</div>

{{-- HIDDEN DELETE FORMS (Moved outside the main form) --}}
@foreach ($product->images as $productImage)
    <form id="delete-gallery-form-{{ $productImage->id }}" action="{{ route('admin.products.delete-image', $productImage) }}" method="POST" style="display: none;">
        @csrf
        @method('DELETE')
    </form>
@endforeach

<script>
    function confirmDeleteGalleryImage(id) {
        if (confirm('Are you sure you want to delete this gallery image?')) {
            document.getElementById('delete-gallery-form-' + id).submit();
        }
    }
</script>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
<script>
    const toolbarOptions = [
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
        ['bold', 'italic', 'underline', 'strike'],
        ['link', 'blockquote', 'code-block'],
        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
        ['clean']
    ];

    const descriptionEditor = new Quill('#description-editor', {
        theme: 'snow',
        modules: { toolbar: toolbarOptions }
    });

    const oldDescription = document.querySelector('#description').value;
    if (oldDescription) {
        descriptionEditor.clipboard.dangerouslyPasteHTML(oldDescription);
    }

    const contentEditor = new Quill('#content-editor', {
        theme: 'snow',
        modules: { toolbar: toolbarOptions }
    });

    const oldContent = document.querySelector('#content').value;
    if (oldContent) {
        contentEditor.clipboard.dangerouslyPasteHTML(oldContent);
    }

    document.querySelector('#product-form').addEventListener('submit', function () {
        document.querySelector('#description').value = descriptionEditor.root.innerHTML === '<p><br></p>' ? '' : descriptionEditor.root.innerHTML;
        document.querySelector('#content').value = contentEditor.root.innerHTML === '<p><br></p>' ? '' : contentEditor.root.innerHTML;
    });
</script>
@endpush

@endsection