@extends('app')

@section('content')
	<ol class="breadcrumb">
		<li>    
		    <a href="#" class="back-btn">
		      <span class="glyphicon glyphicon-arrow-left"></span> Regresar
		    </a>
		    &nbsp;&nbsp;&nbsp;
	 	</li>
		<li><a href="{{route('home')}}">Inicio</a></li>
		<li class="active">Plantilla</li>
	</ol>

	<style type="text/css">
		#executives th {
			width: 10%;
		}
		#executives th:last-child {
			width: 14%;
		}
	</style>
	@include('errors.partials.alert',$errors->destroy)
	
	<div class="text-right">
		<a href="{{action('Manager\UsersController@create')}}" class="btn btn-primary">
			<span class="fa fa-fw fa-user-plus"></span> Añadir ejecutivo
		</a>
	</div>

	<h1>Mis ejecutivos</h1>
	<div class="tab-content" id="busqueda-plantilla">
		{!! Form::open([
		'method' => 'GET',
		'class' => 'form-horizontal']) !!}
		
		{!! Form::hidden('active_tab', 'executive') !!}
		<div class="form-group">
			<label for="executive-employee-number" class="control-label col-xs-2">Número de empleado</label>
			<div class="col-xs-2">
				{!!Form::text('executive[employee_number]', (Input::get('executive')['employee_number']), ['class' => 'form-control', 'maxlength' => 6])!!}
			</div>
			<div class="col-xs-3">
				
			</div>
			<div class="col-xs-1">
				<button type="submit" class="btn btn-block btn-default">
					<span class="glyphicon glyphicon-search"></span>
				</button>
			</div>
		</div>
		{!! Form::close() !!}

		@if($executives->count() > 0)
		<div class="table-responsive" id="executives">
			<table class="table table-striped">
				<thead>
					<tr>
						<th>No. empleado</th>
						<th>Nombre(s)</th>
						<th>Usuario CUSP</th>
						<th></th>
					</tr>
				</thead>
				<tbody>
					@foreach ($executives as $executive)
					<tr class="{{(Session::get('focus') == $executive->id) ? 'info' : ''}}">
						<td>
							<input class="executive-checkbox" type="checkbox" name="assign-executive[]" data-user-id="{{$executive->id}}" style="display:none">
							{{$executive->no_emp}}
						</td>
						<td>{{$executive->fullname}}</td>
						<td>{{$executive->cusp}}</td>
						<td>
							<a href="{{action('Manager\UsersController@edit', [$executive->id,'page'=>Input::get('page',1)])}}" class="btn btn-warning btn-xs">
								<span class="glyphicon glyphicon-pencil"></span> Editar
							</a>
						</td>
					</tr>
					@endforeach
				</tbody>
			</table>
		</div>
		<div class="text-center">
			{!! $executives->appends(array_merge(Input::only(['executive'],['active_tab' => 'executive'])))->render()!!}
		</div>
		@else
		<div class="alert alert-info">
			No hay usuarios que mostrar
		</div>
		@endif
	</div>
@stop

@section('script')
	<script type="text/javascript" src="/js/laroute.js"></script>
	<script>
	  $(function(){
  		var $managers_modal = $('#managers-modal');
	  	var $executive_input = $('input[name="user_id[]"]');

	  	$('input[name="admin[employee_number]"]').numeric();
	  	$('input[name="manager[employee_number]"]').numeric();
	  	$('input[name="executive[employee_number]"]').numeric();

	  	// Habilitar reasignación sólo cuando hay cambio
	  	$managers_modal.find('select').change(function() {
	  		$submit = $managers_modal.find('.btn-submit');
	  		console.info('value', $(this).val());
	  		if ($(this).val() != '') {
		  		$submit.removeAttr('disabled');
		  		return;
	  		}
	  		$submit.prop('disabled', true);
	  	});

	  	// Asignación de gerente a una ejecutivo
	    $('.btn-assign').click(function(){
	      $managers_modal.find('.btn-submit')
	      .prop('disabled', true);
	      $managers_modal.modal('show');
	      $managers_modal.find('select')
	      .val($(this).attr('data-user-manager'));
	      $executive_input.val($(this).attr('data-user-id'));
	    });

	    // Asignación múltiple de gerente a ejecutivos
	    $('#btn-multiple-assign').click(function(){
	    	$(this).hide();
	    	$('.btn-assign').hide();
	    	$('.executive-checkbox').show();
	    	$('#executives td').addClass('info');
	    	$('#multiple-assign-btn-group').show();
	    });

	    // Cancelar asignación múltiple de gerentes a ejecutivos
	    $('#btn-multiple-assign-cancel').click(function(){
	    	$(this).parent().hide();
	    	$('.btn-assign').show();
	    	$('.executive-checkbox').hide();
	    	$('#btn-multiple-assign').show();
	    	$('#executives td').removeClass('info');
	    });

	    // Asignar gerente a múltiples ejecutivos
	  	$('#btn-multiple-assign-assign').click(function(){
	  		var $executives = $('.executive-checkbox:checked');

	  		if ($executives.length > 0) {
		  		$executive_input.siblings().remove();

		  		$executive_input
		  		.val($executives.first().attr('data-user-id'));

		  		$executives = $($executives.slice(1));
		  		$executives.each(function (i, input) {
		  			var user_id = $(input).attr('data-user-id');
		  			$executive_input.after(
	  					$executive_input.clone().val(user_id)
	  				);
		  		});
		  		$managers_modal.find('.btn-submit')
				.prop('disabled', true);
		  		$managers_modal.modal('show');
	  		} else {
	  			$('#assign-error-modal').modal('show');
	  		}
	  	});

	  	$('.btn-delete').on('click', function (event) {
	  		event.preventDefault();
	  		var $delete_modal = $('#delete-modal');
	  		var action = laroute.action(
				'App\Http\Controllers\Admin\UsersController@destroy',
				{
					plantilla: $(this).attr('data-user')
				}
			);
			$delete_modal.find('form').get(0)
			.setAttribute('action', action);

	  		$delete_modal.modal('show');
	  	});
	  });
	</script>
@stop