@extends('layouts.app')
@section('title', 'Printers')

@section('content')
<div class="space-y-6" x-data="{ ...modal() }">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="text-xl font-bold">Printers</h1>
            <p class="text-sm text-ink-muted">Kitchen tickets auto-print to a network thermal printer per station. Receipts print through the browser's own dialog unless you point them at a network printer too.</p>
        </div>
        <button class="btn-primary btn-sm" x-on:click="$dispatch('open-modal-add-printer')"><i data-lucide="plus" class="w-3.5 h-3.5"></i> Add printer</button>
    </div>

    <div class="card overflow-x-auto">
        <table class="data-table">
            <thead><tr><th>Name</th><th>Type</th><th>Station</th><th>Connection</th><th>Paper</th><th>Status</th><th></th></tr></thead>
            <tbody>
                @forelse ($printers as $printer)
                    <tr>
                        <td class="font-medium">{{ $printer->name }}</td>
                        <td><x-badge color="teal">{{ ucwords(str_replace('_', ' ', $printer->type)) }}</x-badge></td>
                        <td>{{ $printer->station ?? '— (catch-all)' }}</td>
                        <td>
                            @if ($printer->connection_type === 'network')
                                {{ $printer->ip_address }}:{{ $printer->port }}
                            @else
                                <span class="text-ink-muted">Browser print</span>
                            @endif
                        </td>
                        <td>{{ $printer->paper_width_mm }}mm</td>
                        <td><x-badge :color="$printer->is_active ? 'emerald' : 'slate'">{{ $printer->is_active ? 'Active' : 'Disabled' }}</x-badge></td>
                        <td class="text-right whitespace-nowrap">
                            @if ($printer->connection_type === 'network')
                                <form method="POST" action="{{ route('settings.printers.test', $printer) }}" class="inline">
                                    @csrf
                                    <button class="btn-ghost btn-sm">Test print</button>
                                </form>
                            @endif
                            <form method="POST" action="{{ route('settings.printers.destroy', $printer) }}" class="inline" onsubmit="return confirm('Remove this printer?')">
                                @csrf @method('DELETE')
                                <button class="btn-ghost btn-sm text-danger">Remove</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="7" class="text-center text-ink-muted py-8">No printers configured yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <x-modal id="add-printer" title="Add printer">
        <form method="POST" action="{{ route('settings.printers.store') }}" id="add-printer-form" class="space-y-4">
            @csrf
            <div><label class="field-label">Name</label><input type="text" name="name" class="input" required placeholder="e.g. Grill Station KOT"></div>
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="field-label">Type</label>
                    <select name="type" class="input">
                        <option value="kitchen">Kitchen (KOT)</option>
                        <option value="bar">Bar order (BOT)</option>
                        <option value="receipt">Receipt</option>
                        <option value="bar_receipt">Bar Receipt</option>
                    </select>
                </div>
                <div>
                    <label class="field-label">Kitchen station (optional)</label>
                    <input type="text" name="station" class="input" placeholder="Grill, Main Kitchen...">
                </div>
            </div>
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="field-label">Connection</label>
                    <select name="connection_type" class="input" x-data x-on:change="$el.closest('form').querySelector('.network-fields').style.display = $el.value === 'network' ? 'grid' : 'none'">
                        <option value="network">Network (auto-print)</option>
                        <option value="browser">Browser print</option>
                    </select>
                </div>
                <div>
                    <label class="field-label">Paper width</label>
                    <select name="paper_width_mm" class="input">
                        <option value="80">80mm</option>
                        <option value="58">58mm</option>
                    </select>
                </div>
            </div>
            <div class="network-fields grid grid-cols-2 gap-3">
                <div><label class="field-label">Printer IP address</label><input type="text" name="ip_address" class="input" placeholder="192.168.1.50"></div>
                <div><label class="field-label">Port</label><input type="number" name="port" value="9100" class="input"></div>
            </div>
            <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="is_active" value="1" checked class="rounded border-border text-primary-500"> Active</label>
        </form>
        <x-slot:footer>
            <button class="btn-secondary" x-on:click="open = false">Cancel</button>
            <button form="add-printer-form" class="btn-primary">Save printer</button>
        </x-slot:footer>
    </x-modal>
</div>
@endsection