@extends('layouts.app')

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

    <!-- Create Tracking Section Modal -->
    <div id="createSectionModal"
        class="fixed inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-50">
        <div class="w-full max-w-md p-6 bg-white rounded-lg shadow-xl">
            <!-- Modal Header -->
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-stone-900">Yeni Takip Ekranı Ekle</h3>
                <button onclick="closeCreateSectionModal()" class="text-stone-400 hover:text-stone-600">
                    <span class="text-2xl material-symbols-rounded">close</span>
                </button>
            </div>

            <!-- Modal Body -->
            <form action="{{ route('tracking-sections.store') }}" method="POST" class="space-y-4">
                @csrf
                <div>
                    <label for="sectionName" class="block mb-1 text-sm font-medium text-stone-700">Ekran Adı</label>
                    <input type="text" id="sectionName" name="name" required maxlength="255"
                        class="w-full px-3 py-2 border rounded-md bg-stone-50 border-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-500"
                        placeholder="Örn: Mutfak, Bar, İçecekler" />
                </div>

                <div>
                    <label for="sectionPrinter" class="block mb-1 text-sm font-medium text-stone-700">Yazıcı
                        (Opsiyonel)</label>
                    <select id="sectionPrinter" name="printer_id"
                        class="w-full px-3 py-2 border rounded-md bg-stone-50 border-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-500">
                        <option value="">— Yazıcı atanmasın —</option>
                        @foreach ($printers as $printer)
                        <option value="{{ $printer->id }}">
                            {{ $printer->name }}@if ($printer->display_name) ({{ $printer->display_name }}) @endif
                        </option>
                        @endforeach
                    </select>
                </div>

                <div class="flex items-center">
                    <input type="hidden" name="printer_enabled" value="0" />
                    <input type="checkbox" id="sectionPrinterEnabled" name="printer_enabled" value="1"
                        class="w-4 h-4 text-stone-600 border-stone-300 rounded focus:ring-stone-500" />
                    <label for="sectionPrinterEnabled" class="ml-2 text-sm font-medium text-stone-700">Yazıcıyı
                        etkinleştir</label>
                </div>

                <div class="flex justify-end gap-2">
                    <button type="button" onclick="closeCreateSectionModal()"
                        class="px-4 py-2 text-sm font-medium transition-colors border rounded-md text-stone-700 border-stone-300 hover:bg-stone-50">
                        VAZGEÇ
                    </button>
                    <button type="submit"
                        class="px-4 py-2 text-sm font-medium text-white transition-colors rounded-md bg-stone-600 hover:bg-stone-700">
                        OLUŞTUR
                    </button>
                </div>
            </form>
        </div>
    </div>

    <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">
                        TAKİP EKRANLARI
                    </div>
                    <div class="flex-1">
                        <input type="text" id="searchInput" placeholder="Takip ekranı 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('printers.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"
                        title="Yazıcılar">
                        <span class="material-symbols-rounded text-stone-400">print</span>
                    </a>
                    <a href="#" onclick="openCreateSectionModal(); 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"
                        title="Yeni Takip Ekranı Ekle">
                        <span class="material-symbols-rounded text-stone-400">add</span>
                    </a>
                </nav>
            </div>
        </header>
    </div>

    <div id="section-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 ($sections as $section)
                <li class="flex items-center px-4 py-2 border rounded gap-x-2 text-stone-500 bg-stone-50 hover:bg-stone-100"
                    data-id="{{ $section->id }}">
                    <span class="text-stone-400">
                        <span class="mt-1 material-symbols-rounded">
                            featured_play_list
                        </span>
                    </span>
                    <span class="text-xs">{{ $section->id }}</span>
                    <span class="font-medium text-stone-800">{{ $section->name }}</span>

                    {{-- Printer info --}}
                    @if ($section->printer)
                    <span
                        class="ml-2 inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-medium bg-stone-100 text-stone-600 border border-stone-200">
                        <span class="material-symbols-rounded text-[12px]">print</span>
                        {{ $section->printer->name }}
                    </span>
                    @if ($section->printer_enabled)
                    <span
                        class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-medium bg-green-50 text-green-600 border border-green-200">
                        <span class="material-symbols-rounded text-[12px]">check_circle</span>
                        Yazıcı aktif
                    </span>
                    @else
                    <span
                        class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-medium bg-stone-50 text-stone-400 border border-stone-200">
                        <span class="material-symbols-rounded text-[12px]">cancel</span>
                        Yazıcı pasif
                    </span>
                    @endif
                    @else
                    <span
                        class="ml-2 inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-medium bg-amber-50 text-amber-600 border border-amber-200">
                        <span class="material-symbols-rounded text-[12px]">link_off</span>
                        Yazıcı atanmamış
                    </span>
                    @endif

                    <div class="flex items-center ml-auto gap-x-2">
                        <a href="{{ route('tracking-sections.edit', $section->id) }}"
                            class="transition-colors text-stone-400 hover:text-stone-600" title="Yazıcı eşleştir">
                            <span class="text-sm material-symbols-rounded">edit</span>
                        </a>
                        <form action="{{ route('tracking-sections.destroy', $section->id) }}" method="POST"
                            onsubmit="return confirm('Bu takip ekranını arşivlemek istediğinizden emin misiniz?');"
                            class="inline">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-stone-400 hover:text-rose-600 transition-colors"
                                title="Arşivle">
                                <span class="text-sm material-symbols-rounded">archive</span>
                            </button>
                        </form>
                    </div>
                </li>
                @empty
                <li class="px-4 py-8 text-center text-stone-500">
                    <span class="mb-2 text-4xl material-symbols-rounded">monitor_heart</span>
                    <p>Bu işletmeye ait takip ekranı bulunamadı.</p>
                    <button onclick="openCreateSectionModal()"
                        class="mt-2 text-stone-600 hover:text-stone-800 underline">
                        İlk takip ekranınızı ekleyin
                    </button>
                </li>
                @endforelse
            </ul>
        </div>
    </div>
</div>

<script>
    // Modal functions
    function openCreateSectionModal() {
        document.getElementById('createSectionModal').classList.remove('hidden');
    }

    function closeCreateSectionModal() {
        document.getElementById('createSectionModal').classList.add('hidden');
    }

    // 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';
        });
    });
</script>
@endsection