@extends('layouts.admin')
@section('title', 'Recently Searched Order')
@section('page_title', 'Recently Searched')

@section('content')
<div class="max-w-2xl">

    <div class="flex items-center justify-between mb-6">
        <div>
            <h2 class="text-lg font-semibold text-navy">Recently Searched Order</h2>
            <p class="text-sm text-gray-500">Drag rows up or down to reorder. Saves automatically.</p>
        </div>
        <a href="{{ route('admin.products.index') }}" class="text-sm text-gray-400 hover:text-navy flex items-center gap-1">
            <i class="fas fa-arrow-left text-xs"></i> Products
        </a>
    </div>

    @if($products->isEmpty())
    <div class="bg-white rounded-2xl border border-gray-100 p-12 text-center text-gray-400">
        <i class="fas fa-search text-4xl text-gray-200 mb-3 block"></i>
        <p class="font-medium">No products marked as Recently Searched.</p>
        <p class="text-xs mt-1">Edit any product &rarr; Visibility &rarr; toggle <strong>Recently Searched</strong>.</p>
    </div>
    @else

    <div id="saved-toast"
         style="display:none;position:fixed;top:20px;right:20px;z-index:9999;background:#10b981;color:#fff;padding:12px 20px;border-radius:12px;font-weight:600;font-size:14px;box-shadow:0 4px 20px rgba(0,0,0,.15)">
        ✅ Order saved
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <ul id="sortable-list" class="divide-y divide-gray-100" style="list-style:none;margin:0;padding:0">
            @foreach($products as $product)
            <li class="sortable-item"
                data-id="{{ $product->id }}"
                style="display:flex;align-items:center;gap:16px;padding:12px 20px;cursor:grab;user-select:none;background:#fff;transition:background .1s">
                <i class="fas fa-grip-vertical drag-handle" style="color:#d1d5db;font-size:18px;cursor:grab"></i>
                <div style="width:40px;height:40px;border-radius:8px;overflow:hidden;background:#f9fafb;border:1px solid #f3f4f6;flex-shrink:0">
                    @if($product->primary_image)
                    <img src="{{ asset($product->primary_image) }}" style="width:100%;height:100%;object-fit:contain;padding:2px">
                    @else
                    <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#d1d5db;font-size:12px">
                        <i class="fas fa-image"></i>
                    </div>
                    @endif
                </div>
                <div style="flex:1;min-width:0">
                    <p style="font-weight:600;color:#0f2d54;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ $product->name }}</p>
                    <p style="font-size:12px;color:#9ca3af">{{ $product->category?->name }}</p>
                </div>
                <span class="pos-badge" style="background:#2563eb;color:#fff;font-size:12px;font-weight:700;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0"></span>
            </li>
            @endforeach
        </ul>
    </div>
    @endif
</div>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
<script>
(function () {
    var list = document.getElementById('sortable-list');
    if (!list) return;

    function updateBadges() {
        var items = list.querySelectorAll('.sortable-item');
        items.forEach(function (li, i) {
            li.querySelector('.pos-badge').textContent = i + 1;
        });
    }
    updateBadges();

    var toast = document.getElementById('saved-toast');
    var toastTimer;
    function showToast() {
        toast.style.display = 'block';
        clearTimeout(toastTimer);
        toastTimer = setTimeout(function () { toast.style.display = 'none'; }, 2000);
    }

    function saveOrder() {
        var ids = [];
        list.querySelectorAll('.sortable-item').forEach(function (li) {
            ids.push(li.dataset.id);
        });
        fetch('{{ route("admin.recently-searched.order") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ ids: ids })
        }).then(function (r) { return r.json(); }).then(function (d) {
            if (d.success) showToast();
        });
    }

    Sortable.create(list, {
        animation: 200,
        handle: '.drag-handle',
        ghostClass: 'sortable-ghost',
        chosenClass: 'sortable-chosen',
        onEnd: function () {
            updateBadges();
            saveOrder();
        }
    });

    // Style ghost
    var style = document.createElement('style');
    style.textContent = '.sortable-ghost{opacity:.4;background:#eff6ff!important}.sortable-chosen{box-shadow:0 4px 16px rgba(37,99,235,.15)}';
    document.head.appendChild(style);
})();
</script>
@endsection