@extends('layouts.simple.master')

@section('title', 'Form Validation')

@section('css')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/animate.css') }}">
@endsection

@section('main_content')
<div class="container-fluid">
    <div class="page-title">
        <div class="row">
            <div class="col-sm-6">
                <h3>Cadastrar Produtos</h3>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href=""> <svg class="stroke-icon">
                                <use href="{{ asset('assets/svg/icon-sprite.svg#stroke-home') }}"></use>
                            </svg></a></li>
                    <li class="breadcrumb-item">Cadastrar</li>
                    <li class="breadcrumb-item active">Produtos</li>
                </ol>
            </div>
        </div>
    </div>
</div><!-- Container-fluid starts-->
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h5>Dados Básicos</h5>
                </div>
                <div class="card-body">
                    <form class="theme-form needs-validation" novalidate="" id="formProdutos" name="formProdutos" method="post" action="{{ route('produtos.create-produtos') }}" enctype="multipart/form-data">
                        @csrf
                        <div class="row g-3">
                            <div class="col-md-4 mb-3">
                                <label class="col-form-label pt-0" for="nome">Nome*</label>
                                <input class="form-control" id="nome" name="nome" required="" type="text" oninput="handleInput(event)">
                            </div>
                            <div class="col-md-1 mb-3">
                                <label class="col-form-label pt-0" for="codigo_sku">Codigo(SKU)*</label>
                                <input class="form-control" id="codigo_sku" name="codigo_sku" type="text" required="">
                            </div>
                            <div class="col-md-1 mb-3">
                                <label class="col-form-label pt-0" for="id_unidade">Unidade*</label>
                                <select class="form-select" id="id_unidade" name="id_unidade" required="">
                                    <option value=""></option>
                                    @foreach($tiposMedida as $medida)
                                    <option value="{{ $medida->id }}">{{ $medida->sigla }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-1 mb-3">
                                <label class="col-form-label pt-0" for="preco">Preço</label>
                                <input class="form-control mascaraMoeda" id="preco" name="preco" type="text">
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="col-form-label pt-0" for="id_tipo_produto">Tipo Produto*</label>
                                <select class="form-select" id="id_tipo_produto" name="id_tipo_produto" required="">
                                    <option value=""></option>
                                    @foreach($tiposProduto as $tprod)
                                    <option value="{{ $tprod->id }}">{{ $tprod->descricao }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-2 mb-3">
                                <label class="col-form-label pt-0" for="id_tipo_item">Tipo Item*</label>
                                <select class="form-select" id="id_tipo_item" name="id_tipo_item" required="">
                                    <option value=""></option>
                                    @foreach($tipoItem as $tipoItens)
                                    <option value="{{ $tipoItens->id }}">{{ $tipoItens->descricao }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="col-form-label pt-0" for="imagem">Imagem do Produto</label>
                                <input class="form-control" id="imagem" name="imagem" type="file" accept=".png, .jpg, .jpeg">
                            </div>
                        </div>

                        <div class="row g-3">
                            <h5>Estoque</h5><span><a href="#"></a></span>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="volumes">Volumes</label>
                                <input class="form-control mascaraNumerica" id="volumes" name="volumes" type="text" value="" placeholder="0,000" data-bs-original-title="" title="">
                            </div>
                            <div class="col-md-2 mb-3">
                                <label class="form-label" for="peso_bruto">Peso Bruto</label>
                                <div class="input-group">
                                    <span class="input-group-text" id="inputGroupPrepend">Kg</span>
                                    <input class="form-control mascaraNumerica" id="peso_bruto" name="peso_bruto" type="text" aria-describedby="inputGroupPrepend" placeholder="0,000" data-bs-original-title="" title="">
                                </div>
                            </div>
                            <div class="col-md-2 mb-3">
                                <label class="form-label" for="peso_liquido">Peso Líquido</label>
                                <div class="input-group">
                                    <span class="input-group-text" id="inputGroupPrepend">Kg</span>
                                    <input class="form-control mascaraNumerica" id="peso_liquido" name="peso_liquido" type="text" aria-describedby="inputGroupPrepend" placeholder="0,000" data-bs-original-title="" title="">
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="estoque_minimo">Estoque Mínimo</label>
                                <input class="form-control mascaraNumerica" id="estoque_minimo" name="estoque_minimo" type="text" value="" placeholder="0,000" data-bs-original-title="" title="">
                            </div>
                        </div>
                        <div class="row g-3 mb-3">
                            <h5>Custos Variáveis</h5><span><a href="#"></a></span>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="txtCustoVariaveis">Custos variáveis</label>
                                <input class="form-control mascaraNumerica" id="custo_variavel" name="custo_variavel" type="text" value="" placeholder="0,00" data-bs-original-title="" title="">
                            </div>

                        </div>

                        <div class="row g-3 mb-3">
                            <h5>Tributação</h5><span><a href="#"></a></span>
                        </div>
                        <div class="row g-3 ">
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="ncm">NCM</label>
                                <input class="form-control" id="ncm" name="ncm" type="text" placeholder="Digite o código NCM" data-bs-original-title="" title="">
                                <ul id="autocomplete-list" class="list-group" style="position: absolute; z-index: 1000; display: none;"></ul>
                            </div>

                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="cest">CEST</label>
                                <input class="form-control" id="cest" name="cest" type="text" value="" placeholder="0,00" data-bs-original-title="" title="">
                            </div>

                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="id_origem_tributo">Origem</label>
                                <select class="form-select" id="id_origem_tributo" name="id_origem_tributo">
                                    @foreach($origemTributo as $origemTributos)
                                    <option value="{{ $origemTributos->id }}">{{ $origemTributos->descricao }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row g-3 mb-3">
                            <h5 class="">Mais Informações <i class="fa fa-angle-down mx-1" id="toggle-icon" style="cursor: pointer;"></i></h5>
                        </div>
                        <div class="row g-3" id="mais-informacao" style="display: none;">
                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="ean">EAN</label>
                                <input class="form-control" id="ean" name="ean" type="text" value="" data-bs-original-title="" title="">
                            </div>

                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="id_und_medida_tributo">Unidade de Medida Tributada</label>
                                <select class="form-select" id="id_und_medida_tributo" name="id_und_medida_tributo">
                                    <option value=""></option>
                                    @foreach($tiposMedida as $medida)
                                    <option value="{{ $medida->id }}">{{ $medida->sigla }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="especifico_tributo">Específico</label>
                                <select class="form-select" id="especifico_tributo" name="especifico_tributo">
                                    <option value="N">NORMAL</option>
                                    <option value="C">COMBUSTÍVEL</option>
                                </select>
                            </div>
                            <div class="col-md-4 mb-3" id="campofator" style="display:none;">
                                <!--itens do combo cbUnidadeTributada-->
                                <label class="form-label" for="fator_tributo">Fator</label>
                                <input class="form-control" id="fator_tributo" name="fator_tributo" type="text" value="" data-bs-original-title="" title="">
                            </div>
                            <div class="col-md-4 mb-3" id="campoEspecifico" style="display:none;">
                                <!--itens do combo cbEspecifico-->
                                <label class="form-label" for="cod_anp">Código ANP</label>
                                <input class="form-control" id="cod_anp" name="cod_anp" type="text" value="" data-bs-original-title="" title="">
                            </div>
                            <div class="col-md-4 mb-3" id="campoEspecifico2" style="display:none;">
                                <!--itens do combo cbEspecifico-->
                                <label class="form-label" for="descricao_anp">Descrição ANP</label>
                                <input class="form-control" id="descricao_anp" name="descricao_anp" type="text" value="" data-bs-original-title="" title="" oninput="handleInput(event)">
                            </div>
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="obs_anp">Informações Complementares <i class="fa fa-info-circle mx-1" data-bs-toggle="tooltip" data-bs-placement="top" title="{{$maisInformacao}}"></i></label>
                                <textarea class="form-control" id="obs_anp" name="obs_anp" oninput="handleInput(event)"></textarea>
                            </div>
                        </div>

                        <div class="row g-3 mb-3">
                            <h5 class="">ICMS ST Retido <i class="fa fa-angle-down mx-1" id="toggle-icon2" style="cursor: pointer;"></i></h5>
                        </div>
                        <div class="row g-3 " id="mais-informacao2" style="display: none;">
                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="base_calculo_retido">Base de Cálculo</label>
                                <input class="form-control mascaraMoeda" id="base_calculo_retido" name="base_calculo_retido" type="text" value="" data-bs-original-title="" title="">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="valor_tributo_retido">Valor do Tributo</label>
                                <input class="form-control mascaraMoeda" id="valor_tributo_retido" name="valor_tributo_retido" type="text" value="" data-bs-original-title="" title="">
                            </div>
                        </div>

                        <div class="row g-3 mb-3">
                            <h5 class="">ICMS Monofásico Retido <i class="fa fa-angle-down mx-1" id="toggle-icon3" style="cursor: pointer;"></i></h5>
                        </div>
                        <div class="row g-3 " id="mais-informacao3" style="display: none;">
                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="base_calc_monofasico">Base de Cálculo</label>
                                <input class="form-control mascaraMoeda" id="base_calc_monofasico" name="base_calc_monofasico" type="text" value="" data-bs-original-title="" title="">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="alicota_ad">Alíquota ad rem</label>
                                <input class="form-control" id="alicota_ad" name="alicota_ad" type="text" value="" data-bs-original-title="" title="">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="valor_ad">Valor do Tributo</label>
                                <input class="form-control mascaraMoeda" id="valor_ad" name="valor_ad" type="text" value="" data-bs-original-title="" title="">
                            </div>

                        </div>
                        <div class="col-md-4 mb-3">
                            <h6 class="">Registro arquivado</h6>
                            <label class="switch">
                                <input type="checkbox" data-bs-original-title="" title="" id="arquivado">
                                <span class="switch-state"></span>
                            </label>
                        </div>
                        <div class="card-footer text-end">
                            <button class="btn btn-success" type="submit">Salvar</button>
                            <a href="{{ route('produtos') }}" class="btn btn-secondary">Voltar</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
</div><!-- Container-fluid Ends-->
@endsection

@section('scripts')
<script>
    //campofator
    document.addEventListener('DOMContentLoaded', function() {
        const campoFator = document.getElementById('campofator');
        const selectUnidadeTributada = document.getElementById('id_und_medida_tributo');

        selectUnidadeTributada.addEventListener('change', function() {

            if (selectUnidadeTributada.value !== "") {
                // Mostra o campo se um valor for selecionado
                campoFator.style.display = '';
            } else {
                // Oculta o campo se nenhum valor for selecionado
                campoFator.style.display = 'none';
            }
        });
    });

    //campoEspecifico
    document.addEventListener('DOMContentLoaded', function() {
        const campoEspecifico = document.getElementById('campoEspecifico');
        const campoEspecifico2 = document.getElementById('campoEspecifico2');
        const selectEspecifico = document.getElementById('especifico_tributo');

        selectEspecifico.addEventListener('change', function() {

            if (selectEspecifico.value == "N") {
                // Mostra o campo se um valor for selecionado
                campoEspecifico.style.display = 'none';
                campoEspecifico2.style.display = 'none';
            } else {
                // Oculta o campo se nenhum valor for selecionado
                campoEspecifico.style.display = '';
                campoEspecifico2.style.display = '';
            }
        });
    });

    //mais informações
    document.addEventListener('DOMContentLoaded', function() {
        const toggleIcon = document.getElementById('toggle-icon');
        const maisInformacao = document.getElementById('mais-informacao');

        toggleIcon.addEventListener('click', function() {
            if (maisInformacao.style.display === 'none') {
                // Mostrar a div e trocar o ícone para "fa-angle-up"
                maisInformacao.style.display = 'block';
                toggleIcon.classList.remove('fa-angle-down');
                toggleIcon.classList.add('fa-angle-up');
            } else {
                // Ocultar a div e trocar o ícone para "fa-angle-down"
                maisInformacao.style.display = 'none';
                toggleIcon.classList.remove('fa-angle-up');
                toggleIcon.classList.add('fa-angle-down');
            }
        });
    });

    //ICMS ST Retido
    document.addEventListener('DOMContentLoaded', function() {
        const toggleIcon2 = document.getElementById('toggle-icon2');
        const maisInformacao2 = document.getElementById('mais-informacao2');

        toggleIcon2.addEventListener('click', function() {
            if (maisInformacao2.style.display === 'none') {
                // Mostrar a div e trocar o ícone para "fa-angle-up"
                maisInformacao2.style.display = 'block';
                toggleIcon2.classList.remove('fa-angle-down');
                toggleIcon2.classList.add('fa-angle-up');
            } else {
                // Ocultar a div e trocar o ícone para "fa-angle-down"
                maisInformacao2.style.display = 'none';
                toggleIcon2.classList.remove('fa-angle-up');
                toggleIcon2.classList.add('fa-angle-down');
            }
        });
    });

    //ICMS Monofásico retido
    document.addEventListener('DOMContentLoaded', function() {
        const toggleIcon3 = document.getElementById('toggle-icon3');
        const maisInformacao3 = document.getElementById('mais-informacao3');

        toggleIcon3.addEventListener('click', function() {
            if (maisInformacao3.style.display === 'none') {
                // Mostrar a div e trocar o ícone para "fa-angle-up"
                maisInformacao3.style.display = 'block';
                toggleIcon3.classList.remove('fa-angle-down');
                toggleIcon3.classList.add('fa-angle-up');
            } else {
                // Ocultar a div e trocar o ícone para "fa-angle-down"
                maisInformacao3.style.display = 'none';
                toggleIcon3.classList.remove('fa-angle-up');
                toggleIcon3.classList.add('fa-angle-down');
            }
        });
    });



    document.addEventListener('DOMContentLoaded', function() {
        const btnArquivo = document.getElementById('arquivado');
        const form = document.getElementById('formProdutos');

        btnArquivo.addEventListener('change', function() {
            const campos = form.querySelectorAll('input, textarea, select, button');

            campos.forEach(campo => {
                if (campo !== btnArquivo) { // Não aplicar no switch
                    if (btnArquivo.checked) {
                        campo.disabled = true;
                        campo.classList.add('campo-desabilitado'); // Adiciona a classe
                    } else {
                        campo.disabled = false;
                        campo.classList.remove('campo-desabilitado'); // Remove a classe
                    }
                }
            });
        });
    });


    //mascara

    document.addEventListener('DOMContentLoaded', function() {
        const inputs = document.querySelectorAll('.mascaraNumerica');

        inputs.forEach(function(input) {
            input.addEventListener('input', function() {
                let value = input.value;

                // Remove caracteres não numéricos, exceto o ponto
                value = value.replace(/[^0-9.]/g, '');

                // Garante que tenha apenas um ponto decimal
                const parts = value.split('.');
                if (parts.length > 2) {
                    value = parts[0] + '.' + parts[1];
                }

                // Limita a precisão para três casas decimais
                if (parts[1]?.length > 3) {
                    parts[1] = parts[1].substring(0, 3);
                    value = parts.join('.');
                }

                // Adiciona o zero inicial se começar com um ponto
                if (value.startsWith('.')) {
                    value = '0' + value;
                }

                // Atualiza o valor do campo de entrada
                input.value = value;
            });
        });
    });

    //mascara para moeda
    document.addEventListener('DOMContentLoaded', function() {
        const inputs = document.querySelectorAll('.mascaraMoeda');

        inputs.forEach(function(input) {
            input.addEventListener('input', function() {
                let value = input.value;

                // Remove qualquer caractere que não seja número
                value = value.replace(/\D/g, '');

                // Adiciona casas decimais (dois dígitos)
                value = (value / 100).toFixed(2);

                // Substitui o ponto pelo formato de moeda com vírgula
                value = value.replace('.', ',');

                // Adiciona o símbolo de moeda
                value = value;

                // Atualiza o campo de entrada
                input.value = value;
            });

            input.addEventListener('focus', function() {
                // Remove o R$ ao focar no campo
                input.value = input.value.replace('R$ ', '');
            });

            input.addEventListener('blur', function() {
                // Adiciona o R$ ao desfocar do campo, se não estiver vazio
                if (input.value !== '') {
                    input.value = input.value;
                }
            });
        });
    });

    document.addEventListener('DOMContentLoaded', function() {
        const input = document.getElementById('ncm');
        const list = document.getElementById('autocomplete-list');

        // Função para buscar o JSON
        async function fetchNCMData() {
            const response = await fetch('/json/Tabela_NCM_Vigente_20250115.json'); // Altere para o caminho do seu arquivo JSON
            const data = await response.json();
            return data.Nomenclaturas; // Retorna a lista de nomenclaturas
        }

        // Função para filtrar e exibir sugestões
        async function showSuggestions(query) {
            const ncmData = await fetchNCMData();
            const filteredData = ncmData.filter(item => {
                return item.Codigo.includes(query) || item.Descricao.toLowerCase().includes(query.toLowerCase());
            });

            list.innerHTML = ''; // Limpa a lista de sugestões

            filteredData.forEach(item => {
                const listItem = document.createElement('li');
                listItem.classList.add('list-group-item');
                listItem.style.cursor = 'pointer';
                listItem.textContent = `${item.Codigo} - ${item.Descricao}`;
                listItem.addEventListener('click', function() {
                    // Preenche o campo com código e descrição
                    input.value = `${item.Codigo} - ${item.Descricao}`;
                    list.style.display = 'none'; // Esconde a lista de sugestões
                });
                list.appendChild(listItem);
            });

            if (filteredData.length > 0) {
                list.style.display = 'block'; // Exibe a lista se houver sugestões
            } else {
                list.style.display = 'none'; // Esconde a lista se não houver sugestões
            }
        }

        // Evento de input para mostrar sugestões
        input.addEventListener('input', function() {
            const query = input.value;
            if (query.length > 0) {
                showSuggestions(query);
            } else {
                list.style.display = 'none'; // Esconde a lista se o campo estiver vazio
            }
        });

        // Evento para fechar a lista de sugestões ao clicar fora
        document.addEventListener('click', function(event) {
            if (!input.contains(event.target) && !list.contains(event.target)) {
                list.style.display = 'none'; // Fecha a lista ao clicar fora
            }
        });
    });
    document.addEventListener('DOMContentLoaded', function() {
        const inputs = document.querySelectorAll('.mascaraKg');

        function formatarKg(input) {
            let value = input.value;

            // Remove qualquer caractere que não seja número
            value = value.replace(/\D/g, '');

            // Adiciona casas decimais (três dígitos)
            value = (value / 1000).toFixed(3);

            // Substitui o ponto pelo formato com vírgula
            value = value.replace('.', ',');

            // Atualiza o valor do input
            input.value = value;
        }

        inputs.forEach(function(input) {
            // Aplica a formatação inicial para valores já preenchidos
            if (input.value.trim() !== '') {
                formatarKg(input);
            }

            // Evento de entrada para formatar durante a digitação
            input.addEventListener('input', function() {
                let value = input.value;

                // Remove " kg" ao recalcular o valor
                value = value.replace(' kg', '');
                input.value = value;

                formatarKg(input);
            });

            // Remove o "kg" ao focar no campo
            input.addEventListener('focus', function() {
                input.value = input.value.replace(' kg', '');
            });

            // Adiciona o "kg" ao desfocar, se houver valor
            input.addEventListener('blur', function() {
                if (input.value !== '') {
                    input.value = input.value;
                }
            });
        });
    });

    // Espera a página carregar
    document.addEventListener("DOMContentLoaded", function() {
        // Seleciona todas as mensagens com a classe fade-message
        const messages = document.querySelectorAll('.fade-message');

        // Define o tempo para desaparecer (5000ms = 5 segundos)
        setTimeout(() => {
            messages.forEach(message => {
                // Adiciona uma classe para iniciar a transição (caso use CSS)
                message.style.transition = 'opacity 0.5s';
                message.style.opacity = '0';

                // Remove completamente do DOM após a transição
                setTimeout(() => {
                    message.remove();
                }, 500); // Tempo da transição (0.5s)
            });
        }, 5000); // Tempo inicial antes de desaparecer (5s)
    });

    function handleInput(e) {
        var ss = e.target.selectionStart;
        var se = e.target.selectionEnd;
        e.target.value = e.target.value.toUpperCase();
        e.target.selectionStart = ss;
        e.target.selectionEnd = se;
    }
</script>

<script src="{{ asset('assets/js/form-validation-custom.js') }}"></script>
<script src="{{ asset('assets/js/height-equal.js') }}"></script>
<script src="{{ asset('assets/js/custom-animated-form.js') }}"></script>
<script src="{{ asset('assets/js/custom-pwd-validation.js') }}"></script>

@endsection