@extends('front')
@section('content')
<style>
    header, footer, .header, .footer, .back-to-top, .xb-cursor, .xb-cursor-wrapper, .addvertisment-section { 
        display: none !important; 
    }
    body { 
        background-color: #ffffff;
        margin: 0; padding: 0; overflow-x: hidden;
    }
    /* Limpar vestigios de modals antigos caso falhe o js */
    .modal-backdrop { display: none !important; opacity:0 !important;}

    /* Novo Layout Padrão de Página (Split Screen) */
    .auth-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 50%;
        height: 100vh;
        background: linear-gradient(135deg, #007BFF, #0056b3);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 3rem;
        color: white;
        z-index: 10;
        text-align: center;
    }
    .auth-section {
        min-height: 100vh;
        width: 50%;
        margin-left: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ffffff;
    }
    @media (max-width: 991px) {
        .auth-sidebar { display: none; }
        .auth-section { width: 100%; margin-left: 0; }
    }
    
    .animate-bounce-slow {
        animation: bounce-slow 3s infinite ease-in-out;
    }
    @keyframes bounce-slow {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
</style>

<div class="auth-sidebar">
    <div class="mb-4">
        @if($dynamicLogo)
        <img src="{{ $dynamicLogo }}" alt="Logo" class="img-fluid mb-4 animate-bounce-slow" style="max-height: 120px;">
        @endif
        <h1 class="display-4 fw-bold text-white mb-3">E-Concerto</h1>
        <p class="fs-18 opacity-75 text-white">Bem-vindo ao centro nevrálgico do seu negócio. Aceda ao seu painel profissional.</p>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        // Inicializar Views Planos (Esconde todos, mostra apenas login)
        $('.auth-section').hide();
        $('#login-modal').fadeIn();
        
        // Substituir o comportamento originário do Bootstrap (data-bs-toggle="modal")
        // Como o JS base não vai fechar janelas por nós, escutamos os cliques nos links
        
        $(document).on('click', '[data-bs-target="#register-modal"]', function(e) {
            e.preventDefault();
            $('.auth-section').hide();
            $('#register-modal').fadeIn();
        });

        $(document).on('click', '[data-bs-target="#login-modal"]', function(e) {
            e.preventDefault();
            $('.auth-section').hide();
            $('#login-modal').fadeIn();
        });

        $(document).on('click', '[data-bs-target="#forgot-modal"]', function(e) {
            e.preventDefault();
            $('.auth-section').hide();
            $('#forgot-modal').fadeIn();
        });
        
        // Em caso de cliques no fechar do "Success OTP / Failed OTP"
        $('.auth-section .btn-primary').on('click', function(e) {
             if($(this).text().trim() === 'Close' || $(this).text().trim() === 'Fechar') {
                 // Forçar o retorno ao login se era um ecrã de mensagem
                 $('.auth-section').hide();
                 $('#login-modal').fadeIn();
             }
        });
    });
</script>
@endpush