<script nonce="<?php echo e(app('csp_nonce')); ?>">
    $(document).ready(function() {
        $('#detail').DataTable({
            responsive: true,
            "bLengthChange": false,
            "language": {
                "url": `<?php echo e(asset(ASSETS_JS)); ?>/Spanish.json`
            },
            order: [
                [0, 'asc']
            ],
        });
    });

    $("#btn-add-service").click(function() {
        let course = $("#student_course").val();
        if (course < 1) {
            toastr.error('Primero debes seleccionar el curso del estudiante continuar.', 'Error de Validación');
            validateField($('#student_course').val(), 'student_course', 'select', true, 'Seleccione curso...');
            $('#student_course').focus();
            return false;
        }

        cargando('Generando Conceptos de Pago...');
        $.ajax({
            url: "<?php echo e(route('contract-generate-payment-concept', ['id' => $form_data->id])); ?>",
            type: "GET",
            data: {
                id: <?php echo e($form_data->id); ?>,
                course: course,
                _token: "<?php echo e(csrf_token()); ?>"
            },
            dataType: 'json',
            success: function(resp) {
                setTimeout(function() {
                    console.log(resp);
                    swal.close();
                    if (resp.type == 'error') {
                        toastr["error"](`${resp.msg}`, "ERROR DE VALIDACIÓN");
                        return;
                    }
                    generateTables(resp.data);
                }, 800);
            },
            error: function(error) {
                swal.close();
                toastr["error"](`Ocurrió un error. Recargue e intente nuevamente`,
                    "ERROR INTERNO")
                console.log(JSON.stringify(error))
            }
        });
    });
</script>


<script nonce="<?php echo e(app('csp_nonce')); ?>">
    // Función para generar y agregar tablas dinámicas
    function generateTables(concepts) {
        let container = $('#tables-container'); // Div donde se generarán las tablas
        container.empty(); // Limpiar el contenedor antes de agregar nuevas tablas

        // Iterar sobre los conceptos de pago
        concepts.forEach(function(conceptGroup) {
            conceptGroup.forEach(function(concept) {
                // Crear la estructura de la tabla
                let table = `
                    <h6><b>${concept.payment_concept}</b></h6>
                    <table
                        class="border table align-items-center table-flush table-bordered text-center table-striped text-nowrap font-14"
                        cellspacing="0" width="100%">
                        <thead class="bg-primary">
                            <tr>
                                <th scope="col" class="sort text-center text-white">
                                    ÍTEM DE CARGO
                                </th>
                                <th scope="col" class="sort text-center text-white" style="width: 20%;">
                                   MONTO
                                </th>
                                   <th scope="col" class="sort text-center text-white" style="width: 15%;">
                                    TIPO
                                </th>
                                <th scope="col" class="sort text-center text-white" style="width: 10%;">
                                    SEL.
                                </th>
                            </tr>
                        </thead>
                        <tbody id="table-body-${concept.id}">
                            <!-- Aquí se inyectarán las filas de la tabla -->
                        </tbody>
                    </table>
                    <hr/>
                `;

                // Agregar la tabla al contenedor
                container.append(table);

                // Iterar sobre los detalles y agregar las filas a la tabla correspondiente
                concept.details.forEach(function(detail) {
                    let row = `
                        <tr>
                            <td>${detail.description}</td>
                            <td>${detail.price_text}</td>
                            <td>${detail.required_element ? 'Obligatorio' : 'Opcional'}</td>
                            <td><input ${detail.required_element ? 'checked' : ''} class="chk" data-required="${detail.required_element ? '1' : '0' }" type="checkbox" name="contract_detail[]" value="${detail.item_id}"></td>
                        </tr>
                    `;
                    $(`#table-body-${concept.id}`).append(row);
                });
            });
        });
    }

    // Llamar a la función para generar las tablas con los datos
    $(document).on("change", ".chk", function() {
        if (!$(this).is(":checked")) {
            // Volver a marcar el checkbox
            let required = $(this).data('required');
            if(required){
                $(this).prop("checked", true);
                toastr.error("No puedes desmarcar esta opción porque es obligatoria.", "ITEMS OBLIGATORIO");
            }
        }
    });
</script>
<?php /**PATH /var/www/plan-b.bradford/resources/views/admin/contracts/sections_contract_edit/payment_concepts_contract_js.blade.php ENDPATH**/ ?>