@extends('user::layouts.master')
@section('breadcrumb_title', 'Edit Product')

@section('content')

    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6 gap-3">
        <h1 class="text-2xl font-semibold">Edit Product</h1>
        <div class="flex flex-wrap gap-2">
            <a href="{{ route('author.product.show', $product->id) }}" class="btn btn-primary">
                <i class="fas fa-eye mr-2"></i> View
            </a>
            <a href="{{ route('author.product.index') }}" class="btn btn-primary btn-black">
                <i class="fas fa-arrow-left mr-2"></i> Back to Products
            </a>
        </div>
    </div>

    <x-backend::author-language-switcher :content="$product" contentType="product" />

    <div class="card">
        <form action="{{ route('author.product.update', $product->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <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>
                        <input type="hidden" name="id" value="{{ $product->id }}">

                        <div class="mb-4 input-with-label">
                            <label>Title <span class="text-red-500">*</span></label>
                            <input type="text" name="title" value="{{ old('title', $product->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" name="slug" value="{{ old('slug', $product->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', $product->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', $product->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>Regular Price <span class="text-red-500">*</span></label>
                                <div class="relative">
                                    <span class="absolute left-3 inset-y-0 flex items-center text-gray-500">$</span>
                                    <input type="number" step="0.01" name="regular_price"
                                        value="{{ old('regular_price', $product->getMeta('regular_price')) }}"
                                        class="pl-8 @error('regular_price') border-red-500 @enderror" 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>Sale Price</label>
                                <div class="relative">
                                    <span class="absolute left-3 inset-y-0 flex items-center text-gray-500">$</span>
                                    <input type="number" step="0.01" name="sale_price"
                                        value="{{ old('sale_price', $product->getMeta('sale_price')) }}"
                                        class="pl-8 @error('sale_price') border-red-500 @enderror">
                                </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', $product->getMeta('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', $product->getMeta('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', $product->getMeta('stock_status')) === 'instock' ? 'selected' : '' }}>
                                    In Stock
                                </option>
                                <option value="outofstock"
                                    {{ old('stock_status', $product->getMeta('stock_status')) === 'outofstock' ? 'selected' : '' }}>
                                    Out
                                    of Stock</option>
                                <option value="backorder"
                                    {{ old('stock_status', $product->getMeta('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', $product->getMeta('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', $product->getMeta('dimensions')['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', $product->getMeta('dimensions')['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', $product->getMeta('dimensions')['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', $product->getSeoMeta('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', $product->getSeoMeta('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', $product->getSeoMeta('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', $product->status) === 'draft' ? 'selected' : '' }}>Draft</option>
                                <option value="published"
                                    {{ old('status', $product->status) === 'published' ? 'selected' : '' }}>Published
                                </option>
                                <option value="archived"
                                    {{ old('status', $product->status) === 'archived' ? 'selected' : '' }}>Archived
                                </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', $product->getMeta('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">
                            @php
                                $selectedTaxonomies = old('taxonomies', $product->taxonomies->pluck('id')->toArray());
                            @endphp

                            @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, $selectedTaxonomies) ? '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, $selectedTaxonomies) ? '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">
                            @php
                                $selectedTagTaxonomies = old(
                                    'taxonomies',
                                    $product->taxonomies->pluck('id')->toArray(),
                                );
                            @endphp

                            @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, $selectedTagTaxonomies) ? '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, $selectedTagTaxonomies) ? '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">
                            <select name="taxonomies[]" class="form-select">
                                <option value="">Select Brand</option>
                                @foreach ($brands as $brand)
                                    <option value="{{ $brand->id }}"
                                        {{ in_array($brand->id, $selectedTaxonomies) ? 'selected' : '' }}>
                                        {{ $brand->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <!-- Featured Image -->
                    <div class="mb-10">
                        @include('backend::components.featured-image', [
                            'preview' => $product->getFirstMediaUrl('featured'),
                            'media' => $product->getFirstMedia('featured')
                        ])
                    </div>

                    <!-- Gallery -->
                    <div class="mb-4">
                        <h5 class="text-lg font-medium text-gray-900 mb-2">Gallery</h5>
                        <div class="selected_image_preview">

                            <div class="mb-3">
                                <!-- File Input -->
                                <label for="gallery-images"
                                    class="aspect-[360/157] flex flex-col items-center justify-center border border-dashed border-main rounded-lg cursor-pointer hover:bg-blue-50 transition">
                                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none"
                                        stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="text-blue-500">
                                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
                                        <circle cx="8.5" cy="8.5" r="1.5" />
                                        <polyline points="21,15 16,10 5,21" />
                                    </svg>
                                    <div class="flex gap-2 mt-2">
                                        <p><span>Choose files</span></p>
                                    </div>
                                    <p class="text-14 text-gray-500">
                                        JPEG, PNG, JPG, GIF, WEBP (Multiple allowed)
                                    </p>
                                </label>
                                <input type="file" name="gallery[]" id="gallery-images" accept="image/*" multiple
                                    class="hidden @error('gallery.*') border-red-500 @enderror" />
                                @error('gallery.*')
                                    <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
                                @enderror
                            </div>

                            @if ($product->getMedia('gallery')->count() > 0)
                                <div class="mb-3 ms-2">
                                    <div class="grid grid-cols-3 gap-4">
                                        @foreach ($product->getMedia('gallery') as $media)
                                            <div class="relative" id="image-{{ $media->id }}"
                                                data-id="{{ $media->id }}">
                                                <button data-id="{{ $media->id }}" type="button"
                                                    class="delete_image absolute top-2 right-2 bg-red-500 text-white rounded-full w-8 h-8 flex items-center justify-center">
                                                    <svg class="size-5" viewBox="0 0 24 24" fill="none"
                                                        xmlns="http://www.w3.org/2000/svg">
                                                        <path
                                                            d="M19.5 5.5L18.6139 20.121C18.5499 21.1766 17.6751 22 16.6175 22H7.38246C6.32488 22 5.4501 21.1766 5.38612 20.121L4.5 5.5"
                                                            stroke="currentColor" stroke-width="1.5"
                                                            stroke-linecap="round" stroke-linejoin="round"></path>
                                                        <path
                                                            d="M3 5.5H8M8 5.5L9.24025 2.60608C9.39783 2.2384 9.75937 2 10.1594 2H13.8406C14.2406 2 14.6022 2.2384 14.7597 2.60608L16 5.5M8 5.5H16M21 5.5H16"
                                                            stroke="currentColor" stroke-width="1.5"
                                                            stroke-linecap="round" stroke-linejoin="round"></path>
                                                        <path d="M9.5 16.5V10.5" stroke="currentColor" stroke-width="1.5"
                                                            stroke-linecap="round" stroke-linejoin="round"></path>
                                                        <path d="M14.5 16.5V10.5" stroke="currentColor" stroke-width="1.5"
                                                            stroke-linecap="round" stroke-linejoin="round"></path>
                                                    </svg>
                                                </button>
                                                <img src="{{ $media->getUrl('thumb') }}"
                                                    class="w-full h-20 object-cover rounded-lg" alt="Gallery image">
                                            </div>
                                        @endforeach
                                    </div>
                                    <div class="mt-2 hidden">
                                        <div class="flex items-center">
                                            <input type="checkbox" name="replace_gallery" id="replace_gallery"
                                                class="w-4 h-4 text-blue-600 border-gray-300 rounded">
                                            <label for="replace_gallery" class="ml-2 text-sm">
                                                Replace all gallery images
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Buttons -->
            <div class="flex justify-end gap-3 mt-5">
                <a href="{{ route('author.product.index') }}" class="btn-secondary">
                    Cancel
                </a>
                <button type="submit" class="btn btn-primary">
                    Update 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'
                        },
                    ]
                });

                $(document).on("click", ".delete_image", function(e) {
                    e.preventDefault();

                    let mediaId = $(this).data("id");
                    let token = "{{ csrf_token() }}";

                    $.ajax({
                        url: "{{ route('author.media.delete') }}",
                        type: "POST",
                        data: {
                            _token: token,
                            id: mediaId
                        },
                        success: function(res) {
                            if (res.success === true) {
                                $("#image-" + mediaId).remove();
                                toastr.success(res.message);
                            } else {
                                toastr.error("Failed to delete image");
                            }
                        },
                        error: function(err) {
                            toastr.error("Failed to delete image");
                        }
                    });
                });

            });
        })(jQuery);
    </script>
@endpush