@extends('forms.addMap')

@section('container')
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
               	<form class="form-horizontal" role="form" method="POST" action="{{$route}}" id="mainForm">
                  <div class="row">
                    <div class="col-md-12">
                      <div class="panel panel-default">
                        <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>Dirección</th>
                                  <th>Estado</th>
                                  <th>Télefono</th>
                                  <th>Email</th>
                                </tr>
                          	</thead>
                            <tbody>
                              @foreach($clientes as $cliente)
                                <tr>
                                  <td hidden>{{$cliente->id}}</td>
                                  <td>{{$cliente->name}}</td>
                                  <td>{{$cliente->razonSocial}}</td>
                                  <td>{{$cliente->dir}}</td>
                                  <td>{{$cliente->estado}}
                                  <td>{{$cliente->tel}}</td>
                                  <td>{{$cliente->email}}</td>
                                </tr>
                              @endforeach
                              </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-6">
                      <div class="panel panel-default">

                        <div class="panel-heading">Datos Máquina</div>
                        <div class="panel-body">
                          {{ csrf_field() }}
                                                    @if (count($errors) > 0)
                              <div class="alert alert-danger">
                                  <ul>
                                      @foreach ($errors->all() as $error)
                                          <li>{{ $error }}</li>
                                      @endforeach
                                  </ul>
                              </div>
                          @endif
                          <div>
                            @foreach ($maquinaFieldNames as $field)
                                <div class="form-group{{ $errors->has($maquinaFields[$i]) ? ' has-error' : '' }}">
                                    <label for="{{$maquinaFields[$i]}}" class="col-md-4 control-label">{{$field}}</label>
                                    <div class="col-md-6">
                                        <input id="{{$maquinaFields[$i]}}" type="text" class="form-control" name="{{$maquinaFields[$i]}}" value="{{ old($maquinaFields[$i]) }}" required autofocus>
                                        @if ($errors->has($maquinaFields[$i]))
                                            <span class="help-block">
                                                <strong>{{ $errors->first($maquinaFields[$i]) }}</strong>
                                            </span>
                                        @endif
                                    </div>
                                </div>
                                                            @endforeach
                          </div>
                          @yield('moreFields')

                          <label for="workDetail" class="col-md-4 control-label">Trabajo a realizar</label>
                          <div class="col-md-6">
                              <input id="workDetail" type="text" class="form-control" name="workDetail" value="{{ old('workDetail') }}" required autofocus>
                              
                          </div><br/><br/>
                          <label for="sucursalId" class="col-md-4 control-label">Sucursal</label>
                          <div class="col-md-6">
                            <select id="sucursalId" name="sucursalId" form="mainForm" class="form-control">
                              @foreach($sucursales as $sucursal)
                                <option value="{{$sucursal->id}}">{{$sucursal->name}}</option>
                              @endforeach
                            </select>
                          </div>
                          <input id="clienteId" type="hidden" name="clientId" value="">

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

                    <div class="col-md-6">
                      <!-- 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">
                      <input id="zipCode" type="hidden" name="zipCode" value="">
                      <!-- MAPA-->
                  </div>
                  </div>
                    <div class="form-group">
                        <div class="col-md-6 col-md-offset-4">
                            <button type="submit" class="btn btn-primary">
                                Agregar
                            </button>
                        </div>
                    </div>
                	</div>

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

@endsection
@section('scripts')
  <script>
    $(document).ready(function() {

      $(window).keydown(function(event){
        if(event.keyCode == 13) {
          event.preventDefault();
          return false;
        }
      });
      
      let errorMessage = "{{$errorMessage}}";

      if (errorMessage) {
        alert(errorMessage);
      };
      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]);
      });
    });
  </script>
@endsection