@extends('layouts.confraria')

@section('content')

<div class="wrapper-internal">
    <div class="container-conf">
        <div class="conf-box no-padding">
            <div class="topo-conf-default">
                <div class="topo-cover" style="background-image: url('{{ $confraria->imagem_capa ? $confraria->imagem_capa : '/img/site/conf-cover-padrao.png' }}');"></div>

                <div class="topo-conf-default-content">
                    <div class="left-topo-default">
                        <h1>Membros</h1>
                        <ul>
                            <li>
                                <a href="/confraria/home">Home</a>
                            </li>
                            <li>
                                <span>Membros</span>
                            </li>
                        </ul>
                    </div>

                    <div class="list-kpis">
                        <div class="kpi-item">
                            <span>Membros</span>
                            <strong>{{ $qtdMembros }}</strong>
                        </div>
                        <div class="kpi-item right">
                            <span>Total adg. atual</span>
                            <strong>R$ {{  number_format($valorAdegaAberta,2,",",".") }}</strong>
                        </div>
                        <div class="kpi-item right">
                            <span>Total Confraria</span>
                            <strong>R$ {{  number_format($contribuicaoTotalConfraria,2,",",".") }}</strong>
                        </div>
                        @if($confraria->cadastro_id == $cadastro->id)
                            <button class="btn-action btn-conf add-membro">ADICIONAR MEMBRO</button>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="conf-box no-padding top-table">
            <!-- <h3>Adega atual</h3> -->
            <h3>Contribuições 
                <i class="conf-info">
                    <img src="/img/site/conf-info.svg"> 
                    <p>
                    Acompanhe individualmente de forma simples e transparente a porcentagem e 
                    valores das contribuições realizadas na adega vigente e durante o período 
                    total da Confraria. Compartilhe despesas e saldos gerindo sua Confraria de forma 
                    colaborativa.
                    </p>
                </i>
            </h3>
            <div class="box-top-table">
                <div class="component-table">
                    <div class="line-table line-title">
                        <span style="min-width: 293px; max-width: 293px;">Membro</span>
                        <span style="min-width: 165px; max-width: 165px;">% contribuição<br>adega atual</span>
                        <span style="min-width: 165px; max-width: 165px;">% contribuição<br>total</span>
                        <span style="min-width: 182px; max-width: 182px;">Contribuição<br>adega atual</span>
                        <span style="min-width: 154px; max-width: 154px;">Contribuição<br>total</span>
                    </div>
       
                    @foreach($membros as $membro)

                    @php
                        $porcentagemContribuicaoAdegaAtual = 0;
                        $porcentagemContribuicaoTotal = 0;

                        if($membro->valor_adega_atual != 0 && $valorAdegaAberta != 0)
                            $porcentagemContribuicaoAdegaAtual = ($membro->valor_adega_atual/$valorAdegaAberta * 100); 
                        
                        if($membro->contribuicao_total != 0 && $contribuicaoTotalConfraria != 0)
                            $porcentagemContribuicaoTotal = $membro->contribuicao_total/$contribuicaoTotalConfraria * 100;
                    @endphp
                        <div class="line-table">
                            <span style="min-width: 293px; max-width: 293px;">{{ $membro->cadastro->nome }} {{ $membro->cadastro->sobrenome }}</span>
                            <span style="min-width: 165px; max-width: 165px;" class="w-prog">{{ round($porcentagemContribuicaoAdegaAtual) }}% <div class="progress"><span style="width: {{ round($porcentagemContribuicaoAdegaAtual) }}%"></span></div></span>
                            <span style="min-width: 165px; max-width: 165px;" class="w-prog">{{ round($porcentagemContribuicaoTotal) }}% <div class="progress green"><span style="width: {{ round($porcentagemContribuicaoTotal) }}%"></span></div></span>
                            <span style="min-width: 182px; max-width: 182px;">R$ {{ number_format($membro->valor_adega_atual,2,",",".") }}</span>
                            <span style="min-width: 154px; max-width: 154px;">R$ {{ number_format($membro->contribuicao_total,2,",",".") }}</span>
                        </div>
                    @endforeach
                   
                </div>
            </div>
        </div>


        @if(count($convitesPendentes))
            <div class="conf-box no-padding top-table box-convites-pendentes">
                <h3>Convites pendentes</h3>

                    <div class="lista-convites" style="margin-left: 25px; padding-bottom: 20px;">
                    @foreach($convitesPendentes as $convite)
                        <div class="convite-item">
                            <img src="{{ $convite->cadastro && $convite->cadastro->thumbnail_principal ? $convite->cadastro->thumbnail_principal : '/img/site/user2-conf.svg' }}" alt="{{ $convite->email }}" class="convite-item-image" style="object-fit: cover;">
                            <div class="conv-text">
                                <strong>{{ $convite->email }}</strong>

                                @if($convite->situacao == 'A')
                                    <span class="confirmado"><img src="/img/site/conf-confirmado.svg" alt="Confirmado">Confirmado</span>
                                @elseif($convite->situacao == 'E')
                                    <span class="enviado"><img src="/img/site/conf-enviado.svg" alt="Convite enviado">{{ $convite->observacao }}</span>
                                @else
                                    <span class="confirmado"><img src="/img/site/conf-confirmado.svg" alt="Convite enviado">Convite enviado</span>
                                @endif
                                
                            </div>
                        </div>
                    @endforeach
                </div> 
            </div>
        @endif

        @foreach($membros as $membro)
            <div class="conf-box no-padding vinho-adega-box membro-box">
                <div class="vinho-adega-item">
                    <div class="vinho-adega-left">
                        <div class="vinho-adega-left-cont">
                            <div class="person-info">
                                <img src="{{ $membro->cadastro->thumbnail_principal ? $membro->cadastro->thumbnail_principal : '/img/site/user-conf.png' }}" class="publish-user-pic" alt="Márcia Oliveira">
                                <div class="texts-post">
                                    <strong>{{ $membro->cadastro->nome }} {{ $membro->cadastro->sobrenome }}</strong>
                                    <span>Membro desde {{ $membro->data_cadastro != null ? strftime('%d de %B de %Y', strtotime($membro->data_cadastro)) : '' }}</span>
                                </div>
                            </div>
                            <div class="bottom-line-membro">
                                <div class="toggle-see-more">
                                    <span class="see-more">Mais Detalhes <img src="/img/site/conf-adega-see-more.svg" alt="Ver mais"></span>
                                    <span class="see-les hidden">Menos Detalhes <img src="/img/site/conf-adega-see-more.svg" alt="Ver menos" style="transform: rotate(180deg)"></span>
                                </div>
                                
                                @if($cadastro->id == $membro->cadastro->id)
                                    <a href="{{ url('/perfil') }}">
                                        <span class="exc-membro">Editar meu perfil</span>
                                    </a>
                                @endif
                                @if($confraria->cadastro_id == $cadastro->id && $membro->cadastro->id != $cadastro->id)
                                    <span class="exc-membro deletar-membro" data-membro="{{ $membro->id }}"><img src="/img/site/conf-excluir-membro.svg" alt="Excluir">Excluir</span>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="vinho-adega-right-cont">
                        <div class="component-subtable">
                            <h3>Resumo do Membro</h3>
                            <div class="subtable-item">
                                <span>Total garrafas</span>
                                <strong>{{ $membro->total_garrafas }}</strong>
                            </div>
                            <div class="subtable-item">
                                <span>Contribuição  adega atual</span>
                                <strong>R$ {{ number_format($membro->valor_adega_atual,2,",",".") }}</strong>
                            </div>

                            <div class="divisor"></div>

                            <div class="subtable-item after-divisor">
                                <span>Contribuição  total</span>
                                <strong class="green">R$ {{ number_format($membro->contribuicao_total,2,",",".") }}</strong>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottom-box-item">
                    <h3>Contribuições do Membro</h3>
                    <div class="component-table">
                        <div class="line-table line-title">
                            <span style="min-width: 302px; max-width: 302px;">Produto</span>
                            <span style="min-width: 111px; max-width: 111px;">Tipo</span>
                            <span style="min-width: 99px; max-width: 99px;">Safra</span>
                            <span style="min-width: 80px; max-width: 80px;">Teor</span>
                            <span style="min-width: 135px; max-width: 135px;">País</span>
                            <span style="min-width: 200px; max-width: 200px;">Região</span>
                        </div>

                        @foreach($membro->produtos as $produto)
                            <div class="line-table">
                                <span style="min-width: 302px; max-width: 302px;">{{ $produto->titulo }} {{ $produto->sub_titulo }}</span>
                                <span style="min-width: 111px; max-width: 111px;">{{ $produto->castas }}</span>
                                <span style="min-width: 99px; max-width: 99px;">{{ $produto->safra }}</span>
                                <span style="min-width: 80px; max-width: 80px;">{{ $produto->teor_alcoolico }}</span>
                                <span style="min-width: 135px; max-width: 135px;">{{ $produto->nome_pais }}</span>
                                <span style="min-width: 200px; max-width: 200px;">{{ $produto->nome_regiao }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endforeach     

    </div>
</div>

<div class="modal-confraria membro-modal adicionar-membro">
    <img src="/img/site/close-modal-conf.svg" class="close-modal" alt="Fechar">
    <h3>Adicionar membro</h3>
    <div class="membro-modal-box">
        <h4>Convidar por e-mail:</h4>
        <div class="input-box">
            <div class="label-box">
                <label for="email">E-mail do seu amigo:</label>
            </div>
            <input class="convite-email" type="email" id="email" placeholder="Digite o e-mail">
        </div>
        <button type="button" class="btn-action btn-conf enviar-convite-email">ENVIAR CONVITE</button>

        <h4>Convidar por link:</h4>
        <div class="input-box">
            <div class="label-box">
                <label for="link">Link compartilhável</label>
            </div>
            <input type="text" id="link" value="https://www.vinumday.com.br/confraria/convite/{{ $codigo }}" readonly>
        </div>
    </div>
</div>
<div class="modal-confraria membro-modal excluir-membro">
    <img src="/img/site/close-modal-conf.svg" class="close-modal" alt="Fechar">
    <h3>Excluir membro</h3>
    <div class="membro-modal-box">
        <h4>Você tem certeza que deseja excluir este membro?</h4>
        
        <div class="btns-excluir">
            <a href="#" class="btn-action excluir-membro-btn">EXCLUIR</a>
            <a href="#" class="btn-action btn-secondary btn-cancel">CANCELAR</a>
        </div>
    </div>
</div>
<div class="modal-confraria-overlay"></div>

<script type="text/javascript">
    $(document).on('ready', function(){
        $(document).on('click', '.toggle-see-more', function(){
            $(this).closest('.vinho-adega-box').find('.bottom-box-item').slideToggle();
            $(this).find('span').toggleClass('hidden');
        });
        $(document).on('click', '.add-membro', function(){
            $('.modal-confraria.adicionar-membro, .modal-confraria-overlay').addClass('active')
        });
        $(document).on('click', '.deletar-membro', function(){
            let membro = $(this).data('membro');
            $('.membro-modal .btns-excluir .excluir-membro-btn').attr('data-membro', membro);
            $('.modal-confraria.excluir-membro, .modal-confraria-overlay').addClass('active')
        });
        $(document).on('click', '.close-modal, .btn-cancel, .modal-confraria-overlay', function(){
            $('.modal-confraria, .modal-confraria-overlay').removeClass('active')
        });

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

        $(document).on('click', '.excluir-membro-btn', function(){
            let membro = $(this).data('membro');

            $.ajax({
                url: "/confraria/deletar-membro",
                type: "post",
                data: {
                    confraria_membro_id: membro, 
                    palavra_chave: 'EXCLUIR'
                },
                success:function(data){
                    if(data.status){
                       $('.modal-confraria, .modal-confraria-overlay').removeClass('active')
                       alertUtil.alertSuccess(data.message);
                       
                       return setTimeout(() => {
                            location.reload();
                       }, 2000);
                    } else{
                        return alertUtil.alertError('Não foi possível excluir este membro no momento.');
                    }
                },
            }); 
        });

        $(document).on('click', '.enviar-convite-email', function(){
            let email = $('.convite-email').val();

            if(email == '' || email == ' '){
                return;
            }

            $.ajax({
                url: "/confraria/membro/enviar-convite",
                type: "post",
                data: {
                    email: email, 
                },
                success:function(data){
                    $('.adicionar-membro, .modal-confraria-overlay').removeClass('active')
                    if(data.status){ 
                       return alertUtil.alertSuccess(data.mensagem);
                    } else{
                        return alertUtil.alertError(data.mensagem);
                    }
                },
            }); 
        });
        

    })
</script>

@endsection