@extends(Auth::check() && Auth::user()->role->layout == 1 ? 'layouts.admin' : 'layouts.employee')

@section('head')
<link rel="stylesheet" href="{{ asset('/plugins/datepicker/bootstrap-datepicker.css') }}">
@endsection

@section('content')
<div class="content-wrapper">
	<section class="content-header">
		<h1>
		{{trans('general.reservations')}}
		</h1>
	</section>

	<section class="content">
		<div class="row">
			<div class="col-md-8 col-md-offset-2">
				<div class="box box-success">
					<div class="box-header">
						<h3 class="box-title">{{trans('general.nuevo')}}  {{trans('general.reservations')}} HERE </h3>
					</div>
					<div class="box-body">
						{!! Form::open(['url' => 'reservations']) !!}
							@include('reservations.form')
						{!! Form::close() !!}
					</div>
				</div>
			</div>
		</div>
	</section>
</div>
@endsection

@section('foot')

<!-- {!! Form::open(['method' => 'POST', 'url' => 'reservations']) !!} -->

<!-- {!! Form::open(array('action' => 'ReservationsController@store')) !!} -->


<script src="{{ asset('/plugins/select2/select2.min.js') }}"></script>
<script src="{{ asset('plugins/jQueryUI/jquery-ui.min.js') }}"></script>

<script src="{{ asset('/plugins/input-mask/jquery.inputmask.js') }}"></script>
<script src="{{ asset('/plugins/input-mask/jquery.inputmask.date.extensions.js') }}"></script>
<script src="{{ asset('/plugins/input-mask/jquery.inputmask.extensions.js') }}"></script>
<script src="{{ asset('/plugins/iCheck/icheck.js') }}"></script>
<script src="{{ asset('/plugins/datepicker/bootstrap-datepicker.js') }}"></script>

	<script type="text/javascript">

		$(function () {

		$(window).on('load', function() {
				user =  $('#user_id option:selected').val();
				$('.boat').find('option').remove();
                $('.boat').find('option').remove();
				$('.schedule').find('option').remove();
				 // UpdateUserBoat(user);
				//UpdateUserBoatTimer(user,boat);
		});

		$("#user_id").change( function() {
			    user =  $('#user_id option:selected').val();
				$('.boat').find('option').remove();
				$('.schedule').find('option').remove();
				UpdateUserBoat(user);
				//$('.schedule').find('option').remove();

         });

		 $(".boat").change( function() {
				user =  $('#user_id option:selected').val();
				boat =  $('.boat option:selected').val();
				$('.schedule').find('option').remove();
				UpdateUserBoatTimer(user,boat);
         });

		function UpdateUserBoat(user){
            var _token = $('input[name="_token"]').val();
			var counter = 0;
			//  $('.boat').append('<option value="">Seleccione una opción</option>').attr('selected', true);

			 $.ajax({
                        type: "POST",
                        url: "{{ asset('changeuserboat')}}",
                        data: {_token : _token,user: user},
					    success: function(data) {
						boats = $.parseJSON(data);
                           boats.forEach(function(item){
                               if(item!=0){
								if(counter !== 0){

								$('<option>').val(item.id).text(item.name).appendTo('.boat');
								}
								else{
									$('<option>').val(item.id).text(item.name).appendTo('.boat').attr('selected', true);
									boat =  $('.boat option:selected').val();
									UpdateUserBoatTimer(user,boat);
									}
                               }
                               else{
                               }
							    counter++;
                           });

					}
                    });

			}

		function UpdateUserBoatTimer(user,boat){
            var _token = $('input[name="_token"]').val();
			$('.schedule').find('option').remove();
			 $.ajax({
                        type: "POST",
						url: "{{ asset('changeuserboattimer')}}",
                        data: {_token : _token,user: user,boat:boat},
					    success: function(data) {
						boats = $.parseJSON(data);
                           boats.forEach(function(item){
                               if(item!=0){

								$('<option>').val(item.id).text(item.name).appendTo('.schedule');
                               }
                               else{
                               }
                           });
					}
                    });
			}


			$.fn.datepicker.dates['es'] = {
				days: ["Domingo", "Lunes", "Martes", "Miercoles", "jueves", "Viernes", "Sábado"],
				daysShort: ["Don", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab"],
				daysMin: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"],
				months: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
				monthsShort: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
				today: "Hoy",
				clear: "Borrar",

				weekStart: 0
			};


			$('.date_start').datepicker({
				language: "es",
				todayHighlight: true,
				weekStart: 1,
				autoclose: true,
				format: 'dd/mm/yyyy',
				startDate: '-0d',

				maxDate: 'now',
				clearBtn: true,
				todayBtn: "linked",
				keyboardNavigation: false,

			}).on('changeDate', function (selected) {
				var startDate = new Date(selected.date.valueOf());
				console.log("date_start: ", startDate );
				$('.date_end').datepicker('setStartDate', startDate);
				// var end = moment(startDate).add(10, 'days').toDate();
        		// $('.date_end').datepicker('setEndDate', end);
			}).on('clearDate', function (selected) {
				$('.date_end').datepicker('setStartDate', null);
			});

			$(".date_end").datepicker({
				language: "es",
				todayHighlight: true,
				weekStart: 1,
				autoclose: true,
				// format: 'yyyy/mm/dd',
				format: 'dd/mm/yyyy',
				startDate: '-0d',

				maxDate: 'now',
				clearBtn: true,
				todayBtn: "linked",
				keyboardNavigation: false,
			}).on('changeDate', function (selected) {
				// var endDate = new Date(selected.date.valueOf());
				// $('.date_start').datepicker('setEndDate', endDate);
			}).on('clearDate', function (selected) {
				$('.date_start').datepicker('setEndDate', null);
			});



			//$("#datemask").inputmask("mm/dd/yyyy", {"placeholder": "mm/dd/yyyy"});
			//$("[data-mask]").inputmask();

			$( "#role" ).autocomplete({
			source: "{{ asset('autocomplete/roles')}}",
			minLength: 1,
			select: function(event, ui) {
				alert(ui.item.value);
				$('#role').val(ui.item.value);
				$('#role_id').val(ui.item.id);
			}
		});
		});


    </script>
@endsection