@extends('layouts.app')

@section('title', 'Compras')
@section('content')
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="{{ asset('argon/vendor/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('argon/vendor/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('argon/vendor/datatables.net-select-bs4/css/select.bootstrap4.min.css') }}">

<!-- Estilizando um componente do select2 que estava desajustando o layout -->
<style type="text/css">
  .select2-container .select2-selection--single {
    height: unset !important;
  }

  .white-space {
    white-space: pre-wrap !important;
  }
</style>

@include('layouts.headers.cards_prod')

<div class="container-fluid mt--5">
  <div class="row">
    @if (Session::has('mensagem-sucesso'))
    <div class="alert alert-success alert-dismissible fade show col-md-12" 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 col-md-12" 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
    <div class="col-xl-12 order-xl-2 order-sm-1">
      <div class="card bg-secondary shadow">
        <div class="card-header bg-white border-0">
          <div class="row align-items-center">
            <div class="col-md-8">
              <h3 class="mb-0">{{ __('Lista de compra') }}</h3>
            </div>
            <div class="col-md-4 ">
              <button type="button" class="btn btn-sm btn-success float-right" data-toggle="modal" data-target="#ModalAdicionarProduto">Adicionar</button>
            </div>
          </div>
        </div>
        <div class="card-body p-1 m-1 ">

          <div class="table-sm">
            @forelse ($compras as $compra)

            <div class="card bg-default mb-2 p-0 col-md-12">
              <div class="card-body p-2">
                <div class="row">
                  <div class="col-auto mx-auto">
                    <div class="icon icon-shape bg-white text-dark rounded-circle shadow">
                      <span class="text-warning font-weight-bold">{{ $compra->id }}</span>
                    </div>
                  </div>
                  <div class="col-auto d-flex justify-content-center align-items-center">
                    <h5 class="card-title text-uppercase text-muted mb-0 text-white">Fornecedor:</h5>
                  </div>
                  <div class="col d-flex justify-content-center align-items-center">
                    <select class="w-100 select_clientes form-control" name="fornecedor_entrada" id='select_fornecedores'>
                      @foreach($fornecedores as $fornecedor)
                      <option></option>
                      <option cod2='{{$fornecedor->id}}' razao='{{Str::words($fornecedor->razao_cliente,2,"")}}' cnpj="{{$fornecedor->cnpj_cpf_cliente}}" email="{{$fornecedor->email_cliente}}" cidade="{{$fornecedor->cidade_cliente}}" telefone="{{$fornecedor->telefone_cliente}}" value="{{$fornecedor->cnpj_cpf_cliente}}"> {{$fornecedor->razao_cliente}}
                      </option>
                      @endforeach
                    </select>
                  </div>
                </div>
              </div>
            </div>

            @php
            $total_compra = 0;
            @endphp

            <div class="card-body p-0">
              <table class="table align-items-center table-dark table-flush">
                <thead class="thead-dark">
                  <tr class="text-center">
                    <th scope="col-4">Produto</th>
                    <th scope="col-1">QTD</th>
                    <th scope="col-1">Valor</th>
                    <th scope="col-1">Total</th>
                    <th scope="col-3">Ação</th>
                  </tr>
                </thead>
                <tbody class="list">

                  @foreach ($compra->compra_produtos as $compra_produto)
                  <tr class="text-center">
                    <th>
                      <div class="media align-items-center">
                        <a href="#" class="avatar avatar-sm rounded-circle mr-2">
                          <img alt="Image placeholder" src="{{ $compra_produto->produto->imagem_produto }}">
                        </a>
                        <div class="media-body">
                          <span class="name mb-0 text-sm white-space">{{ $compra_produto->produto->nome_produto }}</span>
                        </div>
                      </div>
                    </th>
                    <td class="quantidade">
                      <div class="center-align">
                        {{ $compra_produto->quantidade_produto }}
                      </div>
                    </td>
                    <td>
                      R$ {{ number_format($compra_produto->valor_unitario_produto, 2, ',', '.') }}
                    </td>

                    <td>R$ {{ number_format($compra_produto->valor_compra_produto, 2, ',', '.') }}</td>
                    <td class="text-center">
                      <a href="{{ route('compras.remover',$compra_produto->id) }}" class="btn btn-danger">Retirar</a>
                    </td>
                  </tr>
                  @php
                  $total_compra += $compra_produto->valor_compra_produto;
                  @endphp
                  @endforeach
                </tbody>
                <tfoot>
                  <tr class="text-center">
                    <td colspan="4">
                      <span class="h3 text-white">TOTAL DO PEDIDO: </span>
                      <span class="h3 text-white"> R$ {{ number_format($total_compra, 2, ',', '.') }}</span>
                    </td>
                    <td>
                      <form method="POST" action="{{ route('compras.concluir',['id'=>$compra->id,'valor'=>$total_compra]) }}" id="concluir_compra">
                        {{ csrf_field() }}
                        <!-- <input type="number" step=".01" class="form-control" id="valor_pagar" name="valor_pagar" value="0.00" min="0" placeholder=""> -->
                        <select class="w-100 form-control d-none" id="id_cliente_fk" name='id_cliente_fk' placeholder="Pesquise o nome de um cliente">
                          <option id="option_fornecedor" selected value=""></option>
                        </select>
                        <button type="button" class="btn btn-large btn-success" id="btn_adicionar">
                          Concluir
                        </button>
                      </form>
                    </td>
                  </tr>
                </tfoot>
              </table>
            </div>
            @empty
            <h5>Não há nenhum compra no compras</h5>
            @endforelse
          </div>

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

<div class="modal fade" id="ModalAdicionarProduto" tabindex="-1" role="dialog" aria-labelledby="TituloModalCentralizado" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" style="max-width:70% !important" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="TituloModalCentralizado">Adicionar Produto</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body text-center p-0 m-0 ">
        <div class="card bg-secondary shadow">
          <div class="card-body p-1 m-1">
            <div class="table-responsive">
              <table class="table table-flush table-dark table-sm w-100" id="table">
                <thead class="thead-dark">
                  <tr class="text-center">
                    <th>Opção</th>
                    <th>Codigo</th>
                    <th></th>
                    <th></th>
                    <th>Nome</th>
                    <th>Referência</th>
                    <th>Marca</th>
                    <th>Quantidade</th>
                    <th>Valor</th>
                  </tr>
                </thead>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer p-1">
        <form class="mb-0 w-100 text-center" method="POST" id="form_produtos" action="{{ route('compras.adicionar') }}">
          {{ csrf_field() }}
          <button type="button" id="btn_produtos" class="btn btn-info">Conferir</button>
          <button type="submit" id="btn_submit" class="btn btn-success" disabled>Confirmar</button>

        </form>
      </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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/sweetalert2@9.15.1/dist/sweetalert2.all.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="https://cdn.datatables.net/responsive/2.2.2/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="{{ asset('js/contas_pagar.js') }}"></script>

<script>
  $(document).ready(function() {
    function setImage(image) {
      if (!image.id) {
        return image.text;
      }
      var baseUrl = "img/produtos_cadastrados";
      var referencia = $('#select_produtos').find(':selected').attr('dado5');
      var $image = $(
        '<span><img width="50" src="' + baseUrl + '/img_' + image.element.value + '.jpg" /> ' + image.text + '<br><strong>Referência: </strong>' + image.element.title + '</span>'
      );
      return $image;
    };
    $('#select_fornecedores').select2({
      placeholder: 'Selecione um fornecedor',
    });
    $('#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');
    var dado5 = $(this).find(':selected').attr('dado5');

    $('#codigo').attr('value', dado);
    $('#produto').attr('value', dado2);
    $('#preco').attr('value', dado4);
    $('#quantidade').attr('value', 1);
    $('#referencia').attr('value', dado5);

  });

  $('#select_fornecedores').change(function() {
    var valor = this.value;
    var dado = this.text;

    $('#option_fornecedor').val(valor);
    $('#option_fornecedor').text(dado);

  });
</script>

<script>
  $(document).on('click', '#btn_adicionar', function() {
    if ($('#option_fornecedor').val() != '' || $('#option_fornecedor').text() != '') {
      $('#concluir_compra').submit();
    } else
      Swal.fire(
        'Não esqueça do Fornecedor',
        '',
        'error'
      );
  });
</script>

<!-- Datatable Produto -->
<script>
  $(document).ready(function() {
    var table = $('#table').DataTable({
      "processing": false,
      "serverSide": false,
      "ajax": "{{ route('produtos.data')}}",
      "deferRender": false,

      columns: [

        {
          data: null,
          name: null,
          orderable: false,
          defaultContent: '',
          searchable: false,
          className: 'align-middle text-center px-1',
          "render": function(data, type, row) {

            data = '<div class="custom-control custom-checkbox">' +
              '<input type="checkbox" class="custom-control-input selecionar_produto" form="form_produtos" id="item-' + row.id + '" name="id[]" value="' + row.id + '">' +
              '<label class="custom-control-label" for="item-' + row.id + '"></label>' +
              '</div>';

            return data;
          }
        },

        {
          data: 'id',
          name: 'id',
          visible: true,
          className: 'align-middle text-center px-1',
        },

        {
          data: '',
          name: '',
          visible: false,
          className: 'align-middle text-center px-1',
          "render": function(data, type, row) {

            data = '-';

            return data;
          }
        },

        {
          orderable: false,
          data: null,
          defaultContent: '',
          searchable: false,
          className: 'align-middle text-center px-1 ',
          "render": function(data, type, row) {

            data = '<img class="avatar avatar-sm" src="' + row.imagem_produto + '">';

            return data;
          }
        },

        {
          data: 'nome_produto',
          name: 'nome_produto',
          visible: true,
          className: 'align-middle text-center white-space px-1 ',
        },

        {
          data: 'referencia_produto',
          name: 'referencia_produto',
          visible: true,
          className: 'align-middle text-center px-1',
        },

        {
          data: 'nome_marca_produto',
          name: 'nome_marca_produto',
          visible: false,
          className: 'align-middle text-center px-1',
        },

        {
          data: 'quantidade_compra',
          name: 'quantidade_compra',
          className: 'align-middle text-center px-1',
          defaultContent: '',
          width: '100px',
          "render": function(data, type, row) {
            data = '<input type="number" form="form_produtos" class="form-control form-control-sm text-center" id="qtd-' + row.id + '" disabled required value="0" name="qtd[]" max="" min="0">';
            return data;
          }
        },

        {
          data: 'preco_produto_custo',
          name: 'preco_produto_custo',
          className: 'align-middle text-center px-1',
          defaultContent: '',
          width: '100px',
          "render": function(data, type, row) {
            data = '<input type="number" form="form_produtos" class="form-control form-control-sm text-center" id="valor-' + row.id + '" disabled required value="' + row.preco_produto_custo + '" name="valor[]" step=".01" min="0">';
            return data;
          }
        },

      ],
      "language": {
        "info": "Mostrando de _START_ até _END_ de _TOTAL_ registos",
        "search": "Procurar:",
        "paginate": {
          "first": "Primeiro",
          "previous": "<",
          "next": ">",
          "last": "Último"
        }
      },
      dom: 'Bftp',
      lengthMenu: [
        [25, 10, 50, -1],
        ['25 linhas', '10 linhas', '50 linhas', 'Todas as linhas']
      ],
      buttons: [
        // {
        //   extend: 'pageLength',
        //   className: 'btn bg-light rounded'
        // },
        {
          text: 'Reiniciar Tabela',
          className: 'btn bg-dark rounded text-white',
          action: function(e, dt, button, config) {
            dt.ajax.reload(null, false);
          }
        }
      ],
      stateSave: true

    });

    $(document).on('click', '#btn_produtos', function() {

      table.search('').draw();

      $.fn.dataTable.ext.search.push(
        function(settings, data, dataIndex) {
          return ($(table.row(dataIndex).node()).hasClass('selected')) ? true : false;
        }
      );

      table.draw();

      $.fn.dataTable.ext.search.pop();

      $('#btn_submit').prop('disabled', '');
    });


  });
</script>

<!-- Checkbox Produto -->
<script>
  $(document).on('click', '.selecionar_produto', function() {
    $valor = $(this).val();
    var row = $(this).parent().parent().parent();

    var campo = $("#qtd-" + $valor);
    var campo2 = $("#valor-" + $valor);

    campo.prop("disabled", !campo.prop("disabled"));
    campo2.prop("disabled", !campo2.prop("disabled"));


    if (!row.hasClass('selected')) {
      row.addClass('selected');
    } else {
      row.removeClass('selected');
    }
  });
</script>

@endpush