@using RegistroPersonalAN.Models
@using BlazorBootstrap;
@using Microsoft.AspNetCore.Components.Web

@inherits LayoutComponentBase
@inject UserState UserState
@inject NavigationManager NavigationManager
@inject NavigationManager Navigation


<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet" />
    <link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" />
    <link href="_content/Blazor.Bootstrap/Blazor.Bootstrap.bundle.scp.css" rel="stylesheet" />
    <link rel="icon" type="image/x-icon" href="Content/imagenes/faviconParlamento.ico" />
    <link href="Content/Site.css?v=0.5" rel="stylesheet" />
    <link href="Content/all.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <script src="Scripts/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    <!-- Add chart.js reference if chart components are used in your application. -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.0.1/chart.umd.js" integrity="sha512-gQhCDsnnnUfaRzD8k1L5llCCV6O9HN09zClIzzeJ8OJ9MpGmIlCxm+pdCkqTwqJ4JcjbojFr79rl2F1mzcoLMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- Add chartjs-plugin-datalabels.min.js reference if chart components with data label feature is used in your application. -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- Add sortable.js reference if SortableList component is used in your application. -->
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
    <script src="_content/Blazor.Bootstrap/blazor.bootstrap.js"></script>
    <script src="Scripts/popper.min.js"></script>
    <script src="Scripts/all.min.js"></script>
    <script src="Scripts/Util.js"></script>
</head>

@if (UserState.Mostrar == true)
{
    <div id="cargando" class="loadingFrame">
        <div class="loadingDiv">
        <div class="loadingImg"></div>
        </div>
    </div>
}


<div class="menuMovil" style="height: 100vh;background-color:#000000c2;" id="navMov">
    <a Class="btnNavMov" href="/ListadoPersonas">Personas</a>
    <a Class="btnNavMov" href="/RPT">RPT</a>
    <a class="btnNavMov" onclick="openCollapse()">Ficheros Maestros</a>
    <Collapse Id="CollapseFich" Class="show" @ref="collapse1" Horizontal="true">
        <Card Style="width:100%;">
            <CardBody Style="flex-direction: column;display: flex;text-align: center;padding:0;">
                <a class="btnGrisNav" href="/FicherosMaestros/Adscripciones">Adscripciones</a>
                <a class="btnGrisNav" href="/FicherosMaestros/CausasAlta">Causas de alta</a>
                <a class="btnGrisNav" href="/FicherosMaestros/CausasBaja">Causas de baja</a>
                <a class="btnGrisNav" href="/FicherosMaestros/ClasesPersonal">Clases de personal</a>
                <a class="btnGrisNav" href="/FicherosMaestros/Cuerpos">Cuerpos</a>
                <a class="btnGrisNav" href="/FicherosMaestros/Departamentos">Departamentos</a>
                <a class="btnGrisNav" href="/FicherosMaestros/Dotacion">Dotación</a>
                <a class="btnGrisNav" href="/FicherosMaestros/Grupos">Grupos</a>
                <a class="btnGrisNav" href="/FicherosMaestros/MotivosAdministrativos">Motivos administrativos</a>
                <a class="btnGrisNav" href="/FicherosMaestros/Nivel">Nivel</a>
                <a class="btnGrisNav" href="/FicherosMaestros/Ocupacion">Ocupación</a>
                <a class="btnGrisNav" href="/FicherosMaestros/Provision">Provisión</a>
                <a class="btnGrisNav" href="/FicherosMaestros/TiposAptosAdministrativos">Tipos de actos administrativos</a>
                <a class="btnGrisNav" href="/FicherosMaestros/TiposDocencia">Tipos de docencia</a>
            </CardBody>
        </Card>
    </Collapse>
</div>



<div class="page">

    <main>
        <div id="mensajeDiv">
            <div id="mensajeCuerpo">
                <p id="mensajeError"></p>
                <div style="display:flex; justify-content:end">
                    <button class="btnOAAFAzul" onclick="toggleMensaje()">Continuar</button>
                </div>
            </div>
        </div>
        <div id="loadingDiv">
            <div id="loading" class="fa-beat"></div>
        </div>
        <div id="estadoProduccion" style="position:fixed; bottom:0; left:0;z-index:99;padding-inline:20px;padding-top:5px; background-color:var(--AzulOscuro);display:none;"><p style="color:white; font-weight:bold; font-size:15px;margin-bottom:5px">PREPRODUCCIÓN</p></div>


        <header class="d-none d-md-block">
            <div class="pa-header-t1">
                <div class="pa-header-row1 bg-secondary" style="background-color: white !important;">
                    <nav class="navbar navbar-expand navbar-dark justify-content-between " style="margin-inline: 20px;">
                        
                        <div>
                        <a class="navbar-brand" href="/RPT">
                            <img style="margin-inline: auto; padding: 15px; padding-right: 40px; padding-left: 40px; height: 100px;" src="/Content/imagenes/1oaaflogo.png" alt="Logo Oficina Andaluza Antifraude">
                        </a>
                        </div>

                        <div>
                            <ul id="pa-main-menu" class="navbar-nav align-self-end">
                                <li class="nav-item">
                                    <a class="nav-link" style="font-family:'Satoshi'; color:black" href="/ListadoPersonas">Personas</a>
                                </li>
                                <li class="nav-item active">
                                    <a class="nav-link" style="font-family:'Satoshi'; color:black" href="/RPT">RPT</a>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" style="font-family:'Satoshi'; color:black" href="#" id="navbarDropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Ficheros maestros</a>
                                    <div class="dropdown-menu" id="dropdownNavegador" style="font-family: 'Satoshi';" aria-labelledby="navbarDropdownMenuLink">
                                        <a class="dropdown-item" href="/FicherosMaestros/Adscripciones">Adscripciones</a>
                                        <a class="dropdown-item" href="/FicherosMaestros/CausasAlta">Causas de alta</a>
                                        <a class="dropdown-item" href="/FicherosMaestros/CausasBaja">Causas de baja</a>
                                        <a class="dropdown-item" href="/FicherosMaestros/ClasesPersonal">Clases de personal</a>
                                        <a class="dropdown-item" href="/FicherosMaestros/Cuerpos">Cuerpos</a>
                                        <a class="dropdown-item" href="/FicherosMaestros/Departamentos">Departamentos</a>
                                        <a class="dropdown-item" href="/FicherosMaestros/Dotacion">Dotación</a>
                                        <a class="dropdown-item" href="/FicherosMaestros/Grupos">Grupos</a>
                                        <a class="dropdown-item" href="/FicherosMaestros/MotivosAdministrativos">Motivos administrativos</a>
                                        <a class="dropdown-item" href="/FicherosMaestros/Nivel">Nivel</a>
                                        <a class="dropdown-item" href="/FicherosMaestros/Ocupacion">Ocupación</a>
                                        <a class="dropdown-item" href="/FicherosMaestros/Provision">Provisión</a>
                                        <a class="dropdown-item" href="/FicherosMaestros/TiposAptosAdministrativos">Tipos de actos administrativos</a>
                                        <a class="dropdown-item" href="/FicherosMaestros/TiposDocencia">Tipos de docencia</a>
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div>
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                    <p id="nombreCompleto" style="font-family:'SatoshiB'; margin:7.5px 0px 0px 0px; color: black;">@UserState.NombreUsu</p>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/">
                                    <img src="/Content/icon/person-fill.svg" style="width: 20px; height: 20px;" />
                                </a>
                            </li>
                        </ul>
                        </div>
                    </nav>

                </div>
                <div class="pa-header-row2">
                    <nav class="navbar navbar-light  navbar-expand justify-content-between " style="padding-top: 0px !important; padding-bottom: 0px !important;">
                        <div style="background-color: var(--indigo-parlamento);">
                          
                        </div>
                       
                    </nav>
                </div>
            </div>
        </header>
        <header class="navMov justify-content-between" style="padding:15px;">
            <img src="Content/imagenes/1oaaflogo.png" height="40px" />

            <div role="button" onclick="MNM()" class="menuhamb">
                <img src="Content/imagenes/list.svg" @onclick="@MostrarNavMob" style="width: 40px; height: 40px; align-items: center;">
            </div>
        </header>
        <article class="">
            @Body
        </article>
    </main>

</div>

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>
<script>
    function MNM(){
        var navegador = $("#navMov")
        if (navegador.css("display") == "none"){
            navegador.css("display", "flex")
        }
        else{
            navegador.css("display","none")
        }
    }
    function openCollapse() {
        $("#CollapseFich")[0].classList.toggle("show")
    }
</script>

@code {
    private bool MNM { get; set; } = false;
    Collapse collapse1 = default!;
    private async Task ToggleContentAsync() => await collapse1.ToggleAsync();

    public void MostrarNavMob()
    {
        if (MNM)
        {
            MNM = false;
        }
        else
        {
            MNM = true;
        }
    }
}