@page "/payroll"
@using Microsoft.AspNetCore.Authorization
@using Indotalent.Infrastructure.Authorization.Identity
@attribute [Authorize(Roles = $"{ApplicationRoles.Admin},{ApplicationRoles.Member}")]
@using Indotalent.Features.Payroll.Deduction.Components
@using Indotalent.Features.Payroll.Grade
@using Indotalent.Features.Payroll.Grade.Components
@using Indotalent.Features.Payroll.Income
@using Indotalent.Features.Payroll.Deduction
@using Indotalent.Features.Payroll.Income.Components
@using Indotalent.Features.Payroll.Payrolls
@using Indotalent.Features.Payroll.Payrolls.Components
@using MudBlazor
@inject NavigationManager NavigationManager

<style>
    .clean-white-tabs .mud-tabs-toolbar {
        background-color: white !important;
        border-bottom: 2px solid #DCEBFA;
        border-radius: 0px !important;
    }

    .clean-white-tabs .mud-tab {
        color: #94a3b8 !important;
        text-transform: none;
        font-weight: 500;
        min-width: 150px;
        border-radius: 0px !important;
    }

    .clean-white-tabs .mud-tab-active {
        color: var(--mud-palette-primary) !important;
        font-weight: 800;
    }

    .clean-white-tabs .mud-tabs-slider {
        background-color: var(--mud-palette-primary) !important;
        height: 3px !important;
        bottom: 0;
    }
</style>

<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="mt-2 mb-8">

    <div class="clean-white-tabs">
        <MudTabs Elevation="0"
                 ActivePanelIndex="@_activeTabIndex"
                 ActivePanelIndexChanged="OnTabChanged"
                 ApplyEffectsToContainer="true"
                 TabPanelsClass="pt-4">

            <MudTabPanel Text="Payroll Process" Icon="@Icons.Material.Outlined.Calculate">
                <PayrollsPage />
            </MudTabPanel>

            <MudTabPanel Text="Salary Grades" Icon="@Icons.Material.Outlined.Layers">
                <GradePage />
            </MudTabPanel>

            <MudTabPanel Text="Income Components" Icon="@Icons.Material.Outlined.AddCard">
                <IncomePage />
            </MudTabPanel>

            <MudTabPanel Text="Deductions" Icon="@Icons.Material.Outlined.PriceCheck">
                <DeductionPage />
            </MudTabPanel>

        </MudTabs>
    </div>
</MudContainer>

@code {
    private int _activeTabIndex = 0;

    protected override void OnInitialized()
    {
        var uri = NavigationManager.ToAbsoluteUri(NavigationManager.Uri);
        if (Microsoft.AspNetCore.WebUtilities.QueryHelpers.ParseQuery(uri.Query).TryGetValue("tab", out var tabValue))
        {
            _activeTabIndex = tabValue.ToString().ToLower() switch
            {
                "process" => 0,
                "grade" => 1,
                "income" => 2,
                "deduction" => 3,
                _ => 0
            };
        }
    }

    private void OnTabChanged(int index)
    {
        _activeTabIndex = index;
        string tabName = index switch
        {
            0 => "process",
            1 => "grade",
            2 => "income",
            3 => "deduction",
            _ => "process"
        };

        NavigationManager.NavigateTo($"/payroll?tab={tabName}", replace: false);
    }
}