@extends('layouts.app')

@section('css')

<style>
.select2-search__field{
    background: #fff !important;
}
</style>

@endsection

@section('content')
    <ol class="breadcrumb">
        <li class="breadcrumb-item">Solicitudes de préstamo</li>
        <li class="breadcrumb-item active">nueva</li>
    </ol>
    <div class="row justify-content-between">
        <div class="col-12 col-xl-8">
            <h1 class="page-title">Lista de <span class="fw-semi-bold">solicitudes de préstamos</span></h1>
        </div>
        <div class="col-12 col-xl-4 text-right">
            <a class="button-return" href="{!! URL::previous() !!}">Regresar</a>
        </div>
    </div>

    <section class="widget">
        <header>
            <h6>
                Llena todos los campos necesarios para generar una solicitud de préstamo
            </h6>
        </header>
        @include('adminlte-templates::common.errors')
        <div class="widget-body">
            {!! Form::open(['route' => 'solicituds.store', 'class' => 'form-horizontal','files' => true]) !!}

                @include('solicituds.fields')

            {!! Form::close() !!}
        </div>
    </section>
    <div class="modal fade" id="modalValidacion" tabindex="-1" role="dialog" aria-labelledby="modalValidacionTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalValidacionTitle">Validación de datos</h5>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                    <h6>¿Son correctos los datos?</h6>
                    </div>
                </div>
                <div class="container" id="">

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Actualizar</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="ocultarDiv();">Aceptar</button>
            </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
{{-- <script src="{!! asset('template') !!}/bower_components/select2/dist/js/select2.min.js"></script> --}}
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>

<script src="{!! asset('template') !!}/bower_components/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="{!! asset('template') !!}/bower_components/jasny-bootstrap/js/fileinput.js"></script>
<script src="{!! asset('template') !!}/bower_components/jasny-bootstrap/js/inputmask.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>

<script>
$(".select2").each(function(){
    $(this).select2($(this).data());
});

$("#codigo_postal").inputmask({mask: "99999"});
var estados = '';
var municipios = '';
var estado_id = '';
var clientes = {!! $clientes !!};
console.log(clientes);

$.ajax({
    url: "http://datamx.io/dataset/73b08ca8-e955-4ea5-a206-ee618e26f081/resource/9c5e8302-221c-46f2-b9f7-0a93cbe5365b/download/estados.json",
    type: 'GET',
    dataType: "json"
}).done(function(data) {
    estados = data;
    $('#estadoSelect').selectpicker('refresh');
    $("#estadoSelect").html();
    $("#estadoSelect").html('<option class="dropdown-item" value="0">Selecciona un estado</option>');
    data.forEach(element => {
        $("#estadoSelect").append('<option class="dropdown-item" value="'+element.name+'">'+element.name+'</option> ');
    });
    $('#estadoSelect').selectpicker('refresh');
});

$.ajax({
    url: "http://datamx.io/dataset/319a8368-416c-4fe6-b683-39cf4d58b360/resource/829a7efd-3be9-4948-aa1b-896d1ee12979/download/municipios.json",
    type: 'GET',
    dataType: "json"
}).done(function(data) {
    municipios = data;
    $('#municipioSelect').selectpicker('refresh');
    $("#municipioSelect").html();
    $("#municipioSelect").html('<option class="dropdown-item" value="0">Selecciona un municipio</option>');
    $('#municipioSelect').selectpicker('refresh');
});

$("#estadoSelect").change(function(){
    estados.forEach(element => {
        if(element.name == $("#estadoSelect").val())
        {
            estado_id = element.id;
        }
    });
    $('#municipioSelect').selectpicker('refresh');
    $("#municipioSelect").html();
    $("#municipioSelect").html('<option class="dropdown-item" value="0">Selecciona un municipio</option>');
    municipios.forEach(element => {
        if(element.state_id == estado_id){
            $("#municipioSelect").append(
                '<option value="'+element.name+'">'+element.name+'</option>'
            )
        }
    });
    $('#municipioSelect').selectpicker('refresh');
});

$(".formatNumbers").on("keypress keyup blur",function (event) {
    $(this).val($(this).val().replace(/[^0-9]/g, ''));
    var numero = $(this).val().toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
    $(this).val(numero);
});

$('#selectClientes').change('select2:select', function (e) {
    var cliente_id = $('#selectClientes').val();
    clientes.forEach(element => {
        if(element.id == cliente_id){
            $("#nombre_cliente").val(element.data_usuario.name);
            $("#a_paterno_cliente").val(element.data_usuario.a_paterno);
            $("#a_materno_cliente").val(element.data_usuario.a_materno);
            $("#email").val(element.data_usuario.email);
            $("#telefono").val(element.data_usuario.telefono);
            $("#telefono_casa").val(element.data_usuario.telefono_casa);
            $("#calle").val(element.data_domicilio.calle);
            $("#num_int").val(element.data_domicilio.num_int);
            $("#num_ext").val(element.data_domicilio.num_ext);
            $("#colonia").val(element.data_domicilio.colonia);
            $("#codigo_postal").val(element.data_domicilio.codigo_postal);
            updateEstados(element.data_domicilio.estado);
            updateMunicipio(element.data_domicilio.municipio);
            $("#paisSelect").val(element.data_domicilio.pais);
            $('#paisSelect').selectpicker('refresh');
            $("#tiempo_viviendo").val(element.data_domicilio.tiempo_viviendo);
            $('#tiempo_viviendo').selectpicker('refresh');
            $("#tipo_domicilio").val(element.data_domicilio.tipo_domicilio);
            $('#tipo_domicilio').selectpicker('refresh');
            mostrarDiv();

            $("#modalValidacion").modal({backdrop: 'static', keyboard: false})  ;
            return false;
        }
    });
});

function updateEstados(nombre_estado){
    $('#estadoSelect').selectpicker('refresh');
    $('#estadoSelect').val(nombre_estado);
    $('#estadoSelect').selectpicker('refresh');
}

function updateMunicipio(nombre_municipio){
    estados.forEach(element => {
        if(element.name == $("#estadoSelect").val())
        {
            estado_id = element.id;
        }
    });
    $('#municipioSelect').selectpicker('refresh');
    $("#municipioSelect").html();
    $("#municipioSelect").html('<option class="dropdown-item" value="0">Selecciona un municipio</option>');
    municipios.forEach(element => {
        if(element.state_id == estado_id){
            if(element.name == nombre_municipio)
            {
                $("#municipioSelect").append(
                    '<option selected value="'+element.name+'">'+element.name+'</option>'
                )
            }
            else{
                '<option value="'+element.name+'">'+element.name+'</option>'
            }
        }
    });
    $('#municipioSelect').selectpicker('refresh');
}
function ocultarDiv(){
    $("#datosCliente").hide();
}
function mostrarDiv(){
    $("#datosCliente").show();
}
</script>

@endsection