@extends('layouts.app')

@section('content')
    <div class="max-w-3xl mx-auto py-6 sm:px-6 lg:px-8">
        <div class="bg-gray-800 rounded-lg shadow-xl p-8 border border-gray-700">
            <h1 class="text-2xl font-bold text-white mb-6">Editar Impresora</h1>

            <form action="{{ route('printers.update', $printer) }}" method="POST">
                @csrf
                @method('PUT')

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="mb-4">
                        <label for="nombre" class="block text-gray-300 font-bold mb-2">Nombre Identificador</label>
                        <input type="text" name="nombre" id="nombre" value="{{ old('nombre', $printer->nombre) }}"
                            class="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-3 text-white focus:outline-none focus:ring-2 focus:ring-amber-500"
                            required>
                    </div>

                    <div class="mb-4">
                        <label for="tipo" class="block text-gray-300 font-bold mb-2">Tipo de Conexión</label>
                        <select name="tipo" id="tipo"
                            class="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-3 text-white focus:outline-none focus:ring-2 focus:ring-amber-500"
                            onchange="toggleIPFields()">
                            <option value="network" {{ $printer->tipo === 'network' ? 'selected' : '' }}>Red (IP)</option>
                            <option value="windows" {{ $printer->tipo === 'windows' ? 'selected' : '' }}>Windows (Sistema)
                            </option>
                            <option value="usb" {{ $printer->tipo === 'usb' ? 'selected' : '' }}>USB Directo</option>
                        </select>
                    </div>
                </div>

                <div id="connectionDetails" class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div id="ipContainer">
                        <label for="ip" id="ipLabel" class="block text-gray-300 font-bold mb-2">Dirección IP / Ruta</label>
                        <input type="text" name="ip" id="ip" value="{{ old('ip', $printer->ip) }}"
                            class="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-3 text-white focus:outline-none focus:ring-2 focus:ring-amber-500"
                            placeholder="192.168.1.100 o \\NombrePC\Impresora">
                        <p id="pathHint" class="text-[10px] text-gray-500 mt-1 hidden italic">
                            Para impresoras en otras computadoras: comparta la impresora y use la ruta UNC (ej:
                            \\PC-LOCAL\TM-U220).
                        </p>
                    </div>
                    <div id="portContainer">
                        <label for="puerto" class="block text-gray-300 font-bold mb-2">Puerto</label>
                        <input type="number" name="puerto" id="puerto" value="{{ old('puerto', $printer->puerto) }}"
                            class="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-3 text-white focus:outline-none focus:ring-2 focus:ring-amber-500">
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div class="flex items-center">
                        <input type="hidden" name="es_predeterminada" value="0">
                        <input type="checkbox" name="es_predeterminada" id="es_predeterminada" value="1" {{ $printer->es_predeterminada ? 'checked' : '' }}
                            class="h-4 w-4 text-amber-500 focus:ring-amber-500 border-gray-600 rounded bg-gray-700">
                        <label for="es_predeterminada" class="ml-2 block text-sm text-gray-300">Impresora
                            predeterminada</label>
                    </div>
                    <div class="flex items-center">
                        <input type="hidden" name="activa" value="0">
                        <input type="checkbox" name="activa" id="activa" value="1" {{ $printer->activa ? 'checked' : '' }}
                            class="h-4 w-4 text-blue-500 focus:ring-blue-500 border-gray-600 rounded bg-gray-700">
                        <label for="activa" class="ml-2 block text-sm text-gray-300">Impresora activa</label>
                    </div>

                    <div class="flex items-center">
                        <input type="hidden" name="use_browser" value="0">
                        <input type="checkbox" name="use_browser" id="use_browser" value="1" {{ $printer->use_browser ? 'checked' : '' }}
                            class="h-4 w-4 text-purple-500 focus:ring-purple-500 border-gray-600 rounded bg-gray-700">
                        <label for="use_browser" class="ml-2 block text-sm text-gray-300">
                            Usar Impresión de Navegador (Ventana emergente)
                        </label>
                    </div>
                </div>

                <div class="mb-6 p-4 bg-gray-900/30 rounded-lg border border-gray-700">
                    <p class="text-xs text-gray-400">
                        <strong>¿Cuál elegir?</strong><br>
                        - <strong>Desactivado (Silencioso):</strong> Se imprime directamente desde el servidor sin abrir
                        ninguna ventana (Recomendado para cobro rápido).<br>
                        - <strong>Activado (Navegador):</strong> Abre la ventana de impresión del navegador (Útil si la
                        impresora no está conectada directamente al servidor).
                    </p>
                </div>

                <div class="flex items-center justify-end space-x-4">
                    <a href="{{ route('printers.index') }}"
                        class="text-gray-400 hover:text-white transition-colors">Cancelar</a>
                    <button type="submit"
                        class="bg-amber-500 hover:bg-amber-400 text-gray-900 font-bold py-2 px-6 rounded shadow transition duration-150">
                        Actualizar Impresora
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
        function toggleIPFields() {
            const tipo = document.getElementById('tipo').value;
            const ipLabel = document.getElementById('ipLabel');
            const portContainer = document.getElementById('portContainer');
            const pathHint = document.getElementById('pathHint');
            const ipInput = document.getElementById('ip');

            if (tipo === 'network') {
                ipLabel.innerText = 'Dirección IP';
                ipInput.placeholder = '192.168.1.100';
                portContainer.classList.remove('hidden');
                pathHint.classList.add('hidden');
            } else {
                ipLabel.innerText = 'Ruta de Impresora (Local o Red)';
                ipInput.placeholder = '\\\\NombrePC\\Impresora';
                portContainer.classList.add('hidden');
                pathHint.classList.remove('hidden');
            }
        }
        // Init state
        toggleIPFields();
    </script>
@endsection