{% extends 'base.html.twig' %}
{% set route = app.request.attributes.get('_route') %}
{% set currentProject = app.request.attributes.get('current_artistic_project') %}
{% set artisticProjects = app.request.attributes.get('artistic_projects') ?? [] %}
{% set adminHomePath = path('admin_settings_hub') %}
{% if can_permission('DASHBOARD') %}{% set adminHomePath = path('admin_dashboard') %}
{% elseif can_permission('TASKS') %}{% set adminHomePath = path('admin_to_process') %}
{% elseif can_permission('PROSPECTION') %}{% set adminHomePath = path('admin_prospection_index') %}
{% elseif can_permission('CONCERT_DATE') %}{% set adminHomePath = path('admin_concert_date_index') %}
{% elseif can_permission('CONCERT_FEEDBACK') %}{% set adminHomePath = path('admin_concert_feedback_index') %}
{% elseif can_permission('VENUE_CONTACT') %}{% set adminHomePath = path('admin_venue_index') %}{% endif %}
{% block body %}
<a class="skip-link" href="#admin-main-content">Aller au contenu principal</a>
<nav class="navbar navbar-dark bg-dark sticky-top d-lg-none px-2 mobile-topbar" aria-label="Contexte du projet">
    <a class="navbar-brand d-flex align-items-center gap-2 me-1" href="{{ adminHomePath }}" aria-label="Retour à l’accueil du back-office">
        <img src="{{ asset('images/logo-wtl-white.png') }}" alt="Association" class="mobile-brand-logo">
    </a>
    {% if currentProject %}
        {% if artisticProjects|length > 1 %}
        <div class="dropdown mobile-project-switch flex-grow-1">
            <button class="btn btn-dark dropdown-toggle w-100 text-start text-truncate touch-target" type="button" data-bs-toggle="dropdown" aria-label="Projet actif : {{ currentProject.name }}. Changer de projet">
                <span class="project-color-dot project-color-dot-sm me-1" style="background:{{ currentProject.primaryColor }}"></span>{{ currentProject.name }}
            </button>
            <ul class="dropdown-menu dropdown-menu-dark w-100">
                {% for project in artisticProjects %}
                <li><form method="post" action="{{ path('admin_artistic_project_switch',{id:project.id}) }}">
                    <input type="hidden" name="_token" value="{{ csrf_token('switch-artistic-project') }}">
                    <button class="dropdown-item touch-target {{ project.id == currentProject.id ? 'active' : '' }}"><span class="project-color-dot project-color-dot-sm me-2" style="background:{{ project.primaryColor }}"></span>{{ project.name }}</button>
                </form></li>
                {% endfor %}
            </ul>
        </div>
        {% else %}<span class="mobile-project-name flex-grow-1 text-truncate">{{ currentProject.name }}</span>{% endif %}
    {% endif %}
    <button class="navbar-toggler touch-target" type="button" data-bs-toggle="offcanvas" data-bs-target="#adminSidebar" aria-controls="adminSidebar" aria-label="Ouvrir le menu principal"><span class="navbar-toggler-icon" aria-hidden="true"></span></button>
</nav>
<div class="d-flex min-vh-100">
    <aside class="offcanvas-lg offcanvas-start text-bg-dark admin-sidebar" tabindex="-1" id="adminSidebar"{% if currentProject %} style="--project-primary:{{ currentProject.primaryColor }};--project-secondary:{{ currentProject.secondaryColor }}"{% endif %}>
        <div class="offcanvas-header border-bottom border-secondary d-lg-none"><h5 class="offcanvas-title">Gestion artistique</h5><button class="btn-close btn-close-white touch-target" type="button" data-bs-dismiss="offcanvas" data-bs-target="#adminSidebar" aria-controls="adminSidebar" aria-label="Fermer le menu"></button></div>
        <div class="sidebar-shell d-flex flex-column h-100">
            <div class="sidebar-brand-wrap px-3 pt-3 pb-2">
                <a href="{{ adminHomePath }}" class="sidebar-brand d-block text-center text-decoration-none"><img src="{{ asset('images/logo-wtl-white.png') }}" alt="Association" class="sidebar-logo"></a>
            </div>
            <div class="sidebar-scroll px-3 pb-3">
                {% if currentProject %}
                <div class="project-context-card mb-3" style="--project-primary:{{ currentProject.primaryColor }};--project-secondary:{{ currentProject.secondaryColor }}">
                    <div class="small text-uppercase fw-semibold text-secondary mb-2">Projet actif</div>
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <span class="project-color-dot" style="background:{{ currentProject.primaryColor }}"></span>
                        <strong class="text-white text-truncate">{{ currentProject.name }}</strong>
                    </div>
                    {% if artisticProjects|length > 1 %}
                    <div class="dropdown">
                        <button class="btn btn-outline-light btn-sm w-100 dropdown-toggle" data-bs-toggle="dropdown"><i class="bi bi-arrow-left-right me-1"></i>Changer de projet</button>
                        <ul class="dropdown-menu dropdown-menu-dark project-switch-menu">
                            {% for project in artisticProjects %}
                            <li>
                                <form method="post" action="{{ path('admin_artistic_project_switch',{id:project.id}) }}">
                                    <input type="hidden" name="_token" value="{{ csrf_token('switch-artistic-project') }}">
                                    <button class="dropdown-item project-switch-item d-flex align-items-center {{ project.id == currentProject.id ? 'active':'' }}">
                                        <span class="project-color-dot project-color-dot-sm me-2" style="background:{{ project.primaryColor }}"></span>
                                        <span class="project-switch-name">{{ project.name }}</span>
                                        {% if project.status == 'DRAFT' %}<span class="badge text-bg-warning ms-2 flex-shrink-0">Brouillon</span>{% endif %}
                                    </button>
                                </form>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}
                </div>
                {% endif %}

                {% include 'admin/_navigation.html.twig' %}
            </div>
            <div class="sidebar-footer p-3 border-top border-secondary">
                <div class="small text-secondary text-truncate">Connecté : {{ app.user.displayName ?? app.user.userIdentifier }}{% if app.user.superAdmin %} <span class="badge text-bg-danger ms-1">Super admin</span>{% endif %}</div>
                {% if can_permission('DASHBOARD') %}<a class="btn btn-outline-light btn-sm w-100 mt-2" href="{{ path('admin_change_password') }}"><i class="bi bi-key me-1"></i>Mot de passe</a>{% endif %}
                <a class="btn btn-outline-light btn-sm w-100 mt-2" href="{{ path('app_logout') }}"><i class="bi bi-box-arrow-right me-1"></i>Déconnexion</a>
            </div>
        </div>
    </aside>
    <main class="flex-grow-1 admin-content" id="admin-main-content" tabindex="-1"><div class="container-fluid admin-content-shell p-3 p-md-4 p-xl-5">
        {% if currentProject %}
        <div class="project-page-context mb-3" style="border-left-color:{{ currentProject.primaryColor }}">
            <span class="project-color-dot project-color-dot-sm" style="background:{{ currentProject.primaryColor }}"></span>
            <span class="small text-secondary">Projet actif</span><strong>{{ currentProject.name }}</strong>
            {% if currentProject.status == 'DRAFT' %}<span class="badge text-bg-warning">Brouillon</span>{% endif %}
        </div>
        {% endif %}
        <div class="feedback-region" aria-live="polite" aria-atomic="true">
        {% for label,messages in app.flashes %}{% for message in messages %}<div class="alert alert-{{ label == 'success' ? 'success' : (label == 'danger' ? 'danger' : 'warning') }} alert-dismissible fade show" role="{{ label == 'danger' ? 'alert' : 'status' }}">{{ message }}<button class="btn-close touch-target" type="button" data-bs-dismiss="alert" aria-label="Fermer le message"></button></div>{% endfor %}{% endfor %}
        </div>
        {% block admin_body %}{% endblock %}
    </div></main>
</div>
<nav class="mobile-bottom-nav d-lg-none" aria-label="Navigation mobile principale">
    {% if can_permission('DASHBOARD') %}<a class="mobile-bottom-link {{ route == 'admin_dashboard' ? 'active' : '' }}" href="{{ path('admin_dashboard') }}"{% if route == 'admin_dashboard' %} aria-current="page"{% endif %}><i class="bi bi-house" aria-hidden="true"></i><span>Accueil</span></a>{% endif %}
    {% if can_permission('TASKS') %}<a class="mobile-bottom-link {{ route == 'admin_to_process' ? 'active' : '' }}" href="{{ path('admin_to_process') }}"{% if route == 'admin_to_process' %} aria-current="page"{% endif %}><i class="bi bi-check2-square" aria-hidden="true"></i><span>À traiter</span></a>{% endif %}
    {% if can_permission('VENUE_CONTACT',2) %}<a class="mobile-bottom-link mobile-bottom-primary {{ route starts with 'admin_field_contact_' ? 'active' : '' }}" href="{{ path('admin_field_contact_new') }}"{% if route starts with 'admin_field_contact_' %} aria-current="page"{% endif %}><span class="mobile-bottom-primary-icon"><i class="bi bi-plus-lg" aria-hidden="true"></i></span><span>Saisir</span></a>{% endif %}
    {% if can_permission('PROSPECTION') %}<a class="mobile-bottom-link {{ route starts with 'admin_prospection_' ? 'active' : '' }}" href="{{ path('admin_prospection_index') }}"{% if route starts with 'admin_prospection_' %} aria-current="page"{% endif %}><i class="bi bi-bullseye" aria-hidden="true"></i><span>Prospections</span></a>{% endif %}
    <button class="mobile-bottom-link" type="button" data-bs-toggle="offcanvas" data-bs-target="#adminSidebar" aria-controls="adminSidebar"><i class="bi bi-grid" aria-hidden="true"></i><span>Plus</span></button>
</nav>
{% endblock %}
{% block javascripts %}{{ parent() }}
<script src="{{ asset('js/admin-ui.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
    if (window.jQuery && $.fn.select2) $('.select2-venue').select2({theme:'bootstrap-5',width:'100%',placeholder:'Rechercher un lieu'});
    if (typeof DataTable === 'undefined') return;
    document.querySelectorAll('table.data-table').forEach(table => {
        if (table.querySelectorAll('tbody tr').length === 1 && table.querySelector('tbody td[colspan]')) return;
        const colDefs=[]; table.querySelectorAll('thead th').forEach((th,i)=>{if(th.dataset.orderable==='false')colDefs.push({targets:i,orderable:false,searchable:false});});
        const dt=new DataTable(table,{responsive:true,pageLength:25,order:[[parseInt(table.dataset.orderColumn||'0'),table.dataset.orderDir||'asc']],columnDefs:colDefs,language:{search:'Recherche globale :',lengthMenu:'Afficher _MENU_ lignes',info:'_START_ à _END_ sur _TOTAL_',infoEmpty:'Aucun résultat',zeroRecords:'Aucun résultat correspondant',emptyTable:'Aucune donnée',paginate:{first:'Premier',last:'Dernier',next:'Suivant',previous:'Précédent'}}}); table._wtlDt=dt;
    });
    document.querySelectorAll('.dt-filter').forEach(select=>{const table=document.querySelector(select.dataset.tableTarget),dt=table?._wtlDt;if(!dt)return;const column=dt.column(parseInt(select.dataset.column));[...new Set(column.data().toArray().map(v=>String(v).replace(/<[^>]*>/g,'').trim()).filter(v=>v&&v!=='—'))].sort((a,b)=>a.localeCompare(b,'fr')).forEach(v=>{const o=document.createElement('option');o.value=v;o.textContent=v;select.appendChild(o);});select.addEventListener('change',()=>column.search(select.value?`^${select.value.replace(/[.*+?^${}()|[\]\\]/g,'\\$&')}$`:'',true,false).draw());});
    document.querySelectorAll('.dt-column-search').forEach(input=>{const table=document.querySelector(input.dataset.tableTarget),dt=table?._wtlDt;if(!dt)return;input.addEventListener('input',()=>dt.column(parseInt(input.dataset.column)).search(input.value).draw());});
});
</script>
{% endblock %}