@extends('partials.layout')

@section('title','Crear manguera')
@section('subtitle','Agregar un nuevo registro en mangueras')

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

@section('content')
    <form method="POST" action="{{ route('mangueras.store') }}">
        @csrf

        <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px">
            <div style="grid-column:1/-1">
                <label style="display:block;font-weight:700;margin-bottom:6px">Cara</label>
                <select name="id_cara" required style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:10px">
                    <option value="">-- Seleccione --</option>
                    @foreach($caras as $c)
                        <option value="{{ $c->id_cara }}" {{ old('id_cara')==$c->id_cara?'selected':'' }}>
                            {{ $c->nombre }} ({{ $c->estacion?->nombre ?? '' }})
                        </option>
                    @endforeach
                </select>
            </div>

            <div>
                <label style="display:block;font-weight:700;margin-bottom:6px">Tipo combustible</label>
                <select name="id_tipo_combustible" required style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:10px">
                    <option value="">-- Seleccione --</option>
                    @foreach($tipos as $t)
                        <option value="{{ $t->id_tipo_combustible }}" {{ old('id_tipo_combustible')==$t->id_tipo_combustible?'selected':'' }}>
                            {{ $t->nombre }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div>
                <label style="display:block;font-weight:700;margin-bottom:6px">Número manguera</label>
                <input name="numero_manguera" type="text" value="{{ old('numero_manguera') }}" required style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:10px">

            </div>

            <div style="grid-column:1/-1">
                <label style="display:flex;gap:10px;align-items:center;justify-content:flex-start;font-weight:700;margin-bottom:6px">
                    Estado
                    <input type="checkbox" name="estado" value="1" style="transform:scale(1.1)" {{ old('estado') == 1 || old('estado') === '1' ? 'checked' : '' }}>
                </label>
            </div>
        </div>

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