@extends('layouts.app')

@section('content')
    <!-- Main Content -->
    <div class="app-content pt-0">
        <div class="container-fluid pt-0">
            <div class="row">
                <div class="col-12">
                    <div class="card shadow-sm border-0">
                        <div class="card-header bg-white py-3 d-flex align-items-center border-bottom-0 px-4">
                            <h5 class="mb-0 fw-bold flex-grow-1">Edit Product: {{ $product->name }}</h5>
                            <div class="text-muted extra-small ms-auto">ID: #{{ $product->id }}</div>
                        </div>
                        <div class="card-header p-0">
                        <ul class="nav nav-tabs border-0" id="productTab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="general-tab" data-bs-toggle="tab" href="#general" role="tab">General</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="specs-tab" data-bs-toggle="tab" href="#specs" role="tab">Specifications</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="variants-tab" data-bs-toggle="tab" href="#variants" role="tab">Variants</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="freeitems-tab" data-bs-toggle="tab" href="#freeitems" role="tab">Free Items</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="faqs-tab" data-bs-toggle="tab" href="#faqs" role="tab">FAQs</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="media-tab" data-bs-toggle="tab" href="#media" role="tab">Media</a>
                            </li>
                        </ul>
                    </div>

                        <div class="card-body">
                            
                            <div class="tab-content" id="productTabContent">

                                {{-- ============= GENERAL TAB ============= --}}
                                <div class="tab-pane fade show active" id="general" role="tabpanel">
                                    <form action="{{ route('admin.products.update', $product->id) }}" method="POST">
                                        @csrf
                                        @method('PUT')
                                        <input type="hidden" name="update_tab" value="general">
                                        
                                        <div class="row pt-4 g-4">
                                            <div class="col-md-8">
                                                <div class="mb-4">
                                                    <label class="form-label">Product Name *</label>
                                                    <input type="text" name="name" class="form-control" value="{{ old('name', $product->name) }}" required>
                                                </div>
                                                <div class="row g-3">
                                                    <div class="col-md-6">
                                                        <label class="form-label">Category *</label>
                                                        <select name="category_id" id="category_id" class="form-select select2" required>
                                                            @foreach($categories as $category)
                                                                <option value="{{ $category->id }}" {{ old('category_id', $product->category_id) == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label">Subcategory</label>
                                                        <select name="subcategory_id" id="subcategory_id" class="form-select select2">
                                                            @foreach($subcategories as $sub)
                                                                <option value="{{ $sub->id }}" {{ old('subcategory_id', $product->subcategory_id) == $sub->id ? 'selected' : '' }}>{{ $sub->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label">Brand</label>
                                                        <select name="brand_id" id="brand_id" class="form-select select2">
                                                            <option value="">Select Brand</option>
                                                            @foreach($brands as $brand)
                                                                <option value="{{ $brand->id }}" {{ old('brand_id', $product->brand_id) == $brand->id ? 'selected' : '' }}>{{ $brand->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label">Key Features/Tags</label>
                                                        <select name="tags[]" class="form-control select2-tags-field" multiple="multiple">
                                                            @foreach(old('tags', $product->tags ?? []) as $tag)
                                                                <option value="{{ $tag }}" selected>{{ $tag }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-12 mt-3">
                                                        <label class="form-label text-primary fw-bold"><i class="bi bi-palette me-2"></i>Available Colors *</label>
                                                        <select name="colors[]" id="product_colors" class="form-select select2" multiple required>
                                                            @foreach($colors as $color)
                                                                @php
                                                                    $selectedColorIds = old('colors', $product->productColors?->pluck('color_id')->toArray() ?? []);
                                                                @endphp
                                                                <option value="{{ $color->id }}" 
                                                                    {{ in_array($color->id, $selectedColorIds) ? 'selected' : '' }}>
                                                                    {{ $color->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        <div class="form-text small">Select colors to enable variation specific inventory allocation.</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="p-4 bg-light rounded-4 border">
                                                    <label class="form-label d-block border-bottom pb-2 mb-3">Settings & Flags</label>
                                                    <div class="form-check form-switch custom-switch mb-3">
                                                        <input class="form-check-input" type="checkbox" name="is_active" id="is_active" value="1" {{ old('is_active', $product->is_active) ? 'checked' : '' }}>
                                                        <label class="form-check-label ms-2 fw-semibold" for="is_active">Is Active & Visible</label>
                                                    </div>
                                                    <div class="space-y-2 mt-3">
                                                        <div class="d-flex justify-content-between p-2 border-bottom">
                                                            <label class="small text-muted mb-0" for="is_new">New Arrival</label>
                                                            <input type="checkbox" name="is_new" value="1" {{ old('is_new', $product->is_new) ? 'checked' : '' }}>
                                                        </div>
                                                        <div class="d-flex justify-content-between p-2 border-bottom">
                                                            <label class="small text-muted mb-0" for="is_featured">Featured</label>
                                                            <input type="checkbox" name="is_featured" value="1" {{ old('is_featured', $product->is_featured) ? 'checked' : '' }}>
                                                        </div>
                                                        <div class="d-flex justify-content-between p-2">
                                                            <label class="small text-muted mb-0" for="is_coming_soon">Coming Soon</label>
                                                            <input type="checkbox" name="is_coming_soon" value="1" {{ old('is_coming_soon', $product->is_coming_soon) ? 'checked' : '' }}>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

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

                                            <div class="col-12 mt-4">
                                                <div class="card border-0 bg-light p-4 rounded-4">
                                                    <h5 class="fw-bold text-primary mb-4"><i class="bi bi-wallet2 me-2"></i>Pricing & Stock Inventory</h5>
                                                    <div class="row g-3">
                                                        <div class="col-md-3">
                                                            <label class="form-label">Base Price ($) *</label>
                                                            <input type="number" step="0.01" name="price" id="price" class="form-control fw-bold text-primary" value="{{ old('price', $product->price) }}" required>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <label class="form-label">Discount %</label>
                                                            <input type="number" step="0.01" name="discount" id="discount" class="form-control" value="{{ old('discount', $product->discount) }}">
                                                        </div>
                                                        <div class="col-md-2">
                                                            <label class="form-label">Disc. Amount</label>
                                                            <input type="number" step="0.01" id="discount_amount" class="form-control bg-white" readonly value="0">
                                                        </div>
                                                        <div class="col-md-2">
                                                            <label class="form-label">Down Payment</label>
                                                            <input type="number" step="0.01" name="down_payment" class="form-control" value="{{ old('down_payment', $product->down_payment) }}">
                                                        </div>
                                                        <div class="col-md-3">
                                                            <label class="form-label text-info">Bonus Point %</label>
                                                            <input type="number" step="0.01" name="bonus_percentage" id="bonus_percentage" class="form-control border-info-subtle" value="{{ old('bonus_percentage', $product->bonus_percentage ?? 0) }}">
                                                        </div>
                                                        <div class="col-md-6 mt-4">
                                                            <label class="form-label">Total Product Yield (Stock) *</label>
                                                            <input type="number" name="available_qty" class="form-control" value="{{ old('available_qty', $product->available_qty) }}" required>
                                                        </div>
                                                        <div class="col-md-6 mt-4">
                                                            <label class="form-label">Low Stock Warning</label>
                                                            <input type="number" name="stock_threshold_qty" class="form-control" value="{{ old('stock_threshold_qty', $product->stock_threshold_qty) }}">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="mt-4 pt-3 border-top text-end">
                                            <button type="submit" class="btn btn-primary px-5 btn-lg">Update Basic Information</button>
                                        </div>
                                    </form>
                                </div>

                                {{-- ============= SPECIFICATIONS TAB ============= --}}
                                <div class="tab-pane fade" id="specs" role="tabpanel">
                                    <form action="{{ route('admin.products.update', $product->id) }}" method="POST">
                                        @csrf
                                        @method('PUT')
                                        <input type="hidden" name="update_tab" value="specs">
                                        <div class="pt-4">
                                            <div class="d-flex justify-content-between align-items-center mb-4">
                                                <div>
                                                    <h5 class="fw-bold mb-1">Technical Specifications</h5>
                                                    <p class="text-muted small mb-0">Add detailed attributes for the product comparison table</p>
                                                </div>
                                                <button type="button" class="btn btn-outline-success btn-sm px-3" id="add-spec">
                                                    <i class="bi bi-plus-circle me-1"></i> Add Attribute
                                                </button>
                                            </div>
                                            
                                            <div id="specifications-container" class="space-y-2">
                                                @foreach($product->specifications as $index => $spec)
                                                    <div class="row mb-3 g-2 spec-row align-items-center p-3 border rounded-3 bg-white">
                                                        <div class="col-md-3">
                                                            <label class="small text-muted mb-1">Group header</label>
                                                            <select name="specs[{{ $index }}][header_id]" class="form-select spec-header shadow-none border-0 bg-light" required>
                                                                @foreach($headers as $h)
                                                                    <option value="{{ $h->id }}" {{ $spec->header_id == $h->id ? 'selected' : '' }}>{{ $h->name }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <label class="small text-muted mb-1">Sub-attribute</label>
                                                            <select name="specs[{{ $index }}][subheader_id]" class="form-select spec-subheader shadow-none border-0 bg-light" required>
                                                                @php $header = $headers->find($spec->header_id); @endphp
                                                                @if($header)
                                                                    @foreach($header->subheaders as $sh)
                                                                        <option value="{{ $sh->id }}" {{ $spec->subheader_id == $sh->id ? 'selected' : '' }}>{{ $sh->name }}</option>
                                                                    @endforeach
                                                                @endif
                                                            </select>
                                                        </div>
                                                        <div class="col-md-5">
                                                            <label class="small text-muted mb-1">Value / Description</label>
                                                            <input type="text" name="specs[{{ $index }}][specification]" class="form-control shadow-none border-0 bg-light" value="{{ $spec->specification }}" placeholder="e.g. 500 nits, IP68" required>
                                                        </div>
                                                        <div class="col-md-1 text-end">
                                                            <button type="button" class="btn btn-link text-danger remove-spec p-0"><i class="bi bi-x-circle-fill fs-5"></i></button>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                            <div class="mt-5 pt-3 border-top text-end">
                                                <button type="submit" class="btn btn-primary px-5 btn-lg">Commit Specifications</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>

                                {{-- ============= VARIANTS TAB ============= --}}
                                <div class="tab-pane fade" id="variants" role="tabpanel">
                                    <form action="{{ route('admin.products.update', $product->id) }}" method="POST">
                                        @csrf
                                        @method('PUT')
                                        <input type="hidden" name="update_tab" value="variants">
                                        <div class="pt-4">
                                            <div class="d-flex justify-content-between align-items-center mb-4 pb-2 border-bottom">
                                                <div>
                                                    <h5 class="fw-bold mb-1">Product Variations</h5>
                                                    <p class="text-muted small mb-0">Define specific models, sizes, or configurations (e.g. 128GB, 256GB)</p>
                                                </div>
                                            </div>

                                            <div id="variants-container" class="space-y-4">
                                                @foreach($product->variants as $vi => $variant)
                                                    <div class="variant-row card border bg-white mb-4 shadow-sm" data-index="{{ $vi }}">
                                                        <div class="card-header bg-light d-flex justify-content-between align-items-center py-2">
                                                            <span class="badge bg-primary px-3">Variation #{{ $vi + 1 }}</span>
                                                            <button type="button" class="btn btn-link text-danger p-0 remove-variant" title="Delete Variant">
                                                                <i class="bi bi-trash3-fill"></i> Remove
                                                            </button>
                                                        </div>
                                                        <div class="card-body p-4">
                                                            <input type="hidden" name="variants[{{ $vi }}][id]" value="{{ $variant->id }}">
                                                            <div class="row g-3">
                                                                <div class="col-md-3">
                                                                    <label class="form-label">Variant Name *</label>
                                                                    <input type="text" name="variants[{{ $vi }}][name]" class="form-control" value="{{ $variant->name }}" placeholder="e.g. Pro Max / 1TB" required>
                                                                </div>
                                                                <div class="col-md-2">
                                                                    <label class="form-label">Price ($)</label>
                                                                    <input type="number" step="0.01" name="variants[{{ $vi }}][price]" class="form-control variant-price fw-bold" value="{{ $variant->price }}">
                                                                </div>
                                                                <div class="col-md-2">
                                                                    <label class="form-label text-muted small">Disc %</label>
                                                                    <input type="number" step="0.01" name="variants[{{ $vi }}][discount]" class="form-control variant-discount" value="{{ $variant->discount }}">
                                                                </div>
                                                                <div class="col-md-2">
                                                                    <label class="form-label text-muted small">Disc Amt</label>
                                                                    <input type="number" step="0.01" class="form-control variant-discount-amount bg-light" value="0.00" readonly>
                                                                </div>
                                                                <div class="col-md-3">
                                                                    <label class="form-label text-primary fw-bold">Live Inventory</label>
                                                                    <div class="input-group">
                                                                        <span class="input-group-text bg-white border-primary border-end-0 text-primary"><i class="bi bi-box-seam"></i></span>
                                                                        <input type="number" name="variants[{{ $vi }}][stock]" class="form-control variant-total-stock bg-white border-primary border-start-0 fw-bold text-primary" value="{{ $variant->stock }}" readonly>
                                                                    </div>
                                                                </div>
                                                                
                                                                <div class="col-12 mt-4">
                                                                    <div class="p-3 bg-light rounded-3 border-dashed">
                                                                        <label class="form-label d-flex align-items-center mb-3">
                                                                            <i class="bi bi-palette me-2"></i> Color-specific Allocation
                                                                        </label>
                                                                        <div class="row g-3 items-center">
                                                                            <div class="col-md-5">
                                                                                <select name="variants[{{ $vi }}][colors][]" class="select2 color-select" multiple="multiple">
                                                                                    @php $variantColorIds = $variant->productVariantColors->pluck('product_color_id')->toArray(); @endphp
                                                                                    @foreach($product->productColors as $pc)
                                                                                        <option value="{{ $pc->color_id }}" {{ in_array($pc->id, $variantColorIds) ? 'selected' : '' }}>
                                                                                            {{ $pc->color->name }}
                                                                                        </option>
                                                                                    @endforeach
                                                                                </select>
                                                                            </div>
                                                                            <div class="col-md-7">
                                                                                <div class="color-stocks-container d-flex flex-wrap gap-2">
                                                                                    @foreach($variant->productVariantColors as $pvc)
                                                                                        <div class="input-group input-group-sm w-auto">
                                                                                            <span class="input-group-text bg-white">{{ $pvc->productColor->color->name }}</span>
                                                                                            <input type="number" name="variants[{{ $vi }}][color_stocks][{{ $pvc->productColor->color_id }}]" value="{{ $pvc->stock }}" data-color-id="{{ $pvc->productColor->color_id }}" class="form-control color-stock-input px-2" style="width: 70px;">
                                                                                        </div>
                                                                                    @endforeach
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>

                                            <div class="mt-4 p-4 border-dashed rounded-4 text-center bg-white shadow-sm">
                                                <div class="mb-3 text-muted">
                                                    <i class="bi bi-layers fs-3 d-block mb-2"></i>
                                                    Need another configuration? Click below to add a new model variant.
                                                </div>
                                                <button type="button" class="btn btn-success btn-lg px-5 rounded-pill shadow-sm" id="add-variant">
                                                    <i class="bi bi-plus-lg me-1"></i> Add New Variation
                                                </button>
                                            </div>

                                            <div class="mt-5 pt-3 border-top text-end">
                                                <button type="submit" class="btn btn-primary px-5 btn-lg shadow-sm">Process & Save Variations</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>

                                {{-- ============= FREE ITEMS TAB ============= --}}
                                <div class="tab-pane fade" id="freeitems" role="tabpanel">
                                    <form action="{{ route('admin.products.update', $product->id) }}" method="POST">
                                        @csrf
                                        @method('PUT')
                                        <input type="hidden" name="update_tab" value="freeitems">
                                        <div class="pt-4">
                                            <div class="row g-4">
                                                <div class="col-md-7">
                                                    <div class="card border-0 bg-light rounded-4">
                                                        <div class="card-body p-4">
                                                            <h6 class="fw-bold mb-3"><i class="bi bi-gift me-2 text-primary"></i>Bundle Offers (Catalog)</h6>
                                                            <p class="text-muted small mb-4">Search for items in your inventory to give away for free with this product.</p>
                                                            
                                                            <div class="mb-4">
                                                                <select id="free_product_search" class="form-control"></select>
                                                            </div>

                                                            <div id="free_products_list" class="space-y-3 mt-3">
                                                                {{-- This will be managed by JS or loaded from blade --}}
                                                                <div class="table-responsive border rounded bg-white">
                                                                    <table class="table table-hover align-middle mb-0" id="free_products_table">
                                                                        <tbody class="border-top-0">
                                                                            @foreach($product->freeItems as $fi)
                                                                                @if($fi->free_product_id && $fi->freeProduct)
                                                                                    <tr data-type="product" data-id="{{ $fi->freeProduct->id }}">
                                                                                        <td class="ps-3 py-3">
                                                                                            <div class="d-flex align-items-center">
                                                                                                @if($fi->freeProduct->image)
                                                                                                    <img src="{{ asset('storage/' . $fi->freeProduct->image) }}" class="rounded shadow-sm me-3" width="40" height="40" style="object-fit:cover;">
                                                                                                @endif
                                                                                                <div>
                                                                                                    <div class="fw-bold">{{ $fi->freeProduct->name }}</div>
                                                                                                    <div class="text-muted small">Base Product</div>
                                                                                                </div>
                                                                                            </div>
                                                                                            <input type="hidden" name="selected_free_items[]" value='{"product_id": {{ $fi->freeProduct->id }}}'>
                                                                                        </td>
                                                                                        <td class="text-end pe-3">
                                                                                            <button type="button" class="btn btn-outline-danger btn-sm border-0 remove-free-item"><i class="bi bi-trash3"></i></button>
                                                                                        </td>
                                                                                    </tr>
                                                                                @elseif($fi->free_product_variant_id && $fi->freeProductVariant)
                                                                                    <tr data-type="variant" data-id="{{ $fi->freeProductVariant->id }}">
                                                                                        <td class="ps-3 py-3">
                                                                                            <div class="d-flex align-items-center">
                                                                                                <div class="rounded-circle bg-primary-subtle border border-primary text-primary d-flex align-items-center justify-content-center me-3" style="width:40px; height:40px;"><i class="bi bi-layers-half"></i></div>
                                                                                                <div>
                                                                                                    <div class="fw-bold">{{ $fi->freeProductVariant->product->name ?? 'Unknown' }}</div>
                                                                                                    <div class="text-muted small">Variant: {{ $fi->freeProductVariant->name }}</div>
                                                                                                </div>
                                                                                            </div>
                                                                                            <input type="hidden" name="selected_free_items[]" value='{"product_id": {{ $fi->freeProductVariant->product_id }}, "variant_id": {{ $fi->freeProductVariant->id }}}'>
                                                                                        </td>
                                                                                        <td class="text-end pe-3">
                                                                                            <button type="button" class="btn btn-outline-danger btn-sm border-0 remove-free-item"><i class="bi bi-trash3"></i></button>
                                                                                        </td>
                                                                                    </tr>
                                                                                @endif
                                                                            @endforeach
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-5">
                                                    <div class="card border shadow-none rounded-4">
                                                        <div class="card-body p-4">
                                                            <h6 class="fw-bold mb-3"><i class="bi bi-box2-heart me-2 text-info"></i>Promo Items (Manual)</h6>
                                                            <p class="text-muted small mb-4">Select items from the pre-defined Free Gifts master list.</p>
                                                            <select name="custom_free_item_ids[]" id="custom_free_item_ids" class="select2" multiple>
                                                                @foreach($freeItemsMaster as $fi)
                                                                    <option value="{{ $fi->id }}" {{ in_array($fi->id, $product->freeItems->pluck('custom_free_item_id')->toArray()) ? 'selected' : '' }}>
                                                                        {{ $fi->name }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mt-5 pt-3 border-top text-end">
                                                <button type="submit" class="btn btn-primary px-5 btn-lg shadow-sm">Authorize Bundle</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>

                                {{-- ============= FAQs TAB ============= --}}
                                <div class="tab-pane fade" id="faqs" role="tabpanel">
                                    <form action="{{ route('admin.products.update', $product->id) }}" method="POST">
                                        @csrf
                                        @method('PUT')
                                        <input type="hidden" name="update_tab" value="faqs">
                                        <div class="pt-4">
                                            <div class="d-flex justify-content-between align-items-center mb-4">
                                                <div>
                                                    <h5 class="fw-bold mb-1">Customer Support FAQs</h5>
                                                    <p class="text-muted small mb-0">Anticipate customer questions about this specific item</p>
                                                </div>
                                                <button type="button" class="btn btn-info btn-sm text-white px-3" id="add-faq">
                                                    <i class="bi bi-patch-question me-1"></i> New FAQ
                                                </button>
                                            </div>

                                            <div id="faqs-container" class="space-y-4">
                                                @foreach($product->faqs as $fi => $faq)
                                                    <div class="faq-row border-start border-primary border-4 rounded-3 p-4 bg-light mb-3 position-relative">
                                                        <button type="button" class="btn btn-link text-danger position-absolute top-0 end-0 mt-2 me-2 remove-faq"><i class="bi bi-trash"></i></button>
                                                        <div class="mb-3 mt-1">
                                                            <label class="form-label text-primary small fw-bold">Question</label>
                                                            <input type="text" name="faqs[{{ $fi }}][question]" class="form-control border-0 shadow-none px-0 fs-5 fw-bold bg-transparent" value="{{ $faq->question }}" placeholder="e.g. Is this water resistant?" required>
                                                        </div>
                                                        <div>
                                                            <label class="form-label text-muted small fw-bold">Expert Response</label>
                                                            <textarea name="faqs[{{ $fi }}][answer]" class="form-control border-0 shadow-none px-0 bg-transparent" rows="2" placeholder="Start typing the answer...">{{ $faq->answer }}</textarea>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                            <div class="mt-5 pt-3 border-top text-end">
                                                <button type="submit" class="btn btn-primary px-5 btn-lg">Publish FAQs</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>

                                {{-- ============= MEDIA TAB ============= --}}
                                <div class="tab-pane fade" id="media" role="tabpanel">
                                    <form action="{{ route('admin.products.update', $product->id) }}" method="POST" enctype="multipart/form-data">
                                        @csrf
                                        @method('PUT')
                                        <input type="hidden" name="update_tab" value="media">
                                        
                                        <div class="pt-4">
                                            <div class="row g-4">
                                                <div class="col-md-6">
                                                    <div class="card border rounded-4 h-100">
                                                        <div class="card-body p-4">
                                                            <h6 class="fw-bold mb-3 text-indigo"><i class="bi bi-image me-2"></i>Primary Image (Thumbnail)</h6>
                                                            <div class="border-dashed-2 rounded-4 p-4 text-center bg-light mb-3">
                                                                @if($product->image)
                                                                    <img src="{{ asset('storage/' . $product->image) }}" class="img-fluid rounded shadow-sm mb-3" style="max-height: 180px;">
                                                                @endif
                                                                <input type="file" name="thumbnail" id="thumbnail" class="form-control d-none" accept="image/*">
                                                                <button type="button" class="btn btn-primary btn-sm px-4" onclick="document.getElementById('thumbnail').click()">
                                                                    <i class="bi bi-cloud-arrow-up me-1"></i> Re-Upload Image
                                                                </button>
                                                                <p class="text-muted small mt-2">Recommended: 800x800px (PNG/JPG)</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="card border rounded-4 h-100">
                                                        <div class="card-body p-4">
                                                            <h6 class="fw-bold mb-4 text-danger"><i class="bi bi-youtube me-2"></i>Product Video Spotlight</h6>
                                                            <label class="form-label">Video Content URL</label>
                                                            <div class="input-group">
                                                                <span class="input-group-text bg-light"><i class="bi bi-link-45deg"></i></span>
                                                                <input type="url" name="video" class="form-control" value="{{ old('video', $product->video) }}" placeholder="https://youtube.com/watch?v=...">
                                                            </div>
                                                            <div class="form-text mt-2">Paste a YouTube or Vimeo link for the product page spotlight.</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="mt-5">
                                                <h5 class="fw-bold mb-4 d-flex align-items-center"><i class="bi bi-collection-play me-2 text-indigo"></i> Color-Specific Media Galleries</h5>
                                                <div class="space-y-4">
                                                    @foreach($product->productColors as $pc)
                                                        <div class="color-gallery-section card border-0 shadow-none bg-light rounded-4 mb-4" data-color-id="{{ $pc->color_id }}">
                                                            <div class="card-body p-4">
                                                                <div class="d-flex align-items-center mb-4">
                                                                    <div class="rounded-pill shadow-sm me-3" style="width: 25px; height: 25px; background: {{ $pc->color->hex_value ?: '#ccc' }}; border: 2px solid #fff;"></div>
                                                                    <h6 class="mb-0 fw-bold">Gallery for <span class="text-indigo">{{ $pc->color->name }}</span></h6>
                                                                </div>
                                                                
                                                                <div class="row g-3">
                                                                    @foreach($pc->images as $imgRecord)
                                                                        <div class="col-md-2 col-6">
                                                                            <div class="card border-0 bg-white shadow-sm rounded-3 overflow-hidden h-100 position-relative group-hover">
                                                                                <img src="{{ asset('storage/' . $imgRecord->image) }}" class="card-img-top" style="height: 120px; object-fit: cover;">
                                                                                <div class="p-2 text-center bg-white">
                                                                                    <div class="form-check d-inline-block">
                                                                                        <input type="checkbox" name="remove_color_images[{{ $pc->color_id }}][]" value="{{ $imgRecord->image }}" class="form-check-input">
                                                                                        <label class="form-check-label small text-danger fw-bold">Trash</label>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    @endforeach
                                                                    <div class="col-md-2 col-6">
                                                                        <div class="card border-dashed-2 rounded-3 h-100 d-flex flex-column align-items-center justify-content-center text-muted p-2" style="min-height: 156px; cursor: pointer;" onclick="this.querySelector('input').click()">
                                                                            <i class="bi bi-plus-lg fs-3 mb-2"></i>
                                                                            <div class="small fw-bold">Add Pics</div>
                                                                            <input type="file" name="color_images[{{ $pc->color_id }}][]" class="d-none" multiple accept="image/*">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>

                                            <div class="mt-5 pt-3 border-top text-end">
                                                <button type="submit" class="btn btn-primary px-5 btn-lg shadow-sm">Sync Media Catalog</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>

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

<!-- Variant Selection Modal for Free Items -->
<div class="modal fade" id="variantSelectModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title fw-bold">Select Free Variant</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4 bg-light">
                <div class="row g-3" id="variantListContainer">
                    <!-- Dynamic Variant Cards -->
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(function() {
        // ---- Basic Setup & Tab Persistence ----
        let specIndex = {{ count($product->specifications) }};
        let variantIndex = {{ count($product->variants) }};
        let faqIndex = {{ count($product->faqs) }};
        const headersData = @json($headers);
        const colorsData = @json($colors);

        if (window.location.hash) {
            let triggerEl = document.querySelector('a[href="' + window.location.hash + '"]');
            if (triggerEl) {
                new bootstrap.Tab(triggerEl).show();
            }
        }
        $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
            if (history.pushState) history.pushState(null, null, e.target.hash);
            else window.location.hash = e.target.hash;
        });

        // ---- Keywords (Select2 Tags) ----
        function initKeywords() {
            if(typeof $.fn.select2 !== 'undefined') {
                const $el = $('.select2-tags-field');
                if ($el.length === 0) return;
                
                // Aggressive Re-build: Remove Select2 classes and data to force a fresh start
                if ($el.hasClass('select2-hidden-accessible')) {
                    $el.select2('destroy');
                }
                
                $el.select2({
                    theme: 'bootstrap-5',
                    width: '100%',
                    placeholder: 'Enter keywords...',
                    tags: true,
                    tokenSeparators: [',', ' ']
                });
            }
        }
        initKeywords();

        // Re-init on tab show to fix hidden container rendering issues
        $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
            const hash = $(this).attr('href');
            if (hash === '#general') {
                // Use a small timeout to ensure the tab transition is complete
                setTimeout(function() {
                    initKeywords();
                }, 100);
            }
        });

        // ---- Category to Subcategory AJAX & Bonus Sync ----
        const categoriesData = @json($categories->map->only(['id', 'bonus_percentage']));
        $('#category_id').on('change', function() {
            const categoryId = $(this).val();

            // Sync bonus percentage only if user is changing it actively (optional protection but good ux)
            const cat = categoriesData.find(c => c.id == categoryId);
            if(cat && cat.bonus_percentage !== undefined && cat.bonus_percentage !== null) {
                $('#bonus_percentage').val(cat.bonus_percentage);
            }

            const $sub = $('#subcategory_id');
            $sub.html('<option value="">Loading...</option>');
            if (!categoryId) { $sub.html('<option value="">Select Subcategory</option>'); return; }
            $.getJSON(`/admin/get-subcategories/${categoryId}`, function(res) {
                $sub.html('<option value="">Select Subcategory</option>');
                if (res.status && res.data) {
                    res.data.forEach(sub => $sub.append(`<option value="${sub.id}">${sub.name}</option>`));
                }
            });
        });

        // ---- Specifications ----
        $('#add-spec').on('click', function() {
            const row = `
                <div class="row mb-3 g-2 spec-row align-items-center p-3 border rounded-3 bg-white fade-in">
                    <div class="col-md-3">
                        <label class="small text-muted mb-1">Group header</label>
                        <select name="specs[${specIndex}][header_id]" class="form-select spec-header shadow-none border-0 bg-light" required>
                            <option value="">Select Header</option>
                            ${headersData.map(h => `<option value="${h.id}">${h.name}</option>`).join('')}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="small text-muted mb-1">Sub-attribute</label>
                        <select name="specs[${specIndex}][subheader_id]" class="form-select spec-subheader shadow-none border-0 bg-light" required>
                            <option value="">Select Subheader</option>
                        </select>
                    </div>
                    <div class="col-md-5">
                        <label class="small text-muted mb-1">Value / Description</label>
                        <input type="text" name="specs[${specIndex}][specification]" class="form-control shadow-none border-0 bg-light" placeholder="e.g. 500 nits, IP68" required>
                    </div>
                    <div class="col-md-1 text-end">
                        <button type="button" class="btn btn-link text-danger remove-spec p-0"><i class="bi bi-x-circle-fill fs-5"></i></button>
                    </div>
                </div>`;
            $('#specifications-container').append(row);
            specIndex++;
        });
        $(document).on('change', '.spec-header', function() {
            const $sh = $(this).closest('.spec-row').find('.spec-subheader');
            const h = headersData.find(h => h.id == $(this).val());
            $sh.html('<option value="">Select Subheader</option>');
            if (h && h.subheaders) h.subheaders.forEach(s => $sh.append(`<option value="${s.id}">${s.name}</option>`));
        });
        $(document).on('click', '.remove-spec', function() { $(this).closest('.spec-row').remove(); });

        // ---- Variants ----
        $('#add-variant').on('click', function() {
            // Get currently selected colors from General tab
            const selectedColors = $('#product_colors').select2('data').map(c => ({
                id: c.id,
                text: c.text
            }));

            if (selectedColors.length === 0) {
                alert('Please select at least one color in the General tab first!');
                return;
            }

            const row = $(`
                <div class="variant-row card border bg-white mb-4 shadow-sm fade-in" data-index="${variantIndex}">
                    <div class="card-header bg-light d-flex justify-content-between align-items-center py-2">
                        <span class="badge bg-primary px-3">New Variation</span>
                        <button type="button" class="btn btn-link text-danger p-0 remove-variant" title="Delete Variant">
                            <i class="bi bi-trash3-fill"></i> Remove
                        </button>
                    </div>
                    <div class="card-body p-4">
                        <div class="row g-3">
                            <div class="col-md-3">
                                <label class="form-label">Variant Name *</label>
                                <input type="text" name="variants[${variantIndex}][name]" class="form-control" placeholder="e.g. Pro Max / 1TB" required>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Price ($)</label>
                                <input type="number" step="0.01" name="variants[${variantIndex}][price]" class="form-control variant-price fw-bold" value="${$('#price').val()}">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label text-muted small">Disc %</label>
                                <input type="number" step="0.01" name="variants[${variantIndex}][discount]" class="form-control variant-discount" value="0">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label text-muted small">Disc Amt</label>
                                <input type="number" step="0.01" class="form-control variant-discount-amount bg-light" value="0.00" readonly>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label text-primary fw-bold">Live Inventory</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-white border-primary border-end-0 text-primary"><i class="bi bi-box-seam"></i></span>
                                    <input type="number" name="variants[${variantIndex}][stock]" class="form-control variant-total-stock bg-white border-primary border-start-0 fw-bold text-primary" value="0" readonly>
                                </div>
                            </div>
                            
                            <div class="col-12 mt-4">
                                <div class="p-3 bg-light rounded-3 border-dashed">
                                    <label class="form-label d-flex align-items-center mb-3">
                                        <i class="bi bi-palette me-2"></i> Color-specific Allocation
                                    </label>
                                    <div class="row g-3 items-center">
                                        <div class="col-md-5">
                                            <select name="variants[${variantIndex}][colors][]" class="select2 color-select" multiple="multiple">
                                                ${selectedColors.map(c => `<option value="${c.id}">${c.text}</option>`).join('')}
                                            </select>
                                        </div>
                                        <div class="col-md-7">
                                            <div class="color-stocks-container d-flex flex-wrap gap-2"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>`);
            $('#variants-container').append(row);
            if (typeof $.fn.select2 !== 'undefined') {
                row.find('.select2').select2({ theme: 'bootstrap-5', width: '100%', placeholder: 'Select colors' });
            }
            variantIndex++;
        });

        $(document).on('change', '.color-select', function() {
            const $row = $(this).closest('.variant-row');
            const vIdx = $row.data('index');
            const $container = $row.find('.color-stocks-container');
            const stocks = {};
            $container.find('input').each(function() { 
                stocks[$(this).data('color-id')] = $(this).val(); 
            });

            $container.empty();
            $(this).select2('data').forEach(opt => {
                const colorId = opt.id;
                if(!colorId) return;
                $container.append(`
                    <div class="input-group input-group-sm mb-1">
                        <span class="input-group-text bg-light border-info">${opt.text} Stock</span>
                        <input type="number" name="variants[${vIdx}][color_stocks][${colorId}]" value="${stocks[colorId]||''}" data-color-id="${colorId}" class="form-control color-stock-input" placeholder="Qty">
                    </div>`);
            });
            updateVariantTotalStock($row);
        });

        // ---- Variant Stock Summation Logic ----
        function updateVariantTotalStock($row) {
            let total = 0;
            $row.find('.color-stock-input').each(function() {
                const val = parseInt($(this).val()) || 0;
                total += val;
            });
            $row.find('.variant-total-stock').val(total);
        }

        $(document).on('keyup change', '.color-stock-input', function() {
            updateVariantTotalStock($(this).closest('.variant-row'));
        });

        $(document).on('click', '.remove-variant', function() { $(this).closest('.variant-row').remove(); });

        // ---- FAQs ----
        $('#add-faq').on('click', function() {
            $('#faqs-container').append(`
                <div class="faq-row border-start border-primary border-4 rounded-3 p-4 bg-light mb-3 position-relative fade-in">
                    <button type="button" class="btn btn-link text-danger position-absolute top-0 end-0 mt-2 me-2 remove-faq"><i class="bi bi-trash"></i></button>
                    <div class="mb-3 mt-1">
                        <label class="form-label text-primary small fw-bold">Question</label>
                        <input type="text" name="faqs[${faqIndex}][question]" class="form-control border-0 shadow-none px-0 fs-5 fw-bold bg-transparent" placeholder="e.g. Is this water resistant?" required>
                    </div>
                    <div>
                        <label class="form-label text-muted small fw-bold">Expert Response</label>
                        <textarea name="faqs[${faqIndex}][answer]" class="form-control border-0 shadow-none px-0 bg-transparent" rows="2" placeholder="Start typing the answer..."></textarea>
                    </div>
                </div>`);
            faqIndex++;
        });
        $(document).on('click', '.remove-faq', function() { $(this).closest('.faq-row').remove(); });

        // ---- General Color Gallery Sync ----
        $('#product_colors').on('change', function() {
            const selected = $(this).val() || [];
            $('.color-gallery-section').each(function() {
                const colorId = $(this).data('color-id').toString();
                $(this).toggleClass('d-none', !selected.includes(colorId));
            });
        }).trigger('change');

        // ---- Discount & Price Real-time Calculations ----
        function updateDiscountFromAmount() {
            const price = parseFloat($('#price').val()) || 0;
            const amount = parseFloat($('#discount_amount').val()) || 0;
            if (price > 0) {
                const percentage = (amount / price) * 100;
                $('#discount').val(percentage.toFixed(2));
            }
        }

        function updateDiscountFromPercentage() {
            const price = parseFloat($('#price').val()) || 0;
            const percentage = parseFloat($('#discount').val()) || 0;
            if (price > 0) {
                const amount = price * (percentage / 100);
                $('#discount_amount').val(amount.toFixed(2));
            }
        }

        $('#price, #discount').on('keyup change', function() {
            updateDiscountFromPercentage();
        });

        $('#discount_amount').on('keyup change', function() {
            updateDiscountFromAmount();
        });

        // Trigger initial calculation
        updateDiscountFromPercentage();

        // ---- Variant-wise Discount & Price Calculations ----
        function updateVariantDiscountFromAmount($row) {
            const price = parseFloat($row.find('.variant-price').val()) || 0;
            const amount = parseFloat($row.find('.variant-discount-amount').val()) || 0;
            if (price > 0) {
                const percentage = (amount / price) * 100;
                $row.find('.variant-discount').val(percentage.toFixed(2));
            }
        }

        function updateVariantDiscountFromPercentage($row) {
            const price = parseFloat($row.find('.variant-price').val()) || 0;
            const percentage = parseFloat($row.find('.variant-discount').val()) || 0;
            if (price > 0) {
                const amount = price * (percentage / 100);
                $row.find('.variant-discount-amount').val(amount.toFixed(2));
            }
        }

        $(document).on('keyup change', '.variant-price, .variant-discount', function() {
            const $row = $(this).closest('.variant-row');
            updateVariantDiscountFromPercentage($row);
        });

        $(document).on('keyup change', '.variant-discount-amount', function() {
            const $row = $(this).closest('.variant-row');
            updateVariantDiscountFromAmount($row);
        });

        // Initialize variant discounts
        $('.variant-row').each(function() {
            updateVariantDiscountFromPercentage($(this));
        });

        // ---- Free Items Select2 AJAX Search ----
        let currentVariants = [];

        $('#free_product_search').select2({
            placeholder: "Type to search products or variants...",
            allowClear: true,
            ajax: {
                url: "{{ route('admin.hot-deals.search-products') }}",
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return { q: params.term };
                },
                processResults: function (data) {
                    return { results: data.results };
                },
                cache: true
            },
            templateResult: formatFreeProductResult,
            templateSelection: function(item) {
                if (!item.id) { return item.text; }
                return item.name || item.text;
            }
        }).on('select2:select', function (e) {
            let data = e.params.data;
            if (data.has_variants && data.variants && data.variants.length > 0) {
                currentVariants = data.variants;
                let modalHtml = '';
                data.variants.forEach(variant => {
                    modalHtml += `
                        <div class="col-md-6 mb-3">
                            <div class="card h-100 variant-box border p-3" data-master-id="${data.id}" data-master-name="${data.name}" data-master-image="${data.image}" data-variant-id="${variant.id}" data-variant-name="${variant.name}">
                                <div class="d-flex align-items-center mb-2">
                                    <div class="bg-light border rounded me-2 d-flex align-items-center justify-content-center text-muted" style="width:40px; height:40px; font-weight:bold; font-size:12px;">VAR</div>
                                    <div class="fw-bold fs-5 text-dark">${variant.name}</div>
                                </div>
                                <div class="text-success fw-bold">Price: $${parseFloat(variant.price).toFixed(2)}</div>
                                <hr class="my-2">
                                <button type="button" class="btn btn-outline-primary btn-sm w-100">Select Variant</button>
                            </div>
                        </div>`;
                });
                $('#variantListContainer').html(modalHtml);
                let myModal = new bootstrap.Modal(document.getElementById('variantSelectModal'), { keyboard: false });
                myModal.show();
            } else {
                appendFreeItemRow({
                    type: 'product',
                    id: data.id,
                    product_id: data.id,
                    name: data.name,
                    image: data.image
                });
            }
            $(this).val(null).trigger('change');
        });

        function formatFreeProductResult(product) {
            if (product.loading) return product.text;
            let img = product.image ? `<img src="/storage/${product.image}" class="product-img">` : `<div class="bg-light border rounded me-3 d-flex align-items-center justify-content-center text-muted" style="width:45px; height:45px;"><i class="bi bi-box"></i></div>`;
            return $(`
                <div class="product-result" style="display:flex; align-items:center;">
                    ${img}
                    <div class="product-info">
                        <div class="product-name fw-bold text-dark">${product.name}</div>
                        <div class="product-price text-success">$${parseFloat(product.price).toFixed(2)}</div>
                        ${product.has_variants ? `<span class="badge bg-primary mt-1"><i class="bi bi-layers"></i> ${product.variants.length} Variants</span>` : `<span class="badge bg-secondary mt-1">Base Product</span>`}
                    </div>
                </div>
            `);
        }

        $(document).on('click', '.variant-box', function() {
            let p_id = $(this).data('master-id');
            let p_name = $(this).data('master-name');
            let p_image = $(this).data('master-image');
            let v_id = $(this).data('variant-id');
            let v_name = $(this).data('variant-name');

            appendFreeItemRow({
                type: 'variant',
                id: v_id,
                product_id: p_id,
                variant_id: v_id,
                name: p_name + ' - <strong>' + v_name + '</strong>',
                image: p_image
            });

            bootstrap.Modal.getInstance(document.getElementById('variantSelectModal')).hide();
        });

        function appendFreeItemRow(item) {
            if ($(`#free_products_table tbody tr[data-type="${item.type}"][data-id="${item.id}"]`).length > 0) {
                alert("This free item is already added!");
                return;
            }

            let valueJson = item.type === 'variant' ? `{"product_id": ${item.product_id}, "variant_id": ${item.variant_id}}` : `{"product_id": ${item.product_id}}`;
            let iconOrImage = item.type === 'variant' 
                ? `<div class="bg-light border rounded me-2 d-flex align-items-center justify-content-center text-muted" style="width:30px; height:30px; font-size:10px;">VAR</div>`
                : (item.image ? `<img src="/storage/${item.image}" class="rounded me-2" width="30" height="30" style="object-fit:cover;">` : `<div class="bg-light border rounded me-2 d-flex align-items-center justify-content-center text-muted" style="width:30px; height:30px;"><i class="bi bi-box"></i></div>`);

            let tr = `
                <tr data-type="${item.type}" data-id="${item.id}">
                    <td>
                        <div class="d-flex align-items-center">
                            ${iconOrImage}
                            <span>${item.name}</span>
                        </div>
                        <input type="hidden" name="selected_free_items[]" value='${valueJson}'>
                    </td>
                    <td><button type="button" class="btn btn-sm btn-danger remove-free-item"><i class="bi bi-trash"></i></button></td>
                </tr>
            `;
            $('#free_products_table tbody').append(tr);
        }

        $(document).on('click', '.remove-free-item', function() {
            $(this).closest('tr').remove();
        });

    });
</script>
@endpush