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

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

@section('content')
<div class="content-wrapper">
	<section class="content-header">
		<h1>
		Bloqueos
		</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')}}  Bloqueo </h3>
					</div>
					<div class="box-body">
						{!! Form::open(['url' => 'blocks']) !!}
						@include('blocks.form')
						{!! Form::close() !!}
					</div>
				</div>
			</div>
		</div>
	</section>
</div>
@endsection

@section('foot')
	<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/datepicker/bootstrap-datepicker.js') }}"></script>


	<script type="text/javascript">
        var boats = {!! json_encode($array_of_boats->toArray()) !!};
        var schedules = {!! json_encode($array_of_schedules->toArray()) !!};
        var boat = {!! json_encode($boat->toArray()) !!};
       	$("#boat_id").val(boat.id);
		function changeSelector(type) {
            if (type == 2) {
                var dia = schedules[0];
                var noche = schedules[1];
                var newOptions = {" ": 0,
                    [dia.name]: dia.id,
                    [noche.name]: noche.id,
                };

            } else {
                var dia = schedules[2];
                var noche = schedules[3];
                var newOptions = {" ": 0,
                    [dia.name]: dia.id,
                    [noche.name]: noche.id,
                };
            }

            var $el = $("#schedule_id");
            $el.empty(); // remove old options
            $.each(newOptions, function(key,value) {
                $el.append($("<option></option>")
                    .attr("value", value).text(key));
            });
		}

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

		$(document).ready(function(){


			changeSelector(boat.boattype_id);

			$('#boat_id').change(function(){
                //$("#boat_id").val(current_boat.id);
				$('#schedule_id option').filter(function(){
					return true;
				}).show();

				$("#schedule_id option:selected").prop("selected", false);

				var current_boat_id = $(this).children('option:selected').val();
				boats.forEach(function(value, key){
					if(value.id == current_boat_id){
						current_boat = value;
					}
				});
                changeSelector(current_boat.boattype_id);
			});

		});
    </script>
@endsection