@extends('adminlte::page')

@section('plugins.Sweetalert2', true)
@section('plugins.Select1', true)

@section('title', 'Intranet | Editar Contrato Comercial')

@section('content_header')
    <div class="container-fluid">

    </div>
@stop

@section('content')
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-lg-6">

                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Editar Contrato Comercial</h3>
                    </div>

                    <form id="formularioDeContratoComercial">
                        @csrf
                        @method('put')

                        <div class="card-body">
                            <div class="form-group">
                                <label for="campoNombreDelContratoComercial">Nombre Contrato Comercial</label>
                                <input type="text" class="form-control" id="campoNombreDelContratoComercial" name="contrato" value="{{ old('contrato',$contratoComercial->contrato) }}">
                                <div class="invalid-feedback" id="validacionCampoNombreDelContratoComercial">

                                </div>
                            </div>

                            <div class="form-group">
                                <label for="campoNumeroDelContratoComercial">Numero Contrato Comercial</label>
                                <input type="text" class="form-control" id="campoNumeroDelContratoComercial" name="numero_contrato" value="{{ old('numero_contrato',$contratoComercial->numero_contrato) }}">
                                <div class="invalid-feedback" id="validacionCampoNumeroDelContratoComercial">

                                </div>
                            </div>

                            <div class="form-group">
                                <label>Centro de Costo</label>
                                <select class="form-control listaDespegableConBuscador" id="campoCentroDeCostoDelContratoComercial" name="id_centro_costo[]" data-live-search="true" multiple="true" data-none-selected-text="--Seleccionar Centro De Costo--">
                                    @foreach ($centrosDeCostos as $cc)
                                        @php
                                            $centroCostoSeleccionado = false;
                                        @endphp
                                        @foreach ($contratoComercial->detalleContratoComercial as $detalle)
                                            @if (old('id_centro_costo', $cc->id) == $detalle->id_centro_costo)
                                                @php
                                                    $centroCostoSeleccionado = true;
                                                @endphp
                                            @endif
                                        @endforeach
                                        @if ($centroCostoSeleccionado == true)
                                            <option selected value="{{ $cc->id }}">{{ $cc->centro_costo }}</option>
                                        @else
                                            <option value="{{ $cc->id }}">{{ $cc->centro_costo }}</option>
                                        @endif
                                    @endforeach
                                </select>
                                <div class="invalid-feedback" id="validacionCampoCentroDeCostoDelContratoComercial">

                                </div>
                            </div>

                            <div class="form-group">
                                <label>Estado</label>
                                <select class="form-control listaDespegableConBuscador" id="campoEstadoDelContratoComercial" name="estado" data-live-search="true">
                                    <option value="">--Seleccionar Estado--</option>
                                    @foreach ($estados as $estado)
                                        @if (old('estado',$contratoComercial->estado) == $estado)
                                            <option selected value="{{ $estado }}">{{ $estado }}</option>
                                        @else
                                            <option value="{{ $estado }}">{{$estado }}</option>
                                        @endif
                                    @endforeach
                                </select>
                                <div class="invalid-feedback" id="validacionCampoEstadoDelContratoComercial">

                                </div>
                            </div>

                        </div>

                        <div class=" card-footer">
                            <button type="button" class="btn btn-primary" id="botonDeEdicion" onclick="editarContratoComercial()"><i class="fas fa-edit" style="margin-right: 2px;"></i> Editar Contrato Comercial </button>
                            <a href="{{ route('contrato-comercial.index') }}" role="button" class="btn btn-secondary"><i class="fas fa-arrow-alt-circle-left" style="margin-right: 2px;"></i> Volver</a>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
@stop

@section('footer')
    <div class="float-right d-none d-sm-inline">
        Intranet
    </div>
    <strong>Copyright © 2021 <a href="http://guinezingenieria.cl/">GuiñezIngeniería.cl</a>.</strong>
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css/estilo-generico.css') }}">
@stop

@section('js')
    <script src="{{ asset('js/funcionalidades-genericas.js') }}"></script>

    <script>
        $('#campoCentroDeCostoDelContratoComercial').selectpicker({
            dropupAuto: false,
        });
        $('#campoEstadoDelContratoComercial').selectpicker({
            dropupAuto: false,
        });
    </script>

    <script>
        function validarCampos(data) {
            if (typeof data.responseJSON.errors.contrato !== 'undefined') {
                document.getElementById("campoNombreDelContratoComercial").setAttribute("class", "form-control is-invalid");
                document.getElementById("validacionCampoNombreDelContratoComercial").innerHTML = data.responseJSON.errors.contrato;
            } else {
                document.getElementById("campoNombreDelContratoComercial").setAttribute("class", "form-control is-valid");
                document.getElementById("validacionCampoNombreDelContratoComercial").innerHTML = "";
            }

            if (typeof data.responseJSON.errors.numero_contrato !== 'undefined') {
                document.getElementById("campoNumeroDelContratoComercial").setAttribute("class", "form-control is-invalid");
                document.getElementById("validacionCampoNumeroDelContratoComercial").innerHTML = data.responseJSON.errors.numero_contrato;
            } else {
                document.getElementById("campoNumeroDelContratoComercial").setAttribute("class", "form-control is-valid");
                document.getElementById("validacionCampoNumeroDelContratoComercial").innerHTML = "";
            }

            if (typeof data.responseJSON.errors.id_centro_costo !== 'undefined') {
                document.getElementById("campoCentroDeCostoDelContratoComercial").classList.remove('input-success-icon');
                document.getElementById("campoCentroDeCostoDelContratoComercial").classList.add('input-error-icon');
                document.getElementById("validacionCampoCentroDeCostoDelContratoComercial").innerHTML = data.responseJSON.errors.id_centro_costo;
                document.getElementById("validacionCampoCentroDeCostoDelContratoComercial").style.display = "block";
            } else {
                document.getElementById("campoCentroDeCostoDelContratoComercial").classList.remove('input-error-icon');
                document.getElementById("campoCentroDeCostoDelContratoComercial").classList.add('input-success-icon');
                document.getElementById("validacionCampoCentroDeCostoDelContratoComercial").innerHTML = "";
                document.getElementById("validacionCampoCentroDeCostoDelContratoComercial").style.display = "none";
            }

            if (typeof data.responseJSON.errors.estado !== 'undefined') {
                document.getElementById("campoEstadoDelContratoComercial").classList.remove('input-success-icon');
                document.getElementById("campoEstadoDelContratoComercial").classList.add('input-error-icon');
                document.getElementById("validacionCampoEstadoDelContratoComercial").innerHTML = data.responseJSON.errors.estado;
                document.getElementById("validacionCampoEstadoDelContratoComercial").style.display = "block";
            } else {
                document.getElementById("campoEstadoDelContratoComercial").classList.remove('input-error-icon');
                document.getElementById("campoEstadoDelContratoComercial").classList.add('input-success-icon');
                document.getElementById("validacionCampoEstadoDelContratoComercial").innerHTML = "";
                document.getElementById("validacionCampoEstadoDelContratoComercial").style.display = "none";
            }
        }

        function limpiarCampos() {
            document.getElementById("validacionCampoNombreDelContratoComercial").innerHTML = "";
            document.getElementById("campoNombreDelContratoComercial").setAttribute("class", "form-control");

            document.getElementById("validacionCampoNumeroDelContratoComercial").innerHTML = "";
            document.getElementById("campoNumeroDelContratoComercial").setAttribute("class", "form-control");

            document.getElementById("validacionCampoCentroDeCostoDelContratoComercial").innerHTML = "";
            document.getElementById("campoCentroDeCostoDelContratoComercial").classList.remove('input-success-icon');
            document.getElementById("campoCentroDeCostoDelContratoComercial").classList.remove('input-error-icon');
            document.getElementById("validacionCampoCentroDeCostoDelContratoComercial").style.display = "none";

            document.getElementById("validacionCampoEstadoDelContratoComercial").innerHTML = "";
            document.getElementById("campoEstadoDelContratoComercial").classList.remove('input-success-icon');
            document.getElementById("campoEstadoDelContratoComercial").classList.remove('input-error-icon');
            document.getElementById("validacionCampoEstadoDelContratoComercial").style.display = "none";
        }

        function editarContratoComercial() {
            document.getElementById("botonDeEdicion").setAttribute("disabled", true);
            let datosFormulario = $("#formularioDeContratoComercial").serialize();
            generarLoading('{{ asset('img/logo.png') }}')

            $.ajax({
                type: 'POST',
                datatype: 'json',
                url: '{{ route('contrato-comercial.update',$contratoComercial) }}',
                data: datosFormulario,
                success: function(data) {
                    limpiarCampos();

                    Swal.fire({
                        icon: 'success',
                        title: '¡Contrato Comercial Editada!',
                        text: 'El contrato comercial ' + data.contrato + ' se edito con éxito',
                        confirmButtonColor: "#448aff",
                        confirmButtonText: "Confirmar"
                    })

                    document.getElementById("botonDeEdicion").removeAttribute("disabled");
                    eliminarLoading()
                },
                error: function(data) {
                    console.log(data)
                    validarCampos(data)
                    Swal.fire({
                        icon: 'error',
                        title: '¡Errores en el Formulario!',
                        text: 'Revise los campos del formulario. Hay campos incompletos o que no cumple con los requisitos establecidos. Asegurase de completar todos los campos obligatorios y de corregir cualquier error señalado.',
                        confirmButtonColor: "#448aff",
                        confirmButtonText: "Confirmar"
                    })
                    document.getElementById("botonDeEdicion").removeAttribute("disabled");
                    eliminarLoading()
                }
            })
        }
    </script>
@stop