{% extends "base.html.twig" %}

{% block body %}
<div class="page">
    <aside class="navbar navbar-vertical navbar-expand-lg navbar-dark">
        <div class="container-fluid">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#sidebar-menu"
                aria-controls="sidebar-menu" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <header class="d-flex align-items-center justify-content-center" style="height: 56px;">
                <a class="d-flex align-items-center gap-2 text-white" style="font-weight:800;font-size:20px;">
                    <i class="ph-fill ph-van" style="font-size:25px !important; color: #FFCF50 !important;"></i>
                    Balsas
                </a>
            </header>
            <div class="navbar-nav flex-row d-lg-none">
                <div class="nav-item dropdown">
                    <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown"
                        aria-label="Open user menu">
                        <span class="avatar avatar-sm">
                            {{ app.user.email|slice(0,2) }}
                        </span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                        <a href="" class="dropdown-item">Mi perfil</a>
                        <a href="/logout" class="dropdown-item">Cerrar sesión</a>
                    </div>
                </div>
            </div>
            <div class="collapse navbar-collapse" id="sidebar-menu">
                <ul class="navbar-nav pt-lg-3">
                    <li class="nav-item">
                        
                        <a 
                            class="nav-link d-flex align-items-center gap-2 {% if app.request.attributes.get('_route') == 'report_dashboard' %} active{% endif %}"
                            href="{{ path('report_dashboard') }}"
                        >
                            <i class="ph-fill ph-gauge"></i>
                            <span class="nav-link-title">
                                Dashboard
                            </span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a 
                            class="nav-link d-flex align-items-center gap-2 {% if app.request.attributes.get('_route') == 'bibles.index' %} active{% endif %}"
                            href="{{ path('bibles.index') }}"
                        >
                            <i class="ph-fill ph-clock"></i>
                            <span class="nav-link-title">
                                Biblia
                            </span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a 
                            class="nav-link d-flex align-items-center gap-2 
                                {% if app.request.attributes.get('_route') == 'packages.index' %} active{% endif %}
                                {% if app.request.attributes.get('_route') == 'packages.save' %} active{% endif %}
                            "
                            href="{{ path('packages.index') }}"
                        >
                            <i class="ph-fill ph-book-bookmark"></i>
                            <span class="nav-link-title">
                                Paquetes
                            </span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a 
                            class="nav-link d-flex align-items-center gap-2 {% if app.request.attributes.get('_route') == 'service_orders.index' %} active{% endif %}"
                            href="{{ path('service_orders.index') }}"
                        >
                            <i class="ph-fill ph-stack"></i>
                            <span class="nav-link-title">
                                Ordenes de servicio
                            </span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a 
                            class="nav-link d-flex align-items-center gap-2 {% if app.request.attributes.get('_route') == 'providers.index' %} active{% endif %}"
                            href="{{  path('providers.index') }}"
                        >
                            <i class="ph-fill ph-package"></i>
                            <span class="nav-link-title">
                                Proveedores
                            </span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a 
                            class="nav-link d-flex align-items-center gap-2 {% if app.request.attributes.get('_route') == 'services.index' %} active{% endif %}"
                            href="{{ path('services.index') }}"
                        >
                            <i class="ph-fill ph-briefcase"></i>
                            <span class="nav-link-title">
                                Servicios
                            </span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a 
                            class="nav-link d-flex align-items-center gap-2 {% if app.request.attributes.get('_route') == 'hotels.index' %} active{% endif %}"
                            href="{{ path('hotels.index') }}"
                        >
                            <i class="ph-fill ph-house"></i>
                            <span class="nav-link-title">
                                Hoteles
                            </span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a 
                            class="nav-link d-flex align-items-center gap-2 {% if app.request.attributes.get('_route') == 'clients.index' %} active{% endif %}"
                            href="{{ path('clients.index') }}"
                        >
                            <i class="ph-fill ph-users"></i>
                            <span class="nav-link-title">
                                Clientes
                            </span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a 
                            class="nav-link d-flex align-items-center gap-2 {% if app.request.attributes.get('_route') == 'user.index' %} active{% endif %}"
                            href="{{ path('user.index') }}"
                        >
                            <i class="ph-fill ph-key"></i>
                            <span class="nav-link-title">
                                Usuarios
                            </span>
                        </a>
                    </li>
                    <!--
                    <li class="nav-item">
                        <a 
                            class="nav-link d-flex align-items-center gap-2"
                            href=""
                        >
                            <i class="ph-fill ph-chart-donut"></i>
                            <span class="nav-link-title">
                                Reportes
                            </span>
                        </a>
                    </li>
                    -->
                    <li class="nav-item dropdown
                    "> <!-- active -->
                        <a class="nav-link dropdown-toggle d-flex align-items-center gap-2" href="#navbar-layout" data-bs-toggle="dropdown"
                            data-bs-auto-close="false" role="button" aria-expanded="true">
                            <i class="ph-fill ph-gear"></i>
                            <span class="nav-link-title">
                                Configuración
                            </span>
                        </a>
                        <div class="dropdown-menu
                            {% if app.request.attributes.get('_route') == 'type_documents.index' %} show{% endif %}
                            {% if app.request.attributes.get('_route') == 'countries.index' %} show{% endif %}
                            {% if app.request.attributes.get('_route') == 'type_providers.index' %} show{% endif %}
                            {% if app.request.attributes.get('_route') == 'types_currencies.index' %} show{% endif %}
                            {% if app.request.attributes.get('_route') == 'payment_methods.index' %} show{% endif %}
                        ">
                            <div class="dropdown-menu-columns">
                                <div class="dropdown-menu-column">
                                    <a 
                                        class="dropdown-item gap-2 {% if app.request.attributes.get('_route') == 'countries.index' %} active{% endif %}"
                                        href="{{ path('countries.index') }}"
                                    >
                                        Paises
                                    </a>
                                    <a 
                                        class="dropdown-item gap-2 {% if app.request.attributes.get('_route') == 'payment_methods.index' %} active{% endif %}"
                                        href="{{ path('payment_methods.index') }}"
                                    >
                                        Metodos de pago
                                    </a>
                                    <a 
                                        class="dropdown-item gap-2 {% if app.request.attributes.get('_route') == 'type_documents.index' %} active{% endif %}"
                                        href="{{ path('type_documents.index') }}"
                                    >
                                        Documentos
                                    </a>
                                    <a 
                                        class="dropdown-item gap-2 {% if app.request.attributes.get('_route') == 'type_providers.index' %} active{% endif %}"
                                        href="{{ path('type_providers.index') }}"
                                    >
                                        Tipos de proveedor
                                    </a>
                                    <a 
                                        class="dropdown-item gap-2 {% if app.request.attributes.get('_route') == 'types_currencies.index' %} active{% endif %}"
                                        href="{{ path('types_currencies.index') }}"
                                    >
                                        Monedas
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a 
                            class="nav-link d-flex align-items-center gap-2 "
                            href=""
                        >
                            <i class="ph-fill ph-coins"></i>
                            <span class="nav-link-title">
                                Movimientos
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </aside>

    <header class="navbar navbar-light sticky-top navbar-expand-md navbar-light d-none d-lg-flex d-print-none"> <!-- d-print-none -->
        <div class="container-xl">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu"
                aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-nav flex-row order-md-last">
                <div class="nav-item dropdown">
                    <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown"
                        aria-label="Open user menu">
                        <span class="avatar avatar-sm">
                            {{ app.user.email|slice(0,2) }}
                        </span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow p-0">
                        <a href="" class="dropdown-item">Mi perfil</a>
                        <a href="/logout" class="dropdown-item">Cerrar sesión</a>
                    </div>
                </div>
            </div>
            <div class="collapse navbar-collapse" id="navbar-menu">
                <div class="d-none d-sm-block">
                    <p class="m-0 p-0 text-capitalize text-dark" style="font-weight: 500;">
                        {{ app.user.nombre }}
                    </p>
                </div>
            </div>
        </div>
    </header>

    <div class="page-wrapper">
        <div class="page-body px-1 mt-3">
            {% block content %}{% endblock %}
        </div>
    </div>
</div>
{% endblock %}