<div class="row g-4">
    <div class="col-lg-8">
        {{-- BASIC INFO --}}
        <div class="card mb-4">
            <div class="card-header">Basic Information</div>
            <div class="card-body p-4">
                <div class="mb-3">
                    <label class="form-label">Product Name <span class="text-danger">*</span></label>
                    <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                        value="{{ old('name', $product->name ?? '') }}" required placeholder="Product name">
                    @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="mb-3">
                    <label class="form-label">Slug</label>
                    <input type="text" name="slug" class="form-control" value="{{ old('slug', $product->slug ?? '') }}" placeholder="auto-generated">
                </div>
                <div class="mb-3">
                    <label class="form-label">Short Description</label>
                    <textarea name="short_description" rows="2" class="form-control" placeholder="Brief product summary...">{{ old('short_description', $product->short_description ?? '') }}</textarea>
                </div>
                <div class="mb-3">
                    <label class="form-label">Full Description</label>
                    <textarea name="description" rows="6" class="form-control" placeholder="Full product description...">{{ old('description', $product->description ?? '') }}</textarea>
                </div>
            </div>
        </div>

        {{-- PRICING --}}
        <div class="card mb-4">
            <div class="card-header">Pricing</div>
            <div class="card-body p-4">
                <div class="row g-3">
                    <div class="col-sm-4">
                        <label class="form-label">Regular Price (৳) <span class="text-danger">*</span></label>
                        <input type="number" name="regular_price" step="0.01" min="0" class="form-control @error('regular_price') is-invalid @enderror"
                            value="{{ old('regular_price', $product->regular_price ?? '') }}" required>
                        @error('regular_price')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-sm-4">
                        <label class="form-label">Sale Price (৳)</label>
                        <input type="number" name="sale_price" step="0.01" min="0" class="form-control"
                            value="{{ old('sale_price', $product->sale_price ?? '') }}" placeholder="Leave empty if no sale">
                    </div>
                    <div class="col-sm-4">
                        <label class="form-label">Offer Text</label>
                        <input type="text" name="offer_text" class="form-control" placeholder="e.g. Save 20% today!"
                            value="{{ old('offer_text', $product->offer_text ?? '') }}">
                    </div>
                </div>
            </div>
        </div>

        {{-- SHIPPING --}}
        <div class="card mb-4">
            <div class="card-header"><i class="bi bi-truck me-1"></i>Shipping Charge <small class="text-muted">(খালি রাখলে Global Settings এর চার্জ প্রযোজ্য হবে)</small></div>
            <div class="card-body p-4">
                <div class="row g-3">
                    <div class="col-sm-6">
                        <label class="form-label"><i class="bi bi-geo-alt-fill me-1 text-success"></i>Inside Dhaka (৳)</label>
                        <div class="input-group">
                            <span class="input-group-text">৳</span>
                            <input type="number" name="shipping_inside_dhaka" min="0" class="form-control"
                                value="{{ old('shipping_inside_dhaka', $product->shipping_inside_dhaka ?? '') }}"
                                placeholder="Global settings হতে নেবে">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <label class="form-label"><i class="bi bi-geo-alt me-1 text-danger"></i>Outside Dhaka (৳)</label>
                        <div class="input-group">
                            <span class="input-group-text">৳</span>
                            <input type="number" name="shipping_outside_dhaka" min="0" class="form-control"
                                value="{{ old('shipping_outside_dhaka', $product->shipping_outside_dhaka ?? '') }}"
                                placeholder="Global settings হতে নেবে">
                        </div>
                    </div>
                </div>
                <div class="mt-2">
                    <small class="text-muted"><i class="bi bi-info-circle me-1"></i>০ (শূন্য) লিখলে Free Shipping হবে। খালি রাখলে Settings এর Default চার্জ apply হবে।</small>
                </div>
            </div>
        </div>

        {{-- GALLERY --}}
        <div class="card mb-4">
            <div class="card-header">Product Gallery</div>
            <div class="card-body p-4">
                @if(isset($product) && $product->images->count() > 0)
                <div class="d-flex flex-wrap gap-2 mb-3">
                    @foreach($product->images as $img)
                    <div class="position-relative">
                        <img src="{{ $img->image_url }}" style="width:80px;height:80px;object-fit:cover;border-radius:8px" alt="">
                        <button type="button" class="btn btn-danger btn-sm rounded-circle p-0" style="position:absolute;top:-6px;right:-6px;width:22px;height:22px;font-size:11px"
                            onclick="quickDelete('{{ route('admin.products.images.delete', $img) }}', 'Remove image?')">
                            <i class="bi bi-x"></i>
                        </button>
                    </div>
                    @endforeach
                </div>
                @endif
                <input type="file" name="images[]" multiple class="form-control" accept="image/*">
                <small class="text-muted">You can select multiple images. Max 4MB each.</small>
            </div>
        </div>

        {{-- VARIATIONS --}}
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span>Variations <small class="text-muted">(Size, Color, Weight, etc.)</small></span>
                <button type="button" class="btn btn-sm btn-outline-danger" onclick="addVariation()">+ Add Variation</button>
            </div>
            <div class="card-body p-4">
                @if(isset($product) && $product->variations->count() > 0)
                <div class="mb-3">
                    <label class="form-label text-muted">Existing Variations</label>
                    @foreach($product->variations as $v)
                    <div class="d-flex align-items-center gap-2 mb-2 p-2 bg-light rounded">
                        <span class="badge bg-secondary">{{ $v->type }}</span>
                        <span>{{ $v->value }}</span>
                        @if($v->price_adjustment != 0)
                        <span class="text-muted">+৳{{ $v->price_adjustment }}</span>
                        @endif
                        <span class="text-muted ms-auto">Stock: {{ $v->stock }}</span>
                        <button type="button" class="btn btn-sm btn-outline-danger py-0 px-1 ms-2"
                            onclick="quickDelete('{{ route('admin.products.variations.delete', $v) }}', 'Remove variation?')"><i class="bi bi-x"></i></button>
                    </div>
                    @endforeach
                </div>
                @endif
                <div id="variationRows"></div>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        {{-- THUMBNAIL --}}
        <div class="card mb-4">
            <div class="card-header">Thumbnail Image</div>
            <div class="card-body p-4">
                @if(isset($product) && $product->thumbnail)
                <img src="{{ $product->thumbnail_url }}" class="w-100 rounded mb-2" style="object-fit:cover;height:180px" alt="">
                @endif
                <input type="file" name="thumbnail" class="form-control" accept="image/*">
            </div>
        </div>

        {{-- ORGANISATION --}}
        <div class="card mb-4">
            <div class="card-header">Organisation</div>
            <div class="card-body p-4">
                <div class="mb-3">
                    <label class="form-label">Category</label>
                    <select name="category_id" class="form-select">
                        <option value="">— None —</option>
                        @foreach($categories as $cat)
                        <option value="{{ $cat->id }}" {{ old('category_id', $product->category_id ?? '') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">Tags</label>
                    <div style="max-height:180px;overflow-y:auto;border:1px solid #e0e0e0;border-radius:8px;padding:10px">
                        @foreach($tags as $tag)
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="tags[]" value="{{ $tag->id }}" id="tag_{{ $tag->id }}"
                                {{ in_array($tag->id, old('tags', isset($product) ? $product->tags->pluck('id')->toArray() : [])) ? 'checked' : '' }}>
                            <label class="form-check-label" for="tag_{{ $tag->id }}">{{ $tag->name }}</label>
                        </div>
                        @endforeach
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label">SKU</label>
                    <input type="text" name="sku" class="form-control" value="{{ old('sku', $product->sku ?? '') }}" placeholder="auto-generated">
                </div>
                <div class="mb-3">
                    <label class="form-label">Stock Quantity <span class="text-danger">*</span></label>
                    <input type="number" name="stock" min="0" class="form-control @error('stock') is-invalid @enderror"
                        value="{{ old('stock', $product->stock ?? 0) }}" required>
                    @error('stock')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="form-check form-switch mb-2">
                    <input class="form-check-input" type="checkbox" name="status" id="status" value="1"
                        {{ old('status', $product->status ?? true) ? 'checked' : '' }}>
                    <label class="form-check-label" for="status">Active (visible on site)</label>
                </div>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" name="featured" id="featured" value="1"
                        {{ old('featured', $product->featured ?? false) ? 'checked' : '' }}>
                    <label class="form-check-label" for="featured">Featured Product</label>
                </div>
            </div>
        </div>
    </div>
</div>

@section('scripts')
<script>
function quickDelete(url, message) {
    if (!confirm(message || 'Remove this?')) return;
    const form = document.getElementById('quickDeleteForm');
    form.action = url;
    form.submit();
}

let varCount = 0;
function addVariation() {
    const i = varCount++;
    const html = `
    <div class="row g-2 align-items-end mb-2 variation-row">
        <div class="col-sm-3">
            <select name="variation_types[]" class="form-select form-select-sm">
                <option value="size">Size</option>
                <option value="color">Color</option>
                <option value="weight">Weight</option>
                <option value="other">Other</option>
            </select>
        </div>
        <div class="col-sm-3">
            <input type="text" name="variation_values[]" class="form-control form-control-sm" placeholder="e.g. L, Red, 1kg">
        </div>
        <div class="col-sm-3">
            <input type="number" name="variation_prices[]" class="form-control form-control-sm" placeholder="Price ±" step="0.01">
        </div>
        <div class="col-sm-2">
            <input type="number" name="variation_stocks[]" class="form-control form-control-sm" placeholder="Stock" min="0">
        </div>
        <div class="col-sm-1">
            <button type="button" class="btn btn-sm btn-outline-danger" onclick="this.closest('.variation-row').remove()">×</button>
        </div>
    </div>`;
    document.getElementById('variationRows').insertAdjacentHTML('beforeend', html);
}
</script>
@endsection