@extends('layouts.manager')

@section('title','Адмінка — Реальні подарунки')
@section('page_title','Реальні подарунки')

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

@section('content')

    <div class="admin-card p-3 p-md-4 mb-3 real-gifts-toolbar">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
            <form id="realGiftsFilterForm"
                  method="GET"
                  class="d-flex flex-wrap gap-2"
                  action="{{ route('manager.real-gifts.index') }}">

                <select id="rgCategory" name="category_id" class="form-control" style="min-width:240px">
                    <option value="">Всі категорії</option>
                    @foreach($categories as $c)
                        <option value="{{ $c->id }}" {{ (string)request('category_id') === (string)$c->id ? 'selected' : '' }}>
                            {{ $c->title }}
                        </option>
                    @endforeach
                </select>

                <input id="rgSearch"
                       name="search"
                       value="{{ request('search') }}"
                       class="form-control"
                       placeholder="Пошук по назві"
                       style="min-width:240px">

                <a href="{{ route('manager.real-gifts.index') }}" class="btn btn-light">Скинути</a>
            </form>

            <div class="d-flex flex-wrap gap-2">
                {{-- ✅ Перехід до категорій --}}
                <a href="{{ route('manager.gift-categories.index') }}" class="btn btn-outline-primary">
                    Категорії
                </a>

                <a href="{{ route('manager.real-gifts.create', ['category_id' => request('category_id')]) }}"
                   class="btn btn-success">
                    + Додати подарунок
                </a>
            </div>
        </div>

        <div class="mt-2 text-muted small real-gifts-hint d-flex flex-wrap align-items-center justify-content-between gap-2">
            <div>
                <b>Порада:</b> щоб перетягування працювало логічно, обери конкретну категорію —
                порядок зберігається автоматично.
            </div>

            {{-- (опційно) ще один лінк під підказкою --}}
            <a class="small" href="{{ route('manager.gift-categories.index') }}">
                ⚙️ Керувати категоріями
            </a>
        </div>
    </div>

    <div class="admin-card p-3 p-md-4">
        <div class="table-responsive">
            <table class="table mb-0 real-gifts-table">
                <thead>
                <tr>
                    <th style="width:44px"></th>
                    <th style="width:70px">Фото</th>
                    <th>Назва</th>
                    <th style="width:160px">Категорія</th>
                    <th style="width:120px">Ціна</th>
                    <th style="width:110px">Статус</th>
                    <th style="width:170px" class="text-right"></th>
                </tr>
                </thead>

                <tbody id="giftsSortable"
                       data-sort-url="{{ route('manager.real-gifts.sort') }}"
                       data-can-sort="{{ request('category_id') ? 1 : 0 }}">
                @forelse($gifts as $gift)
                    <tr data-id="{{ $gift->id }}">
                        <td class="align-middle">
                            <span class="drag-handle" title="Перетягни для зміни порядку">☰</span>
                        </td>

                        <td class="align-middle">
                            @if($gift->image_url ?? null)
                                <img class="real-gifts-thumb" src="{{ $gift->image_url }}" alt="gift">
                            @else
                                <div class="real-gifts-thumb-placeholder"></div>
                            @endif
                        </td>

                        <td class="align-middle">
                            <div class="font-weight-600">{{ $gift->title }}</div>
                        </td>

                        <td class="align-middle">{{ $gift->category?->title }}</td>

                        <td class="align-middle">{{ number_format($gift->price) }}</td>

                        <td class="align-middle">
                            @if($gift->is_active)
                                <span class="badge badge-success">active</span>
                            @else
                                <span class="badge badge-secondary">hidden</span>
                            @endif
                        </td>

                        <td class="align-middle text-right real-gifts-actions">
                            <a class="btn btn-sm btn-primary"
                               href="{{ route('manager.real-gifts.edit', $gift) }}?{{ request()->getQueryString() }}">
                                Редагувати
                            </a>

                            <form method="POST"
                                  action="{{ route('manager.real-gifts.destroy', $gift) }}"
                                  class="d-inline"
                                  onsubmit="return confirm('Видалити подарунок?')">
                                @csrf
                                @method('DELETE')
                                <button class="btn btn-sm btn-danger">Видалити</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center text-muted py-4">
                            Нічого не знайдено
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>

        <div class="mt-3">
            {{ $gifts->links() }}
        </div>
    </div>

@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.3/Sortable.min.js"></script>

    <script>
        (function () {
            // ========= LIVE FILTER (без “вильоту” з інпута) =========
            const form = document.getElementById('realGiftsFilterForm');
            const search = document.getElementById('rgSearch');
            const category = document.getElementById('rgCategory');

            const FOCUS_KEY = 'rg_filter_focus_v1';

            function debounce(fn, ms) {
                let t;
                return function (...args) {
                    clearTimeout(t);
                    t = setTimeout(() => fn.apply(this, args), ms);
                };
            }

            function buildUrlFromForm() {
                const url = new URL(form.action, window.location.origin);
                const params = new URLSearchParams(new FormData(form));

                if (search && !search.value.trim()) {
                    params.delete('search');
                }

                params.delete('page');
                url.search = params.toString();
                return url.toString();
            }

            function rememberFocus() {
                try {
                    const isActive = document.activeElement === search;
                    if (!search) return;

                    const payload = {
                        hrefBase: window.location.pathname,
                        active: isActive,
                        caretStart: typeof search.selectionStart === 'number' ? search.selectionStart : null,
                        caretEnd: typeof search.selectionEnd === 'number' ? search.selectionEnd : null,
                        ts: Date.now(),
                    };

                    sessionStorage.setItem(FOCUS_KEY, JSON.stringify(payload));
                } catch (e) {
                }
            }

            function restoreFocusIfNeeded() {
                if (!search) return;

                try {
                    const raw = sessionStorage.getItem(FOCUS_KEY);
                    if (!raw) return;

                    const data = JSON.parse(raw);
                    sessionStorage.removeItem(FOCUS_KEY);

                    const samePage = data && data.hrefBase === window.location.pathname;
                    const fresh = data && data.ts && (Date.now() - data.ts) < 15000;

                    if (!samePage || !fresh || !data.active) return;

                    search.focus({preventScroll: true});

                    if (typeof data.caretStart === 'number' && typeof data.caretEnd === 'number') {
                        const len = search.value.length;
                        const start = Math.min(data.caretStart, len);
                        const end = Math.min(data.caretEnd, len);
                        search.setSelectionRange(start, end);
                    }
                } catch (e) {
                    try {
                        sessionStorage.removeItem(FOCUS_KEY);
                    } catch (e2) {
                    }
                }
            }

            function submitFilter() {
                if (!form) return;

                if (search && document.activeElement === search) {
                    rememberFocus();
                } else {
                    try {
                        sessionStorage.removeItem(FOCUS_KEY);
                    } catch (e) {
                    }
                }

                window.location.href = buildUrlFromForm();
            }

            const submitDebounced = debounce(submitFilter, 900);

            if (form && search) {
                search.addEventListener('input', () => submitDebounced());

                search.addEventListener('keydown', (e) => {
                    if (e.key === 'Enter') {
                        e.preventDefault();
                        submitFilter();
                    }
                });
            }

            if (form && category) {
                category.addEventListener('change', () => submitFilter());
            }

            document.addEventListener('DOMContentLoaded', restoreFocusIfNeeded);

            // ========= SORTABLE =========
            const tbody = document.getElementById('giftsSortable');
            if (!tbody) return;

            const canSort = tbody.getAttribute('data-can-sort') === '1';

            if (!canSort) {
                tbody.classList.add('drag-disabled');
                return;
            }

            const url = tbody.getAttribute('data-sort-url');

            Sortable.create(tbody, {
                handle: '.drag-handle',
                animation: 160,
                ghostClass: 'sortable-ghost',
                chosenClass: 'sortable-chosen',
                dragClass: 'sortable-drag',
                onEnd: function () {
                    const ids = Array.from(tbody.querySelectorAll('tr[data-id]'))
                        .map(tr => tr.getAttribute('data-id'));

                    fetch(url, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json',
                        },
                        body: JSON.stringify({ids})
                    }).then(r => {
                        if (!r.ok) {
                            alert('Помилка збереження порядку');
                            return;
                        }
                        window.location.reload();
                    }).catch(() => {
                        alert('Помилка мережі');
                    });
                }
            });
        })();
    </script>
@endpush