@extends('layouts.app')

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

    {{-- BREADCRUMB --}}
    <nav class="flex py-2" aria-label="Breadcrumb">
        <ol role="list" class="flex items-center space-x-4 uppercase">
            <li>
                <div>
                    <a href="{{ route('dashboard') }}" class="text-stone-400 hover:text-stone-500">
                        <svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd"
                                d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z"
                                clip-rule="evenodd" />
                        </svg>
                        <span class="sr-only">Home</span>
                    </a>
                </div>
            </li>
            <li>
                <div class="flex items-center">
                    <svg class="flex-shrink-0 w-5 h-5 text-stone-300" fill="currentColor" viewBox="0 0 20 20"
                        aria-hidden="true">
                        <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
                    </svg>
                    <a href="{{ route('pos-products.index') }}"
                        class="ml-4 text-sm font-medium text-stone-500 hover:text-stone-700">SATIŞ ÜRÜNLERİ</a>
                </div>
            </li>
            <li>
                <div class="flex items-center">
                    <svg class="flex-shrink-0 w-5 h-5 text-stone-300" fill="currentColor" viewBox="0 0 20 20"
                        aria-hidden="true">
                        <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
                    </svg>
                    <span class="ml-4 text-sm font-medium text-stone-500 hover:text-stone-700"
                        aria-current="page">ARŞİVLENEN ÜRÜNLER</span>
                </div>
            </li>
        </ol>
    </nav>

    <div class="mt-4 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 uppercase to-stone-500 px-3.5 py-2 text-sm text-stone-50 shadow-sm rounded-s-lg">
                        ARŞİVLENEN ÜRÜNLER
                    </div>
                    <div class="flex-1">
                        <input type="text" id="searchInput" placeholder="Ürün 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-products.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-product-list" class="max-w-7xl 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($products->count() > 0)
            <ul id="sortableList" class="space-y-1">
                @foreach($products as $product)
                <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="{{ $product->id }}" data-name="{{ strtolower($product->name) }}">
                    <span class="text-xs text-stone-400">{{ $product->id }}</span>
                    <span class="font-medium text-stone-800">{{ $product->name }}</span>

                    <span class="ml-auto flex gap-x-1 text-stone-600">
                        @if($product->categories->count() > 0)
                        @foreach($product->categories as $category)
                        <span
                            class="rounded-md bg-stone-100 px-2 py-1 text-xs font-medium text-stone-500 ring-1 ring-inset ring-stone-300">
                            {{ $category->name }}
                        </span>
                        @endforeach
                        @else
                        <span
                            class="rounded-md bg-stone-100 px-2 py-1 text-xs font-medium text-stone-400 ring-1 ring-inset ring-stone-300">
                            Kategorisiz
                        </span>
                        @endif
                        @if(isset($product->vat_pct) && $product->vat_pct > 0)
                        <span
                            class="rounded-md bg-sky-50 px-2 py-1 text-xs font-medium text-sky-500 ring-1 ring-inset ring-sky-300">
                            %{{ number_format($product->vat_pct, 0, ',', '.') }}
                        </span>
                        @endif
                    </span>

                    <div class="flex items-center gap-x-1 text-stone-600 font-medium text-sm ml-2">
                        {{ number_format($product->gross_price, 2, ',', '.') }}
                        <span class="material-symbols-rounded text-xs text-stone-400">sell</span>
                    </div>

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

                    {{-- ARŞİVDEN ÇIKAR --}}
                    <form action="{{ route('pos-products.restore', $product->id) }}" method="POST" class="ml-2"
                        onclick="return confirm('Bu ürünü 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ş ürün bulunmuyor.</p>
                <a href="{{ route('pos-products.index') }}"
                    class="mt-2 text-sm text-stone-500 hover:text-stone-700 underline">
                    Ürün listesine dön
                </a>
            </div>
            @endif
        </div>
    </div>
</div>

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

        const productItems = productList.querySelectorAll('li');

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

            productItems.forEach(function(item) {
                const productName = item.dataset.name || '';
                const productId = item.dataset.id || '';

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