@extends('app')

@section('style')
{!! Html::style('css/stickyTableHeaders.css') !!}
{!! Html::style('css/stickyTableHeaders.normalize.css') !!}
{!! Html::style('css/cartera.css') !!}
@endsection

@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">Cartera</li>
	</ol>

	<div class="row">
		<div class="col-md-3 col-sm-3">
			<div>
				<div class="pull-left">
					<button type="button" class="btn btn-sm btn-primary" id="btn-multiple-assign">Asignación Múltiple</button>
					<div id="multiple-assign-btn-group" style="display:none">
						<button type="button" class="btn btn-sm btn-danger" id="btn-multiple-assign-cancel">Cancelar Asignación Múltiple</button>
						<button type="button" class="btn btn-sm btn-primary" id="btn-multiple-assign-assign" >Asignar</button>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
		<div class="col-md-9 col-sm-9">
			<div class="pull-right">
				<div class="btn-group">
					<button type="button" class="hide btn btn-default" data-toggle="modal" data-target="#filter-modal" data-placement="left" title="Filtro"> <span class = "glyphicon glyphicon-filter" aria-hidden = "true"></span> </button>
					<button type="button" class=" hide btn btn-default" data-toggle="modal" data-target="#order-modal" data-placement="left" title="Orden"> <span class = "glyphicon glyphicon-sort-by-alphabet" aria-hidden = "true"></span></button>
					<button type="button" class="btn btn-default" data-toggle="modal" data-target="#columns-modal" data-placement="left" title="Columnas a mostrar"> <span class="fa fa-columns" aria-hidden = "true"></span></button>
				</div>
				<!-- Paginación -->
				{!! $clients->render()!!}
			</div>
			<div class="clearfix"></div>
		</div>
	</div>

	@include('errors.partials.alert',['errors'=>$errors->client])

	@if($clients->count() > 0)
		<div class="table-sticky-info pull-right">
		  <table>
		    <tr>
		      <th class="th-prospecto">
		        Datos Prospecto
		      </th>
		      <th class="th-contacto-prospecto">
		        Datos Contacto Prospecto
		      </th>
		      <th class="th-beneficiario">
		        Datos beneficiario
		      </th>
		    </tr>
		  </table>
		</div>
		<div class="clearfix"></div>
		<table id="clients">
			<thead>
				<tr>
					<th>
						CLIENTE
					</th>
					<th>
						GERENTE
					</th>

					@foreach($columns as $column)
						<th>
							@lang("proclient.$column")
						</th>
					
					@endforeach
				</tr>
			</thead>
			<tbody>
				@foreach($clients as $client)
					@if(($manager = $client->manager))
					@endif
					<tr class="{{$manager ? 'tr-assigned' : ''}}">
						<th>
							{{$client->nombre}} 
						</th>
						<td>
							<input class="client-checkbox" type="checkbox" data-user-id="{{$client->id}}" style="display:none">
							@if ($manager)
								<div>		
									{{$manager->manager_details}}
								</div>
								<button class="btn btn-default btn-xs btn-assign" data-client-id="{{$client->id}}" data-client-manager="{{$manager->id}}" >
									<span class="glyphicon glyphicon-refresh"></span>
									Reasignar
								</button>
							@else
								<button class="btn btn-default btn-xs btn-assign" data-client-id="{{$client->id}}">
									<span class="glyphicon glyphicon-user"></span>
									Asignar
								</button>
							@endif
						</td>
						@foreach($columns as $column)
							<td >
								{{$client->getAttribute($column)}}
							</td>
						@endforeach

					</tr>
				@endforeach
			</tbody>
		</table>
	@else
		<div class="alert alert-info">
			No hay clientes que mostrar
		</div>
	@endif
@stop
@section('modals')
	@include('admin.proclients.partials.assign_modal')
	@include('admin.proclients.partials.assign_error_modal')

	@if (isset($columns))
		
		@include('common.proclients.partials.modal_columns')
		@include('common.proclients.partials.modal_order')
		@include('common.proclients.partials.modal_filter')
	@endif
@endsection

@section('script')

{!! Html::script('js/throttle.min.js') !!}
{!! Html::script('js/clients/index.scroll.js') !!}
{!! Html::script('js/jquery.stickyheader.js') !!}

<script type="text/javascript" src="/js/laroute.js"></script>
<script>
	$(function() {
		var $assign_modal = $('#assign-modal');

    $('#assign-form').on('submit', function(evt){
      $('#assign-form').append($('#filter-column-form').html());
      
    });

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

		// Asignar
		$('#save').click(function(event){
			event.preventDefault();
			var action = laroute.action(
				'Admin\ProclientsController@update',
				{
					cartera: $('#management_id').val()
				}
			);
			console.log(action);
			$("#assign-form").attr('action', action);
			$("#assign-form").submit();
		});

  	// Asignación de gerente a un cliente
    $('.btn-assign').click(function(){
		$assign_modal.find('.btn-submit')
		.prop('disabled', true);
		$assign_modal.find('select')
		.val($(this).attr('data-client-manager'));
		$assign_modal.find('#client_id')
		.val($(this).attr('data-client-id'));
		$assign_modal.modal('show');
    });

    // Asignación múltiple de gerente a ejecutivos
    $('#btn-multiple-assign').click(function(){
    	$(this).hide();
    	$('.btn-assign').hide();
    	$('.client-checkbox').show();
    	$('#clients 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();
  		$('.clients_id').remove();
    	$('.client-checkbox').hide();
    	$('#btn-multiple-assign').show();
    	$('#clients td').removeClass('info');
    });

    // Asignar gerente a múltiples ejecutivos
  	$('#btn-multiple-assign-assign').click(function(){
  		var $clients = $('.client-checkbox:checked');
  		if ($clients.length > 0) {
	  		$('#client_id').val(-1);
	  		$('.clients_id').remove();
	  		$clients.each(function (i, input) {
	  			var user_id = $(input).attr('data-user-id');
				$assign_modal.find('#client_id').after(
	  				$('<input>', {
	  					'type': "hidden",
	  					'class': "clients_id",
	  					'name': "clients_id[]",
	  					'value': user_id
	  				})
  				);
	  		});
	  		$assign_modal.find('select')
	  		.prop('selectedIndex', 0);
	  		$assign_modal.modal('show');
  		} else {
  			$('#assign-error-modal').modal('show');
  		}
  	});

  	// Multiple select con shift
  	var lastChecked = null;
  	$('.client-checkbox').click(function (event) {
  		if (!lastChecked) {
  			lastChecked = this;
  			return
  		}

  		if (event.shiftKey) {
  			var $client_checkboxes = $('.client-checkbox'),
  				first = $client_checkboxes.index(this),
  				last = $client_checkboxes.index(lastChecked);

				$client_checkboxes
				.slice(Math.min(first, last), Math.max(first, last)+ 1)
				.prop('checked', lastChecked.checked);
  		}
  		lastChecked = this;
  	});

		// $('.pagination a').click(function(e){
		// 	e.preventDefault();
		// 	var rel = $(this).attr('rel');
		// 	var newPage = 0;
		// 	if(rel){
		// 		var current = parseInt($('input[name=current_page]').val());
		// 		if(rel == 'next'){
		// 			newPage =  current + 1;
		// 		}else if(rel == 'prev'){
		// 			newPage = current - 1;
		// 		}
		// 	}else{
		// 		newPage = parseInt($.trim($(this).text()));
		// 	}
		// 	$('input[name=page]').val(newPage);
		// 	$('form').submit();
		// });
	});
</script>
@stop