@extends('layouts.manager')

@section('title','Адмінка — Реальні подарунки')
@section('page_title', $gift->exists ? 'Редагувати подарунок' : 'Додати подарунок')

@push('head')
    <link rel="stylesheet" href="{{ mix('css/manager/real-gifts-form.css') }}">
@endpush

@section('content')

    <div class="admin-card p-3 p-md-4 real-gifts-form">
        <div class="real-gifts-form-inner">
            <form id="realGiftsForm"
                  method="POST"
                  action="{{ $gift->exists ? route('manager.real-gifts.update', $gift) : route('manager.real-gifts.store') }}"
                  enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="redirect_to" value="{{ old('redirect_to', url()->previous()) }}">
                @if($gift->exists)
                    @method('PUT')
                @endif
                @php
                    $defaultCategoryId = $gift->exists
                        ? $gift->gift_category_id
                        : request('category_id'); // берем из URL при добавлении
                @endphp

                <div class="form-group">
                    <label>Категорія</label>
                    <select name="gift_category_id" class="form-control" required>
                        @foreach($categories as $c)
                            <option value="{{ $c->id }}"
                                    {{ (int) old('gift_category_id', $defaultCategoryId) === (int) $c->id ? 'selected' : '' }}>
                                {{ $c->title }}
                            </option>
                        @endforeach
                    </select>
                    @error('gift_category_id')
                    <div class="text-danger small mt-2">{{ $message }}</div>@enderror
                </div>

                <div class="form-group">
                    <label>Назва</label>
                    <input name="title"
                           class="form-control"
                           value="{{ old('title', $gift->title) }}"
                           required>
                    @error('title')
                    <div class="text-danger small mt-2">{{ $message }}</div>@enderror
                </div>

                <div class="form-row">
                    <div class="form-group col-lg-8">
                        <label>Ціна (coin)</label>
                        <input
                                id="giftPriceInput"
                                name="price"
                                type="text"
                                inputmode="numeric"
                                autocomplete="off"
                                class="form-control"
                                placeholder="Напр. 18,520 або 18520"
                                value="{{ old('price', number_format((int)($gift->price ?? 0), 0, '.', ',')) }}"
                                required
                        >
                        <div class="text-muted small mt-2">
                            Можна вводити з комами або без — при збереженні коми прибираються автоматично.
                        </div>
                        @error('price')
                        <div class="text-danger small mt-2">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-group col-lg-4 d-flex align-items-center">
                        <div class="custom-control custom-checkbox mt-4">
                            <input
                                    type="checkbox"
                                    class="custom-control-input"
                                    id="is_active"
                                    name="is_active"
                                    value="1"
                                    {{ old('is_active', $gift->exists ? $gift->is_active : true) ? 'checked' : '' }}
                            >
                            <label class="custom-control-label" for="is_active">Активний</label>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label>Фото</label>

                    <div class="real-gifts-uploader">
                        <div class="real-gifts-file">

                            {{-- ✅ реальный input для отправки файла --}}
                            <input type="file"
                                   name="image"
                                   id="giftImageInput"
                                   class="form-control-file"
                                   accept="image/*"
                                   style="display:none;">

                            <div class="d-flex flex-wrap gap-2">
                                <button type="button" class="btn btn-light btn-sm" id="giftPickFileBtn">
                                    Вибрати файл
                                </button>

                                <div id="giftPasteZone" class="rg-paste-zone" tabindex="0" style="min-width:260px;">
                                    Натисни сюди і встав фото (Ctrl+V) або перетягни файл
                                </div>
                            </div>

                            @error('image')
                            <div class="text-danger small mt-2">{{ $message }}</div>@enderror

                            <div id="giftPasteHint" class="text-muted small mt-2">
                                Підтримка: Ctrl+V (з буфера) / drag&drop / вибір файлу.
                            </div>
                            <div class="text-muted small mt-2">
                                Після вибору файлу справа з’явиться прев’ю нової фотки.
                            </div>
                        </div>

                        <div class="real-gifts-preview">
                            <div class="real-gifts-preview-head">
                                Прев’ю
                            </div>
                            <div class="real-gifts-preview-body">
                                {{-- поточна фотка (якщо є) --}}
                                <img
                                        id="giftImagePreview"
                                        src="{{ $gift->image_url ?: 'data:image/gif;base64,R0lGODlhAQABAAAAACw=' }}"
                                        alt="preview"
                                        style="{{ $gift->image_url ? '' : 'display:none;' }}"
                                >

                                <div id="giftImageEmpty"
                                     class="text-muted small"
                                     style="{{ $gift->image_url ? 'display:none;' : '' }}">
                                    Немає фото. Обери файл — і тут буде прев’ю.
                                </div>

                                <div class="real-gifts-preview-meta">
                                    <span id="giftImageName" class="text-muted small">
                                        {{ $gift->image_path ? basename($gift->image_path) : '' }}
                                    </span>
                                    <span id="giftImageInfo" class="text-muted small"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="d-flex gap-2 mt-3">
                    <button class="btn btn-success">Зберегти</button>
                    <a href="{{ request('redirect_to') ?: url()->previous() }}" class="btn btn-light">Назад</a>
                </div>
            </form>
        </div>
    </div>

@endsection

@push('scripts')
    <script>
        (function () {
            // ---------------------------
            // IMAGE: paste / drag-drop / pick
            // ---------------------------
            const form = document.getElementById('realGiftsForm');

            const input = document.getElementById('giftImageInput');
            const img = document.getElementById('giftImagePreview');
            const empty = document.getElementById('giftImageEmpty');
            const nameEl = document.getElementById('giftImageName');
            const infoEl = document.getElementById('giftImageInfo');
            const pasteZone = document.getElementById('giftPasteZone');
            const pickBtn = document.getElementById('giftPickFileBtn');
            if (pickBtn && input) {
                pickBtn.addEventListener('click', () => input.click());
            }
            const clearBtn = document.getElementById('giftClearFileBtn');

            function setMeta(file) {
                if (nameEl) nameEl.textContent = file?.name || '';
                if (infoEl && file) {
                    const kb = Math.round(file.size / 1024);
                    infoEl.textContent = kb >= 1024 ? (Math.round((kb / 1024) * 10) / 10 + ' MB') : (kb + ' KB');
                } else if (infoEl) {
                    infoEl.textContent = '';
                }
            }

            function showPreview(file) {
                if (!file) return;
                setMeta(file);

                const reader = new FileReader();
                reader.onload = function (e) {
                    img.src = e.target.result;
                    img.style.display = '';
                    empty.style.display = 'none';
                };
                reader.readAsDataURL(file);
            }

            function clearFile() {
                if (!input) return;
                input.value = '';
                setMeta(null);

                // если уже была картинка с сервера — оставляем как есть (не прячем),
                // а если ее не было — показываем empty
                const hasServerImage = img && img.getAttribute('src') && !img.getAttribute('src').includes('R0lGODlhAQAB');
                if (!hasServerImage) {
                    if (img) img.style.display = 'none';
                    if (empty) empty.style.display = '';
                }
            }

            function attachFileToInput(file) {
                const dt = new DataTransfer();
                dt.items.add(file);
                input.files = dt.files;
                input.dispatchEvent(new Event('change', {bubbles: true}));
            }

            if (input) {
                input.addEventListener('change', function () {
                    const file = input.files && input.files[0] ? input.files[0] : null;
                    if (!file) return;
                    showPreview(file);
                });
            }

            if (pickBtn && input) {
                pickBtn.addEventListener('click', () => input.click());
            }

            if (clearBtn) {
                clearBtn.addEventListener('click', clearFile);
            }

            if (pasteZone && input) {
                pasteZone.addEventListener('click', () => pasteZone.focus());

                pasteZone.addEventListener('paste', function (e) {
                    const items = (e.clipboardData && e.clipboardData.items) ? e.clipboardData.items : [];
                    if (!items.length) return;

                    let file = null;
                    for (const it of items) {
                        if (it.kind === 'file' && it.type.startsWith('image/')) {
                            file = it.getAsFile();
                            break;
                        }
                    }
                    if (!file) return;

                    e.preventDefault();

                    // если у вставленной картинки нет имени — дадим свое
                    if (!file.name || file.name === 'image.png') {
                        const ext = (file.type === 'image/jpeg') ? 'jpg' : (file.type.split('/')[1] || 'png');
                        file = new File([file], 'pasted.' + ext, {type: file.type});
                    }

                    attachFileToInput(file);
                });

                // Drag & Drop
                pasteZone.addEventListener('dragover', (e) => {
                    e.preventDefault();
                    pasteZone.classList.add('is-dragover');
                });
                pasteZone.addEventListener('dragleave', () => pasteZone.classList.remove('is-dragover'));
                pasteZone.addEventListener('drop', (e) => {
                    e.preventDefault();
                    pasteZone.classList.remove('is-dragover');

                    const file = e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files[0] ? e.dataTransfer.files[0] : null;
                    if (!file) return;
                    if (!file.type.startsWith('image/')) return;

                    attachFileToInput(file);
                });
            }

            // ---------------------------
            // PRICE: allow 18,520 or 18520
            // ---------------------------
            const priceInput = document.getElementById('giftPriceInput');

            function onlyDigitsAndCommas(str) {
                return (str || '').replace(/[^\d,]/g, '');
            }

            function normalizeToDigits(str) {
                // "18,520" -> "18520", "18 520" -> "18520"
                return (str || '').toString().replace(/[^\d]/g, '');
            }

            function formatWithCommas(digitsStr) {
                const s = (digitsStr || '').replace(/^0+(?=\d)/, ''); // убрать ведущие нули
                if (!s) return '';
                return s.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
            }

            if (priceInput) {
                // во время ввода — чистим мусор
                priceInput.addEventListener('input', function () {
                    const cleaned = onlyDigitsAndCommas(priceInput.value);
                    if (priceInput.value !== cleaned) priceInput.value = cleaned;
                });

                // при выходе — красиво форматируем 18520 -> 18,520
                priceInput.addEventListener('blur', function () {
                    const digits = normalizeToDigits(priceInput.value);
                    priceInput.value = digits ? formatWithCommas(digits) : '';
                });
            }

            // перед отправкой формы — убираем комы, чтобы бэк получил чистое число
            if (form && priceInput) {
                form.addEventListener('submit', function () {
                    const digits = normalizeToDigits(priceInput.value);
                    priceInput.value = digits; // отправится "18520"
                });
            }
        })();
    </script>
@endpush