@extends('layouts.app')

@section('title', __('dashboard.Edit Product'))
@section('page_heading', __('dashboard.Edit Product'))


@section('content')
<div style="display:flex;align-items:center;justify-content:flex-end;gap:.5rem;margin-bottom:1.25rem">
    <a href="{{ route('dashboard.products.show', $product->id) }}" class="app-btn app-btn--secondary app-btn--sm">
        <i class="fa-solid fa-eye"></i> {{ __('dashboard.Show') }}
    </a>
    <a href="{{ route('dashboard.products.index') }}" class="app-btn app-btn--secondary app-btn--sm">
        <i class="fa-solid fa-arrow-right"></i> {{ __('dashboard.Products') }}
    </a>
</div>

@include('layouts.partials.workspace-page-styles')
<style>
.product-status-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .28rem .65rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
}
.product-status-pill--success { background: #f0fdf4; color: #15803d; }
.dark .product-status-pill--success { background: rgba(21,128,61,.15); color: #86efac; }
.product-choice {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .4rem;
}
.product-choice__input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--c-primary);
    cursor: pointer;
}
.product-choice__label {
    color: var(--surface-700);
    cursor: pointer;
    font-size: .875rem;
    font-weight: 600;
}
.dark .product-choice__label { color: var(--surface-600); }
</style>

<div class="workspace-shell">
    <div class="workspace-body">
        <div class="collection-card__header">
            <div class="collection-card__intro">
                <span class="collection-card__icon"><i class="fa-solid fa-bag-shopping"></i></span>
                <div class="collection-card__title">
                    <h2>{{ __('dashboard.Edit Product') }}: {{ $product->name }}</h2>
                    <p>SKU: {{ $product->sku }}</p>
                </div>
            </div>
        </div>

        <form action="{{ route('dashboard.products.update', $product->id) }}" method="POST" enctype="multipart/form-data" class="mt-4">
            @csrf @method('PATCH')
            <input type="hidden" name="main_image" id="main_image_input" value="{{ $product->main_image }}">

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="app-label required">{{ __('dashboard.Type') }}</label>
                    <select name="type" id="product_type" class="app-input @error('type') app-input--invalid @enderror" required>
                        <option value="sale" @selected(old('type', $product->type) === 'sale')>{{ __('dashboard.Sale') }}</option>
                        <option value="rent" @selected(old('type', $product->type) === 'rent')>{{ __('dashboard.Rent') }}</option>
                    </select>
                    @error('type')<div class="app-field-error">{{ $message }}</div>@enderror
                </div>

                <div>
                    <label class="app-label required">{{ __('dashboard.Category') }}</label>
                    <select name="product_category_id" id="product_category" class="app-input @error('product_category_id') app-input--invalid @enderror" required>
                        <option value="" disabled selected>-- {{ __('dashboard.Select Category') }} --</option>
                    </select>
                    @error('product_category_id')<div class="app-field-error">{{ $message }}</div>@enderror
                </div>

                <div>
                    <label class="app-label required">{{ __('dashboard.SKU') }}</label>
                    <input type="text" name="sku" class="app-input @error('sku') app-input--invalid @enderror" value="{{ old('sku', $product->sku) }}" required>
                    @error('sku')<div class="app-field-error">{{ $message }}</div>@enderror
                </div>

                <div>
                    <label class="app-label required">{{ __('dashboard.Name') }}</label>
                    <input type="text" name="name" class="app-input @error('name') app-input--invalid @enderror" value="{{ old('name', $product->name) }}" required>
                    @error('name')<div class="app-field-error">{{ $message }}</div>@enderror
                </div>

                <div>
                    <label class="app-label required">{{ __('dashboard.Price') }}</label>
                    <input type="number" step="0.01" name="price" class="app-input @error('price') app-input--invalid @enderror" value="{{ old('price', $product->price) }}" required>
                    @error('price')<div class="app-field-error">{{ $message }}</div>@enderror
                </div>

                <div>
                    <label class="app-label required">{{ __('dashboard.Stock') }}</label>
                    <input type="number" name="stock" class="app-input @error('stock') app-input--invalid @enderror" value="{{ old('stock', $product->stock) }}" required>
                    @error('stock')<div class="app-field-error">{{ $message }}</div>@enderror
                </div>

                {{-- Existing Images --}}
                @if(is_array($product->images) && count($product->images) > 0)
                <div class="md:col-span-2">
                    <label class="app-label">{{ __('dashboard.Existing Images') }}</label>
                    <div class="flex flex-wrap gap-3" id="existing-images-container">
                        @foreach($product->images as $index => $img)
                        <div class="flex flex-col items-center rounded-xl border border-slate-200 bg-slate-50 p-2" id="image-container-{{ $index }}">
                            <a href="#" data-modal-open="productImageModal"
                               data-image-url="{{ asset('storage/'.$img) }}" data-product-name="{{ $product->name }}">
                                <img src="{{ asset('storage/'.$img) }}" width="100" height="100" style="object-fit:cover;border-radius:8px" alt="">
                            </a>
                            <div class="main-image-indicator my-1" style="min-height:22px">
                                @if($product->main_image == $img)
                                    <span class="product-status-pill product-status-pill--success">{{ __('dashboard.Main') }}</span>
                                @endif
                            </div>
                            <div class="flex gap-1">
                                <button type="button" class="app-btn app-btn--sm app-btn--secondary set-main-image-btn" title="{{ __('dashboard.Set as main') }}" data-image-path="{{ $img }}" data-product-id="{{ $product->id }}">
                                    <i class="fa-solid fa-check2"></i>
                                </button>
                                <button type="button" class="app-btn app-btn--sm app-btn--danger delete-image-btn" title="{{ __('dashboard.Delete') }}" data-image-path="{{ $img }}" data-product-id="{{ $product->id }}" data-index="{{ $index }}">
                                    <i class="fa-solid fa-xmark"></i>
                                </button>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif

                <div class="md:col-span-2">
                    <label class="app-label">{{ __('dashboard.New Images') }}</label>
                    <input type="file" name="images[]" id="new_images_input" class="app-input" multiple>
                    @error('images.*')<div class="text-red-600 dark:text-red-400">{{ $message }}</div>@enderror
                </div>

                <div id="new_images_preview_section" class="md:col-span-2" style="display:none">
                    <div id="preview_new_container" class="flex flex-wrap gap-3"></div>
                </div>

                <div class="md:col-span-2">
                    <label class="app-label">{{ __('dashboard.Product Options') }}</label>
                    <div id="product_options_container" class="grid grid-cols-1 md:grid-cols-2 gap-3"></div>
                    @error('options')<div class="text-red-600 dark:text-red-400">{{ $message }}</div>@enderror
                </div>
            </div>

            <div class="flex justify-end gap-2 mt-5">
                <a href="{{ route('dashboard.products.index') }}" class="app-btn app-btn--secondary">{{ __('dashboard.Cancel') }}</a>
                <button type="submit" class="app-btn app-btn--primary">{{ __('dashboard.Save Changes') }}</button>
            </div>
        </form>
    </div>
</div>

{{-- Image preview modal --}}
<div class="custom-modal" id="productImageModal" style="display:none;position:fixed;inset:0;z-index:1050;align-items:center;justify-content:center;background:rgba(15,23,42,.7);backdrop-filter:blur(4px)">
    <div style="width:min(900px,92vw);max-height:90vh;overflow:auto;background:var(--bg-card);border-radius:1rem;box-shadow:0 24px 80px rgba(15,23,42,.35)">
        <div class="flex items-center justify-between gap-4 p-5 border-b border-slate-200">
            <h5 class="mb-0" id="productImageModalTitle"></h5>
            <button type="button" class="app-btn app-btn--sm app-btn--secondary" data-modal-close aria-label="{{ __('dashboard.Close') }}">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>
        <div class="text-center p-5">
            <img src="" id="modalMainImage" class="max-w-full h-auto mx-auto" style="max-height:80vh">
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
var previouslySelectedOptions = @json($product->selectedOptions->pluck('value', 'product_option_id') ?? []);
let newImagesDataTransfer = new DataTransfer();
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const productTypeSelect = document.getElementById('product_type');
    const productCategorySelect = document.getElementById('product_category');
    const productOptionsContainer = document.getElementById('product_options_container');
    const mainImageInput = document.getElementById('main_image_input');
    const newImagesInput = document.getElementById('new_images_input');
    const previewContainer = document.getElementById('preview_new_container');
    const newImagesSection = document.getElementById('new_images_preview_section');

    function fetchCategories(type) {
        if (!type) { productCategorySelect.innerHTML = '<option value="" disabled selected>-- {{ __("dashboard.Select Category") }} --</option>'; productOptionsContainer.innerHTML = ''; return; }
        fetch(`/dashboard/products-get-categories-by-type/${type}`)
            .then(r => r.json())
            .then(categories => {
                let opts = '<option value="" disabled selected>-- {{ __("dashboard.Select Category") }} --</option>';
                categories.forEach(c => { opts += `<option value="${c.id}" ${'{{ old("product_category_id", $product->product_category_id) }}' == c.id ? 'selected' : ''}>${c.name}</option>`; });
                productCategorySelect.innerHTML = opts;
                if (productCategorySelect.value) fetchProductOptions(productCategorySelect.value);
            });
    }

    function fetchProductOptions(categoryId) {
        if (!categoryId) { productOptionsContainer.innerHTML = ''; return; }
        fetch(`/dashboard/products-get-options-by-category/${categoryId}`)
            .then(r => r.json())
            .then(options => {
                productOptionsContainer.innerHTML = options.map(o => {
                    let sel = previouslySelectedOptions[o.id] || '';
                    return `<div><label class="app-label">${o.name}</label>${getOptionInput(o, sel)}</div>`;
                }).join('');
            });
    }

    function getOptionInput(option, selectedValue = '') {
        let input = `<input type="hidden" name="options[${option.id}][id]" value="${option.id}">`;
        if (option.type === 'text') return input + `<input type="text" name="options[${option.id}][value]" class="app-input" value="${selectedValue}">`;
        if (option.type === 'multiple') {
            let sel = selectedValue ? selectedValue.split(',') : [];
            return input + option.values.map(v => `<div class="product-choice"><input class="product-choice__input" type="checkbox" name="options[${option.id}][value][]" value="${v.value_name}" id="opt_${option.id}_${v.id}" ${sel.includes(v.value_name)?'checked':''}><label class="product-choice__label" for="opt_${option.id}_${v.id}">${v.value_name}</label></div>`).join('');
        }
        if (option.type === 'color') return input + option.values.map(v => `<div class="product-choice"><input class="product-choice__input" type="radio" name="options[${option.id}][value]" value="${v.value_name}" id="opt_${option.id}_${v.id}" ${v.value_name===selectedValue?'checked':''}><label class="product-choice__label" for="opt_${option.id}_${v.id}">${v.value_name}</label></div>`).join('');
        return input + `<input type="text" name="options[${option.id}][value]" class="app-input" value="${selectedValue}">`;
    }

    productTypeSelect.addEventListener('change', function () { fetchCategories(this.value); productOptionsContainer.innerHTML = ''; });
    productCategorySelect.addEventListener('change', function () { fetchProductOptions(this.value); });
    fetchCategories(productTypeSelect.value);

    // Existing images
    document.getElementById('existing-images-container')?.addEventListener('click', function(e) {
        let button = e.target.closest('button');
        if (!button) return;
        e.preventDefault();
        if (button.classList.contains('set-main-image-btn')) {
            mainImageInput.value = button.dataset.imagePath;
            document.querySelectorAll('input[name="new_main_image_index"]').forEach(r => r.checked = false);
            updateNewImagePreviewStyles();
            fetch('{{ route("dashboard.products.updateMainImage") }}', {
                method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                body: JSON.stringify({ product_id: button.dataset.productId, image_path: button.dataset.imagePath })
            }).then(r => r.json()).then(data => {
                if (data.success) {
                    document.querySelectorAll('.main-image-indicator').forEach(el => el.innerHTML = '');
                    button.closest('[id^="image-container"]').querySelector('.main-image-indicator').innerHTML = '<span class="product-status-pill product-status-pill--success">{{ __("dashboard.Main") }}</span>';
                    Swal.fire({ icon: 'success', title: '{{ __("dashboard.Success") }}', text: data.message, timer: 1500, showConfirmButton: false });
                }
            });
        }
        if (button.classList.contains('delete-image-btn')) {
            Swal.fire({ text: "{{ __('dashboard.Are you sure you want to delete this Item?') }}", icon: 'warning', showCancelButton: true, confirmButtonText: "{{ __('dashboard.Yes') }}", cancelButtonText: "{{ __('dashboard.No') }}", buttonsStyling: false, customClass: { confirmButton: 'app-btn app-btn--primary', cancelButton: 'app-btn app-btn--danger' } })
            .then(result => {
                if (!result.isConfirmed) return;
                fetch('{{ route("dashboard.products.deleteImage") }}', {
                    method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    body: JSON.stringify({ product_id: button.dataset.productId, image_path: button.dataset.imagePath })
                }).then(r => r.json()).then(data => {
                    if (data.success) {
                        Swal.fire('Deleted!', data.message, 'success');
                        document.getElementById(`image-container-${button.dataset.index}`)?.remove();
                        mainImageInput.value = data.new_main_image;
                        document.querySelectorAll('.main-image-indicator').forEach(el => el.innerHTML = '');
                        document.querySelectorAll('.set-main-image-btn').forEach(btn => {
                            if (btn.dataset.imagePath === data.new_main_image) btn.closest('[id^="image-container"]').querySelector('.main-image-indicator').innerHTML = '<span class="product-status-pill product-status-pill--success">{{ __("dashboard.Main") }}</span>';
                        });
                    }
                });
            });
        }
    });

    // Modal
    document.querySelectorAll('[data-modal-open="productImageModal"]').forEach(trigger => {
        trigger.addEventListener('click', function(e) {
            e.preventDefault();
            document.getElementById('productImageModalTitle').textContent = this.dataset.productName || '';
            document.getElementById('modalMainImage').src = this.dataset.imageUrl || '';
        });
    });

    // New images
    newImagesInput.addEventListener('change', function(e) {
        for (let i = 0; i < e.target.files.length; i++) newImagesDataTransfer.items.add(e.target.files[i]);
        newImagesInput.files = newImagesDataTransfer.files;
        renderNewImagePreviews();
    });

    function renderNewImagePreviews() {
        previewContainer.innerHTML = '';
        newImagesSection.style.display = newImagesDataTransfer.files.length ? '' : 'none';
        Array.from(newImagesDataTransfer.files).forEach((file, i) => {
            const reader = new FileReader();
            reader.onload = e => {
                const div = document.createElement('div');
                div.className = 'flex flex-col items-center rounded-xl border border-slate-200 bg-slate-50 p-2';
                div.innerHTML = `<img src="${e.target.result}" width="100" height="100" style="object-fit:cover;border-radius:8px" class="mb-2">
                    <div class="flex gap-1">
                        <button type="button" class="app-btn app-btn--sm app-btn--secondary new-main-image-btn" data-index="${i}">
                            <input type="radio" class="hidden" name="new_main_image_index" value="${i}">
                            <span class="button-text">{{ __('dashboard.Set as main') }}</span>
                        </button>
                        <button type="button" class="app-btn app-btn--sm app-btn--danger new-delete-image-btn" data-index="${i}"><i class="fa-solid fa-xmark"></i></button>
                    </div>`;
                previewContainer.appendChild(div);
            };
            reader.readAsDataURL(file);
        });
        updateNewImagePreviewStyles();
    }

    function updateNewImagePreviewStyles() {
        document.querySelectorAll('#preview_new_container .new-main-image-btn').forEach(btn => {
            const radio = btn.querySelector('input[type="radio"]');
            const text = btn.querySelector('.button-text');
            if (radio.checked) { btn.classList.replace('app-btn--secondary','app-btn--primary'); text.innerHTML = '<i class="fa-solid fa-check2"></i> {{ __("dashboard.Main") }}'; }
            else { btn.classList.replace('app-btn--primary','app-btn--secondary'); text.textContent = '{{ __("dashboard.Set as main") }}'; }
        });
    }

    previewContainer?.addEventListener('click', function(e) {
        const button = e.target.closest('button');
        if (!button) return;
        const index = parseInt(button.dataset.index);
        if (button.classList.contains('new-delete-image-btn')) {
            const dt = new DataTransfer();
            const checkedVal = document.querySelector('input[name="new_main_image_index"]:checked')?.value;
            for (let i = 0; i < newImagesDataTransfer.files.length; i++) { if (i !== index) dt.items.add(newImagesDataTransfer.files[i]); }
            newImagesDataTransfer = dt;
            newImagesInput.files = newImagesDataTransfer.files;
            if (checkedVal == index && newImagesDataTransfer.files.length > 0) setTimeout(() => { document.querySelector('input[name="new_main_image_index"][value="0"]').checked = true; updateNewImagePreviewStyles(); }, 10);
            renderNewImagePreviews();
        }
        if (button.classList.contains('new-main-image-btn')) {
            const radio = button.querySelector('input[type="radio"]');
            if (radio.checked) { radio.checked = false; } else { document.querySelectorAll('input[name="new_main_image_index"]').forEach(r => r.checked = false); radio.checked = true; mainImageInput.value = ''; document.querySelectorAll('#existing-images-container .main-image-indicator').forEach(el => el.innerHTML = ''); }
            updateNewImagePreviewStyles();
        }
    });
});
</script>
@endsection