<?php $__env->startSection('content'); ?>
<style>
div.dataTables_filter {
	text-align: end !important;
}
div.dataTables_filter input{
	font-weight: normal !important;
}
</style>

<div class="normalheader transition animated fadeIn">
    <div class="hpanel">
        <div class="panel-body">
            <a class="small-header-action" href="">
                <div class="clip-header">
                    <i class="fa fa-arrow-up"></i>
                </div>
            </a>
            <div id="hbreadcrumb" class="pull-right m-t-lg">
                <ol class="hbreadcrumb breadcrumb">
                    <li>
						<a href="<?php echo e(route('admin/dashboard')); ?>">Dashboard</a>
					</li>
					<li>
						<a href="<?php echo e(url('admin/usuarios')); ?>">Usuarios</a>
					</li>
                    <li class="active">
                        <span>Crear Usuario</span>
                    </li>
                </ol>
            </div>
            <h2 class="font-light m-b-xs">
				<i class="fa fa-users"></i>
                Usuarios
            </h2>
            <small>Message board for social interactions.</small>
        </div>
    </div>
</div>

<div class="content animate-panel">
	
	<div class="row">
		
        <div class="col-md-3">
			
            <div class="hpanel">
				
                <div class="panel-body text-center">
					
					<div class="media social-profile clearfix">
						<a class="pull-left">
							<img class="avatar" src="<?php echo e($usuario->avatar); ?>" alt="<?php echo e($usuario->fullName); ?>">
						</a>
						<div class="media-body">
							<h5><?php echo e($usuario->fullName); ?></h5>
							<small class="text-muted"><?php echo e($usuario->created_at->format('d/m/Y')); ?></small>
						</div>
					</div>
					
					<div class="social-content dd m-t-md">
						<form method="post">
							<input type="hidden" name="_token" value="<?php echo e(csrf_token()); ?>" />
							<input type="hidden" name="id" value="<?php echo e($usuario->id); ?>" />
							<ol id="lista-concesionarios" class="dd-list">
								<?php foreach($usuario->concesionarios as $concesionario): ?>
								<li class="dd-item">
									<div class="dd-handle">
										<input type="hidden" name="concesionarios[]" value="<?php echo e($concesionario->id); ?>" />
										<?php echo e($concesionario->nombre); ?>

										<div class="pull-right">
											<a class="btn-remove-concesionario" data-id="<?php echo e($concesionario->id); ?>"><i class="fa fa-times"></i></a>
										</div>
									</div>
								</li>
								<?php endforeach; ?>
							</ol>
							<div class="text-center">
								<button id="btn-submit" class="btn btn-primary btn-sm">Guardar</button>
							</div>
						</form>
					</div>
				</div>
				
			</div>
			
		</div>
		
		<div class="col-md-9">
			
			<div class="row">
				<div class="col-md-12">
					<div class="panel panel-info">
						<div class="panel-body">
							<p>Seleccione los <strong>Concesionarios</strong> que el usuario <i><?php echo e($usuario->fullName); ?></i> <strong>administra.</strong></p>
						</div>
					</div>
				</div>
			</div>
			
			<div class="panel-body"> 
				<div class="row m-b-xl">
					<div class="panel panel-body">
						<?php $ids_concesionarios = array_pluck($usuario->concesionarios->all(), 'id'); ?>
						<table class="table table-condensed"  id="concesionario-table">
							<thead>
								<tr>
									<th style="width: 10%">Agregar</th>
									<th style="width: 45%">Nombre</th>
									<th style="width: 45%">Ciudad</th>
								</tr>
							</thead>	
							<tbody>
							<?php foreach($concesionarios as $concesionario): ?>
								<tr id="concesionario-<?php echo e($concesionario->id); ?>" style="<?php echo in_array($concesionario->id, $ids_concesionarios) ? 'display:none;' : ''; ?>">
									<td> <input type="checkbox" value="<?php echo e($concesionario->id); ?>" class="chk-concesionarios" data-id="<?php echo e($concesionario->id); ?>" data-title="<?php echo e($concesionario->nombre); ?>" /> </td>
									<td><?php echo e($concesionario->nombre); ?></td>
									<td><?php echo e($concesionario->ciudad->nombre); ?></td>
								</tr>
							<?php endforeach; ?>
							</tbody>
						</table>
					</div>
					
				</div>

			</div>
			
		</div>
		
	</div>
	
</div>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('css'); ?>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"/>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<script>
	$(document).ready(function() {
		
		$('#concesionario-table').DataTable({
			paging: true,
			ordering: false,
			lengthMenu: [[50, -1], [50, "Todos"]],
			language: {
				lengthMenu: "Mostrar _MENU_ registros",
				zeroRecords: "No se encontraron resultados",
				info: "Mostrando _START_ a _END_ de _TOTAL_ resultados",
				infoEmpty: "No hay resultados",
				infoFiltered: "(Filtrado de _MAX_ registros totales)",
				search: "Buscar: ",
				paginate: {
					first: "Primera",
					last: "Ultima",
					next: "Siguiente",
					previous: "Anterior"
				},
        	}
		});

		$('.chk-concesionarios').click(function(e) {
			
			e.preventDefault();
			e.stopPropagation();
			
			var concesionario = {
				id: $(this).data('id'),
				title: $(this).data('title')
			};
			
			// remove box
			$('#concesionario-'+concesionario.id).hide();
			
			// add table row'
			var tpl = _.template( $('#tpl-item').html() );
			var row = tpl({ item: concesionario });
			$('#lista-concesionarios').append(row);
			
			checkButtonState();
		});
		
		checkButtonState();
		
	});
	
	$( document ).on('click', '.btn-remove-concesionario', function() {
		var id = $(this).data('id');
		$(this).parents("li").remove();
		$('#concesionario-'+id).show();
		checkButtonState();
	});
	
	var checkButtonState = function() {
		var count = $('[name="concesionarios[]"]').length;
		$( '#btn-submit' ).prop('disabled', count === 0);
	};
	
</script>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('templates'); ?>
<script type="text/template" id="tpl-item">
	<li class="dd-item">
		<div class="dd-handle">
			<input type="hidden" name="concesionarios[]" value="<%= item.id %>" />
			<%= item.title %>
			<div class="pull-right">
				<a class="btn-remove-concesionario" data-id="<%= item.id %>"><i class="fa fa-times"></i></a>
			</div>
		</div>
	</li>
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('admin.layouts.main', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>