@extends('layouts.app')


@section('content')
<style type="text/css">
    .clearable{
  position: relative;
  display: inline-block;
}
.clearable input[type=text]{
  padding-right: 24px;
  width: 100%;
  box-sizing: border-box;
}
.clearable__clear{
  display: none;
  position: absolute;
  right:0; top:0;
  padding: 0 8px;
  font-style: normal;
  font-size: 1.2em;
  user-select: none;
  cursor: pointer;
}
.clearable input::-ms-clear {  /* Remove IE default X */
  display: none;
}
</style>
    <div class="images" v-viewer>
        <img src="{{ asset('img/facturas-proceso.png') }}">
    </div>
    <div class="bgc-white p-20 bd">
        <h3>D.A Devolución</h3>
        <br>
        <div class="row mb-3">
            <div class="col-12">

            <b-form-group horizontal label="N° Decreto Devolución">
                <input v-model="devo.n_decreto_devolucion" class="form-control" type="number" name="n_decreto_devolucion">
            </b-form-group>

            <b-form-group horizontal label="Fecha Decreto">
                <input v-model="devo.fecha_decreto" class="form-control" type="date" name="fecha_decreto">
            </b-form-group>

            <b-form-group horizontal label="Decreto Adjunto">
                <b-file v-model="devo.decreto_adjunto" accept=".jpeg, .png, .doc, .docx, .pdf, .zip"></b-file>
                <span>Formatos: jpeg, png, doc, docx, pdf, zip</span>
                <input-error :errors="errors" nombre="adjunto"></input-error>
            </b-form-group>

            <div class="d-flex justify-content-end">
                <button @click="SubirDev()" class="btn btn-primary">Registrar</button>
            </div>
        </div>
        </div>
        
    </div>

    

@endsection

@push('pre-scripts')
    <script>
        window.pageMix.push({
            data: () => ({
                loading: false,
                errors: {},
                status: null,
                devo: {},
                modal_dev: false,
                boleta_id: parseInt("{{ $boleta_id }}")
            }),

            created() {
                console.log(parseInt("{{ $boleta_id }}"))
            },

            methods: {
                SubirDevMod() {
                    this.devo.id = this.boleta_id
                    this.modal_dev = !this.modal_dev;
                },

                SubirDev() {
                    const formData = new FormData;
                    formData.append(
                        'boleta_id', 
                        this.boleta_id
                    );
                    formData.append(
                        'n_decreto_devolucion', 
                        this.devo.n_decreto_devolucion
                    );
                    formData.append(
                        'fecha_decreto', 
                        this.devo.fecha_decreto
                    );
                    formData.append(
                        'decreto_adjunto', 
                        this.devo.decreto_adjunto
                    );
                    formData.append(
                        'boleta_id', 
                        this.boleta_id
                    );

                    console.log(this.devo);
                    
                    this.$http.post(
                        '{{ route('boletasgarantia.form2') }}', 
                        formData
                    ).then(
                        res => {
                            console.log(res)
                            //$("#" + this.encuesta_id).hide();
                            window.location.reload();
                            //route('encuestas.index') }}'
                            //this.$router.push('boletasgarantia.index')
                        }
                    ).catch(
                        err => {
                            if (err.response.status === 500) {
                                this.status = err.response.data.status
                            }

                            if (err.response.status === 422) {
                                this.errors = err.response.data.errors
                            }
                        }
                    );
                    
                },

                

                
            }
        })
    </script>
@endpush