@extends('layouts.app')

@section('contenido')
    <style>
        .resultados{
            position: absolute;
            top: 100%; /* Posiciona el <div> justo debajo del campo de texto */
            left: 5%;
            width: 90%; /* Ajusta al ancho del campo de texto */
            max-height: 150px; /* Ajusta la altura máxima según lo necesites */
            overflow-y: auto;  /* Agrega una barra de desplazamiento vertical */
            border: 1px solid #ddd; /* Opcional: agregar un borde */
            padding: 10px;    /* Opcional: agregar relleno */
            margin-top: 0px; /* Opcional: agregar margen superior */
            background: #fff; /* Fondo blanco para el <div> */
            z-index: 1000; /* Asegura que el <div> esté por encima de otros elementos */
        }

        .hidden {
            display: none !important;
        }
        .lista-colonias {
            cursor: pointer;
            margin: 0px;
            padding: 5px;
        }
        .lista-colonias:hover {
            background-color: #1396F6;
            color: #ffffff;
        }
    </style>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3>Editar consumidor final
                <!-- @can('tiendas-list')
        -->
                    <div class="pull-right">
                        <a class="btn btn-primary" href="{{ route('consumidores.index') }}"> Regresar</a>
                    </div>
                    <!--
    @endcan -->
            </h3>
        </div>

        @if ($message = Session::get('success'))
            <div class="alert alert-success">
                <p>{{ $message }}</p>
            </div>
        @endif
        <div class="panel-body">
            @if ($errors->any())
                <div class="alert alert-danger">
                    <strong>Oops!</strong> Hubo algunos problemas con tus datos.<br><br>
                    <ul>
                        @foreach ($errors->all() as $error)
                            @switch($error)
                                @case('contraseña y confirm-password deben coincidir.')
                                    <li>Error, la clave debe coincidir.</li>
                                    @break
                                @case('confirm-password y contraseña deben coincidir.')
                                    <li>Error, verificar clave debe coincidir.</li>
                                    @break
                                @default
                                    <li>{{ $error }}</li>
                            @endswitch
                        @endforeach
                    </ul>
                </div>
            @endif
            <form action="{{ route('consumidores.update', $consumidor->id) }}" method="POST" autocomplete="off">
                @csrf
                @method('PUT')

                <div class="row">
                    <div class="col-md-6">
                        <h4 class="sub-title-principal">Datos generales de la cuenta</h4>
                    </div>
                    <div class="col-md-6">
                        <h4 class="sub-title pull-right">ID del usuario ( {{ $consumidor->id }} )</h4>
                    </div>
                    <hr class="espaciador">
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>Correo electronico* :</strong>
                            <input type="text" name="email" value="{{ $consumidor->email }}"
                                class="form-control {{ $errors->has('email') ? 'is-invalid' : '' }}"
                                placeholder="Correo electronico">
                        </div>
                    </div>


                    <div class="col-xs-12 col-sm-12 col-md-6">
                        <div class="form-group">
                            <strong>Clave de acceso* :</strong>
                            <input type="password" name="password" id="password-1"
                                class="form-control {{ $errors->has('password') ? 'is-invalid' : '' }}" autocomplete="new-password"
                                placeholder="Clave de acceso" readonly>
                            {{-- <div class="input-group-append">
                                <button type="button" class="btn btn-show show-password-1" data-target="#password-1">
                                    <i class="fa fa-eye"></i>
                                </button>
                            </div> --}}
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-6">
                        <div class="form-group">
                            <strong>Verificar clave de acceso* :</strong>
                            <input type="password" name="confirm-password" id="password-2"
                                class="form-control {{ $errors->has('confirm-password') ? 'is-invalid' : '' }}" autocomplete="new-password"
                                placeholder="Verificar clave de acceso" readonly>
                            {{-- <div class="input-group-append">
                                <button type="button" class="btn btn-show show-password-2" data-target="#password-2">
                                    <i class="fa fa-eye"></i>
                                </button>
                            </div> --}}
                        </div>
                    </div>

                </div>

                <div class="row">
                    {{-- <input type="hidden" name="tipo" class="form-control" value="4"> --}}
                    <h4 class="sub-title">Datos generales</h4>
                    <hr class="espaciador">
                    <div class="col-xs-12 col-sm-12 col-md-6">
                        <div class="form-group">
                            <strong>Nombres* :</strong>
                            <input type="text" name="name" value="{{ $consumidor->name }}"
                                class="form-control {{ $errors->has('name') ? 'is-invalid' : '' }}" placeholder="Nombre">
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-6">
                        <div class="form-group">
                            <strong>1er apellido* :</strong>
                            <input type="text" name="apellido_paterno" value="{{ $consumidor->apellido_paterno }}"
                                class="form-control" placeholder="1er apellido">
                        </div>
                    </div>


                    <div class="col-xs-12 col-sm-12 col-md-6">
                        <div class="form-group">
                            <strong>2do apellido :</strong>
                            <input type="text" name="apellido_materno" value="{{ $consumidor->apellido_materno }}"
                                class="form-control" placeholder="2do apellido">
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-6">
                        <div class="form-group">
                            <strong>Número de afiliación :</strong>
                            <input type="text" value="{{ $consumidor->numero_afiliacion }}" name="numero_afiliacion"
                                class="form-control" placeholder="Número de afiliación" readonly>
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-6">
                        <div class="form-group">
                            <strong>Fecha de nacimiento :</strong>
                            <input type="date" name="fecha_nacimiento"
                                value="{{ $consumidor->fecha_nacimiento ? date('Y-m-d', strtotime($consumidor->fecha_nacimiento)) : '' }}"
                                class="form-control fecha_no_futuras" placeholder="Fecha Nacimiento">
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-6">
                        <div class="form-group">
                            <strong>Fecha de ingreso :</strong>
                            <input type="date" name="fecha_ingreso"
                                value="{{ $consumidor->fecha_ingreso ? date('Y-m-d', strtotime($consumidor->fecha_ingreso)) : '' }}"
                                class="form-control fecha_no_futuras" placeholder="Fecha de Ingreso">
                        </div>
                    </div>

                </div>

                <div class="row">
                    <h4 class="sub-title">Dirección principal</h4>
                    <hr class="espaciador">

                    @if($direcciones)
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div id="selectDomicilio">
                            <div class="form-group">
                                <strong>Domicilio :</strong>
                                <input type="text" id="domicilio_input" class="form-control" name="domicilio_name" value="{{ $direcciones->alias }}" readonly="true">
                            </div>
                        </div>
                    </div>
                    @endif

                    {{--<div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">

                            <div id="selectDomicilio">
                                <strong>Domicilio :</strong>
                                <!-- @if(Auth::user()->rol != '0' && Auth::user()->rol != '2') disabled @endif -->
                                <select
                                    class="js-example-basic-single form-control {{ $errors->has('domicilio') ? 'is-invalid' : '' }}"
                                    name="domicilio" id="domicilio">
                                    <option selected value="">Seleccione un domicilio</option>
                                </select>
                                <input type="hidden" name="domicilio_id_hidden" value="{{ $direcciones->id }}">
                            </div>

                            <input type="hidden" id="domicilio_input" name="domicilio_name" value="{{ $direcciones->alias }}">

                        </div>
                    </div>--}}

                    <div class="col-xs-12 col-sm-12 col-md-6">
                        <div class="form-group">
                            <strong>Pais:</strong>
                            <input type="hidden" name="pais_id" value="1" class="form-control"
                                placeholder="Pais">
                            <input type="text" readonly="true" name="pais_nombre" value="México"
                                class="form-control" placeholder="Pais">
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-6">
                        <div class="form-group">
                            <strong>Código postal* :</strong>
                            <input type="text" onkeypress="return Numeros(event)" name="codigo_postal" value="{{ $direcciones->cp ?? '' }}"
                                id="postal"
                                minlength="2"
                                maxlength="5"
                                class="form-control {{ $errors->has('codigo_postal') ? 'is-invalid' : '' }}"
                                placeholder="Código postal">
                            <div id="resultados" class="resultados hidden"></div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-6">
                        <div class="form-group {{ $errors->has('estado_id') ? 'is-invalid-select1' : '' }}">
                            <strong>Estado* :</strong>
                            <div id="selectEstado">
                                <select
                                    class="form-control"
                                    name="estado_id_select"
                                    id="estado_id_select"
                                    disabled="true"
                                >
                                    <option value="">Seleccione un estado</option>
                                    <option
                                        value="{{ $estado->id ?? ''}}"
                                        @if($direcciones != null && $estado != null)
                                            {{ $direcciones->estado_id == $estado->id ? 'selected' : '' }}
                                        @endif
                                    >{{ $estado->nombre ?? '' }}
                                    </option>
                                </select>
                                <input type="hidden" id="estado_id" name="estado_id" value="{{ $direcciones->estado_id ?? '' }}">
                            </div>


                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-6">
                        <div class="form-group {{ $errors->has('municipio_id') ? 'is-invalid-select2' : '' }}">
                            <strong>Municipio* :</strong><br>
                            <div id="selectMunicipio">
                                <select
                                    style="width: 100%;"
                                    class="js-example-basic-single form-control"
                                    name="municipio_id_select"
                                    id="municipio_id_select"
                                    disabled="true"
                                >
                                    <option value="{{ old('municipio_id') }}">Seleccione un municipio</option>
                                    <option
                                        value="{{ $municipio->id ?? '' }}"
                                        @if($direcciones != null && $municipio != null)
                                            {{ $direcciones->municipio_id == $municipio->id ? 'selected' : '' }}
                                        @endif
                                    >
                                        {{ $municipio->nombre ?? '' }}
                                    </option>
                                </select>
                                <input type="hidden" id="municipio_id" name="municipio_id" value="{{ $direcciones->municipio_id ?? '' }}">
                                <small id="tag" class="red"></small>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-6">
                        <div class="form-group {{ $errors->has('localidad_id') ? 'is-invalid-select3' : '' }}">
                            <strong>Colonia* :</strong><br>
                            <div id="selectLocalidad">
                                <select
                                    style="width: 100%"
                                    class="js-example-basic-single form-control"
                                    name="localidad_id_select"
                                    id="localidad_id_select"
                                    disabled="true"
                                >
                                    <option value="{{ old('localidad_id') }}">Seleccione una colonia</option>
                                    <option
                                        value="{{ $localidad->id ?? '' }}"
                                        @if($direcciones != null && $localidad != null)
                                            {{ $direcciones->localidad_id == $localidad->id ? 'selected' : '' }}
                                        @endif
                                    >
                                        {{ $localidad->nombre ?? '' }}
                                    </option>
                                </select>
                                <input type="hidden" id="localidad_id" name="localidad_id" value="{{ $direcciones->localidad_id ?? '' }}">
                                <small id="tag" class="red"></small>

                            </div>

                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-6">
                        <div class="form-group">
                            <strong>Calle y número* :</strong>
                            <input type="text" name="calle_numero" id="calle_numero"
                                value="{{ $direcciones ? $direcciones->calle : '' }}"
                                class="form-control {{ $errors->has('calle_numero') ? 'is-invalid' : '' }}"
                                placeholder="Calle Numero">
                        </div>
                    </div>

                </div>

                <div class="row">
                    <h4 class="sub-title">Contacto</h4>
                    <hr class="espaciador">
                    <div class="col-xs-12 col-sm-12 col-md-6">
                        <div class="form-group">
                            <strong>Movil* :</strong>
                            <input type="text" minlength="10" maxlength="10" name="celular" data-mask="99-9999-9999"
                                value="{{ $consumidor->celular }}"
                                class="form-control {{ $errors->has('celular') ? 'is-invalid' : '' }}"
                                placeholder="Movil">
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-6">
                        <div class="form-group">
                            <strong>Teléfono* :</strong>
                            <input type="text" minlength="10" maxlength="10" name="telefono_fijo" data-mask="99-9999-9999"
                                value="{{ $consumidor->telefono_fijo }}"
                                class="form-control {{ $errors->has('telefono_fijo') ? 'is-invalid' : '' }}"
                                placeholder="Teléfono">
                        </div>
                    </div>

                </div>

                {{--<div class="row">
                    <h4 class="sub-title">Datos fiscales</h4>
                    <hr class="espaciador">
                    <div class="col-xs-12 col-sm-12 col-md-6">
                        <div class="form-group">
                            <strong>RFC :</strong>
                            <input type="text" name="rfc" value="{{ $consumidor->rfc }}" class="form-control" placeholder="RFC" maxlength="13">
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-6">
                        <div class="form-group">
                            <strong>Régimen fiscal :</strong>
                            <select class="form-control" name="regimen_fiscal" id="exampleFormControlSelect1">
                                <option value="" @if($consumidor->regimen_fiscal === '') selected @endif>Seleccione un régimen fiscal</option>
                                <option value="Persona física" @if($consumidor->regimen_fiscal === 'Persona física') selected @endif>Persona física</option>
                                <option value="Persona moral" @if($consumidor->regimen_fiscal === 'Persona moral') selected @endif>Persona moral</option>
                            </select>
                        </div>
                    </div>

                </div>--}}

                {{-- <div class="row">
                    <h4 class="sub-title">Condiciones de crédito</h4>
                    <hr class="espaciador">
                    <div class="col-xs-12 col-sm-12 col-md-6">
                        <div class="form-group">
                            <strong>Descuento distribuidor/vendedor (%):</strong>
                            <input type="text" name="descuento" value="{{ $vendedores->descuento }}"
                                class="form-control" placeholder="Descuento"
                                @if(Auth::user()->rol == '2') readonly @endif>
                        </div>
                    </div> --}}
                    {{-- <div class="col-xs-12 col-sm-12 col-md-4">
                        <div class="form-group">
                            <strong>Días de credito:</strong>
                            <input type="text" min="0" max="120" name="dia_credito" value="{{ $vendedores->dia_credito }}" class="form-control"
                                placeholder="Días de credito"
                                @if(Auth::user()->rol == '2') readonly @endif>
                        </div>
                    </div> --}}
                    {{-- <div class="col-xs-12 col-sm-12 col-md-6">
                        <div class="form-group">
                            <strong>Descuento de ofertas:</strong>
                            <input type="text" name="descuento_oferta" value="{{ $vendedores->descuento_oferta }}" class="form-control"
                                placeholder="Descuento de ofertas" readonly>
                        </div>
                    </div> --}}
                    {{-- <div class="col-xs-12 col-sm-12 col-md-4">
                        <div class="form-group">
                            <strong>Límite de crédito ($) :</strong>
                            <input type="text" name="credito" value="{{ $vendedores->credito }}"
                                class="form-control miles" placeholder="Credito"
                                @if(Auth::user()->rol == '2') readonly @endif>
                        </div>
                    </div> --}}
                    {{-- <div class="col-xs-12 col-sm-12 col-md-6">
                        <div class="form-group">
                            <strong>Descuento de outlet:</strong>
                            <input type="text" name="descuento_outlet" value="{{ $vendedores->descuento_outlet }}" class="form-control"
                                placeholder="Descuento de outlet" readonly>
                        </div>
                    </div> --}}

                {{-- </div> --}}

                {{-- <div class="row">
                    <h4 class="sub-title">Descuento ofrecido a clientes (%)</h4>
                    <hr class="espaciador">
                    <div class="col-xs-12 col-sm-12 col-md-6">
                        <div class="form-group">
                            <strong>Descuento ofrecido a clientes :</strong>
                            <input type="number" name="descuento_clientes" value="{{ $vendedores->descuento_clientes }}"
                                class="form-control {{ $errors->has('descuento_clientes') ? 'is-invalid' : '' }}"
                                placeholder="Descuento ofrecido a clientes">
                        </div>
                    </div>
                </div> --}}

                {{--<div class="row">
                    <h4 class="sub-title">Descuentos por Temporada</h4>
                    <hr class="espaciador">

                    <div class="col-xs-12 col-sm-12 col-md-3">
                        <div class="form-group">
                            <strong>Descuento Novedades:</strong>
                            <input type="number" value="{{ $vendedores->descuento_1 }}" class="form-control text-center" disabled>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-3">
                        <div class="form-group">
                            <strong>Descuento Linea:</strong>
                            <input type="number" value="{{ $vendedores->descuento_2 }}" class="form-control text-center" disabled>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-3">
                        <div class="form-group">
                            <strong>Descuento Oferta:</strong>
                            <input type="number" value="{{ $vendedores->descuento_3 }}" class="form-control text-center" disabled>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-3">
                        <div class="form-group">
                            <strong>Descuento Outlet:</strong>
                            <input type="number" value="{{ $vendedores->descuento_4 }}" class="form-control text-center" disabled>
                        </div>
                    </div>

                </div>--}}


                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <h4 style="margin-left: 15px;">Observaciones:</h4>
                        <div class="form-group">
                            <textarea name="observaciones" class="form-control" id="exampleFormControlTextarea1" rows="3">{{ $consumidor->observaciones }}</textarea>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="col-md-5">
                            <input type="hidden" class="estatus" name="estatus" value="{{$consumidor->estatus}}">
                            <div class="contenedor-select">
                                <label class="text-md-right" for="color_1"><span class="requerido">* </span>
                                    Activación de vendedor</label>
                                <label class="switch">
                                    <input type="checkbox" name="estatus_check"
                                        @if($consumidor->estatus == 1) checked="true" @endif>
                                    <span class="slider round"></span>
                                </label>
                            </div>
                            <span><small>OFF / ON swich para activacion o desactivacion de vendedor por defecto se creara en activo</small></span>

                        </div>

                    </div>
                </div>

                <div class="row mt-5 seccion-final">
                    <div class="col-md-8"></div>
                    <div class="col-md-4">
                        <button type="submit" class="btn btn-primary pull-right save">Guardar</button>
                        <a class="btn btn-danger pull-right save" href="{{ route('vendedores.index') }}">
                            Cancelar</a>
                    </div>
                </div>

            </form>
        </div>
    </div>

    <p class="text-center text-primary"><small>-</small></p>
@endsection
@section('js')
    <script>
        var coloniasGlobal = [];

        $(document).ready(function() {

            //capturar el evento input del cp
            $('#postal').on('input', function() {
                var cp = $(this).val();
                //console.log('valor campo cp:', cp);
                data = {
                    'cp': cp
                };
                //validamos que la longitud del cp sea de 5
                if(cp.length >= 5) {
                    $.ajax({
                        url: '/ajax/detalles-direccion-por-cp',
                        type: "POST",
                        data: data,
                        success: function(response) {
                            //console.log(response);

                            var resultadosHTML = '';

                            if(response.data && response.data.length > 0) {
                                var colonias = response.data;
                                coloniasGlobal = response.data;

                                colonias.forEach(function(colonia) {
                                    let nombreColonia = colonia?.nombre ?? '';
                                    let nombreMunicipio = colonia?.municipio?.nombre ?? '';
                                    let nombreEstado = colonia.estado.nombre ?? '';
                                    resultadosHTML += '<p class="lista-colonias">' + `${nombreColonia}, ${nombreMunicipio}, ${nombreEstado}` + '</p>';
                                });
                            }else {
                                resultadosHTML = '<p> No se encontraron colonias con este CP. </p>';
                            }

                            $('#resultados').removeClass('hidden');
                            $('#resultados').html(resultadosHTML);
                        },
                        error: function(error) {
                            console.log(error);
                        }
                    });
                }else {
                    $('#resultados').addClass('hidden');
                    $('#resultados').html('');

                    //limpiar campos estado, municipio, colonia
                    $('#estado_id_select').empty();
                    $('#municipio_id_select').empty();
                    $('#localidad_id_select').empty();

                    //limpiar inputs ocultos
                    $('input[name="estado_id"]').val();
                    $('input[name="municipio_id"]').val();
                    $('input[name="localidad_id"]').val();

                    //seleccionar por defecto la option de seleccion
                    $('#estado_id_select').append('<option selected="true" value="">Seleccione un estado</option>');
                    $('#municipio_id_select').append('<option selected="true" value="">Seleccione un municipio</option>');
                    $('#localidad_id_select').append('<option selected="true" value="">Seleccione una colonia</option>')
                }

            });

            $('#resultados').on('click', 'p', function() {
                let textoCompletoColonia = $(this).text();
                let partes = textoCompletoColonia.split(',');
                var colonia = partes[0].trim();
                //console.log(colonia);
                $('#resultados').addClass('hidden');
                $('#resultados').html('');

                datosColonia = coloniasGlobal.find(col => col.nombre == colonia );
                //console.log(datosColonia);
                if(datosColonia === undefined) {
                    return;
                }

                let nombreMunicipio = datosColonia?.municipio?.nombre ?? '';
                let idMunicipio = datosColonia?.municipio_id ?? '';
                $('#municipio_id_select').append('<option selected="true" value="'+ idMunicipio +'" >'+ nombreMunicipio +' </option>');
                $('input[name="municipio_id"]').val(idMunicipio);

                let nombreEstado = datosColonia?.estado?.nombre ?? '';
                let idEstado = datosColonia?.estado_id ?? '';
                $('#estado_id_select').append('<option selected="true" value="'+ idEstado +'" >'+ nombreEstado +' </option>');
                $('input[name="estado_id"]').val(idEstado);

                let nombreColonia = datosColonia?.nombre ?? '';
                let idColonia = datosColonia?.id ?? '';
                $('#localidad_id_select').append('<option selected="true" value="'+ idColonia +'" >'+ nombreColonia +' </option>');
                $('input[name="localidad_id"]').val(idColonia);

            });


            $('input[name="estatus_check"]').on('change', function() {
                var isChecked = $(this).prop('checked');

                if (isChecked) {
                    $('.estatus').val(1);
                } else {
                    $('.estatus').val(0);
                }
            });

            $('.js-example-basic-single').select2();



        });
    </script>
@stop