@extends('adminlte::page')

@section('plugins.Toastr', true)
@section('plugins.SetMask', true)
@section('plugins.InputMask', true)
@section('plugins.DatePicker', true)
@section('plugins.FileStyle', true)
@section('plugins.SelectPicker', true)

@section('css')
    <link rel="stylesheet" href="{{ asset('css/style_colors.css?v=2') }}">
    <link rel="stylesheet" href="{{ asset('css/style.css?v=2') }}">
    <style>

        .bootstrap-select {
            border: 1px solid #ced4da!important;
        }
        #img_preview {
            height: 85%;
            width: 100%;
        }

        .divPai > .divFilho:nth-child(3) > .divbtnDeletar {
            display: none !important;
        }
    </style>
@stop

@section('js')
    <script src="{{ asset('js/funcoes.js')}}"></script>
    <script>
        $(document).ready(function(){
            SetMask();
            $('.selectpicker').selectpicker();
        });

        function AdicionarNovoElemento() {
            let div = $('.divPai > .divFilho').first().clone();
            $(div).find('input, select, textarea').val('');
            $('.divPai').append(div);
        }

        function RemoverElemento(e) {
            $(e).closest('.divFilho').remove();
        }

        function ToggleResponsavel() {
            var dataNascimento = $('#data_nascimento').val();
            var idade = CalcularIdade(dataNascimento);
            $('#divResponsavel').toggle(idade < 18);

            $('#divResponsavel').find('input, select').each(function() {
                $(this).attr('required', (idade < 18));
            });
        }

        function GetOptionsCursos(e) {
            const instituicao_id = $(e).val();
            const finalidade_id = $(e).closest('.divFilho').find('#finalidade_id\\[\\]').val();

            if (instituicao_id != '' && finalidade_id != '') {
                const curso = $(e).closest('.divFilho').find('#curso_id\\[\\]');

                $.ajax({
                    url: '/'+'GetJsonCurso/'+instituicao_id+'/'+finalidade_id,
                    beforeSend: function() {
                        $(curso).empty();
                    },
                    success: function(ret) {
                        try {
                            const arrOption = $.parseJSON(ret);
                            MontaOptionsSelect(curso, arrOption)
                        } catch (e) {
                            swal.fire(
                                'Erro!',
                                'Ocorreram erros na busca por Cursos. Entre em contato com o suporte.',
                                'error'
                            );

                        }
                    },
                });
            }
        }

        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                $('#img_preview').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]); // convert to base64 string
            }
        }

        $("input.filestyle").change(function() {
            readURL(this);
        });

        function GetOptionsCidades(elem) {
            const cidade = $('#cidade_id');
            const estado_id = $('#estado_id').val();

            $.ajax({
                url: '/'+'GetJsonCidades/'+estado_id,
                beforeSend: function() {
                    $('#cidade_id').empty();
                },
                success: function(ret) {
                    try {
                        const arrOption = $.parseJSON(ret);
                        MontaOptionsSelect(cidade, arrOption)
                    } catch (e) {
                        swal.fire(
                            'Erro!',
                            'Ocorreram erros na busca por Cidades. Entre em contato com o suporte.',
                            'error'
                        );

                    }
                },
            });
        }

        const MontaOptionsSelect = function MontaOptionsSelect(elmt, arrOption = {}, selected = null) {
            $.each(arrOption, function(val, text) {
                const option = $("<option>").attr('value', $.trim(val)).text(text);

                if (selected !== null && $.trim(val).toString() === selected.toString()) {
                    $(option).attr('selected', 'selected');
                }

                $(elmt).append(option);
            });
        }

        const SetMask = function SetMask() {
            $('input[data-mask]').each(function() {
                const dataMask = $(this).attr('data-mask');
                const dataMaskFormat = $(this).attr('data-mask-format');

                switch (dataMask) {
                    case 'integer':
                        $(this).setMask({
                            mask: '999.999.999.999'.substr(0, dataMaskFormat || 15),
                            type: 'reverse'
                        });
                        break;
                    case 'numeric':
                        $(this).inputmask({
                            mask: '9999999999999999999999999999999999999999',
                            jitMasking: true,
                            placeholder: ''
                        });
                        break;
                    case 'decimal-3':
                        $(this).inputmask({
                            'mask': "999.99",
                            rightAlign: true,
                            jitMasking: true,
                        });
                        break;
                    case 'decimal':
                        $(this).setMask({
                            mask: '99,999.999.999.999'.substr(0, dataMaskFormat || 18),
                            type: 'reverse',
                            defaultValue: '000,00'
                        });
                        break;
                    case 'sinal-decimal':
                        $(this).setMask({
                            mask: '99,999.999.999.999'.substr(0, dataMaskFormat || 18),
                            type: 'reverse',
                            defaultValue: '+000,00'
                        });
                        break;
                    case 'cpfcnpj':
                        $(this).inputmask({
                            mask: ['999.999.999-99', '99.999.999/9999-99'],
                            jitMasking: true,
                            placeholder: ''
                        });
                        break;
                    case 'cpf':
                        $(this).inputmask({
                            mask: '999.999.999-99',
                            jitMasking: true,
                            placeholder: ''
                        });
                        break;
                    case 'cnpj':
                        $(this).inputmask({
                            mask: '99.999.999/9999-99',
                            jitMasking: true,
                            placeholder: ''
                        });
                        break;
                    case 'cep':
                        $(this).inputmask({
                            mask: '99999-999',
                            jitMasking: true,
                            placeholder: ''
                        });
                        break;
                    case 'phone':
                        $(this).inputmask({
                            mask: ['(99) 9999-9999', '(99) 99999-9999'],
                            jitMasking: true,
                            placeholder: ''
                        });
                        break;
                    case 'rg':
                        $(this).inputmask({
                            mask: '999999999999',
                            jitMasking: true,
                            placeholder: ''
                        });
                        break;
                    case 'time':
                        $(this).inputmask({
                            mask: 'h:s',
                            jitMasking: true,
                            placeholder: ''
                        });
                        break;
                }
            });
        };

        $('[data-toggle="tooltip"]').tooltip()
    </script>
@stop