@extends('layouts.app')
@section('titulo', (!$model->exists ? 'Creando' : 'Editando') . ' Colonia')

@section('content')
    @php
        $metodo = !$model->exists ? 'POST' : 'PATCH';
        $ruta = !$model->exists ? route('gestion.colonias.store') : route('gestion.colonias.update', [$model->id]);
    @endphp
    {{ html()->modelForm($model, $metodo, $ruta)->open() }}
    <div class="row">
        <div class="col">
            <div class="form-group">
                <label for="nombre">Nombre</label>
                {{ html()->text('Nombre')->class('form-control')->attributes(['oninput' => 'this.value = this.value.toUpperCase()']) }}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="form-group">
                <label for="idCiudad">Ciudad</label>
                <select name="idCiudad" id="idCiudad" class="form-control w-100">
                    <option value="">Seleccione una ciudad</option>
                    @foreach ($ciudades as $ciudad)
                        <option value="{{ $ciudad->id }}" {{ $model->idCiudad == $ciudad->id ? 'selected' : '' }}>
                            {{ $ciudad->Nombre }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            {{ html()->submit('<i class="far fa-save"></i> ' . (!$model->exists ? 'Guardar' : 'Editar'))->class('btn btn-primary') }}
        </div>
    </div>
    {{ html()->closeModelForm() }}
@endsection
@section('css')
    <link rel="stylesheet" media="all" type="text/css" href="{{ asset('build/css/select2.min.css') }}" />
    <link rel="stylesheet" media="all" type="text/css" href="{{ asset('build/css/select2-bootstrap4.min.css') }}" />
    @if (Auth::user()->tema == 'oscuro')
        <style>
            .select2-search {
                background-color: #343A40 !important;
            }

            .select2-search input {
                color: #ffffff !important;
                background-color: #343A40 !important;
            }

            .select2-results {
                background-color: #343A40 !important;
            }
        </style>
    @endif
@endsection
@section('js')
    <script src="{{ asset('build/js/select2.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('#idCiudad').select2({
                theme: 'bootstrap4',
                language: 'es',
            });
        });
    </script>
@endsection