@extends('layouts.painel')

@section('head')
    <link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">
    <!-- iCheck for checkboxes and radio inputs -->
    <link rel="stylesheet" href="{{ asset('plugins/icheck-bootstrap/icheck-bootstrap.min.css') }}">
    <!-- Select2 -->
    <link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
@endsection

@section('title')
    {{ $title }}
@endsection

@section('content')
    <div class="col-12">
        <form method="POST" action="{{ route('sale.save') }}">
            @csrf
            <div class="card">
                <div class="card-header bg-primary">
                    <h3 class="card-title" id="reference_sale">Pedido Nº # {{ $sale->id }}</h3>

                    @if (auth()->user()->type == 'A')
                        <div class="row" style="float:right">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label>Emitido em:</label>

                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
                                        </div>
                                        <input type="text" id="created_at_input" class="form-control datetime"
                                            value="{{ \Carbon\Carbon::parse($sale->created_at)->setTimezone('America/Sao_Paulo')->format('d/m/Y H:i:s') }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    @else
                        <h3 class="card-title" style="float: right" id="create_at_sale">Emitido em:
                            {{ \Carbon\Carbon::parse($sale->created_at)->setTimezone('America/Sao_Paulo')->format('d/m/Y H:i:s') }}
                        </h3>
                    @endif
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    <div class="container">
                        <div class="row">
                            <div class="form-group col-lg-3">
                                <label for="packed">Embalado</label><br>
                                <input {{ $readonly }} type="checkbox" name="packed" id="packed"
                                    {{ $sale->packed ? 'checked' : '' }} data-label-text="" data-bootstrap-switch
                                    data-on-text="Sim" data-off-text="Não" data-off-color="danger" data-on-color="success">
                            </div>
                            <div class="form-group col-lg-3">
                                <label for="detailed">Detalhado</label><br>
                                <input {{ $readonly }} type="checkbox" name="detailed" id="detailed"
                                    {{ $sale->detailed ? 'checked' : '' }} data-label-text="" data-bootstrap-switch
                                    data-on-text="Sim" data-off-text="Não" data-off-color="danger" data-on-color="success">
                            </div>
                            <div class="form-group col-lg-6" id="details" style="margin-top:-5px">
                                <label for="customer_name">Nome do Cliente</label>
                                <input {{ $readonly }} type="text" class="form-control" id="customer_name"
                                    value="{{ $sale->customer_name }} ">
                                <div id="customer_name_error"></div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <div class="card">

                                        <!-- /.card-header -->
                                        <div class="card-body">
                                            <div class="row d-flex align-items-center">
                                                <div class="col-lg-6">
                                                    <h4>Itens da Venda</h3>
                                                </div>
                                                <div class="col-lg-6">
                                                    <button {{ $readonly }}
                                                        class="btn btn-success rounded-circle float-right text-center"
                                                        style="width: 35px;height: 35px;" type="button"
                                                        title="Incluir item" onclick="saleProduct('')">
                                                        <i class="fas fa-plus" style="margin-left: -2px"></i>
                                                    </button>
                                                </div>

                                            </div>
                                            <table id="list" class="table table-bordered table-hover">
                                                <thead class="bg-secondary">
                                                    <tr>
                                                        <th style="width:10%">Código</th>
                                                        <th style="width:50%">Descrição</th>
                                                        <th style="width:5%">Unidade</th>
                                                        <th style="width:15%" colspan="2">Quantidade</th>
                                                        <th style="width:5%">Valor</th>
                                                        <th style="width:5%">Total</th>
                                                        <th style="width:10%">IPI</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="sale_list">

                                                </tbody>
                                                <tfoot class="bg-light">
                                                    <tr id="total_ipi_footer">
                                                        <th class="text-right" colspan="6">Total dos Produtos</th>
                                                        <th class="text-left" colspan="2" id="total_products">R$ 0,00
                                                        </th>
                                                    </tr>

                                                    <tr id="total_products_footer">
                                                        <th class="text-right" colspan="6">Valor IPI</th>
                                                        <th class="text-left" colspan="2" id="total_ipi">R$ 0,00</th>
                                                    </tr>

                                                    <tr>
                                                        <th class="text-right" colspan="6">Valor Total</th>
                                                        <th class="text-left" colspan="2" id="total_list">R$ 0,00</th>
                                                    </tr>

                                                </tfoot>
                                            </table>
                                        </div>
                                        <!-- /.card-body -->

                                    </div>
                                    <!-- /.card -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.card-body -->
                    <div class="card-footer">

                        <a href="#" onclick="javascript: history.go(-1)" class="btn btn-lg btn-default"> <i
                                class="fas fa-arrow-left"></i> Voltar</a>

                        @if ($sale->status == 1)
                            @if (auth()->user()->type == 'A' || auth()->user()->type == 'M')
                                <button type="button" class="btn btn-lg btn-warning float-right  mx-2" id="undo_sale">
                                    <i class="fas fa-undo"></i> Estornar Pedido
                                </button>
                                <button type="button" class="btn btn-lg btn-secondary float-right  mx-2"
                                    id="sale_exportFile">
                                    <i class="fas fa-download"></i> Download
                                </button>
                            @endif
                            <button type="button" class="btn btn-lg btn-primary float-right mx-2" id="sale_export">
                                <i class="fas fa-file-export"></i> Exportar Venda
                            </button>
                        @endif
                        @if ($readonly == '')
                            <button type="button" class="btn btn-lg btn-success float-right" id="finish_sale">Concluir
                                Pedido</button>
                            <button type="button" class="btn btn-lg btn-primary float-right mx-2"
                                id="save_sale">Salvar</button>
                            <button type="button" class="btn btn-lg btn-danger float-right "
                                id="sale_delete">Cencelar</button>
                        @endif



                    </div>
                </div>
            </div>
            <!-- /.card -->
        </form>
    </div>

    <!-- /.modal -->
    <div class="modal fade" id="delete_sale_modal" style="z-index: 1051; margin-top:10vh;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-danger">
                    <h4 class="modal-title">Cancelar Venda</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                        onclick="$('#delete_sale_modal').modal('hide');">
                        <span aria-hidden="true">&times;</span>
                    </button>

                </div>
                <div class="modal-body">
                    <p>
                        Tem certeza que deseja cancelar a venda? essa operação não poderá ser revertida.
                    </p>
                </div>
                <div class="modal-footer justify-content-between ">
                    <button type="button" class="btn btn-default" onclick="$('#delete_sale_modal').modal('hide');">
                        voltas
                    </button>
                    <button type="button" class="btn btn-danger" id="delete_sale">
                        Cancelar
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- /.modal -->
    <div class="modal fade" id="delete_modal" style="z-index: 1050; margin-top:10vh;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-danger">
                    <h4 class="modal-title">Exclusão de Item</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                        onclick="$('#delete_modal').modal('hide');">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>
                        Tem certeza que deseja excluir o item da venda?
                    </p>
                </div>
                <div class="modal-footer justify-content-between ">
                    <button type="button" class="btn btn-default" onclick="$('#delete_modal').modal('hide');">
                        Cancelar
                    </button>
                    <button type="button" class="btn btn-danger" id="delete">
                        Excluir
                    </button>

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

    <!--modal -->
    <div class="modal fade" id="modal-default" style="z-index: 1049;">
        <div class="modal-dialog">
            <div class="modal-content">


                <div class="modal-header">
                    <h4 class="modal-title">

                    </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                        onclick="$('#modal-default').modal('hide');">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="POST" id="sale-product" action="{{ route('sale.product.save') }}">
                    <div class="modal-body">
                        <div class="row">
                            @csrf
                            <input type="hidden" id="sale_id" name="sale_id" value="{{ $sale->id }}">
                            <input type="hidden" id="sale_product_id" name="sale_product_id" value="">
                            <div class="form-group col-lg-12">
                                <label>Produtos</label>
                                <select {{ $readonly }} class="form-control select2bs4" id="product"
                                    name="product" style="width: 100%;">
                                    <option {{ $readonly }} value="" selected></option>

                                    @foreach ($products as $product)
                                        <option {{ $readonly }} value="{{ $product->id }}">
                                            {{ $product->reference }} - {{ $product->description }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-lg-4">
                                <label for="quantity" id="quantity_label">Quantidade</label>
                                <input {{ $readonly }} type="number" class="form-control" id="quantity"
                                    name="quantity" value="0" min="0" pattern="[0-9]+([,\.][0-9]+)?"
                                    step="any">
                            </div>

                            <div class="form-group col-lg-4">
                                <label for="price">Valor Unit.</label>
                                <label class="form-control" id="price">
                                    R$ 0,00
                                </label>
                            </div>

                            <div class="form-group col-lg-4">
                                <label for="total">Valor Total</label>
                                <label class="form-control" id="total">
                                    R$ 0,00
                                </label>
                            </div>


                            <div class="form-group col-lg-4" id="kg_sale_details" style="display:none;">
                                <label for="kg_quantity">KG por Caixa</label>
                                <label class="form-control" id="kg_quantity">
                                    0,00
                                </label>
                            </div>


                            <div class="form-group col-lg-4" id="box_sale_details" style="display:none;">
                                <label for="kg_price">Valor Unit. KG</label>
                                <label class="form-control" id="kg_price">
                                    0,00
                                </label>
                            </div>

                            <div class="form-group col-lg-4" id="total_kg_details" style="display:none;">
                                <label for="total_kg">Quant. Total (KG)</label>
                                <label class="form-control" id="total_kg">
                                    0,00
                                </label>
                            </div>

                        </div>
                        <div class="modal-footer justify-content-center">
                            <div class="w-100 p-2">
                                <button type="button" class="btn btn-default float-left" data-dismiss="modal"
                                    onclick="$('#modal-default').modal('hide');">Cancelar</button>

                                <button type="submit" {{ $readonly }}
                                    class="btn btn-primary float-right ml-2">Salvar</button>
                                <button type="button" {{ $readonly }} id="button_sale_product_delete"
                                    class="btn btn-danger float-right mr-2">Excluir</button>
                            </div>
                        </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    </div>
@endsection

@section('scripts')
    <!-- InputMask -->
    <script src="{{ asset('plugins/moment/moment.min.js') }}"></script>
    <script src="{{ asset('plugins/inputmask/jquery.inputmask.min.js') }}"></script>
    <!-- Bootstrap Switch -->
    <script src="{{ asset('plugins/bootstrap-switch/js/bootstrap-switch.min.js') }}"></script>
    <!-- Select2 -->
    <script src="{{ asset('plugins/select2/js/select2.full.js') }}"></script>
    <script src="{{ asset('plugins/bootstrap4-duallistbox/jquery.bootstrap-duallistbox.min.js') }}"></script>
    <!-- Datatable -->
    <script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-buttons/js/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/jszip/jszip.min.js') }}"></script>
    <script src="{{ asset('plugins/pdfmake/pdfmake.min.js') }}"></script>
    <script src="{{ asset('plugins/pdfmake/vfs_fonts.js') }}"></script>
    <script src="{{ asset('plugins/datatables-buttons/js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-buttons/js/buttons.print.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-buttons/js/buttons.colVis.min.js') }}"></script>

    <!-- Tempusdominus Bootstrap 4 -->
    <script src="{{ asset('plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js') }}"></script>

    <script>
        let delay = 2000;
        let Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: delay
        });

        $(function() {
            $('.datetime').inputmask({
                alias: "datetime",
                inputFormat: "dd/mm/yyyy HH:MM:ss"
            });

            //Datemask dd/mm/yyyy
            $('.date').inputmask('dd/mm/yyyy', {
                'placeholder': 'dd/mm/yyyy'
            });

            //Initialize Select2 Elements
            $('.select2bs4').select2({
                theme: 'bootstrap4',
                dropdownParent: $('#modal-default'),
                language: {
                    noResults: function() {
                        return "Nenhum resultado encontrado.";
                    }
                },
            });

            //Switch bootstrap
            $("input[data-bootstrap-switch]").each(function() {
                $(this).bootstrapSwitch('state', $(this).prop('checked'));
            });

            //Datatable
            $('#list').DataTable({
                "paging": false,
                "lengthChange": false,
                "searching": false,
                "ordering": false,
                "info": false,
                "autoWidth": false,
                "responsive": true,
                "oLanguage": {
                    "sProcessing": "@lang('datatable.processing')",
                    "sLengthMenu": "@lang('datatable.showRows')",
                    "sZeroRecords": "@lang('datatable.noResults')",
                    "sEmptyTable": "@lang('datatable.noDataAvailable')",
                    "sInfo": "@lang('datatable.showFrom')",
                    "sInfoEmpty": "@lang('datatable.showEmpty')",
                    "sInfoFiltered": "@lang('datatable.filterTotal')",
                    "sInfoPostFix": "",
                    "sSearch": "@lang('datatable.search')",
                    "sUrl": "",
                    "sInfoThousands": "@lang('datatable.thousandsSeparator')",
                    "sLoadingRecords": "@lang('datatable.loading')",
                    "oPaginate": {
                        "sFirst": "@lang('datatable.first')",
                        "sLast": "@lang('datatable.last')",
                        "sNext": "@lang('datatable.next')",
                        "sPrevious": "@lang('datatable.previous')"
                    }
                }
            }).buttons().container().appendTo('#list_wrapper .col-md-6:eq(0)');

            $(document).on('select2:open', () => {
                document.querySelector('.select2-search__field').focus();
            });

            if ($('#detailed').prop('checked')) {
                $("#details").show();
            } else {
                $("#details").hide();
            }

            saleList();
        });

        $('#detailed').on('change.bootstrapSwitch', function(e) {
            if (e.target.checked) {
                $("#details").show();
            } else {
                $("#details").hide();
            }
            saleList();
        });

        $("#product").change(function() {
            let id = $("#product option").filter(":selected").val();

            let detailed = false;
            if ($('#detailed').prop('checked')) {
                detailed = true;
            }
            if (id != "") {
                $.post("{{ route('sale.product.getPrice') }}", {
                    id: id,
                    detailed: detailed,
                    _token: '{{ csrf_token() }}'
                }, function(response) {
                    if (response.erro) {
                        Toast.fire({
                            icon: 'error',
                            text: response.erro
                        });
                        $("#price").html(
                            formatCurrency(0)
                        );
                    } else {

                        if (response.box) {

                            //
                            $("#quantity_label").html('Quantidade Caixas');

                            $("#kg_sale_details").show();
                            $("#box_sale_details").show();
                            $("#total_kg_details").show();

                            $("#kg_quantity").html(formatNumber(response.box_weight));
                            $("#kg_price").html(formatCurrency(response.price));

                            $("#price").html(
                                formatCurrency(response.box_price)
                            );

                        } else {

                            //
                            $("#quantity_label").html('Quantidade');
                            $("#kg_sale_details").hide();
                            $("#box_sale_details").hide();
                            $("#total_kg_details").hide();

                            $("#kg_quantity").html('');
                            $("#box_price").html('');

                            $("#price").html(
                                formatCurrency(response.price)
                            );
                        }
                    }
                    calc();
                });
            } else {
                //
                $("#quantity_label").html('Quantidade');
                $("#kg_sale_details").hide();
                $("#box_sale_details").hide();
                $("#total_kg_details").hide();

                $("#kg_quantity").html('');
                $("#box_price").html('');

                $("#price").html(
                    formatCurrency(0)
                );
            }

        });

        $("#button_sale_product_delete").click(function() {
            $("#delete_modal").modal('show');
        });

        $("#sale_delete").click(function() {
            $("#delete_sale_modal").modal('show');
        });

        $("#delete").click(function() {

            $.post("{{ route('sale.product.delete') }}", {
                id: $('#sale_product_id').val(),
                _token: '{{ csrf_token() }}',
            }, function(response) {
                if (response.erro) {
                    Toast.fire({
                        icon: 'error',
                        text: response.erro
                    });
                } else {
                    Toast.fire({
                        icon: 'success',
                        text: 'Registro excluir com sucesso.'
                    });

                    saleList();
                    $("#modal-default").modal('hide');
                    $("#delete_modal").modal('hide');
                }

            });
        });

        $("#delete_sale").click(function() {
            $("#delete_sale").prop("disabled", true);
            $("#delete_sale").html('<i class="fas fa-circle-notch fa-spin"></i> Cancelando...');

            $.post("{{ route('sale.delete') }}", {
                id: $('#sale_id').val(),
                _token: '{{ csrf_token() }}',
            }, function(response) {
                if (response.erro) {
                    Toast.fire({
                        icon: 'error',
                        text: response.erro
                    });

                } else {

                    Toast.fire({
                        icon: 'success',
                        text: 'Registro cancelado com sucesso.'
                    });
                    saleList();

                    setTimeout(function() {
                        window.location = "/sales";
                    }, delay);

                }

            });
        });

        $("#quantity").change(function() {
            calc();
        });

        $("#save_sale").click(function() {
            let total = formatToNumber($("#total_list").html());

            if (total > 0) {
                let detailed = false;
                if ($('#detailed').prop('checked')) {
                    detailed = true;
                }

                let packed = false;
                if ($('#packed').prop('checked')) {
                    packed = true;
                }

                $.post("{{ route('sale.save') }}", {
                    id: $('#sale_id').val(),
                    _token: '{{ csrf_token() }}',
                    packed: packed,
                    detailed: detailed,
                    customer_name: $('#customer_name').val(),
                    @if (auth()->user()->type == 'A')
                        created_at: $('#created_at_input').val(),
                    @endif
                }, function(response) {
                    if (response.erro) {
                        Toast.fire({
                            icon: 'error',
                            text: response.erro
                        });
                        return;
                    }

                    Toast.fire({
                        icon: 'success',
                        text: 'Registro salvo com sucesso.'
                    });

                    setTimeout(function() {
                        window.location = "/sales";
                    }, delay);
                });
                return true
            }
            Toast.fire({
                icon: 'warning',
                text: 'Não é possivel salvar uma venda sem valor.'
            });

            return false
        });

        $("#finish_sale").click(function() {

            $("#customer_name").removeClass('is-invalid');
            $("#customer_name_error").html(``);

            let total = formatToNumber($("#total_list").html());


            if (total > 0) {
                let detailed = false;
                if ($('#detailed').prop('checked')) {
                    detailed = true;
                }

                let packed = false;
                if ($('#packed').prop('checked')) {
                    packed = true;
                }

                if (detailed == true && $("#customer_name").val().trim() == "") {

                    $("#customer_name").addClass('is-invalid');
                    $("#customer_name_error").html(`<span class="text-danger">
                                            <strong>Campo Obrigatório</strong>
                                        </span>`);
                    return;
                } else {

                    $.post("{{ route('sale.save') }}", {
                        id: $('#sale_id').val(),
                        _token: '{{ csrf_token() }}',
                        packed: packed,
                        detailed: detailed,
                        customer_name: $('#customer_name').val(),
                        @if (auth()->user()->type == 'A')
                            created_at: $('#created_at_input').val(),
                        @endif
                        status: 1
                    }, function(response) {
                        if (response.erro) {
                            Toast.fire({
                                icon: 'error',
                                text: response.erro
                            });
                            return;
                        }
                        Toast.fire({
                            icon: 'success',
                            text: 'Venda finalizada com sucesso.'
                        });
                        setTimeout(function() {
                            window.location.reload();
                        }, delay);
                    });
                    return true
                }

            } else {
                Toast.fire({
                    icon: 'error',
                    text: 'Não é possivel concluir uma venda sem valor.'
                });

                return false
            }
        });

        $("#undo_sale").click(function() {
            $.post("{{ route('sale.undo') }}", {
                id: $('#sale_id').val(),
                _token: '{{ csrf_token() }}'
            }, function(response) {
                if (response.erro) {
                    Toast.fire({
                        icon: 'error',
                        text: response.erro
                    });
                    return;
                }
                Toast.fire({
                    icon: 'success',
                    text: 'Venda Estornada com sucesso.'
                });
                setTimeout(function() {
                    window.location.reload();
                }, delay);
            });
            return true

        });
        $("#sale_export").click(function() {
            $('#sale_export').prop('disabled', true);
            $('#sale_export').html('<i class="fas fa-cog fa-spin"></i> Exportando...');
            $.post("{{ route('sale.export') }}", {
                id: $('#sale_id').val(),
                _token: '{{ csrf_token() }}',
            }, function(response) {
                if (response.erro) {
                    Toast.fire({
                        icon: 'error',
                        text: response.erro
                    });
                    $('#sale_export').prop('disabled', false);
                    $('#sale_export').html('<i class="fas fa-file-export"></i> Exportar Venda');
                    return;
                }
                Toast.fire({
                    icon: 'success',
                    text: 'Venda exportada com sucesso e email enviado!.'
                });
                setTimeout(function() {
                    window.location = "/sales";
                }, delay);
            });
            return true

        });

        $("#sale_exportFile").click(function() {
            $('#sale_exportFile').prop('disabled', true);
            $('#sale_exportFile').html('<i class="fas fa-cog fa-spin"></i> Baixando...');
            $.post("{{ route('sale.exportFile') }}", {
                id: $('#sale_id').val(),
                _token: '{{ csrf_token() }}',
            }, function(response) {
                if (response.erro) {
                    Toast.fire({
                        icon: 'error',
                        text: response.erro
                    });
                    $('#sale_exportFile').prop('disabled', false);
                    $('#sale_exportFile').html('<i class="fas fa-file-export"></i> Download');
                    return;
                }

                var a = document.createElement("a");
                a.href = response.url;
                a.setAttribute("target", "_blank");
                a.click();

                Toast.fire({
                    icon: 'success',
                    text: 'Download gerado com sucesso.'
                });
                $('#sale_exportFile').prop('disabled', false);
                $('#sale_exportFile').html('<i class="fas fa-download"></i> Download');
                return;

            });
        });

        $("#sale-product").submit(function(e) {
            e.preventDefault();
            let detailed = false;
            if ($('#detailed').prop('checked')) {
                detailed = true;
            }

            let packed = false;
            if ($('#packed').prop('checked')) {
                packed = true;
            }

            $.ajax({
                type: "POST",
                url: "{{ route('sale.product.save') }}",
                data: {
                    _token: '{{ csrf_token() }}',
                    sale_product_id: $('#sale_product_id').val(),
                    sale_id: $('#sale_id').val(),
                    product: $('#product').val(),
                    quantity: $('#quantity').val(),
                    packed: packed,
                    detailed: detailed,
                    customer_name: $('#customer_name').val(),
                },
                success: function(response) {
                    if (response.erro) {
                        Toast.fire({
                            icon: 'error',
                            title: response.erro
                        });
                    } else {
                        Toast.fire({
                            icon: 'success',
                            title: 'Item adicionado com sucesso.'
                        });

                        $("#sale_id").val(response.sale_id);
                        $("#reference_sale").html('Pedido Nº # ' + response.sale.id);
                        let sale_created_at = new Date(response.sale.created_at);

                        $("#created_at_sale").html('Emitido em: ' + formatDate(sale_created_at));
                        saleList();
                        $('#modal-default').modal('hide');
                    }
                }
            });
        });

        function saleProduct(id = "") {

            if (id == "") {
                $("#button_sale_product_delete").hide();
                $("#sale_product_id").val("");
                $("#product").val("").change();
                $("#quantity").val(0);
                $("#price").html(0);
                calc();
                $('#modal-default').modal('show');


            } else {

                $("#button_sale_product_delete").show();
                $.post("{{ route('sale.product.edit') }}", {
                    id: id,
                    _token: '{{ csrf_token() }}'
                }, function(response) {
                    if (response.erro) {
                        Toast.fire({
                            icon: 'error',
                            text: response.erro
                        });
                        return;
                    }

                    $("#sale_product_id").val(response.result.id);
                    $("#product").val('' + response.result.product_id + '').change();
                    $("#quantity").val(response.result.quantity);
                    $("#price").val(response.result.price);
                    calc();
                    $('#modal-default').modal('show');
                });
            }

        }

        function calc() {

            let quantity = formatToNumber($('#quantity').val());
            let price = formatToNumber($("#price").html());



            let kg = formatToNumber($("#kg_quantity").html());

            const total = quantity * price;
            console.log(quantity, price, total);
            const total_kg = quantity * kg;
            const total_box = kg * price;

            $("#total").html(formatCurrency(total));
            $("#box_price").html(formatCurrency(total_box));
            $("#total_kg").html(formatNumber(total_kg));

        }

        function saleList() {

            $.post("{{ route('sale.list') }}", {
                id: $("#sale_id").val(),
                _token: '{{ csrf_token() }}'
            }, function(response) {
                if (response.erro) {
                    Toast.fire({
                        icon: 'error',
                        text: response.erro
                    });
                } else {
                    let detailed = false;

                    if ($('#detailed').prop('checked')) {
                        detailed = true;
                    }

                    let items = response.items;
                    let html = '';
                    let total = 0;
                    let total_ipi = 0;
                    var wclass = "";

                    if (items.length > 0) {
                        $.each(items, function(i, item) {

                            if (item.status == 1) {
                                wclass = "text-success";
                            } else {
                                wclass = "";
                            }
                            if (!detailed) {

                                if (
                                    item.product.reference.substring(0, 3) == "TBC" ||
                                    item.product.reference.substring(0, 3) == "DBC" ||
                                    (
                                        item.product.reference.substring(0, 3) == "BBC" &&
                                        item.product.reference.substring(0, 4) != "BBCB"
                                    )
                                ) {
                                    html = html + `<tr onclick="saleProduct('` + item.id + `')" class="` +
                                        wclass + `">
                                        <td>` +
                                        (item.quantity == 0 ? `<del class="text-danger">` : ``) +
                                        item.product.reference + (item.quantity == 0 ? `</del>` : ``) + `</td>
                                        <td>` + item.description + `</td>
                                        <td>` + item.product.unity + `</td>
                                        <td class="text-center">`;

                                    if (item.old_box_weight > 0) {
                                        html = html + `<del class="text-danger">` + formatNumber(item
                                            .quantity * item.old_box_weight) + ` KG</del><br>`;
                                    }
                                    html = html + `` + formatNumber(item.quantity * item.box_weight) +
                                        ` KG</td><td>` + item.quantity + ` CX</td>`;

                                    html = html + `<td class="text-right">`;
                                    if (item.old_promotional_price > 0) {
                                        html = html + `<del class="text-danger">` + formatCurrency(item
                                            .promotional_price) + `</del><br>`;
                                    }
                                    html = html + `` + formatCurrency(item.promotional_price) + `</td>`;

                                    html = html + `<td class="text-right">`;
                                    if (item.old_total_promotional > 0) {
                                        html = html + `<del class="text-danger">` + formatCurrency(item
                                            .old_total_promotional) + `</del><br>`;
                                    }
                                    html = html + `` + formatCurrency(item.quantity * item
                                        .box_promotional_price) + `</td>`;

                                    html = html + `<td class = "text-center" > ` + item.product.ipi + ` % </td>
                                    </tr>`;



                                    total += (item.quantity * item.box_promotional_price);



                                } else {
                                    html = html + `<tr onclick="saleProduct('` + item.id + `')" class="` +
                                        wclass + `">
                                            <td>` + item.product.reference + `</td>
                                            <td>`;

                                    //check old description
                                    if (item.old_description != "") {
                                        html = html + `<del class="text-danger">` + item.old_description +
                                            `</del><br>`;
                                    }
                                    html = html + `` + item.description + `</td>
                                            <td>` + item.product.unity + `</td>
                                            <td class="text-center" colspan="2">`;

                                    //check old Quantity
                                    if (item.old_quantity > 0) {
                                        html = html + `<del class="text-danger">` +
                                            formatNumber(item.old_quantity, 0) +
                                            `</del><br>`;
                                    }
                                    html = html + `` + formatNumber(item.quantity, 0) + `</td>
                                            <td class="text-center">`;

                                    //check old promotional price
                                    if (item.old_promotional_price > 0) {
                                        html = html + `<del class="text-danger">` +
                                            formatCurrency(item.old_promotional_price) + `</del><br>`;
                                    }
                                    html = html + `` + formatCurrency(item.promotional_price) + `</td>
                                            <td class="text-center">`;

                                    //check old total Promotional price
                                    if (item.old_total_promotional > 0) {
                                        html = html + `<del class="text-danger">` +
                                            formatCurrency(item.old_total_promotional) + `</del><br>`;
                                    }
                                    html = html + `` + formatCurrency(item.quantity * item
                                        .promotional_price) + `</td>
                                            <td class="text-center">` + item.product.ipi + `%</td>
                                        </tr>`;



                                    total += (item.quantity * item.promotional_price);


                                }


                            } else {
                                if (item.product.reference.substring(0, 3) == "TBC" ||
                                    item.product.reference.substring(0, 3) == "DBC" ||
                                    (
                                        item.product.reference.substring(0, 3) == "BBC" &&
                                        item.product.reference.substring(0, 4) != "BBCB"
                                    )
                                ) {
                                    html = html + `<tr onclick="saleProduct('` + item.id + `')" class="` +
                                        wclass + `">
                                            <td>` + item.product.reference + `</td>
                                            <td>` + item.description + `</td>
                                            <td>` + item.product.unity + `</td>
                                            <td class="text-center">`;

                                    if (item.old_box_weight > 0) {
                                        html = html + `<del class="text-danger">` + formatNumber(item
                                            .quantity * item.old_box_weight) + ` KG</del><br>`;
                                    }
                                    html = html + `` + formatNumber(item.quantity * item.box_weight) +
                                        ` KG</td><td>` + item.quantity + ` CX</td>`;

                                    html = html + `<td class="text-center">`;
                                    if (item.old_price > 0) {
                                        html = html + `<del class="text-danger">` + formatCurrency(item
                                            .old_price) + `</del><br>`;
                                    }
                                    html = html + `` + formatCurrency(item.price) + `</td>`;

                                    html = html + `<td class="text-center">`;
                                    if (item.old_total > 0) {
                                        html = html + `<del class="text-danger">` + formatCurrency(item
                                            .old_total) + `</del><br>`;
                                    }
                                    html = html + `` + formatCurrency(item.quantity * item.box_price) +
                                        `</td>`;

                                    html = html + `
                                            <td class="text-center">` + item.product.ipi + `%</td>
                                        </tr>`;
                                    total += (item.quantity * item.box_price);
                                    total_ipi += (((item.quantity * item.box_price) * item.product.ipi) /
                                        100);
                                } else {
                                    html = html + `<tr onclick="saleProduct('` + item.id + `')" class="` +
                                        wclass + `">
                                        <td>` + item.product.reference + `</td>
                                        <td>` + item.description + `</td>
                                        <td>` + item.product.unity + `</td>
                                        <td class="text-center" colspan="2">` + item.quantity + `</td>
                                        <td class="text-center">` + formatCurrency(item.price) + `</td>
                                        <td class="text-center">` + formatCurrency(item.quantity * item.price) + `</td>
                                        <td class="text-center">` + item.product.ipi + `%</td>
                                    </tr>`;
                                    total += (item.quantity * item.price);
                                    total_ipi += (((item.quantity * item.price) * item.product.ipi) / 100);
                                }

                            }
                        });
                        if (detailed) {
                            $("#total_products").html(formatCurrency(total));
                            $("#total_ipi").html(formatCurrency(total_ipi));

                            $("#total_products_footer").show();
                            $("#total_ipi_footer").show();

                            total = (total + total_ipi);
                        } else {

                            $("#total_products_footer").hide();
                            $("#total_ipi_footer").hide();
                        }

                        $("#sale_list").html(html);
                        $("#total_list").html(formatCurrency(total));
                    }
                }

            });
        }
    </script>
@endsection