nhance/app/Views/claim_files_upload.php

<div class="tab-pane" id="fileupload">
    <div class="row">
        <div class="col-xl-12">
            <div id="accordion" class="mb-3">
                <div class="card mb-1">
                    <h5 class="m-1">
                        <a id="toggleIcon" class="text-dark float-right" data-toggle="collapse" href="#collapseOne"
                            aria-expanded="true">
                            <i id="icon" class="mdi mdi-chevron-down mr-1 text-primary" style="font-size: 28px;color:black;"></i>
                        </a>
                    </h5>
                    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                        <div class="card-body">
                            <form class="parsley-examples" id="drive_file_upload_form" method="post"
                                enctype="multipart/form-data">

                                <input type="hidden" id="ticket_id_url" name="ticket_id_url">

                                <div class="form-group">

                                    <div id="dynamic-form-container"></div>

                                    <div class="form-group text-right m-b-0">
                                        <button type="submit" class="btn btn-primary waves-effect waves-light mr-1"
                                            id="g_drive_file_upload_sbt_btn">Submit</button>
                                    </div>

                                </div>
                            </form>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div id="file_table" class="card">
        <div class="card-body">
            <div class="row" style="padding-bottom: 10px;">
                <div class="col-6" style="align-self: center;">
                    <h4 style="position: relative;">File List</h4>
                </div>

            </div>
            <div class="table-responsive" style="overflow-x: auto;">
                <table id="scroll-horizontal-datatable" class="table w-100 nowrap">
                    <thead class="bg-light">
                        <tr>
                            <th>S.No</th>
                            <th>Docs Name</th>
                            <th>File Name</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="table_bd">
                    </tbody>
                </table>
                <div>
                </div>
            </div>
        </div><!-- end col -->
    </div>
</div>


<!-- edit modal -->
 <div class="modal fade" id="edit_url_modal" tabindex="-1" role="dialog" aria-labelledby="editUrlModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <form id="edit_url_form">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit URL</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span>&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <input type="hidden" id="edit_url_id" name="id">
                
                <div class="form-group">
                    <label for="edit_doc_name">Document Name</label>
                    <input type="text" class="form-control" id="edit_doc_name" name="doc_name">
                </div>

                <div class="form-group">
                    <label for="edit_url_link">URL</label>
                    <input type="text" class="form-control" id="edit_url_link" name="url">
                </div>
            </div>

            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Save Changes</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </form>
  </div>
</div>




<script>
$(document).ready(function(){



     let ticket_id = $('#ticket_master_id').val();

    $('#ticket_id_url').val(ticket_id);

     let urlData = getUrlDataByTicketId(ticket_id);


   
     
})

$("#drive_file_upload_form").submit(function(event) {

    event.preventDefault(); 

    var isValid = $('#drive_file_upload_form').parsley().validate();    
    if (!isValid) { 
        console.log('Form is Empty', 'Warning');
        return ; 
    }

    form_action = '<?php echo base_url() . 'ticket/upload_url' ?>';

    $('.loader').fadeIn();
    $('.loader-mask').fadeIn();

    var formData = new FormData($('#drive_file_upload_form')[0]);



    $.ajax({
        data:formData,
        url: form_action,
        type: "POST",
        dataType: 'json',
        processData: false,
        contentType: false,
        success: function(res) {

            $('.loader').fadeOut();
            $('.loader-mask').delay(350).fadeOut('slow');
            
            if(res.status == true){
                toastr.success(res.message, 'Success');
                window.location.reload();
            }else{
                toastr.error(res.message, 'Error');
            }

        },
        error: function (xhr, status, error) {
            console.log("error in submission of url data");
            console.error(xhr.responseText);
            console.error(status, error);
            
        },
        complete : function(){
        console.log("ajax call is completed for submission of url data..!!");
            $('.loader').fadeOut();
            $('.loader-mask').delay(350).fadeOut('slow');
        }
    });
});

function addHTMLInput() 
{
    const container = document.getElementById('dynamic-form-container');
    const newRow = document.createElement('div');
    newRow.className = 'form-row dynamic-form-row';
    newRow.innerHTML = `
        <div class="form-group col-md-5">
            <label for="file_name">Document Name<span class="text-danger">*</span></label>
            <input type="text" class="form-control" id="docs_name" name="docs_name[]" placeholder="Enter file name" required
            value=""
            >
        </div>
        <div class="form-group col-md-5">
            <label for="file">URL<span class="text-danger">*</span></label>
            <input type="text" class="form-control" id="url_name" name="url[]" required
            value=""
            >
        </div>
        <div class="form-group col-md-2" style="position: relative;top: 28px;">
            <a class="btn btn-danger waves-effect waves-light" onclick="removeHTMLInput(this)">x</a>
            <a class="btn btn-primary waves-effect waves-light mr-1" onclick="addHTMLInput(this)">+</a>
        </div>
    `;
    container.appendChild(newRow);

}

function removeHTMLInput(element) 
{
    const container = document.getElementById('dynamic-form-container');
    const rows = container.querySelectorAll('.dynamic-form-row');

    if (rows.length > 1) {
        const row = element.closest('.dynamic-form-row');
        row.remove();
    } 
}

 function getUrlDataByTicketId(ticket_id) {

    // Show loader
    $('.loader').fadeIn();
    $('.loader-mask').fadeIn();

    $.ajax({
        url: "<?= base_url('ticket/getUrlDataByTicketId')?>", // base_url must be defined in JS
        type: "POST",
        data: { ticket_id: ticket_id },
        dataType: 'json',
        success: function(response) {
            console.log('Form submitted response:', response);

            if (response.status === true) {
                create_url_list(response.data);
                addHTMLInput();
                return ;
            } else {
                addHTMLInput();
                console.warn("No Data");
            }
        },
        error: function(xhr, status, error) {
            console.log("error in get urldata api");
            console.error("AJAX Error:", error);
        },
        complete: function() {
            // Hide loader
            $('.loader').fadeOut();
            $('.loader-mask').delay(350).fadeOut('slow');
            console.log("Ajax is completed for get url data..!!");
        }
    });
}

function openEditModal(id, docName, url) {
    $('#edit_url_id').val(id);
    $('#edit_doc_name').val(docName);
    $('#edit_url_link').val(url);
    $('#edit_url_modal').modal('show'); // Bootstrap modal
}


function create_url_list(data) {
    $('#table_bd').empty(); // clear existing rows

    let base_url = "<?php echo base_url() ?>";

    if (data && data.length > 0) {
        let html = "";

        data.forEach((item, index) => {
            html += `
                <tr>
                    <td>${index + 1}</td>
                    <td>${item.doc_name}</td>
                    <td><a href="${item.url}" target="_blank">${item.url}</a></td>
                    <td>
                        <a href="javascript:void(0);" class="delete-url"
                        style="bacolor:black;"
                        data-href="${base_url}/ticket/remove_url?id=${item.id}">
                            <i class="mdi mdi-delete mr-1"></i>
                        </a>
                    </td>
                </tr>
            `;
        });

        $('#table_bd').append(html);
    } else {
        $('#table_bd').html('<tr><td colspan="4">No Data Found</td></tr>');
    }
}
$(document).on('click', '.delete-url', function (e) {
    e.preventDefault();
    const url = $(this).data('href');
    const $row = $(this).closest('tr'); // capture the row before async execution

    confirmActionSweertAlert("Do you want to delete?", "Yes, Proceed!", "No, Cancel")
        .then((confirmed) => {
            if (confirmed) {
                $.ajax({
                    url: url,
                    type: "GET",
                    dataType: "json",
                    beforeSend: function () {
                        $('.loader').fadeIn();
                        $('.loader-mask').fadeIn();
                    },
                    success: function (response) {
                        if (response.status === true) {
                            toastr.success('Removed Successfully');
                            $row.remove(); 
                        } else {
                            toastr.error(response.message || 'Deletion failed');
                        }
                    },
                    error: function (xhr, status, error) {
                        console.log("error ");
                        console.error("AJAX Error:", error);
                        toastr.error('AJAX request failed');
                    },
                    complete: function () {
                        $('.loader').fadeOut();
                        $('.loader-mask').delay(350).fadeOut('slow');
                        console.log("Ajax is completed for get url data..!!");
                    }
                });
            }
        });
});




</script>