@php($isEdit = $size->exists)

<div class="space-y-5">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
            <label for="volume_ml" class="label block mb-2" style="color: var(--color-ink-70);">Volume (ml)</label>
            <input id="volume_ml" name="volume_ml" type="number" step="0.01" min="0.01" max="9999.99"
                   value="{{ old('volume_ml', $size->volume_ml) }}" required class="input" placeholder="e.g. 5">
            @error('volume_ml')
                <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label for="label" class="label block mb-2" style="color: var(--color-ink-70);">Label (optional)</label>
            <input id="label" name="label" type="text" maxlength="255"
                   value="{{ old('label', $size->label) }}" class="input" placeholder="auto e.g. 5ml">
            @error('label')
                <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
            @enderror
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
            <label for="multiplier" class="label block mb-2" style="color: var(--color-ink-70);">Multiplier</label>
            <input id="multiplier" name="multiplier" type="number" step="0.001" min="0.001" max="99.999"
                   value="{{ old('multiplier', $size->multiplier) }}" required class="input" placeholder="e.g. 1.600">
            @error('multiplier')
                <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label for="bottle_cost" class="label block mb-2" style="color: var(--color-ink-70);">Bottle cost (tk)</label>
            <input id="bottle_cost" name="bottle_cost" type="number" step="0.01" min="0" max="999999.99"
                   value="{{ old('bottle_cost', $size->bottle_cost ?? 0) }}" class="input" placeholder="e.g. 17">
            <p class="mt-1 text-xs" style="color: var(--color-ink-40);">Fixed per-piece container/label cost added to computed price.</p>
            @error('bottle_cost')
                <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
            @enderror
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
            <label for="sort_order" class="label block mb-2" style="color: var(--color-ink-70);">Sort Order</label>
            <input id="sort_order" name="sort_order" type="number" min="0" max="9999"
                   value="{{ old('sort_order', $size->sort_order) }}" class="input" placeholder="e.g. 10">
            @error('sort_order')
                <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);">Global Decant Image (optional)</label>
        <div id="decant-size-image-dropzone" class="upload-dropzone">
            <input type="hidden" name="remove_image" id="decant-size-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="decant-size-image" id="decant-size-image-picker-btn-inline">Choose file</button>
                </p>
            </div>
            <input
                id="image_url"
                name="image_url"
                type="text"
                value="{{ old('image_url', $size->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="decant-size-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="decant-size-remove-image-btn">Remove image</button>
            </div>
            <div id="decant-size-upload-status" class="upload-status hidden">
                <div class="upload-status__row">
                    <img id="decant-size-upload-thumb" class="upload-status__thumb hidden" alt="Selected image preview">
                    <div class="upload-status__meta">
                        <p id="decant-size-upload-title" class="upload-status__title"></p>
                        <p id="decant-size-upload-subtitle" class="upload-status__subtitle"></p>
                    </div>
                </div>
                <div class="upload-status__progress-track">
                    <div id="decant-size-upload-progress" class="upload-status__progress-bar" style="width: 0%;"></div>
                </div>
            </div>
        </div>
        <p class="mt-1 text-xs" style="color: var(--color-ink-40);">Applies across all fragrances for this size (for example all 5ml SKUs).</p>
        @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', $size->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">
            {{ $isEdit ? 'Update Decant Size' : 'Create Decant Size' }}
        </button>
        <a href="{{ route('admin.decant-sizes.index') }}" class="btn btn-ghost">Cancel</a>
    </div>
</div>

<script>
    (function () {
        const urlInput = document.getElementById('image_url');
        const fileInput = document.getElementById('image');
        const trigger = document.getElementById('decant-size-image-picker-btn-inline');
        const fileName = document.getElementById('decant-size-file-name');
        const removeInput = document.getElementById('decant-size-remove-image');
        const removeBtn = document.getElementById('decant-size-remove-image-btn');
        const dropzone = document.getElementById('decant-size-image-dropzone');
        const statusWrap = document.getElementById('decant-size-upload-status');
        const progressBar = document.getElementById('decant-size-upload-progress');
        const title = document.getElementById('decant-size-upload-title');
        const subtitle = document.getElementById('decant-size-upload-subtitle');
        const thumb = document.getElementById('decant-size-upload-thumb');
        const existingImageUrl = @json($size->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>