@extends('template.layoutAdmin', ['activeButton'=>'servicios'])

@section('style')
    <link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.css" />

    <!-- If you use the default popups, use this. -->
    <link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.css" />
    <link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.css" />
    <style>
        .selectHead {
            -webkit-border-radius: 7px;
            margin-top: 5px;
        }

        .iconTop {
            height: 91px;
        }

        .activeOption {
            background: yellow !important;
        }

        .calendar {
            height: 500px;
        }

        .tui-full-calendar-dayname-date {
            font-size: 26px;
            display: none;
        }

        .tui-full-calendar-dayname-date-area {
            color: black;
        }

    </style>
@endsection

@section('title')
    {{  trans('horarios.horarios') }}
@endsection

@section('cabecera')
    <div class="row">
        <div class="col">
            <select name="tipHorario" id="tipHorario" class="form-control selectHead" onchange="onchangSelectHead(this)">
                <option value="0" {{ $general==true ? 'selected="1"' : ''}} selected> {{  trans('horarios.horario_general') }}
                </option>
                <option value="1" {{ $general == false? 'selected="1"' : ''  }}> {{  trans('horarios.horario_servicio') }}
                </option>
            </select>
        </div>
    </div>
    @include('system.Horarios.components.cabecera')
@endsection



@section('contenido')
    
    <div class="row">
        <div class="col-md-10">
            <h1> {{ trans('horarios.horarios')}}
                <small>{{ trans('horarios.mensajeAyuda') }}</small>
               
            </h1>
        </div>
        @if (!empty($generalServices))

        <div class="col-md-2 text-left">
            <div class="col">
                <div class="row">
                 <div class="col text-right mr-10">
                     <label class="switch">

                         <input  type="checkbox"
                                 name="ordenar"
                                 onclick="changeStateHorario('{!!$generalServices->idAbierto_servicios !!}')"
                                 id="ordenar" value=""
                                 class="success"
                                 {!!  $generalServices->state == 0 ? 'checked="true"': '' !!}

                                 >
                         <span class="slider round"  id="stateServiceColor"></span>
                     </label>
                 </div>
                </div>
                <div class="row ">
                     <div class="col text-right" id="stateServiceText">
                        {!!  $generalServices->state == 0 ?
                          trans('horarios.servicio_abierto') : trans('horarios.servicio_cerrado') !!}
                            <!-- i have any questions about that strings -->
                     </div>
                </div>
            </div>
         </div>

        @endif


    </div>
    {{-- @php
        dd($horario == [], empty($generalServices));
    @endphp --}}
    @if (($horario == [] || empty($generalServices)) && (request()->general == null || request()->general == false))
    <div class="row">
        <div class="col">
              <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{  trans('horarios.noHaySevicio') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
        </div>
    </div>
    @endif


    <div class="row">
        <div class="col">
            <div class="box">
                <div class="box-header text-right">
                    <!-- Button trigger modal -->
                        <!-- Button trigger modal -->
                        @if (Request::get('horario') == "ordenar"  || Request::get('horario') == "parallevar" ||  Request::get('horario') == "domicilios" || Request::get('general') == "true" )
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
                            <i class="fa fa-plus" aria-hidden="true"></i>

                        </button>
                @endif



                </div>

                <div class="box-body">

                    <div class="row">
                        <div class="col">
                            <div class="collapse mb-10" id="dowP">
                                <div class="card card-body">
                                    <div class="row">
                                        <div class="col">

                                        </div>

                                        <div class="col">

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div id="calendar" style="height: 800px;"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="staticBackdropLabel"> {{trans('horarios.agregar_horario')}}
        </h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form action="{{ route('horarios.restaurante.crear') }}" method="post" id="formHorario">

        <div class="modal-body">
            <div class="row">
                <div class="col">
                    <h3> {{  trans('horarios.desde') }}	</h3>
                </div>
            </div>
            @if (Request::get('general') == "true" )
            <input type="hidden" name="idEstadoHorario" id="horarioGeneral" value="0">
            @endif

            @if (Request::get('horario') == "ordenar"  || Request::get('horario') == "parallevar" ||  Request::get('horario') == "domicilios" )
            <input type="hidden" name="idEstadoHorario" id="horarioGeneral" value="1">
            @endif

            @if (Request::get('horario') == "ordenar" )
            <input type="hidden" name="idServicioHorario" id="idServicioHorario" value="22">
            @endif
            @if (Request::get('horario') == "parallevar"  )
            <input type="hidden" name="idServicioHorario" id="idServicioHorario" value="23">
            @endif
            @if (Request::get('horario') == "domicilios" )
            <input type="hidden" name="idServicioHorario" id="idServicioHorario" value="24">
            @endif
            <div class="row">
                <div class="col">
                    <div class="form-group">
                        <label for="dar"> {{  trans('horarios.dia_de_inicio') }} </label>
                        <select name="diaI" id="diaI" class="form-control selectHead">
                            <option value="DOMINGO"> {{  trans('horarios.domingo') }} </option>
                            <option value="LUNES"> {{  trans('horarios.lunes') }} </option>
                            <option value="MARTES"> {{  trans('horarios.martes') }}	</option>
                            <option value="MIERCOLES"> {{  trans('horarios.miercoles') }} </option>
                            <option value="JUEVES"> {{  trans('horarios.jueves') }}	</option>
                            <option value="VIERNES"> {{  trans('horarios.viernes') }} </option>
                            <option value="SABADO"> {{  trans('horarios.sabado') }}	</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <label for=""> {{  trans('horarios.hora') }}</label>
                    <select name="horasI" id="horasI" class="form-control selectHead">
                        <option value="01">01</option>
                        <option value="02">02</option>
                        <option value="03">03</option>
                        <option value="04">04</option>
                        <option value="05">05</option>
                        <option value="06">06</option>
                        <option value="07">07</option>
                        <option value="08">08</option>
                        <option value="09">09</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                    </select>
                </div>
                <div class="col">
                    <label for=""> {{  trans('horarios.minutos') }}	</label>
                    <select name="minutosI" id="minutosI" class="form-control selectHead">
                        <option value="00">00</option>
                        <option value="15">15</option>
                        <option value="30">30</option>
                        <option value="45">45</option>

                    </select>
                </div>
                <div class="col">
                    <label for=""> {{  trans('horarios.jornada') }}	</label>
                    <select name="jornadaI" id="jornadaI" class="form-control selectHead">
                        <option value="AM">AM</option>
                        <option value="PM">PM</option>
                    </select>
                </div>
            </div>
            <hr>

            <div class="row">
                <div class="col">
                    <h3> {{  trans('horarios.hasta') }}	</h3>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="form-group">
                        <label for="dar"> {{  trans('horarios.dia_final') }} </label>
                        <select name="diaF" id="diaF" class="form-control selectHead">
                            <option value="DOMINGO"> {{  trans('horarios.domingo') }} </option>
                            <option value="LUNES"> {{  trans('horarios.lunes') }} </option>
                            <option value="MARTES"> {{  trans('horarios.martes') }}	</option>
                            <option value="MIERCOLES"> {{  trans('horarios.miercoles') }} </option>
                            <option value="JUEVES"> {{  trans('horarios.jueves') }}	</option>
                            <option value="VIERNES"> {{  trans('horarios.viernes') }} </option>
                            <option value="SABADO"> {{  trans('horarios.sabado') }}	</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <label for=""> {{  trans('horarios.hora') }} </label>
                    <select name="horasF" id="horasF" class="form-control selectHead">
                        <option value="01">01</option>
                        <option value="02">02</option>
                        <option value="03">03</option>
                        <option value="04">04</option>
                        <option value="05">05</option>
                        <option value="06">06</option>
                        <option value="07">07</option>
                        <option value="08">08</option>
                        <option value="09">09</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                    </select>
                </div>
                <div class="col">
                    <label for=""> {{  trans('horarios.minutos') }}	</label>
                    <select name="minutosF" id="minutosF" class="form-control selectHead">
                        <option value="00">00</option>
                        <option value="15">15</option>
                        <option value="30">30</option>
                        <option value="45">45</option>

                    </select>
                </div>
                <div class="col">
                    <label for=""> {{  trans('horarios.jornada') }}	</label>
                    <select name="jornadaF" id="jornadaF" class="form-control selectHead">
                        <option value="AM">AM</option>
                        <option value="PM">PM</option>
                    </select>
                </div>
            </div>
        </div>
    </form>
        <div class="modal- text-center mb-10">

          <button type="submit" class="btn btn-primary" onclick="sendHorario()" style="background: green"> {{  trans('horarios.aceptar') }} </button>
        </div>

      </div>
    </div>
  </div>


<!-- Modal Options -->
<div class="modal fade" id="modalHorario" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="modalHorario" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
                   <h5 class="modal-title" id="staticBackdropLabel"> {{  trans('horarios.agregar_horario') }}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">

            <form action="" method="post" id="formHorarioEdit">

                {{-- <div class="modal-body"> --}}
                    <div class="row">
                        <div class="col">
                            <h3> {{  trans('horarios.desde') }}	</h3>
                        </div>
                    </div>
                    @if (Request::get('general') == "true" )
                    <input type="hidden" name="idEstadoHorario" id="horarioGeneral" value="0">
                    @endif
                    @if (Request::get('horario') == "ordenar"  || Request::get('horario') == "parallevar" ||  Request::get('horario') == "domicilios" )
                    <input type="hidden" name="idEstadoHorario" id="horarioGeneral" value="1">
                    @endif
                    @if (Request::get('horario') == null && Request::get('general') == null)
                    <input type="hidden" name="idEstadoHorario" id="horarioGeneral" value="xxxxxxx">
                    @endif
                    @if (Request::get('horario') == "ordenar" )
                    <input type="hidden" name="idServicioHorario" id="idServicioHorario" value="22">
                    @endif
                    @if (Request::get('horario') == "parallevar"  )
                    <input type="hidden" name="idServicioHorario" id="idServicioHorario" value="23">
                    @endif
                    @if (Request::get('horario') == "domicilios" )
                    <input type="hidden" name="idServicioHorario" id="idServicioHorario" value="24">
                    @endif


                    <input type="hidden" name="idActua" id="idActua" >

                    <div class="row">
                        <div class="col">
                            <div class="form-group">
                                <label for="dar"> {{  trans('horarios.dia_de_inicio') }} </label>
                                <select name="diaI" id="diaIEdit" class="form-control selectHead">

                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <label for=""> {{  trans('horarios.hora') }} </label>
                            <select name="horasI" id="horasIEdit" class="form-control selectHead">
                                <option value="01">01</option>
                                <option value="02">02</option>
                                <option value="03">03</option>
                                <option value="04">04</option>
                                <option value="05">05</option>
                                <option value="06">06</option>
                                <option value="07">07</option>
                                <option value="08">08</option>
                                <option value="09">09</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                            </select>
                        </div>
                        <div class="col">
                            <label for=""> {{  trans('horarios.minutos') }}	</label>
                            <select name="minutosI" id="minutosIEdit" class="form-control selectHead">
                                <option value="00">00</option>
                                <option value="15">15</option>
                                <option value="30">30</option>
                                <option value="45">45</option>

                            </select>
                        </div>
                        <div class="col">
                            <label for=""> {{  trans('horarios.jornada') }}	</label>
                            <select name="jornadaI" id="jornadaIEdit" class="form-control selectHead">
                                <option value="AM">AM</option>
                                <option value="PM">PM</option>
                            </select>
                        </div>
                    </div>
                    <hr>

                    <div class="row">
                        <div class="col">
                            <h3> {{  trans('horarios.hasta') }}	</h3>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="form-group">
                                <label for="dar"> {{  trans('horarios.dia_final') }} </label>
                                <select name="diaF" id="diaF" class="form-control selectHead">
                                    <option value="DOMINGO"> {{  trans('horarios.domingo') }} </option>
                                    <option value="LUNES"> {{  trans('horarios.lunes') }} </option>
                                    <option value="MARTES"> {{  trans('horarios.martes') }}	</option>
                                    <option value="MIERCOLES"> {{  trans('horarios.miercoles') }} </option>
                                    <option value="JUEVES"> {{  trans('horarios.jueves') }}	</option>
                                    <option value="VIERNES"> {{  trans('horarios.viernes') }} </option>
                                    <option value="SABADO"> {{  trans('horarios.sabado') }}	</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <label for=""> {{  trans('horarios.hora') }} </label>
                            <select name="horasF" id="horasFEdit" class="form-control selectHead">
                                <option value="01">01</option>
                                <option value="02">02</option>
                                <option value="03">03</option>
                                <option value="04">04</option>
                                <option value="05">05</option>
                                <option value="06">06</option>
                                <option value="07">07</option>
                                <option value="08">08</option>
                                <option value="09">09</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                            </select>
                        </div>
                        <div class="col">
                            <label for=""> {{  trans('horarios.minutos') }}	</label>
                            <select name="minutosF" id="minutosFEdit" class="form-control selectHead">
                                <option value="00">00</option>
                                <option value="15">15</option>
                                <option value="30">30</option>
                                <option value="45">45</option>

                            </select>
                        </div>
                        <div class="col">
                            <label for=""> {{  trans('horarios.jornada') }}	</label>
                            <select name="jornadaF" id="jornadaFEdit" class="form-control selectHead">
                                <option value="AM">AM</option>
                                <option value="PM">PM</option>
                            </select>
                        </div>
                    </div>
                {{-- </div> --}}
            </form>

        </div>
        <div class="modal-footer text-center">
            <button class="btn btn-danger" id="bntDelete" onclick="deletee()" style="background: red"><i class="fa fa-trash" aria-hidden="true"></i></button>
            <button type="button" class="btn btn-primary"  onclick="updated()"> {{  trans('horarios.actualizar') }} </button>

        </div>
      </div>
    </div>
  </div>
@endsection

@section('js')
    <script src="https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js"></script>
    <script src="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.min.js"></script>
    <script src="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.min.js"></script>
    <script src="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.js"></script>


    <script type="text/javascript">
        //inicializar
        var Calendar = tui.Calendar;

        $(document).ready(function() {
            //console.log("ready!");
            document.getElementById('horarioGeneral').value = document.getElementById('tipHorario').value

            var select = document.getElementById('tipHorario').value
            if (select == 0) {
                document.getElementById('cabeceraTop').style.display = 'none'
            } else {
                document.getElementById('cabeceraTop').style.display = 'block'

            }
        });

        var dateGlobal = new Date("2021/04/18")

        var calendar = new Calendar('#calendar', {
            defaultView: 'week',
            taskView: false,
            scheduleView: 'time', // Can be also ['allday', 'time']
            template: {
                monthDayname: function(dayname) {
                    return '<span class="calendar-week-dayname-name">' + dayname.label + '</span>';
                }
            },
            week: {
                daynames: [ '{{  trans('horarios.domingo') }}',  '{{  trans('horarios.lunes') }}',  '{{  trans('horarios.martes') }}',
                '{{  trans('horarios.miercoles') }}',  '{{  trans('horarios.jueves') }}',  '{{  trans('horarios.viernes') }}',  '{{  trans('horarios.sabado') }}'],
                startDayOfWeek: 0,
                narrowWeekend: false
            }
        });
        calendar.setDate(dateGlobal);


        //eventos
        function onchangSelectHead(sel) {
            //console.log(sel)
            document.getElementById('horarioGeneral').value = sel.value
            //Sss

            if({{$general == true?'true': 'false'}} != (sel.value == 0))
            {
                swal({
                    title: "Estás seguro de cambiar la configuracion de horarios?",
                    text: "Al cambiar la configuración, influye en cómo los clientes verán el restaurante abierto/cerrado para poder pedir en tu restaurante",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#0b4889",
                    cancelButtonColor: "#EE0404",
                    confirmButtonText: "Aceptar",
                    cancelButtonText: "Cancelar",
                },
                function(isConfirm) {
                    if (isConfirm) {
                        // swal("Deleted!", "Your imaginary file has been deleted.", "success");
                        swal.close();
                        if (sel.value == 0) {
                            document.getElementById('cabeceraTop').style.display = 'none'
                            window.location.href =  UrlHost_+"/administrator/horarios?general=true"
                        } else {
                            window.location.href =  UrlHost_+"/administrator/horarios?horario=ordenar"
                            // document.getElementById('cabeceraTop').style.display = 'block'
                        }
                    } else {
                        //  swal("Cancelled", "Your imaginary file is safe :)", "error");
                        swal.close();
                    }
                });
            }
        }
        var activeP = false;

        function abrirMenuAbrir() {
            var men = document.getElementById("dowP");
            if (activeP) {
                men.style.display = "block"
            } else {
                men.style.display = "none"
            }
            activeP = !activeP
        }

        function sendHorario(){
            var form = $("#formHorario");

            $.ajax({
                    url: UrlHost_+"/administrator/horarios/created",
                    data: form.serialize(),
                    type: 'post',
                    dataType: 'json',
                    headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    beforeSend: function () {
                        swal({
                            title:  '{{  trans('horarios.cargando') }}',
                             text:  '{{  trans('horarios.espere_un_momento') }}',
                             showConfirmButton: false
                        })
                    },
                    success: function(response)
                    {

                        console.log(response)
                        console.log(response.code)
                        if(response.code == 200){
                            swal({
                                    title:  '{{  trans('horarios.horario_guardado_correctamente') }}',
                                    showConfirmButton: false
                             })
                            setTimeout(function(){location.reload()}, 3000);
                        }else{
                            swal({
                                title:  'error',
                                text: response.message,
                            });
                        }

                    },
                    error: function(xhr)
                    {
                        console.log(xhr.responseJSON);
                        swal("Error", xhr.responseJSON.message, 'error');
                    }
                });
        }

        function updated(){
            var form = $("#formHorarioEdit");
            $.ajax({
                    url: UrlHost_+"/administrator/horarios/ajax/updated",
                    data: form.serialize(),
                    type: 'post',
                    dataType: 'json',
                    headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    beforeSend: function () {
                        swal({
                            title:  '{{  trans('horarios.cargando') }}',
                             text:  '{{  trans('horarios.espere_un_momento') }}',
                             showConfirmButton: false
                        })
                    },
                    success: function(response)
                    {
                        swal.close();
                        if(response.code == 200){
                            swal({
                                    icon: 'success',
                                    title: '{{  trans('horarios.horario_guardado_correctamente') }}',
                                    showConfirmButton: false
                             })
                            setTimeout(function(){location.reload()}, 3000);
                        }else{
                            swal({
                                title:  'error',
                                text: response.message,
                                icon: 'warning',
                                showCancelButton: true,
                            });
                        }

                    },
                    error: function(xhr)
                    {
                        console.log(xhr.responseJSON);
                        swal( "Error", xhr.responseJSON.message,  'error');
                    }
                });
        }
    </script>

<script>
    $(document).ready(function() {
        calendariosV2();
    })

    //creo los horarios
    var horarios=[]

    //eventos de click
    calendar.on('clickSchedule', function(event) {
        var schedule = event.schedule;
            //console.log(schedule)
            openModal(schedule.id)
        // open detail view
    });

    //calendarios view
    {{-- function ViewHorario(){
        console.log("1s")
        //limpio el calendario
        calendar.clear();

        //tomo el dia de la semana de hoy
        var diaSemana =  calendar.getDate().getDay();
        //empiezo a contar desde el dia de la semana 0 que es domingo
        var count = 0;
        //foreach para recorrer los horarios
        var horarios = {!! json_encode($horario)!!}
        var a = 0;
        // @if ($horario != null)

        //     @foreach($horario as $itemH)
        //         //obtengo el dia de hoy
        //         var diaHoy = calendar.getDate();
        //         //si el dia qu estoy contando es menor que el dia de la semana de hoy se lo va a restar
        //         if(count<diaSemana){
        //             diaHoy.setDate(diaHoy.getDate()-(diaSemana-count))
        //         }
        //         //si el dia de la semana contada es mayor poss se lo suma
        //         if(count > diaSemana){
        //             diaHoy.setDate(diaHoy.getDate()+(count-diaSemana))

        //         }
        //         var diaFinalJs = calendar.getDate()
        //         //si no tienen dia de fin entonces el dia final sera el mismo dia de la semana
        //         @if ($itemH->dia_fin != null)
        //         //si hay un dia final signifa que debo cambiar la forma de vista asi que obtengo el dia del inicio
        //         var diaSemanaInicial =  getDiaSemana("{{$itemH->dia}}")
        //         var diaHoy =  calendar.getDate();

        //         //si el dio de la semana regresada por el metodo es menor que el dia de hoy
        //         if(diaSemanaInicial < diaFinalJs.getDay() ){
        //                 //lo va a restar we
        //                 diaHoy.setDate(diaHoy.getDate()-(diaSemana-diaSemanaInicial))
        //             }
        //             if(diaSemanaInicial > diaFinalJs.getDay() ){
        //                 //lo va a restar we
        //                 diaHoy.setDate(diaHoy.getDate()+(diaSemanaInicial-diaSemana))

        //             }
        //             console.log(diaHoy.getDate())

        //         //=====================FINAL====================================================
        //         //obtengo el dia de la semana que manda el final
        //             var diaSemanaFinal = getDiaSemana("{{$itemH->dia_fin}}")
        //             //si el dio de la semana regresada por el metodo es menor que el dia de hoy
        //             if(diaSemanaFinal < diaFinalJs.getDay() ){
        //                 //lo va a restar we
        //                 diaFinalJs.setDate(diaFinalJs.getDate()-(diaSemana-diaSemanaFinal))
        //             }
        //             if(diaSemanaFinal > diaFinalJs.getDay() ){
        //                 //lo va a restar we
        //                 diaFinalJs.setDate(diaFinalJs.getDate()+(diaSemanaFinal-diaSemana))
        //             }
        //         @else
        //         ///si4 no hay dia final we metemos la fecha de hoy
        //         diaFinalJs =diaHoy
        //         @endif

        //         //FORMATEO DE INICIO
        //         //metemos la fecha de hoy y la formateamos
        //         //console.log(diaHoy.getUTCFullYear())
        //         //validacion mientras(preguntar al esteven)
        //         if((diaHoy.getMonth()+1) < 10){
        //             var DayStart = diaHoy.getFullYear()+"-0"+(diaHoy.getMonth()+1)

        //         }else{
        //         var DayStart = diaHoy.getFullYear()+"-"+(diaHoy.getMonth()+1)
        //         }

        //         if(diaHoy.getDate()<10){
        //             DayStart = DayStart  +"-0"+diaHoy.getDate()+"T"
        //         }else{
        //             DayStart = DayStart  +"-"+diaHoy.getDate()+"T"

        //         }
        //         //validamos si es pm en el inicio

        //         var horaI ={{ $itemH->hora_i }}

        //         //validamos si es pm y si lo es lo sumamos
        //         @if ($itemH->am_pm_i == "PM")
        //             horaI= horaI + 12
        //         @endif

        //         if(horaI < 10){
        //             horaI = "0" +horaI
        //         }
        //         @if ($itemH->minuto_i < 10)
        //         DayStart = DayStart + horaI + ":0"+{{ $itemH->minuto_i}}+":00"

        //         @else
        //         DayStart = DayStart + horaI + ":"+{{ $itemH->minuto_i}}+":00"

        //         @endif

        //         //FORMATO DE FINAL
        //         //metemos la fecha de hoy y la formateamos
        //         if((diaHoy.getMonth()+1) < 10){
        //             var DayEnd = diaFinalJs.getFullYear()+"-0"+(diaFinalJs.getMonth()+1)

        //         }else{
        //         var DayEnd = diaFinalJs.getFullYear()+"-"+(diaFinalJs.getMonth()+1)

        //         }

        //         if(diaFinalJs.getDate()<10){
        //             DayEnd = DayEnd  +"-0"+diaFinalJs.getDate()+"T"
        //         }else{
        //             DayEnd = DayEnd  +"-"+diaFinalJs.getDate()+"T"

        //         }
        //         //validamos si es pm en el final
        //         var horaF ={{ $itemH->hora_f }}

        //         //validamos si es pm y si lo es lo sumamos
        //         @if ($itemH->am_pm_f == "PM")
        //             horaF= horaF + 12
        //         @endif
        //         if(horaF < 10){
        //             horaF = "0" +horaF
        //         }
        //         @if ($itemH->minuto_f < 10)
        //         DayEnd = DayEnd + horaF + ":0"+{{(String)$itemH->minuto_f}}+":00"

        //         @else
        //         DayEnd = DayEnd + horaF + ":"+{{(String)$itemH->minuto_f}}+":00"

        //         @endif
        //         var color = "green";
        //         @if($itemH->cerrado  == 1)
        //             color = "red"
        //         @endif

        //         horarios.push({
        //             id: {{ $itemH->idHorario }},
        //             calendarId: '#calendar',
        //             title:  "{{  trans('horarios.horarios') }}",
        //             category: 'time',
        //             bgColor: color,
        //             isAllDay: false,
        //             color: 'white',
        //             dueDateClass: '',
        //             start:DayStart ,
        //             end:  DayEnd
        //         });
        //         count++;
        //     @endforeach
        //     calendar.createSchedules(horarios, true);
        //     calendar.render();
        // @endif
    }--}}

    function calendariosV2(){
        console.log("2s")

        calendar.clear();
        var count = 0;
        var horarios = {!! json_encode($horario)!!}
        var a = 0;

        horarios.forEach( value => {
            var DateInicio = calendar.getDateRangeStart();
            var DateFinal  = calendar.getDateRangeStart();
            console.log(DateInicio);
            console.log(DateFinal);
            var diasAsumarInicio = getDiaSemana(value.dia);


            var diasAsumarFinal= getDiaSemana(value.dia_fin);


            var HoraInicio = parseInt(value.hora_i);
            var JornadaInicio = value.am_pm_i;
            var MinutoIncio = parseInt(value.minuto_i);

            var HoraFinal = parseInt(value.hora_f);
            var JornadaFinal = value.am_pm_f;
            var MinutoFinal = parseInt(value.minuto_f);

            var start = "";
            var end   = "";
            console.log(value.dia)
            console.log(diasAsumarInicio)
            console.log(diasAsumarFinal)
            var diaInicioBB = dateGlobal.getDate() + diasAsumarInicio;
            var diaFInalbb = dateGlobal.getDate() + diasAsumarFinal;
            console.log(diaInicioBB)
            console.log(diaFInalbb)
            DateInicio.setDate(diaInicioBB);
            DateFinal.setDate(diaFInalbb);
            console.log(DateInicio.getDate())

            console.log(DateFinal.getDate())

            console.log(DateInicio);
            console.log(DateFinal);


            console.log(DateFinal.getDate())

            if (JornadaInicio == "PM") {
                HoraInicio = HoraInicio +12;
            }

            if(JornadaFinal == "PM" ){
                HoraFinal = HoraFinal +12;
            }

            start = DateInicio.getFullYear()+"-"
            end   = DateFinal.getFullYear()+"-"

            //VALID MES
            if ((DateInicio.getMonth()+1) < 10) {
                start = start+"0"+(DateInicio.getMonth()+1)
            }else{
                start = start+(DateInicio.getMonth()+1)
            }
            if((DateFinal.getMonth()+1)<10){
                end = end+"0"+(DateFinal.getMonth()+1)
            }else{
                end = end+(DateFinal.getMonth()+1)

            }
            //VALID DIA
            if (diaInicioBB < 10) {
                start = start+"-0"+diaInicioBB
            }else{
                start = start+"-"+diaInicioBB
            }
            if(diaFInalbb < 10 ){
                end = end+"-0"+diaFInalbb
            }else{
                end = end+"-"+diaFInalbb
            }
            start =start+"T"
            end = end+"T"

            //VALID HORA
            if (HoraInicio<10) {
                start = start+"0"+HoraInicio
            }else{
                start = start+HoraInicio
            }
            if (HoraFinal < 10) {
                end = end+"0"+HoraFinal
            }else{
                end =end+HoraFinal
            }
            //VALID MINUTOS
            if (MinutoIncio < 10) {
                start = start+":0"+MinutoIncio;
            }else{
                start = start+":"+MinutoIncio;
            }

            if (MinutoFinal < 10) {
                end = end+":0"+MinutoFinal;
            }else{
                end = end+":"+MinutoFinal;
            }

            start = start+":00"
            end = end+":00"
                console.log("======================")
                console.log("start "+ start)
                console.log("end " + end)
                console.log("======================")

            var color = "green";
            if(value.cerrado)
            {
                color = "red"
            }

            horarios.push({
                id: value.idHorario,
                calendarId: 'calendar',
                title:  "{{  trans('horarios.horarios') }}",
                category: 'time',
                bgColor: color,
                isAllDay: false,
                color: 'white',
                dueDateClass: '',
                start:start ,
                end:  end
            });
            count++;
        });

        calendar.createSchedules(horarios, true);
        calendar.render();
    }

    function getDiaSemana(dia){
        const dias = [ 'Domingo',  'Lunes',  'Martes',
        'Miercoles',  'Jueves',  'Viernes',  'Sabado'];
        var count =0
        var diaRet= 0
        for (let i = 0; i < dias.length; i++) {
            var res = String(dias[i])
            if(res.toLowerCase() == dia.toLowerCase()){
                return i;
            }
        }
    }
    var idGlob = 0;
    function openModal(id){
        //console.log(id)
        idGlob = id;
        document.getElementById("idActua").value = idGlob
        var data = {
            idHorario : id
        }
        $.ajax({
            url: UrlHost_+"/administrator/horarios/ajax/",
            data: data,
            type: 'get',
            dataType: 'json',
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function () {
                swal({
                    title: '{{  trans('horarios.cargando') }}',
                        text:  '{{  trans('horarios.espere_un_momento') }}',
                        showConfirmButton: false
                })
            },
            success: function(response)
            {
                swal.close();
                if(response.code == 200){
                    console.log(response.data[0])
                    var date = response.data[0];
                    // if(date.cerrado = 0){
                    //     document.getElementById("btnAbrirCerrar").innerHTML = '<i class="fa fa-toggle-off" aria-hidden="true"></i>'
                    //     document.getElementById("btnAbrirCerrar").style.backgroundColor = 'red'

                    // }else{
                    //     document.getElementById("btnAbrirCerrar").innerHTML = '<i class="fa fa-toggle-on" aria-hidden="true"></i>'
                    //     document.getElementById("btnAbrirCerrar").style.backgroundColor="green";

                    // }
                        const dias = [ "{{  trans('horarios.domingo') }}",  "{{  trans('horarios.lunes') }}",  "{{  trans('horarios.martes') }}",
                        "{{  trans('horarios.miercoles') }}",  "{{  trans('horarios.jueves') }}",  "{{  trans('horarios.viernes') }}",  "{{  trans('horarios.sabado') }}"];
                        const horas = ['01','02','03','04','05','06','07','08','09','10','11','12']
                        const minutos = ['00','15','30','45']
                        const jornada = ['AM','PM']
                        $("#diaIEdit").empty()
                        $("#diaFEdit").empty()
                        $.each(dias, function(j, diass){
                            if(date.dia == diass){
                                $("#diaIEdit").append("<option selected value='"+diass+"'>"+diass+"</option>");
                            }else{
                                $("#diaIEdit").append("<option value='"+diass+"'>"+diass+"</option>");
                            }

                            if(date.dia_fin == diass){
                                $("#diaFEdit").append("<option selected value='"+diass+"'>"+diass+"</option>");
                            }else{
                                $("#diaFEdit").append("<option value='"+diass+"'>"+diass+"</option>");
                            }
                        });
                    $("#horasIEdit").empty()
                        $("#horasFEdit").empty()
                        $.each(horas, function(j, horass){
                            if(date.hora_i == horass){
                                $("#horasIEdit").append("<option selected value='"+horass+"'>"+horass+"</option>");
                            }else{
                                $("#horasIEdit").append("<option value='"+horass+"'>"+horass+"</option>");
                            }

                            if(date.hora_f == horass){
                                $("#horasFEdit").append("<option selected value='"+horass+"'>"+horass+"</option>");
                            }else{
                                $("#horasFEdit").append("<option value='"+horass+"'>"+horass+"</option>");
                            }
                        });
                        $("#minutosIEdit").empty()
                        $("#minutosFEdit").empty()
                        $.each(minutos, function(j, minutoss){
                            if(date.minuto_i == minutoss){
                                $("#minutosIEdit").append("<option selected value='"+minutoss+"'>"+minutoss+"</option>");
                            }else{
                                $("#minutosIEdit").append("<option value='"+minutoss+"'>"+minutoss+"</option>");
                            }

                            if(date.minuto_f == minutoss){
                                $("#minutosFEdit").append("<option selected value='"+minutoss+"'>"+minutoss+"</option>");
                            }else{
                                $("#minutosFEdit").append("<option value='"+minutoss+"'>"+minutoss+"</option>");
                            }
                        });
                        $("#jornadaIEdit").empty()
                        $("#jornadaFEdit").empty()
                        $.each(jornada, function(j, jornadas){
                            if(date.am_pm_i == jornadas){
                                $("#jornadaIEdit").append("<option selected value='"+jornadas+"'>"+jornadas+"</option>");
                            }else{
                                $("#jornadaIEdit").append("<option value='"+jornadas+"'>"+jornadas+"</option>");
                            }

                            if(date.am_pm_f == jornadas){
                                $("#jornadaFEdit").append("<option selected value='"+jornadas+"'>"+jornadas+"</option>");
                            }else{
                                $("#jornadaFEdit").append("<option value='"+jornadas+"'>"+jornadas+"</option>");
                            }
                        });
                    $('#modalHorario').modal('toggle')
                }else{
                    swal({
                        title:  'error',
                        text: response.message,
                        icon: 'warning',
                        showCancelButton: true,
                    });
                }

            },
            error: function(xhr)
            {
                console.log(xhr.responseJSON);
                swal( "Error", xhr.responseJSON.message,  'error');
            }
        });
    }
    function abrirCerrar(){
        var data={
            id:idGlob
        }
        $.ajax({
            url: UrlHost_+"/administrator/horarios/ajaxs/abrir",
            data: data,
            type: 'get',
            dataType: 'json',
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function () {
                swal({
                    title:  '{{  trans('horarios.cargando') }}',
                        text:  '{{  trans('horarios.espere_un_momento') }}',
                        showConfirmButton: false
                })
            },
            success: function(response)
            {
                if(response.code == 200){
                location.reload()
                }else{
                    swal({
                        title: 'error',
                        text: response.message,
                        icon: 'warning',
                        showCancelButton: true,
                    });
                }

            },
            error: function(xhr)
            {
                console.log(xhr.responseJSON);
                swal("Error", xhr.responseJSON.message, "error");
            }
        });
    }

    function deletee(){
        var data={
            id:idGlob
        }
        $.ajax({
            url: UrlHost_+"/administrator/horarios/ajax/delete",
            data: data,
            type: 'post',
            dataType: 'json',
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function () {
                swal({
                    title:  '{{  trans('horarios.cargando') }}',
                        text:  '{{  trans('horarios.espere_un_momento') }}',
                        showConfirmButton: false
                })
            },
            success: function(response)
            {
                if(response.code == 200){
                        console.log("entra en 1 if");
                        location.reload()
                }else{
                    swal({
                        title: 'Error',
                        text: response.message,
                        icon: 'warning',
                        showCancelButton: true,
                    });
                }

            },
            error: function(xhr)
            {
                console.log(xhr.responseJSON);
                swal("Error", xhr.responseJSON.message, "error");
            }
        });
    }

    @if (!empty($generalServices))
        function changeStateHorario(ids) {
            var data={
                id:ids
            }
            $.ajax({
                url: UrlHost_+"/administrator/horarios/ajax/changeglobal",
                data: data,
                type: 'post',
                dataType: 'json',
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function () {
                    swal({
                        title:  '{{  trans('horarios.cargando') }}',
                        text:  '{{  trans('horarios.espere_un_momento') }}',
                        showConfirmButton: false
                    })
                },
                success: function(response)
                {
                    if(response.code == 200){

                        swal({
                            title:  '{{  trans('horarios.cambiado_correctamente') }}',
                            text:  '{{  trans('horarios.estado_cambiado_correctamente') }}',
                            icon: 'success',
                            showCancelButton: false,
                            showConfirmButton: true

                        });
                        //console.log(response)
                        if(response.data == 0){
                            document.getElementById("stateServiceColor").style.background = "green"
                            $("#stateServiceColor").attr('checked', true);
                            document.getElementById("stateServiceText").innerHTML = '{{  trans('horarios.servicio_abierto') }}'

                        }else{
                            document.getElementById("stateServiceColor").style.background = "red"
                            $("#stateServiceColor").attr('checked', false);
                            document.getElementById("stateServiceText").innerHTML = '{{  trans('horarios.servicio_cerrado') }}'


                        }

                    }else{
                        swal({
                            title: 'Error',
                            text: response.message,
                            icon: 'warning',
                            showCancelButton: true,
                        });
                    }

                },
                error: function(xhr)
                {
                    console.log(xhr.responseJSON);
                    swal("Error", xhr.responseJSON.message, "error");
                }
            });
        }
    @endif

</script>

@endsection