@extends('app')

@section('content')
	<ol class="breadcrumb">
    <a href="#" class="back-btn">
      <span class="glyphicon glyphicon-arrow-left"></span> Regresar
    </a>        
		<li><a href="{{route('home')}}">Inicio</a></li>
		<li class="active">Compromisos</li>
	</ol>
	<div class="row">
	  <div class="col-sm-6 col-sm-offset-3">
	    {!! Form::open([
	      'action' => 'Admin\LiabilitiesController@index',
	      'method' => 'GET',
	      'class' => 'form-horizontal'
	    ])!!}
	      <fieldset>
	        <legend>Próximos Compromisos</legend>
	        <div class="form-group">
        		{!!Form::label('management_id','Gerencia',['class'=>'col-sm-2 control-label'])!!}
	        	<div class="col-sm-8">
	        		{!!Form::select('management_id',[null=>'Todas las gerencias']+$managements,Input::get('management_id'),['class'=>'form-control'])!!}
	        	</div>
	        	<div class="col-sm-2">
	        		<button class="btn btn-default btn-block">
	        			<span class="fa-search fa fa-fw"></span>
	        		</button>
	        	</div>	
	        </div>
	        <div class="form-group">
	        	{!!Form::label('nss','NSS',['class'=>'col-sm-2 control-label'])!!}
	        	<div class="col-sm-4">
	        		{!!Form::input('text', 'nss', NULL, ['class' => 'form-control'])!!}
	        	</div>
	        	{!!Form::label('curp','CURP',['class'=>'col-sm-2 control-label'])!!}
	        	<div class="col-sm-4">
	        		{!!Form::input('text','curp',NULL,['class'=>'form-control'])!!}
	        	</div>
	        </div>
	        <div class="form-group">
	        	{!!Form::label('from','Desde',['class'=>'col-sm-2 control-label'])!!}
	        	<div class="col-sm-4">
	        		<div class="input-group">
			            {!!Form::input('text', 'since',$since, ['class' => 'form-control', 'placeholder' => 'YYYY-MM-DD','id' => 'since'])!!}
			            <span class="calendar-btn input-group-addon" id="basic-addon1"><i class="fa fa-calendar"></i></span>
          			</div>
	        	</div>
	        	{!!Form::label('to','Hasta',['class'=>'col-sm-2 control-label'])!!}
	        	<div class="col-sm-4">
	        		<div class="input-group">
			            {!!Form::input('text', 'until',$until, ['class' => 'form-control', 'placeholder' => 'YYYY-MM-DD','id' => 'until'])!!}
			            <span class="calendar-btn input-group-addon" id="basic-addon1"><i class="fa fa-calendar"></i></span>
          			</div>
	        	</div>
	        </div>
	      </fieldset>
	    {!! Form::close() !!}
	    <div class="list-group">
	      @forelse($appointments as $appointment)

	      <div class="list-group-item">

	        <h4 class="list-group-item-heading">	
          	{{$appointment->datetime->format('Y-m-d H:i')}}
	          
	        </h4>
	        <p class="list-group-item-text">
	        	<strong>
	        		CITA CON :{{$appointment->client->fullname}}
	        	</strong><br>
	        	EJECUTIVO : {{$appointment->user->fullname}}
	        	{{$appointment->comments}}
	       	</p>
	       	@if($appointment->location)
                <p class="list-group-item-text">
                    <strong>Ubicación: </strong> {{$appointment->location}}
                </p>
            @endif
            <p class="list-group-item-text">
            	<strong>ESTATUS: </strong> {{ $appointment->client->status }}
            </p>
	      </div>
	      @empty
	      <div class="list-group-item">
	        No hay compromisos que mostrar
	      </div>
	      @endforelse
	      <div class="text-center">
	        {!! $appointments->appends(Input::all())->render() !!}
	      </div>
	    </div>
	  </div>
	</div> 
@stop


@section('script')
	<script>
		$(function(){
			var since = $('#since');
			var until = $('#until');
			var dateFormat = "yy-mm-dd";

		    since.prop('readonly',true)
		    .css('background-color','white')
		        .datepicker({
		        	
		        })
		        .on( "change", function() {
		          until.datepicker("option", "minDate", getDate( this ));
		        });

		    until.prop('readonly',true)
		      	.css('background-color','white')
			      	.datepicker({
			      	
			      	})
		      	.on( "change", function() {
		        	since.datepicker( "option", "maxDate", getDate( this ) );
		      	});			

		    function getDate( element ) {
		      var date;
		      try {

		        date = $.datepicker.parseDate( dateFormat, element.value );
		        console.log(date);
		      } catch( error ) {

		        date = null;
		      }
		 
		      return date;
		    }
	
    	});

		
	</script>
@endsection