EVOLUTION-NINJA

Edit File: new_expenditure.php

<?php echo view('includes/sidebar'); ?>
<script type="text/javascript" src="<?php echo base_url('public/assets/js/jquery-3.6.0.min.js'); ?>"></script>
<script src="<?php echo base_url('public/assets/toastr/toastr.min.js');?>"></script>
<link rel="stylesheet" href="<?php echo base_url('public/assets/toastr/toastr.min.css');?>">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<section class="home-section">
    <div class="home-content">
        <i class='bx bx-menu'></i>
        
    </div>
    <div class="row m-0">
        <div class="col-sm-12">
            <h1 class="crt-pjt">Payment Details</h1>
        </div>
    </div>
    
    <form id="report">
        <div class="row m-0">
            <div class="constuency_page">
                <div class="constuencydetails">

<div class="constuencydetail row">
                        <div class="col-sm-4">
                            <label for="constituency" class="form-label inpfieldname">Constituency Name</label>
                            <select class="form-select form-control fieldsbox" id="constituency" name="constituency">
                                <option value=""></option>
                            </select>
                        </div>
                        <div class="col-sm-4">
                            <label for="mla" class="form-label inpfieldname">MLA</label>
                            <select class="form-select form-control fieldsbox" id="mla" name="mla">
                                <option value=""></option>
                            </select>
                        </div>
                        <div class="col-sm-4">
                            <label for="department" class="form-label inpfieldname">Department</label>
                            <select class="form-select form-control fieldsbox" id="department" name="department">
                                <option value=""></option>
                            </select>
                        </div>

</div>

<div class="constuencydetail row">
                       
                       
                       
                       
                       
                       
                    
                       
                       
                       
                       
                       
                       
                        
                        
                        <div class="col-sm-4">
                            <label for="engineer" class="form-label inpfieldname">Fund Wise</label><br>
                            <select class="form-select form-control fieldsbox" aria-label="Default select example"
                                id="Fund"  name="fund">
                                <option value=""></option>
                            </select>
                        </div>
                        <div class="col-sm-4">
                            <label for="year" class="form-label inpfieldname">Financial Year</label>
                            <select class="form-select form-control fieldsbox" id="year" name="year">
                                <option value="">Select</option>
                                
                                <option value="2028-29">2028-29</option>
                                <option value="2027-28">2027-28</option>
                                <option value="2026-27">2026-27</option>
                                <option value="2025-26">2025-26</option>
                                <option value="2024-25">2024-25</option>
                                <option value="2023-24">2023-24</option>
                                <option value="2022-23">2022-23</option>
                                <option value="2021-22">2021-22</option>
                                <option value="2020-21">2020-21</option>
                                <option value="2019-20">2019-20</option>
                                <option value="2018-19">2018-19</option>
                                <option value="2017-18">2017-18</option>
                                <option value="2016-17">2016-17</option>
                                <option value="2015-16">2015-16</option>
                                <option value="2014-15">2014-15</option>
                            </select>
                        </div>
                    
                        
                    <div class="col-sm-4">
                        <label for="engineer" class="form-label inpfieldname">Status</label><br>
                        <select class="form-select form-control fieldsbox" aria-label="Default select example"
                                id="status"  name="Status">
                                <option value="1">All</option>
                                <option value="2">Progress</option>
                                <option value="3">Action plan</option>
                                   <?php if (session('role') == 0): ?>
                           <option value="4">hide</option>
                     <?php endif; ?>
                            </select>
                   </div>
                        
                    </div>
                    
                    
                    <div class="constuencydetail row">
                        
                        
              </div>
                    
                    
                </div>
            </div>

<div class="col-sm-6 buttns-cnl">
                <button type="submit" class="submit" style="width:200px">Get report</button>
            </div>
        </div>
    </form>
    <br><br>
    <div class="container-fluid inp-lbl">
        <table id="datatable" class="display" style="width:100%">
            <thead>
                <tr>
                    <th>SL NO</th>
                    <th>Action</th>
                    <th></th>
                    <th>ID</th>
                    <th class="width">Project Name</th>
                    <th>Department</th>
                    <th>Constituency</th>
                    <th>MLA</th>
                    <th>MP</th>
                    <th>MLC</th>
                    <th>Date of proposal</th>
                    <th>Submission Date</th>
                    <th>Estimated Cost</th>
                    <th>Date Of Approval</th>
                    <th>Total Released Amount</th>
                    <th>APM</th>
                    <th>Engineer</th>
                    <th>Payment</th>
                    <th>Start Date</th>
                    <th>ADM Details</th>
                    <th>Action</th>

</tr>
            </thead>
            <tbody>
            </tbody>
        </table>

</section>

function formatAmount(amount) {
        return parseFloat(amount || 0).toFixed(2);
    }

$(document).ready(function () {

{
                        className: 'details-control',
                        orderable: false,
                        data: null,
                        defaultContent: '<i class="fa fa-plus" style="cursor: pointer;"></i>',
                    },
                    { data: 'id', visible: false },
                    { data: 'project_name' },
                    { data: 'department_name' },
                    { data: 'constituency_name' },
                    { data: 'mla_name' },
                    { data: 'mp_name' },
                    { data: 'mlc_name' },
                    { data: 'date_of_Proposal', render: formatDate },
                    { data: 'est_sub_date', render: formatDate },
                    { data: 'estimated_cost', render: formatAmount },
                    { data: 'date_of_approval', render: formatDate },
                    { data: 'total_released_amount', render: formatAmount },
                    { data: 'apm_first_name', title: 'APM' },
                    { data: 'engineer_first_name', title: 'Engineer' },
                    // { data: 'supervisor_first_name', title: 'supervisor' },
                    { data: 'total_expenditure_cash', title: 'Payment' , render: formatAmount},
                    { data: 'start_date', title: 'Start Date', render: formatDate },
                    { data: 'adm_date', title: 'ADM Date', render: formatDate },
                    {
                        data: null,
                        render: function (data, type, row) {
                            let buttons = '';
                            if (role ==6) {
                                buttons += `<button class="btn edit--butt" onclick="Editpayment_new(${row.id})">Payment</button>`;
                            }
                            return `<div class="crud--buttons">${buttons}</div>`;
                        }
                    }
                ],
                rowCallback: function (row, data, index) {
                    $('td:eq(0)', row).html(index + 1); // Update S.No
                },
                language: {
                    emptyTable: "No data available"
                },
                columnDefs: [
                    { targets: [1, 2], width: '10px' },
                    { targets: [3, 4, 5, 6, 7], },
                    { targets: '_all', className: 'dt-center' }
                ]
            });

$('#datatable tbody').on('click', 'td.details-control i', function () {
                const tr = $(this).closest('tr');
                const row = table.row(tr);

if (row.child.isShown()) {
                    row.child.hide();
                    tr.removeClass('shown');
                } else {
                    const data = row.data();
                    if (data) {
                        row.child(formatSubgrid(data)).show();
                        tr.addClass('shown');
                    } else {
                        row.child('<div>No data available</div>').show();
                        tr.addClass('shown');
                    }
                }
            });
        }

function formatSubgrid(data) {
            let subgridHtml = '<table class="subgrid-table" cellpadding="5" cellspacing="0" border="1" style="padding-left:50px; background-color: #f9f9f9;">';
            subgridHtml += '<tr><th>ADM Amount</th><th>Fund Wise</th><th>Financial Year</th><th>Total Expenditure</th><th>Status</th><th>Labour Contract</th><th>Remarks</th><th>Proposal Documents</th><th>Estimation Documents</th><th>Approval Documents</th><th>Progress Documents</th></tr>';

let proposalDocumentNames = formatProposalDocuments(data.proposal_document_names);
            let estimationDocumentNames = formatEstimationDocuments(data.estimation_document_names);
            let approvalDocumentNames = formatApprovalDocuments(data.approval_document_names);
            let progressDocumentNames = formatprogressDocuments(data.progress_document_names);

subgridHtml += `<tr>
                <td>${formatAmount(data.adm_amount)}</td>
                <td>${data.fund_name || ''}</td>
                <td>${data.financial_year}</td>
                <td>${formatAmount(data.total_expenditure)}</td>
                <td>${data.status_name || ''}</td>
                <td>${data.labour_contract || ''}</td>
                <td>${data.remarks}</td>
                <td>${proposalDocumentNames}</td>
                <td>${estimationDocumentNames}</td>
                <td>${approvalDocumentNames}</td>
                <td>${progressDocumentNames}</td>
            </tr>`;

subgridHtml += '</table>';
            return subgridHtml;
        }

$('#report').submit(function (e) {
            e.preventDefault();
            const formData = new FormData(this);
            fetchreport(formData);
        });

fetchreport();
    });
</script>

$.ajax({
                url: '<?php echo base_url("fetch-constituency"); ?>',
                method: 'GET',
                success: function (response) {
                    if (response.length > 0) {
                        var options = '<option value="">Select Constituency</option>';
                        $.each(response, function (key, value) {
                            options += `<option value="${value.id}">${value.constituency_name}</option>`;
                        });
                        $('#constituency').html(options);
                    } else {
                        console.log('No constituency found');
                    }
                },
                error: function (xhr, status, error) {
                    console.error("Error fetching constituency:", error);
                }
            });
        });
        
</script>

$.ajax({
                url: '<?php echo base_url("fetch-department"); ?>',
                method: 'GET',
                success: function (response) {

if (response.length > 0) {
                        var options = '<option value="">Select Department</option>';

$.each(response, function (key, value) {
                            options += `<option value="${value.id}">${value.department_name}</option>`;
                        });
                        $('#department').html(options);
                    } else {
                        console.log('No department found');
                    }
                },
                error: function (xhr, status, error) {
                    console.error("Error fetching department:", error);
                }
            });
        });
</script>
<script>
           $(document).ready(function () {

$.ajax({
                url: '<?php echo base_url("fetch-mla"); ?>',
                method: 'GET',
                success: function (response) {
                    if (response.length > 0) {
                        var options = '<option value="">Select </option>';
                        $.each(response, function (key, value) {
                            options += `<option value="${value.id}">${value.mla}</option>`;
                        });
                        $('#mla').html(options);
                    } else {
                        console.log('No mla found');
                    }
                },
                error: function (xhr, status, error) {
                    console.error("Error fetching mla:", error);
                }
            });
        });
        
</script>

$.ajax({
                url: '<?php echo base_url("fetch-mp"); ?>',
                method: 'GET',
                success: function (response) {
                    if (response.length > 0) {
                        var options = '<option value="">Select </option>';
                        $.each(response, function (key, value) {
                            options += `<option value="${value.id}">${value.mp}</option>`;
                        });
                        $('#mp').html(options);
                    } else {
                        console.log('No mp found');
                    }
                },
                error: function (xhr, status, error) {
                    console.error("Error fetching mp:", error);
                }
            });
        });
        
</script>

$.ajax({
                url: '<?php echo base_url("fetch-mlc"); ?>',
                method: 'GET',
                success: function (response) {
                    if (response.length > 0) {
                        var options = '<option value="">Select </option>';
                        $.each(response, function (key, value) {
                            options += `<option value="${value.id}">${value.mlc}</option>`;
                        });
                        $('#mlc').html(options);
                    } else {
                        console.log('No mlc found');
                    }
                },
                error: function (xhr, status, error) {
                    console.error("Error fetching mlc:", error);
                }
            });
        });
        
</script>

function Editpayment_new(id) {
        var url = "<?= base_url('project-payment-edit-new/') ?>" + id;
        window.open(url, 'editPaymentWindow');
    }

</script>

$('#datatable').DataTable().ajax.reload(null, false);
                            } else {
                                Swal.fire({
                                    icon: "error",
                                    title: "Failed to delete project",
                                    showConfirmButton: false,
                                    timer: 2000
                                });
                            }
                        },
                error: function () {
                    console.log('Error deleting project');
                }
            });
    }
    });
}
</script>

$.ajax({
        url: '<?php echo base_url("update-project-status"); ?>',
        type: 'POST',
        data: {
            id: projectId,
            project_status: status
        },
        success: function (response) {
            alert(
                `Project status updated to ${status === 1 ? 'Checked' : 'Unchecked'}`
            );
        },
        error: function (xhr, status, error) {
            console.error("Error updating status:", error);
        }
    });
});

</script>

table.dataTable {
        width: 100%;
        border-collapse: collapse;
    }

table.dataTable th,
    table.dataTable td {
        padding: 5px 10px;
        text-align: center;
        font-size: 0.9em;
    }

table.dataTable th {
        background-color: #f2f2f2;
        border-bottom: 2px solid #ddd;
    }

table.dataTable tr:nth-child(even) {
        background-color: #f9f9f9;
    }

table.dataTable tr:hover {
        background-color: #f1f1f1;
    }

.crud--buttons {
        display: flex;
        justify-content: center;
    }

.btn {
        margin: 0 5px;
        padding: 5px 10px;
        font-size: 0.8em;
    }

.btn.edit--butt {
        background-color: #4CAF50;
        color: white;
    }

.btn.delete--butt {
        background-color: #f44336;
        color: white;
    }

.subgrid-table {
        width: 100%;
        margin-top: 5px;
        border-collapse: collapse;
    }

.subgrid-table th,
    .subgrid-table td {
        padding: 2px;
        border: 1px solid #ddd;
    }
</style>