@extends('forms.addMap')

@section('container')
   	<div class="sale-container">
		<div class="panel panel-default sale-search-table">
            <div class="panel-heading">Seleccionar Cliente</div>
            <div class="panel-body">
                <table id="table-clientes" class="display">
                	<thead>
                		<tr>
                			<th hidden>id</th>
                            <th>Nombre</th>
                            <th>Razón social</th>
                            <th>Télefono</th>
                        </tr>
                	</thead>
                    <tbody>
                    	@foreach($clientes as $cliente)
                            <tr>
                            	<td hidden>{{$cliente->id}}</td>
                                <td>{{$cliente->name}}</td>
                                <td>{{$cliente->razonSocial}}</td>
                                <td>{{$cliente->tel}}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
		<div class="panel panel-default sale-search-table">
            <div class="panel-heading">Seleccionar Máquina</div>
            <div class="panel-body">
                <table id="table-maquinas" class="display">
                	<thead>
                		<tr>
                			<th hidden>id</th>
                            <th>Nombre</th>
                            <th>Marca</th>
                            <th>Modelo</th>
                            <th>Serie</th>
                        </tr>
                	</thead>
                    <tbody>
                    	@foreach($maquinas as $maquina)
                            <tr>
                            	<td hidden>{{$maquina->id}}</td>
                                <td>{{$maquina->name}}</td>
                                <td>{{$maquina->marca}}</td>
                                <td>{{$maquina->model}}</td>
                                <td>{{$maquina->serialNumber}}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
	</div>

	<div class="panel panel-default">
        <div class="panel-body">
        	<form class="form-horizontal" role="form" method="POST" action="{{$route}}" id="mainForm">
        		{{ csrf_field() }}
               	<input id="clienteId" type="text" name="clientId" hidden>
               	<input id="maquinaId" type="text" name="maquinaId" hidden>
               	<b id="cliente-b" hidden>Cliente: </b><br>
               	<b id="maquina-b" hidden>Máquina: </b><br>

               	<!-- MAPA-->
				<input style="color:gray;"  id="pac-input" class="controls" type="text" placeholder="Buscar...">
                <div id="map"></div>
                <input type="hidden" name="latitude" id="latitud">
				<input type="hidden" name="longitude" id="longitud">
               	<input id="direccion" type="hidden" name="direccion">
               	<!-- MAPA-->

                				@if (count($errors) > 0)
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
				@foreach ($fieldNames as $field)
                    <div class="form-group{{ $errors->has($fields[$i]) ? ' has-error' : '' }}">
                        <label for="{{$fields[$i]}}" class="col-md-2 control-label">{{$field}}</label>
                        <div class="col-md-4">
                            <input id="{{$fields[$i]}}" type="text" class="form-control" name="{{$fields[$i]}}" value="{{ old($fields[$i]) }}" id="{{$fields[$i]}}" required autofocus>
                            @if ($errors->has($fields[$i]))
                                <span class="help-block">
                                    <strong>{{ $errors->first($fields[$i]) }}</strong>
                                </span>
                            @endif
                        </div>
                    </div>
                                    @endforeach
                <br>
                <label for="sellDate" class="col-md-2 control-label">Fecha de venta</label>
                <div class="col-md-4">
                    <input id="sellDate" type="date" class="form-control" name="sellDate" required autofocus>
                </div>
                <br>
                <br>
                <label for="finGarantia" class="col-md-2 control-label">Fin de garantia</label>
                <div class="col-md-4">
                    <input id="finGarantia" type="date" class="form-control" name="finGarantia" required autofocus>
                </div>
                <br>
                <br>
               	<div>
					<label for="nota" class="col-md-1 control-label">Nota</label>
			        <div class="">
			        	<textarea name='nota' rows="5"  form='mainForm' style="width:100%;"></textarea>
			        </div>
				</div>
               	<div class="form-group" id="okbutton" hidden>
                    <div class="col-md-6">
                        <button type="submit" class="btn btn-primary">
                            Agregar
                        </button>
                    </div>
                </div>
	        </form>
        </div>
    </div>
@endsection

@section('scripts')
	<script>
		$(document).ready(function() {
	        var tableM = $('#table-maquinas').DataTable(
	            {
			        select:true
	            });
	        $('#table-maquinas tbody').on( 'click', 'tr', function ()
	        {
	        	if (tableM.rows('.selected').data().length > 0)
	        	{
					tableM.rows( '.selected' ).nodes().to$().removeClass( 'selected' );

	        	}
	            $(this).toggleClass('selected');
                var selectedM = tableM.rows('.selected').data()

	            $("#maquina-b").html("Máquina: " + selectedM[0][1]);
				$('#maquina-b').removeAttr('hidden');
				$("#maquinaId").val(selectedM[0][0]);
				console.log($('#clienteId').val())
				if ($('#clienteId').val() > 0)
        		{
					$('#okbutton').removeAttr('hidden');
        		}
	        });

	        var tableC = $('#table-clientes').DataTable(
	            {
			        select:true

	            });
	        $('#table-clientes tbody').on( 'click', 'tr', function ()
	        {
	        	if (tableC.rows('.selected').data().length > 0)
	        	{
	        		tableC.rows( '.selected' ).nodes().to$().removeClass( 'selected' );
	        	}
	            $(this).toggleClass('selected');
                var selectedM = tableC.rows('.selected').data()
	            $("#cliente-b").html("Cliente: " + selectedM[0][1]);
				$('#cliente-b').removeAttr('hidden');
				$("#clienteId").val(selectedM[0][0]);
				console.log($('#maquinaId').val())
				if ($('#maquinaId').val() > 0)
        		{
					$('#okbutton').removeAttr('hidden');
        		}
	        });
	    });
	</script>
@endsection