EVOLUTION-NINJA

Edit File: project-payment-edit-new.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.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="<?php echo base_url('public/assets/css/createproject.css');?>">
<link rel="stylesheet" href="<?php echo base_url('public/assets/css/font-awesome.min.css');?>">
<link rel="stylesheet" href="<?php echo base_url('public/assets/css/bootstrap.min.css');?>">
<link rel="stylesheet" href="<?php echo base_url('public/assets/css/sidebar.css');?>">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<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</h1>
        </div>
    </div>
      <div class="col-sm-3">
      
  </div>
    <style>
        .inpfieldname {
            font-family: Poppins;
            font-size: 18px;
            font-weight: 500;
            text-align: left;
            color: #1F1F21;

}
     .excelFile{
            padding:5px !important;
     
            
        }
        .excel{
            
            display:flex;
            justify-content:space-evenly;
        }
        .plus {
            background-color: transparent !important;
            padding: 2px;
            margin: 15px 15px;

}

.fieldsbox {
            border-radius: 23px !important;
            padding: 5px 10px !important;
            height: 45px;
            width: 85%
        }

.projdetail {
            margin-inline: auto;
            margin-top: 15px;
        }

.constuency_page {
            width: 100%;
            padding: 20px 16px;
        }

.textfields {
            border-radius: 14px;
        }

.file-list {
            display: flex;
            flex-wrap: wrap;
            /* Allows items to wrap to the next line if needed */
            margin-top: 10px;
            gap: 3px
        }

.file-item {
            display: flex;
            align-items: center;
            margin-right: 10px;
            font-size: 14px;
            /* Space between items */
            background: #fff;
            /* Background color for visibility */
            padding: 5px 10px;
            border-radius: 5px;
            /* Rounded corners */
        }

.delete-icon {
            margin-left: 8px;
            cursor: pointer;
            /* Show pointer on hover */
        }

.mul {
            font-size: 14px;
            color: red
        }

.buttns-cnl {
            margin-inline: 15px !important;
        }

@media (min-width: 768px) and (max-width: 1024px) {

.inpfieldname {
                font-size: 15px;
            }

.fieldsbox {
                border-radius: 23px !important;
                padding: 5px 10px !important;
                height: 45px;
                width: 100%;
            }

}

@media only screen and (max-width:620px) {
            .fieldsbox {
                width: 100%
            }

.home-section {
                height: 100%
            }
        }

/* ----------------------header styles  */

body {
            margin: 0px;
            padding: 0px;
            overflow-x: hidden;
        }

/* CSS adjustments */
        @media (max-width: 767px) {
            .logo-mobile {
                margin-right: auto;
                /* Align logo to the left */
            }

.navbar-toggler {
                margin-left: auto;
                /* Align hamburger menu to the right */
            }
        }

/* Logo styling */
        .logo {
            width: 100%;
            height: auto;
        }

/* Image styling */
        .header-image {
            width: 100%;
            height: auto;
        }

/* Center the search bar */
        .search-container {
            flex: 1;
            display: flex;
            justify-content: center;
        }

.search-bar {
            max-width: 500px;
            width: 100%;
        }

/* Align items on the right side */
        .right-side {
            display: flex;
            align-items: center;
        }

/* Hide elements in mobile view for header */
        @media (max-width: 767px) {
            .desktop-only {
                display: none;
            }

.header-image {
                width: 50% !important;
                height: auto;
            }

.navbar-nav {
                display: grid !important;
                grid-template-columns: auto auto auto !important;
                margin-left: 11px !important;
            }

.navbar-nav .nav-item {
                margin-bottom: 10px;
            }

.navbar-toggler {
                margin-left: auto;
            }

.logo-mobile {
                display: block;
                margin-bottom: 10px;
                text-align: center;
            }

.search-container {
                margin-bottom: 10px;
            }
        }

@media (min-width: 768px) {
            .navbar-toggler {
                display: none;
            }

.navbar-brand {
                margin-right: auto;
            }
            .rem {
    width: 100% !important;
}
        }

.img-notf,
        .notify-number {
            position: absolute;
        }

.notify-number {
            position: relative;
            left: 13px;
            font-size: 11px;
            top: -8px;
        }

.notify-number {
            position: relative !important;
            top: -6px;
            left: -11px;
            font-size: small;
            border-radius: 50%;
            color: red;
        }

.notify-number {
            position: relative;
            left: 14px;
            top: -6px;
        }

.search-bar {
            border-radius: 18px !important;
            border: none;
            box-shadow: 1px 1px 6px 0px #00000040;
            height: 35px;
        }

.lang {
            font-family: Poppins;
            font-size: 17px;
            font-weight: 600;
            line-height: 30px;
            text-align: left;
            position: relative;
            color: #464646;
        }

.admin {
            font-family: Poppins;
            font-size: 17px;
            font-weight: 600;
            line-height: 30px;
            text-align: left;
            position: relative;
            color: #464646;
        }

.lang:hover {
            color: #464646;
        }

.searc-top {
            position: relative;
            top: 8px;
            left: -27px;
            font-size: 18px;
        }

.rem {
            width: 70% !important;
        }

@media only screen and (max-width: 600px) {
            .header-image {
                width: 50% !important;
                height: auto;
            }
            .rem {
    width: 100% !important;
}
        }

@media (min-width: 768px) and (max-width: 1024px) {
            .logo {
                width: 80% !important;
                height: auto;
            }
            .rem {
            width: 93% !important;
        }

}

/* --------------------only for tablets-------------------------------- */
        @media (min-width: 768px) and (max-width: 1024px) {}

/* --------------------only for tablets-------------------------------- */

/* ---------------- header style end  */
    </style>
    
    <form id="project-edit-form">
        <div class="createproject">
            <div class="row projdetail">

<div class="col-sm-5">
    <label for="Expenditure" class="form-label inpfieldname">Payment</label>
    <?php if (!empty($expenditures)): ?>
        <?php foreach ($expenditures as $index => $expenditureData): ?>
            <div class="input-group mb-2" id="expenditure-<?= $index; ?>">
                <input type="text" name="expenditure[]" class="form-control fieldsbox" id="Expenditure"
                       value="<?= $expenditureData['expenditure_amount'] ?>">
                <input type="text" name="expenditure_date[]" class="form-control fieldsbox datepicker ml-2"
                       id="ExpenditureDate-<?= $index; ?>"
                       value="<?= isset($expenditureData['expenditure_date']) 
                           ? (new DateTime($expenditureData['expenditure_date']))->format('d/m/Y') 
                           : '' ?>">
                <i class="fa fa-minus-square-o remove-field removeExpenditure" aria-hidden="true"
                   style="cursor: pointer;" data-index="<?= $index; ?>"></i>
            </div>
        <?php endforeach; ?>
    <?php else: ?>
        <div class="input-group mb-2" id="expenditure-0">
            <input type="text" name="expenditure[]" class="form-control fieldsbox" id="Expenditure">
            <input type="text"   placeholder="dd/mm/yy" name="expenditure_date[]" class="form-control fieldsbox datepicker ml-2  date"  
                   id="ExpenditureDate-0">
            <i class="fa fa-minus-square-o remove-field removeExpenditure" aria-hidden="true"
               style="cursor: pointer;" data-index="0"></i>
        </div>
    <?php endif; ?>
    <i class="fa fa-plus-square-o" aria-hidden="true" id="add-more-expenditure-field" style="cursor: pointer;"></i>
    <div id="expenditure-add-div"></div>
</div>
<div class="col-sm-1"></div>

</div>

</div>

<div class="row">

<div class="col-sm-6 buttns-cnl">
                    <button type="submit" class="submit">Submit</button>
                    <button type="button" id="btn-cancel" class="cancel">Cancel</button>
                </div>
            </div>
        </div>
    </form>
    
<div class="container mt-4">
    <div class="card shadow p-3">
        <h4 class="mb-3">Payment Details</h4>

<table class="table table-bordered table-striped" id="exp-table">
    <thead style="background-color:#F4F4F4">
        <tr>
            <th>#</th>
            
            <th>Estimated Cost</th>
            <th>Released Amount</th>
            <th>Payment Amount</th>
        
        </tr>
    </thead>
    <tbody></tbody>

<tfoot>
        <tr class="table-secondary">
            <th colspan="3"></th>
            <th><strong>Total: ₹ <span id="grand-total">0</span></strong></th>
       
        </tr>
    </tfoot>
</table>

</div>
</div>

</section>

$.ajax({
       url: "<?= base_url('payment-details/'). $project['id'] ?>",

type: "GET",
        dataType: "json",
        success: function (response) {

let tbody = "";
            let total = 0;

if (response.length > 0) {
                $.each(response, function (index, row) {

total += parseFloat(row.total_payment ?? 0);

tbody += `
                        <tr id="exp-row-${index}">
                            <td>${index + 1}</td>
                            <td>${row.total_estimated_amount}</td>
                            <td>${row.total_released_amount ?? 0}</td>
                            <td>${row.total_payment ?? 0 }</td>
                            
                        </tr>
                    `;
                });
            } else {
                tbody = `<tr><td colspan="6" class="text-center">No records found</td></tr>`;
            }

$("#exp-table tbody").html(tbody);
            $("#grand-total").text(total);
        }
    });
});

function formatDate(dateStr) {
    const date = new Date(dateStr);
    return date.toLocaleDateString('en-GB');
}
</script>

$('input[name="expenditure_date[]"]').each(function () {
                var currentDate = $(this).val(); 
                if (currentDate) {
                    var formattedDate = formatDate(currentDate); 
                    $(this).val(formattedDate); 
                }
            });

var formData = new FormData($(this)[0]);
                $.ajax({
                    url: "<?php echo base_url('project-update-expenditure-new/' . $project['id']) ?>",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (response) {

if (response.result === 1) {
                            Swal.fire({
                                icon: "success",
                                title: response.message,
                                showConfirmButton: false,
                                timer: 2000
                            });

window.location.reload(); 
                        } else {

alert(response.message);
                        }
                    },
                    error: function (xhr, status, error) {

alert('An error occurred: ' + xhr.responseText);
                    }
                });
            });
        });
    </script>

let index = $(this).data('index');
    let amount = $(this).data('amount');
    let date = $('#exp-row-' + index + ' td:nth-child(3)').text(); // read table date

if(!confirm("Are you sure you want to delete this expenditure?")) return;

$.ajax({
        url: "<?= base_url('project/delete-expenditure-amount1') ?>",
        type: "POST",
        data: {
            project_id: <?= $project['id'] ?>,
            expenditure_amount: amount,
            expenditure_date: date,
            '<?= csrf_token() ?>': '<?= csrf_hash() ?>'
        },
        success: function(response) {

if (response.success) {

// remove row
                $('#exp-row-' + index).fadeOut(300, function() {
                    $(this).remove();
                    updateGrandTotal(); // recalc total
                });

alert("Expenditure deleted successfully");
                window.location.reload();

} else {
                alert("Error: " + response.message);
            }
        },
        error: function(xhr, status, error){
            console.log(error);
        }
    });
});
</script>

// Get Amount
    var expenditureValue = $('#expenditure-' + index + ' input[name="expenditure[]"]').val();

// Get Date
    var expenditureDate = $('#expenditure-' + index + ' input[name="expenditure_date[]"]').val();

if (confirm('Are you sure you want to delete this expenditure record?')) {
        $.ajax({
            url: '<?= base_url("project/delete-expenditure-amount1"); ?>',
            type: 'POST',
            data: {
                project_id: <?= $project['id'] ?>,
                expenditure_amount: expenditureValue,
                expenditure_date: expenditureDate,
                '<?= csrf_token() ?>': '<?= csrf_hash() ?>'
            },
            success: function (response) {
                if (response.success) {
                    $('#expenditure-' + index).remove();
                    alert('Expenditure deleted successfully.');
                } else {
                    alert('Error deleting expenditure: ' + response.message);
                }
            },
            error: function (xhr, status, error) {
                console.error('Error:', error);
            }
        });
    }
});
</script>

// Dynamically add Expenditure fields
    $('#add-more-expenditure-field').click(function () {
        let index = $('.input-group[id^="expenditure-"]').length;
        $('#expenditure-add-div').append(`
            <div class="input-group mb-2" id="expenditure-${index}">
                <input type="text" name="expenditure[]" class="form-control fieldsbox" id="Expenditure">
                <input type="text" name="expenditure_date[]" class="form-control fieldsbox datepicker ml-2" id="ExpenditureDate-${index}">
                <i class="fa fa-minus-square-o remove-field removeExpenditure" aria-hidden="true" style="cursor: pointer;" data-index="${index}"></i>
            </div>
        `);

// Reinitialize datepicker for newly added date fields
        $(`#ExpenditureDate-${index}`).datepicker({
            dateFormat: 'dd/mm/yy',
            changeMonth: true,
            changeYear: true
        });
    });
});

</script>

<?php echo view('includes/footer'); ?>