@extends('app')
@section('content')
	<ol class="breadcrumb">
	    <a href="#" class="back-btn">
	      <span class="glyphicon glyphicon-arrow-left"></span> Regresar
	    </a>
	    &nbsp;&nbsp;&nbsp;
		<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('Admin\UsersController@create',['active_tab'=>$active_tab])}}" class="btn btn-primary">
			<span class="fa fa-fw fa-user-plus"></span> Añadir usuario
		</a>
	</div>

	<div class="" style="margin: 20px inherit">
		<ul class="nav nav-tabs" role="tablist">
			<li role="presentation" class="{{$active_tab == 'admin' ? 'active' : ''}}">
				<a href="?active_tab=admin&page=1" aria-controls="admin" class="tabs">
					Administradores
				</a>
			</li>
			<li role="presentation" class="{{$active_tab == 'manager' ? 'active' : ''}}">
				<a href="?active_tab=manager&page=1" aria-controls="manager" class="tabs">
					Gerentes
				</a>
			</li>
			<li role="presentation" class="{{$active_tab == 'executive' ? 'active' : ''}}">
				<a href="?active_tab=executive&page=1" aria-controls="executive" class="tabs">
					Ejecutivos
				</a>
			</li>
		</ul>
	</div>

	<div class="tab-content" id="busqueda-plantilla">
		<div role="tabpanel" class="tab-pane {{$active_tab == 'admin' ? 'active' : ''}}" id="admin">
			@include('admin.users.partials.admins')
		</div>
		<div role="tabpanel" class="tab-pane {{$active_tab == 'manager' ? 'active' : ''}}" id="manager">
			@include('admin.users.partials.managers')
		</div>
		<div role="tabpanel" class="tab-pane {{$active_tab == 'executive' ? 'active' : ''}}" id="executive">
			@include('admin.users.partials.executives')
		</div>
	</div>

	@include('admin.users.partials.modal_show')
	@include('admin.users.partials.modal_delete')
	@include('admin.users.partials.assign_error_modal')

@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);
	      console.log('algo');
	      $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(
				'\Admin\UsersController@destroy',
				{
					plantilla: $(this).attr('data-user')
				}
			);
			$delete_modal.find('form').get(0)
			.setAttribute('action', action);

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