@extends('layouts.app')

@section('styles')

@endsection

@section('content')

    <!-- Modal Create/Edit/View  -->
    <div class="modal fade" id="modal-concepto" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title" id="modal-title"></h2>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <form id="form-add">
                    <div class="modal-body">
                        @csrf
                        <div class="alert alert-info">
                            <p><i class="fas fa-info-circle"></i> Los campos con <span class="text-dark">*</span> son obligatorios</p>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="concepto_pago">Concepto *</label>
                                    <input placeholder="Nombre del concepto" type="text" class="form-control" id="concepto_pago" name="concepto_pago" required>
                                    <input type="hidden" id="conceptos_id" name="conceptos_id">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="numeral_literal">Numeral / Literal *</label>
                                    <input placeholder="Ej: 2 o 2.a" type="text" class="form-control" id="numeral_literal" name="numeral_literal" required>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="section-title font-weight-bold mb-3">NATURAL - NO RESIDENTE</div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="base_norecidente">Base Imponible *</label>
                                    <input placeholder="Ej: 90 o N/A" type="text" class="form-control" id="base_norecidente"
                                        name="base_norecidente">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="tarifa_norecidente">Tarifa o Porcentaje *</label>
                                    <input placeholder="Ej: 90 o N/A" type="text" class="form-control" id="tarifa_norecidente"
                                        name="tarifa_norecidente">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="monto_norecidente">Monto Sujeto a Retención *</label>
                                    <input placeholder="Ej: TODO PAGO o N/A" type="text" class="form-control" id="monto_norecidente"
                                        name="monto_norecidente">
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="section-title font-weight-bold mb-3">NATURAL - RESIDENTE</div>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="base_recidente">Base Imponible *</label>
                                    <input placeholder="Ej: 90 o N/A" type="text" class="form-control" id="base_recidente"
                                        name="base_recidente">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="tarifa_recidente">Tarifa o Porcentaje *</label>
                                    <input placeholder="Ej: 90 o N/A" type="text" class="form-control" id="tarifa_recidente"
                                        name="tarifa_recidente">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="pagos_recidente">Pagos Mayores *</label>
                                    <input placeholder="Ej: 3583,34 TODO PAGO o N/A" type="text" class="form-control" id="pagos_recidente"
                                        name="pagos_recidente">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="sustra_recidente">Sustraendo *</label>
                                    <input placeholder="Ej: 107,50 o N/A" type="text" class="form-control" id="sustra_recidente"
                                        name="sustra_recidente">
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="section-title font-weight-bold mb-3">JURIDICA - NO DOMICILIADA</div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="base_nodomiciliada">Base Imponible *</label>
                                    <input placeholder="Ej: 90 o N/A" type="text" class="form-control" id="base_nodomiciliada"
                                        name="base_nodomiciliada">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="tarifa_nodomiciliada">Tarifa o Porcentaje *</label>
                                    <input placeholder="Ej: 90 o N/A" type="text" class="form-control" id="tarifa_nodomiciliada"
                                        name="tarifa_nodomiciliada">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="monto_nodomiciliada">Monto Sujeto a Retención *</label>
                                    <input placeholder="Ej: TODO PAGO o N/A" type="text" class="form-control" id="monto_nodomiciliada"
                                        name="monto_nodomiciliada">
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="section-title font-weight-bold mb-3">JURIDICA - DOMICILIADA</div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="base_domiciliada">Base Imponible *</label>
                                    <input placeholder="Ej: 90 o N/A" type="text" class="form-control" id="base_domiciliada"
                                        name="base_domiciliada">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="tarifa_domiciliada">Tarifa o Porcentaje *</label>
                                    <input placeholder="Ej: 90 o N/A" type="text" class="form-control" id="tarifa_domiciliada"
                                        name="tarifa_domiciliada">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="monto_domiciliada">Monto Sujeto a Retención *</label>
                                    <input placeholder="Ej: TODO PAGO o N/A" type="text" class="form-control" id="monto_domiciliada"
                                        name="monto_domiciliada">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" id="btn-submit">
                            Guardar
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

<div class="row">
    <div class="col-md-12">
        <div class="d-flex justify-content-between align-items-center">
            <button class="btn btn-dark btn-lg" id="new-concepto">
                <i class="fas fa-plus"></i> Concepto de Pago
            </button>
        
            <div class="text-end">
                <h3>Valor Unidad Tributaria:</h3>
                <p class="h4 text-center" id="unidad_tributaria"> 43,00</p>
            </div>
            <div class="text-end">
                <h3>Factor</h3>
                <p class="h4 text-center"> 83,3334</p>
            </div>
        </div>
        <hr>
        <!-- DATA TABLE-->
            <nav>
                <div class="nav nav-tabs d-flex justify-content-between" id="nav-tab" role="tablist">
                  <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true"><b>Persona Natural</b></a>
                  <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false"><b>Persona Juridica</b></a>
                </div>
            </nav>
              <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                    <div class="table-responsive">
                        <table class="table table-bordered table-sm table-hover" id="tabla_natural">
                            <thead class="thead-light">
                                <tr>
                                    <th class="border border-dark text-center" colspan="2" rowspan="2">CONCEPTO DE PAGO</th>
                                    <th class="border border-dark text-center" colspan="6">NO RESIENTE</th>
                                    <th class="border border-dark text-center" colspan="9">RESIENTE</th>
                                </tr>
                                <tr>
                                    
                                    <th class="border border-dark text-center">NUMERAL</th>
                                    <th class="border border-dark text-center" colspan="2">BASE IMPONIBLE</th>
                                    <th class="border border-dark text-center">TARIFA %</th>
                                    <th class="border border-dark text-center" colspan="2">MONTO SUJETO A RETENCION</th>
                                    <th class="border border-dark text-center" colspan="2">BASE IMPONIBLE</th>
                                    <th class="border border-dark text-center" colspan="2">TARIFA %</th>
                                    <th class="border border-dark text-center" colspan="2">PAGOS MAYORES</th>
                                    <th class="border border-dark text-center" colspan="2">SUSTRAENDO</th>
                                    <th class="border border-dark text-center"></th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                    <table class="table table-bordered table-sm table-hover" id="tabla_juridica">
                        <thead class="thead-light">
                            <tr>
                                <th class="border border-dark text-center" colspan="2" rowspan="2">CONCEPTO DE PAGO</th>
                                <th class="border border-dark text-center" colspan="6">NO DOMICILIADA</th>
                                <th class="border border-dark text-center" colspan="8">DOMICILIADA</th>
                            </tr>
                            <tr>
                                <th class="border border-dark text-center">NUMERAL</th>
                                <th class="border border-dark text-center" colspan="2">BASE IMPONIBLE</th>
                                <th class="border border-dark text-center">TARIFA %</th>
                                <th class="border border-dark text-center" colspan="2">MONTO SUJETO A RETENCION</th>
                                <th class="border border-dark text-center" colspan="2">BASE IMPONIBLE</th>
                                <th class="border border-dark text-center">TARIFA %</th>
                                <th class="border border-dark text-center" colspan="2">MONTO SUJETO A RETENCION</th>
                                <th class="border border-dark text-center"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                            </tr>
                        </tbody>
                    </table>
                </div>
              </div>

    </div>
</div>


@endsection

@section('scripts')
<script>
$(document).ready(function () {
    let id = 0;
        index();
// Funcion para consultar os datos de tabla de ISLR (conceptos y perceptor)
        function index(){
           
            // Función auxiliar para formatear base_imponible y tarifa_porcentaje
            const formatValue = (value, isTarifa = false) => {
                const noPercentValues = isTarifa ? ["N/A", "TARIFA N°2"] : ["N/A", "MSR"];
                if (noPercentValues.includes(value)) {
                    return value || '';
                }
                return value ? `${value}%` : '';
            };

            fetch('/api/conceptos')
            .then(response => response.json())
            .then(data => {
                console.log(data.data.unidadT[0].unidad_tributaria);

                let templateNatural = '';
                let templateJuridica = '';
                let unidad = '';

                    unidad = Number(data.data.unidadT[0].unidad_tributaria).toFixed(2).replace('.', ',');
                    $("#unidad_tributaria").text(unidad);

                    // Objeto para agrupar datos por tipo, concepto y sub_tipo
                    const groupedData = {
                        NATURAL: {},
                        JURIDICA: {}
                    };

                    // Agrupar datos por tipo, manteniendo todos los conceptos
                    Object.keys(data.data.perceptores).forEach(tipo => {
                        const conceptosMap = {};
                        data.data.perceptores[tipo].forEach(perceptor => {
                            const concepto = perceptor.concepto?.concepto_pago || 'Sin Concepto';
                            const subTipo = perceptor.sub_tipo || 'Sin Subtipo';
                            const numeral = perceptor.concepto?.numeral_literal || '';
                            const conceptoId = perceptor.concepto?.id || 'Sin ID';

                            // Crear una clave única combinando concepto_pago y concepto.id
                            const conceptoKey = `${concepto}|${conceptoId}`;

                            if (!conceptosMap[conceptoKey]) {
                                conceptosMap[conceptoKey] = {
                                    concepto_pago: concepto,
                                    numeral_literal: numeral,
                                    concepto_id: conceptoId,
                                    'NO RESIDENTE': null,
                                    'RESIDENTE': null,
                                    'NO DOMICILIADA': null,
                                    'DOMICILIADA': null
                                };
                            }
                            conceptosMap[conceptoKey][subTipo] = perceptor;
                           // console.log(`Agrupando: ${tipo} - ${conceptoKey} - ${subTipo}`);
                        });

                        // Convertir el mapa a una lista para groupedData[tipo]
                        groupedData[tipo] = Object.values(conceptosMap);
                    });

                    // Generar filas para tabla NATURAL
                        groupedData.NATURAL.forEach(item => {
                            const noResidente = item['NO RESIDENTE'] || {};
                            const residente = item['RESIDENTE'] || {};
                            const noResidenteBaseImponible = noResidente.base_imponible && noResidente.base_imponible !== 'N/A' ? `${noResidente.base_imponible}%` : noResidente.base_imponible || '';
                            const residenteBaseImponible = residente.base_imponible && residente.base_imponible !== 'N/A' ? `${residente.base_imponible}%` : residente.base_imponible || '';
                           // console.log(item);
                            

                            templateNatural += `
                                <tr class="tr-shadow">
                                    <td colspan="2">${item.concepto_pago}</td>
                                    <td class="text-center">${item.numeral_literal || ''}</td>
                                    <td class="text-center" colspan="2">${formatValue(noResidente.base_imponible)}</td>
                                    <td class="text-center">${formatValue(noResidente.tarifa_porcentaje, true)}</td>
                                    <td class="text-center" colspan="2">${noResidente.monto_retencion || ''}</td>
                                    <td class="text-center" colspan="2">${formatValue(residente.base_imponible)}</td>
                                    <td class="text-center" colspan="2">${formatValue(residente.tarifa_porcentaje, true)}</td>
                                    <td class="text-center" colspan="2">${residente.pagos_mayores || ''}</td>
                                    <td class="text-center" colspan="2">${residente.sustraendo || ''}</td>
                                    <td class="text-center">
                                        <div class="table-data-feature">
                                            <button class="btn btn-dark btn-sm edit mx-2" data-id=${item.concepto_id} data-toggle="tooltip" data-placement="top" title="Editar">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="btn btn-danger btn-sm delete" data-id=${item.concepto_id} data-toggle="tooltip" data-placement="top" title="Editar">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            `;
                        });

                        // Generar filas para tabla JURIDICA
                        groupedData.JURIDICA.forEach(item => {
                            const noDomiciliada = item['NO DOMICILIADA'] || {};
                            const domiciliada = item['DOMICILIADA'] || {};

                            templateJuridica += `
                                <tr class="tr-shadow">
                                    <td colspan="2">${item.concepto_pago}</td>
                                    <td class="text-center">${item.numeral_literal || ''}</td>
                                    <td class="text-center" colspan="2">${formatValue(noDomiciliada.base_imponible)}</td>
                                    <td class="text-center">${formatValue(noDomiciliada.tarifa_porcentaje, true)}</td>
                                    <td class="text-center" colspan="2">${noDomiciliada.monto_retencion || ''}</td>
                                    <td class="text-center" colspan="2">${formatValue(domiciliada.base_imponible)}</td>
                                    <td class="text-center">${formatValue(domiciliada.tarifa_porcentaje, true)}</td>
                                    <td class="text-center" colspan="2">${domiciliada.monto_retencion || ''}</td>
                                    <td class="text-center"> 
                                        <div class="table-data-feature">
                                            <button class="btn btn-dark btn-sm edit mx-2" data-id=${item.concepto_id} data-toggle="tooltip" data-placement="top" title="Editar">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="btn btn-danger btn-sm delete" data-id=${item.concepto_id} data-toggle="tooltip" data-placement="top" title="Editar">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            `;
                        });

                        // Actualizar el tbody de ambas tablas
                        $('#tabla_natural tbody').html(templateNatural);
                        $('#tabla_juridica tbody').html(templateJuridica);

            });
        }

        $(document).on('click', '#new-concepto', function() { 
            $('#modal-concepto').modal('show');
            $('#form-edit').attr('id', 'form-add');
            $('#form-add').trigger('reset');
            $('#modal-title').text('Crear nuevo concepto de pago');
        });

        $(document).on('submit', '#form-add', function(e) {
            e.preventDefault();
            console.log("Hola)")
            let form = new FormData(this);
            fetch('/api/conceptos', {
                method: 'POST',
                body: form
            })
            .then(response => response.json())
            .then(data => {

                console.log(data);
                $('#modal-concepto').modal('hide')
                $('#form-add').trigger('reset');
                index();
            })
            .catch(error => console.error(error));
        });

        $(document).on('click', '.edit', function(e) {
            e.preventDefault();
            id = $(this).data('id');
            fetch('/api/conceptos/' + id)
            .then(response => response.json())
            .then(data => {

                console.log(data);
                const concepto = data.data.concepto;
                $('#concepto_pago').val(concepto.concepto_pago);
                $('#numeral_literal').val(concepto.numeral_literal);
                $('#conceptos_id').val(concepto.id);

                const perceptores = data.data.perceptores;

                // Limpiar los campos de perceptores por si acaso
                $('#base_norecidente').val('');
                $('#tarifa_norecidente').val('');
                $('#monto_norecidente').val('');
                $('#base_recidente').val('');
                $('#tarifa_recidente').val('');
                $('#pagos_recidente').val('');
                $('#sustra_recidente').val('');
                $('#base_nodomiciliada').val('');
                $('#tarifa_nodomiciliada').val('');
                $('#monto_nodomiciliada').val('');
                $('#base_domiciliada').val('');
                $('#tarifa_domiciliada').val('');
                $('#monto_domiciliada').val('');

                // Llenar los campos de los perceptores según tipo y sub_tipo
                perceptores.forEach(perceptor => {
                    if (perceptor.tipo === 'NATURAL' && perceptor.sub_tipo === 'NO RESIDENTE') {
                        $('#base_norecidente').val(perceptor.base_imponible);
                        $('#tarifa_norecidente').val(perceptor.tarifa_porcentaje);
                        $('#monto_norecidente').val(perceptor.monto_retencion);
                    } else if (perceptor.tipo === 'NATURAL' && perceptor.sub_tipo === 'RESIDENTE') {
                        $('#base_recidente').val(perceptor.base_imponible);
                        $('#tarifa_recidente').val(perceptor.tarifa_porcentaje || 'N/A');
                        $('#pagos_recidente').val(perceptor.pagos_mayores);
                        $('#sustra_recidente').val(perceptor.sustraendo);
                    } else if (perceptor.tipo === 'JURIDICA' && perceptor.sub_tipo === 'NO DOMICILIADA') {
                        $('#base_nodomiciliada').val(perceptor.base_imponible);
                        $('#tarifa_nodomiciliada').val(perceptor.tarifa_porcentaje);
                        $('#monto_nodomiciliada').val(perceptor.monto_retencion);
                    } else if (perceptor.tipo === 'JURIDICA' && perceptor.sub_tipo === 'DOMICILIADA') {
                        $('#base_domiciliada').val(perceptor.base_imponible);
                        $('#tarifa_domiciliada').val(perceptor.tarifa_porcentaje);
                        $('#monto_domiciliada').val(perceptor.monto_retencion);
                    }
                });

                
                $('#form-add').attr('id', 'form-edit');
                $('#modal-concepto').modal('show');
                $('#modal-title').text('Editar concepto de pago');
            })
            .catch(error => console.error(error));
        });

        $(document).on('submit', '#form-edit', function(e) {
            e.preventDefault();
            let form = new FormData(this);
                form.append('_method', 'PUT');
            fetch('/api/conceptos/'+id, {
                method: 'POST',
                body: form
            })
            .then(response => response.json())
            .then(data => {
                //console.log(data);
                $('#modal-concepto').modal('hide');
                $('#form-edit').trigger('reset');
                $('#form-edit').attr('id', 'form-add');
                index();
            })
            .catch(error => console.error(error));
        });

        $(document).on('click', '.delete', function() {
            let id = $(this).data('id');
            if(confirm('Estas seguro de eliminar el Concepto?')) {
                fetch('/api/conceptos/' + id, {
                    method: 'DELETE'
                })
                .then(response => response.json())
                .then(data => {
                    /*$('#alert-content').html(data.message);
                    $('#alert').fadeIn();*/
                    index();
                })
                .catch(error => console.error(error));
            }
        });


});
</script>
@endsection