@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('saleEntry.save') }}">
            @csrf
            <div class="card">
                <div class="card-header bg-primary">
                    <h3 class="card-title" id="reference_sale">Entrada Nº # {{ $saleEntry->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($saleEntry->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($saleEntry->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="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">
                                                    <h3>Referência: <span
                                                            class="text-primary">{{ $saleEntry->sale_id }}</span></h3>
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="row d-flex align-items-center">
                                                <div class="col-lg-6">
                                                    <h4>Itens da Venda</h4>
                                                </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:40%">Descrição</th>
                                                        <th style="width:10%">Unidade</th>
                                                        <th style="width:10%">Quantidade</th>
                                                        <th style="width:10%">Valor</th>
                                                        <th style="width:10%">Total</th>
                                                        <th style="width:10%">IPI</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="sale_list">

                                                </tbody>
                                                <tfoot class="bg-light">


                                                    <tr>
                                                        <th class="text-right" colspan="5">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 ($readonly == '')
                            <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">Excluir</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">Exclusão da 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 excluir 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');">
                        Cancelar
                    </button>
                    <button type="button" class="btn btn-danger" id="delete_sale">
                        Excluir
                    </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('saleEntry.product.save') }}">
                    <div class="modal-body">
                        <div class="row">
                            @csrf
                            <input type="hidden" id="sale_entry_id" name="sale_entry_id" value="{{ $saleEntry->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();
            });

            saleList();
        });

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

            let detailed = false;
            if ($('#detailed').prop('checked')) {
                detailed = true;
            }
            if (id != "") {
                $.post("{{ route('saleEntry.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 {


                        //
                        $("#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('saleEntry.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> Excluindo...');

            $.post("{{ route('saleEntry.delete') }}", {
                id: $('#sale_entry_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();

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

                }

            });
        });

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

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

            if (total > 0) {

                $.post("{{ route('saleEntry.save') }}", {
                    id: $('#sale_entry_id').val(),
                    _token: '{{ csrf_token() }}',
                    customer_name: $('#customer_name').val(),

                }, 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 = "/salesEntry";
                    }, delay);
                });
                return true
            }
            Toast.fire({
                icon: 'warning',
                text: 'Não é possivel salvar uma venda sem valor.'
            });

            return false
        });

        $("#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('saleEntry.product.save') }}",
                data: {
                    _token: '{{ csrf_token() }}',
                    sale_product_id: $('#sale_product_id').val(),
                    sale_entry_id: $('#sale_entry_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_entry_id").val(response.sale_entry_id);
                        $("#reference_sale").html('Pedido Nº # ' + response.saleEntry.id);
                        let sale_created_at = new Date(response.saleEntry.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('saleEntry.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('saleEntry.list') }}", {
                id: $("#sale_entry_id").val(),
                _token: '{{ csrf_token() }}'
            }, function(response) {
                if (response.erro) {
                    Toast.fire({
                        icon: 'error',
                        text: response.erro
                    });
                } else {
                    let detailed = false;

                    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 = "";
                            }


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

                            //check old description

                            html = html + `` + item.description + `</td>
                                            <td>` + item.product.unity + `</td>
                                            <td class="text-right">`;

                            //check old Quantity

                            html = html + `` + item.quantity + `</td>
                                            <td class="text-right">`;

                            //check old promotional price

                            html = html + `` + formatCurrency(item.price) + `</td>
                                            <td class="text-right">`;

                            //check old total Promotional price

                            html = html + `` + formatCurrency(item.quantity * item.price) + `</td>
                                            <td class="text-right">` + item.product.ipi + `%</td>
                                        </tr>`;



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



                        });

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

            });
        }
    </script>
@endsection