@extends('layouts.admin')

@section('title', 'Edit SKU · Aromaniacs ERP')
@section('overline', 'Catalog')
@section('heading', 'Edit SKU')

@section('content')
    <section class="card">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
            <div>
                <p class="label mb-1" style="color: var(--color-ink-70);">SKU Code</p>
                <p class="font-semibold">{{ $sku->code }}</p>
            </div>
            <div>
                <p class="label mb-1" style="color: var(--color-ink-70);">Fragrance</p>
                <p>{{ $sku->fragrance->name }} · {{ $sku->decantSize->label }}</p>
            </div>
            <div>
                <p class="label mb-1" style="color: var(--color-ink-70);">Brand</p>
                <p>{{ $sku->fragrance->brand->name }}</p>
            </div>
            <div>
                <p class="label mb-1" style="color: var(--color-ink-70);">Default Pricing</p>
                <p style="color: var(--color-ink-70);">Uses pricing engine unless override is set.</p>
            </div>
        </div>

        <form method="POST" action="{{ route('admin.skus.update', $sku) }}" class="space-y-5" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label for="storefront_price" class="label block mb-2" style="color: var(--color-ink-70);">Storefront Price (optional)</label>
                    <input
                        id="storefront_price"
                        name="storefront_price"
                        type="number"
                        step="0.01"
                        min="0"
                        max="99999999.99"
                        value="{{ old('storefront_price', $sku->storefront_price) }}"
                        class="input"
                        placeholder="If empty, update from Pricing page"
                    >
                    @error('storefront_price')
                        <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="price_override" class="label block mb-2" style="color: var(--color-ink-70);">Internal Price Override (optional)</label>
                    <input
                        id="price_override"
                        name="price_override"
                        type="number"
                        step="0.01"
                        min="0"
                        max="99999999.99"
                        value="{{ old('price_override', $sku->price_override) }}"
                        class="input"
                        placeholder="Used by internal cost-based engine"
                    >
                    @error('price_override')
                        <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="estimated_sprays" class="label block mb-2" style="color: var(--color-ink-70);">Estimated Sprays (optional)</label>
                    <input
                        id="estimated_sprays"
                        name="estimated_sprays"
                        type="number"
                        min="1"
                        max="2000"
                        value="{{ old('estimated_sprays', $sku->estimated_sprays) }}"
                        class="input"
                        placeholder="e.g. 45"
                    >
                    @error('estimated_sprays')
                        <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div>
                <label for="image_url" class="label block mb-2" style="color: var(--color-ink-70);">Decant Image (optional)</label>
                <div id="sku-image-dropzone" class="upload-dropzone">
                    <input type="hidden" name="remove_image" id="sku-remove-image" value="{{ old('remove_image') ? '1' : '0' }}">
                    <div class="upload-dropzone__hero">
                        <i class="fi fi-rr-cloud-upload upload-dropzone__icon" aria-hidden="true"></i>
                        <p class="upload-dropzone__hero-text">
                            Drag & drop image here or
                            <button type="button" class="upload-dropzone__link" data-picker-trigger="sku-image" id="sku-image-picker-btn-inline">Choose file</button>
                        </p>
                    </div>
                    <input
                        id="image_url"
                        name="image_url"
                        type="text"
                        value="{{ old('image_url', $sku->image_url) }}"
                        class="input"
                        maxlength="2048"
                        placeholder="Paste image link here (https://...)"
                    >
                    <div class="upload-dropzone__actions">
                        <input
                            id="image"
                            name="image"
                            type="file"
                            accept=".jpg,.jpeg,.png,.webp,.gif"
                            class="hidden"
                        >
                        <span id="sku-image-file-name" class="text-xs upload-dropzone__hint">Accepted: JPG, PNG, WEBP, GIF (max 4MB)</span>
                        <button type="button" class="upload-dropzone__remove-btn" id="sku-remove-image-btn">Remove image</button>
                    </div>
                    <div id="sku-upload-status" class="upload-status hidden">
                        <div class="upload-status__row">
                            <img id="sku-upload-thumb" class="upload-status__thumb hidden" alt="Selected image preview">
                            <div class="upload-status__meta">
                                <p id="sku-upload-title" class="upload-status__title"></p>
                                <p id="sku-upload-subtitle" class="upload-status__subtitle"></p>
                            </div>
                        </div>
                        <div class="upload-status__progress-track">
                            <div id="sku-upload-progress" class="upload-status__progress-bar" style="width: 0%;"></div>
                        </div>
                    </div>
                </div>
                @error('image_url')
                    <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
                @enderror
                @error('image')
                    <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
                @enderror

            </div>

            <label class="flex items-center gap-2 text-sm" style="color: var(--color-ink-70);">
                <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $sku->is_active)) class="accent-current">
                <span>Visible and active</span>
            </label>

            <div class="flex items-center gap-3 pt-2">
                <button type="submit" class="btn btn-primary">Update SKU</button>
                <a href="{{ route('admin.skus.index') }}" class="btn btn-ghost">Back</a>
            </div>
        </form>
    </section>
@endsection

<script>
    (function () {
        const urlInput = document.getElementById('image_url');
        const fileInput = document.getElementById('image');
        const trigger = document.getElementById('sku-image-picker-btn-inline');
        const fileName = document.getElementById('sku-image-file-name');
        const removeInput = document.getElementById('sku-remove-image');
        const removeBtn = document.getElementById('sku-remove-image-btn');
        const dropzone = document.getElementById('sku-image-dropzone');
        const statusWrap = document.getElementById('sku-upload-status');
        const progressBar = document.getElementById('sku-upload-progress');
        const title = document.getElementById('sku-upload-title');
        const subtitle = document.getElementById('sku-upload-subtitle');
        const thumb = document.getElementById('sku-upload-thumb');
        const existingImageUrl = @json($sku->resolvedImageUrl());
        if (!urlInput || !fileInput || !trigger || !fileName || !removeInput || !removeBtn || !dropzone || !statusWrap || !progressBar || !title || !subtitle || !thumb) return;

        function normalizePreviewUrl(value) {
            const url = (value || '').trim();
            if (url === '') return '';
            if (url.startsWith('http://') || url.startsWith('https://') || url.startsWith('data:') || url.startsWith('blob:')) {
                return url;
            }
            if (url.startsWith('/')) {
                return url;
            }

            return `/${url}`;
        }

        function renderUrlState() {
            const url = (urlInput.value || '').trim();
            if (url === '') return;
            statusWrap.classList.remove('hidden');
            progressBar.style.width = '100%';
            title.textContent = 'Image link detected';
            subtitle.textContent = 'Will use this URL after save.';
            thumb.src = normalizePreviewUrl(url);
            thumb.classList.remove('hidden');
            removeInput.value = '0';
        }

        function renderFileState(file) {
            statusWrap.classList.remove('hidden');
            progressBar.style.width = '0%';
            title.textContent = file.name;
            subtitle.textContent = 'Preparing file...';
            thumb.classList.add('hidden');

            const reader = new FileReader();
            reader.onprogress = function (event) {
                if (!event.lengthComputable) return;
                const percent = Math.max(5, Math.round((event.loaded / event.total) * 100));
                progressBar.style.width = `${percent}%`;
                subtitle.textContent = `Reading file... ${percent}%`;
            };
            reader.onload = function (event) {
                progressBar.style.width = '100%';
                subtitle.textContent = 'Ready to upload on save.';
                if (typeof event.target?.result === 'string') {
                    thumb.src = event.target.result;
                    thumb.classList.remove('hidden');
                }
            };
            reader.readAsDataURL(file);
            removeInput.value = '0';
        }

        function applyFile(file) {
            const dt = new DataTransfer();
            dt.items.add(file);
            fileInput.files = dt.files;
            urlInput.value = '';
            fileName.textContent = `Selected: ${file.name}`;
            renderFileState(file);
        }

        trigger.addEventListener('click', function () {
            fileInput.click();
        });

        fileInput.addEventListener('change', function () {
            const file = fileInput.files && fileInput.files[0];
            if (!file) {
                fileName.textContent = 'Accepted: JPG, PNG, WEBP, GIF (max 4MB)';
                return;
            }
            fileName.textContent = `Selected: ${file.name}`;
            renderFileState(file);
        });

        urlInput.addEventListener('paste', function (event) {
            const items = event.clipboardData && event.clipboardData.items ? event.clipboardData.items : [];
            for (const item of items) {
                if (!item.type || !item.type.startsWith('image/')) continue;

                const blob = item.getAsFile();
                if (!blob) continue;

                const extension = (blob.type.split('/')[1] || 'png').replace('jpeg', 'jpg');
                const pastedFile = new File([blob], `pasted-image.${extension}`, { type: blob.type });
                applyFile(pastedFile);
                event.preventDefault();
                break;
            }
        });

        urlInput.addEventListener('input', renderUrlState);
        removeBtn.addEventListener('click', function () {
            fileInput.value = '';
            urlInput.value = '';
            removeInput.value = '1';
            statusWrap.classList.remove('hidden');
            progressBar.style.width = '100%';
            title.textContent = 'Image will be removed';
            subtitle.textContent = 'Save this form to apply removal.';
            thumb.classList.add('hidden');
            fileName.textContent = 'Image marked for removal.';
        });

        dropzone.addEventListener('dragover', function (event) {
            event.preventDefault();
            dropzone.classList.add('is-dragover');
        });

        dropzone.addEventListener('dragleave', function () {
            dropzone.classList.remove('is-dragover');
        });

        dropzone.addEventListener('drop', function (event) {
            event.preventDefault();
            dropzone.classList.remove('is-dragover');
            const file = event.dataTransfer?.files?.[0];
            if (!file || !file.type.startsWith('image/')) return;
            applyFile(file);
        });

        if ((urlInput.value || '').trim() !== '') {
            renderUrlState();
            return;
        }

        if (removeInput.value !== '1' && existingImageUrl) {
            statusWrap.classList.remove('hidden');
            progressBar.style.width = '100%';
            title.textContent = 'Current image';
            subtitle.textContent = 'No changes yet.';
            thumb.src = existingImageUrl;
            thumb.classList.remove('hidden');
        }
    })();
</script>