@extends('../layouts.app')
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
@section('title', 'Fazer encomenda')
@section('content')

<style type="text/css">
  .select2-container .select2-selection--single {
    height: unset !important;
  }
</style>
@include('../layouts.headers.cards_prod')

@include('../layouts.footers.auth')

<div class="container-fluid mt--7">
  <div class="row">
    <div class="col-xl-12 order-xl-1">
      <div class="card bg-secondary shadow">
        <div class="card-header bg-white border-0">
          <div class="row align-items-center">
            <div class="col-8">
              <h3 class="mb-0">{{ __('Pedido de Encomenda') }}</h3>
            </div>
            <div class="col-4 text-right">
              <a href="{{route('clientes')}}" class="btn btn-sm btn-primary">{{ __('Voltar a Lista') }}</a>
            </div>
          </div>
        </div>
        <div class="card-body">
          <form method="post" enctype="multipart/form-data" action="{{route('encomendas.novo_pedido')}}" id="form_prepare">
            <!-- Passando o Token -->
            {{csrf_field()}}

            <h6 class="heading-small text-muted mb-4">Dados do Pedido de Encomenda</h6>
            <div class="row">
              <div class="col-md-6 col-lg-6 col-sm-6">
                <div class="form-group">
                  <label for="select_clientes"><small>Empresa</small></label>
                  <select class="w-100 select_clientes" id='select_clientes'>
                    <option disabled="on" selected="on">Pesquise o nome de um forncededor</option>
                    @foreach($fornecedores as $fornecedor)
                    <option value="{{$fornecedor->cnpj_cpf_cliente}}">{{$fornecedor->razao_cliente}}</option>
                    @endforeach
                  </select>
                </div>
              </div>
              <div class="col-md-6 col-lg-6 col-sm-6">
                <div class="form-group">
                  <label for="select_produtos"><small>Produto</small></label>
                  <select class="w-100 select_clientes" id='select_produtos'>
                    <option disabled="on" selected="on">Pesquise o nome de um produto</option>
                    @foreach($produtos as $produto)
                    <option dado='{{$produto->id}}' dado2='{{$produto->nome_produto}}' dado3="{{$produto->unidade_produto}}" dado4="{{number_format($produto->preco_produto_atacado, 2, ',', '.')}}" value="{{$produto->id}}">{{$produto->nome_produto}}</option>
                    @endforeach
                  </select>
                </div>
              </div>
            </div>

            <div class="form-group row">
              <div class="col-lg-3 col-md-3 col-sm-12 mb-4">
                <label for="codigo"><small>Código do produto</small></label>
                <input type="text" id="codigo" name="codigo" class="form-control" placeholder="Codigo" disabled>
              </div>
              <div class="col-lg-3 col-md-3 col-sm-12 mb-4">
                <label for="produto"><small>Produto escolhido</small></label>
                <input type="text" id="produto" name="produto" class="form-control" placeholder="Produto" disabled>
              </div>
              <div class="col-lg-3 col-md-3 col-sm-12 mb-4">
                <label for="preco"><small>Preço</small></label>
                <input type="text" id="preco" name="preco" class="form-control" placeholder="Preço" disabled>
              </div>
              <div class="col-lg-3 col-md-3 col-sm-12 mb-4">
                <label for="quantidade"><small>Quantidade</small></label>
                <input type="number" id="quantidade" name="quantidade" class="form-control" placeholder="Quantidade" min="0">
              </div>
              <div class="col-lg-3 col-md-3 col-sm-12 mb-4">
              </div>
            </div>
            <div class="row mt--5">
              <div class="input-group-append ml-auto mr-3" id="button-addon4">
                <button class="btn btn-success  font-weight-bold" type="submit"><i class="fas fa-plus"></i> Adicionar</button>
              </div>
            </div>
            <div class="table-responsive py-4">
              <table class="table table-flush table-bordered table-dark" id="grid">
                <thead class="thead-dark">
                  <tr class="text-center font-weight-bold">
                    <th>Codigo</th>
                    <th>Produto</th>
                    <th>Preço</th>
                    <th>Quantidade</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="modal-alerta" tabindex="-1" aria-labelledby="modal-alerta" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-lg modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="msg_erro text-danger mx-auto"></h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p class="texto_erro font-weight-bold"></p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-info ml-auto mr-3 p-2" data-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>
@endsection
@push('js')
<script>
  function formatState (state) {
  if (!state.id) {
    return state.text;
  }
  var baseUrl = "../img/produtos_cadastrados";
  var $state = $(
    '<span><img src="' + baseUrl + '/img_' + state.id  + '.jpg" class="img-flag" /> ' + state.text + '</span>'
  );
  return $state;
};
  $('#select_clientes').select2();
  $('#select_produtos').select2({
    templateResult: formatState
  });
  </script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script>
  $('#select_produtos').change(function() {
    var valor = this.value;
    var dado = $(this).find(':selected').attr('dado');
    var dado2 = $(this).find(':selected').attr('dado2');
    // var dado3 = $(this).find(':selected').attr('dado3');
    var dado4 = $(this).find(':selected').attr('dado4');

    document.getElementById('codigo').setAttribute("value", dado);
    document.getElementById('produto').setAttribute("value", dado2);
    // document.getElementById('unidade').setAttribute("value", dado3);
    document.getElementById('preco').setAttribute("value", dado4);
    document.getElementById('quantidade').setAttribute("value", 0);
  });
</script>
<script type="text/javascript">
  $(function() {
    $('#form_prepare').on('submit', function(e) {
      if ($('#select_clientes').val() == '' ||
        $('#select_clientes').val() == null ||
        $('#select_produtos').val() == '' ||
        $('#select_produtos').val() == null ||
        $('#quantidade').val() == '' ||
        $('#quantidade').val() == null ||
        $('#quantidade').val() == 0
      ) {
        if ($('#quantidade').val() == 0) {
          $('div#modal-alerta h3.msg_erro').html('');
          $('div#modal-alerta p.texto_erro').html('');
          $('div#modal-alerta h3.msg_erro').html('Quantidade insuficiente');
          $('div#modal-alerta p.texto_erro').html('Por favor, preencha o campo Quantidade');
          $('div#modal-alerta').modal('show');
        } else {
          $('div#modal-alerta h3.msg_erro').html('');
          $('div#modal-alerta p.texto_erro').html('');
          $('div#modal-alerta h3.msg_erro').html('Campos incompletos');
          $('div#modal-alerta p.texto_erro').html('Por favor, preencha todos os campos.');
          $('div#modal-alerta').modal('show');
        }
      } else {
        var $this = $(this);
        var tr =
          '<tr class="text-center">' +
          '<td>' + $this.find("input[name='codigo']").val() + '</td>' +
          '<td>' + $this.find("input[name='produto']").val() + '</td>' +
          '<td>' + $this.find("input[name='preco']").val() + '</td>' +
          '<td>' + $this.find("input[name='quantidade']").val() + '</td>' +
          '</tr>';
        $('#grid').find('tbody').append(tr);
        e.preventDefault();
      }
    });
  });

  $(document).ready(function() {
    $("#btn-delete").on('click', function() {
      $("tr").remove();
    });
  });
</script>



@endpush