@extends('base')
@section('extracss')
    <style>
        .auxiliares__form {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 1rem;
        }

        html {
            scroll-behavior: smooth;
        }

        .section {
            padding: 1rem;
            margin: 1rem 0;
            border-bottom: 1px solid black;
            padding-bottom: 1rem;
        }

        .section:nth-child(2n+1) {
            background: #d5ebf251;
        }

    </style>
@endsection
@section('content')

    @include('RecursosHumanos.Modals.addTipoAFP')
    @include('RecursosHumanos.Modals.addCategoriaContable')
    @include('RecursosHumanos.Modals.addDepartamento')
    @include('RecursosHumanos.Modals.addPlaza')


    <div class="auxiliares__container w-75 mx-auto">
        <h2 class="text-center">Auxiliares de RRHH</h2>
        <div class="alert alert-warning mx-auto" role="alert">
            <h4 class="alert-heading">¡Advertencia!</h4>
            <p>Los cambios realizados en los auxiliares tomarán efecto inmediatamente, en los cálculos que los requieran.
            </p>
            {{-- <hr> --}}
            {{-- <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> --}}
        </div>
        <br>
        <div class="text-center mx-auto mb-3">
            @include('sessions')
        </div>
        <div class="d-flex justify-content-around">
            <a href="#valores_calculos">Para Calculos</a>
            <a href="#tipos_afp">Tipos De AFP</a>
            <a href="#cat_contable">Categoria Contable</a>
            <a href="#departamentos">Departamentos</a>
            <a href="#plazas">Plazas</a>
        </div>
        <hr>
        <br>
        <div class="section" id="valores_calculos">
            <form class="form auxiliares__form mx-auto" action="" method="post">
                @csrf
                @foreach ($auxiliares as $auxiliar)
                    <div class="form-group d-flex flex-column justify-content-between">
                        <label for="{{ $auxiliar->nombre_auxiliar }}"
                            class="label-group font-weight-bolder">{{ ucwords(preg_replace('/_/', ' ', $auxiliar->nombre_auxiliar)) }}</label>
                        <input type="{{ preg_match('/[a-zA-Z]/', $auxiliar->valor) ? 'text' : 'number' }}"
                            class="form-control" name="{{ $auxiliar->nombre_auxiliar }}" step="0.01"
                            value="{{ $auxiliar->valor }}">
                    </div>
                @endforeach
                <div style="grid-column: span 3;">
                    <button type="submit" class="btn btn-primary">Guardar Cambios</button>
                </div>
            </form>
        </div>
        <div class="section" id="tipos_afp">
            <button class="btn btn-success float-right" data-toggle="modal" data-target="#addTipoAFP">Añadir</button>
            <br>
            <table class="table table-striped mt-2 text-center InitializeDataTable">
                <legend class="font-weight-bolder">Tipos AFP</legend>
                <thead>
                    <tr class="bg-dark text-light">
                        <th>Nombre</th>
                        <th>Porcentaje</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($tipos_afp as $tipo)
                        <tr>
                            <td>{{ $tipo->nombre_afp }}</td>
                            <td>{{ number_format($tipo->factor->valor??0, 2) }} %</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="section" id="cat_contable">
            <button class="btn btn-success float-right" data-toggle="modal"
                data-target="#AddCategoriaContable">Añadir</button>
            <br>
            <table class="table table-striped mt-2 text-center InitializeDataTable">
                <legend class="font-weight-bolder">Categorias Contables</legend>
                <thead>
                    <tr class="bg-dark text-light">
                        <th>#</th>
                        <th>Nombre</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $x = 1;
                    @endphp
                    @foreach ($cat_contables as $cat)
                        <tr>
                            <td>{{ $x++ }}</td>
                            <td>{{ $cat->nombre }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="section" id="departamentos">
            <button class="btn btn-success float-right" data-toggle="modal" data-target="#AddDepartamento">Añadir</button>
            <br>
            <table class="table table-striped mt-2 text-center InitializeDataTable">
                <legend class="font-weight-bolder">Departamentos</legend>
                <thead>
                    <tr class="bg-dark text-light">
                        <th>#</th>
                        <th>Nombre</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $x = 1;
                    @endphp
                    @foreach ($departamentos as $departamento)
                        <tr>
                            <td>{{ $x++ }}</td>
                            <td>{{ $departamento->nombre }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="section" id="plazas">
            <button class="btn btn-success float-right" data-toggle="modal" data-target="#AddPlaza">Añadir</button>
            <br>
            <table class="table table-striped mt-2 text-center InitializeDataTable">
                <legend class="font-weight-bolder">Plazas</legend>
                <thead>
                    <tr class="bg-dark text-light">
                        <th>#</th>
                        <th>Nombre</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $x = 1;
                    @endphp
                    @foreach ($plazas as $plaza)
                        <tr>
                            <td>{{ $x++ }}</td>
                            <td>{{ $plaza->nombre }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

    </div>
@endsection