@extends('app')

@section('head')
{!! 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">
				{!!Form::open(['action' => ['Manager\ProclientsController@index'],
					        'class' => 'form-horizontal',
					        'method'=>'GET'])!!}
					<div class="btn-group">
						
						<button type="button" class="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="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>
						    
	    						{!! Form::hidden('export') !!}
	    						<a class="btn btn-md btn-default"  href="#" id="export">Exportar</a>
	    					
					</div>
					<div class="hidden" id="columns-hide" type="hidden"></div>
					
				{!!Form::close()!!}
				<!-- 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>
						NOMBRE COMPLETO
					</th>
					<th>
						Ejecutivo
					</th>
					@foreach($aditional_columns as $column => $enabled)
						@if($enabled)
							<th class="{{App\Classes\ClientHelper::getCssThClass($column)}}">
								@lang("proclient.$column")
							</th>
						@endif
					@endforeach
					@foreach($columns as $column => $enabled)
						@if($enabled)
							<th class="{{App\Classes\ClientHelper::getCssThClass($column)}}">
								@lang("proclient.$column")
							</th>
						@endif
					@endforeach
				</tr>
			</thead>
			<tbody>
				@foreach($clients as $client)
					@if(($executive = $client->executive))
					@endif
					<tr class="{{$executive ? 'tr-assigned' : ''}}">
						<th>
							{{$client->a_paterno}} {{$client->a_materno}} {{$client->nombre}}
						</th>
						<td>
							@if($client->family == 'C' or (! $client->family))
								<input class="client-checkbox" type="checkbox" data-user-id="{{$client->id}}" style="display:none">
								@if ($executive)
									<div>		
										{{$executive->fullname}}
									</div>
									<button class="btn btn-default btn-xs btn-assign" data-client-id="{{$client->id}}" data-client-executive="{{$executive->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
                            @else
                                {{$executive->fullname}}
							@endif
						</td>

						@foreach($aditional_columns as $column => $enabled)
							@if($enabled)
								<td class="{{App\Classes\ClientHelper::getCssTdClass($column)}}">
									{{$client->$column}}
								</td>
							@endif
						@endforeach						
						@foreach($columns as $column => $enabled)
							@if($enabled)
								<td class="{{App\Classes\ClientHelper::getCssTdClass($column)}}">
									{{$client->$column}}
								</td>
							@endif
						@endforeach
					</tr>
				@endforeach
			</tbody>
		</table>
	@else
		<div class="alert alert-info">
			No hay clientes que mostrar
		</div>
	@endif

	@include('manager.proclients.partials.assign_modal')
	@include('manager.proclients.partials.assign_error_modal')
	
	@if (isset($columns))
		{!! Form::open(['method' => 'POST', 'id' => 'filter-column-form']) !!}
		{!! Form::hidden('current_page', Input::get('page', 1)) !!}
		{!! Form::hidden('page') !!}
		@include('common.proclients.partials.modal_columns')
		@include('common.proclients.partials.modal_order')
		@include('common.proclients.partials.modal_filter')
		{!! Form::close() !!}
	@endif
@stop

@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(
				'Manager\ProclientsController@update',
				{
					cartera: $('#client_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-executive'));
		$assign_modal.find('#client_id')
		.val($(this).attr('data-client-id'));

        if($(this).attr('data-client-executive')) {
            $('#reassign-comments').show().find('input').val('');
        } else {
            $('#reassign-comments').hide();
        }
		$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('[name=assignation_kind]')
			.first().prop('checked', true);
	  		$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();
		});

		/*Exportar cartera a excel */
        $('#export').click(function(evt){
            evt.preventDefault();
            var form = $(this).parents('form');
            var input = form.find('input[name="export"]');
            input.val('xls');
            form.submit();
            input.val('');
        });
	});
</script>
@stop