@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">
                    <a href="{{ route('tracking-sections.index') }}" type="button"
                        class="flex items-center content-center gap-1 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 hover:from-stone-700 hover:to-stone-600 transition-all">
                        <span class="text-sm material-symbols-rounded">arrow_back</span>
                        TAKİP EKRANLARI
                    </a>
                    <div class="flex-1 px-3.5 py-2 text-sm text-stone-500">
                        {{ $section->name }} — Yazıcı Eşleştirme
                    </div>
                </nav>
            </div>
        </header>
    </div>

    <div class="max-w-2xl mt-4">
        <div class="p-6 bg-white rounded-lg shadow">
            @if (session()->has('error'))
            <div class="px-4 py-2 mb-4 rounded text-rose-700 bg-rose-100">
                {{ session('error') }}
            </div>
            @endif

            {{-- Validation errors --}}
            @if ($errors->any())
            <div class="px-4 py-2 mb-4 rounded text-rose-700 bg-rose-100">
                <ul class="ml-4 list-disc">
                    @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            @endif

            <form action="{{ route('tracking-sections.update', $section->id) }}" method="POST" class="space-y-6">
                @csrf
                @method('PUT')

                {{-- Section name (editable) --}}
                <div>
                    <label for="name" class="block mb-1 text-sm font-medium text-stone-700">Takip Ekranı Adı</label>
                    <div class="flex items-center gap-2">
                        <span class="material-symbols-rounded text-stone-400">featured_play_list</span>
                        <input type="text" id="name" name="name" required maxlength="255"
                            value="{{ old('name', $section->name) }}"
                            class="flex-1 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" />
                        <span class="text-xs text-stone-400">#{{ $section->id }}</span>
                    </div>
                </div>

                {{-- Printer selection --}}
                <div>
                    <label for="printer_id" class="block mb-1 text-sm font-medium text-stone-700">
                        Yazıcı Seçimi
                    </label>
                    @if ($printers->isEmpty())
                    <div
                        class="flex items-center gap-2 px-3 py-3 text-sm border rounded-md bg-amber-50 border-amber-300 text-amber-700">
                        <span class="material-symbols-rounded text-amber-500">warning</span>
                        Bu işletmeye ait yazıcı bulunamadı.
                        <a href="{{ route('printers.index') }}" class="ml-1 underline hover:text-amber-900">Yazıcıları
                            görüntüle</a>
                    </div>
                    <input type="hidden" name="printer_id" value="" />
                    @else
                    <select id="printer_id" 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 }}" @if(old('printer_id', $section->printer_id) == $printer->id)
                            selected @endif>
                            {{ $printer->name }}@if ($printer->display_name) ({{ $printer->display_name }}) @endif
                        </option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-stone-400">Bu takip ekranından gelen siparişler seçilen yazıcıda
                        basılır.</p>
                    @endif
                </div>

                {{-- Printer enabled toggle --}}
                <div>
                    <label class="flex items-center gap-3 cursor-pointer">
                        <input type="hidden" name="printer_enabled" value="0" />
                        <input type="checkbox" id="printer_enabled" name="printer_enabled" value="1"
                            class="w-4 h-4 rounded text-stone-600 border-stone-300 focus:ring-stone-500"
                            @if(old('printer_enabled', $section->printer_enabled)) checked @endif />
                        <span class="text-sm font-medium text-stone-700">Yazıcıyı etkinleştir</span>
                    </label>
                    <p class="mt-1 text-xs ml-7 text-stone-400">İşaretli olduğunda bu ekran için yazıcı çıktısı aktif
                        olur.</p>
                </div>

                {{-- Submit --}}
                <div class="flex justify-end gap-2 pt-2 border-t border-stone-200">
                    <a href="{{ route('tracking-sections.index') }}"
                        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Ç
                    </a>
                    <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">
                        KAYDET
                    </button>
                </div>
            </form>

            {{-- Archive (separate form, OUTSIDE the update form to avoid nested form bug) --}}
            <div class="mt-4 pt-4 border-t border-stone-200">
                <form action="{{ route('tracking-sections.destroy', $section->id) }}" method="POST"
                    onsubmit="return confirm('Bu takip ekranını arşivlemek istediğinizden emin misiniz?');">
                    @csrf
                    @method('DELETE')
                    <button type="submit"
                        class="inline-flex items-center gap-1 px-4 py-2 text-sm font-medium transition-colors border rounded-md text-rose-600 border-rose-300 hover:bg-rose-50">
                        <span class="material-symbols-rounded text-sm">archive</span>
                        ARŞİVLE
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection