@extends('layouts.confraria')

@section('content')

<div class="wrapper-internal">
    <div class="container-conf">
        <div class="conf-box no-padding continued">
            <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>{{ $pedidoEntrega->status->nome }}</h1>
                        <ul>
                            <li>
                                <a href="/confraria/home">Home</a>
                            </li>
                            <li>
                                <a href="/confraria/entrega/home">Entregas</a>
                            </li>
                            <li>
                                <span>{!! strftime('%A, %d de %B de %Y às %H:%M', strtotime($pedidoEntrega->data_solicitacao)) !!}</span>
                            </li>
                        </ul>
                    </div>

                    <div class="list-kpis">
                        <div class="kpi-item">
                            <span>Qtde. Garr.</span>
                            <strong>{{ $pedidoEntrega->qtd_garrafas }}</strong>
                        </div>
                        <div class="kpi-item">
                            <span>Valor total</span>
                            <strong>R$ {{ number_format($pedidoEntrega->adega->valor_total , 2,",",".") }}</strong>
                        </div>
                        <div class="kpi-item green">
                            <span>Valor economizado</span>
                            <strong>R$ {{ number_format($pedidoEntrega->totalEconomizado, 2,",",".") }}</strong>
                        </div>
                        <div class="kpi-item">
                            <span>Valor pago</span>
                            <strong>R$ {{  number_format($pedidoEntrega->adega->valor_total, 2,",",".") }}</strong>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Passar para o arquivo de css depois -->
        <style>
            .detalhe-entrega-comprovante{
                background: #fff;
                width: 100%;
                margin-top: 12px;
                margin-bottom: 40px;
            }
            .detalhe-entrega-comprovante h3{
                padding: 0px !important;
            }
            .detalhe-entrega-comprovante a{
                font-size: 14px;
                text-decoration: underline;
            }
            .comprovante-status{
                /*padding-left: 32px;*/
            }
            .comprovante-status-text{
                font-size: 14px;
            }
            .comprovante-enviado{
                color: #45AF22;
            }
            .comprovante-nao-enviado{
                color: #d42f2f;
            }
            .comprovante-pendente{
                color: #e0583f;
            }
            /*
            .enviar-comprovante-main{
                margin-top: 25px;
            }
            */
            .btn-upload-comprovante{
                /*margin-top: 12px;*/
                padding: 6px 12px;
                border-radius: 4px;
                background: #d8d8d8;
                border: 1px solid transparent;
                color: #3a3a3a;
                cursor: pointer;
            }
            .btn-upload-comprovante:hover{
                background: #b3b3b3;
            }
            .input-enviar-comprovante{
                display: none;
            }
        </style>
        
        <div class="conf-box no-padding continuation {{ $pedidoEntrega->status->id == 6 ? 'entregue' : '' }}"> <!-- ADICIONAR CLASSE "entregue" PARA ENTREGAS FINALIZADAS -->
            <div class="detalhe-entrega-box">
                <div class="detalhe-entrega-left">
                    <span class="status-entrega">
                        <img src="/img/site/entraga-status-red.svg" class="red" alt="Em transporte">
                        @if($pedidoEntrega->status->id == 6)
                            <img src="/img/site/entraga-status-green.svg" class="green" alt="Em transporte">
                        @endif
                       
                        {!! strip_tags($frase_observacao) !!}
                    </span>
                    @if(isset($pedidoEntrega->transportadora))
                        <span class="transportadora-entrega">Transportadora: <strong>{{ $pedidoEntrega->transportadora->nome }}</strong></span>
                    @endif
                    
                    @if(isset($pedidoEntrega->endereco))
                        <span class="endereco-entrega"><strong>Endereço de destino: </strong> <?php echo trim($pedidoEntrega->endereco->logradouro); ?>, {{ $pedidoEntrega->endereco->numero }}<?php echo $pedidoEntrega->endereco->complemento? ', '.$pedidoEntrega->endereco->complemento : ''; ?>, B. {{ $pedidoEntrega->endereco->bairro }}, CEP {{ $pedidoEntrega->endereco->cep }}, <br>{{ $pedidoEntrega->endereco->cidade->nome }} - {{ $pedidoEntrega->endereco->estado->sigla }}</span>
                        @if(!empty($pedidoEntrega->link_rastreamento))
                        <a href="{{ $pedidoEntrega->link_rastreamento }}" target="_blank" class="btn-action">Rastrear Entrega</a>
                        @endif
                    @endif

                    @if($pedidoEntrega->id_pedido_venda_frete)
                        <div class="detalhe-entrega-bottom detalhe-entrega-comprovante">
                            <h3>Comprovante de pagamento</h3>
                            
                            <div class="comprovante-status">
                                @if($pedidoEntrega->pedido_venda->comprovante)
                                    <div class="comprovante-status">
                                        <h4 class="comprovante-status-text" style="margin-bottom: 14px;">Status: <strong class="comprovante-enviado">Comprovante enviado</strong></h4>

                                        @php
                                            $comprovanteUrl = config('filesystems.path') . "/pedido-venda/comprovante/{$pedidoEntrega->pedido_venda->comprovante}";
                                        @endphp
                                        <a href="{{ url($comprovanteUrl) }}" target="_blank">Visualizar comprovante</a>
                                    </div>
                                @else
                                    <h4 class="comprovante-status-text">Status: <strong class="comprovante-pendente">Pendente</strong></h4>

                                    <div class="enviar-comprovante-main">
                                        <input accept="image/*" type="file" class="input-enviar-comprovante"  /> <br>
                                        <button type="button" class="btn-upload-comprovante">Enviar comprovante</button>
                                    </div>
                                @endif
                            </div>
                        </div>
                    @endif

                    <a href="{{ url('/contato') }}" target="_blanks" class="suporte-entrega"><img src="/img/site/suporte-conf.svg" alt="Solicitar Suporte">Solicitar Suporte</a>
                </div>
                <div class="detalhe-entrega-right">
                    @foreach($pedidoEntrega['historico'] as $historico)
                        <div class="status-entrega-item">
                            <strong>{{ $historico->status->nome }}<span> {{ date('d/m/Y', strtotime($historico->data)) }} - {{ date('H:i', strtotime($historico->data)) }}</span></strong>
                            <p>{{ strip_tags($historico->observacao) }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
            
            <div class="detalhe-entrega-bottom">
                <h3>Detalhes do Pedido</h3>

                <div class="scrollable-box">
                    <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($pedidoEntrega->produtos as $produto)
                        <div class="line-table">
                            <span style="min-width: 302px; max-width: 302px;">{{ $produto->nome }}</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->pais_nome }}</span>
                            <span style="min-width: 200px; max-width: 200px;">{{ $produto->produto_regiao_nome }}</span>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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

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

            <div class="subtable-item after-divisor">
                <span>Valor pago</span>
                <strong class="red">R$ 0,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', '.btn-upload-comprovante', function(){
            $('.input-enviar-comprovante').trigger('click');
        });

        $(document).on('change', '.input-enviar-comprovante', function (event){
            let file = $(this)[0].files[0];
            let formData = new FormData();
            formData.append('fileUpload', file);
            formData.append('pagamento', "{{ $pedidoEntrega->pedido_venda->id }}");
            formData.append('confraria', true);
            $('.carregando').fadeIn();
            $.ajax({
                url: "/perfil/enviar-comprovante",
                type: "post",
                data: formData,
                contentType: false,
                processData: false,
                success:function(data){ 
                    $('.carregando').fadeOut();  
                    console.log(data); 
                    if(data.status){
                        $('.btn-upload-comprovante').hide();
                        $('.comprovante-status-text strong').removeClass('comprovante-pendente').addClass('comprovante-enviado').text('Comprovante enviado');
                        alertUtil.alertSuccess('Comprovante enviado com sucesso!');
                    } else{
                        alertUtil.alertError(data.message);
                    }
                },
            }); 
        });
    });
</script>

@endsection