@extends('layouts.confraria')

@section('content')

<div class="wrapper-internal fixed-btns-wrapper">
    <div class="container-conf">
        <div class="conf-box no-padding continued no-kpi">
            <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>Adicionar Endereço</h1>
                        <ul>
                            <li>
                                <a href="/confraria/">Home</a>
                            </li>
                            <li>
                                <a href="/confraria/entrega/home">Entregas</a>
                            </li>
                            <li>
                                <a href="/confraria/entrega/endereco">Endereços</a>
                            </li>
                            <li>
                                <span>Adicionar Endereço</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="conf-box no-padding continuation">
            <div class="solicitar-entrega-box">
                <div class="solicitar-left">
                    <form action="#" class="add-endereco-form" id="form-novo-endereco">
                        <div class="half-input left">
                            <div class="input-box">
                                <div class="label-box">
                                    <label for="conf-name">CEP</label>
                                </div>
                                <input type="text" id="cep" name="cep" placeholder="00000-000">
                            </div>
                            <!--<a href="#" class="nao-sei-cep">Não sei meu CEP</a>-->
                        </div>
                        <div class="half-input">
                            <div class="input-box">
                                <div class="label-box">
                                    <label for="estado">Estado</label>
                                </div>
                                <select name="estado_id" id="estado">
                                    <option value="" selected disabled>Selecione o estado</option>
                                </select>
                            </div>
                            <div class="input-box">
                                <div class="label-box">
                                    <label for="cidade">Cidade</label>
                                </div>
                                <select name="cidade_id" id="cidade">
                                    <option value="" selected disabled></option>
                                </select>
                            </div>
                        </div>
                        <div class="half-input">
                            <div class="input-box">
                                <div class="label-box">
                                    <label for="bairro">Bairro</label>
                                </div>
                                <input type="text" id="bairro" name="bairro" placeholder="Ex: Bairro Exemplo">
                            </div>
                            <div class="input-box">
                                <div class="label-box">
                                    <label for="logradouro">Logradouro</label>
                                </div>
                                <input type="text" id="logradouro" name="logradouro" placeholder="Ex: Rua Exemplo">
                            </div>
                        </div>
                        <div class="half-input">
                            <div class="input-box">
                                <div class="label-box">
                                    <label for="numero">Número</label>
                                </div>
                                <input type="number" id="numero" name="numero" placeholder="Ex: 999">
                            </div>
                            <div class="input-box">
                                <div class="label-box">
                                    <label for="complemento">Complemento (opcional)</label>
                                </div>
                                <input type="text" id="complemento" name="complemento" placeholder="Ex: Próximo ao shopping">
                            </div>
                        </div>

                        <div class="input-box">
                            <div class="label-box">
                                <label for="nome">Nome local</label>
                            </div>
                            <input type="text" id="nome" name="nome" placeholder="Ex: Residência, Trabalho, Apartamento...">
                        </div>
                    </form>
                </div>
                <div class="solicitar-right">
                    <h3>Resumo</h3>

                    <div class="component-subtable">
                        <div class="subtable-item">
                            <span>Qtde. Garrafas</span>
                            <strong>{{ $informacoesBasicasAdega['quantidadeVinhosAdega'] }}</strong>
                        </div>
                        <div class="subtable-item">
                            <span>Valor total</span>
                            <strong>R$ {{ number_format( ($informacoesBasicasAdega['valorTotal']),2,',','.') }}</strong>
                        </div>
                        <div class="subtable-item">
                            <span>Valor economizado</span>
                            <strong class="green">R$ {{ number_format($informacoesBasicasAdega['valorEconomizado'],2,',','.') }}</strong>
                        </div>
                        <div class="subtable-item">
                            <span>Frete</span>
                            @if($endereco->custo_frete > 0)
                            <strong class="red">R$ {{ number_format($endereco->custo_frete,2,',','.') }}</strong>
                            @else
                            <strong class="green">Grátis</strong>
                            @endif
                        </div>
                        <!--<div class="subtable-item">
                            <span>Rótulos Secretos</span>
                            <strong>R$ 12,50</strong>
                        </div>-->

                        @if($endereco->custo_frete > 0)
                        <?php $restante_frete = $endereco->valor_final_frete - $informacoesBasicasAdega['valorTotal']; ?>
                        <span class="frete-gratis-entrega">Faltam <strong>R$ {{ number_format($restante_frete,2,',','.') }}</strong> para frete grátis</span>
                        @endif

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

                        <div class="subtable-item after-divisor">
                            <span>Valor pago</span>
                            <strong>R$ <?php echo number_format( ($informacoesBasicasAdega['valorTotal']),2,',','.'); ?></strong>
                        </div>
                        @if($endereco->custo_frete > 0)
                        <div class="subtable-item after-divisor">
                            <span>Total a pagar</span>
                            <strong class="red">R$ {{ number_format($endereco->custo_frete,2,',','.') }}</strong>
                        </div>
                        @else
                        <div class="subtable-item after-divisor">
                            <span>Total a pagar</span>
                            <strong class="green">R$ 0,00</strong>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="fixed-btns">
    <div class="container-conf">
        <a href="javascript:void(0)" class="btn-action" id="btn-salvar-endereco">Salvar endereço</a>
        <a href="/confraria/entrega/solicitar" class="btn-action btn-secondary">Cancelar</a>
    </div>
</div>

<div class="modal-confraria">
    <img src="/img/site/close-modal-conf.svg" class="close-modal" alt="Fechar">
    <h3>Pedido #xxxx</h3>
    <div class="box-modal-subtable">
        <div class="component-subtable">
            <div class="subtable-item">
                <span>Pedido</span>
                <strong class="underlined open-pedido" pedido-id="7238452">#7238452</strong>
            </div>
            <div class="subtable-item">
                <span>Qtde. Garrafas</span>
                <strong>4</strong>
            </div>
            <div class="subtable-item">
                <span>Valor total</span>
                <strong>R$ 850,00</strong>
            </div>
            <div class="subtable-item">
                <span>Valor economizado</span>
                <strong>R$ 100,00</strong>
            </div>

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

            <div class="subtable-item after-divisor">
                <span>Valor pago</span>
                <strong class="red">R$ 750,00</strong>
            </div>
        </div>
    </div>
    <div class="box-table-modal">
        <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>
            <?php for($i = 0; $i <= 5; $i++){ ?>
                <div class="line-table">
                    <span style="min-width: 302px; max-width: 302px;">Lorem ipsum dolor sit amet</span>
                    <span style="min-width: 111px; max-width: 111px;">Tinto</span>
                    <span style="min-width: 99px; max-width: 99px;">2012</span>
                    <span style="min-width: 80px; max-width: 80px;">5%</span>
                    <span style="min-width: 135px; max-width: 135px;">Portugal</span>
                    <span style="min-width: 200px; max-width: 200px;">Las Montanhas</span>
                </div>
            <?php } ?>
        </div>
    </div>
</div>
<div class="modal-confraria-overlay"></div>

<script type="text/javascript">

    function atualizarCidadesEstado(uf = null, cidade = null){

        flag = false;

        var pais_id = 1; // Brasil
        $('#pais option').prop('selected', false);
        $('#pais option[value="'+pais_id+'"]').prop('selected', true);
        $('#pais').trigger('change');
          
        $.ajax({
            url:'/estado/buscar-estados-pais',
            type:'POST',
            data:{
                pais_id: pais_id
            },
            success:function(data){
                $('[name="estado_id"]').html('');
                $.each(data, function(key , obj){
                     var selected = (obj.id == estado_id) ? 'selected' : '';
                     $('[name="estado_id"]').append('<option data-uf="'+obj.sigla+'" '+selected+' value="'+obj.id+'">'+obj.nome+'</option>');
                });
                
                if(uf){
                     $('[name="estado_id"] option').prop('selected', false);
                     $('[name="estado_id"] option[data-uf="'+uf+'"]').prop('selected', true);
                     $('[name="estado_id"]').trigger('change');
                }

                var estado_id = $('[name="estado_id"] option:selected').val();
                $.ajax({
                     url: "/cidade/buscar-cidades-estado",
                     type: "post",
                     data: {
                          estado_id:estado_id, 
                     },
                     success:function(data){
                          $('[name="cidade_id"]').html('');
                          $.each(data,function(key , data){
                               var selectedCidade = (cidade && cidade == data.nome) ? 'selected' : '';
                               $('[name="cidade_id"]').append('<option '+selectedCidade+' value="'+data.id+'">'+data.nome+'</option>')
                          });

                          flag = true;
                     },
                }); 
            }
        });
    }

    $(document).on('ready', function(){

        $(document).on('click', '.open-pedido', function(){
            $('.modal-confraria, .modal-confraria-overlay').toggleClass('active')
        });
        $(document).on('click', '.close-modal, .modal-confraria-overlay', function(){
            $('.modal-confraria, .modal-confraria-overlay').toggleClass('active')
        });

        $('#cep').mask('99999-999');

        $('#cep').blur(function(){
           var cep = $(this).val().replace('-', '').replace('.', '');
           var verify = $.trim(cep);

           if(verify){
                $.ajax({
                     url: "/admin/getcep",
                     dataType: 'json',
                     type: 'POST',
                     data: {
                          'cep': verify,
                          '_token': $('[name="_token"]').val()
                     },
                     success: function(resultadoCEP) {
                          if (resultadoCEP.status) {
                               $('#bairro').val(unescape(resultadoCEP.bairro));
                               $('#logradouro').val(unescape(resultadoCEP.logradouro));
                               $('#complemento').val(unescape(resultadoCEP.complemento));

                               atualizarCidadesEstado(resultadoCEP.uf, resultadoCEP.cidade);

                               $('#numero').focus();
                          }
                     },
                     error: function(xhr, ajaxOptions, thrownError) {
                          //alertUtil.alertError(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                     }
                });

           }else{
                alertUtil.alertWarning('Você deve preencher o campo CEP.');
           }


      });

        $(document).on('click', '#btn-salvar-endereco', function(){

            var form = $('#form-novo-endereco').serialize();

            $.ajax({
                headers: {
                     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url:'/confraria/entrega/endereco-salvar',
                type:'POST',
                data: form,
                beforeSend:function(){
                     $('.carregando').fadeIn();
                },
                success:function(data){

                     $('.carregando').fadeOut();

                     if(data.status){
                          
                          alertUtil.alertSuccess(data.message);

                          setTimeout(function() {
                            window.location.href = '{{ url('/confraria/entrega/solicitar') }}';
                          }, 2000);
                          
                     }else{
                          alertUtil.alertError(data.message);
                     }
                }
           });

        });

    })
</script>

@endsection