<?php $__env->startSection('content'); ?>

<?php echo $__env->make('perfil/menu-lateral', ['configMenuLateral' => $configMenuLateral], array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>

<div class="minha-conta__right">
    <form id="editar-perfil-form" method="POST" action="<?php echo url('perfil/editar-perfil'); ?>">
        <div class="box">
            <h2 class="title">Meus Dados</h2>

            <div class="perfil-imagem-content">
                <figure>
                    <img src="<?php echo e($cliente->thumbnail_principal ? $cliente->thumbnail_principal : '/img/site/user-conf.png'); ?>" class="imagem-perfil" alt="Foto Perfil">
                    <img src="/img/site/camera-change-conf.svg" data-open-dropdown-change class="change-picture" alt="Mudar foto">
                    <ul class="drop-picture-profile">
                        <li>
                            <div class="alterar-imagem-confraria">Alterar foto</div>
                        </li>
                        <li>
                            <div class="remover-imagem-perfil">Remover foto</a>
                        </li>
                    </ul>

                    <input accept="image/*" class="imagem-perfil-upload" type="file" style="display:none !important">
                </figure>
            </div>

            <div class="space-between">
                <div class="<?php echo e($cliente->tipo_pessoa == 'J' ? 'item' : 'item-half'); ?>">
                    <label><?php echo e($cliente->tipo_pessoa == 'J' ? 'Razão Social' : 'Nome'); ?></label>
                    <input name="nome" required class="default-input" value="<?php echo $cliente->nome; ?>" placeholder="Nome" type="text">
                </div>

                <?php if($cliente->tipo_pessoa == 'F'): ?>
                    <div class="item-half">
                        <label>Sobrenome</label>
                        <input name="sobrenome" required class="default-input" value="<?php echo $cliente->sobrenome; ?>" placeholder="Sobrenome" type="text">
                    </div>
                <?php endif; ?>
            </div>
            <div class="item">
                <label><?php echo e($cliente->tipo_pessoa == 'J' ? 'Data de Fundação' : 'Data de nascimento'); ?></label>
                <input name="data_nascimento" required class="default-input" value="<?php echo $cliente->data_nascimento; ?>" placeholder="DD/MM/AAAA" type="date">
            </div>
            <?php if($cliente->tipo_pessoa == 'F'): ?>
                <div class="item">
                    <label>CPF</label>
                    <input name="cpf" required class="default-input" value="<?php echo $cliente->cpf; ?>" placeholder="000.000.000-00" type="text">
                </div>
            <?php else: ?>
                <div class="item">
                    <label>CNPJ</label>
                    <input name="cnpj" required class="default-input" value="<?php echo $cliente->cnpj; ?>" placeholder="000.000.000-00" type="text">
                </div>
            <?php endif; ?>

            <?php if($cliente->tipo_pessoa == 'F'): ?>
                <div class="item">
                    <label>Sexo</label>
                    <select name="genero" id="genero" class="default-select">
                        <option value="" disabled <?php echo $cliente->genero ? '' : 'selected' ?>>Escolha</option>
                        <option <?php echo $cliente->genero == 'M' ? 'selected' : '' ?> value="M">Masculino</option>
                        <option <?php echo $cliente->genero == 'F' ? 'selected' : '' ?> value="F">Feminino</option>
                        <option <?php echo $cliente->genero == 'O' ? 'selected' : '' ?> value="O">Não informado</option>
                    </select>
                </div>
            <?php endif; ?>
            <div class="item">
                <label>E-mail</label>
                <input name="email" required="" class="default-input" value="<?php echo $cliente->user->email; ?>" placeholder="Digite seu e-mail" type="email">
            </div>
            <div class="item">
                <label>Telefone</label>
                <input name="telefone" required="" class="default-input" value="<?php echo $cliente->telefone; ?>" placeholder="Digite seu telefone" type="text">
            </div>
            <div class="item">
                <label>Senha</label>
                <input name="password" class="default-input" placeholder="Crie uma senha" type="password">
            </div>
            <div class="item">
                <label>Confirme sua senha</label>
                <input name="confirm_password" class="default-input" placeholder="Digite sua senha novamente" type="password">
            </div>
            <div style="margin-top: 10px; display: flex; align-items: center; justify-content: center;">
                <button class="minha-conta__button-orange">Concluir Edição</button>
            </div>
        </div>
    </form>
</div>
<script>
    $('#editar-perfil-form').submit(function(e){
        e.preventDefault();
        $.ajax({
            url:$(this).attr('action'),
            type:$(this).attr('method'),
            data:$(this).serialize(),
            beforeSend:function(){
                $('.carregando').fadeIn();
            },
            success:function(data){
                if (data.status) {
                    alertUtil.alertSuccess(data.message);
                }else{
                    alertUtil.alertError(data.message);
                }
                $('.carregando').fadeOut();
            }
        }).fail(function(jqXHR) {

          $('.carregando').fadeOut();
          
          if(jqXHR.responseJSON.cpf){
            alertUtil.alertError(jqXHR.responseJSON.cpf);
          }else{
            alertUtil.alertError(jqXHR.responseText);
          }

        });
    });

    $(document).ready(function(){

        $('[name="cpf"]').mask('999.999.999-99');
        $('[name="cnpj"]').mask('99.999.999/9999-99');

        
        function inputHandler(masks, max, event) {
            var c = event.target;
            var v = c.value.replace(/\D/g, '');
            var m = c.value.length > max ? 1 : 0;
            VMasker(c).unMask();
            VMasker(c).maskPattern(masks[m]);
            c.value = VMasker.toPattern(v, masks[m]);
        }

        $('[name="telefone"]')
            .mask("(99) 99999-999?9")
            .focusout(function (event) {  
                var target, phone, element;  
                target = (event.currentTarget) ? event.currentTarget : event.srcElement;  
                phone = target.value.replace(/\D/g, '');
                element = $(target);  
                element.unmask();  
                if(phone.length > 10) {  
                    element.mask("(99) 99999-999?9");  
                } else {  
                    element.mask("(99) 9999-9999?9");  
                }  
        });

        $(document).on('click', '[data-open-dropdown-change]', function(){
            var $drop = $(this).parent().find('.drop-picture-profile');
            $drop.addClass('active');

            $(document).on('mouseleave', '.drop-picture-profile.active', function(){
                $('.drop-picture-profile.active').removeClass('active')
            })
        })

        $(document).on('click', '.alterar-imagem-confraria', function (){
            $('.imagem-perfil-upload').trigger('click');
        });

        $(document).on('change', '.imagem-perfil-upload', function (event){
            let file = $(this)[0].files[0];
            let formData = new FormData();
            formData.append('arquivo', file);

            $('.carregando').fadeIn();

            $.ajax({
                url: "/perfil/upload-imagem",
                type: "post",
                data: formData,
                contentType: false,
                processData: false,
                success:function(data){   
                    $('.carregando').fadeOut();
                    if(data.status){
                        $('.imagem-perfil').attr('src', data.url);
                        return alertUtil.alertSuccess(data.mensagem);
                    }else{
                        return alertUtil.alertError(data.mensagem);
                    }             
                },
            }); 
        });

        $(document).on('click', '.remover-imagem-perfil', function (){
            $('.carregando').fadeIn();

            $.ajax({
                url: "/perfil/remover-imagem",
                type: "post",
                data: {},
                contentType: false,
                processData: false,
                success:function(data){   
                    $('.carregando').fadeOut();
                    if(data.status){
                        $('.imagem-perfil').attr('src', '/img/site/user-conf.png');
                        return alertUtil.alertSuccess(data.mensagem);
                    }else{
                        return alertUtil.alertError(data.mensagem);
                    }             
                },
            }); 
        });

        /*if($('[name="telefone"]').length){
            var telefone = $('[name="telefone"]').val()
            var telMask  = ['(99) 99999-9999','(99) 9999-9999'];
            var tel     = document.querySelector('[name="telefone"]');
            VMasker(tel).maskPattern(telMask[0]);
            tel.addEventListener('input', inputHandler.bind(undefined, telMask, 12), false);
        }*/

    });
</script>

</div>
</div>
</div>
</section>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.website', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>