@extends('admin.layouts.app')

@section('breadcrumb')
	<li class="breadcrumb-item"><a href="javascript:void(0);">Inicio</a></li>
    <li class="breadcrumb-item active" aria-current="page"><span>Disponibilidad</span></li>
@endsection

@section('css')
<link rel="stylesheet" type="text/css" href="{{asset('css/widgets/modules-widgets.css')}}">  
<link href="/plugins/fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css" />
<link href="/plugins/fullcalendar/custom-fullcalendar.advance.css" rel="stylesheet" type="text/css" />
<link href="/plugins/flatpickr/flatpickr.css" rel="stylesheet" type="text/css">
<link href="/plugins/flatpickr/custom-flatpickr.css" rel="stylesheet" type="text/css">

<style type="text/css">
    .ocupado{
        background: #1b55e2;
        color: #fff;
    }
</style>
  
@endsection

@section('content')
    <div style="background: rgba(0,0,0,0.5); position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; padding: 50px; z-index: 4000; display: none;" id="spinner">      
        <center>
          <div class="spinner-border text-white mr-2 mt-5 mb-4 align-self-center loader-lg" style="width: 10em !important; height: 10em !important;"></div>
          <h2 class="text-white"><strong>Comprobando disponibilidad...</strong></h2>
          <strong class="text-white">Por favor, espere</strong><br>          
        </center>
    </div>
    <div style="background: rgba(0,0,0,0.5); position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; padding: 50px; z-index: 4000; display: none;" id="spinner-eliminar">      
        <center>
          <div class="spinner-border text-white mr-2 mt-5 mb-4 align-self-center loader-lg" style="width: 10em !important; height: 10em !important;"></div>
          <h2 class="text-white"><strong>Eliminando del calendario...</strong></h2>
          <strong class="text-white">Por favor, espere</strong><br>          
        </center>
    </div>
    <div style="background: rgba(0,0,0,0.5); position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; padding: 50px; z-index: 4000; display: none;" id="spinner-add">      
        <center>
          <div class="spinner-border text-white mr-2 mt-5 mb-4 align-self-center loader-lg" style="width: 10em !important; height: 10em !important;"></div>
          <h2 class="text-white"><strong>Añadiendo al calendario...</strong></h2>
          <strong class="text-white">Por favor, espere</strong><br>          
        </center>
    </div>
	<br><br>
	<div class="row analytics">                    
                    <div class="col-md-8">
                        <div class="row">
                            <div class="col-md-12">
                                <center><h4>Disponibilidad</h4></center>
                                <br></div>
                            <div class="col-md-6">
                                <h6>Seleccione un hotel <strong class="text-danger">*</strong></h6>
                                <select class="form-control" id="hotel">
                                    <option value="">Seleccione un Hotel</option>
                                    @foreach($hoteles as $key)
                                        <option value="{{$key->id}}">{{$key->nombre}}</option> 
                                    @endforeach
                                </select><br>
                            </div> 

                            <div class="col-md-6">
                                <h6>Habitación <strong class="text-danger">*</strong></h6>
                                <select class="form-control" id="habitacion">
                                    <option value="">Seleccione una habitación</option>
                                </select>
                            </div>                            
                                                        
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <br>
                                <h6>Fecha de llegada <strong class="text-danger">*</strong></h6>
                                  <div class="input-group mb-0">
                                    <div class="input-group-prepend">
                                      <div class="input-group-text sh-l">
                                        <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-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
                                      </div>
                                    </div>
                                    <input type="date" class="form-control sh-r" placeholder="Fecha de entrada" id="check_in">
                                  </div>
                            </div>
                            <div class="col-md-6">
                                <br>
                                <h6>Fecha de salida <strong class="text-danger">*</strong></h6>
                                  <div class="input-group mb-0">
                                    <div class="input-group-prepend">
                                      <div class="input-group-text sh-l">
                                        <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-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
                                      </div>
                                    </div>
                                    <input type="date" class="form-control sh-r" placeholder="Fecha de entrada" id="check_out">
                                  </div>        
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col">
                                <center>
                                    <button class="btn btn-primary" onclick="comprobar();">Comprobar disponibilidad</button>
                                </center>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="widget widget-one_hybrid widget-followers">
                            <div class="widget-heading">
                                <div class="w-icon">
                                    <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-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>         
                                </div>
                                <p class="w-value" id="disponibilidad_habitaciones">0</p>
                                <h5 class="">Habitaciones Disponibles</h5>
                            </div>
                            <div class="widget-content">    
                                <div class="w-chart">
                                 <div id="hybrid_followers"></div>
                                </div>
                            </div>
                        </div>
                    </div>
    </div>  

            <div class="row layout-top-spacing">
                    <div class="col-xl-12 col-lg-12 col-md-12">
                        <div class="statbox widget box box-shadow">
                            <div class="widget-content widget-content-area" style="min-height: 400px !important;">
                                <div class="calendar-upper-section">
                                    <div class="row">
                                        <div class="col-md-8 col-12">
                                            <div class="labels">                                                
                                                <p class="label label-dark">Ocupado</p>
                                            </div>
                                        </div>                                                
                                        <div class="col-md-4 col-12">
                                            <div class="form-horizontal mt-md-0 mt-3 text-md-right text-center">
                                                <button class="btn btn-primary" onclick="add();"><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-calendar mr-2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> Añadir al calendario</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="calendario" style="min-height: 400px !important;"></div>
                            </div>
                        </div>
                    </div>

                   

            </div>

@endsection

@section('script')
	<script src="{{asset('js/widgets/modules-widgets.js')}}"></script>


    <script src="/plugins/fullcalendar/moment.min.js"></script>
    <script src="/plugins/flatpickr/flatpickr.js"></script>
    <script src="/plugins/fullcalendar/fullcalendar.min.js"></script>
    <script src="/plugins/fullcalendar/custom-fullcalendar.advance.js"></script>
    <script type="text/javascript">

        var calendario = $('#calendario').fullCalendar({
            dayNames: ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'],
            dayNamesShort: ['Dom','Lun','Mar','Mie','Jue','Vie','Sáb'],
            monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
            monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
            buttonText: {
                today:    'Hoy',
                month:    'Mes',
                week:     'Semana',
                day:      'Día',
                list:     'Lista'
            },
            height: 'auto',
            events:[],
            eventMouseover: function(event, jsEvent, view) {
	            $(this).attr('id', event.id);

	            $('#'+event.id).popover({
	                template: '<div class="popover popover-primary" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>',
	                title: event.title,
	                content: event.description,
	                placement: 'top',
	            });

	            $('#'+event.id).popover('show');
	        },
		    eventMouseout: function(event, jsEvent, view) {
	            $('#'+event.id).popover('hide');
	        },
            eventClick: function(info){
                eliminar(info.id,info.title);
                console.log(info.id);
            },
        });


        var hoteles = [
                    ];
        console.log(hoteles);

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

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

              if (value=='') {

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

              }else{

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

                var habitacion = hoteles.filter(element => element.id == value);
                habitacion = habitacion[0].habitaciones;

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

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

        function add(){
            var hotel = $('#hotel').val();
            var habitacion = $('#habitacion').val();
            var check_in = $('#check_in').val();
            var check_out = $('#check_out').val();

            if (hotel=='' || habitacion=='' || check_in=='' || check_out=='') {

                Snackbar.show({
                    text: `Por favor, llene todo los campos`,
                    pos: 'bottom-right',
                    actionText:"Ok"
                });

            }else{

                if (check_in > check_out) {
                     Snackbar.show({
                        text: `Fecha invalida, la fecha de entrada tiene que ser menos a la fecha de salida `,
                        pos: 'bottom-right',
                        actionText:"Ok"
                    });
                }else{                   
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')     
                        }
                    });                   
                  $('#spinner-add').css({'display':'block'});
                  $.ajax({
                    url:'