@extends('layouts.app')

@section('content')
    <ol class="breadcrumb">
        <li class="breadcrumb-item active class_select"><a href="{{ URL('/home') }}">Inicio</a></li>
        <li class="breadcrumb-item class_select"> <a href="{!! route('clientes.index') !!}">Cliente</a></li>
        <li class="breadcrumb-item">Domicilio</li>
    </ol>
    <div class="row justify-content-between">
        <div class="col-12 col-xl-6">
            <h1 class="page-title">Datos del <span class="fw-semi-bold">domicilio</span></h1>
        </div>
        <div class="col-12 col-xl-6 text-right">
            <a class="btnInfo btn3" href="{!! URL::previous() !!}">Regresar</a>
        </div>
    </div>

    <section class="widget">        
        <header>
            <h6>
                Llena todos los campos necesarios para modificar el domicilio del cliente
            </h6>
        </header>
        @include('adminlte-templates::common.errors')
        <div class="widget-body">
            <form action="{{url('clientes/'.$cliente->id.'/domicilio')}}" method="post" class="form-horizontal">
                @csrf
                <div class="row">
                    <div class="form-group col-sm-6">
                        {!! Form::label('calle', 'Calle:') !!}
                        {!! Form::text('calle', (isset($cliente->user->domicilio->calle) ? $cliente->user->domicilio->calle : null ), ['class' => 'form-control']) !!}
                    </div>

                    <div class="form-group col-sm-6">
                        {!! Form::label('num_int', '# Interior') !!}
                        {!! Form::text('num_int', (isset($cliente->user->domicilio->num_int) ? $cliente->user->domicilio->num_int : null ), ['class' => 'form-control']) !!}
                    </div>

                    <div class="form-group col-sm-6">
                        {!! Form::label('num_ext', '# Exterior') !!}
                        {!! Form::text('num_ext', (isset($cliente->user->domicilio->num_ext) ? $cliente->user->domicilio->num_ext : null ), ['class' => 'form-control']) !!}
                    </div>

                    <div class="form-group col-sm-6">
                        {!! Form::label('colonia', 'Colonia:') !!}
                        {!! Form::text('colonia', (isset($cliente->user->domicilio->colonia) ? $cliente->user->domicilio->colonia : null ), ['class' => 'form-control']) !!}
                    </div>

                    <div class="form-group col-sm-6">
                            {!! Form::label('codigo_postal', 'Código postal:') !!}
                            {!! Form::text('codigo_postal', (isset($cliente->user->domicilio->codigo_postal) ? $cliente->user->domicilio->codigo_postal : null ), ['class' => 'form-control']) !!}
                        </div>
                    
                        <div class="form-group col-sm-6">
                            {!! Form::label('estado', 'Estado:') !!}
                            <select class="selectpicker form-control" data-style="btn-default"
                                data-width="100%" name="estado"
                                tabindex="-1" id="estadoSelect">
                            </select>
                        </div>
                    
                        <div class="form-group col-sm-6">
                            {!! Form::label('municipio', 'Municipio:') !!}
                            <select class="selectpicker form-control" data-style="btn-default"
                                data-width="100%" name="municipio"
                                tabindex="-1" id="municipioSelect">
                            </select>
                        </div>
                    
                        <div class="form-group col-sm-6">
                            {!! Form::label('pais', 'País:') !!}
                            <select class="selectpicker form-control" data-style="btn-default"
                                data-width="100%" name="pais"
                                tabindex="-1" id="paisSelect">
                            <option class="dropdown-item" value="0">Selecciona un país</option>
                            <option class="dropdown-item" selected value="México">México</option>
                            </select>
                        </div>
                    
                        <div class="form-group col-sm-6">
                            {!! Form::label('tiempo_viviendo', 'Tiempo viviendo:') !!}            
                            <select class="selectpicker form-control" data-style="btn-default"
                                data-width="100%" name="tiempo_viviendo"
                                tabindex="-1" id="tiempo_viviendo">
                                <option class="dropdown-item" value="0">Selecciona una opción</option>
                                <option class="dropdown-item" value="11 meses">Menos de 1 año</option>
                                <option class="dropdown-item" value="1 anio">1 año</option>
                                <option class="dropdown-item" value="2 anios">2 años</option>
                                <option class="dropdown-item" value="3 anios">3 años</option>
                                <option class="dropdown-item" value="4 anios">4 años</option>
                                <option class="dropdown-item" value="5 anios">5 años o más</option>
                                <option class="dropdown-item" value="10 anios">10 años o más</option>                                
                            </select>    
                        </div>
                    
                        <div class="form-group col-sm-6">
                            {!! Form::label('tipo_domicilio', 'Tipo de domicilio:') !!}            
                            <select class="selectpicker form-control" data-style="btn-default"
                                data-width="100%" name="tipo_domicilio"
                                tabindex="-1" id="tipo_domicilio">
                            <option class="dropdown-item" value="0">Selecciona una opción</option>
                            <option class="dropdown-item" value="Propia">Propia</option>
                            <option class="dropdown-item" value="Rentada">Rentada</option>
                            <option class="dropdown-item" value="De un familiar">De un familiar</option>
                            </select>
                        </div>

                    <!-- Submit Field -->
                    <div class="form-group col-sm-12">
                        <button type="submit" class="btnSucces btn2">Guardar</button>
                        <a href="{!! route('clientes.index') !!}" class="btnDanger btn1">Cancelar</a>
                    </div>
                </div>
            </form>
        </div>
    </section>
@endsection

@section('scripts')
<script src="{!! asset('template') !!}/bower_components/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="{{asset('template')}}/bower_components/jasny-bootstrap/js/inputmask.js"></script>
<script>
    $("#codigo_postal").inputmask({mask: "99999"});
    var estados = '';
    var municipios = '';
    var estado_id = '';
    $.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');
    });    
    
</script>
@endsection