@extends('layouts.app')

@section('content')
    <div class="bgc-white p-20 bd">
    <h3>Editar Direccion Municipal</h3>

    <form action="{{ route('municipalDirecciones.update', ['municipalDireccion' => $municipalDireccion]) }}" method="post">
        @csrf
        @method('PUT')

        <b-card>
            @component('components.form-group', ['titulo' => 'Nombre', 'nombre' => 'nombre'])
                <b-input id="nombre" name="nombre" value="{{ old('nombre', $municipalDireccion->nombre) }}" required></b-input>
            @endcomponent

            @component('components.form-group', ['titulo' => 'Puesto', 'nombre' => 'puesto'])
                <b-input id="puesto" name="puesto" value="{{ old('puesto', $municipalDireccion->puesto) }}" required></b-input>
            @endcomponent

            @component('components.form-group', ['titulo' => 'Color', 'nombre' => 'color'])
                <chrome-picker v-model="color"></chrome-picker>
                <input :value="colorHex" type="text" name="color" readonly>
            @endcomponent

            <b-form-group>
                <button class="btn btn-primary">Guardar</button>
            </b-form-group>
        </b-card>
    </form>
    </div>
@endsection

@push('pre-scripts')
    <script>
    window.pageMix.push({
        data () {
            return {
                color: '{{ old('color', $municipalDireccion->color) }}'
            }
        },

        computed: {
            colorHex() {
                if (typeof this.color === "string") {
                    return this.color
                }

                return this.color.hex
            }
        }
    })
    </script>
@endpush