@extends('layouts.website')

@section('content')

    @include('perfil/menu-lateral', ['configMenuLateral' => $configMenuLateral])

    <div class="minha-conta__right">
        <div class="center">
            <div class="vinhos-adega">
                <p class="texto">Segurança</p>
            </div>
        </div>
        <div class="clear"></div>
        <div class="box">
            @if($status == 'R')
                <div class="docs_recusados">
                    <h5 class="doc_recusado_titulo">Seus documentos foram recusados</h5>

                    <ul>
                        @foreach($cadastro_documentos as $doc_cadastro)
                            @if($doc_cadastro->status == 'R' && trim($doc_cadastro->motivo_recusa) != '')
                                <li>
                                    {{ $doc_cadastro->motivo_recusa }}
                                </li>
                            @endif
                        @endforeach
                    </ul>

                    <small>Por favor, envie novamente os seus documentos!</small>
                </div>
            @endif

            @if($status == 'A' || $status == 'V')
                <div style="display: flex; gap: 10px;">
                    <i class="fa fa-clock-o" aria-hidden="true"></i>
                    <h5 style="font-size: 15px">Documentos em análise</h5>
                </div>
                <p>Agora é só aguardar, seus documentos estão atualmente em análise.</p>
                <p>Qualquer dúvida, fique à vontade para entrar em <a href="/contato" style="font-weight: bold" target="_blank">contato</a> com a equipe.</p>
            @endif

            @if($status == 'R' || $status == 'N')
                    <h5 style="font-size: 18px">Upload de documentos</h5>
                    <p>Para desbloquear a sua conta, faça uploads dos documentos abaixo:</p>

                    <div style="margin-top: 15px;" class="list-dados-necessarios">
                        <ol>
                            <li style="margin-bottom: 10px;">Imagem de um comprovante da transação conosco (foto de parte da fatura do cartão de crédito com os valores, a data da compra e últimos dígitos do cartão — não sendo necessário à presença de mais informações)</li>
                            <li>Imagem (registrada via celular) de um documento frente e verso com foto e com o número do CPF do titular da conta no site (identidade, habilitação, etc.)</li>
                        </ol>
                    </div>

                    <div class="list-documents-upload">
                        <div style="margin-top: 10px">
                            <small style="display: block">Você pode enviar no máximo 3 arquivos.</small>
                            <input id="inputFileArquivos" accept="image/*" type="file" name="arquivos_docs" multiple style="display: none">
                            <button id="carregarArquivos" class="btn-orange" style="cursor: pointer"><i class="fa fa-upload" aria-hidden="true"></i> Carregar arquivos</button>
                        </div>

                        <div>
                            <h5 style="font-size: 14px; margin-top: 15px; margin-bottom: 10px; display: none" id="texto-arquivos-enviados">Arquivos enviados:</h5>

                            <div id="fileList">
                                <div class="item-document-upload" id="elementItemUpload" style="display: none;">
                                    <div class="box-documento-item-upload">
                                        <div>
                                            <i class="fa fa-file-o" aria-hidden="true"></i>
                                        </div>
                                        <div>
                                            <h5 class="titulo_documento_upload"></h5>
                                        </div>
                                    </div>
                                    <div>
                                        <button class="btn-remover-documento"><i class="fa fa-times" aria-hidden="true"></i> Remover</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div style="margin-top: 20px; text-align: center">
                        <button id="enviar-solicitacao" class="btn-green" style="height: 35px; display: none">Enviar solicitação</button>
                    </div>
            @endif
        </div>

    </div>

    </div>
    </div>
    </div>

    </section>

    <script>
        let fileList = [];

        $(document).on('click', '#carregarArquivos', function(e) {
            $('#inputFileArquivos').click();
        });

        $(document).on('change', '#inputFileArquivos', function (e) {
            const newFiles = Array.from(this.files);

            const availableSlots = Math.max(0, 3 - fileList.length);
            const filesToAdd = newFiles.slice(0, availableSlots);

            filesToAdd.forEach(file => {
                fileList.push(file);
            });

            renderFileList();
            statusBtnEnviar();
        });

        const renderFileList = () => {
            $('#fileList .item-document-upload:not(#elementItemUpload)').remove();

            $('#texto-arquivos-enviados').toggle(fileList.length > 0);

            fileList.forEach((file, index) => {
                const itemClone = $('#elementItemUpload').clone().removeAttr('id');
                itemClone.css('display', 'flex');

                itemClone.find('.titulo_documento_upload').text(file.name);

                itemClone.find('.btn-remover-documento').on('click', function () {
                    fileList.splice(index, 1);
                    renderFileList();
                    statusBtnEnviar();
                });

                $('#fileList').append(itemClone);
            });
        }

        const statusBtnEnviar = () =>
        {
            if(fileList.length < 2){
                return $('#enviar-solicitacao').hide();
            }

            return $('#enviar-solicitacao').show();
        }


        $(document).on('click', '#enviar-solicitacao', function(e) {
            e.preventDefault();

            if (fileList.length === 0) {
                alert('Por favor, selecione ao menos um arquivo.');
                return;
            }

            const formData = new FormData();
            fileList.forEach((file, index) => {
                formData.append('arquivos_docs[]', file);
            });

            $('.carregando').fadeIn();
            $.ajax({
                url: '/perfil/enviar-solicacao-documentos',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    $('.carregando').fadeOut();

                    if(response.status){
                        return location.reload();
                    }

                    // fileList = []; // Limpa a lista
                    // renderFileList();
                },
                error: function(xhr) {
                    $('.carregando').fadeOut();
                    alert('Ocorreu um problema, tente mais tarde.');
                }
            });
        });
    </script>
@endsection