@extends('layout.main')

@section('title', 'NUSA - Dashboard de Contratos')

@section('content')
            <div class="content">
        <div class="container-fluid">
          <div class="card">
            <div class="card-header card-header-info">
              <h4 class="card-title"><strong>Instalação</strong></h4>
              <p class="card-category">Registre uma nova instalação no sistema.</p>
            </div>
            <div class="card-body">
              <div id="typography">
              <form method="POST" action="">
              <br>
                <div id="formulario">
                <input type="button" id="add_div" value="+" class="btn btn-info">
                <button type="submit" class="btn btn-success pull-right">Enviar</button>
                <br>
                <br>

                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label class="bmd-label-floating">Unidade</label>
                      <select name="unidade_id" class="form-control">
                          @foreach($unidades as $unidade)
                          <option value="{{ $unidade->id }}">{{ $unidade->nome }}</option>
                          @endforeach
                      </select>
                    </div>
                    <div class="form-group">
                       <label class="bmd-label-floating">Data</label>
                      <input type="text" class="form-control" name="data">
                    </div>
                    <div class="form-group">
                      <input type="hidden" class="form-control" value="{{ $id_usuario }}" name="user_id">
                    </div>
                  </div>
                </div>
                <BR>
                        <div class="row">
                        
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="bmd-label-floating">Equipamento</label>
                                    <select name="equipamento_id" class="form-control">
                                        @foreach($equipamentos as $equipamento)
                                        <option value="{{ $equipamento->id }}">{{ $equipamento->equipamento }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="bmd-label-floating">Quantidade</label>
                                    <select name="equipamento_qtd" class="form-control">
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                        <option value="6">6</option>
                                        <option value="7">7</option>
                                        <option value="8">8</option>
                                        <option value="9">9</option>
                                        <option value="10">10</option>

                                    </select>
                                </div>
                            </div>
                        </div>
                       <div class="clearfix"></div>
                    </form>
                    
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

        <script>
        $(document).ready(function() {
   var maximo = 50;  
   var i = 1;
   $('#add_div').click (function(e) {
     e.preventDefault();  
     if (i < maximo) {
       $('#formulario').append('<div class="row">\
                            <div class="col-md-3">\
                                <div class="form-group">\
                                    <label class="bmd-label-floating">Equipamento</label>\
                                    <select name="equipamento_id" class="form-control">\
                                        @foreach($equipamentos as $equipamento)\
                                        <option value="{{ $equipamento->id }}">{{ $equipamento->equipamento }}</option>\
                                        @endforeach\
                                    </select>\
                                </div>\
                            </div>\
                            <div class="col-md-3">\
                                <div class="form-group">\
                                    <label class="bmd-label-floating">Quantidade</label>\
                                    <select name="equipamento_qtd" class="form-control">\
                                        <option value="1">1</option>\
                                        <option value="2">2</option>\
                                        <option value="3">3</option>\
                                        <option value="4">4</option>\
                                        <option value="5">5</option>\
                                        <option value="6">6</option>\
                                        <option value="7">7</option>\
                                        <option value="8">8</option>\
                                        <option value="9">9</option>\
                                        <option value="10">10</option>\
                                    </select>\
                                </div>\
                            </div>\
                        </div>');
           i++;
     }
  });
 
    $('#idDiv').on("click",".remove",function(e) {
      e.preventDefault();
      $(this).parent('div').remove();
      i--;
    });
});
    </script>
@endsection