@extends('layouts.app')
<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') }}">

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

<div id="preloaders" class="preloader"></div>
@section('title', 'Orçamento')
@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;
    }
</style>

@include('layouts.headers.cards_prod')
@include('layouts.footers.auth')

<!-- 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--7">
    <div class="row">
        <div class="col-xl-8 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-12">
                            <h3 class="mb-0">{{ __('Orçamento') }}</h3>
                        </div>
                    </div>
                </div>
                <div class="card-body p-1 m-1 " id="canvas_div_pdf">
                    <div class="container border border-default rounded p-0 overflow-hidden">
                        <table class="table table-sm table-bordered border-dark">
                            <tr class="text-center align-items-center">
                                <td class="p-3" rowspan="3"><img class="img-fluid my-auto" width="200" src="{{ asset('argon') }}/img/brand/{{auth()->user()->logo}}" alt="logo"></td>
                                <td class="p-0 m-0">
                                    <h4 class="mx-auto">{{$representantes->nome_fantasia_usuario}}</h4>
                                </td>
                            </tr>
                            <tr class="text-center align-items-center">
                                <td class="p-0 m-0">
                                    <h4 class="mx-auto">Telefone: {{$representantes->fone_usuario}}</h4>
                                </td>
                            </tr>
                            <tr class="text-center align-items-center">
                                <td class="p-0 m-0">
                                    <h4 class="mx-auto">Email: {{auth()->user()->email}}</h4>
                                </td>
                            </tr>
                        </table>

                        <table class="table table-sm table-bordered border-dark">
                            <thead class="thead-light">
                                <tr class="text-center">
                                    <th class="p-0">Cliente</th>
                                    <th class="p-0">Representante</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="text-left">
                                    <td class="p-0">
                                        <strong> Nome: </strong><span id="nome"></span>
                                    </td>
                                    <td class="p-0">
                                        <strong> Nome: </strong>{{auth()->user()->name}}
                                    </td>
                                </tr>
                                <tr class="text-left">
                                    <td class="p-0">
                                        <strong> Codigo:</strong> <span id="cod2"></span>
                                    </td>
                                    <td class="p-0">
                                        <strong> Loja:</strong> {{$representantes->nome_fantasia_usuario}}
                                    </td>
                                </tr>
                                <tr class="text-left">
                                    <td class="p-0">
                                        <strong> Email:</strong> <span id="email"></span>
                                    </td>
                                    <td class="p-0">
                                        <strong> Email:</strong> {{auth()->user()->email}}
                                    </td>
                                </tr>
                                <tr class="text-left">
                                    <td class="p-0">
                                        <strong> Cidade:</strong> <span id="cidade"></span> - <span id="estado"></span>
                                    </td>
                                    <td class="p-0">
                                        <strong> Cidade:</strong> {{$representantes->nome_municipio_usuario}} - {{$representantes->uf_usuario}}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="container p-0 overflow-hidden">
                            <div class="table-responsive">
                                <table class="table align-items-center table-sm" id="test">
                                    <thead class="thead-light">
                                        <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 data-html2canvas-ignore="true" scope="col-3">Ação</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                    <tfoot>
                                        <tr class="text-left">
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td class="text-right" colspan="2">
                                                <h3 class="text-center ">Total Pedido: <span class="text-success text-right" id="total_pedido2"></span></h3>
                                            </td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                            <div class="info-pdf p-1">
                                <strong>Observações gerais:</strong>
                                <ul>
                                    <li> Valores com impostos
                                    </li>
                                    <li> Valor aproximado podendo alterar dependendo da quantidade dos itens.
                                    </li>
                                </ul>

                                <strong>Garantia:</strong>

                                <ul>
                                    <li> 1 ano</li>
                                    <p>Obs: Vandalismo, descargas elétricas e uso inadequado não serão cobertos.</p>
                                </ul>

                                <strong>Condições de Pagamento:</strong>

                                <ul>
                                    <li> Á combinar.
                                    </li>
                                </ul>
                                <p style="text-align: right ;float: right;">{{$representantes->nome_municipio_usuario}}, {{date("d/m/Y")}}</p>
                                <p> No aguardo de suas considerações.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4 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-12">
                            <h3 class="mb-0">{{ __('Adicionar Produto') }}</h3>
                        </div>
                    </div>
                </div>
                <div class="card-body p-1 m-1">
                    <form method="POST" action="#">
                        {{ 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_clientes'>
                                        @foreach($clientes as $cliente)
                                        <option></option>
                                        <option cod2='{{$cliente->id}}' nome='{{Str::words($cliente->razao_cliente,3,"")}}' email="{{$cliente->email_cliente}}" cidade="{{$cliente->cidade_cliente}}" estado="{{$cliente->uf_cliente}}" tabela="{{$cliente->consumidor_cliente}}" value="{{$cliente->id}}"> {{$cliente->razao_cliente}}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-12 col-lg-12 col-sm-12">
                                <div class="form-group">
                                    <select class="w-100 select_clientes" id='select_produtos'>
                                        @foreach($produtos as $produto)
                                        <option></option>
                                        <option cod='{{$produto->id}}' produto='{{$produto->nome_produto}}' imagem="{{$produto->imagem_produto}}" @if($produto->preco_produto_oferta == 0)
                                            preco_atacado = "{{$produto->preco_produto_atacado}}"
                                            preco_varejo = "{{$produto->preco_produto_varejo}}"
                                            @else
                                            preco_atacado ="{{$produto->preco_produto_oferta}}"
                                            preco_varejo ="{{$produto->preco_produto_oferta}}"
                                            @endif
                                            value="{{$produto->id}}"> ({{$produto->id}}) {{$produto->nome_produto}}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <input type="hidden" id="codigo" name="id" class="form-control" placeholder="Codigo" disabled>
                            <input type="hidden" id="imagem" name="imagem" class="form-control" placeholder="Imagem" disabled>
                            <!-- <input type="hidden" id="desconto" name="desconto" value="1" min="1" max="30" class="form-control" disabled> -->
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon1"><i class="ni ni-box-2"></i></span>
                                </div>
                                <input type="text" id="produto" name="produto" class="form-control" placeholder="Nome do Produto" value="" disabled>
                            </div>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon1"><i class="ni ni-money-coins"></i></span>
                                </div>
                                <input type="number" id="preco_atacado" name="preco" class="form-control" placeholder="Preço do Produto" value="">
                            </div>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon1"><i class="ni ni-money-coins"></i></span>
                                </div>
                                <input type="number" id="preco_varejo" name="preco" class="form-control" placeholder="Preço do Produto" value="">
                            </div>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon1"><i class="fas fa-tag"></i></span>
                                </div>
                                <input type="number" id="desconto" name="desconto" class="form-control" placeholder="Desconto por produto" value="0" min="0">
                            </div>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon1"><i class="ni ni-fat-add"></i></span>
                                </div>
                                <input type="number" id="quantidade" name="quantidade" value="1" min="1" class="form-control" placeholder="Quantidade">
                            </div>
                            <div class="input-group d-none">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon1"><i class="ni ni-table"></i></span>
                                </div>
                                <input type="text" id="tabela" name="tabela" value="" class="form-control" placeholder="Tabela">
                            </div>
                        </div>
                        <div>
                            <button type="button" class="btn btn-success font-weight-bold" onclick="grid()"><i class="fas fa-shopping-cart"> </i> ADD</button>

                            <button type="button" class="btn btn-danger  font-weight-bold" onclick="getPDF()" id="gerar_pdf"><i class="fas fa-file-pdf"> </i> PDF</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('js')
<script src="js/print/es6-promise.auto.min.js"></script>
<script src="js/print/jspdf.min.js"></script>
<script src="js/print/html2canvas.min.js"></script>
<script src="js/print/html2pdf.min.js"></script>
<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="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.2/js/dataTables.responsive.min.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({
            placeholder: 'Selecione um cliente',
            allowClear: true
        });

        $('#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_clientes').change(function() {

        var valor = this.value;
        var cod2 = $(this).find(':selected').attr('cod2');
        var nome = $(this).find(':selected').attr('nome');
        var email = $(this).find(':selected').attr('email');
        var cidade = $(this).find(':selected').attr('cidade');
        var estado = $(this).find(':selected').attr('estado');
        var tabela = $(this).find(':selected').attr('tabela');
        
        if(email == 'cliente@reman.com.br'){
            email = '-';
        }

        document.getElementById('cod2').innerHTML = cod2;
        document.getElementById('nome').innerHTML = nome;
        document.getElementById('email').innerHTML = email;
        document.getElementById('cidade').innerHTML = cidade;
        document.getElementById('estado').innerHTML = estado;
        document.getElementById('tabela').value = tabela;

    });
</script>

<script>
    $('#select_produtos').change(function() {
        var valor = this.value;
        var cod = $(this).find(':selected').attr('cod');
        var produto = $(this).find(':selected').attr('produto');
        var imagem = $(this).find(':selected').attr('imagem');
        var preco_atacado = $(this).find(':selected').attr('preco_atacado');
        var preco_varejo = $(this).find(':selected').attr('preco_varejo');

        document.getElementById('codigo').setAttribute("value", cod);
        document.getElementById('produto').setAttribute("value", produto);
        document.getElementById('preco_atacado').setAttribute("value", preco_atacado);
        document.getElementById('preco_varejo').setAttribute("value", preco_varejo);
        document.getElementById('imagem').setAttribute("value", imagem);
    });
</script>

<script>
    function grid() {
       tabela = document.getElementById('tabela').value;
        imagem = document.getElementById("imagem").value;
        produto = document.getElementById("produto").value;
        if(tabela == 1)
        preco = document.getElementById("preco_varejo").value;
        else
        preco = document.getElementById("preco_atacado").value;
        quantidade = document.getElementById("quantidade").value;
        desconto = document.getElementById("desconto").value;
        total_desconto = desconto * quantidade;
        total = (quantidade * preco) - total_desconto;

        dados = '<tr class="text-center font-weight-bold">' +
            '<td scope="row">' +
            '<div class="media align-items-center">' +
            '<img class="avatar" width="100" height="100" src="' + imagem + '">' +
            '<div class="media-body">' +
            '<span class="name mb-0 text-sm white-space">' + produto + '</span>' +
            '</div>' +
            '</div>' +
            '</td>' +
            '<td>' +
            quantidade +
            '</td>' +
            '<td> R$ ' +
            preco.toLocaleString('pt-BR') +
            '</td>' +
            '<td>' +
            total_desconto +
            '</td>' +
            '<td>' +
            total +
            '</td>' +
            '<td data-html2canvas-ignore="true">' +
            '<button class="btn btn-danger btn-remove"><i class="fas fa-trash"></i></button>' +
            '</td>'
        '</tr>'
        $('#grid').find('tbody').append(dados);

        $('#test').find('tbody').append(dados);

        function getTotal(column = 1) {
            let result = 0;
            let columns = $("table tr td:nth-child(" + column + ")");

            columns.each(i => {
                result += parseFloat($(columns[i]).html());
            });

            return result;
        }
        console.log("Soma da primeira coluna: " + getTotal(5));
        document.getElementById('total_pedido2').innerHTML = ' R$ ' + getTotal(5).toLocaleString('pt-BR');
    }
</script>

<script>
    function getPDF() {
        var element = document.getElementById('canvas_div_pdf');
        var opt = {
            margin: 1,
            filename: 'orçamento.pdf',
            image: {
                type: 'jpeg',
                quality: 0.98
            },
            html2canvas: {
                scale: 2,
                y: window.scrollY,
                logging: true
            },
            jsPDF: {
                unit: 'mm',
                format: 'a4',
                orientation: 'portrait'
            }
        };

        // New Promise-based usage:
        html2pdf().set(opt).from(element).save();
    };
</script>

<script>
    $(document).on('click', '.btn-remove', function() {
        $(this).parent().parent().remove();

        function getTotal(column = 1) {
            let result = 0;
            let columns = $("table tr td:nth-child(" + column + ")");

            columns.each(i => {
                result += parseFloat($(columns[i]).html());
            });

            return result;
        }
        console.log("Soma da primeira coluna: " + getTotal(5));
        document.getElementById('total_pedido2').innerHTML = ' R$ ' + getTotal(5).toLocaleString('pt-BR');
    });
</script>

@endpush