@extends('metronic.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.addTipoRenta')
    @include('RecursosHumanos.Modals.addTramoRenta')
    @include('RecursosHumanos.Modals.editTramoRenta')


    <div class="auxiliares__container w-75 mx-auto">
        <h2 class="text-center">Configuración Renta</h2>

        <br>
        <div class="text-center mx-auto mb-3">
            @include('sessions')
        </div>
        <div class="d-flex justify-content-around">
            <a href="#tipo_renta">Tipo Renta</a>
            <a href="#tramo_renta">Tramos Renta</a>
        </div>
        <hr>
        <br>
        <div class="section" id="tipo_renta">
            <button class="btn btn-success float-right" data-bs-toggle="modal" data-bs-target="#addTipoRenta">Añadir</button>
            <br>
            <table class="table table-bordered table-hover mt-2 text-center">
                <legend class="font-weight-bolder">Tipo de Renta</legend>
                <thead>
                    <tr class="">
                        <th>Nombre</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($tipos_renta as $tipo)
                        <tr>
                            <td>{{ $tipo->nombre }}</td>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="section" id="tramo_renta">
            <button class="btn btn-success float-right" data-bs-toggle="modal"
                data-bs-target="#addTramoRenta">Añadir</button>
            <br>
            <h3 class="font-weight-bolder">Tramos de Renta</h3>
            @foreach ($tipos_renta as $tipo)
                <table class="table table-bordered table-hover mt-2 text-center">
                    <legend class="font-weight-bolder">{{ $tipo->nombre }}</legend>
                    <thead>
                        <tr class="">
                            <th>#</th>
                            <th>Descripcion</th>
                            <th>Desde</th>
                            <th>Hasta</th>
                            <th>% Aplicar</th>
                            <th>Exceso</th>
                            <th>Cuota Fija</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            $x = 1;
                        @endphp
                        @foreach ($tipo->tramosRenta as $tramo)
                            <tr>
                                <td>{{ $x++ }}</td>
                                <td>{{ $tramo->nombre }}</td>
                                <td>$ {{ number_format($tramo->monto_desde, 2) }}</td>
                                <td>$ {{ number_format($tramo->monto_hasta, 2) }}</td>
                                <td>{{ number_format($tramo->porcentaje ?? 0, 2) }} %</td>
                                <td>$ {{ number_format($tramo->exceso ?? 0, 2) }}</td>
                                <td>$ {{ number_format($tramo->cuota_fija ?? 0, 2) }}</td>
                                <td>
                                    <button type="button" title="Editar" data-bs-toggle="modal"
                                        data-bs-target="#editTramoRentaModal" class="ki-outline ki-pencil fs-2 text-dark"
                                        style="background-color: transparent; border: 0px solid;"
                                        onclick="fun_edit('{{ $tramo }}')"></button>
                                    <button type="button" title="Eliminar" data-bs-toggle="modal"
                                        data-bs-target="#deleteTramoRentaModal" class="ki-outline ki-trash fs-2 text-danger"
                                        style="background-color: transparent; border: 0px solid;"
                                        onclick="fun_delete('{{ $tramo->id }}')"></button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                <br>
            @endforeach
        </div>
    </div>
@endsection