@php
$isEdit = request()->is('*edit*');
@endphp

<div class="row g-4">
    <div class="col-12">
        <div class="card shadow-sm">
            <div class="card-header bg-light fw-bold">Basic Information</div>
            <div class="card-body row g-3">

                <div class="col-md-4">
                    <label for="title" class="form-label">Product Name <span class="text-danger">*</span></label>
                    <input type="text" id="title" name="title" class="form-control"
                        value="{{ old('title', $product->title ?? '') }}">
                </div>

                <div class="col-md-4">
                    <label for="sub_title" class="form-label">Sub Title</label>
                    <input type="text" id="sub_title" name="sub_title" class="form-control"
                        value="{{ old('sub_title', $product->sub_title ?? '') }}">
                </div>

                <div class="col-md-4">
                    <label for="slug" class="form-label">Slug <span class="text-danger">*</span></label>
                    <input type="text" id="slug" name="slug" class="form-control"
                        value="{{ old('slug', $product->slug ?? '') }}">
                </div>

                @if (!$isEdit)
                <div class="col-md-6">
                    <label for="initial_stock" class="form-label">Initial Stock <span
                            class="text-danger">*</span></label>
                    <input type="number" id="initial_stock" name="initial_stock" class="form-control">
                </div>
                @endif

                <div class="col-md-6">
                    <label for="categories" class="form-label">Categories</label>
                    <select name="categories[]" id="categories" class="form-select select2" multiple
                        data-placeholder="Select categories">
                        @foreach ($categories as $category)
                        @if ($category->parent)
                        <option value="{{ $category->id }}"
                            {{ isset($product) && $product->categories->contains($category->id) ? 'selected' : '' }}>
                            {{ $category->name }} - ({{ $category->parent->name }})
                        </option>
                        @endif
                        @endforeach
                    </select>
                </div>

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

    <div class="col-12">
        <div class="card shadow-sm">
            <div class="card-header bg-light fw-bold">Pricing</div>
            <div class="card-body row g-3">

                <div class="col-md-6">
                    <label for="display_price" class="form-label">Display Price</label>
                    <input type="number" step="0.01" name="display_price" class="form-control"
                        value="{{ old('display_price', $product->display_price ?? '') }}">
                </div>

                <div class="col-md-6">
                    <label for="selling_price" class="form-label">Selling Price</label>
                    <input type="number" step="0.01" name="selling_price" class="form-control"
                        value="{{ old('selling_price', $product->selling_price ?? '') }}">
                </div>

                <div class="col-md-6">
                    <label for="cost_price" class="form-label">Cost Price</label>
                    <input type="number" step="0.01" name="cost_price" class="form-control"
                        value="{{ old('cost_price', $product->cost_price ?? '') }}">
                </div>

                <div class="col-md-6">
                    <label for="weight" class="form-label">Weight</label>
                    <input type="text" name="weight" class="form-control"
                        value="{{ old('weight', $product->weight ?? '') }}">
                </div>

                <div class="col-md-6">
                    <label for="sku" class="form-label">SKU</label>
                    <input type="text" name="sku" class="form-control"
                        value="{{ old('sku', $product->sku ?? '') }}">
                </div>

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

    <div class="col-12">
        <div class="card shadow-sm">
            <div class="card-header bg-light fw-bold">SEO</div>
            <div class="card-body row g-3">
                <div class="col-md-6">
                    <label for="meta_title" class="form-label">Meta Title</label>
                    <input type="text" name="meta_title" class="form-control"
                        value="{{ old('meta_title', $product->meta_title ?? '') }}">
                </div>

                <div class="col-md-12">
                    <label for="meta_description" class="form-label">Meta Description</label>
                    <textarea name="meta_description" id="product-meta_description" class="form-control" rows="2">{{ old('meta_description', $product->meta_description ?? '') }}</textarea>
                </div>

                <div class="col-md-12">
                    <label for="meta_keywords" class="form-label">Meta Keywords (comma separated)</label>
                    <input type="text" name="meta_keywords" class="form-control"
                        value="{{ old('meta_keywords', is_array($product->meta_keywords ?? null) ? implode(',', $product->meta_keywords) : '') }}">
                </div>
            </div>
        </div>
    </div>

    <div class="col-12">
        <div class="card shadow-sm">
            <div class="card-header bg-light fw-bold">Content</div>
            <div class="card-body row g-3">

                <div class="col-md-12">
                    <label for="summary" class="form-label">Summary</label>
                    <textarea name="summary" class="form-control" rows="2">{{ old('summary', $product->summary ?? '') }}</textarea>
                </div>

                <div class="col-md-12">
                    <label for="description" class="form-label">Description</label>
                    <textarea id="product-description" name="description" class="form-control" rows="2">{{ old('description', $product->description ?? '') }}</textarea>
                </div>

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

    <div class="col-12">
        <div class="card shadow-sm">
            <div class="card-header bg-light fw-bold">Images</div>
            <div class="card-body row g-3">

                <div class="col-md-6">
                    <label class="form-label">
                        @if (!$isEdit)
                        Product Images <span class="text-danger">*</span>
                        <small class="text-muted d-block">(First image will be used as thumbnail)</small>
                        <input type="file" name="images[]" multiple class="form-control mt-2" required>
                        @else
                        Thumbnail Image
                        <input type="file" name="thumbnail" class="form-control mt-2">
                        @if (!empty($product->thumbnail))
                        <div class="position-relative d-inline-block mt-2" id="thumbnail-wrapper">
                            <img src="{{ asset('storage/' . $product->thumbnail) }}" class="rounded border"
                                style="max-height:100px;">

                            <button type="button" onclick="removeImage({{ $product->id }}, 'thumbnail')" class="btn btn-sm btn-danger position-absolute" style="top:0; right:0;">
                                <span class="d-inline d-sm">×</span>
                            </button>
                        </div>
                        @endif
                        @endif
                    </label>
                </div>

                <div class="col-md-6">
                    <label for="flip_image" class="form-label">Flip Image</label>
                    <input type="file" name="flip_image" class="form-control">
                    @if (!empty($product->flip_image))
                    <div class="position-relative d-inline-block mt-2" id="flip-image-wrapper">
                        <img src="{{ asset('storage/' . $product->flip_image) }}" class="rounded border"
                            style="max-height:100px;">
                        <button type="button" onclick="removeImage({{ $product->id }}, 'flip_image')" class="btn btn-sm btn-danger position-absolute" style="top:0; right:0;">
                            <span class="d-inline d-sm">×</span>
                        </button>
                    </div>
                    @endif
                </div>

                <div class="col-md-12">
                    <label for="banner_image" class="form-label">Banner Image</label>
                    <input type="file" name="banner_image" class="form-control">
                    @if (!empty($product->banner_image))
                    <div class="position-relative d-inline-block mt-2" id="banner-image-wrapper">
                        <img src="{{ asset('storage/' . $product->banner_image) }}" class="rounded border"
                            style="max-height:100px;">
                        <button type="button" onclick="removeImage({{ $product->id }}, 'banner_image')" class="btn btn-sm btn-danger position-absolute" style="top:0; right:0;">
                            <span class="d-inline d-sm">×</span>
                        </button>
                    </div>
                    @endif
                </div>

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

    <div class="col-12">
        <div class="card shadow-sm">
            <div class="card-header bg-light fw-bold">Status & Visibility</div>
            <div class="card-body row g-3">

                <div class="col-md-3 d-flex align-items-center">
                    <div class="form-check">
                        <input type="hidden" name="is_banner" value="0">
                        <input class="form-check-input" type="checkbox" name="is_banner" id="is_banner"
                            value="1" {{ old('is_banner', $product->is_banner ?? false) ? 'checked' : '' }}>
                        <label class="form-check-label" for="is_banner">Show in Banner</label>
                    </div>
                </div>

                <div class="col-md-3 d-flex align-items-center">
                    <div class="form-check">
                        <input type="hidden" name="is_popular" value="0">
                        <input class="form-check-input" type="checkbox" name="is_popular" id="is_popular"
                            value="1" {{ old('is_popular', $product->is_popular ?? false) ? 'checked' : '' }}>
                        <label class="form-check-label" for="is_popular">Popular</label>
                    </div>
                </div>


                <div class="col-md-3">
                    <label for="status" class="form-label">Status</label>
                    <select name="status" class="form-select">
                        <option value="1" {{ old('status', $product->status ?? 1) == 1 ? 'selected' : '' }}>
                            Active</option>
                        <option value="0" {{ old('status', $product->status ?? 1) == 0 ? 'selected' : '' }}>
                            Inactive</option>
                    </select>
                </div>

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

    @php
    $checkedDesigns = old('designs', $product->designs->pluck('id')->toArray());
    if (empty($checkedDesigns)) {
    $checkedDesigns = $productDesigns->pluck('id')->toArray();
    }
    @endphp

    @if (count($productDesigns) > 0)
    <div class="col-12">
        <div class="card shadow-sm">
            <div class="card-header bg-light fw-bold">Product Designs</div>
            <div class="card-body">
                @foreach ($productDesigns as $design)
                <div class="d-flex align-items-center">
                    <input type="checkbox" id="design_{{ $design->id }}"
                        name="designs[{{ $design->id }}]" value="{{ $design->id }}"
                        {{ in_array($design->id, $checkedDesigns) ? 'checked' : '' }}
                        class="form-check-input me-2">
                    <label for="design_{{ $design->id }}" class="form-check-label">
                        {{ $design->name }} - ${{ $design->price }}
                    </label>
                </div>
                @endforeach
            </div>
        </div>
    </div>
    @endif


    <!-- @if (count($productDesigns) > 0)
<div class="col-12">
        <div class="card shadow-sm">
            <div class="card-header bg-light fw-bold">Product Designs</div>
            <div class="card-body">
                @foreach ($productDesigns as $design)
<div class="d-flex align-items-center">
                    <input type="checkbox" id="design_{{ $design->id }}"
                        name="designs[{{ $design->id }}]" value="{{ $design->id }}"
                        {{ in_array($design->id, old('designs', $product->designs->pluck('id')->toArray() ?? [])) ? 'checked' : '' }}
                        class="form-check-input me-2">
                    <label for="design_{{ $design->id }}" class="form-check-label">{{ $design->name }} - $
                        {{ $design->price }}</label>
                </div>
@endforeach
            </div>
        </div>
    </div>
@endif -->


    @if (count($variants) > 0)
    <div class="col-12">
        <div class="card shadow-sm">
            <div class="card-header bg-light fw-bold">Product Variants</div>
            <div class="card-body">
                <table id="attribute-table" class="table table-bordered">
                    <thead class="table-light">
                        <tr id="table-header">
                            @foreach (array_keys($variants) as $attribute)
                            <th>{{ str_replace('Select ', '', $attribute) }}</th>
                            @endforeach
                            <th>Stock</th>
                            <th>Price</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="table-body">
                        <!-- Initial row will be added by JS -->
                    </tbody>
                </table>
                <button type="button" class="btn btn-sm btn-outline-primary" onclick="addRow()">Add Row</button>
            </div>
        </div>
    </div>
    @endif

    <div class="col-12">
        <div class="card-footer text-end">
            @include('dashboard.common.form-button')
        </div>
    </div>
</div>
@push('scripts')
<script>
    function removeImage(productId, type) {
        const wrapperId = type === 'thumbnail' ? 'thumbnail-wrapper' : (type === 'flip_image' ? 'flip-image-wrapper' : 'banner-image-wrapper');
        const wrapper = document.getElementById(wrapperId);

        if (!wrapper) return;

        if (confirm("Are you sure you want to delete this image?")) {
            $.ajax({
                url: `/dashboard/product/image/${productId}`,
                type: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                data: {
                    type: type
                },
                success: function(data) {
                    if (data.success) {
                        wrapper.remove();
                    } else {
                        alert(data.message || "Failed to delete image.");
                    }
                },
                error: function(xhr, status, error) {
                    console.error('AJAX Error:', error);
                    alert("Something went wrong!");
                }
            });
        }
    }
</script>
@endpush