

<?php $__env->startSection('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>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('css'); ?>
<link rel="stylesheet" type="text/css" href="<?php echo e(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>
  
<?php $__env->stopSection(); ?>

<?php $__env->startSection('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>
                                    <?php $__currentLoopData = $hoteles; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <option value="<?php echo e($key->id); ?>"><?php echo e($key->nombre); ?></option> 
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </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>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('script'); ?>
	<script src="<?php echo e(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 = [
            <?php  
                foreach ($hoteles as $key) {

                    $habitaciones = '';

                    foreach ($key->habitaciones as $key2) {
                        $habitaciones = $habitaciones.'
                            {
                                id: '.$key2->id.',
                                habitacion: "'.$key2->nombre.'"
                            },
                        ';
                    }

                    $habitaciones = '['.$habitaciones.']';

                    echo "
                        {
                            id: ".$key->id.",
                            hotel: '".$key->nombre."',
                            habitaciones: ".$habitaciones."
                        },
                    ";
                }
            ?>
        ];
        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:'<?php echo route('disponibilidad.store'); ?>',       
                    type:'post',  
                    data:{
                      id:habitacion,
                      hotel:hotel,
                      check_in:check_in,
                      check_out:check_out
                    },   
                    success: function (response) {  

                        if (response==1) {
                            $('#spinner-add').css({'display':'none'});    
                            Snackbar.show({
                                text: `No hay habitaciones disponible para la fecha indicada`,
                                pos: 'bottom-right',
                                actionText:"Ok"
                            });
                        }

                        if (response==0) {
                            $('#spinner-add').css({'display':'none'});  
                             Snackbar.show({
                                text: `Operación realizada con éxito`,
                                pos: 'bottom-right',
                                actionText:"Ok"
                            });  
                            comprobar();
                        }                                                                     
                    },
                 });
                }

            }
        }

        function comprobar () {

            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{
                    $('#spinner').css({'display':'block'});
                    $('#calendario').fullCalendar('removeEvents');
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')     
                        }
                    });                   

                  $.ajax({
                    url:'<?php echo route('disponibilidad.disponibilidad'); ?>',       
                    type:'post',  
                    data:{
                      id:habitacion,
                      hotel:hotel,
                      check_in:check_in,
                      check_out:check_out
                    },   
                    success: function (response) {  
                        $('#disponibilidad_habitaciones').html(response.disponible); 
                         var events = [];
                            var obj = '';
                            var data = response.data;
                            
                            data.forEach(function(element){
                                obj = {
                                    id: element.id,
                                    title: moment(moment(element.check_in, 'YYYY-MM-DD')).format('DD-MM-YYYY')+' al '+moment(moment(element.check_out, 'YYYY-MM-DD')).format('DD-MM-YYYY'),
                                    start: element.check_in,
                                    end:   element.check_out,
                                    className: "bg-dark",
                                    description: 'Una habitación se encuentra reservada desde el '+moment(moment(element.check_in, 'YYYY-MM-DD')).format('DD-MM-YYYY')+' hasta el '+moment(moment(element.check_out, 'YYYY-MM-DD')).format('DD-MM-YYYY')+'. Si desear remover del calendario, por favor, haga clic en ella y proceda a eliminar'
                                }
                                events.push(obj);
                            });
                           
                            $('#calendario').fullCalendar('addEventSource',events);   
                            $('#spinner').css({'display':'none'});                                               
                    },
                 });
                }
            }

        }

        function eliminar (id,title){
            swal({   
                title: "¿Estás seguro?",
                text: "¿Deseas remover del calendario a: "+title+" ?",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Si, eliminar!",
                cancelButtonText: "No, cancelar!",
                closeOnConfirm: false,
                closeOnCancel: false 
            }, function(isConfirm){
                if (isConfirm) {
                     swal.close();
                    $('#spinner-eliminar').css({'display':'block'});
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')     
                        }
                    });

                    $.ajax({
                    url:'<?php echo route('disponibilidad.eliminar'); ?>',       
                    type:'post',  
                    data:{
                      id:id,
                    },   
                    success: function (response) {  
                        $('#spinner-eliminar').css({'display':'none'});
                       
                        Snackbar.show({
                            text: `Se eliminó del calendario con éxito`,
                            pos: 'bottom-right',
                            actionText:"Ok"
                        });                       
                       comprobar();
                    },
                 });                    
                } else {
                    swal("Cancelado", "No re realizaron cambios en el calendario", "error");
                }
            });
        }

    </script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('admin.layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\xampp\htdocs\guatehoteles\resources\views/admin/disponibilidad/index.blade.php ENDPATH**/ ?>