@extends('layouts.app')

@section('content')
<div class="px-4 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 uppercase to-stone-500 px-3.5 py-2 text-sm text-stone-50 shadow-sm rounded-s-lg">
                        YAZICILAR
                    </div>
                    <div class="flex-1">
                        <input type="text" id="searchInput" placeholder="Yazıcı 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="#" onclick="printTable(); return false;" 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">print</span>
                    </a>
                    <a href="#" onclick="exportTable(); return false;" 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">file_export</span>
                    </a>
                </nav>
            </div>
        </header>
    </div>

    <div id="printer-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

            <ul id="sortableList" class="space-y-1">
                @forelse ($printers as $printer)
                <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="{{ $printer->id }}">
                    <span class="text-stone-400">
                        <span class="mt-1 material-symbols-rounded">
                            print
                        </span>
                    </span>
                    <span class="text-xs">{{ $printer->id }}</span>
                    <span class="font-medium text-stone-800">{{ $printer->name }}</span>
                    @if ($printer->display_name)
                    <span class="text-xs text-stone-400">— {{ $printer->display_name }}</span>
                    @endif
                    @if ($printer->gcp_id)
                    <span
                        class="ml-2 inline-flex items-center px-2 py-0.5 rounded text-[10px] font-medium bg-stone-100 text-stone-500 border border-stone-200">
                        GCP: {{ $printer->gcp_id }}
                    </span>
                    @endif
                </li>
                @empty
                <li class="px-4 py-8 text-center text-stone-500">
                    <span class="material-symbols-rounded text-4xl mb-2">print</span>
                    <p>Bu işletmeye ait yazıcı bulunamadı.</p>
                    <p class="mt-1 text-xs text-stone-400">Yazıcılar POS sisteminden otomatik olarak alınır.</p>
                </li>
                @endforelse
            </ul>
        </div>
    </div>
</div>

<script>
    // Client-side search filter
    document.getElementById('searchInput').addEventListener('input', function (e) {
        const term = e.target.value.toLowerCase().trim();
        const items = document.querySelectorAll('#sortableList li[data-id]');
        items.forEach(function (item) {
            const text = item.textContent.toLowerCase();
            item.style.display = text.includes(term) ? '' : 'none';
        });
    });

    function printTable() {
        window.print();
    }

    function exportTable() {
        alert('Dışa aktarma yakında.');
    }
</script>
@endsection