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

@section('head')
	<link href="{{ asset('/plugins/iCheck/square/green.css') }}" rel="stylesheet">
	<link rel="stylesheet" href="{{ asset('plugins/jQuery/themes/smoothness/jquery-ui.min.css') }}">
	<link href="{{ asset('/plugins/select2/select2.min.css') }}" rel="stylesheet" />
	<link rel="stylesheet" href="{{ asset('/plugins/datepicker/datepicker3.css') }}">
@endsection

@section('content')

	<!-- <div id="csrf-token" name="csrf-token" style="display:none;">{{ csrf_token() }}</div> -->

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

		<section class="content">
			<div class="row no-margin" >
				<div class="col-md-8 calendar-credits-container">

					@include('alert.errorlist')
					@include('alert.success')


					@if(Auth::user()->role->layout != 1)
						<div class="row no-margin">
							<div>

								<div class="box box-default">
									<div class="box-header with-border">
										<i class="fa fa-random"></i>
										<h3 class="box-title">Créditos</h3>
										<a href="{{ asset('/credits/' . Auth::user()->customer_id . '/listado' ) }}" type="button" class="btn btn-info btn-flat margin pull-right">Transferencia de créditos</a>
									</div>
									<div class="box-body">
										<div id="contenedor" class="credits-months">

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

							</div>
						</div>
					@endif

					<div class="box box-default">
						@if( $boat)
							<div class="box-header with-border">
								<i class="fa fa-calendar"></i>
								<h3 class="box-title">{{ $boat->name }}</h3>
								<input class="hidden" data="{{ $boat->id }}" id="current_boat_id" value="{{ $boat->id }}">
							</div>
						@endif
						<div class="box-body">
							{!! $calendar->calendar() !!}
							{!! $calendar->script() !!}
						</div>zz
					</div>
				</div>

				<div class="col-md-4">

					<div class="box box-default">
						<div class="box-header with-border">
							<i class="fa fa-filter"></i>
							<h3 class="box-title">Buscador</h3>
						</div>
						<div class="box-body">
							<div class="row no-margin" >
								{!! Form::open(['route' => 'calendar', 'method' => 'POST']) !!}
								<div class="col-md-12">
									<div class="form-group {{ $errors->has('user_id') ? ' has-error' : '' }}">
										{!! Form::label('user_id', trans('general.usuario')) !!}
										<input type="hidden" name="_token" value="{{ csrf_token() }}">
										{!! Form::select('user_id', $users, null, ['class' => 'form-control']) !!}

										@if ($errors->has('user_id'))
											<span class="help-block">
										<strong>{{ $errors->first('user_id') }}</strong>
									</span>
										@endif
									</div>
								</div>
								<div class="col-md-12">
									<div class="form-group{{ $errors->has('boat') || $errors->has('boat') ? ' has-error' : '' }}">
										{!! Form::label('boat',  trans('general.boat')) !!} <br />
										{!! Form::select('boat_id',[], null, ['class' => 'form-control boat']) !!}

										@if ($errors->has('boat'))
											<span class="help-block">
										<strong>{{ $errors->first('boat') }}</strong>
									</span>
										@endif
									</div>
								</div>
								<div class="col-md-12">
									<div class="form-group mt-lg">
										{!! Form::submit(trans('general.buscar'), ['class' => 'form-control btn btn-info']) !!}
									</div>
								</div>
								{!! Form::close() !!}
							</div>
						</div>
					</div>

					@if(Auth::user()->role->role_permission('view_reservation'))

						<div class="box box-default">
							<div class="box-header with-border">
								<i class="fa fa-eye"></i>
								<h3 class="box-title">Leyenda</h3>
							</div>
							<div class="box-body">
								@if(isset($status))
									@foreach($status as $estado)
										@if($estado->id == 1)
											<span class="col-md-12 label label-success" style="margin-bottom:10px;padding:5px"> {{$estado->name}}</span>
										@elseif($estado->id == 2)
											<span class="col-md-12 label label-warning" style="margin-bottom:10px;padding:5px">  {{$estado->name}}</span>
										@elseif($estado->id == 4)
											<span class="col-md-12 label label-info" style="margin-bottom:10px;padding:5px">  {{$estado->name}}</span>
										@endif
									@endforeach
								@endif

								<span class="col-md-12 label label-gray" style="padding:5px;margin-bottom:10px;background-color: #abafb7 !important;">  Formación, Mantenimiento, Limpieza </span>

								<span class="col-md-12 label" style="padding:5px;background-color:#EF5773 !important;">Festivo</span>
							</div>
						</div>

					@endif

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

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

	<script type="text/javascript">
		$(function () {

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

			});

			$(".boat").change( function() {
				user =  $('#user_id option:selected').val();
				boat =  $('.boat option:selected').val();
				document.cookie = 'current_boat_id'+'='+boat+';';
			});

			function getCookie(name) {
				var value = "; " + document.cookie;
				var parts = value.split("; " + name + "=");
				if (parts.length == 2) return parts.pop().split(";").shift();
			}


			function UpdateUserBoat(user){
				var _token = $('input[name="_token"]').val();
				const cookies_set = getCookie('current_boat_id');
				$.ajax({
					type: "POST",
					url: "{{ asset('calendarchangeuserboat')}}",
					data: {_token : _token,user: user},
					success: function(data) {
						boats = $.parseJSON(data);
						var current_boat_id = 1;
						if(cookies_set){
							current_boat_id = cookies_set;
						}else{
							current_boat_id = $('#current_boat_id').val();
						}
						boats.forEach(function(item, key){

							if(item!=0){
								if (item.id == current_boat_id){
									$('<option>').val(item.id).text(item.name).attr("selected", "true").appendTo('.boat');
								}else{
									$('<option>').val(item.id).text(item.name).appendTo('.boat');
								}
							}
						});
					}
				});
			}


			$(window).on('load', function() {
				user =  $('#user_id option:selected').val();
				if (user == '')
					user = $('#user_id option:nth-child(2)').val();

				$('.boat').find('option').remove();
				UpdateUserBoat(user);
				boat =  $('.boat option:selected').val();

			});

		});
	</script>

	@if(Auth::user()->role->layout != 1)

		<script type="text/javascript">
			//	{{$url_to_request_get = (string) env('APP_URL','http://skipper.komunica.es' ). "/getcreditos.php"}}
	    	//{{$url_to_request_change = (string) env('APP_URL','http://skipper.komunica.es' ). "/changeCredito.php"}}
			const url_to_request_get = "https://skipper.komunica.es/getcreditos.php";
			const url_to_request_change = "https://skipper.komunica.es/changeCredito.php";

			//const url_to_request_get = "{{  $url_to_request_get}}";
			//const url_to_request_change = "{{  $url_to_request_change}}";

			setTimeout ( function(){
				//var date_from_calendar = moment($('.fc').fullCalendar('getDate')).foramt("YYYY/MM/DD");
				var calendar_view = moment($('.fc').fullCalendar('getDate'));
				var current_month = parseInt(calendar_view.format('M'),10);
				var anio = calendar_view.format('Y');
				$.ajax({
					url: url_to_request_get,
					method: "GET",
					data: { usuario : {{ Auth::user()->customer_id }} , anyo : anio, month: current_month, admin : {{ Auth::user()->role->layout  }}, parcial : true, boat : @if(isset($boatpost))  {{ $boatpost->id }} @else $('.boat option:selected').val() @endif },
					dataType: "html"
				}).done(function(data) {
					$('#contenedor').html(data);
				});
			}, 2000);

			$('.fc-next-button').on('click', function(){

				var fecha = moment($('.fc').fullCalendar('getDate'));
				var mes = parseInt(fecha.format('M'),10);
				var ano = fecha.format('Y');
				$.ajax({
					url: url_to_request_get,
					method: "GET",
					data: { usuario : {{ Auth::user()->customer_id }} , anyo : ano, month: mes, admin : {{ Auth::user()->role->layout  }}, parcial : true, boat : @if(isset($boatpost))  {{ $boatpost->id }} @else $('.boat option:selected').val() @endif },
					dataType: "html"
				}).done(function(data) {
					$('#contenedor').html(data);
				});
			});

			$('.fc-prev-button').on('click', function(){

				var fecha = moment($('.fc').fullCalendar('getDate'));
				var mes = parseInt(fecha.format('M'),10);
				var ano = fecha.format('Y');

				$.ajax({
					url: url_to_request_get,
					method: "GET",
					data: { usuario : {{ Auth::user()->customer_id }} , anyo : ano, mnth: mes, admin : {{ Auth::user()->role->layout  }}, parcial : true, boat : @if(isset($boatpost))  {{ $boatpost->id }} @else $('.boat option:selected').val() @endif },
					dataType: "html"
				}).done(function(data) {
					$('#contenedor').html(data);
				});
			});

			function cambiar( id ){
				var opcion =  $('#anyo option:selected').val();
				let date_from_calendar = moment($('.fc').fullCalendar('getDate'));
				let current_month = parseInt(date_from_calendar.format('M'),10);
				var anio = date_from_calendar.format('Y');
				$.ajax({
					url: url_to_request_change,
					// url: "http://skipper.komunica.es/changeCredito.php" ,
					method: "GET",
					data: { usuario : {{ Auth::user()->customer_id }} , id : id },
					dataType: "text"
				}).done(function(data){
					$.ajax({
						url: url_to_request_get,
						method: "GET",
						data: { usuario : {{ Auth::user()->customer_id }} , anyo : anio, month: current_month , admin : {{ Auth::user()->role->layout  }}, parcial : true, boat : @if(isset($boatpost))  {{ $boatpost->id }} @else $('.boat option:selected').val() @endif },
						dataType: "html"
					}).done(function(data) {
						$('#contenedor').html(data);
					});
				});
			}

			function siguienteMes (){
				var fecha = moment($('.fc').fullCalendar('getDate'));
				var mes = parseInt(fecha.format('M'),10);
				var ano = fecha.format('Y');

				$.ajax({
					url: url_to_request_get,
					method: "GET",
					data: { usuario : {{ Auth::user()->customer_id }} , anyo : ano, month: mes, admin : {{ Auth::user()->role->layout  }}, parcial : true, boat : @if(isset($boatpost))  {{ $boatpost->id }} @else $('.boat option:selected').val() @endif },
					dataType: "html"
				}).done(function(data) {
					$('#contenedor').html(data);
				});
			}

			function anteriorMes(){
				var fecha = moment($('.fc').fullCalendar('getDate'));
				var mes = parseInt(fecha.format('M'),10);
				var ano = fecha.format('Y');

				$.ajax({
					url: url_to_request_get,
					method: "GET",
					data: { usuario : {{ Auth::user()->customer_id }} , anyo : ano, month: mes, admin : {{ Auth::user()->role->layout  }}, parcial : true, boat : @if(isset($boatpost))  {{ $boatpost->id }} @else $('.boat option:selected').val() @endif },
					dataType: "html"
				}).done(function(data) {
					$('#contenedor').html(data);
				});
			}

			$('.fc-today-button').css('display','none !important');

			setTimeout(function(){  $('.fc-prev-button').on('click', anteriorMes); $('.fc-next-button').on('click', siguienteMes);   },3000);

		</script>
	@endif
@endsection