@extends('layouts.confraria')

@section('content')

<div class="wrapper-internal">
    <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>Pagamento da Entrega</h1>
                        <ul>
                            <li>
                                <a href="/confraria/">Home</a>
                            </li>
                            <li>
                                <a href="/confraria/entrega/home">Entregas</a>
                            </li>
                            <li>
                                <a href="/confraria/entrega/solicitar">Solicitar Entrega</a>
                            </li>
                            <li>
                                <span>Pagamento da Entrega</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        <form id="solicitacao-entrega-form" enctype="multipart/form-data">
        <div class="conf-box no-padding continuation">
            <div class="solicitar-entrega-box">
                <div class="solicitar-left">
                    <h3>Forma de pagamento</h3>

                    <div class="tabs-pagamento">
                        <div class="item-pagamento active" data-item="1">
                            <img src="/img/site/conf-pag-credit.svg" alt="Cartão de Crédito">
                            <span>Cartão de <Br>Crédito</span>
                        </div>
                        <div class="item-pagamento" data-item="2">
                            <img src="/img/site/conf-pag-transf.svg" alt="Transferência Bancária">
                            <span>Transferência Bancária</span>
                        </div>
                        <div class="item-pagamento" data-item="3">
                            <img src="/img/site/conf-pag-pix.svg" alt="PIX">
                            <span>PIX</span>
                        </div>
                    </div>

                    <div class="cont-pagamento">
                        <div class="item-pagamento-tab active" data-item="1">
                            <div class="input-box">
                                <div class="label-box">
                                    <label for="conf-name">Número do cartão de crédito</label>
                                </div>
                                <input type="text" id="cartao" placeholder="0000 0000 0000 0000" name="number">
                            </div>
                            <div class="input-box">
                                <div class="label-box">
                                    <label for="conf-name">Nome do Titular do Cartão</label>
                                </div>
                                <input type="text" placeholder="Nome impresso no cartão" name="name">
                            </div>

                            <div class="half-input">
                                <div class="input-box">
                                    <div class="label-box">
                                        <label for="conf-name">Validade</label>
                                    </div>
                                    <input type="text" id="validade" placeholder="MM/AA" name="expiry">
                                </div>
                                <div class="input-box">
                                    <div class="label-box">
                                        <label for="conf-name">Código de Segurança</label>
                                    </div>
                                    <input type="text" id="cvv" placeholder="CVV" name="cvc">
                                </div>
                            </div>
                        </div>
                        <div class="item-pagamento-tab" data-item="2">
                            <p>
                                Banco Sicredi <strong>(748)</strong><br>
                                Agência: <strong>0101</strong><br>
                                Conta Corrente: <strong>40339-2</strong><br>
                                CNPJ: <strong>17.723.844/0001-63</strong><br>
                                Razão Social: <strong>Vinum Veritas Comércio e Importação Ltda</strong>
                            </p>

                            <div class="list-check">
                                <div class="item">
                                    <input id="tipo-deposito" name="tipo_deposito" checked="checked" value="D" type="radio" disabled>
                                    <label for="tipo-deposito">DEPÓSITO</label>
                                </div>
                                <div class="item">
                                    <input id="tipo-doc" name="tipo_deposito" value="DOC" type="radio" disabled>
                                    <label for="tipo-doc">DOC</label>
                                </div>
                                <div class="item">
                                    <input id="tipo-ted" name="tipo_deposito" value="TED" type="radio" disabled>
                                    <label for="tipo-ted">TED</label>
                                </div>
                            </div>

                            <div class="input-box">
                                <div class="label-box">
                                    <label for="conf-name">Nome Depositante</label>
                                </div>
                                <input type="text" name="nome_depositante" class="default-input" placeholder="Digite o nome do depositante" value="<?php echo ($cadastro) ? $cadastro->nome.' '.$cadastro->sobrenome : ''; ?>" disabled>
                            </div>
                            <div class="input-box">
                                <div class="label-box">
                                    <label for="conf-name">Comprovante*</label>
                                </div>
                                <input type="file" id="fileUpload" class="default-input" placeholder="Selecione um arquivo PDF ou JPEG">
                            </div>
                            <p>*Posso enviar o comprovante depois? Sim, basta acessar sua conta, ir em MEUS PAGAMENTOS, localizar seu pedido e clicar em "Enviar comprovante".</p>
                        </div>
                        <div class="item-pagamento-tab" data-item="3">
                            <input id="tipo-pix" name="tipo_deposito" value="PIX" type="radio" readonly="readonly" class="hidden" disabled>
                            <p><strong>Pague com PIX em qualquer dia e qualquer hora!</strong> <br><br>O pagamento pode ser feito em poucos segundos e é completamente seguro. Você poderá visualizar a chave PIX e enviar o comprovante de pagamento após a confirmação da compra.</p>
                        </div>
                    </div>
                </div>
                <div class="solicitar-right last">
                    <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>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>
                        <div class="subtable-item after-divisor">
                            <span>Total a pagar</span>
                            <strong class="red">R$ {{ number_format($endereco->custo_frete,2,',','.') }}</strong>
                        </div>
                        <a href="javascript:void(0)" class="btn-action btn-conf" id="confirmarEntrega">CONFIRMAR PAGAMENTO</a>
                        <input type="hidden" name="valor_frete" id="valor-frete" value="{{ $endereco->custo_frete }}">
                    </div>
                </div>
            </div>
        </div>
        </form>
    </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">
    $(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')
        });

        $(document).on('click', '.item-pagamento', function(){
            var item = $(this).attr('data-item');
            $('.item-pagamento-tab').removeClass('active');
            $('.item-pagamento-tab[data-item="' + item + '"]').addClass('active');
            $('.item-pagamento').removeClass('active');
            $('.item-pagamento[data-item="' + item + '"]').addClass('active');

            if(item == 3){
                $("input[name=tipo_deposito]").prop('disabled', false);
                $("input[type=radio][value=PIX]").prop("checked",true);
            }else if(item == 2){
                $("input[name=tipo_deposito]").prop('disabled', false);
                $("input[name=nome_depositante]").prop('disabled', false);
                $("input[type=radio][value=D]").prop("checked",true);
            }else{
                $("input[name=tipo_deposito]").prop('disabled', true);
                $("input[name=nome_depositante]").prop('disabled', true);
            }

        });

        $('#validade').mask('99/99');
        $('#cartao').mask('9999 9999 9999 9999');
        $('#cvv').mask('999');

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

            var form = new FormData($('#solicitacao-entrega-form')[0]);
            form.append('fileUpload', $('#fileUpload')[0].files[0]);

            //$('#solicitacao-entrega-form').serialize()

            $.ajax({
                url:'/confraria/entrega/confirmar',
                type:'POST',
                processData: false,
                contentType: false,
                data: form,
                beforeSend:function(){
                    $('.carregando').fadeIn(); //@wesley - Implementar o Loading
                },
                success:function(data){

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

                    if(data.status){
                        alertUtil.alertSuccess(data.message);
                        setTimeout(function(){
                            window.location.href="/confraria/entrega/confirmacao-entrega/" + data.id;
                        },800);
                    }else{
                        alertUtil.alertError(data.message);
                    }
                },
                error:function(data){
                    alertUtil.alertError('Erro ao processar o pedido. Tente novamente mais tarde.');
                }

            });

        });
    })
</script>

@endsection