@php
$titulo = "Cadastrar Atestados";
@endphp
@include('components.head')
<style>
    .divider {
        display: flex;

        &:before,
        &:after {
            content: "";
            flex: 1;
        }
    }

    .gradient {
        align-items: stretch;
        margin: 1em 0;
        height: 2em;
        line-height: 2em;
        color: white;
        background: black;

        &:before {
            background: linear-gradient(to right, white, black);
        }

        &:after {
            background: linear-gradient(to left, white, black);
        }
    }

    .vermelho {
        color: red;
    }
</style>
<div class="container">
    <div class="card shadow mb-5">

        <h6 class="pt-3 pl-3">Cadastrar Atestado</h6>
        <h5 class="pl-3">{{$usuario->colaborador->pessoa->pes_nome_completo}}</h5>
        <div class="card-body">
            <span class="card-text">Preencha os dados abaixo para cadastrar um novo atestado.</span>
            <p class="card-text text-danger">Lembre-se, deverá ser registrado em até 48h após a emissão </p>
            @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
            @endif
            @if (session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
            @endif
        </div>
    </div>


        <h3 class=" ">Dados do Atestado</h3>
        <form id="atestadoForm" action="{{route('perfil.atestados.cadastrarpost')}}" class="form-group" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="">Data de Emissão <span class="vermelho">*</span> </label>
                        <input type="date" name="data_emissao" id="data_emissao" class="form-control"
                            min="{{ \Carbon\Carbon::now()->setTimezone('America/Sao_Paulo')->subDays(2)->format('Y-m-d') }}"
                            max="{{ \Carbon\Carbon::now()->setTimezone('America/Sao_Paulo')->format('Y-m-d') }}" value="{{old('data_emissao')}}" 
                            required>
                    </div>
                        
 
                </div>
                <div class="col-md-4">
                    <label for="dias_afastado">Dias de afastamento: <span class="vermelho">*</span></label>
                    <input type="number" name="dias_afastado" id="dias_afastado" class="form-control" value="{{old('dias_afastado')}}" required>
                </div>
                <div class="col-md-4">
                    <label for="cid">CID:</label>
                    <input type="text" name="cid" id="cid" class="form-control" value="{{old('cid')}}">
                </div>
                <div class="col-md-12">
                    <label for="motivo">Motivo <span class="vermelho">*</span></label>
                    <textarea class="form-control" name="motivo" id="motivo" rows='4' required>{{old('motivo')}}</textarea>
                </div>
                
            </div>
            <hr style="border: 0capsule; height: 2px;  ">
            <h3 class=" " >Dados do Médico <span class="vermelho">*</span></h3>
            <div class="row mt-3">
                
                <div class="col-md-8">
                    <label for="medico_nome">Nome do Médico <span class="vermelho">*</span></label>
                    <input type="text" class="form-control" name="medico_nome" id="medico_nome" value="{{old('medico_nome')}}" required>
                </div>
                <div class="col-md-3">
                    <label for="crm">CRM <span class="vermelho">*</span></label>
                    <input type="text" class="form-control" name="crm" id="crm" required pattern="\d*" inputmode="numeric" oninput="this.value = this.value.replace(/\D/g, '')" value="{{old('crm')}}">
                </div>
                <div class="col-md-1">
                    <label for="uf">UF <span class="vermelho">*</span></label>
                     
                    <select class="form-control custom-select" name="uf" id="uf" required>
                        <option value="">...</option>
                        <option value="AC">AC</option>
                        <option value="AL">AL</option>
                        <option value="AP">AP</option>
                        <option value="AM">AM</option>
                        <option value="BA">BA</option>
                        <option value="CE">CE</option>
                        <option value="DF">DF</option>
                        <option value="ES">ES</option>
                        <option value="GO">GO</option>
                        <option value="MA">MA</option>
                        <option value="MT">MT</option>
                        <option value="MS">MS</option>
                        <option value="MG">MG</option>
                        <option value="PA">PA</option>
                        <option value="PB">PB</option>
                        <option value="PR">PR</option>
                        <option value="PE">PE</option>
                        <option value="PI">PI</option>
                        <option value="RJ">RJ</option>
                        <option value="RN">RN</option>
                        <option value="RS">RS</option>
                        <option value="RO">RO</option>
                        <option value="RR">RR</option>
                        <option value="SC">SC</option>
                        <option value="SP">SP</option>
                        <option value="SE">SE</option>
                        <option value="TO">TO</option>
                        
                    </select>
                </div>
            </div>
            <hr style="border: 0capsule; height: 2px;  ">
            <div class="row mt-3">
                <div class="col-md-6">
                    <label for="">Upload de documento:</label>
                    <div class="form-group">
                        <label for="documento" class="btn btn-primary" >Escolher arquivo</label>
                        <input type="file" name="documento" id="documento" class="btn btn-primary" required onchange="previewFile()" oninvalid="this.setCustomValidity('Por favor, selecione um arquivo.')" oninput="this.setCustomValidity('')">
                        <p id="fileInfo"></p>
                    </div>
                    <img id="fotoMiniatura" src="" alt="Pré-visualização da imagem" style="display: none; width: 100%; max-width: 320px;">
                    <iframe id="pdfViewer" style="display: none; width: 100%; height: 400px;" frameborder="0"></iframe>
                    <iframe id="docxViewer" style="display: none; width: 100%; height: 400px;" frameborder="0"></iframe>
                    {{-- <input type="text" name="nome" id="nome" class="form-control" value='{{}}' hidden> --}}
                </div>
                
                
                
            </div>
            <hr style="border: 0capsule; height: 2px;  ">
            <div class="row mt-3">
                
                <h5>Termos de Aceite</h5>
                <div>
                    <p>
                        Ao cadastrar um atestado, você declara que as informações fornecidas são verdadeiras e que o documento anexado é autêntico. O envio de informações falsas pode resultar em sanções administrativas e legais.
                    </p>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="aceiteTermos" required>
                        <label class="form-check-label" for="aceiteTermos">
                            Li e aceito os termos acima.
                        </label>
                    </div>
                </div>
                
                <div class="col-lg-12 d-flex justify-content-center mb-5">
                    <button type="button" class='btn btn-danger mr-5 mt-4' onclick="window.location.href='{{ route('perfil.inicio') }}'">Voltar</button>
                 
                    <button type="submit" class='btn btn-success mt-4' id="btnEnviar">
                        Cadastrar Atestado
                    </button>
                    {{-- <button type="submit" class='btn btn-success mt-4'  >
                        Cadastrar Atestado
                    </button> --}}
 
                                   
                                </div>
                                
 
                                    {{-- <button type="button" class="btn btn-success" id="confirmarCadastro" disabled>Cadastrar Atestado</button> --}}

                </div>
            </div>
        </form>
    </div>
    {{-- <div class="modal fade" id="modalAguarde" tabindex="-1" role="dialog"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content align-items-center text-center p-4">
      <strong>Processando os dados...</strong>
      <strong class="text-danger">Não atualize ou feche a página</strong>
      <div class="spinner-border text-primary mt-3" role="status"></div>
    </div>
    </div>
    </div> --}}


<script>
    // Garante que o script rode após o carregamento completo da página
    $(document).ready(function() {
        
        // Adiciona um listener para o evento de 'submit' do formulário
        $('#atestadoForm').on('submit', function(e) {
            
            // Verifica se o formulário é válido de acordo com as regras do HTML5 (ex: required)
            if (this.checkValidity()) {
                // Se for válido:
                
                // 1. Mostra a modal de "Aguarde"
                $('#modalAguarde').modal('show');
                
                // 2. Desabilita o botão de submit para evitar cliques duplos
                //    Usamos o ID #btnEnviar que você já definiu no botão
                $('#btnEnviar').prop('disabled', true);
                
                // 3. Muda o texto do botão para dar um feedback visual (opcional)
                $('#btnEnviar').html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Enviando...');
                
            }
            $('#modalAguarde').on('hide.bs.modal', function (e) {
            // Se a modal foi disparada para esconder, previna o comportamento padrão.
            // Isso significa que a modal só pode ser fechada via jQuery .modal('hide') explicitamente.
            e.preventDefault();
            });

            // Você também pode querer prevenir o clique no backdrop diretamente se houver algum problema
            // com o data-backdrop="static"
            $('#modalAguarde').on('click', '.modal-backdrop', function(e) {
                e.stopPropagation(); // Impede a propagação do clique para que não acione o fechamento
            });
            // O formulário continuará o processo de submit normalmente após este script.
            // O navegador irá para a próxima página, e a modal desaparecerá junto.
        });
        
    });
</script>
<div class="modal fade" id="modalAguarde" data-backdrop="static" data-keyboard="false"   tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content text-center">
            <div class="modal-body p-4">
                <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
                    <span class="sr-only">Carregando...</span>
                </div>
                <h5 class="mt-3 mb-0">Processando...</h5>
                <p class="text-muted">Por favor, aguarde.</p>
            </div>
        </div>
    </div>
</div>

{{-- <div class="modal fade" id="modalAguarde" tabindex="-1" role="dialog" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" >
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content align-items-center text-center p-4">
            <strong>Processando sua despesa...</strong>
            <strong class="text-danger">Não atualize ou recarregue a página para que não perca seus dados</strong>
            <div class="spinner-border text-primary mt-3" role="status"></div>
        </div>
    </div>
</div> --}}
{{-- <script>
    document.getElementById('atestadoForm').addEventListener('submit', function(e) {
        $('#modalAguarde').modal('show'); // requer jQuery + Bootstrap
        this.querySelector('button[type="submit"]').disabled = true;
        });
    </script> --}}
    
    {{-- <script>
        function showModalAguarde() {
            $('#modalAguarde').modal({
                backdrop: 'static',
                keyboard: false
                });
                }
            </script> --}}
            
            {{-- <script>
                
                document.getElementById('termosModal').addEventListener('submit', function(e) {
                    // Fecha a modal de cadastro, se estiver aberta
                    $('#termosModal').modal('hide');
                    
                    // Aguarda 300ms para garantir que a modal foi fechada, então mostra o loading
                    setTimeout(() => {
                        $('#modalAguarde').modal('show');
                        }, 300);
                        });
                    </script> --}}
                    
                    <script>
                        function previewFile() {
                            const fileInput = document.getElementById('documento');
                            const file = fileInput.files[0];
                            const reader = new FileReader();
                            const fileInfo = document.getElementById('fileInfo');
                            const img = document.getElementById('fotoMiniatura');
                            const pdfViewer = document.getElementById('pdfViewer');
                            const docxViewer = document.getElementById('docxViewer');
                            
                            img.style.display = 'none';
                            pdfViewer.style.display = 'none';
                            docxViewer.style.display = 'none';
                            fileInfo.textContent = '';
                            
                            if (!file) return;
                            
                            const allowedExtensions = [
                                'image/jpeg', 'image/png', 'image/jpg',
                                'application/pdf',
                                'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
                                'application/msword'
                            ];
                            const maxSize = 7 * 1024 * 1024; // 7 MB
                            
                            if (file.size > maxSize || !allowedExtensions.includes(file.type)) {
                                fileInfo.style.color = 'red';
                                fileInfo.textContent = 'Arquivo não suportado.';
                                return;
                            } else {
                                fileInfo.style.color = 'green';
                                fileInfo.textContent = `Nome do arquivo: ${file.name}, Tamanho: ${(file.size / 1024).toFixed(2)} KB`;
                            }
                            
                            if (file.type.startsWith('image/')) {
                                reader.onloadend = function () {
                                    img.src = reader.result;
                                    img.style.display = 'block';
                                };
                                reader.readAsDataURL(file);
                            } else if (file.type === "application/pdf") {
                                reader.onloadend = function () {
                                    pdfViewer.src = reader.result;
                                    pdfViewer.style.display = 'block';
                                };
                                reader.readAsDataURL(file);
                            } else if (
                                file.type === "application/vnd.openxmlformats-officedocument.wordprocessingml.document" ||
                                file.type === "application/msword"
                            ) {
                                // Para docx/doc, use o Office Online Viewer
                                // Precisa fazer upload para o servidor e obter uma URL pública, aqui mostramos como seria com um blob local
                                const url = URL.createObjectURL(file);
                                docxViewer.src = `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(window.location.origin + url)}`;
                                docxViewer.style.display = 'block';
                            }
                        }
                        </script>
@include('components.footer')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Bootstrap JS (versão compatível com seu projeto) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>