@extends('partials.layout')

@section('title','Editar estación')
@section('subtitle','Actualizar estación')

@section('back')
    <a class="btn" href="{{ route('estaciones.index') }}">← Volver</a>
@endsection

@section('content')
    <form method="POST" action="{{ route('estaciones.update',$item->id_estacion) }}">
        @csrf
        @method('PUT')

        <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px">
            <div>
                <label style="display:block;font-weight:700;margin-bottom:6px">Nombre</label>
                <input name="nombre" type="text" value="{{ old('nombre',$item->nombre) }}" required style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:10px">
            </div>
            <div>
                <label style="display:block;font-weight:700;margin-bottom:6px">Estado</label>

                <label style="display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #e2e8f0;border-radius:10px;background:#fff">
                    <input
                        type="checkbox"
                        name="estado_checkbox"
                        value="1"
                        {{ (string)old('estado',$item->estado) === '1' ? 'checked' : '' }}
                    >
                    <span>Activo</span>
                </label>

                <input type="hidden" name="estado" id="estado_hidden" value="{{ old('estado',$item->estado) }}">

                <script>
                    (function(){
                        const cb = document.querySelector('input[name="estado_checkbox"]');
                        const hidden = document.getElementById('estado_hidden');
                        if(!cb || !hidden) return;
                        const sync = () => hidden.value = cb.checked ? '1' : '0';
                        cb.addEventListener('change', sync);
                        sync();
                    })();
                </script>
            </div>
            <div style="grid-column:1/-1">
                <label style="display:block;font-weight:700;margin-bottom:6px">Descripción</label>
                <textarea name="descripcion" style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:10px">{{ old('descripcion',$item->descripcion) }}</textarea>
            </div>
        </div>

        <div style="margin-top:14px;display:flex;gap:10px;flex-wrap:wrap">
            <button class="btn primary" type="submit">Actualizar</button>
            <a class="btn" href="{{ route('estaciones.index') }}">Cancelar</a>
        </div>
    </form>
@endsection