@extends('layouts.app', ['title' => __('User Profile')])
@section('title', 'Iniciar Venda')
@section('content')
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="{{ asset('argon/vendor/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('argon/vendor/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('argon/vendor/datatables.net-select-bs4/css/select.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('argon') }}/vendor/animate.css/animate.min.css">

<style type="text/css">
    .select2-container .select2-selection--single {
        height: unset !important;
    }
</style>
<div class="header bg-gradient-primary pb-5 pt-5 pt-md-5">
    <div class="container-fluid">
        <div class="header-body">
        </div>
    </div>
</div>
@can('visualizar-clientes')
<div class="container-fluid mt--7">
    <div class="row">
        <div class="col-xl-4 order-xl-2 order-sm-2">
            <!-- Progress track -->
            <div class="card bg-default">
                <div class="card-header">
                    <h5 class="h3 title">
                        <span class="d-block  mb-1">Informações Financeiras</span>
                    </h5>
                </div>
                <!-- Card body -->
                <div class="card-body">
                    <div class="row mb-4">
                        <div class="justify-content-center align-self-center col-auto">
                            <div>
                                <img src="http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat/128/money-icon.png" class="rounded-circle avatar avatar-lg border border-white">
                            </div>
                        </div>
                        <div class="justify-content-center align-self-center col-auto text-white font-weight-bold">
                            <div>
                                <span class="description my-auto">Saldo:</span>
                            </div>
                        </div>
                        <div class="justify-content-center align-self-center col-auto font-weight-bold">
                            <div>
                                <span id="saldo_text" class="description"></span>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-4">
                        <div class="justify-content-center align-self-center col-auto">
                            <div>
                                <img src="http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat/128/creditcard-icon.png" class="rounded-circle avatar avatar-lg border border-white">
                            </div>
                        </div>
                        <div class="justify-content-center align-self-center col-auto text-white font-weight-bold">
                            <div>
                                <span class="description my-auto">Limite:</span>
                            </div>
                        </div>
                        <div class="justify-content-center align-self-center col-auto font-weight-bold">
                            <div>
                                <span id="limite_text" class="description"></span>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-4">
                        <div class="justify-content-center align-self-center col-auto">
                            <div>
                                <img src="http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat/128/trophy-icon.png" class="rounded-circle avatar avatar-lg border border-white">
                            </div>
                        </div>
                        <div class="justify-content-center align-self-center col-auto text-white font-weight-bold">
                            <div>
                                <span class="description my-auto">Meta:</span>
                            </div>
                        </div>
                        <div class="justify-content-center align-self-center col-auto font-weight-bold">
                            <div>
                                <span id="meta_text" class="description">-</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer bg-default">
                    <div class="row">
                        <div class="col-6">
                            <div class=" text-center">
                                <h5 class="h4 title">
                                    <span class="d-block text-white mb-1">Benefícios</span>
                                </h5>
                                <div>
                                    <a href="#" class="btn btn-success btn-icon-only rounded-circle">
                                        <!-- <i class="fab fa-twitter"></i> --> -
                                    </a>
                                    <a href="#" class="btn btn-info btn-icon-only rounded-circle">
                                        <!-- <i class="fab fa-facebook"></i> --> -
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class=" text-center">
                                <h5 class="h4 title">
                                    <span class="d-block text-white mb-1">Restrições</span>
                                </h5>
                                <div>
                                    <a href="#" class="btn btn-danger btn-icon-only rounded-circle">
                                        <!-- <i class="fab fa-twitter"></i> --> -
                                    </a>
                                    <a href="#" class="btn btn-warning btn-icon-only rounded-circle">
                                        <!-- <i class="fab fa-facebook"></i> --> -
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-8 order-xl-1 order-sm-1">
            <div class="row">
            </div>
            <div class="card">
                <div class="card-header">
                    <div class="row align-items-center">
                        <div class="col-md-7">
                            <h3 class="mb-0">
                                <span style="vertical-align: inherit;">
                                    <span style="vertical-align: inherit;">Selecionar o Cliente</span>
                                </span>
                            </h3>
                        </div>
                        @can('adicionar-clientes')
                        <div class="col-md-5 text-right">
                            <a href="{{route('produtos')}}" target="_blank" class="btn btn-success btn-sm">Produtos</a>
                            <a href="{{route('clientes_reman.adicionar')}}" target="_blank" class="btn btn-success btn-sm">Cadastrar</a>

                            <!-- <a href="{{route('clientes_reman.adicionar')}}" target="_blank" class="btn btn-success btn-sm">Cadastrar</a> -->
                        </div>
                        @endcan
                    </div>
                </div>
                <div class="card-body">
                    <div class="pl-lg-4">
                        <div class="form-group mb-0">
                            <form method="post" action="" id="form_nome_cliente">
                                <!-- Passando o Token -->
                                {{csrf_field()}}

                                <select class="select_clientes" name="select_clientes" id='select_clientes' required="on">
                                    <option disabled="on" selected="on">Pesquise o nome de um cliente</option>
                                </select>
                                <div class="row">
                                    <small class="text-danger font-weight-bold p-3" id="restricao">
                                        * Preenchimento obrigatório
                                    </small>
                                </div>
                                <input type="hidden" name="consumidor_cliente" id="consumidor_cliente" value="">
                                <input type="hidden" name="razao_cliente" id="razao_cliente" value="">
                                <div class="form-group row mt-4 d-none ">
                                    <div class="col-md-3 mb-2 col-sm-6">
                                        <input type="text" name="pessoa" id="pessoa" class="form-control" value="" required="" placeholder="Pessoa" disabled>
                                    </div>
                                    <div class="col-md-3 mb-2 col-sm-6">
                                        <input type="text" name="loja" id="loja" class="form-control" value="" required="" placeholder="Loja" disabled>
                                    </div>
                                    <div class="col-md-3 mb-2 col-sm-6">
                                        <input type="text" name="responsavel" id="responsavel" class="form-control" value="" required="" placeholder="Responsável" disabled>
                                    </div>
                                    <div class="col-md-3 col-sm-6">
                                        <input type="text" name="tabela" id="tabela" class="form-control" value="" required="" placeholder="Tabela" disabled>
                                    </div>
                                </div>
                                <div class="form-group row mt-3 mb-0">
                                    <div class="col-md-12 col-sm-12 text-center ">
                                        <input type="hidden" name="loja_selecionada" value="par">
                                        <!-- <input type="button" name="submit" id="submit" class="btn btn-info d-block text-white mt-3 mx-auto px-5" value="Avançar"> -->
                                        <a href="{{route('produtos.card')}}" id="btn-venda" class="btn btn-success text-white mt-3 mx-auto px-5">Venda</a>
                                        <a href="{{route('orcamento.produtos')}}" id="btn-orcamento" class="btn btn-info text-white mt-3 mx-auto px-5">Orçamento</a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="card bg-default">
                        <!-- Card body -->
                        <div class="card-body">
                            <a href="#!">
                                <img src="http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat/128/clipboard-icon.png" class="rounded-circle img-center img-fluid shadow shadow-lg--hover avatar avatar-xl">
                            </a>
                            <div class="pt-4 text-center">
                                <h5 class="h3 title">
                                    <span class="d-block text-white mb-1">LOJA</span>
                                    <small id="loja_text" class="h4 font-weight-light text-muted"></small>
                                </h5>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card bg-default">
                        <!-- Card body -->
                        <div class="card-body">
                            <a href="#!">
                                <img src="http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat/128/eye-icon.png" class="rounded-circle img-center img-fluid shadow shadow-lg--hover avatar avatar-xl">
                            </a>
                            <div class="pt-4 text-center">
                                <h5 class="h3 title">
                                    <span class="d-block text-white mb-1">RESPONSAVEL</span>
                                    <small id="responsavel_text" class="h4 font-weight-light text-muted"></small>
                                </h5>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card bg-default">
                        <!-- Card body -->
                        <div class="card-body">
                            <a href="#!">
                                <img src="http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat/128/crossroads-icon.png" class="rounded-circle img-center img-fluid shadow shadow-lg--hover avatar avatar-xl">
                            </a>
                            <div class="pt-4 text-center">
                                <h5 class="h3 title">
                                    <span class="d-block text-white mb-1">TABELA</span>
                                    <small id="tabela_text" class="h4 font-weight-light text-muted"></small>
                                </h5>

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

</div>
@else
<p class="text-center display-3 mt-3">- <u>Atenção, você não tem acesso a esse conteúdo</u> -</p><br>
@endcan
@endsection
@push('js')
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script src="{{ asset('argon/vendor/datatables.net/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.flash.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.print.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-select-bs4/js/dataTables.select.min.js') }}"></script>
<script type="text/javascript" src="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.3/js/dataTables.responsive.min.js"></script>
<script src="{{ asset('argon') }}/vendor/bootstrap-notify/bootstrap-notify.min.js"></script>


<script>
    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
    $(document).ready(function() {
        $('#select_clientes').select2({
            placeholder: 'Selecione um cliente',
            ajax: {
                url: "{{ route('produtos.select2_cliente') }}",
                type: "get",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        _token: CSRF_TOKEN,
                        search: params.term // search term
                    };
                },
                processResults: function(data) {
                    // console.log(response);
                    return {
                        results: data
                    };
                },
                cache: true
            }
        }).on('select2:select', function(e) {
            var data = e.params.data;
            $(this).children('[value="' + data['id'] + '"]').attr({
                'pessoa': data["pessoa"],
                'fantasia': data["fantasia"],
                'name': data["name"],
                'consumidor': data["consumidor"],
                'consumidor': data["consumidor"],
                'credito': data["credito"],
                'limite': data["limite"],
                'selected': 'selected', // fixed value
            });
            document.getElementById('pessoa').setAttribute("value", data["pessoa"]);
            document.getElementById('loja').setAttribute("value", data["fantasia"]);
            document.getElementById('loja_text').innerHTML = data["fantasia"];
            document.getElementById('responsavel').setAttribute("value", data["name"]);
            document.getElementById('responsavel_text').innerHTML = data["name"];
            document.getElementById('consumidor_cliente').setAttribute("value", data["consumidor"]);
            document.getElementById('tabela').setAttribute("value", data["consumidor"]);
            document.getElementById('razao_cliente').setAttribute("value", data["text"]);
            document.getElementById('saldo_text').innerHTML = data["credito"];
            document.getElementById('limite_text').innerHTML = data["limite"];

            if (data["credito"] <= 0.00) {
                $('#saldo_text').removeClass('text-success')
                $('#saldo_text').addClass('text-danger')
            } else {
                $('#saldo_text').removeClass('text-danger')
                $('#saldo_text').addClass('text-success')
            }

            if (data["limite"] <= 0.00) {
                $('#limite_text').removeClass('text-success')
                $('#limite_text').addClass('text-danger')
            } else {
                $('#limite_text').removeClass('text-danger')
                $('#limite_text').addClass('text-success')
            }

            if (data["consumidor"] == 2) {
                document.getElementById('tabela').value = "ATACADO";
                document.getElementById('tabela_text').innerHTML = "ATACADO";
            }
            if (data["consumidor"] == 1) {
                document.getElementById('tabela').value = "VAREJO";
                document.getElementById('tabela_text').innerHTML = "VAREJO";
            }
        }).val(0).trigger('change');

    });
</script>

<script>
    $(document).ready(function() {
        $('#select2-select_clientes-container').val('');
        var table = $('.table').DataTable({
            "language": {
                "info": "Mostrando de _START_ até _END_ de _TOTAL_ registos",
                "search": "Procurar:",
                "paginate": {
                    "first": "Primeiro",
                    "previous": "<",
                    "next": ">",
                    "last": "Último"
                }
            },
            dom: 'Bfrtip',
            buttons: [{
                extend: 'pdfHtml5',
                className: 'btn bg-danger text-white rounded',
                exportOptions: {
                    columns: [0, 2, 3, 4, 5]
                }
            }],
            stateSave: true,
            lengthMenu: [
                [5, 10, 20, -1],
                [5, 10, 20, 'Todos'],
            ],

        });
    });
</script>

<script type="text/javascript" src="{{asset('js/verificar_avancar.js')}}"></script>

<script>
    $(document).on('change', '#select_clientes', function() {
        // $(this).prop('disabled', true);
        if ($("#select_clientes").val() != null) {
            $("#btn-venda").prop('disabled', false);
            $("#btn-orcamento").prop('disabled', false);

            setTimeout(function() {
                $.ajax({
                    data: $('#form_nome_cliente').serialize(),
                    url: "{{route('produtos.verificar_loja',1)}}",
                    method: "POST",
                    dataType: 'json',
                    success: function(data) {
                        // alert(JSON.stringify(data));
                        $.notify({
                            icon: 'fas fa-plus-circle fa-2x',
                            title: 'Cliente Selecionado',
                            message: data.nome_cliente_escolhido,
                        }, {
                            element: 'body',
                            type: 'success',
                            z_index: 1080,
                            delay: 1000,
                            timer: 1000,
                            animate: {
                                enter: 'animated fadeInDown',
                                exit: 'animated fadeOutUp'
                            },
                            template: '<div data-notify="container" class="alert alert-dismissible alert-{0} alert-notify" role="alert">' +
                                '<div class="alert-text"</div> ' +
                                '<span class="alert-title" data-notify="title">{1}</span> ' +
                                '<span class="h3 font-weight-bold" data-notify="message">{2}</span>' +
                                '</div>' +
                                '<button type="button" class="close" data-notify="dismiss" aria-label="Close"><span aria-hidden="true">&times;</span></button>' +
                                '</div>'
                        });
                    },
                    error: function(data) {
                        alert(JSON.stringify(data));

                    }
                });
            }, 500);
        } else {
            $("#btn-venda").prop('disabled', true);
            $("#btn-orcamento").prop('disabled', true);
        }
    });
</script>
@endpush