@extends('metronic.base')
@section('extracss')
    <style>
        button:disabled {
            cursor: not-allowed;
        }

        .table__container .dataTables_wrapper .row:nth-child(2) {
            overflow-x: auto !important;
        }

        td {
            min-width: auto;
            white-space: nowrap;
        }

        .table__boleta {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .money {
            text-align: right;
        }

        .money::before {
            content: "$";
            float: left;
        }

        .boleta_preview {
            border: none;
            position: relative;
            z-index: 1;
        }

        #boletaPreviewSpinner>div {
            position: absolute;
            top: 50%;
            z-index: 1;
        }

        .renta {
            background-color: rgba(0, 128, 0, 0.3);
            color: white;
            font-weight: bolder;
        }

        .nav-item.disabled {
            cursor: not-allowed !important;
            /* background: gray; */
        }

        .planillasTabs>.nav-item>.nav-link.active {
            background-color: white;
            /* color: black; */
        }

        .planillasTabs>.nav-item>.nav-link.disabled {
            background-color: grey;
            color: white;
        }
    </style>
@endsection
@section('extrajs')
    <script src="{{ asset('js/RRHH/detallePlanilla.js') }}"></script>
@endsection
@php
    if ($periodo->tipo == 'Quincenal') {
        $state = $conjunto_planillas->planillaQuincenal->estado == 'Abierto' ? 'disabled' : '';
        $title = $conjunto_planillas->planillaQuincenal->estado == 'Abierto' ? 'No disponible hasta cierre de la primera planila' : '';
    }
@endphp
@section('content')
    @include('RecursosHumanos.Modals.confirmCerrarConjuntoPlanillas')

    <h1>Planillas de {{ $mes }} de {{ $year }}
        @if ($periodo->estado)
            <button class="btn btn-danger float-right" data-bs-toggle="modal" data-bs-target="#ConfirmCerrarPeriodoRRHH">Cerrar
                periodo</button>
        @endif
    </h1>
    @include('sessions')
    <div class="mt-5 planillasTabs">
        <ul class="nav nav-tabs" id="planillasTab" role="tablist">
            @if ($periodo->tipo == 'Quincenal')
                <li class="nav-item mx-1">
                    <a class="nav-link active" role="tab" aria-selected="true" data-bs-toggle="tab"
                        href="#kt_tab_pane_1">Primera
                        Quincena</a>
                </li>
                {{-- <li class="nav-item mx-1">
                <a class="nav-link" id="DepreciacionVehiculosQuincenal-tab" data-toggle="tab"
                    href="#DepreciacionVehiculosQuincenal" role="tab" aria-controls="DepreciacionVehiculosQuincenal"
                    aria-selected="true" onclick="onTabClick(this)">Depreciacion Primera Quicena</a>
            </li> --}}
                <li class="nav-item mx-1 {{ $state }}" title="{{ $title }}">
                    <a class="nav-link {{ $state }}" data-bs-toggle="tab" href="#kt_tab_pane_2">Segunda
                        Quicena</a>
                </li>
            @endif
            @if ($periodo->tipo == 'Mensual')
                <li class="nav-item mx-1">
                    <a class="nav-link active" role="tab" aria-selected="true" data-bs-toggle="tab"
                        href="#kt_tab_pane_1">Mes</a>
                </li>
            @endif
            {{--  <li class="nav-item mx-1 {{ $state }}" title="{{ $title }}">
                <a class="nav-link {{ $state }}" id="DepreciacionVehiculosMensual-tab" data-toggle="tab"
                    href="#DepreciacionVehiculosMensual" role="tab" aria-controls="DepreciacionVehiculosMensual"
                    aria-selected="true" onclick="onTabClick(this)">Depreciacion Segunda Quicena</a>
            </li> --}}
            {{--  <li class="nav-item mx-1 {{ $state }}" title="{{ $title }}">
                <a class="nav-link {{ $state }}" id="Comisiones-tab" data-toggle="tab" href="#Comisiones" role="tab"
                    aria-controls="Comisiones" aria-selected="true" onclick="onTabClick(this)">Comisiones</a>
            </li> --}}
            @if ($conjunto_planillas->planillaAguinaldo)
                <li class="nav-item mx-1">
                    <a class=" nav-link" id="Aguinaldos-tab" data-toggle="tab" href="#Aguinaldos" role="tab"
                        aria-controls="Aguinaldos" aria-selected="true" onclick="onTabClick(this)">
                        Aguinaldos</a>
                </li>
            @endif
        </ul>
        <div class="tab-content" id="myTabContent">
            @if ($periodo->tipo == 'Quincenal')
                <div class="tab-pane  fade show active" id="kt_tab_pane_1" role="tabpanel" aria-labelledby="home-tab">
                    @include('RecursosHumanos.TabsPlanillas.PrimeraQuincenal')
                </div>
                {{--    <div class="tab-pane fade" id="DepreciacionVehiculosQuincenal" role="tabpanel" aria-labelledby="depre-tab">
                @include('RecursosHumanos.TabsPlanillas.DepreciacionVehiculosQuincenal')
            </div> --}}
                <div class="tab-pane fade " id="kt_tab_pane_2" role="tabpanel" aria-labelledby="depre-tab">
                    @include('RecursosHumanos.TabsPlanillas.PlanillaQuincenaDos')
                </div>
            @endif
            @if ($periodo->tipo == 'Mensual')
                <div class="tab-pane fade show active" id="kt_tab_pane_1" role="tabpanel" aria-labelledby="home-tab">
                    @include('RecursosHumanos.TabsPlanillas.PlanillaMensual')
                </div>
            @endif
            {{-- <div class="tab-pane fade " id="DepreciacionVehiculosMensual" role="tabpanel" aria-labelledby="depre-tab">
                @include('RecursosHumanos.TabsPlanillas.DepreciacionVehiculosMensual')
            </div> --}}
            {{--    <div class="tab-pane fade " id="Comisiones" role="tabpanel" aria-labelledby="depre-tab">
                @include('RecursosHumanos.TabsPlanillas.Comisiones')
            </div> --}}
            @if ($conjunto_planillas->planillaAguinaldo)
                <div class="tab-pane fade " id="Aguinaldos" role="tabpanel" aria-labelledby="depre-tab">
                    @include('RecursosHumanos.TabsPlanillas.PlanillaAguinaldo')
                </div>
            @endif
        </div>
    </div>
    @include('RecursosHumanos.Modals.BoletaQuincenalPreview')
@endsection