@extends('layouts.bucketadmin')

@prepend('styles')
{!! Html::style('css/bootstrap-reset.css') !!}
{!! Html::style('css/style.css') !!}
{!! Html::style('css/style-responsive.css') !!}
{!! Html::style('bs3/css/bootstrap.min.css') !!}
{!! Html::style('js/bootstrap-fileupload/bootstrap-fileupload.css') !!}

<!--  -->
{!! Html::style('js/jquery-ui/jquery-ui-1.10.1.custom.min.css') !!}
{!! Html::style('js/jvector-map/jquery-jvectormap-1.2.2.css') !!}
{!! Html::style('css/clndr.css') !!}
{!! Html::style('js/css3clock/css/style.css') !!}
{!! Html::style('js/morris-chart/morris.css') !!}
{!! Html::style('css/select2.min.css') !!}
<!--      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css"> -->
<style>
      /* Always set the map height explicitly to define the size of the div
      * element that contains the map. */
      #map {
        height: 100%;
      }
      #infowindow-content .title {
        font-weight: bold;
      }

      #infowindow-content {
        display: none;
      }

      #map #infowindow-content {
        display: inline;
      }

      .pac-card {
        margin: 10px 10px 0 0;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        background-color: #fff;
        font-family: Roboto;
      }

      #pac-container {
        padding-bottom: 12px;
        margin-right: 12px;
      }

      .pac-controls {
        display: inline-block;
        padding: 5px 11px;
      }

      .pac-controls label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
      }

      #pac-input {
        background-color: #fff;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        margin-left: 12px;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: 400px;
      }

      #pac-input:focus {
        border-color: #4d90fe;
      }

      #title {
        color: #fff;
        background-color: #4d90fe;
        font-size: 25px;
        font-weight: 500;
        padding: 6px 12px;
      }
      #target {
        width: 345px;
      }

    </style>


    @endprepend

    @section('container')
    <section id="container">
      @include('bucketadmin.header')
      @include('bucketadmin.sidebar-left')

      <section id="main-content" class="merge-left">
        <section class="wrapper" >		      	
          @yield('template-content')
        </section>
      </section>

      @include('bucketadmin.sidebar-right')
    </section>
    @endsection

    @prepend('scripts')

    <!-- <script src="{{ mix('js/app.js') }}"></script> -->
    <script src="/js/app.js?v=1.0"></script> 
    
    
    
    <script>
      $(document).ready(function() {
        $('#institute_id').change(function(){
          $('.institute_programs').hide();
          $('#' + $(this).val()).show();
        });
      });
    </script>
    
    {!! Html::script('js/jquery-1.10.2.min.js') !!}
    {!! Html::script('js/jquery.js') !!}
    {!! Html::script('js/jquery-ui/jquery-ui-1.10.1.custom.min.js') !!}
    {!! Html::script('bs3/js/bootstrap.min.js') !!}           
    {!! Html::script('js/jquery.dcjqaccordion.2.7.js') !!}
    {!! Html::script('js/jQuery-slimScroll-1.3.0/jquery.slimscroll.js') !!}
    {!! Html::script('js/jquery.nicescroll.js') !!}
    {!! Html::script('js/jquery.scrollTo.min.js') !!}
    {!! Html::script('js/scripts.js') !!}
    {!! Html::script('js/jquery.customSelect.min.js') !!}


    {!! Html::script('js/select2.min.js') !!}
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> -->
    <script>
      $(document).ready(function(){
        $('#record_clients').select2();
      });
    </script>
    <script>
      $(document).ready(function(){
        $('#user_id').select2();
      });
    </script>
    <script>
      $(function() {
        var user_id;
        var start_date;
        $('#comprobar_horarios').click(function() {
          user_id = $('#user_id').val();
          start_date = $('#start_date').val();
          axios.get('/appointments/horarios_disponibles', {
            params: {
              user_id: user_id,
              start_date: start_date,
            }
          })
          .then(function (response) {
            console.log(response.data);
            if (response.data.length == 0) {
              $('#horarios').html('<h5 class="text-center text-danger"><strong>No hay horarios disponibles, por favor seleccione otro día u otro usuario</strong></h5>');
            }else{
              let select = '<select id="select_horarios" name="horario"  style="width: 100%;">';
              $(response.data).each(function (i, v) {

                let hora = v.split('-')[1];
                onehour = parseFloat(hora) + 1;
                select += '<option value="' + v + '">' +'De '+  hora + ' a '  + onehour+':00:00 hrs'+'</option>';

              });
              select += '</select>';
              if (response.data) {

                $('#horarios').html(select);
                $('#select_horarios').select2();
              }else {

              }
            }


          })
          .catch(function (error) {
            console.log(error);
          });
        });

      });
    </script>
    @endprepend