@extends('adminlte::page')

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

@section('title', 'Intranet |Editar Artículo')

@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-aspen">
                    <div class="card-header">
                        <h3 class="card-title">Editar Artículo</h3>
                    </div>

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

                        <div class="card-body">
                            <div class="form-group">
                                <label>Código Artículo</label>
                                <input style="cursor: not-allowed;" type="text" class="form-control" name="codigo_articulo" id="codigoArticulo" readonly="true" value="{{ old('codigo_articulo', $articulo->codigo_articulo) }}">
                                <div class="invalid-feedback" id="valicacionCampoCodigoArticulo">

                                </div>
                            </div>

                            <div class="form-group">
                                <label>Tipo Artículo</label>
                                <select class="form-control listaDespegableConBuscador" id="tipoArticulo" name="tipo_articulo" data-live-search="true" onchange="obtenerCantidadDeArticulosPorTipo()">
                                    <option value="">--Seleccionar Tipo De Artículo--</option>
                                    @foreach ($tiposDeArticulos as $tipoDeArticulo)
                                        @if (old('tipo_articulo', $articulo->tipo_articulo) == $tipoDeArticulo)
                                            <option selected value="{{ $tipoDeArticulo }}">{{ $tipoDeArticulo }}</option>
                                        @else
                                            <option value="{{ $tipoDeArticulo }}">{{ $tipoDeArticulo }}</option>
                                        @endif
                                    @endforeach
                                </select>
                                <div class="invalid-feedback" id="validarCampoTipoArticulo">

                                </div>
                            </div>

                            <div class="form-group">
                                <label>Tipo Artículo</label>
                                <select class="form-control listaDespegableConBuscador" id="tipoArticulo" name="tipo_articulo" data-live-search="true" onchange="obtenerCantidadDeArticulosPorTipo()">
                                    <option value="">--Seleccionar Tipo De Artículo--</option>
                                    @foreach ($tiposDeArticulos as $tipoDeArticulo)
                                        @if (old('tipo_articulo', $articulo->tipo_articulo) == $tipoDeArticulo)
                                            <option selected value="{{ $tipoDeArticulo }}">{{ $tipoDeArticulo }}</option>
                                        @else
                                            <option value="{{ $tipoDeArticulo }}">{{ $tipoDeArticulo }}</option>
                                        @endif
                                    @endforeach
                                </select>
                                <div class="invalid-feedback" id="validarCampoTipoArticulo">

                                </div>
                            </div>

                            <div class="form-group">
                                <label for="descripcion">Nombre Artículo</label>
                                <textarea class="form-control" id="descripcion" name="descripcion" rows="3">{{ old('descripcion', $articulo->descripcion) }}</textarea>
                                <div class="invalid-feedback" id="valicacionCampoDescripcion">

                                </div>
                            </div>

                            @if ($articulo->tipo_articulo == 'Artículo')
                                <div class="form-group" id="ContenedorCampoMarca" style="display: block;">
                                    <label>Marca</label>
                                    <input type="text" class="form-control" name="marca" id="marca" value="{{ old('marca', $articulo->marca) }}">
                                    <div class="invalid-feedback" id="valicacionCampoMarca">

                                    </div>
                                </div>

                                <div class="form-group" id="ContenedorCampoModelo" style="display: block;">
                                    <label>Modelo</label>
                                    <input type="text" class="form-control" name="modelo" id="modelo" value="{{ old('modelo', $articulo->modelo) }}">
                                    <div class="invalid-feedback" id="valicacionCampoModelo">

                                    </div>
                                </div>

                                <div class="form-group" id="ContenedorCampoTalla" style="display: none;">
                                    <label>Talla</label>
                                    <input type="text" class="form-control" name="talla" id="talla" value="{{ old('talla', $articulo->talla) }}">
                                    <div class="invalid-feedback" id="valicacionCampoTalla">

                                    </div>
                                </div>
                            @endif

                            @if ($articulo->tipo_articulo == 'Servicio')
                                <div class="form-group" id="ContenedorCampoMarca" style="display: none;">
                                    <label>Marca</label>
                                    <input type="text" class="form-control" name="marca" id="marca" value="{{ old('marca', $articulo->marca) }}">
                                    <div class="invalid-feedback" id="valicacionCampoMarca">

                                    </div>
                                </div>

                                <div class="form-group" id="ContenedorCampoModelo" style="display: none;">
                                    <label>Modelo</label>
                                    <input type="text" class="form-control" name="modelo" id="modelo" value="{{ old('modelo', $articulo->modelo) }}">
                                    <div class="invalid-feedback" id="valicacionCampoModelo">

                                    </div>
                                </div>

                                <div class="form-group" id="ContenedorCampoTalla" style="display: none;">
                                    <label>Talla</label>
                                    <input type="text" class="form-control" name="talla" id="talla" value="{{ old('talla', $articulo->talla) }}">
                                    <div class="invalid-feedback" id="valicacionCampoTalla">

                                    </div>
                                </div>
                            @endif

                            @if ($articulo->tipo_articulo == 'EPP')
                                <div class="form-group" id="ContenedorCampoMarca" style="display: block;">
                                    <label>Marca</label>
                                    <input type="text" class="form-control" name="marca" id="marca" value="{{ old('marca', $articulo->marca) }}">
                                    <div class="invalid-feedback" id="valicacionCampoMarca">

                                    </div>
                                </div>

                                <div class="form-group" id="ContenedorCampoModelo" style="display: block;">
                                    <label>Modelo</label>
                                    <input type="text" class="form-control" name="modelo" id="modelo" value="{{ old('modelo', $articulo->modelo) }}">
                                    <div class="invalid-feedback" id="valicacionCampoModelo">

                                    </div>
                                </div>

                                <div class="form-group" id="ContenedorCampoTalla" style="display: block;">
                                    <label>Talla</label>
                                    <input type="text" class="form-control" name="talla" id="talla" value="{{ old('talla', $articulo->talla) }}">
                                    <div class="invalid-feedback" id="valicacionCampoTalla">

                                    </div>
                                </div>
                            @endif

                            <div class="form-group">
                                <label>Clasificación</label>
                                <select class="form-control listaDespegableConBuscador" id="idClasificacion" name="id_clasificacion" data-live-search="true" onchange="obtenerCuentaDeGasto(this)">
                                    <option value="">--Seleccionar Clasificación--</option>
                                    @foreach ($clasificionDeArticulos as $clasificionDeArticulo)
                                        @if (old('id_clasificacion', $articulo->id_clasificacion) == $clasificionDeArticulo->id)
                                            <option selected value="{{ $clasificionDeArticulo->id }}">{{ $clasificionDeArticulo->clasificacion }}</option>
                                        @else
                                            <option value="{{ $clasificionDeArticulo->id }}">{{ $clasificionDeArticulo->clasificacion }}</option>
                                        @endif
                                    @endforeach
                                </select>
                                <div class="invalid-feedback" id="validarCampoClasificacion">

                                </div>
                            </div>

                            <div class="form-group">
                                <label>Cuenta De Gasto</label>
                                <input style="cursor: not-allowed;" type="text" class="form-control" readonly="true" id="nombreCuentaDeGasto" value="{{ old('id_cuenta_gasto', $articulo->cuentaDeGasto->cuenta_gasto) }}">
                                <div class="invalid-feedback" id="validarCampoCuentaGasto">

                                </div>
                            </div>

                            <input type="hidden" name="id_cuenta_gasto" id="valorCuentaDeGasto" value="{{ old('id_cuenta_gasto', $articulo->cuentaDeGasto->id) }}">

                            <div class="form-group">
                                <label>Unidad De Medición</label>
                                <select class="form-control listaDespegableConBuscador" id="idUnidad" name="id_unidad" data-live-search="true">
                                    <option value="">--Seleccionar Unidad De Medición--</option>
                                    @foreach ($unidadesDeMedidas as $unidadDeMedida)
                                        @if (old('id_unidad', $articulo->id_unidad) == $unidadDeMedida->id)
                                            <option selected value="{{ $unidadDeMedida->id }}">{{ $unidadDeMedida->unidad }}</option>
                                        @else
                                            <option value="{{ $unidadDeMedida->id }}">{{ $unidadDeMedida->unidad }}</option>
                                        @endif
                                    @endforeach
                                </select>
                                <div class="invalid-feedback" id="validarCampoUnidadMedida">

                                </div>
                            </div>

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

                                </div>
                            </div>

                            <input type="hidden" name="identificador_tipo" id="identificadorTipo" value="{{ old('identificador_tipo', $articulo->identificador_tipo) }}">
                        </div>

                        <div class=" card-footer">
                            <button type="button" class="btn btn-aspen" id="botonDeEdicion" onclick="EditarArticulo() "><i class="fas fa-edit" style="margin-right: 2px;"></i> Editar Artículo </button>
                            <a href="{{ route('articulo.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 © 2023 <a href="https://aspenspa.cl/">aspenspa.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>
        $('#idUnidad').selectpicker({
            dropupAuto: false
        });
        $('#idCuentaGasto').selectpicker({
            dropupAuto: false
        });
        $('#idClasificacion').selectpicker({
            dropupAuto: false
        });
        $('#tipoArticulo').selectpicker({
            dropupAuto: false
        });
        $('#campoEstado').selectpicker({
            dropupAuto: false
        });
    </script>

    <script>
        function obtenerCantidadDeArticulosPorTipo() {
            var valorTipoDeArticulo = document.getElementById("tipoArticulo").value;
            var csrf = '{{ csrf_token() }}';

            if (valorTipoDeArticulo != "") {
                switch (valorTipoDeArticulo) {
                    case "Artículo":
                        $.ajax({
                            type: 'POST',
                            datatype: 'json',
                            url: '{{ route('articulo.obtener-cantidad-articulos', 'articulo') }}',
                            headers: {
                                'X-CSRF-TOKEN': csrf
                            },
                            success: function(data) {
                                document.getElementById("codigoArticulo").value = data.codigo;
                                document.getElementById("idClasificacion").innerHTML = '<option value="">--Seleccionar Clasificación--</option>';
                                data.clasificaciones.forEach(elemento => {
                                    document.getElementById("idClasificacion").innerHTML += '<option value="' + elemento.id + '">' + elemento.clasificacion + '</option>';
                                });
                                $('#idClasificacion').selectpicker("refresh");
                                $('#idClasificacion').selectpicker('val', "");
                                document.getElementById("identificadorTipo").value = data.identificador;

                                document.getElementById("ContenedorCampoMarca").style.display = "block";
                                document.getElementById("ContenedorCampoModelo").style.display = "block";
                                document.getElementById("ContenedorCampoTalla").style.display = "none";
                                document.getElementById("marca").value="";
                                document.getElementById("modelo").value="";
                                document.getElementById("talla").value="";
                            }
                        })
                        break;

                    case "Servicio":
                        $.ajax({
                            type: 'POST',
                            datatype: 'json',
                            url: '{{ route('articulo.obtener-cantidad-articulos', 'servicio') }}',
                            headers: {
                                'X-CSRF-TOKEN': csrf
                            },
                            success: function(data) {
                                document.getElementById("codigoArticulo").value = data.codigo;
                                document.getElementById("idClasificacion").innerHTML = '<option value="">--Seleccionar Clasificación--</option>';
                                data.clasificaciones.forEach(elemento => {
                                    document.getElementById("idClasificacion").innerHTML += '<option value="' + elemento.id + '">' + elemento.clasificacion + '</option>';
                                });
                                $('#idClasificacion').selectpicker("refresh");
                                $('#idClasificacion').selectpicker('val', "");
                                document.getElementById("identificadorTipo").value = data.identificador;

                                document.getElementById("ContenedorCampoMarca").style.display = "none";
                                document.getElementById("ContenedorCampoModelo").style.display = "none";
                                document.getElementById("ContenedorCampoTalla").style.display = "none";
                                document.getElementById("marca").value="";
                                document.getElementById("modelo").value="";
                                document.getElementById("talla").value="";
                            }
                        })
                        break;

                    case "EPP":
                        $.ajax({
                            type: 'POST',
                            datatype: 'json',
                            url: '{{ route('articulo.obtener-cantidad-articulos', 'epp') }}',
                            headers: {
                                'X-CSRF-TOKEN': csrf
                            },
                            success: function(data) {
                                console.log(data)
                                document.getElementById("codigoArticulo").value = data.codigo;
                                document.getElementById("idClasificacion").innerHTML = '<option value="">--Seleccionar Clasificación--</option>';
                                data.clasificaciones.forEach(elemento => {
                                    document.getElementById("idClasificacion").innerHTML += '<option value="' + elemento.id + '">' + elemento.clasificacion + '</option>';
                                });
                                $('#idClasificacion').selectpicker("refresh");
                                $('#idClasificacion').selectpicker('val', "");
                                document.getElementById("nombreCuentaDeGasto").value = "";
                                document.getElementById("valorCuentaDeGasto").value = "";
                                document.getElementById("identificadorTipo").value = data.identificador;

                                document.getElementById("ContenedorCampoMarca").style.display = "block";
                                document.getElementById("ContenedorCampoModelo").style.display = "block";
                                document.getElementById("ContenedorCampoTalla").style.display = "block";
                                document.getElementById("marca").value="";
                                document.getElementById("modelo").value="";
                                document.getElementById("talla").value="";
                            },
                            error: function(data) {
                                console.log(data)
                            }
                        })
                        break;
                }
            } else {
                document.getElementById("codigoArticulo").value = "";
            }
        }

        function obtenerCuentaDeGasto(campo) {
            var url = '{{ route('cuenta-gasto.obtener-cuenta-gasto', ':id') }}';
            url = url.replace(':id', campo.value);
            var csrf = '{{ csrf_token() }}';

            $.ajax({
                type: 'POST',
                datatype: 'json',
                url: url,
                headers: {
                    'X-CSRF-TOKEN': csrf
                },
                success: function(data) {
                    document.getElementById("nombreCuentaDeGasto").value = data.cuenta_gasto;
                    document.getElementById("valorCuentaDeGasto").value = data.id;

                    if (document.getElementById("nombreCuentaDeGasto").value == "undefined") {
                        document.getElementById("nombreCuentaDeGasto").value = "";
                        document.getElementById("valorCuentaDeGasto").value = "";
                    }
                }
            })
        }
    </script>

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

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

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

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

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

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

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

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

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

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

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

            document.getElementById("valicacionCampoDescripcion").innerHTML = "";
            document.getElementById("descripcion").setAttribute("class", "form-control");

            document.getElementById("valicacionCampoMarca").innerHTML = "";
            document.getElementById("marca").setAttribute("class", "form-control");

            document.getElementById("valicacionCampoModelo").innerHTML = "";
            document.getElementById("modelo").setAttribute("class", "form-control");

            document.getElementById("valicacionCampoTalla").innerHTML = "";
            document.getElementById("talla").setAttribute("class", "form-control");

            document.getElementById("validarCampoTipoArticulo").innerHTML = "";
            document.getElementById("tipoArticulo").setAttribute("class", "form-control");

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

            document.getElementById("validarCampoCuentaGasto").innerHTML = "";
            document.getElementById("nombreCuentaDeGasto").setAttribute("class", "form-control");

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

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

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

            $.ajax({
                type: 'POST',
                datatype: 'json',
                url: '{{ route('articulo.update', $articulo) }}',
                data: datosFormulario,
                success: function(data) {
                    limpiarCampos()

                    Swal.fire({
                        icon: 'success',
                        title: '¡Modificado!',
                        text: 'El artículo ' + data.descripcion + ' se modifico con éxito',
                        confirmButtonColor: "#448aff",
                        confirmButtonText: "Confirmar"
                    })

                    document.getElementById("botonDeEdicion").removeAttribute("disabled");
                    eliminarLoading()
                },
                error: function(data) {
                    validarCampos(data);
                    document.getElementById("botonDeEdicion").removeAttribute("disabled");
                    eliminarLoading()
                }
            })
        }
    </script>
@stop