@extends('layouts.manager')

@section('title','Адмінка — Категорії подарунків')
@section('page_title','Категорії подарунків')

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

@section('content')

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

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

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

            <div class="d-flex gap-2">
                <a href="{{ route('manager.real-gifts.index') }}" class="btn btn-light">
                    ← До подарунків
                </a>
                <a href="{{ route('manager.gift-categories.create') }}" class="btn btn-success">
                    + Додати категорію
                </a>
            </div>
        </div>

        <div class="mt-2 text-muted small">
            <b>Порада:</b> перетягування доступне, коли немає пошуку і ти на 1-й сторінці.
        </div>
    </div>

    <div class="admin-card p-3 p-md-4">
        <div class="table-responsive">
            <table class="table mb-0 gc-table">
                <thead>
                <tr>
                    <th style="width:44px"></th>
                    <th>Назва</th>
                    <th style="width:220px">Slug</th>
                    <th style="width:120px">Порядок</th>
                    <th style="width:120px">Статус</th>
                    <th style="width:200px" class="text-right"></th>
                </tr>
                </thead>

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

                        <td class="align-middle">
                            <div class="gc-title">{{ $c->title }}</div>
                        </td>

                        <td class="align-middle">
                            <code class="gc-slug">{{ $c->slug }}</code>
                        </td>

                        <td class="align-middle">
                            <span class="gc-sort">{{ (int)$c->sort }}</span>
                        </td>

                        <td class="align-middle">
                            @if($c->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 gc-actions">
                            <a class="btn btn-sm btn-primary" href="{{ route('manager.gift-categories.edit', $c) }}">Редагувати</a>

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

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

@endsection

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

    <script>
        (function () {
            // ========= LIVE SEARCH (як у подарунках) =========
            const form = document.getElementById('giftCategoriesFilterForm');
            const search = document.getElementById('gcSearch');

            const FOCUS_KEY = 'gc_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 {
                    if (!search) return;

                    const payload = {
                        hrefBase: window.location.pathname,
                        active: document.activeElement === search,
                        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();
                    }
                });
            }

            document.addEventListener('DOMContentLoaded', restoreFocusIfNeeded);

            // ========= SORTABLE =========
            const tbody = document.getElementById('categoriesSortable');
            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