@extends('layouts.admin')

@section('title', 'Add Manual Product | OMNITRADE Global Direct')
@section('page_title', 'Add Manual Product to Catalog')

@section('content')
<div style="max-width:960px; display:flex; flex-direction:column; gap:24px;">

    <!-- Top Navigation / Action Bar -->
    <div style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;">
        <div>
            <h2 style="font-size:20px; font-weight:800; color:var(--admin-text-main); margin-bottom:4px;">
                Manual Product Creation
            </h2>
            <p style="font-size:13.5px; color:var(--admin-text-muted);">
                Add physical inventory, private-label goods, or bespoke products directly to your storefront.
            </p>
        </div>
        <div style="display:flex; gap:10px;">
            <a href="{{ route('admin.import.index') }}" class="btn btn-outline btn-sm">
                <i data-lucide="cloud-download" style="width:14px;"></i> Use 1-Click Importer
            </a>
            <a href="{{ route('admin.products.index') }}" class="btn btn-outline btn-sm">
                &larr; Back to Products
            </a>
        </div>
    </div>

    @if(isset($errors) && $errors->any())
        <div style="background:#fef2f2; border:1px solid #fecaca; color:#991b1b; padding:14px 20px; border-radius:var(--radius-sm); font-size:13.5px;">
            <strong style="display:block; margin-bottom:4px;">Please correct the following errors:</strong>
            <ul style="margin-left:18px;">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <!-- Main Creation Form (Clean Card without Highlights) -->
    <form action="{{ route('admin.products.store') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <div style="display:flex; flex-direction:column; gap:24px;">

            <!-- Section 1: Basic Information -->
            <div class="card">
                <h3 style="font-size:16px; font-weight:700; color:var(--admin-text-main); margin-bottom:18px; display:flex; align-items:center; gap:8px;">
                    <i data-lucide="info" style="width:18px; color:var(--admin-primary);"></i>
                    General Information
                </h3>

                <div style="margin-bottom:18px;">
                    <label>Product Title *</label>
                    <input type="text" name="title" value="{{ old('title') }}" required placeholder="e.g. Ultra-Slim ANC Wireless Noise-Cancelling Headphones Pro">
                </div>

                <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px;">
                    <div>
                        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;">
                            <label style="margin:0;">Store Category</label>
                            <a href="{{ route('admin.categories.index') }}" target="_blank" style="font-size:11.5px; color:var(--admin-primary); font-weight:700; text-decoration:none;">
                                + Manage / Add Categories
                            </a>
                        </div>
                        <select name="category_id" id="categorySelect">
                            <option value="">Select Category...</option>
                            @foreach($categories as $cat)
                                <option value="{{ $cat->id }}" {{ old('category_id') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label>Supplier / Fulfillment Channel</label>
                        <select name="supplier_id">
                            <option value="">In-House / Direct Warehouse</option>
                            @foreach($suppliers as $sup)
                                <option value="{{ $sup->id }}" {{ old('supplier_id') == $sup->id ? 'selected' : '' }}>{{ $sup->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px;">
                    <div>
                        <label>Custom SKU (Optional)</label>
                        <input type="text" name="sku" value="{{ old('sku') }}" placeholder="Auto-generated if empty">
                    </div>

                    <div>
                        <label>Supplier Product ID / ASIN</label>
                        <input type="text" name="supplier_product_id" value="{{ old('supplier_product_id') }}" placeholder="e.g. 100500892134">
                    </div>

                    <div>
                        <label>Direct Source Link</label>
                        <input type="url" name="supplier_url" value="{{ old('supplier_url') }}" placeholder="https://supplier.com/item/...">
                    </div>
                </div>
            </div>

            <!-- Section 2: Pricing, Margins & Inventory -->
            <div class="card">
                <h3 style="font-size:16px; font-weight:700; color:var(--admin-text-main); margin-bottom:18px; display:flex; align-items:center; gap:8px;">
                    <i data-lucide="calculator" style="width:18px; color:var(--admin-primary);"></i>
                    Pricing, Profit Margins &amp; Inventory
                </h3>

                <div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:18px;">
                    <div>
                        <label>Supplier Cost Price ($) *</label>
                        <div style="position:relative; display:flex; align-items:center;">
                            <span style="position:absolute; left:12px; font-size:14px; color:var(--admin-text-muted); font-weight:700;">$</span>
                            <input type="number" step="0.01" name="cost_price" id="costPriceInput" value="{{ old('cost_price') }}" required placeholder="14.50" style="padding-left:26px;" oninput="updateMarginCalculations()">
                        </div>
                        <span style="font-size:11px; color:var(--admin-text-muted); display:block; margin-top:4px;">Base supplier cost or COGS.</span>
                    </div>

                    <div>
                        <div style="display:flex; justify-content:space-between; align-items:center;">
                            <label>Selling Price ($)</label>
                            <button type="button" onclick="autoCalculatePrice()" style="background:none; border:none; color:var(--admin-primary); font-size:11px; font-weight:700; cursor:pointer;">
                                Auto 2.5x Markup
                            </button>
                        </div>
                        <div style="position:relative; display:flex; align-items:center;">
                            <span style="position:absolute; left:12px; font-size:14px; color:var(--admin-primary); font-weight:700;">$</span>
                            <input type="number" step="0.01" name="price" id="sellingPriceInput" value="{{ old('price') }}" placeholder="39.99" style="padding-left:26px;" oninput="updateMarginCalculations()">
                        </div>
                        <span style="font-size:11px; color:var(--admin-text-muted); display:block; margin-top:4px;">Leave empty to use active markup rules.</span>
                    </div>

                    <div>
                        <label>Compare-At Price ($ MSRP)</label>
                        <div style="position:relative; display:flex; align-items:center;">
                            <span style="position:absolute; left:12px; font-size:14px; color:var(--admin-text-muted); font-weight:700;">$</span>
                            <input type="number" step="0.01" name="compare_at_price" id="comparePriceInput" value="{{ old('compare_at_price') }}" placeholder="69.99" style="padding-left:26px;">
                        </div>
                        <span style="font-size:11px; color:var(--admin-text-muted); display:block; margin-top:4px;">Original retail strike-through price.</span>
                    </div>
                </div>

                <!-- Live Margin Feedback Box (Clean Box without highlights) -->
                <div style="background:#f8f9ff; border:1px solid var(--admin-border); border-radius:8px; padding:16px; margin-bottom:18px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;">
                    <div>
                        <span style="font-size:12px; font-weight:700; color:var(--admin-text-muted); text-transform:uppercase; letter-spacing:0.04em;">Estimated Unit Profit</span>
                        <div style="font-size:20px; font-weight:800; color:#059669; font-family:'Plus Jakarta Sans', sans-serif;" id="displayUnitProfit">
                            +$0.00
                        </div>
                    </div>
                    <div>
                        <span style="font-size:12px; font-weight:700; color:var(--admin-text-muted); text-transform:uppercase; letter-spacing:0.04em;">Profit Margin %</span>
                        <div style="font-size:20px; font-weight:800; color:var(--admin-primary); font-family:'Plus Jakarta Sans', sans-serif;" id="displayMarginPercent">
                            0%
                        </div>
                    </div>
                    <div>
                        <span style="font-size:12px; font-weight:700; color:var(--admin-text-muted); text-transform:uppercase; letter-spacing:0.04em;">Markup Multiplier</span>
                        <div style="font-size:20px; font-weight:800; color:var(--admin-text-main); font-family:'Plus Jakarta Sans', sans-serif;" id="displayMultiplier">
                            0.0x
                        </div>
                    </div>
                </div>

                <div style="max-width:280px;">
                    <label>Initial Stock Inventory *</label>
                    <input type="number" name="stock_quantity" value="{{ old('stock_quantity', 150) }}" required min="0">
                </div>
            </div>

            <!-- Section 3: Product Imagery & Gallery (Max 5 Images: WEBP, JPEG, PNG) -->
            <div class="card">
                <div style="display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:12px; margin-bottom:16px;">
                    <div>
                        <h3 style="font-size:16px; font-weight:700; color:var(--admin-text-main); margin-bottom:4px; display:flex; align-items:center; gap:8px;">
                            <i data-lucide="images" style="width:18px; color:var(--admin-primary);"></i>
                            Product Media &amp; Gallery
                        </h3>
                        <p style="font-size:13px; color:var(--admin-text-muted); margin:0;">
                            Upload up to <strong>5 product images</strong>. Strictly accepted formats: <strong>WEBP, JPEG, PNG</strong> only (Max 10MB per file).
                        </p>
                    </div>
                    <div style="display:flex; align-items:center; gap:10px;">
                        <span id="selectedCountBadge" style="font-size:12px; font-weight:700; padding:4px 10px; border-radius:20px; background:#eff6ff; color:var(--admin-primary); border:1px solid #bfdbfe;">
                            0 / 5 Images Selected
                        </span>
                        <button type="button" id="clearAllImagesBtn" onclick="clearAllSelectedImages()" style="display:none; background:none; border:none; color:#dc2626; font-size:12px; font-weight:700; cursor:pointer;">
                            Clear All
                        </button>
                    </div>
                </div>

                <!-- Format & Limit Notice -->
                <div style="display:flex; align-items:center; gap:12px; background:#f8f9ff; border:1px solid var(--admin-border); border-radius:6px; padding:10px 14px; margin-bottom:16px; font-size:12.5px; color:var(--admin-text-main);">
                    <i data-lucide="shield-check" style="width:16px; color:#059669; flex-shrink:0;"></i>
                    <span>
                        <strong>Backend Validation Enforced:</strong> Slot 1 automatically acts as the primary cover photo for catalog listings. Formats are strictly restricted to <code>.webp</code>, <code>.jpeg</code>, <code>.jpg</code>, and <code>.png</code>.
                    </span>
                </div>

                <!-- Client-side Validation Error Banner -->
                <div id="imageUploadError" style="display:none; background:#fef2f2; border:1px solid #fecaca; color:#991b1b; padding:10px 14px; border-radius:6px; font-size:13px; margin-bottom:16px;"></div>

                <!-- Hidden Native File Input -->
                <input type="file" id="productImagesInput" name="product_images[]" multiple accept=".webp,.jpeg,.jpg,.png,image/webp,image/jpeg,image/png" style="display:none;" onchange="handleImageSelection(this.files)">

                <!-- Drag & Drop Zone -->
                <div id="dropZoneArea" onclick="document.getElementById('productImagesInput').click()" style="border:2px dashed var(--admin-border); background:#fcfdff; border-radius:8px; padding:28px 20px; text-align:center; cursor:pointer; transition:all 0.2s ease; margin-bottom:20px;">
                    <div style="display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background:#eff6ff; color:var(--admin-primary); margin-bottom:10px;">
                        <i data-lucide="cloud-upload" style="width:24px; height:24px;"></i>
                    </div>
                    <div style="font-size:14.5px; font-weight:700; color:var(--admin-text-main); margin-bottom:4px;">
                        Click to browse or drag &amp; drop product images here
                    </div>
                    <div style="font-size:12.5px; color:var(--admin-text-muted); margin-bottom:10px;">
                        Select 1 to 5 images (WEBP, JPEG, PNG only &bull; max 10MB each)
                    </div>
                    <div style="display:inline-flex; gap:8px;">
                        <span style="font-size:11px; font-weight:700; padding:2px 8px; border-radius:4px; background:#ffffff; border:1px solid var(--admin-border); color:var(--admin-text-muted);">WEBP</span>
                        <span style="font-size:11px; font-weight:700; padding:2px 8px; border-radius:4px; background:#ffffff; border:1px solid var(--admin-border); color:var(--admin-text-muted);">JPEG / JPG</span>
                        <span style="font-size:11px; font-weight:700; padding:2px 8px; border-radius:4px; background:#ffffff; border:1px solid var(--admin-border); color:var(--admin-text-muted);">PNG</span>
                    </div>
                </div>

                <!-- 5 Visual Preview Slots -->
                <div>
                    <span style="font-size:12px; font-weight:700; color:var(--admin-text-muted); text-transform:uppercase; letter-spacing:0.04em; display:block; margin-bottom:10px;">
                        Image Gallery Slots (Max 5)
                    </span>
                    <div id="imageSlotsContainer" style="display:grid; grid-template-columns:repeat(5, 1fr); gap:12px;">
                        <!-- Slots 1 through 5 rendered by JavaScript -->
                    </div>
                </div>

                <!-- Fallback Direct Remote URL (Optional) -->
                <div style="margin-top:20px; border-top:1px solid var(--admin-border); padding-top:16px;">
                    <details style="font-size:13px; color:var(--admin-text-muted);">
                        <summary style="cursor:pointer; font-weight:600; color:var(--admin-primary); user-select:none;">
                            Optional: Or specify a direct remote image URL instead
                        </summary>
                        <div style="margin-top:10px;">
                            <input type="url" name="image_url" id="productUrlInput" value="{{ old('image_url') }}" placeholder="https://images.unsplash.com/photo-..." style="font-size:13px;">
                            <span style="font-size:11.5px; color:var(--admin-text-muted); display:block; margin-top:4px;">
                                Used only if no files are uploaded above.
                            </span>
                        </div>
                    </details>
                </div>
            </div>

            <!-- Section 4: Descriptions -->
            <div class="card">
                <h3 style="font-size:16px; font-weight:700; color:var(--admin-text-main); margin-bottom:18px; display:flex; align-items:center; gap:8px;">
                    <i data-lucide="file-text" style="width:18px; color:var(--admin-primary);"></i>
                    Product Descriptions
                </h3>

                <div style="margin-bottom:18px;">
                    <label>Short Summary (Displays on Catalog cards &amp; quick views)</label>
                    <textarea name="short_description" rows="2" placeholder="Brief 1-2 sentence compelling summary of the product...">{{ old('short_description') }}</textarea>
                </div>

                <div>
                    <label>Comprehensive Description (Full features, specifications &amp; sizing)</label>
                    <textarea name="description" rows="6" placeholder="Detailed product copy, key features, technical specifications, and what's in the box...">{{ old('description') }}</textarea>
                </div>
            </div>

            <!-- Section 5: Visibility & Merchandising Flags -->
            <div class="card">
                <h3 style="font-size:16px; font-weight:700; color:var(--admin-text-main); margin-bottom:16px; display:flex; align-items:center; gap:8px;">
                    <i data-lucide="tags" style="width:18px; color:var(--admin-primary);"></i>
                    Visibility &amp; Merchandising Flags
                </h3>

                <div style="display:flex; gap:24px; flex-wrap:wrap;">
                    <label style="display:flex; align-items:center; gap:8px; cursor:pointer;">
                        <input type="checkbox" name="is_active" value="1" checked style="accent-color:var(--admin-primary);">
                        <span style="font-weight:600; color:var(--admin-text-main);">Active &amp; Visible in Storefront</span>
                    </label>

                    <label style="display:flex; align-items:center; gap:8px; cursor:pointer;">
                        <input type="checkbox" name="is_featured" value="1" style="accent-color:var(--admin-primary);">
                        <span style="font-weight:600; color:var(--admin-text-main);">Feature on Homepage Showcase</span>
                    </label>

                    <label style="display:flex; align-items:center; gap:8px; cursor:pointer;">
                        <input type="checkbox" name="is_trending" value="1" checked style="accent-color:var(--admin-primary);">
                        <span style="font-weight:600; color:var(--admin-text-main);">Mark as Trending Drop</span>
                    </label>
                </div>
            </div>

            <!-- Actions Bar -->
            <div style="display:flex; justify-content:space-between; align-items:center; padding:12px 0;">
                <a href="{{ route('admin.products.index') }}" class="btn btn-outline">
                    Cancel
                </a>
                <button type="submit" class="btn btn-primary" style="padding:13px 36px; font-size:15px; font-weight:700;">
                    <i data-lucide="check" style="width:18px;"></i> Save &amp; Publish Product
                </button>
            </div>

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

@push('scripts')
<script>
    // --- Profit Margin Calculations ---
    function updateMarginCalculations() {
        const cost = parseFloat(document.getElementById('costPriceInput').value) || 0;
        const price = parseFloat(document.getElementById('sellingPriceInput').value) || 0;

        const profitEl = document.getElementById('displayUnitProfit');
        const marginEl = document.getElementById('displayMarginPercent');
        const multiEl = document.getElementById('displayMultiplier');

        if (cost > 0 && price > 0) {
            const profit = price - cost;
            const margin = (profit / price) * 100;
            const mult = price / cost;

            profitEl.textContent = (profit >= 0 ? '+$' : '-$') + Math.abs(profit).toFixed(2);
            profitEl.style.color = profit >= 0 ? '#059669' : '#dc2626';

            marginEl.textContent = margin.toFixed(1) + '%';
            multiEl.textContent = mult.toFixed(2) + 'x';
        } else {
            profitEl.textContent = '+$0.00';
            profitEl.style.color = '#059669';
            marginEl.textContent = '0%';
            multiEl.textContent = '0.0x';
        }
    }

    function autoCalculatePrice() {
        const cost = parseFloat(document.getElementById('costPriceInput').value);
        if (!cost || cost <= 0) {
            alert('Please enter a Supplier Cost Price first.');
            return;
        }

        let rawPrice = cost * 2.5;
        let roundedPrice = Math.floor(rawPrice) + 0.99;
        if (roundedPrice < rawPrice) roundedPrice += 1;

        document.getElementById('sellingPriceInput').value = roundedPrice.toFixed(2);
        document.getElementById('comparePriceInput').value = (roundedPrice * 1.5).toFixed(2);

        updateMarginCalculations();
    }

    // --- Product Images Multi-Upload (Up to 5 Images: WEBP, JPEG, PNG) ---
    let selectedImages = [];
    const MAX_IMAGES = 5;
    const ALLOWED_EXTENSIONS = ['webp', 'jpeg', 'jpg', 'png'];
    const ALLOWED_MIME_TYPES = ['image/webp', 'image/jpeg', 'image/png'];

    function showError(message) {
        const errorEl = document.getElementById('imageUploadError');
        if (errorEl) {
            errorEl.innerHTML = message;
            errorEl.style.display = 'block';
        }
    }

    function clearError() {
        const errorEl = document.getElementById('imageUploadError');
        if (errorEl) {
            errorEl.innerHTML = '';
            errorEl.style.display = 'none';
        }
    }

    function isAllowedImageFile(file) {
        if (!file) return false;
        const name = file.name.toLowerCase();
        const ext = name.split('.').pop();
        const mime = file.type ? file.type.toLowerCase() : '';

        const extValid = ALLOWED_EXTENSIONS.includes(ext);
        const mimeValid = mime ? ALLOWED_MIME_TYPES.includes(mime) : extValid;

        return extValid && mimeValid;
    }

    function handleImageSelection(filesList) {
        clearError();
        if (!filesList || filesList.length === 0) return;

        let rejectedFiles = [];
        let newlyAdded = 0;

        for (let i = 0; i < filesList.length; i++) {
            const file = filesList[i];

            if (!isAllowedImageFile(file)) {
                rejectedFiles.push(file.name);
                continue;
            }

            if (selectedImages.length >= MAX_IMAGES) {
                showError(`Maximum limit of ${MAX_IMAGES} images reached. Extra images were ignored.`);
                break;
            }

            // Check if already in array
            const isDuplicate = selectedImages.some(existing => existing.name === file.name && existing.size === file.size);
            if (!isDuplicate) {
                selectedImages.push(file);
                newlyAdded++;
            }
        }

        if (rejectedFiles.length > 0) {
            showError(`<strong>Rejected ${rejectedFiles.length} file(s):</strong> (${rejectedFiles.join(', ')}). Only <strong>WEBP, JPEG, and PNG</strong> images are allowed.`);
        }

        syncDataTransfer();
        renderImageSlots();
    }

    function removeImage(index) {
        clearError();
        if (index >= 0 && index < selectedImages.length) {
            selectedImages.splice(index, 1);
            syncDataTransfer();
            renderImageSlots();
        }
    }

    function clearAllSelectedImages() {
        clearError();
        selectedImages = [];
        syncDataTransfer();
        renderImageSlots();
    }

    function syncDataTransfer() {
        try {
            const dt = new DataTransfer();
            selectedImages.forEach(file => dt.items.add(file));
            const input = document.getElementById('productImagesInput');
            if (input) {
                input.files = dt.files;
            }
        } catch (e) {
            console.error('DataTransfer sync error:', e);
        }
    }

    function formatFileSize(bytes) {
        if (bytes < 1024) return bytes + ' B';
        if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
        return (bytes / 1048576).toFixed(1) + ' MB';
    }

    function renderImageSlots() {
        const container = document.getElementById('imageSlotsContainer');
        const badge = document.getElementById('selectedCountBadge');
        const clearBtn = document.getElementById('clearAllImagesBtn');

        if (badge) {
            badge.textContent = `${selectedImages.length} / ${MAX_IMAGES} Images Selected`;
            if (selectedImages.length > 0) {
                badge.style.background = '#ecfdf5';
                badge.style.color = '#059669';
                badge.style.borderColor = '#a7f3d0';
            } else {
                badge.style.background = '#eff6ff';
                badge.style.color = 'var(--admin-primary)';
                badge.style.borderColor = '#bfdbfe';
            }
        }

        if (clearBtn) {
            clearBtn.style.display = selectedImages.length > 0 ? 'inline-block' : 'none';
        }

        if (!container) return;

        container.innerHTML = '';

        for (let i = 0; i < MAX_IMAGES; i++) {
            const slotNumber = i + 1;
            const file = selectedImages[i];

            const slotEl = document.createElement('div');
            slotEl.style.position = 'relative';
            slotEl.style.height = '160px';
            slotEl.style.borderRadius = '8px';
            slotEl.style.overflow = 'hidden';
            slotEl.style.display = 'flex';
            slotEl.style.flexDirection = 'column';
            slotEl.style.alignItems = 'center';
            slotEl.style.justifyContent = 'center';
            slotEl.style.transition = 'all 0.2s ease';

            if (file) {
                const objectUrl = URL.createObjectURL(file);

                slotEl.style.border = (i === 0) ? '2px solid var(--admin-primary)' : '1px solid var(--admin-border)';
                slotEl.style.background = '#ffffff';

                slotEl.innerHTML = `
                    <img src="${objectUrl}" alt="Slot ${slotNumber}" style="width:100%; height:100%; object-fit:cover; display:block;">
                    
                    <!-- Remove Button -->
                    <button type="button" onclick="removeImage(${i}); event.stopPropagation();" title="Remove image" style="position:absolute; top:6px; right:6px; width:24px; height:24px; border-radius:50%; background:rgba(15,23,42,0.75); color:#ffffff; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:14px; font-weight:700; line-height:1; backdrop-filter:blur(2px);">
                        &times;
                    </button>

                    <!-- Slot Badge -->
                    <div style="position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top, rgba(15,23,42,0.85), rgba(15,23,42,0.3) 70%, transparent); padding:16px 6px 6px; text-align:center;">
                        <span style="display:inline-block; font-size:10px; font-weight:700; color:#ffffff; letter-spacing:0.02em; text-transform:uppercase;">
                            ${i === 0 ? '&#9733; Main Cover' : 'Angle ' + slotNumber}
                        </span>
                        <div style="font-size:9.5px; color:#cbd5e1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;">
                            ${formatFileSize(file.size)}
                        </div>
                    </div>
                `;
            } else {
                slotEl.style.border = '1.5px dashed var(--admin-border)';
                slotEl.style.background = '#fcfdff';
                slotEl.style.cursor = 'pointer';
                slotEl.style.padding = '12px 8px';
                slotEl.onclick = () => document.getElementById('productImagesInput').click();

                slotEl.innerHTML = `
                    <div style="width:32px; height:32px; border-radius:50%; background:#f1f5f9; display:flex; align-items:center; justify-content:center; color:var(--admin-text-muted); margin-bottom:6px;">
                        <i data-lucide="${i === 0 ? 'star' : 'image'}" style="width:16px; height:16px;"></i>
                    </div>
                    <span style="font-size:12px; font-weight:700; color:var(--admin-text-main); display:block; margin-bottom:2px;">
                        Slot ${slotNumber}
                    </span>
                    <span style="font-size:10.5px; color:var(--admin-text-muted); display:block;">
                        ${i === 0 ? 'Primary Cover' : 'Gallery Angle'}
                    </span>
                    <span style="font-size:10px; color:var(--admin-primary); font-weight:600; margin-top:4px;">
                        + Add Image
                    </span>
                `;
            }

            container.appendChild(slotEl);
        }

        if (window.lucide) {
            window.lucide.createIcons();
        }
    }

    // Drag and Drop Listeners for Drop Zone
    document.addEventListener('DOMContentLoaded', function() {
        updateMarginCalculations();
        renderImageSlots();

        const dropZone = document.getElementById('dropZoneArea');
        if (dropZone) {
            ['dragenter', 'dragover'].forEach(eventName => {
                dropZone.addEventListener(eventName, (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    dropZone.style.borderColor = 'var(--admin-primary)';
                    dropZone.style.background = '#f4f7ff';
                }, false);
            });

            ['dragleave', 'drop'].forEach(eventName => {
                dropZone.addEventListener(eventName, (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    dropZone.style.borderColor = 'var(--admin-border)';
                    dropZone.style.background = '#fcfdff';
                }, false);
            });

            dropZone.addEventListener('drop', (e) => {
                const dt = e.dataTransfer;
                if (dt && dt.files && dt.files.length > 0) {
                    handleImageSelection(dt.files);
                }
            }, false);
        }
    });
</script>
@endpush
@endsection