@inject NavMenuService navMenuService

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">

        <a class="navbar-brand" href="">
            @if (!navMenuService.Minimized)
            {
                <img src="images/Icono.png" alt="Logo" style="width: 120px; height: auto; align-items:center;vertical-align:central;" @ondblclick="ToggleIconMenu" />
                <label @ondblclick="ToggleIconMenu"></label>
            }
        </a>
        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
        @if (navMenuService.Minimized)
        {
            <span class="d-none d-lg-block oi oi-arrow-circle-right icon-white" style="font-size: 18px;" aria-hidden="true" @onclick="ToggleIconMenu"> </span>
        }
        else
        {
            <span class="d-none d-lg-block oi oi-arrow-circle-left icon-white" style="font-size: 18px;" aria-hidden="true" @onclick="ToggleIconMenu"> </span>
        }
    </div>
</div>

<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
    <nav class="flex-column" style="zoom:90%">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="/DashboardPanel" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> 
                @if (!navMenuService.Minimized)
                {
                    <label>Home</label>
                }
            </NavLink>
        </div>
        <AuthorizeView Roles="Admin">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="roles">
                <span class="oi oi-shield" aria-hidden="true"></span> 
                @if (!navMenuService.Minimized)
                {
                    <label>Roles</label>
                }
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="users">
                <span class="oi oi-people" aria-hidden="true"></span>
                @if (!navMenuService.Minimized)
                {
                    <label>Usuarios</label>
                }
            </NavLink>
        </div>
        </AuthorizeView>
        <div class="nav-item px-3">
            <NavLink class="nav-link" @onclick="()=>expClientes=!expClientes">
                <span class="oi oi-briefcase" aria-hidden="true"></span>
                @if (!navMenuService.Minimized)
                {
                    <label>Ventas</label>
                }
            </NavLink>
            @if (expClientes)
            {
                <ul class="nav-flex-column">
                    <div class="nav-item px-1">
                        <NavLink class="nav-link" href="sales/customers/">
                            <li aria-hidden="true"></li> Clientes
                        </NavLink>
                    </div>
                    <div class="nav-item px-1">
                        <NavLink class="nav-link" href="sales/patients/">
                            <li aria-hidden="true"></li> Pacientes
                        </NavLink>
                    </div>
                    <div class="nav-item px-1">
                        <NavLink class="nav-link" href="sales/products/">
                            <li aria-hidden="true"></li> Productos
                        </NavLink>
                    </div>
                    <div class="nav-item px-1">
                        <NavLink class="nav-link" href="sales/professionals/">
                            <li aria-hidden="true"></li> Profesionales
                        </NavLink>
                    </div>
                    <div class="nav-item px-1">
                        <NavLink class="nav-link" href="sales/institutions/">
                            <li aria-hidden="true"></li> Instituciones
                        </NavLink>
                    </div>
                </ul>
            }
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="tickets/ticketform/">
                <span class="oi oi-list-rich" aria-hidden="true"></span>
                @if (!navMenuService.Minimized)
                {
                    <label>Nuevo Ticket</label>
                }
            </NavLink>
        </div>
    </nav>
</div>

@code {
    private bool collapseNavMenu = true;
    private bool minimizeNavMenu = false;
    private bool expClientes = false;
    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
    [Parameter]
    public EventCallback<bool> MinStatus { get; set; }
    [CascadingParameter] public IModalService Modal { get; set; } = default!;
    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
    private async void ToggleIconMenu()
    {
        minimizeNavMenu = !minimizeNavMenu;
        await MinStatus.InvokeAsync(minimizeNavMenu);
    }
}