@extends('admin.layouts.app')

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

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

        <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 focus:border-transparent @error('name') border-red-500 @enderror" value="{{ old('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 focus:border-transparent @error('sku') border-red-500 @enderror" value="{{ old('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 focus:border-transparent @error('category_id') border-red-500 @enderror" required>
                <option value="">Select a category</option>
                @foreach ($categories as $category)
                    <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                @endforeach
            </select>
            @error('category_id')
                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
            @enderror
        </div>

        {{-- Description (WYSIWYG) --}}
        <div class="mb-6">
            <label for="description" class="wysiwyg-label">Description</label>
            <textarea name="description" id="description" style="display:none;">{{ old('description') }}</textarea>
            <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 focus:ring-2 focus:ring-orange-500 focus:border-transparent @error('price') border-red-500 @enderror" value="{{ old('price') }}" required>
                @error('price')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                @enderror
            </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 focus:ring-2 focus:ring-orange-500 focus:border-transparent @error('cost_price') border-red-500 @enderror" value="{{ old('cost_price') }}">
                @error('cost_price')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                @enderror
            </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 focus:ring-2 focus:ring-orange-500 focus:border-transparent @error('stock_quantity') border-red-500 @enderror" value="{{ old('stock_quantity', 0) }}" required>
            @error('stock_quantity')
                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
            @enderror
        </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 @error('warranty') border-red-500 @enderror">
                <option value="">-- No Warranty --</option>
                <option value="3_months" {{ old('warranty') === '3_months' ? 'selected' : '' }}>3 Months</option>
                <option value="6_months" {{ old('warranty') === '6_months' ? 'selected' : '' }}>6 Months</option>
                <option value="1_year" {{ old('warranty') === '1_year' ? 'selected' : '' }}>1 Year</option>
                <option value="2_years" {{ old('warranty') === '2_years' ? 'selected' : '' }}>2 Years</option>
            </select>
            @error('warranty')
                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
            @enderror
        </div>

        <!-- <div class="mb-6 border-t pt-6" x-data="{ variants: [] }">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Product Variants (Optional)</h3>
            <p class="text-sm text-gray-500 mb-4">Add different options like weights or sizes with specific prices.</p>

            <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">
                    <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 focus:ring-1 focus:ring-orange-500" placeholder="e.g. 500">
                    </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 focus:ring-1 focus:ring-orange-500" placeholder="e.g. g">
                    </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 focus:ring-1 focus:ring-orange-500">
                    </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 focus:ring-1 focus:ring-orange-500">
                    </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({ attribute_value: '', attribute_unit: 'g', price: '', stock_quantity: 0 })" class="flex items-center text-sm font-medium text-orange-600 hover:text-orange-700">
                <svg class="w-4 h-4 mr-1" 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 Variant
            </button>
        </div> -->

        <div class="mb-6">
            <label for="image" class="block text-sm font-medium text-gray-900 mb-2">Product Image</label>
            <input type="file" name="image" id="image" class="w-full px-4 py-2 border border-gray-300 rounded-lg" accept="image/*">
            @error('image')
                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-6">
            <label for="youtube_video_url" class="block text-sm font-medium text-gray-900 mb-2">YouTube Video URL</label>
            <input type="url" name="youtube_video_url" id="youtube_video_url" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent @error('youtube_video_url') border-red-500 @enderror" value="{{ old('youtube_video_url') }}" placeholder="https://www.youtube.com/watch?v=...">
            <p class="text-xs text-gray-500 mt-1">Add a YouTube video URL to display on the product page</p>
            @error('youtube_video_url')
                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
            @enderror
        </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 focus:ring-orange-500" {{ old('is_featured') ? 'checked' : '' }}>
                <span class="ml-2 text-sm text-gray-900">Featured Product</span>
            </label>
        </div>

        <div class="flex gap-4">
            <button type="submit" class="px-6 py-2 bg-orange-500 hover:bg-orange-600 text-white rounded-lg transition">
                Create Product
            </button>
            <a href="{{ route('admin.products.index') }}" class="px-6 py-2 bg-gray-300 hover:bg-gray-400 text-gray-900 rounded-lg transition">
                Cancel
            </a>
        </div>
    </form>
</div>
@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

@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