nomina_ventas/resources/views/settings/isr/edit.blade.php

@extends('layouts.app')

@section('title', 'Editar Tabla ISR ' . $isrTable->year . ' - Configuración')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h4>
                <i class="bi bi-calculator text-primary"></i> Tabla ISR {{ $isrTable->year }}
            </h4>
            <a href="{{ route('settings.index') }}#isr" class="btn btn-secondary btn-sm">
                <i class="bi bi-arrow-left"></i> Volver
            </a>
        </div>
    </div>
</div>

<!-- Errores de Validación -->
@if($errors->any())
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <h6><i class="bi bi-exclamation-triangle"></i> Error(es):</h6>
        <ul class="mb-0 small">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Cerrar"></button>
    </div>
@endif

<!-- Formulario de Brackets -->
<form method="POST" action="{{ route('settings.isr.brackets.update', $isrTable) }}" id="bracketsForm">
    @csrf
    @method('PUT')
    
    <div class="card mb-3">
        <div class="card-header bg-primary text-white">
            <div class="d-flex justify-content-between align-items-center">
                <h6 class="mb-0">
                    <i class="bi bi-table"></i> Brackets ISR - Año {{ $isrTable->year }}
                </h6>
                <span class="badge bg-light text-dark" id="bracketCount">0 rango(s)</span>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-sm table-hover mb-0" id="bracketsTable">
                    <thead class="table-light">
                        <tr>
                            <th>Límite Inferior</th>
                            <th>Límite Superior</th>
                            <th>Cuota Fija</th>
                            <th>Tasa (%)</th>
                            <th style="width: 50px">Acciones</th>
                        </tr>
                    </thead>
                    <tbody id="bracketsBody">
                    </tbody>
                    <tfoot>
                        <tr class="table-light">
                            <td colspan="5">
                                <button type="button" class="btn btn-success btn-sm" onclick="addBracket()">
                                    <i class="bi bi-plus-circle"></i> Agregar Fila
                                </button>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        <div class="card-footer bg-light">
            <div class="d-flex justify-content-end gap-2">
                <a href="{{ route('settings.index') }}#isr" class="btn btn-secondary btn-sm">
                    <i class="bi bi-arrow-left"></i> Volver
                </a>
                <button type="submit" class="btn btn-primary btn-sm">
                    <i class="bi bi-save"></i> Guardar Cambios
                </button>
            </div>
        </div>
    </div>
</form>

<!-- Información Adicional -->
<div class="card">
    <div class="card-header bg-light">
        <h6 class="mb-0">
            <i class="bi bi-info-circle"></i> Información
        </h6>
    </div>
    <div class="card-body">
        <p class="text-muted small mb-2">
            <strong>Cómo funciona la tabla ISR:</strong>
        </p>
        <ul class="text-muted small mb-0">
            <li><strong>Límite Inferior:</strong> Monto mínimo del rango.</li>
            <li><strong>Límite Superior:</strong> Monto máximo (dejar vacío para "En adelante").</li>
            <li><strong>Cuota Fija:</strong> Impuesto fijo.</li>
            <li><strong>Tasa (%):</strong> Porcentaje sobre el excedente.</li>
        </ul>
    </div>
</div>

@push('scripts')
<script>
let bracketIndex = 0;

function updateBracketCount() {
    const count = document.querySelectorAll('#bracketsBody tr').length;
    document.getElementById('bracketCount').textContent = count + ' rango(s)';
}

function addBracket(lowerLimit = '', upperLimit = '', fixedFee = '', rate = '') {
    const tbody = document.getElementById('bracketsBody');
    const row = document.createElement('tr');
    row.innerHTML = `
        <td>
            <input type="number" class="form-control form-control-sm" name="brackets[${bracketIndex}][lower_limit]" 
                   value="${lowerLimit}" min="0" step="0.01" placeholder="0.00" required>
        </td>
        <td>
            <input type="number" class="form-control form-control-sm" name="brackets[${bracketIndex}][upper_limit]" 
                   value="${upperLimit}" min="0" step="0.01" placeholder="En adelante">
            <small class="text-muted">Vacío = En adelante</small>
        </td>
        <td>
            <input type="number" class="form-control form-control-sm" name="brackets[${bracketIndex}][fixed_fee]" 
                   value="${fixedFee}" min="0" step="0.01" placeholder="0.00" required>
        </td>
        <td>
            <input type="number" class="form-control form-control-sm" name="brackets[${bracketIndex}][rate]" 
                   value="${rate}" min="0" max="100" step="0.01" placeholder="0.00" required>
        </td>
        <td>
            <button type="button" class="btn btn-danger btn-sm" onclick="removeBracket(this)" title="Eliminar">
                <i class="bi bi-trash"></i>
            </button>
        </td>
    `;
    tbody.appendChild(row);
    bracketIndex++;
    updateBracketCount();
}

function removeBracket(button) {
    const row = button.closest('tr');
    row.remove();
    updateBracketCount();
}

document.addEventListener('DOMContentLoaded', function() {
    @foreach($isrTable->brackets as $bracket)
        addBracket(
            {{ $bracket->lower_limit }},
            {{ $bracket->upper_limit ?? 'null' }},
            {{ $bracket->fixed_fee }},
            {{ $bracket->rate }}
        );
    @endforeach
    
    if (document.querySelectorAll('#bracketsBody tr').length === 0) {
        addBracket();
    }
});
</script>
@endpush
@endsection