@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'Create Product')

@section('content')

    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-semibold">Create Product</h1>
        <a href="{{ route('admin.product.index') }}" class="btn btn-primary">
            <i class="fas fa-arrow-left mr-2"></i> Back to Products
        </a>
    </div>

    <div class="card">
        <form action="{{ route('admin.product.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-8 lg:divide-x divide-border border-b border-border pb-10">
                <div class="col-span-2">
                    <!-- Basic Information -->
                    <div class="mb-10">
                        <h5 class="text-lg font-medium mb-4">Basic Information</h5>

                        <div class="mb-4 input-with-label">
                            <label>Title <span class="text-red-500">*</span></label>
                            <input type="text" name="title" id="title" value="{{ old('title') }}"
                                class="@error('title') border-red-500 @enderror" required>
                            @error('title')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="mb-4 input-with-label">
                            <label>Slug</label>
                            <input type="text" id="slug" name="slug" value="{{ old('slug') }}"
                                class="@error('slug') border-red-500 @enderror">
                            @error('slug')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                            <p class="text-xs mt-1">Leave empty to auto-generate from title</p>
                        </div>

                        <div class="mb-4 input-with-label">
                            <label>Short Description</label>
                            <textarea name="excerpt" rows="3" class="rich-editor @error('excerpt') border-red-500 @enderror">{{ old('excerpt') }}</textarea>
                            @error('excerpt')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="mb-4 input-with-label">
                            <label>Full Description</label>
                            <textarea name="content" class="rich-editor tinymce @error('content') border-red-500 @enderror">{{ old('content') }}</textarea>
                            @error('content')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Pricing -->
                    <div class="mb-10">
                        <h5 class="text-lg font-medium mb-4">Pricing</h5>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                            <!-- Regular Price -->
                            <div class="input-with-label">
                                <label class="block mb-1 font-medium">
                                    Regular Price <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <!-- Dollar Sign -->
                                    <span class="absolute inset-y-0 left-2 flex items-center text-gray-500">$</span>

                                    <!-- Input -->
                                    <input type="number" step="0.01" name="regular_price"
                                        value="{{ old('regular_price') }}"
                                        class="w-full border rounded-lg pl-12 pr-3 py-2
                       focus:outline-none focus:ring-2 focus:ring-blue-500
                       @error('regular_price') border-red-500 @enderror"
                                        placeholder="0.00" required>
                                </div>
                                @error('regular_price')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Sale Price -->
                            <div class="input-with-label">
                                <label class="block mb-1 font-medium">Sale Price</label>
                                <div class="relative">
                                    <!-- Dollar Sign -->
                                    <span class="absolute inset-y-0 left-2 flex items-center text-gray-500">$</span>

                                    <!-- Input -->
                                    <input type="number" step="0.01" name="sale_price" value="{{ old('sale_price') }}"
                                        class="w-full border rounded-lg pl-12 pr-3 py-2
                       focus:outline-none focus:ring-2 focus:ring-green-500
                       @error('sale_price') border-red-500 @enderror"
                                        placeholder="0.00">
                                </div>
                                @error('sale_price')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>


                    </div>


                    <!-- Inventory -->
                    <div class="mb-10">
                        <h5 class="text-lg font-medium mb-4">Inventory</h5>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                            <div class="input-with-label">
                                <label>SKU</label>
                                <input type="text" name="sku" value="{{ old('sku') }}"
                                    class="@error('sku') border-red-500 @enderror">
                                @error('sku')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <div class="input-with-label">
                                <label>Stock Quantity</label>
                                <input type="number" name="stock_quantity" value="{{ old('stock_quantity') }}"
                                    class="@error('stock_quantity') border-red-500 @enderror">
                                @error('stock_quantity')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-4 input-with-label">
                            <label>Stock Status</label>
                            <select name="stock_status" class="form-select @error('stock_status') border-red-500 @enderror">
                                <option value="instock" {{ old('stock_status') === 'instock' ? 'selected' : '' }}>In Stock
                                </option>
                                <option value="outofstock" {{ old('stock_status') === 'outofstock' ? 'selected' : '' }}>Out
                                    of Stock</option>
                                <option value="backorder" {{ old('stock_status') === 'backorder' ? 'selected' : '' }}>On
                                    Backorder</option>
                            </select>
                            @error('stock_status')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Shipping -->
                    <div class="mb-10">
                        <h5 class="text-lg font-medium mb-4">Shipping</h5>

                        <div class="mb-4 input-with-label">
                            <label>Weight (kg)</label>
                            <input type="number" step="0.01" name="weight" value="{{ old('weight') }}"
                                class="@error('weight') border-red-500 @enderror">
                            @error('weight')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                            <div class="input-with-label">
                                <label>Length (cm)</label>
                                <input type="number" step="0.01" name="length" value="{{ old('length') }}"
                                    class="@error('length') border-red-500 @enderror">
                                @error('length')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <div class="input-with-label">
                                <label>Width (cm)</label>
                                <input type="number" step="0.01" name="width" value="{{ old('width') }}"
                                    class="@error('width') border-red-500 @enderror">
                                @error('width')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <div class="input-with-label">
                                <label>Height (cm)</label>
                                <input type="number" step="0.01" name="height" value="{{ old('height') }}"
                                    class="@error('height') border-red-500 @enderror">
                                @error('height')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- SEO -->
                    <div>
                        <h5 class="text-lg font-medium mb-4">SEO</h5>

                        <div class="mb-4 input-with-label">
                            <label>Title</label>
                            <input type="text" name="seo_meta[title]" value="{{ old('seo_meta.title') }}"
                                class="@error('seo_meta.title') border-red-500 @enderror">
                            @error('seo_meta.title')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="mb-4 input-with-label">
                            <label>Description</label>
                            <textarea name="seo_meta[description]" class="tinymce @error('seo_meta.description') border-red-500 @enderror">{{ old('seo_meta.description') }}</textarea>
                            @error('seo_meta.description')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="mb-4 input-with-label">
                            <label>Keywords</label>
                            <input type="text" name="seo_meta[keywords]" value="{{ old('seo_meta.keywords') }}"
                                class="@error('seo_meta.keywords') border-red-500 @enderror"
                                placeholder="Enter comma separated keywords">
                            @error('seo_meta.keywords')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="flex flex-col col-span-full lg:col-span-1 lg:pl-8">
                    <!-- Publishing Options -->
                    <div class="mb-10">
                        <h3 class="mb-2">Publishing Options</h3>

                        <div class="mb-4 input-with-label">
                            <label>Status <span class="text-red-500">*</span></label>
                            <select name="status" class="form-select" required
                                class="@error('status') border-red-500 @enderror">
                                <option value="draft" {{ old('status') === 'draft' ? 'selected' : '' }}>Draft</option>
                                <option value="published" {{ old('status') === 'published' ? 'selected' : '' }}>Published
                                </option>
                            </select>
                            @error('status')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="flex items-center">
                            <input type="checkbox" name="is_featured" value="1" id="is_featured"
                                class="w-4 h-4 text-blue-600 border-gray-300 rounded"
                                {{ old('is_featured') ? 'checked' : '' }}>
                            <label for="is_featured" class="ml-2 text-sm">Featured Product</label>
                        </div>
                    </div>

                    <!-- Categories -->
                    <div class="mb-10">
                        <h3 class="mb-2">Categories</h3>
                        <div class="max-h-48 overflow-y-auto space-y-2">
                            @foreach ($categories as $category)
                                <div>
                                    <label class="flex items-center space-x-2">
                                        <input type="checkbox" name="taxonomies[]" value="{{ $category->id }}"
                                            class="rounded border-gray-300 text-blue-600"
                                            {{ in_array($category->id, old('taxonomies', [])) ? 'checked' : '' }}>
                                        <span>{{ $category->name }}</span>
                                    </label>
                                    @if ($category->children->count() > 0)
                                        <div class="ml-6 space-y-1">
                                            @foreach ($category->children as $child)
                                                <label class="flex items-center space-x-2">
                                                    <input type="checkbox" name="taxonomies[]"
                                                        value="{{ $child->id }}"
                                                        class="rounded border-gray-300 text-blue-600"
                                                        {{ in_array($child->id, old('taxonomies', [])) ? 'checked' : '' }}>
                                                    <span>— {{ $child->name }}</span>
                                                </label>
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- Tags -->
                    <div class="mb-10">
                        <h3 class="mb-2">Tags</h3>
                        <div class="max-h-48 overflow-y-auto space-y-2">
                            @foreach ($tags as $tag)
                                <label class="flex items-center space-x-2">
                                    <input type="checkbox" name="taxonomies[]" value="{{ $tag->id }}"
                                        class="rounded border-gray-300 text-blue-600"
                                        {{ in_array($tag->id, old('taxonomies', [])) ? 'checked' : '' }}>
                                    <span>{{ $tag->name }}</span>
                                </label>
                                @if ($tag->children->count() > 0)
                                    <div class="ml-6 space-y-1">
                                        @foreach ($tag->children as $child)
                                            <label class="flex items-center space-x-2">
                                                <input type="checkbox" name="taxonomies[]" value="{{ $child->id }}"
                                                    class="rounded border-gray-300 text-blue-600"
                                                    {{ in_array($child->id, old('taxonomies', [])) ? 'checked' : '' }}>
                                                <span>— {{ $child->name }}</span>
                                            </label>
                                        @endforeach
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </div>

                    <!-- Brands -->
                    <div class="mb-10">
                        <h3 class="mb-2">Brand</h3>
                        <div class="input-with-label mb-4">
                            <select name="taxonomies[]" class="form-select">
                                <option value="">Select Brand</option>
                                @foreach ($brands as $brand)
                                    <option value="{{ $brand->id }}"
                                        {{ in_array($brand->id, old('taxonomies', [])) ? 'selected' : '' }}>
                                        {{ $brand->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="selected_image_preview mb-4">
                            <div class="image-input w-full max-w-[360px]">
                                <h3 class="mb-2">Featured Image</h3>
                                <label for="cover-image" class="aspect-[360/157]">
                                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <g clip-path="url(#clip0_2161_7517)">
                                            <path d="M20 10.6665H20.0133" stroke="#1F61EC" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round" />
                                            <path
                                                d="M22.6673 5.3335H9.33398C7.12485 5.3335 5.33398 7.12436 5.33398 9.3335V22.6668C5.33398 24.876 7.12485 26.6668 9.33398 26.6668H22.6673C24.8765 26.6668 26.6673 24.876 26.6673 22.6668V9.3335C26.6673 7.12436 24.8765 5.3335 22.6673 5.3335Z"
                                                stroke="#1F61EC" stroke-width="2" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                            <path
                                                d="M5.33398 19.9999L10.6673 14.6666C11.2754 14.0815 11.9652 13.7734 12.6673 13.7734C13.3695 13.7734 14.0592 14.0815 14.6673 14.6666L21.334 21.3333"
                                                stroke="#1F61EC" stroke-width="2" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                            <path
                                                d="M18.666 18.6664L19.9993 17.3331C20.6074 16.748 21.2972 16.4399 21.9993 16.4399C22.7015 16.4399 23.3913 16.748 23.9993 17.3331L26.666 19.9998"
                                                stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                        </g>
                                        <defs>
                                            <clipPath id="clip0_2161_7517">
                                                <rect width="32" height="32" fill="white" />
                                            </clipPath>
                                        </defs>
                                    </svg>
                                    <div class="flex gap-2">
                                        <p><span>Choose file</span></p>
                                    </div>
                                    <p class="text-14 text-paragraph">
                                        JPEG, PNG, JPG, GIF, WEBP
                                    </p>
                                </label>
                                <input type="file" name="featured_image" accept="image/*" id="cover-image" />
                                @error('featured_image')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="selected_image_preview">
                            <div class="image-input w-full max-w-[360px]">
                                <h3 class="mb-2">Gallery Images</h3>
                                <label for="gallery-images"
                                    class="aspect-[360/157] flex flex-col items-center justify-center border-2 border-dashed border-blue-400 rounded-lg cursor-pointer hover:bg-blue-50 transition">
                                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <g clip-path="url(#clip0_2161_7517)">
                                            <path d="M20 10.6665H20.0133" stroke="#1F61EC" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round" />
                                            <path
                                                d="M22.6673 5.3335H9.33398C7.12485 5.3335 5.33398 7.12436 5.33398 9.3335V22.6668C5.33398 24.876 7.12485 26.6668 9.33398 26.6668H22.6673C24.8765 26.6668 26.6673 24.876 26.6673 22.6668V9.3335C26.6673 7.12436 24.8765 5.3335 22.6673 5.3335Z"
                                                stroke="#1F61EC" stroke-width="2" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                            <path
                                                d="M5.33398 19.9999L10.6673 14.6666C11.2754 14.0815 11.9652 13.7734 12.6673 13.7734C13.3695 13.7734 14.0592 14.0815 14.6673 14.6666L21.334 21.3333"
                                                stroke="#1F61EC" stroke-width="2" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                            <path
                                                d="M18.666 18.6664L19.9993 17.3331C20.6074 16.748 21.2972 16.4399 21.9993 16.4399C22.7015 16.4399 23.3913 16.748 23.9993 17.3331L26.666 19.9998"
                                                stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                        </g>
                                        <defs>
                                            <clipPath id="clip0_2161_7517">
                                                <rect width="32" height="32" fill="white" />
                                            </clipPath>
                                        </defs>
                                    </svg>
                                    <div class="flex gap-2 mt-2">
                                        <p><span>Choose files</span></p>
                                    </div>
                                    <p class="text-14 text-paragraph">
                                        JPEG, PNG, JPG, GIF, WEBP (Multiple allowed)
                                    </p>
                                </label>
                                <input type="file" name="gallery[]" id="gallery-images" accept="image/*" multiple
                                    class="hidden" />
                                <div class="text-red-500 text-sm mt-1 hidden">Error message</div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="col-span-full flex-col sm:flex-row flex justify-end gap-4 mt-5">
                <a class="btn-secondary" href="{{ route('admin.product.index') }}">
                    Cancel
                </a>
                <button type="submit" class="btn btn-primary">Create Product</button>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    @include('backend::components.image-preview')
    <script src="{{ asset('common/tinymce/js/tinymce/tinymce.min.js') }}"></script>
    <script>
        (function($) {
            "use strict"
            $(document).ready(function() {
                tinymce.init({
                    selector: '.rich-editor',
                    plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount',
                    toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | addcomment showcomments | spellcheckdialog a11ycheck typography | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
                    tinycomments_mode: 'embedded',
                    tinycomments_author: 'Author name',
                    mergetags_list: [{
                            value: 'First.Name',
                            title: 'First Name'
                        },
                        {
                            value: 'Email',
                            title: 'Email'
                        },
                    ]
                });
            });
        })(jQuery);

        $(document).ready(function() {
            $('#title').on('blur', function() {
                if ($('#slug').val() === '') {
                    const name = $(this).val();
                    
                    // Generate slug that works with ALL languages (preserves original characters)
                    const slug = name
                        .trim()
                        .replace(/\s+/g, '-')              // Replace spaces with hyphens
                        .replace(/[^\p{L}\p{M}\p{N}\-]/gu, '')  // Keep all letters, marks, numbers, and hyphens
                        .replace(/-+/g, '-')               // Replace multiple hyphens with single hyphen
                        .replace(/^-+|-+$/g, '');          // Remove leading/trailing hyphens
                    
                    $('#slug').val(slug);
                }
            });
        });
    </script>
@endpush