@extends('layouts.app')
@section('title', 'Encomendas')
@section('content')
 <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<!-- Estilizando um componente do select2 que estava desajustando o layout -->
<style type="text/css">
  .select2-container .select2-selection--single {
    height: unset !important;
  }

  #select_forma_pagamento {
    height: 50px;
    border-radius: 5px;
  }
</style>
@include('layouts.headers.cards_prod')
<!-- A consulta desta tabela deve envolver INNER JOIN por causa dos nomes da família, nome do grupo e subgrupo, todos vindos das respectivas chaves estrangeiras -->

<div class="container-fluid mt--5">
  <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">{{ __('Produtos no Carrinho') }}</h3>
            </div>
            <div class="col-4 text-right">
              <a href="{{ route('encomendas.encomendas') }}" class="btn btn-sm btn-primary">{{ __('Minhas Encomendas') }}</a>
            </div>
          </div>
        </div>
        <div class="card-body">
        @if (Session::has('mensagem-sucesso'))
              <div class="alert alert-success alert-dismissible fade show" role="alert">
                <span class="alert-icon"><i class="ni ni-notification-70"></i></span>
                <span class="alert-text"><strong>{{ Session::get('mensagem-sucesso') }}</strong>
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
              </div>
              @endif
              @if (Session::has('mensagem-falha'))
              <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <span class="alert-icon"><i class="ni ni-notification-70"></i></span>
                <span class="alert-text"><strong>{{ Session::get('mensagem-falha') }}</strong>
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
              </div>
              @endif
          <form class="form-control p-0 mb-5" method="POST" action="{{ route('encomendas.adicionar') }}">
            {{ csrf_field() }}
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12">
                <div class="form-group">
                  <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></option>
                    <option dado='{{$produto->id}}' dado2='{{$produto->nome_produto}}' dado3="{{$produto->id_quantidade_produtos_fk}}" 
                        @if($produto->preco_produto_oferta == 0) 
                          dado4="{{number_format($produto->preco_produto_atacado, 2, ',', '.')}}" 
                        @else 
                          dado4="{{number_format($produto->preco_produto_oferta, 2, ',', '.')}}" 
                        @endif
                    value="{{$produto->id}}"> ({{$produto->id}}) {{$produto->nome_produto}}</option>
                    @endforeach
                  </select>
                </div>
              </div>
            </div>
            <div class="input-group">
              <input type="hidden" id="codigo" name="id" class="form-control" placeholder="Codigo">
              <input type="text" id="produto" name="produto" class="form-control" placeholder="Produto" disabled>
              <input type="text" id="preco" name="preco" class="form-control" placeholder="Preço" disabled>
              <input type="hidden" id="quantidade" name="id_quantidade_produtos_fk" class="form-control" placeholder="Quantidade">
              <div class="input-group-append" id="button-addon4">
                <button type="submit" class="btn btn-success"><i class="fas fa-shopping-cart"> </i></button>
              </div>
            </div>
          </form>
          <br><br>
          <div class="table-responsive">
            <div>
              @forelse ($encomendas as $encomenda)
              <div class="row">
                <div class="card card-frame col-md-4 sm-12">
                  <div class="card-body">
                    Pedido: {{ $encomenda->id }}
                    <br>
                    Criado em: {{ $encomenda->created_at->format('d/m/Y H:i') }}
                  </div>
                </div>
                <div class="card card-frame col-md-4 p-0 sm-12">
                  <div class="card-body">
                    <form method="post" action="#" id="form_pagamento_cliente">
                      <select class="w-100" id='select_forma_pagamento'>
                        <option disabled="on" selected="on">Forma de pagamento</option>
                        <option>À vista</option>
                        <option>Cartão de crédito</option>
                      </select>
                    </form>
                  </div>
                </div>
                <div class="card card-frame col-md-4 p-0 sm-12">
                  <div class="card-body">
                    <form method="post" action="#" id="form_nome_cliente">
                    <select class="w-100 select_clientes" id='select_clientes'>
                     <option value="04005925000186">REMAN EQUIPAMENTOS ELETRONICOS LTDA ME</option>
                    @foreach($clientes as $cliente)
                    <option value="{{$cliente->cnpj_cpf_cliente}}">{{$cliente->razao_cliente}}</option>
                    @endforeach
                  </select>
                    </form>
                  </div>
                </div>
              </div>
              <div class="card-body">
                <table class="table align-items-center table-dark table-flush" id="datatable-buttons">
                  <thead class="thead-dark">
                    <tr class="text-center">
                      <th scope="col-4">Imagem</th>
                      <th scope="col-1">Quantidade</th>
                      <th scope="col-1">Valor</th>
                      <th scope="col-1">Desconto</th>
                      <th scope="col-1">Total</th>
                      <th scope="col-3">Ação</th>
                    </tr>
                  </thead>
                  <tbody class="list">
                    @php
                    $total_encomenda = 0;
                    @endphp
                    @foreach ($encomenda->encomenda_produtos as $encomenda_produto)
                    <tr class="text-center">
                      <th scope="row">
                        <div class="media align-items-center">
                          <a href="#" class="avatar avatar-xl rounded-circle mr-2">
                            <img alt="Image placeholder" src="{{ $encomenda_produto->produto->imagem_produto }}">
                          </a>
                          <div class="media-body">
                            <span class="name mb-0 text-sm">{{ $encomenda_produto->produto->nome_produto }}</span>
                          </div>
                        </div>
                      </th>
                      <td class="quantidade">
                        <div class="center-align">
                          <a class="col l4 m4 s4" href="#" onclick="encomendasRemoverProduto({{ $encomenda->id }}, {{ $encomenda_produto->produto_id_fk }}, 1 ,{{$encomenda_produto->produto->id_quantidade_produtos_fk}})">
                            <i class="ni ni-fat-delete"></i>
                          </a>
                          <span class="col l4 m4 s4"> {{ $encomenda_produto->qtd }} </span>
                          <a class="col l4 m4 s4" href="#" onclick="encomendasAdicionarProduto({{ $encomenda_produto->produto_id_fk }}, {{$encomenda_produto->produto->id_quantidade_produtos_fk}})">
                            <i class="ni ni-fat-add"></i>
                          </a>
                        </div>
                      </td>
                      <td>
                        @php
                        $total_produto = $encomenda_produto->valores - $encomenda_produto->descontos;
                        $total_encomenda += $total_produto;
                        @endphp
                        @php
                        $valor = $encomenda_produto->valores / $encomenda_produto->qtd;
                        @endphp
                        R$ {{ number_format($valor, 2, ',', '.') }}
                      </td>
                      <td>
                        R$ {{ number_format($encomenda_produto->descontos, 2, ',', '.') }}
                      </td>
                      <td>R$ {{ number_format($total_produto, 2, ',', '.') }}</td>
                      <td class="text-center">
                        <a class="btn btn-danger" href="#" onclick="encomendasRemoverProduto({{ $encomenda->id }}, {{ $encomenda_produto->produto_id_fk }}, 0, {{$encomenda_produto->produto->id_quantidade_produtos_fk}} )">Retirar produto</a>
                      </td>
                    </tr>
                    @endforeach
                  </tbody>
                  <tfoot>
                    <tr class="text-center">
                      <td>
                        <h2 class="text-white">TOTAL DO PEDIDO: </h2>
                      </td>
                      <td>
                        <h3 class="text-white">R$ {{ number_format($total_encomenda, 2, ',', '.') }}</h3>
                      </td>
                      <td colspan="2">
                        <form method="POST" action="{{ route('encomendas.desconto') }}">
                          {{ csrf_field() }}
                          <div class="input-group">
                            <input type="hidden" name="model_encomenda_id" value="{{ $encomenda->id }}">
                            <input type="text" name="cupom" class="form-control form-control-alternative" placeholder="Cupom de desconto" aria-label="Cupom de desconto" aria-describedby="button-addon2">
                            <div class="input-group-append">
                              <button class="btn btn-outline-info" type="submit" id="button-addon2">Validar</button>
                            </div>
                          </div>
                        </form>
                      </td>
                      <td> <a class="btn btn-large btn-primary" href="{{ route('produtos.card') }}">Continuar encomendando</a></td>
                      <td>
                        <form method="POST" action="{{ route('encomendas.concluir') }}" id="concluir_encomenda">
                          {{ csrf_field() }}
                          <input type="hidden" name="model_encomenda_id" value="{{ $encomenda->id }}">
                          <input type="hidden" name="clone_id_cliente_fk" id="clone_id_cliente">
                          <input type="hidden" name="clone_forma_pagamento" id="clone_forma_pagamento">
                          <button type="submit" class="btn btn-large btn-success" id="btn_adicionar">
                            Concluir encomenda
                          </button>
                        </form>
                      </td>
                    </tr>
                  </tfoot>
                </table>
              </div>
              @empty
              <h5>Não há nenhum encomenda no encomendas</h5>
              @endforelse
            </div>
          </div>
          <form id="form-remover-produto" method="DELETE" action="{{ route('encomendas.remover') }}">
            {{ csrf_field() }}
            {{ method_field('DELETE') }}
            <input type="hidden" name="model_encomenda_id">
            <input type="hidden" name="produto_id_fk">
            <input type="hidden" name="item">
          </form>
          <form id="form-adicionar-produto" method="POST" action="{{ route('encomendas.adicionar') }}">
            {{ csrf_field() }}
            @if(isset($encomenda_produto->produto->id_quantidade_produtos_fk))
            <input type="text" name="id_quantidade_produtos_fk" value="{{$encomenda_produto->produto->id_quantidade_produtos_fk}}">
            @endif
            <input type="hidden" name="id">
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- Modal para alerta de campos vazios -->
  <div class="modal fade" id="modal_alerta" tabindex="-1" role="dialog" aria-labelledby="modal-alerta" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="mx-auto text-danger">Encomenda incompleta</h3>
        </div>
        <div class="modal-body">
          <h5 class="mx-auto text-default">Preencha os seguintes campos</h5>
          <div class="texto_alerta"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default font-weight-bold ml-auto mr-4" data-dismiss="modal">Fechar</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Comentando o navbar horizontal -->
@include('layouts.footers.auth')

@endsection

@push('js')
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script src="{{ asset('argon/vendor/datatables.net/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.flash.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.print.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-select-bs4/js/dataTables.select.min.js') }}"></script>
<script type="text/javascript" src="/js/verificar_nome_cliente.js"></script>
<script type="text/javascript" src="/js/carrinho.js"></script>
<script>
$(document).ready(function(){
  function setImage (image) {
  if (!image.id) {
    return image.text;
  }
  var baseUrl = "img/produtos_cadastrados";
  var $image = $(
    '<span><img width="50" src="' + baseUrl + '/img_' + image.element.value  + '.jpg" /> ' + image.text + '</span>'
  );
  return $image;
};
  $('#select_clientes').select2();
  $('#select_produtos').select2({
		templateResult: setImage,
		templateSelection: setImage,
    placeholder: 'Selecione um produto',
    allowClear : true,
    minimumInputLength: 2,
language: {
  inputTooShort: function () {
    return "Coloque pelo menos 2 letras...";
  }
}
  });
})
  </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>
@endpush