@extends('layouts.app')

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

    <form action="{{ route('compensacion-horas.decretos.store') }}" method="post">
        @csrf

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

                @component('components.form-group', ['titulo' => 'Fecha', 'nombre' => 'fecha'])
                    <datetime-picker v-model="fecha" id="fecha" type="date" lang="es" :first-day-of-week="1"
                                     format="DD/MM/YYYY" :clearable="false">
                    </datetime-picker>

                    <input name="fecha" :value="fechaHidden" type="hidden">
                @endcomponent
            </div>

            <div class="card-footer">
                <div class="d-flex justify-content-end">
                    <button class="btn btn-primary">Guardar</button>
                </div>
            </div>
        </div>
    </form>
    </div>
@endsection

@push('pre-scripts')
    <script>
        window.pageMix.push({
            data: () => ({
                fecha: ''
            }),

            mounted() {
                this.fecha = '{{ fechaFormato(old('fecha'), 'D M d Y H:i:s', 'carbon') }}'
            },

            computed: {
                fechaHidden() {
                    if (this.fecha === '') {
                        return ''
                    }

                    return this.$moment(this.fecha).format('YYYY-MM-DD')
                }
            }
        })
    </script>
@endpush