{# resources/views/layout/client.twig #}
<!DOCTYPE html>
<html lang="{{ current_locale | slice(0, 2) | default('pt') }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block page_title_block %}{{ __('page_title.client_area') }}{% endblock %} - {{ config_app.get('site_name') }}</title>
    
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
    
    <style>
        body { 
            font-family: 'Montserrat', sans-serif; 
            background-color: #f8fafc; /* slate-50 */
        }
    </style>
    {% block stylesheets %}{% endblock %}
</head>
<body class="text-slate-700">
    {# Cabeçalho da Área do Cliente #}
    <header class="bg-gradient-to-r from-blue-900 to-indigo-800 text-white shadow-lg sticky top-0 z-40">
        <div class="container mx-auto px-4 sm:px-6 py-4">
            <div class="flex justify-between items-center">
                <a href="{{ BASE_URL }}{{ routeParser is defined ? routeParser.urlFor('client.dashboard') : '#' }}" class="flex items-center">
                    {% if config_app.get('site_logo_path') and config_app.get('site_logo_path') != 'assets/img/logo_padrao.png' %}
                        <img src="{{ BASE_URL }}/uploads/{{ config_app.get('site_logo_path') }}" alt="{{ config_app.get('site_name') }} Logo" class="h-10 mr-3">
                    {% else %}
                        <div class="text-2xl font-bold mr-2"><i class="fas fa-balance-scale"></i></div>
                    {% endif %}
                    <div>
                        <h1 class="text-xl font-bold">{{ config_app.get('site_name') }}</h1>
                        <p class="text-sm text-blue-200">{{ __('page_title.client_area') }}</p>
                    </div>
                </a>
                
                {% if session.client_id %}
                <div class="flex items-center">
                    <nav class="hidden md:flex items-center space-x-4 lg:space-x-6 mr-4">
                        <a href="{{ BASE_URL }}{{ routeParser is defined ? routeParser.urlFor('client.dashboard') : '#' }}" class="px-2 py-1 rounded hover:bg-blue-700 transition {% if current_page == 'client_dashboard' %}bg-blue-700 font-semibold{% endif %}">{{ __('client_nav.dashboard') }}</a>
                        <a href="{{ BASE_URL }}{{ routeParser is defined ? routeParser.urlFor('client.processes.index') : '#' }}" class="px-2 py-1 rounded hover:bg-blue-700 transition {% if current_page == 'client_processes' %}bg-blue-700 font-semibold{% endif %}">{{ __('client_nav.processes') }}</a>
                        <a href="{{ BASE_URL }}{{ routeParser is defined ? routeParser.urlFor('client.documents.index') : '#' }}" class="px-2 py-1 rounded hover:bg-blue-700 transition {% if current_page == 'client_documents' %}bg-blue-700 font-semibold{% endif %}">{{ __('client_nav.documents') }}</a>
                        <a href="{{ BASE_URL }}{{ routeParser is defined ? routeParser.urlFor('client.appointments.index') : '#' }}" class="px-2 py-1 rounded hover:bg-blue-700 transition {% if current_page == 'client_appointments' %}bg-blue-700 font-semibold{% endif %}">{{ __('client_nav.appointments') }}</a>
                    </nav>

                    <div class="hidden md:flex items-center">
                        <div class="text-right mr-3">
                            <p class="font-medium text-sm">{{ session.client_name }}</p>
                            <a href="{{ BASE_URL }}{{ routeParser is defined ? routeParser.urlFor('client.profile.show') : '#' }}" class="text-xs text-blue-200 hover:underline">{{ __('client_nav.my_profile') }}</a>
                        </div>
                        <div class="h-10 w-10 rounded-full bg-blue-700 flex items-center justify-center text-base">
                            <span class="font-bold">{{ session.client_name | first | upper }}</span>
                        </div>
                        <a href="{{ BASE_URL }}{{ routeParser is defined ? routeParser.urlFor('client.auth.logout') : '#' }}" class="ml-4 text-blue-200 hover:text-white" title="{{ __('sidebar.logout') }}">
                            <i class="fas fa-sign-out-alt text-lg"></i>
                        </a>
                        <div class="ml-4">
                            {% include 'partials/language_switcher.twig' %}
                        </div>
                    </div>
                    {# Botão de menu para mobile #}
                    <div class="md:hidden">
                        <button id="mobile-menu-button" class="text-white focus:outline-none">
                            <i class="fas fa-bars text-xl"></i>
                        </button>
                    </div>
                </div>
                {% endif %}
            </div>
            {# Menu mobile (escondido por padrão) #}
             {% if session.client_id %}
            <div id="mobile-menu" class="md:hidden hidden mt-4">
                <a href="{{ BASE_URL }}{{ routeParser is defined ? routeParser.urlFor('client.dashboard') : '#' }}" class="block py-2 px-4 text-sm hover:bg-blue-700 rounded">{{ __('client_nav.dashboard') }}</a>
                <a href="{{ BASE_URL }}{{ routeParser is defined ? routeParser.urlFor('client.processes.index') : '#' }}" class="block py-2 px-4 text-sm hover:bg-blue-700 rounded">{{ __('client_nav.processes') }}</a>
                <a href="{{ BASE_URL }}{{ routeParser is defined ? routeParser.urlFor('client.documents.index') : '#' }}" class="block py-2 px-4 text-sm hover:bg-blue-700 rounded">{{ __('client_nav.documents') }}</a>
                <a href="{{ BASE_URL }}{{ routeParser is defined ? routeParser.urlFor('client.appointments.index') : '#' }}" class="block py-2 px-4 text-sm hover:bg-blue-700 rounded">{{ __('client_nav.appointments') }}</a>
                <a href="{{ BASE_URL }}{{ routeParser is defined ? routeParser.urlFor('client.profile.show') : '#' }}" class="block py-2 px-4 text-sm hover:bg-blue-700 rounded">{{ __('client_nav.my_profile') }}</a>
                <a href="{{ BASE_URL }}{{ routeParser is defined ? routeParser.urlFor('client.auth.logout') : '#' }}" class="block py-2 px-4 text-sm hover:bg-blue-700 rounded">{{ __('sidebar.logout') }}</a>
            </div>
             {% endif %}
        </div>
    </header>

    <main class="container mx-auto px-4 sm:px-6 py-8">
        {% include 'partials/flash_messages.twig' %}
        {% block content %}{% endblock %}
    </main>

    <footer class="bg-gray-800 text-gray-400 text-sm py-10 mt-12">
        <div class="container mx-auto px-6 text-center">
            <p>{{ __('footer.copyright', {'app_name': config_app.get('site_name'), 'year': 2025, 'developer_name': config_app.get('developer_name')}) | raw }}</p>
        </div>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const mobileMenuButton = document.getElementById('mobile-menu-button');
            const mobileMenu = document.getElementById('mobile-menu');
            if(mobileMenuButton && mobileMenu) {
                mobileMenuButton.addEventListener('click', function() {
                    mobileMenu.classList.toggle('hidden');
                });
            }
        });
    </script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="{{ asset('js/main.js') }}"></script>
    {% block javascripts %}{% endblock %}
</body>
</html>