@extends('admin.layouts.app')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="javascript:void(0);">Inicio</a></li>
    <li class="breadcrumb-item" aria-current="page"><a href="{{route('hoteles.index')}}">Hoteles</a></li>
    
    <li class="breadcrumb-item active" aria-current="page"><span>Registrar</span></li>
@endsection

@section('css')
<link rel="stylesheet" type="text/css" href="{{asset('css/forms/switches.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('css/forms/theme-checkbox-radio.css')}}">
<style type="text/css">
    #imgPreview{
        width: 100%;
        text-align: center;
    }
    #map{
            height: 500px;
        }
    .img-vista img{
        min-width: 100%;
        max-width: 100%;
    }

    .imgPreview{
         max-height: 200px;
        min-height: 200px;
    }
    .imgPreview img{
        max-height: 200px;
        min-height: 200px;
    }
</style>
@endsection

@section('content')
<div class="row layout-spacing layout-top-spacing feather-icon">
    <div id="font-icon_feather" class="col-lg-12">
        <div class="statbox widget box box-shadow">
            <div class="widget-content widget-content-area bx-top-6">
                <div class="icon-section">
                    <div class="row">
                        <div class="col-xl-12">
                            
                            <center><h4>Registrar Hotel</h4></center>
                            <hr>

                            <form action="{{route('hoteles.store')}}" method="post" enctype="multipart/form-data">
                                @csrf
                                <div class="row">
                                    <div class="col-md-6">
                                        <h6>Nombre <strong class="text-danger">*</strong></h6>
                                        <input type="text" name="nombre" class="form-control" placeholder="Escriba el nombre del hotel" required="required"><br>
                                    </div>
                                    <div class="col-md-6">
                                        <h6>Estrellas <strong class="text-danger">*</strong></h6>
                                        <select class="form-control" name="estrellas" required="required">
                                            <option value="">seleccione una opción</option>
                                            <option value="0">0 estrellas</option>
                                            <option value="1">1 estrella</option>
                                            <option value="2">2 estrellas</option>
                                            <option value="3">3 estrellas</option>
                                            <option value="4">4 estrellas</option>
                                            <option value="5">5 estrellas</option>
                                        </select><br>
                                    </div>
                                </div>      

                                <div class="row">
                                    <div class="col-md-6">
                                        <h6>Categoría <strong class="text-danger">*</strong></h6>
                                        <select class="form-control" name="categoria" required="required">
                                            <option value="">seleccione una categoría</option>
                                            @foreach($categorias as $key)
                                            <option value="{{$key->id}}">{{$key->categoria}}</option>
                                            @endforeach
                                        </select><br>
                                    </div>
                                    <div class="col-md-6">
                                        <h6>Sitio Web </h6>
                                        <input type="text" name="web" maxlength="255" class="form-control" placeholder="Introduzca la dirección del sitio web "><br>
                                    </div>
                                </div>
                                <br>
                                <div class="row">
                                    <div class="col">
                                        <h6>Horario de entrada al hotel <strong class="text-danger">*</strong> </h6>
                                        <!-- Multiple inputs (addon on the right) -->
                                        <div class="input-group">
                                          <input class="form-control" required="required" type="time" value="15:00" name="entrada_desde">
                                          <input class="form-control" required="required" type="time" value="00:00" name="entrada_hasta">
                                          <div class="input-group-append">
                                            <span class="input-group-text">
                                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
                                            </span>
                                          </div>
                                        </div>
                                    </div>
                                </div>
                                <br>

                                <div class="row">
                                    <div class="col-md-6">
                                        <h6>Horario de salida del hotel <strong class="text-danger">*</strong> </h6>
                                        <!-- Multiple inputs (addon on the right) -->
                                        <div class="input-group">
                                          <input class="form-control" required="required" type="time" value="12:00" name="salida">
                                          
                                          <div class="input-group-append">
                                            <span class="input-group-text">
                                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
                                            </span>
                                          </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <h6>Vídeo de presentación (YouTube o Vimeo)</h6>
                                        <input class="form-control" name="video" type="text" placeholder="Ingrese la URL del Vídeo">
                                    </div>
                                </div>

                                <br>

                                <div class="row">
                                    <div class="col-md-6">
                                        <h6>Descripción corta del hotel</h6>
                                        <textarea name="descripcion_corta" class="form-control" placeholder="Describe tu hotel de manera breve max. 300 caracteres" maxlength="300" style="min-height: 150px !important;"></textarea>
                                    </div>
                                    <div class="col-md-6">
                                        <h6>Edad mínima para realizar el registro de la entrada al hotel <strong class="text-danger">*</strong></h6>

                                        <input type="number" name="edad_checkin" class="form-control" required="required" min="0" placeholder="Ej 18"><br>
                                        <h6>¿Ofreces cunas en el hotel? <strong class="text-danger">*</strong></h6>

                                            <div class="n-chk" style="display: inline-block;">
                                                <label class="new-control new-radio new-radio-text radio-classic-primary">
                                                  <input type="radio" class="new-control-input" name="cunas" value="S" required="required">
                                                  <span class="new-control-indicator"></span><span class="new-radio-content">Si</span>
                                                </label>
                                            </div>
                                            <div class="n-chk" style="display: inline-block;">
                                                <label class="new-control new-radio new-radio-text radio-classic-primary">
                                                  <input type="radio" class="new-control-input" name="cunas" value="N"  required="required">
                                                  <span class="new-control-indicator"></span><span class="new-radio-content">No</span>
                                                </label>
                                            </div>
                                    </div>
                                </div>

                                <br>
                                <div class="row img-color-div" id="img-color-null">
                                            <div class="col-md-12">
                                                <p class="mt-2 ml-1" style="display: inline-block;"><strong>Fotos</strong></p>
                                            </div>
                                            <div class="row m-3">
                                                <div id="imgPreview-" class="col-12"></div>
                                            </div>
                                            <div class="col-md-12">
                                                <br>
                                                <div class="cz-file-drop-area">
                                                  <div class="cz-file-drop-icon czi-cloud-upload"></div>
                                                  <span class="cz-file-drop-message">
                                                   Arrastra y suelta aquí para subir una foto</span>
                                                  <input type="file" 
                                                      accept="image/x-png,image/jpeg" 
                                                      class="cz-file-drop-input input-foto"
                                                      color="" 
                                                      multiple="multiple">
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div id="img-db"></div>
                                                <hr>
                                            </div>
                                </div>                                    
                                <br>
                                  <div class="col-md-6">
                                         <p class="mt-2 ml-1" style="display: inline-block;"><strong>Logo</strong></p>
                                        <div class="custom-file">
                                          <input class="custom-file-input {{ $errors->has('foto') ?  "is-invalid" : "" }}"
                                                 type="file"
                                                 id="file-input"
                                                 name="logo">
                                          <label class="custom-file-label" for="file-input">Subir logo...</label>

                                        </div>
                                        <p style="text-align: justify; font-size: 18px;">
                                            <br>
                                            Sube el logo de tu hotel en formato <strong>.SVG</strong> o <strong>.PNG.</strong> Dimensión recomendada <strong>100x100.</strong> <br>
                                            Max. <strong>100Kb</strong>
                                        </p>
                                    </div>
                                    <br>
                                <div class="row">
                                    <div class="col-12">
                                        <center><h4><strong>Servicios</strong></h4></center>
                                    </div>                                  
                                    <div class="row">
                                                                                @foreach($servicios as $key)
                                            @if(is_null($key->id_servicio) &&  $key->subservicios->count() >0 )
                                                <div class="col-md-12">
                                                    <br>
                                                    <img style="display: inline-block
                                                    width: 40px !important; position: absolute;" 
                                                    class="material-icons" 
                                                    src="{{asset($key->img)}}" 
                                                    data-toggle="tooltip" data-placement="top" 
                                                    title="{{$key->servicio}}">

                                                    <h5 style="display: inline-block;" class="ml-5 mt-2">
                                                        {{$key->servicio}}
                                                    </h5>
                                                    <br><br>

                                                    <div class="mt-1 ml-4 mb-1 row">
                                                        
                                                        @foreach($key->subservicios as $key)
                                                        <div class="col-md-6">
                                                            <div class="mt-1"></div>
                                                            <label class="switch s-outline s-primary mr-2" style="display: inline-block; margin-bottom: 0px">

                                                            <input type="checkbox" name="servicios[]" value="{{$key->id}}">

                                                            <span class="slider round"></span>
                                                            </label>

                                                            <h5 style="display: inline-block; padding: 0px;">{{$key->servicio}}
                                                            </h5> 
                                                            <br>
                                                        </div> 

                                                        @endforeach
                                                    </div>
                                                    <hr>
                                                    <br>
                                                </div>

                                            @else
                                                @if(is_null($key->id_servicio))
                                                                                                    @endif
                                            @endif                                            
                                        @endforeach

                                        <div class="col-md-12">
                                            <br>
                                            <img style="display: inline-block
                                                width: 40px !important; position: absolute;" 
                                                class="material-icons" 
                                                src="{{asset('img/servicios/check.svg')}}" 
                                                data-toggle="tooltip" data-placement="top" 
                                                title="Otros Servicios">

                                            <h5 style="display: inline-block;" class="ml-4 mt-2">
                                                Otros Servicios
                                            </h5>

                                            <div class="mt-1 ml-3 mb-1 row">
                                                @foreach($otros_servicios as $key)
                                                    <div class="col-md-6">
                                                        <div class="mt-1"></div>
                                                        <label class="switch s-outline s-primary mr-2" style="display: inline-block; margin-bottom: 0px">

                                                        <input type="checkbox" name="servicios[]" value="{{$key->id}}">

                                                        <span class="slider round"></span>
                                                        </label>
                                                        
                                                        <h5 style="display: inline-block; padding: 0px;">{{$key->servicio}}
                                                        </h5>
                                                        
                                                    </div>                                     
                                                @endforeach                                              
                                            </div>
                                            <hr> 
                                        </div>
                                    </div>
                                </div>
                                <br>
                                <div class="row">
                                    <div class="col-md-6">
                                        <h6>Teléfono <strong class="text-danger">*</strong></h6>
                                        <input type="number" name="telefono[]" class="form-control telefono" placeholder="Introduzca su número de teléfono" required=""><br>
                                    </div>

                                    <div class="col-md-6">
                                        <h6>Correo electrónico <strong class="text-danger">*</strong></h6>
                                        <input type="email" name="email[]" class="form-control email" placeholder="Introduzca su correo electrónico" required=""><br>
                                    </div>
                                </div>

                                <div id="add_contacto"></div>

                                <div class="row">
                                    <div class="col">
                                        <center>
                                            <a href="javascript:add_contacto()" class="btn btn-outline-primary mb-2">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                                                Añadir más contactos
                                            </a>
                                        </center>
                                    </div>
                                </div>

                                <br>

                                <div class="row">
                                    <div class="col-md-6">
                                        <h6>Departamento <strong class="text-danger">*</strong></h6>
                                        <select class="form-control" name="departamento" id="departamento">
                                            <option>Selecciona una opción</option>
                                            @foreach($departamentos as $key)
                                            <option value="{{$key->id}}">{{$key->departamento}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <h6>Municipio <strong class="text-danger">*</strong></h6>
                                        <select class="form-control" name="municipio" id="municipio">
                                            <option value="">Seleccione una opción</option>
                                        </select>
                                    </div>
                                </div>
                                 <br>
                                   <div class="row">
                                        <div class="col-md-6">
                                        <h6>Dirección</h6>
                                        <textarea name="direccion" class="form-control" placeholder="Ingresa la dirección max 300 caracteres" maxlength="300" style="min-height: 150px !important;"></textarea>
                                    </div>
                                </div>
                                <br>
                                <div class="row">
                                    <div class="col-md-12">
                                        <h6>Geolocalización </h6>
                                        <input type="hidden" name="longitud" id="longitud" value="-90.2307587">
                                        <input type="hidden" name="latitud" id="latitud" value="15.7834711">
                                        <p>Arrastre el marcado para establecer la dirección exacta de su negocio o empresa. Esto ayudará a que los usuarios encuentren más fácil tu ubicación y poder canjear los cupones</p>
                                        <div id="map"></div>
                                    </div>
                                </div>
                                <br>
                                <br>
                                <div class="row">
                                    <div class="col-12">
                                        <center><h4><strong>Tarjetas que acepta el hotel</strong></h4></center>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="p-5 row">
                                            @foreach($tarjetas as $key)
                                                <div class="col-md-6">
                                                    <label class="switch s-outline s-primary mr-2" style="display: inline-block; margin-bottom: 0px">
                                                        <input type="checkbox" name="tarjetas[]" value="{{$key->id}}">
                                                        <span class="slider round"></span>
                                                    </label>
                                                    <h5 style="display: inline-block;padding: 0px;"><img src="{{asset($key->img)}}"></h5>
                                                    <br><br>
                                                </div>
                                            @endforeach
                                        </div>                                        
                                    </div>
                                    <div class="col-md-6">
                                        <br>
                                        <center>
                                            <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 24 24" fill="none" stroke="#0e1726" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-credit-card"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line></svg>
                                        </center>
                                    </div>
                                </div>
                                <br>
                                <div class="row">
                                    <div class="col-md-6">                                        
                                        <h6>¿Aceptas mascotas? <strong class="text-danger">*</strong></h6>
                                        <select class="form-control" name="mascota" id="mascota" required="required">
                                            <option value="">Seleccione una opción</option>
                                            <option value="S">Si</option>
                                            <option value="N">No</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6">                                        
                                        <h6>¿Las mascotas posee un costo adicional? <strong class="text-danger">*</strong></h6>
                                        <select class="form-control" name="mascota_costo" disabled="disabled" id="mascota_costo" required="required">
                                            <option value="">Seleccione una opción</option>
                                            <option value="S">Si</option>
                                            <option value="N">No</option>
                                        </select>
                                    </div>
                                </div>
                                <br>
                                <div class="row">
                                    <div class="col-md-6">
                                        <h6>¿Tienes una edad mínima para el check-in ?  <strong class="text-danger">*</strong> </h6>
                                        <select class="form-control" name="edad" id="edad" required="required">
                                            <option value="">Seleccione una opción</option>
                                            <option value="S">Si</option>
                                            <option value="N">No</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <h6>¿Seleccione una edad mínima <strong class="text-danger">*</strong> </h6>
                                        <select class="form-control" name="edad_minima" disabled="disabled" id="edad_minima" required="required">
                                            <option value="">Seleccione una edad mínima</option>
                                            <option value="0">0 años</option>
                                            <option value="1">1 año</option>
                                            <option value="2">2 años</option>
                                            <option value="3">3 años</option>
                                            <option value="4">4 años</option>
                                            <option value="5">5 años</option>
                                            <option value="6">6 años</option>
                                            <option value="7">7 años</option>
                                            <option value="8">8 años</option>
                                            <option value="9">9 años</option>
                                            <option value="10">10 años</option>
                                            <option value="11">11 años</option>
                                            <option value="12">12 años</option>
                                            <option value="13">13 años</option>
                                            <option value="14">14 años</option>
                                            <option value="15">15 años</option>
                                            <option value="16">16 años</option>
                                            <option value="17">17 años</option>
                                            <option value="18">18 años</option>
                                        </select>
                                    </div>
                                </div>
                                <br>
                                <div class="row">
                                @if(Auth::user()->rol_id==1)
                                    <div class="col-md-6">
                                        <h6>¿El hotel es de su propiedad? <strong class="text-danger">*</strong></h6>
                                            <div class="n-chk">
                                                <label class="new-control new-radio new-radio-text radio-classic-primary">
                                                  <input type="radio" class="new-control-input" name="reclamar" value="N">
                                                  <span class="new-control-indicator"></span><span class="new-radio-content">Si</span>
                                                </label>
                                            </div>
                                            <div class="n-chk">
                                                <label class="new-control new-radio new-radio-text radio-classic-primary">
                                                  <input type="radio" class="new-control-input" name="reclamar" value="S" checked>
                                                  <span class="new-control-indicator"></span><span class="new-radio-content">No</span>
                                                </label>
                                            </div>
                                    </div>
                                @endif

                                    <div class="col-md-6">
                                        <h6>Recomendado  por :</h6>
                                        @if(Auth::user()->rol_id!=1)
                                        <small>Requiere aprobación del administrador</small><br>
                                        @endif
                                        @foreach($empresas as $key)
                                            <label class="switch s-outline s-primary mr-2" style="display: inline-block; margin-bottom: 0px">
                                                    <input type="checkbox" name="empresa[]" value="{{$key->id}}">
                                                    <span class="slider round"></span>
                                                </label>
                                                <h5 style="display: inline-block; padding: 0px;">{{$key->empresa}}</h5><br><br>
                                        @endforeach
                                    </div>
                                </div>
                                <br>
                                <div class="row">
                                    <div class="col">
                                        <h6>Información importante</h6>
                                        <textarea class="form-control" name="informacion_importante" placeholder="Describa una información importante que los huéspedes tenga que saber " style="min-height: 150px;"></textarea>
                                    </div>
                                </div>
                                <br>
                                <div class="row">
                                    <div class="col">
                                        <h6>Aviso importante</h6>
                                        <textarea class="form-control" name="aviso_importante" placeholder="Describa un aviso importante para los huéspedes" style="min-height: 150px;"></textarea>
                                    </div>
                                </div>
                                <br>
                                <br>
                                <div class="row">
                                    <div class="col">
                                        <h6>Descripción</h6>
                                        <textarea class="form-control" placeholder="Describa la respuesta de la pregunta" name="descripcion" id="respuesta"></textarea><br>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col">
                                        <button type="submit" class="btn btn-primary float-right">Registrar</button>
                                    </div>
                                </div>
                                <input type="hidden" name="total" id="total" value="1">
                            </form>                                         
                        </div>
                    </div>
                </div>         
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
    <script type="text/javascript" src="{{asset('js/ckeditor/ckeditor.js')}}"></script>
    <script type="text/javascript">
        CKEDITOR.replace('respuesta');
    </script>
       <script type="text/javascript">
    var departamentos = [
          ];

    $('#departamento').change(function(){

      var value = $(this).val();

      if (value=='') {

        var option = '<option value="">Selecciona una opción</option>';
        $('#municipio').html(option);

      }else{
        var option = '<option value="">Selecciona una opción</option>';

        var municipios = departamentos[value - 1].municipios;

        municipios.forEach(function(element){
          option = option + '<option value="'+element.id+'">'+element.municipio+'</option>';
        });

        $('#municipio').html(option);
      }
    });    

    var total = 1;
    var id_contacto = 0;

    function add_contacto(){
        
        $('#add_contacto').before(`

            <div class="row" id="contacto-${id_contacto}">
                <div class="col-md-5">
                    <h6>Teléfono </h6>
                    <input type="number" name="telefono[]" class="form-control telefono form-contacto-${id_contacto}" placeholder="Introduzca su número de teléfono"><br>
                </div>

                <div class="col-md-5">
                    <h6>Correo electrónico </h6>
                    <input type="email" name="email[]" class="form-control email form-contacto-${id_contacto}" placeholder="Introduzca su correo electrónico"><br>
                </div>

                <div class='col-md-2'>
                    <center>
                        <br>
                        <a href="javascript:delete_contacto(${id_contacto})" class="btn btn-outline-danger mt-2">
                           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle table-cancel"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
                           Eliminar
                        </a><br>
                    </center>
                </div>

            </div>
        `);
        total = total + 1;
        id_contacto = id_contacto + 1;
        $('#total').val(total);
    }

    function delete_contacto(id){

        $('.form-contacto-'+id).prop('disabled',true);
        total = total -1;
        $('#total').val(total);
        $('#contacto-'+id).css({'display':'none'});
    }

  </script>