@php
        $permisoCrear = '0';
        $permisoBorrar = '0';
        $permisoModificar = '0';
        //d($Data['PermisosUsuario'] );
    foreach ($Data['PermisosUsuario'] as $value) {
        $permisoCrear = $value->menuxusuarios_creacion;
        $permisoBorrar = $value->menuxusuarios_modificacion;
        $permisoModificar = $value->menuxusuarios_borrar;
    }

    $inactivar = 'disabled';
    if (Session::get('id_rol') == 'ADMIN') {
        $inactivar = '';
    }
    if($permisoCrear =='1'){
        $inactivar = '';
    }
    if (Session::has('id_pais')) {
        $id_pais_usuario =Session::get('id_pais');
    }else{
        $id_pais_usuario = "";
    }

    $ciudades['id']= isset($Data['ciudad']->id)? $Data['ciudad']->id:'';
    $ciudades['name']= isset($Data['ciudad']->name)? $Data['ciudad']->name:'';


@endphp
<form name="FormularioDatosPrincipales" id="FormularioDatosPrincipales" class="login100-form validate-form" method="POST"
    action="{{ URL::to('/') }}/{{ strtolower($Data['nombreMenu']) }}/crear" enctype="multipart/form-data">
    <div class="row">
        <!-- form start -->
        <div class="col-md-12">
            {{-- empieza el formulario --}}
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Informacion Basica</h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    <!-- DATOS PRINCIPALES-->
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="nombre">Nombre</label>
                                <input type="text" class="form-control" id="nombre" name="nombre"  placeholder="nombre" value="" required>
                            </div>
                        </div>
                        <div class="col-sm-8">
                            <div class="form-group">
                                <label for="descripcion">Descripcion</label>
                                <input type="text" class="form-control" id="descripcion" name="descripcion" placeholder="descripcion" value="" >
                            </div>
                        </div>
                    </div>
                    <!-- DATOS DE UBICACION-->
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label for="direccion">Direccion</label>
                                <textarea  id="direccion" name="direccion"  class="form-control" rows="3" placeholder="Su Direccion ..."></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="pais">Pais</label>
                                <select name="pais" id="pais" class="form-control">
                                    @php
                                          foreach ($Data['pais'] as $variable) {
                                            if($id_pais_usuario == $variable->id ){
                                                $selectedPais ='selected';
                                            }else{
                                                $selectedPais ='';
                                            }
                                            print "<option value='" . $variable->id . "' ".$selectedPais.">"  . $variable->cod_pais.' - '.$variable->name. "</option> \n ";
                                        }
                                    @endphp
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="ciudad">Ciudad</label>
                                <input type="text" class="form-control" id="ciudad" name="ciudad" required value="{{$ciudades['name']}}">
                                <input type="hidden" class="form-control" id="idciudad" name="idciudad"  required value="{{$ciudades['id']}}">
                            </div>
                            <div id="suggestions"></div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="tipo_naviera">Tipo</label>
                                <select name="tipo_naviera" id="tipo_naviera" class="form-control">
                                    @php
                                          foreach ($Data['tipo_naviera'] as $variable) {
                                            print "<option value='" . $variable->id . "'>"  .$variable->nombre. "</option> \n ";
                                        }
                                    @endphp
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-header">
                    <h3 class="card-title">Informacion de Contacto</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="nombrecontacto">Nombre Contacto</label>
                                <input type="text" class="form-control" id="nombrecontacto" name="nombrecontacto"  placeholder="Nombre Contacto" value="" required>
                            </div>
                        </div>
                        <div class="col-sm-2">
                            <div class="form-group">
                                <label for="telefonocontacto">Telefono</label>
                                <input type="text" class="form-control" id="telefonocontacto" name="telefonocontacto" placeholder="telefono" value="" >
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for="emailcontacto">E-Mail</label>
                                <input type="email" class="form-control" id="emailcontacto" name="emailcontacto" placeholder="emailcontacto" value=""  required>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-header">
                    @php
                    /// carga opciones de los servicios
                        $contador=0;
                        $contadorServMaritimos= count($Data['serviciosnavieros'])/3;
                        $ServiciosColumna1="";
                        $ServiciosColumna2="";
                        $ServiciosColumna3="";
                        if (count($Data['serviciosnavieros'])% 3 == 0){
                            $contadoAjuste=0;
                        }else{
                            $contadoAjuste=1;
                        }
                        foreach ($Data['serviciosnavieros'] as $variable) {
                            $contador+=1;

                            if ($contador<=($contadorServMaritimos+$contadoAjuste)){
                                $ServiciosColumna1= $ServiciosColumna1 . ' <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" id="serviciosmaritimos'. $variable->id .'" value= "'. $variable->id .'" name="serviciosmaritimos[]">
                                                        <label class="form-check-label">'.$contador.' - '.$variable->nombre.'</label>
                                                      </div>';
                            }
                            if ($contador>($contadorServMaritimos+$contadoAjuste) && $contador<=($contadorServMaritimos*2)){
                                $ServiciosColumna2= $ServiciosColumna2. ' <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" id="serviciosmaritimos'. $variable->id .'" value= "'. $variable->id .'" name="serviciosmaritimos[]">
                                                        <label class="form-check-label">'.$contador.' - '.$variable->nombre.'</label>
                                                      </div>';
                            }
                            if ($contador>($contadorServMaritimos*2) && $contador<=($contadorServMaritimos*3)){
                                $ServiciosColumna3= $ServiciosColumna3. ' <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" id="serviciosmaritimos'. $variable->id .'" value= "'. $variable->id .'" name="serviciosmaritimos[]">
                                                        <label class="form-check-label">'.$contador.' - '.$variable->nombre.'</label>
                                                      </div>';
                            }

                        }
                    @endphp
                    <h3 class="card-title">Servicios  </h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="row">
                                <div class="col-sm-4">
                                  <!-- checkbox -->
                                  <div class="form-group">
                                        @php print $ServiciosColumna1; @endphp
                                  </div>
                                </div>
                                <div class="col-sm-4">
                                    <!-- checkbox -->
                                    <div class="form-group">
                                        @php print $ServiciosColumna2; @endphp
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <!-- checkbox -->
                                    <div class="form-group">
                                        @php print $ServiciosColumna3; @endphp
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-header">
                    <h3 class="card-title">Miscelaneos</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input" id="imagen" name="imagen" accept="image/png, image/jpeg" />
                                    <label class="custom-file-label" for="imagen">Seleccione una Imagen</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-header">
                    <h3 class="card-title">Destacar</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="fechadestacado">Fecha inicial</label>
                                <input type="date" class="form-control" id="fechadestacado" name="fechadestacado" value="">
                            </div>
                        </div>
                        <div class="col-sm-8">
                            <div class="form-group">
                                <label for="diasdestacado">Dias  -> <code id="etiquetadias" style="font-size: large">0</code></label>
                                <input type="range" class="custom-range" id="diasdestacado" name="diasdestacado"  list="tickmarks" min="0" max="100" value="0" step="10" >
                                <datalist id="tickmarks">
                                    <option value="0" label="0 Dias"></option>
                                    <option value="10"></option>
                                    <option value="20"></option>
                                    <option value="30"></option>
                                    <option value="40"></option>
                                    <option value="50" label="50 Dias"></option>
                                    <option value="60"></option>
                                    <option value="70"></option>
                                    <option value="80"></option>
                                    <option value="90"></option>
                                    <option value="100" label="100 Dias"></option>
                                </datalist>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.card-body -->
                <div class="card-footer">
                    <button type="button" class="btn btn-primary {{ $inactivar }}" {{ $inactivar }} onclick="ValidaTerminos()">Guardar</button>
                    <!-- <button type="submit" class="btn btn-primary {{ $inactivar }}" {{ $inactivar }} onclick="this.form; return true;">Guardar</button>-->
                    <button type="button" class="btn btn-secondary "  onclick="SalirForm()">Salir</button>
                    <!--<button type="submit" class="btn btn-secondary "  onclick="FormularioDatosPrincipales.attr('novalidate');FormularioDatosPrincipales.action='{{ URL::to('/') }}/{{ strtolower($Data['titulo']) }} '; return true;">Salir</button>-->
                </div>
                @csrf
            </div>

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

    {{-- fin formulario --}}
</form>

@php
    //print_r($Data['v_menuxusuarios']);
@endphp
@if (Session::has('error'))
    <div class="modal fade" id="modalerror" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle"><strong>Valla Algo va mal... </strong></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    {{ Session::get('error') }}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endif
@if (Session::has('mensaje'))
    <div class="modal fade" id="modalmensaje" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle"><strong>En Hora Buena... </strong></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    {{ Session::get('mensaje') }}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endif
<div class="modal fade" id="modalterminos" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"aria-hidden="true" >
<div class="modal-dialog modal-dialog-centered modal-xl modal-dialog-scrollable" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle"><strong>Terminos y condiciones. </strong></h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            terminos
        </div>
        <div class="modal-footer">
            <div class="form-check">
                <input type="checkbox"  class="form-check-input" name="aceptarterminos" id="aceptarterminos">
                <label class="form-check-label">Acepto</label>
            </div>
            <button type="button" class="btn btn-primary" data-dismiss="modal"  onclick="ValidaTerminosModal()">Guardar</button>
        </div>
    </div>
</div>
</div>

<!--===============================================================================================-->
<script src="{{ URL::to('/') }}/vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
<script src="{{ URL::to('/') }}/vendor/animsition/js/animsition.min.js"></script>
<!--===============================================================================================-->
<script src="{{ URL::to('/') }}/vendor/bootstrap/js/popper.js"></script>
<script src="{{ URL::to('/') }}/vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
<script src="{{ URL::to('/') }}/vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
<script src="{{ URL::to('/') }}/vendor/daterangepicker/moment.min.js"></script>
<script src="{{ URL::to('/') }}/vendor/daterangepicker/daterangepicker.js"></script>
<!--===============================================================================================-->
<script src="{{ URL::to('/') }}/vendor/countdowntime/countdowntime.js"></script>
<!--===============================================================================================-->
<script src="{{ URL::to('/') }}/js/main.js"></script>
<!-- bs-custom-file-input -->
<script src="{{ URL::to('/') }}/plugins/bs-custom-file-input/bs-custom-file-input.min.js"></script>

<script>
    $(document).ready(function() {
        @if (Session::has('mensaje'))
            $('#modalmensaje').modal('toggle');
            alert('entro mensaje');
        @endif
        @if (Session::has('error'))
            $('#modalerror').modal('toggle');
            alert('entro error');
        @endif
        $(function () {
            bsCustomFileInput.init();
            });
        $('#diasdestacado').on('mouseup', function() {
            var key = $(this).val();
            //console.log("ENTRO "+key);
            $('#etiquetadias').text(key);

        });
        $('#ciudad').on('keyup', function() {
            var key = $(this).val();
            var dataString = key.trim();
            var json = {};
            json["pais"] = $("#pais").val();
            json["accion"] = "buscaciudad";
            json["buscar"] = dataString;
            if (dataString.length > 0) {
                //alert('ENTRO '+dataString.length );
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    type: "POST",
                    url: "{{ URL::to('/') }}/{{ strtolower($Data['nombreMenu']) }}/ajax",
                    data: json,
                    success: function(data) {
                        //Escribimos las sugerencias que nos manda la consulta
                        $('#suggestions').fadeIn(1000).html(data);
                        //Al hacer click en alguna de las sugerencias
                        $('.suggest-element').on('click', function() {
                            //Obtenemos la id unica de la sugerencia pulsada
                            var id = $(this).attr('id');
                            //Editamos el valor del input con data de la sugerencia pulsada
                            $('#ciudad').val($('#' + id).attr('ciudad'));
                            $('#idciudad').val($('#' + id).attr('idciudad'));
                            //Hacemos desaparecer el resto de sugerencias
                            $('#suggestions').fadeOut(1000);
                            return false;
                        });
                    }
                });
            }else{
                $('#ciudad').val('');
                $('#idciudad').val('');
            }
        });
    });
    function SalirForm(event) {
        window.location.replace("{{ URL::to('/') }}/{{ strtolower($Data['nombreMenu']) }}");
    }
    function ValidaTerminos(event) {
        var caract = new RegExp(/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/);
        var validaForm ="";
        var validaCheckBox = false;
        var nombre = $("#nombre").val();
        var idciudad = $("#idciudad").val();
        var nombrecontacto = $("#nombrecontacto").val();
        var emailcontacto = $("#emailcontacto").val();
        $("input:checkbox:checked").each(
            function() {
                //alert("El checkbox con valor " + $(this).val() + " está seleccionado");
                validaCheckBox = true;
            }
        );
        if(!validaCheckBox){validaForm=" Debe seleccionar al menos un servicio ";}
        if(emailcontacto.length==0){validaForm=" Debe indicar un Email para el contacto ";}else{if (!caract.test(emailcontacto)) {validaForm=" Debe indicar un Email Valido ";}}
        if(nombrecontacto.length==0){validaForm=" Debe indicar un nombre de contacto ";}
        if(idciudad.length==0){validaForm=" Debe indicar una ciudad valida ";}
        if(nombre.length==0){validaForm=" Debe indicar al menos un nombre valido ";}
        if( $('#aceptarterminos').prop('checked') && validaForm =="") {
            $('#FormularioDatosPrincipales').submit();
        }else if( !$('#aceptarterminos').prop('checked') && validaForm ==""){
            $('#modalterminos').modal('show');
        }else{
            alert(validaForm);
        }
    }
    function ValidaTerminosModal() {
        if( !$('#aceptarterminos').prop('checked') ) {
            alert("Debe Aceptar Los terminos y Condiciones para continuar");
        }else{
            ValidaTerminos();
        }
    }
</script>