@extends('backend.layout')

@push('backend_css')
    <style>
        .attribute-input-group {
            display: flex;
            gap: 0.5rem;
            align-items: flex-end;
            margin-bottom: 0.5rem;
        }

        .preview-image {
            max-width: 56px;
            max-height: 56px;
            margin-top: 0.5rem;
            border-radius: 0.25rem;
        }

        .gallery-preview {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
            gap: 0.75rem;
            margin-top: 1rem;
        }

        .gallery-preview-item {
            position: relative;
            max-width: 72px;
        }

        .gallery-preview-item img {
            max-width: 100%;
            height: auto;
            border-radius: 0.25rem;
        }

        .gallery-preview-item .btn-remove {
            position: absolute;
            top: 2px;
            right: 2px;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .gallery-preview-item:hover .btn-remove {
            opacity: 1;
        }

        .attribute-section {
            background: #f8f9fa;
            padding: 1rem;
            border-radius: 0.25rem;
            margin: 1rem 0;
        }

        .attribute-section h6 {
            margin-bottom: 1rem;
            color: #495057;
        }

        .existing-gallery-item {
            position: relative;
        }

        .existing-gallery-item .btn-remove {
            position: absolute;
            top: 2px;
            right: 2px;
            opacity: 0;
        }

        .existing-gallery-item:hover .btn-remove {
            opacity: 1;
        }

        .attribute-input-group .attr-name {
            max-width: 220px;
        }

        .attribute-input-group .attr-values {
            flex: 1;
        }

        .variant-stock-group {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 140px auto;
            gap: 0.5rem;
            align-items: end;
            margin-bottom: 0.5rem;
        }
    </style>
@endpush

@section('backend_content')
    <div class="container-fluid">
        {{-- ══ Header ══ --}}
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h4 class="fw-bold mb-1">Edit Product</h4>
                <small class="text-muted">{{ $product->product_title }} ({{ $shop->name }})</small>
            </div>
            <a href="{{ route('admin.shops.products.index', $shop) }}" class="btn btn-light">
                <i class="bx bx-arrow-back"></i> Back
            </a>
        </div>

        {{-- ══ Edit Form ══ --}}
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <form action="{{ route('admin.shops.products.update', [$shop, $product]) }}" method="POST"
                    enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    {{-- ══ Basic Information ══ --}}
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label class="form-label fw-semibold">Product Title <span class="text-danger">*</span></label>
                            <input type="text" name="product_title"
                                class="form-control @error('product_title') is-invalid @enderror"
                                value="{{ old('product_title', $product->product_title) }}"
                                placeholder="Enter product title" required>
                            @error('product_title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    {{-- ══ Pricing ══ --}}
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <label class="form-label fw-semibold">Price <span class="text-danger">*</span></label>
                            <input type="number" name="price" class="form-control @error('price') is-invalid @enderror"
                                value="{{ old('price', $product->price) }}" placeholder="0.00" step="0.01" required>
                            @error('price')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-3 mb-3">
                            <label class="form-label fw-semibold">Offer Price</label>
                            <input type="number" name="offer_price"
                                class="form-control @error('offer_price') is-invalid @enderror"
                                value="{{ old('offer_price', $product->offer_price) }}" placeholder="0.00" step="0.01">
                            @error('offer_price')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-3 mb-3">
                            <label class="form-label fw-semibold">Offer Expiry Date</label>
                            <input type="datetime-local" name="offer_expiry_date"
                                class="form-control @error('offer_expiry_date') is-invalid @enderror"
                                value="{{ old('offer_expiry_date', $product->offer_expiry_date ? $product->offer_expiry_date->format('Y-m-d\TH:i') : '') }}">
                            <small class="text-muted">Leave empty for always-on offer price.</small>
                            @error('offer_expiry_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-3 mb-3">
                            <label class="form-label fw-semibold">Stock <span class="text-danger">*</span></label>
                            <input type="number" name="stock" class="form-control @error('stock') is-invalid @enderror"
                                value="{{ old('stock', $product->stock) }}" placeholder="0" required>
                            @error('stock')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    {{-- ══ Feature Image ══ --}}
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Feature Image</label>
                        <div class="mb-2">
                            @if ($product->feature_image)
                                <img src="{{ asset('storage/' . $product->feature_image) }}"
                                    alt="{{ $product->product_title }}" class="preview-image">
                            @endif
                        </div>
                        <input type="file" name="feature_image"
                            class="form-control @error('feature_image') is-invalid @enderror"
                            accept="image/jpeg,image/png,image/jpg,image/gif,image/webp" id="featureImageInput">
                        @error('feature_image')
                            <div class="invalid-feedback" style="display: block;">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">Max size: 2MB. Formats: JPEG, PNG, JPG, GIF, WebP (Leave empty to keep
                            current)</small>
                        <div id="featureImagePreview" class="mt-2"></div>
                    </div>

                    {{-- ══ Gallery Images ══ --}}
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Gallery Images</label>

                        @if ($product->images->count() > 0)
                            <div class="mb-3">
                                <small class="text-muted d-block mb-2">Current Gallery Images:</small>
                                <div class="gallery-preview">
                                    @foreach ($product->images as $image)
                                        <div class="gallery-preview-item existing-gallery-item"
                                            data-image-id="{{ $image->id }}">
                                            <img src="{{ asset('storage/' . $image->image_path) }}" alt="Gallery image">
                                            <button type="button" class="btn btn-sm btn-danger btn-remove"
                                                onclick="confirmRemoveImage({{ $image->id }})">
                                                <i class="bx bx-trash"></i>
                                            </button>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        <input type="file" name="gallery_images[]"
                            class="form-control @error('gallery_images') is-invalid @enderror"
                            accept="image/jpeg,image/png,image/jpg,image/gif,image/webp" id="galleryImagesInput" multiple>
                        @error('gallery_images')
                            <div class="invalid-feedback" style="display: block;">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">Add more images. Max size per image: 2MB. Formats: JPEG, PNG, JPG,
                            GIF</small>
                        <div id="galleryPreview" class="gallery-preview mt-2"></div>
                    </div>

                    {{-- ══ Dynamic Product Attributes ══ --}}
                    <div class="attribute-section">
                        <h6 class="fw-semibold">Product Variations / Attributes</h6>
                        <small class="text-muted d-block mb-2">
                            Add dynamic attributes based on product type. Example: RAM = 4GB,8GB · Type = Inverter,Non
                            Inverter
                        </small>

                        <div id="attributesContainer"></div>

                        <button type="button" class="btn btn-sm btn-outline-secondary" id="addAttributeBtn">
                            <i class="bx bx-plus"></i> Add Attribute
                        </button>

                        <input type="hidden" name="attributes" id="attributesInput">
                    </div>

                    <div class="attribute-section">
                        <h6 class="fw-semibold">Variant Availability</h6>
                        <small class="text-muted d-block mb-2">
                            Track stock for sellable variants like Black, White, 64GB, or XL. When variants are added,
                            product stock is calculated automatically from these rows.
                        </small>

                        <div id="variantInventoryContainer"></div>

                        <button type="button" class="btn btn-sm btn-outline-secondary" id="addVariantInventoryBtn">
                            <i class="bx bx-plus"></i> Add Variant Stock
                        </button>

                        <input type="hidden" name="variant_inventory" id="variantInventoryInput"
                            value="{{ old('variant_inventory') }}">
                    </div>

                    <div class="d-flex gap-2 mt-4">
                        <button type="submit" class="btn btn-primary">
                            <i class="bx bx-save"></i> Update Product
                        </button>
                        <a href="{{ route('admin.shops.products.index', $shop) }}" class="btn btn-light">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @php
        $deleteImageUrlTemplate = route('admin.shops.products.images.destroy', [
            'shop' => $shop,
            'product' => $product,
            'image' => '__IMAGE__',
        ]);
    @endphp

    <script>
        const existingProduct = {!! json_encode($product) !!};
        const oldAttributesRaw = @json(old('attributes'));
        const oldVariantInventoryRaw = @json(old('variant_inventory'));

        // Feature Image Preview
        document.getElementById('featureImageInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            const preview = document.getElementById('featureImagePreview');

            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    preview.innerHTML = `<img src="${e.target.result}" class="preview-image" alt="Preview">`;
                };
                reader.readAsDataURL(file);
            } else {
                preview.innerHTML = '';
            }
        });

        // Gallery Images Preview
        document.getElementById('galleryImagesInput').addEventListener('change', function(e) {
            const files = e.target.files;
            const preview = document.getElementById('galleryPreview');
            preview.innerHTML = '';

            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                const reader = new FileReader();

                reader.onload = function(e) {
                    const item = document.createElement('div');
                    item.className = 'gallery-preview-item';
                    item.innerHTML = `<img src="${e.target.result}" alt="Gallery preview">`;
                    preview.appendChild(item);
                };

                reader.readAsDataURL(file);
            }
        });

        const deleteImageUrlTemplate = @json($deleteImageUrlTemplate);
        const csrfToken = @json(csrf_token());
        let pendingDeleteImageId = null;

        function confirmRemoveImage(imageId) {
            pendingDeleteImageId = imageId;
            const modal = new bootstrap.Modal(document.getElementById('deleteImageModal'));
            modal.show();
        }

        async function removeExistingImage() {
            if (!pendingDeleteImageId) {
                return;
            }
            const modal = bootstrap.Modal.getInstance(document.getElementById('deleteImageModal'));

            try {
                const response = await fetch(deleteImageUrlTemplate.replace('__IMAGE__', pendingDeleteImageId), {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken,
                        'Accept': 'application/json',
                    },
                });

                const payload = await response.json().catch(() => ({}));
                if (!response.ok) {
                    throw new Error(payload.message || 'Failed to delete gallery image.');
                }

                const imageElement = document.querySelector(`[data-image-id="${pendingDeleteImageId}"]`);
                if (imageElement) {
                    imageElement.remove();
                }

                if (modal) {
                    modal.hide();
                }
            } catch (error) {
                alert(error.message || 'Could not delete image. Please try again.');
            } finally {
                pendingDeleteImageId = null;
            }
        }

        function parseAttributes(rawValue) {
            if (!rawValue) {
                return existingProduct.attributes || {};
            }

            if (typeof rawValue === 'object') {
                return rawValue;
            }

            try {
                return JSON.parse(rawValue);
            } catch (error) {
                return existingProduct.attributes || {};
            }
        }

        function parseVariantInventory(rawValue) {
            if (!rawValue) {
                return existingProduct.attributes?._variant_inventory || [];
            }

            if (Array.isArray(rawValue)) {
                return rawValue;
            }

            try {
                const parsed = JSON.parse(rawValue);
                return Array.isArray(parsed) ? parsed : (existingProduct.attributes?._variant_inventory || []);
            } catch (error) {
                return existingProduct.attributes?._variant_inventory || [];
            }
        }

        function normalizeAttributesForRows(attributes) {
            const rows = [];

            if (!attributes || typeof attributes !== 'object') {
                return rows;
            }

            Object.entries(attributes).forEach(([key, rawValues]) => {
                const label = String(key).trim();
                if (!label) {
                    return;
                }

                if (label === '_variant_inventory') {
                    return;
                }

                if (label.toLowerCase() === 'colors' && Array.isArray(rawValues)) {
                    const values = rawValues
                        .map(item => (typeof item === 'object' && item !== null) ? (item.name || item.code || '') :
                            item)
                        .map(item => String(item).trim())
                        .filter(Boolean);

                    if (values.length > 0) {
                        rows.push({
                            name: 'Color',
                            values: values
                        });
                    }

                    return;
                }

                if (label.toLowerCase() === 'sizes' && Array.isArray(rawValues)) {
                    const values = rawValues
                        .map(item => (typeof item === 'object' && item !== null) ? (item.name || item.value || '') :
                            item)
                        .map(item => String(item).trim())
                        .filter(Boolean);

                    if (values.length > 0) {
                        rows.push({
                            name: 'Size',
                            values: values
                        });
                    }

                    return;
                }

                const values = Array.isArray(rawValues) ? rawValues : [rawValues];
                const normalized = values
                    .map(item => {
                        if (typeof item === 'object' && item !== null) {
                            return item.name || item.value || item.code || '';
                        }
                        return item;
                    })
                    .map(item => String(item).trim())
                    .filter(Boolean);

                if (normalized.length > 0) {
                    rows.push({
                        name: label,
                        values: normalized
                    });
                }
            });

            return rows;
        }

        function createAttributeRow(name = '', values = '') {
            const group = document.createElement('div');
            group.className = 'attribute-input-group';
            group.innerHTML = `
                <input type="text" class="form-control attr-name" placeholder="Attribute (e.g., RAM, Type)" value="${name}">
                <input type="text" class="form-control attr-values" placeholder="Values separated by comma (e.g., 4GB, 8GB)" value="${values}">
                <button type="button" class="btn btn-sm btn-danger" onclick="this.parentElement.remove(); updateAttributes();">
                    <i class="bx bx-trash"></i>
                </button>
            `;

            return group;
        }

        function createVariantRow(label = '', stock = '') {
            const group = document.createElement('div');
            group.className = 'variant-stock-group';
            group.innerHTML = `
                <input type="text" class="form-control variant-label" placeholder="Variant label (e.g., Black, 64GB)" value="${label}">
                <input type="number" class="form-control variant-stock" placeholder="Stock" min="0" value="${stock}">
                <button type="button" class="btn btn-sm btn-danger" onclick="this.parentElement.remove(); updateVariantInventory();">
                    <i class="bx bx-trash"></i>
                </button>
            `;

            return group;
        }

        document.getElementById('addAttributeBtn').addEventListener('click', function() {
            document.getElementById('attributesContainer').appendChild(createAttributeRow());
        });

        document.getElementById('addVariantInventoryBtn').addEventListener('click', function() {
            document.getElementById('variantInventoryContainer').appendChild(createVariantRow());
        });

        function updateAttributes() {
            const attributes = {};
            const groups = document.querySelectorAll('#attributesContainer .attribute-input-group');

            groups.forEach(group => {
                const name = group.querySelector('.attr-name').value.trim();
                const valuesRaw = group.querySelector('.attr-values').value;

                if (!name) {
                    return;
                }

                const values = valuesRaw
                    .split(',')
                    .map(value => value.trim())
                    .filter(value => value.length > 0);

                if (values.length > 0) {
                    attributes[name] = [...new Set(values)];
                }
            });

            document.getElementById('attributesInput').value = JSON.stringify(attributes);
        }

        function updateVariantInventory() {
            const rows = [];
            const groups = document.querySelectorAll('#variantInventoryContainer .variant-stock-group');

            groups.forEach(group => {
                const label = group.querySelector('.variant-label').value.trim();
                const stockValue = group.querySelector('.variant-stock').value;

                if (!label) {
                    return;
                }

                rows.push({
                    label,
                    stock: Math.max(0, parseInt(stockValue || '0', 10) || 0),
                });
            });

            document.getElementById('variantInventoryInput').value = JSON.stringify(rows);
        }

        // Update attributes when dynamic inputs change.
        document.addEventListener('input', function(e) {
            if (e.target.classList.contains('attr-name') || e.target.classList.contains('attr-values')) {
                updateAttributes();
            }

            if (e.target.classList.contains('variant-label') || e.target.classList.contains('variant-stock')) {
                updateVariantInventory();
            }
        });

        const parsedAttributes = parseAttributes(oldAttributesRaw);
        const normalizedRows = normalizeAttributesForRows(parsedAttributes);
        const parsedVariantInventory = parseVariantInventory(oldVariantInventoryRaw);

        if (normalizedRows.length > 0) {
            normalizedRows.forEach(row => {
                document.getElementById('attributesContainer').appendChild(createAttributeRow(row.name, row.values
                    .join(', ')));
            });
        } else {
            document.getElementById('attributesContainer').appendChild(createAttributeRow());
        }

        if (parsedVariantInventory.length > 0) {
            parsedVariantInventory.forEach(variant => {
                document.getElementById('variantInventoryContainer').appendChild(createVariantRow(
                    variant.label || variant.name || variant.value || '',
                    variant.stock ?? 0,
                ));
            });
        }

        updateAttributes();
        updateVariantInventory();

        // Keep attributes JSON synchronized on submit.
        document.querySelector('form').addEventListener('submit', function() {
            updateAttributes();
            updateVariantInventory();
        });
    </script>

    <div class="modal fade" id="deleteImageModal" tabindex="-1" aria-labelledby="deleteImageModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteImageModalLabel">Remove Gallery Image</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Are you sure you want to remove this gallery image? This change will be applied when you save the
                    product.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" onclick="removeExistingImage()">Remove Image</button>
                </div>
            </div>
        </div>
    </div>
@endsection