@extends('layouts.app')

@section('content')
<div class="px-4 mx-auto pb-60">

    <div class="sm:flex sm:items-center gap-x-2">
        <header class="rounded-lg shadow bg-gradient-to-b from-stone-100 to-white">
            <div class="lg:divide-y lg:divide-stone-200">
                <nav class="items-center content-center hidden lg:flex" aria-label="Global">
                    <div
                        class="bg-gradient-to-b from-stone-600 to-stone-500 px-3.5 py-2 text-sm text-stone-50 shadow-sm rounded-s-lg">
                        ARŞİVLENEN KATEGORİLER</div>
                    <div class="flex-1">
                        <input type="text" id="searchInput" placeholder="Kategori adına göre arama yap..."
                            class="w-full px-3.5 py-2 text-sm rounded-r-md border-none" />
                    </div>
                </nav>
            </div>
        </header>
        <header class="rounded-lg shadow bg-gradient-to-b from-stone-100 to-white">
            <div class="lg:divide-y lg:divide-stone-200">
                <nav class="items-center content-center hidden lg:flex" aria-label="Global">
                    <a href="{{ route('pos-categories.index') }}" type="button"
                        class="flex items-center content-center px-3.5 py-1.5 text-sm hover:bg-stone-100 transition-all rounded-lg text-stone-400">
                        <span class="material-symbols-rounded text-stone-400">arrow_back</span>
                    </a>
                </nav>
            </div>
        </header>
    </div>

    <div id="pos-category-list" class="max-w-4xl mt-4 pb-60">
        <div class="p-2 bg-white rounded-lg shadow">
            @if (session()->has('message'))
            <div class="px-4 py-2 mb-4 text-teal-700 bg-teal-100 rounded">
                {{ session('message') }}
            </div>
            @endif

            @if (session()->has('error'))
            <div class="px-4 py-2 mb-4 rounded text-rose-700 bg-rose-100">
                {{ session('error') }}
            </div>
            @endif

            @if($categories->count() > 0)
            <ul id="sortableList" class="space-y-1">
                @foreach($categories as $category)
                <li class="flex items-center px-4 py-1 border rounded gap-x-2 text-stone-500 bg-stone-50 hover:bg-stone-100"
                    data-id="{{ $category->id }}" data-name="{{ strtolower($category->name) }}">
                    <span class="text-xs text-stone-400">{{ $category->id }}</span>
                    <span class="font-medium text-stone-800">{{ $category->name }}</span>

                    @if($category->invoice_title)
                    <span class="text-sm text-stone-300">
                        <span class="text-base material-symbols-rounded">receipt</span>
                        {{ $category->invoice_title }}
                    </span>
                    @endif

                    <span class="ml-auto flex items-center text-sm gap-x-1 text-stone-400">
                        <span class="text-base material-symbols-rounded">fastfood</span>
                        {{ $category->products_count }}
                    </span>

                    <span class="text-xs text-stone-400 ml-2">
                        {{ $category->deleted_at->format('d.m.Y H:i') }}
                    </span>

                    {{-- ARŞİVDEN ÇIKAR --}}
                    <form action="{{ route('pos-categories.restore', $category->id) }}" method="POST" class="ml-2"
                        onclick="return confirm('{{ $category->name }} kategorisini arşivden çıkarmak istediğinize emin misiniz?')">
                        @csrf
                        <button type="submit" title="Arşivden Çıkar"
                            class="flex items-center justify-center p-1.5 rounded-md text-stone-400 hover:text-green-600 hover:bg-green-50 transition-colors">
                            <span class="material-symbols-rounded text-base">unarchive</span>
                        </button>
                    </form>
                </li>
                @endforeach
            </ul>
            @else
            <div class="flex flex-col items-center justify-center py-12 text-stone-400">
                <span class="material-symbols-rounded text-4xl mb-2">archive</span>
                <p class="text-sm">Arşivlenmiş kategori bulunmuyor.</p>
                <a href="{{ route('pos-categories.index') }}"
                    class="mt-2 text-sm text-stone-500 hover:text-stone-700 underline">
                    Kategori listesine dön
                </a>
            </div>
            @endif
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const searchInput = document.getElementById('searchInput');
        const categoryList = document.getElementById('sortableList');
        if (!searchInput || !categoryList) return;

        const categoryItems = categoryList.querySelectorAll('li');

        searchInput.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase().trim();

            categoryItems.forEach(function(item) {
                const categoryName = item.dataset.name || '';
                const categoryId = item.dataset.id || '';

                if (categoryName.includes(searchTerm) || categoryId.includes(searchTerm)) {
                    item.style.display = '';
                } else {
                    item.style.display = 'none';
                }
            });
        });
    });
</script>
@endsection