@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 Fornecedores</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">Fornecedores</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 Cadastrais</h5>
                </div>
                <div class="card-body">
                    <form class="theme-form needs-validation" name="fornecedores_form" id="fornecedores_form" novalidate="" action="{{ route('fornecedores.create-fornecedores') }}" method="post">
                        @csrf
                        <div class="card-body">
                            <div class="row">
                                <label class="form-label" for="validationAtuaComo">Atua como*</label>
                                <div class="col-md-12 mb-3">
                                    <div class="form-check form-check-inline checkbox checkbox-dark mb-0">
                                        <input class="form-check-input" id="inline-1" type="checkbox" value="sim" name="validationAtuaCliente">
                                        <label class="form-check-label" for="inline-1">Cliente</label>
                                    </div>
                                    <div class="form-check form-check-inline checkbox checkbox-dark mb-0">
                                        <input class="form-check-input" id="inline-2" type="checkbox" value="sim" name="validationAtuaFornecedor">
                                        <label class="form-check-label" for="inline-2">Fornecedor</label>
                                    </div>
                                    <div class="form-check form-check-inline checkbox checkbox-dark mb-0">
                                        <input class="form-check-input" id="inline-3" type="checkbox" value="sim" name="validationAtuatransp">
                                        <label class="form-check-label" for="inline-3">transportadora</label>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label" for="validationNome">Nome*</label>
                                        <input class="form-control" id="validationNome" name="validationNome" type="text" oninput="handleInput(event)" required="">
                                        <div class="valid-feedback">Looks good!</div>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label" for="validationFantasia">Fantasia</label>
                                        <input class="form-control" id="validationFantasia" name="validationFantasia" oninput="handleInput(event)" type="text">
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label" for="validationTipo_pessoa">Tipo Pessoa</label>
                                        <select class="form-select" id="validationTipo_pessoa" name="validationTipo_pessoa" onchange="ModuloTp_Pessoa(this.value)">
                                            <option value=""></option>
                                            @foreach($TipoFornecedor as $tf)
                                            <option value="{{ $tf->id }}">{{ $tf->descricao }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4 mb-3" id="div_cpf" style="display:none;">
                                        <label class="form-label" for="validationCPF">CPF</label>
                                        <input class="form-control" placeholder="___.___.___-__" id="validationCPF" name="validationCPF" type="text" oninput="handleInput(event)">
                                    </div>
                                    <div class=" col-md-4 mb-3" id="div_cnpj">
                                        <label class="form-label" for="validationCNPJ">CNPJ</label>
                                        <input class="form-control" placeholder="__.___.___/____-__" id="validationCNPJ" name="validationCNPJ" type="text" oninput="handleInput(event)">
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label" for="validationContribuinte">Contribuinte</label>
                                        <select class="form-select" id="validationContribuinte" name="validationContribuinte">
                                            <option value=""></option>
                                            @foreach($IndicadorIE as $ie)
                                            <option value="{{ $ie->id }}">{{ $ie->descricao }}</option>
                                            @endforeach
                                        </select>

                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label" for="validationIE">Inscrição Estadual </label>
                                        <input class="form-control" id="validationIE" name="validationIE" type="text" oninput="handleInput(event)">
                                    </div>
                                </div>
                                <div class="row">

                                    <div class="col-md-4 mb-3">
                                        <label class="form-label" for="validationRG">RG</label>
                                        <input class="form-control" id="validationRG" name="validationRG" type="text" oninput="handleInput(event)">
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label" for="validationOE">Órgão Emissor</label>
                                        <input class="form-control" id="validationOE" name="validationOE" type="text" oninput="handleInput(event)">
                                    </div>
                                </div>
                            </div>
                            <div class="card-header">
                                <h5>Endereço</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-3 mb-3">
                                        <label class="form-label" for="validationCep">Cep</label>
                                        <input class="form-control" id="validationCep" name="validationCep" type="text" oninput="handleInput(event)">
                                    </div>
                                    <div class="col-md-3  mb-3">
                                        <label class="form-label" for="validationUF">Uf</label>
                                        <input class="form-control" id="validationUF" name="validationUF" type="text" oninput="handleInput(event)">
                                    </div>
                                    <div class="col-md-3  mb-3">
                                        <label class="form-label" for="validationCid">Cidade</label>
                                        <input class="form-control" id="validationCid" name="validationCid" type="text" oninput="handleInput(event)">
                                    </div>
                                    <div class="col-md-3  mb-3">
                                        <label class="form-label" for="validationBairro">Bairro</label>
                                        <input class="form-control" id="validationBairro" name="validationBairro" type="text" oninput="handleInput(event)">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label" for="validationEnd">Endereço</label>
                                        <input class="form-control" id="validationEnd" name="validationEnd" type="text" oninput="handleInput(event)">
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label" for="validationNum">Número</label>
                                        <input class="form-control" id="validationNum" name="validationNum" type="text" oninput="handleInput(event)">
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label" for="validationCompl">Complemento</label>
                                        <input class="form-control" id="validationCompl" name="validationCompl" type="text" oninput="handleInput(event)">
                                    </div>
                                </div>
                            </div>
                            <div class="card-header">
                                <h5>Contato</h5><span><a href="#"></a></span>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-9 mb-3">
                                        <label class="form-label" for="validationInfoC">Informações do Contato</label>
                                        <input class="form-control" id="validationInfoC" name="validationInfoC" type="text" oninput="handleInput(event)">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-2 mb-3">
                                        <label class="form-label" for="validationTel">Telefone</label>
                                        <input class="form-control" id="validationTel" name="validationTel" type="text" maxlength="15" onkeyup="handlePhone(event)" oninput="handleInput(event)">
                                    </div>
                                    <div class="col-md-2 mb-3">
                                        <label class="form-label" for="validationCel">Celular</label>
                                        <input class="form-control" id="validationCel" name="validationCel" type="text" maxlength="15" onkeyup="handlePhone(event)" oninput="handleInput(event)">
                                    </div>
                                    <div class="col-md-6 mb-6">
                                        <label class="form-label" for="validationEmail">E-mail</label>
                                        <input class="form-control" id="validationEmail" name="validationEmail" type="email" onblur="validacaoEmail(fornecedores_form.validationEmail)" oninput="handleInput(event)">
                                        <div id="msgemail" class="invalid-feedback"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-header">
                                <h5>Contatos Adicionais</h5><span><a href="#"></a></span>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-5">
                                        <label class="form-label" for="validationNomeAd">Nome</label>
                                        <input class="form-control" id="validationNomeAd" name="validationNomeAd" type="text" oninput="handleInput(event)">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label" for="validationEmailAd">E-mail</label>
                                        <input class="form-control" id="validationEmailAd" name="validationEmailAd" type="email" aria-describedby="emailHelp" onblur="validacaoEmail(fornecedores_form.validationEmailAd)" oninput="handleInput(event)">
                                        <div id="msgemail" class="invalid-feedback"></div>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label" for="validationCelAd">Celular</label>
                                        <input class="form-control" id="validationCelAd" name="validationCelAd" type="text" onkeyup="handlePhone(event)" oninput="handleInput(event)">
                                    </div>
                                </div>
                            </div>

                            <div class="card-body">
                                <div class="row">
                                    <h5>Observações</h5><span><a href="#"></a></span>
                                    <div class="col-md-12 mb-12">
                                        <label class="form-label" for="validationObs"></label>
                                        <textarea class="form-control" id="validationObs" name="validationObs" oninput="handleInput(event)"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer text-end">
                                <button id="btn_cadastrar" class="btn btn-success" type="submit">Salvar</button>
                                <a href="{{ route('fornecedores') }}" class="btn btn-secondary">Voltar</a>
                            </div>
                    </form>
                </div>
            </div>
        </div>

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

@section('scripts')
<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>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    //mascara cnpj
    document.getElementById('validationCNPJ').addEventListener('input', function(e) {
        var x = e.target.value.replace(/\D/g, '').match(/(\d{0,2})(\d{0,3})(\d{0,3})(\d{0,4})(\d{0,2})/);
        e.target.value = !x[2] ? x[1] : x[1] + '.' + x[2] + '.' + x[3] + '/' + x[4] + (x[5] ? '-' + x[5] : '');
    });

    //mascara cpf
    document.addEventListener('DOMContentLoaded', function() {
        const cpf = document.getElementById('validationCPF');
        cpf.addEventListener("blur", function() {
            if (cpf.value) cpf.value = cpf.value.match(/.{1,3}/g).join(".").replace(/\.(?=[^.]*$)/, "-");
        });

    });

    function validarCPF() {
        console.log('çpf')
        var soma = 0;
        var resto;
        var inputCPF = document.getElementById('validationCPF').value;

        if (inputCPF == '00000000000') return false;
        for (i = 1; i <= 9; i++) soma = soma + parseInt(inputCPF.substring(i - 1, i)) * (11 - i);
        resto = (soma * 10) % 11;

        if ((resto == 10) || (resto == 11)) resto = 0;
        if (resto != parseInt(inputCPF.substring(9, 10))) return false;

        soma = 0;
        for (i = 1; i <= 10; i++) soma = soma + parseInt(inputCPF.substring(i - 1, i)) * (12 - i);
        resto = (soma * 10) % 11;

        if ((resto == 10) || (resto == 11)) resto = 0;
        if (resto != parseInt(inputCPF.substring(10, 11))) return false;
        return true;
    }

    $('#validationCep').on('keyup', function() {
        var cep = $(this).val().replace(/\D/g, '');
        if (cep.length == 8) {
            $.getJSON('https://viacep.com.br/ws/' + cep + '/json/', function(data) {
                if (!data.erro) {
                    $('#validationEnd').val(data.logradouro);
                    $('#validationBairro').val(data.bairro);
                    $('#validationCid').val(data.localidade);
                    $('#validationUF').val(data.uf);
                    $('#validationNum').focus();
                } else {

                    msnAlert('CEP não encontrado', 'warning');
                }
            });
        }
    });


    //MASCARA TELEFONE

    const handlePhone = (event) => {
        let input = event.target
        input.value = phoneMask(input.value)
    }

    const phoneMask = (value) => {
        if (!value) return ""
        value = value.replace(/\D/g, '')
        value = value.replace(/(\d{2})(\d)/, "($1) $2")
        value = value.replace(/(\d)(\d{4})$/, "$1-$2")
        return value
    }

    function validacaoEmail(field) {

        console.log(field);
        usuario = field.value.substring(0, field.value.indexOf("@"));
        dominio = field.value.substring(field.value.indexOf("@") + 1, field.value.length);

        if ((usuario.length >= 1) &&
            (dominio.length >= 3) &&
            (usuario.search("@") == -1) &&
            (dominio.search("@") == -1) &&
            (usuario.search(" ") == -1) &&
            (dominio.search(" ") == -1) &&
            (dominio.search(".") != -1) &&
            (dominio.indexOf(".") >= 1) &&
            (dominio.lastIndexOf(".") < dominio.length - 1)) {
            document.getElementById("msgemail").innerHTML = "E-mail válido";
            console.log("E-mail valido");
        } else {
            document.getElementById("msgemail").innerHTML = "<font color='red'>E-mail inválido </font>";
            console.log("E-mail invalido");
        }
    }


    function ModuloTp_Pessoa(id) {

        if (id == '1') {

            $('#div_cpf').show();
            $('#div_cnpj').hide();

        } else if (id == '2') {

            $('#div_cpf').hide();
            $('#div_cnpj').show();

        } else {

            console.log('ultimo esle');

        }
    }

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

    document.addEventListener('DOMContentLoaded', function() {
        const submitButton = document.getElementById('btn_cadastrar');

        submitButton.addEventListener('click', function(event) {

            var nome = $("input[name='validationNome']").val();
            console.log(nome);

            // Verificar se pelo menos um checkbox foi marcado
            const clientCheckbox = document.querySelector('input[name="validationAtuaCliente"]');
            const supplierCheckbox = document.querySelector('input[name="validationAtuaFornecedor"]');
            const transporterCheckbox = document.querySelector('input[name="validationAtuatransp"]');

            if (!clientCheckbox.checked && !supplierCheckbox.checked && !transporterCheckbox.checked || !nome) {
                // Se nenhum checkbox for marcado, evitar o envio e mostrar alerta
                event.preventDefault(); // Previne o envio do formulário
                Swal.fire({
                    title: 'Erro!',
                    text: 'Você deve selecionar pelo menos um dos tipos: Cliente, Fornecedor ou Transportadora.',
                    icon: 'error',
                    confirmButtonText: 'Ok'
                });

            } else {

           
                Swal.fire({
                    title: "Good job!",
                    text: "Cadastro Realizado com Sucesso",
                    icon: "success",   
                    confirmButtonText: 'OK'                   
                 
                }).then(function() {
                    window.location.href = "/estoque/fornecedores";
                });



            }
        });
    });
</script>
@endsection