@extends('layouts.confraria')

@section('content')

<div class="wrapper criacao">
    <div class="box-criacao">
        <div class="criacao-top">
            <h2>Olá, novo confrade!</h2>
            <p>Vamos criar sua confraria? São 2 passos simples e rápidos</p>

            <span class="hidden" data-title-1>Olá, novo confrade!</span>
            <span class="hidden" data-subtitle-1>Vamos criar sua confraria? São 2 passos simples e rápidos</span>
            <span class="hidden" data-title-2>Convide seus amigos!</span>
            <span class="hidden" data-subtitle-2>Convide seus amigos! Sua confraria precisa ter no mínimo 4 pessoas, incluindo você!</span>

            <div class="criacao-steps">
                <div class="step1 active">
                    <span>1</span>
                </div>
                <div class="step2">
                    <span>2</span>
                    <span class="step-final"><img src="/img/site/final-step-conf.svg" alt="Final"></span>
                </div>
            </div>
        </div>

        

        <div class="step-box active" data-step="1">
            <div class="criacao-content">
                <div class="criacao-content-left">
                    <div class="conf-timeline-item">
                        <figure>
                            <img src="/img/site/conf-item-1.svg" alt="Crie sua confraria">
                        </figure>
                        <strong>Crie sua confraria</strong>
                        <p>Com apenas alguns cliques você cria, nomeia e configura o seu grupo;</p>
                    </div>
                </div>
                <div class="criacao-content-right">
                    <h3>Nomeie Sua Confraria</h3>

                    <div class="input-box">
                        <div class="label-box">
                            <label for="conf-name">Como deseja chamar sua confraria?</label>
                        </div>
                        <input type="text" id="conf-name-visual" placeholder="Digite um nome para o seu grupo">
                    </div>
                </div> 
            </div>

            <div class="criacao-bottom">
                <a href="/confraria" class="secondary-bottom">Cancelar</a>
                <button class="btn-action btn-conf" data-next-step="2">PRÓXIMA ETAPA <img src="/img/site/next-btn-conf.svg" alt="Próxima Etapa"></button>
            </div>
        </div>

        <form id="form-cadastro-conf" class="step-box" data-step="2">
            <input type="hidden" name="nome_conf">
            <div class="criacao-content">
                <div class="criacao-content-left">
                    <div class="conf-timeline-item">
                        <figure>
                            <img src="/img/site/conf-item-2.svg" alt="Convide seus amigos">
                        </figure>
                        <strong>Convide seus amigos</strong>
                        <p>Incluindo {{ $info->min_membros_confraria }} confrades que efetuem uma compra mínima de R$ {{ number_format($info->valor_minimo_meta_kit_confraria, 2, ',', '.') }}, sua confraria ganha uma coleção no valor de @if($oferta_kit_confraria) {{ number_format($oferta_kit_confraria->preco_oferta, 2, ',', '.')}} @else 500,00 @endif <i class="conf-info"><img src="/img/site/conf-info.svg"> 
                        <span class="tooltip-large">
                            A origem da palavra "Confraria" é a junção da expressão em latim  "com"  cujo a 
                            tradução é junto unida a "frater"que significa irmão. Por isso, é sinônimo de 
                            irmandade! Não se faz uma confraria só, é preciso juntar os amigos unidos pelo 
                            vinho. 
                            No lançamento da Confraria Vinumday preparamos uma coleção incrível para o 
                            próximo encontro com seus confrades. E esse conjunto de vinhos no valor 
                            aproximado de R$ @if($oferta_kit_confraria)no valor de R$ {{ number_format($oferta_kit_confraria->preco_oferta, 2, ',', '.')}} @endif
                            pode ser da sua Confraria a custo zero se você adotar os seguintes passos:
                            - Adicionar à sua confraria no mínimo  {{ ($info->min_membros_confraria > 0 ? $info->min_membros_confraria : 4)}} Confrades que ainda não possuam cadastro 
                            na Vinumday através do link de convite;
                            - Os 4 novos cadastrados devem fazer uma compra de qualquer produto do site de 
                            no mínima R$ {{ ($info->valor_minimo_meta_kit_confraria > 0 ? number_format($info->valor_minimo_meta_kit_confraria, 2, ',', '.') : '500,00')}} cada;
                            - Pronto! O cumprimento desses passos será validado pela nossa plataforma, e após
                            esse processo, a coleção será adicionada a sua Confraria.
                        </span>
                        </i>
                        </p>
                    </div>
                </div>
                <div class="criacao-content-right">
                    <h3>Convidar por e-mail:</h3>

                    <div class="list-inputs">
                        <div class="input-box">
                            <div class="label-box">
                                <label>E-mail do seu amigo <span>1</span>:</label>
                            </div>
                            <input type="email" name="convites[]" placeholder="Digite o e-mail">
                            <img src="/img/site/del-conf.svg" class="delete-conf">
                        </div>

                        <div class="input-box">
                            <div class="label-box">
                                <label>E-mail do seu amigo <span>2</span>:</label>
                            </div>
                            <input type="email" name="convites[]" placeholder="Digite o e-mail">
                        </div>

                        <div class="input-box">
                            <div class="label-box">
                                <label>E-mail do seu amigo <span>3</span>:</label>
                            </div>
                            <input type="email" name="convites[]" placeholder="Digite o e-mail">
                        </div>

                        <div class="btn-text" data-add-amigo>
                            <img src="/img/site/plus-conf.svg" alt="Adicionar outro amigo">
                            <span>Adicionar outro amigo</span>
                        </div>
                    </div>

                    <h3>Convidar por link:</h3>
                    <div class="input-box">
                        <div class="label-box">
                            <label>Link compartilhável:</label>
                        </div>
                        <input type="hidden" name="codigo" value="{{ $codigo }}" />
                        <input type="text" class="copy-link-input" readonly value="{{ $link }}">
                    </div>
                    <div class="btn-text" data-copy-link>
                        <img src="/img/site/copy-conf.svg" alt="Copiar link">
                        <span>Copiar link</span>
                    </div>
                </div> 
            </div>

            <div class="criacao-bottom">
                <span class="secondary-bottom" data-next-step="1">Voltar</span>
                <button id="submitConf" type="button" class="btn-action btn-conf">CRIAR CONFRARIA <img src="/img/site/next-btn-conf.svg" alt="Próxima Etapa"></button>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">
    $(document).on('ready', function(){
        $(document).on('click', '[data-next-step]', function(){
            var step = $(this).attr('data-next-step');

            if($('#conf-name-visual').val().length > 0){
                $('[name="nome_conf"]').val($('#conf-name-visual').val())
            }else{
                alertUtil.alertError("Digite um nome para sua Confraria");
                return false;
            }

            if(step == 2){
                $('.criacao-steps div.active').addClass('finished');
            }else{
                $('.criacao-steps div.finished').removeClass('finished');
            }

            $('.step-box.active, .criacao-steps div.active').removeClass('active');
            $('.step-box[data-step="' + step + '"], .criacao-steps div.step' + step).addClass('active');
            
            var title = $('[data-title-' + step + ']').text();
            var subtitle = $('[data-subtitle-' + step + ']').text();
            $('.criacao-top h2').text(title);
            $('.criacao-top p').text(subtitle);
        });

        $(document).on('click', '[data-add-amigo]', function(){
            var $clone = $('.list-inputs .input-box:first-child').clone();
            var number = $('.list-inputs .input-box').length + 1;
            $clone.find('label span').text(number);
            $clone.addClass('clone');

            $($clone).find('input').val('');
            $('.list-inputs .btn-text').before($clone);
        })

        $(document).on('click', '.delete-conf', function(){
            $(this).closest('.clone').remove();
        })

        $(document).on('click', '.copy-link-input', function(){
            $(this).select();
            document.execCommand("copy");
            alertUtil.alertSuccess("Copiado com sucesso!");
        })

        $(document).on('click', '[data-copy-link]', function(){
            $('.copy-link-input').select();
            document.execCommand("copy");
            alertUtil.alertSuccess("Copiado com sucesso!");
        })

        $(document).on('click', '#submitConf', function(){

            let form = $('#form-cadastro-conf').serialize();

            $.ajax({
                url: "/confraria/cadastro",
                type: "post",
                data: form,
                beforeSend:function(){
                    $('.carregando').fadeIn();
                },
                success:function(data){
                    $('.carregando').fadeOut();
                    if(data.status){

                        alertUtil.alertSuccess(data.mensagem);
                        setTimeout(function(){
                            return window.location.replace(data.redirect);
                        }, 800);

                    }else{
                        return alertUtil.alertError(data.mensagem);
                    }
                },
                error:function(data){
                    $('.carregando').fadeOut();
                    alertUtil.alertError('Erro ao criar confraria. Tente novamente mais tarde.');
                }
		    });
        })
        

    });
</script>

@endsection