EVOLUTION-NINJA

Edit File: createProject.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>
        <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
        
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.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">Create Project</h1>
            
          
        </div>
    </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
        }
        .projectinputs {
    width: 93% !important;
}
.input-group {
    width: 93% !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%;
        }
        .projectinputs {
    width: 100% !important;
}
.input-group {
    width: 100% !important;
}
    }

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

.home-section {
            height: 100%
        }
        .projectinputs {
    width: 100% !important;
}
.input-group {
    width: 100% !important;
}
    }

</style>
    
    <form  id="project-form">
        <div class="createproject">

<div class="row projdetail">

                
                 
               
                 <div class="col-sm-4">
                    <label class="form-label inpfieldname" for="department">Project Name</label>
                   <input type="text" name="projectName" id="projectName" class="form-control fieldsbox " placeholder="Enter Project Name">
                </div>
                <div class="col-sm-4">
                    <label class="form-label inpfieldname" for="department">Total Amount</label>
                   <input type="text" name="total_amount" id="total_amount" class="form-control fieldsbox" placeholder="Enter Total Amount">
                </div>
              
              <div class="col-sm-4">
                    <label class="form-label inpfieldname" for="department">Department</label>
                    <select name="department" id="department" class="form-control fieldsbox">
                       
                    </select>
                </div>
              
            </div>
            <div class="row projdetail">

<div class="col-sm-4">
                    <label class="form-label inpfieldname" for="constituency">Constituency</label>
                    <select name="constituency" id="constituency" class="form-control fieldsbox">
                   
                    </select>
                </div>

<div class="col-sm-4">
                    <label class="form-label inpfieldname" for="fundwise">MLA / MLC / MP</label>
                    <select name="mla" id="mla" class="form-control fieldsbox">
                        <option value="">Select</option>
                        
                    </select>
                </div>
                  <div class="col-sm-4">
                    <label class="form-label inpfieldname" for="fundwise">Fund Wise</label>
                    <select name="fundwise" id="fundwise" class="form-control fieldsbox">
                        <option value="">Select</option>
                        
                        
                        
                    </select>
                </div>
            </div>

<div class="row projdetail">

<div class="col-sm-4">
                    <label class="form-label inpfieldname" for="apm">APM </label>
                    <select name="apm" id="apm" class="form-control fieldsbox">
                        <option value="">Select</option>
                       
                    </select>
                </div>

<div class="col-sm-4">
                    <label class="form-label inpfieldname" for="Engineer">Engineer</label>
                    <select name="engineer" id="Engineer" class="form-control fieldsbox">
                    <option value="">Select</option>
                    </select>
                </div>
                <div class="col-sm-4">
                    <label class="form-label inpfieldname" for="Engineer">Supervisor</label>
                    <select name="supervisor" id="supervisor" class="form-control fieldsbox">
                    <option value="">Select</option>
                    </select>
                </div>
            </div>

<div class="row projdetail">
            <div class="col-sm-4">
                    <label class="form-label inpfieldname" for="slno" class="form-label  ">Serial Number</label><br>
                    <input type="number" class="fieldsbox form-control " id="slno" name="slno" min="0"
                        placeholder="Enter Serial Number">
               </div>
                    
                <div class=" col-sm-4">
                    <label class="form-label inpfieldname" for="DateProposal">Date of Proposal</label>
                    <input type="text" name="dop" class="form-control fieldsbox" id="DateProposal" placeholder="dd/mm/yy">
                </div>
                     
           
                    
                <div class="col-sm-4">
                 <label class="form-label inpfieldname" for="documents3">Proposal Documents</label>
                <div class="input-group">
                   <input type="file" name="proposal[]" class="form-control fieldsbox" id="more-files-upload">
                <span class="input-group-text plus">
                <i class="fa fa-plus-square-o" aria-hidden="true" id="add-more-file" style="cursor: pointer;"></i>
                </span>
            </div>
              <div id="file-add-div"></div>
            </div>
              
               
            </div>

<div class="row projdetail">
            <div class="col-sm-4">
                    <label class="form-label inpfieldname" for="financialyear">Financial Year</label>
                    <select name="financial_year" id="financialyear" class="form-control fieldsbox">
                        <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>
                        
                    </select>
                </div>
    
                <div class="col-sm-4">
                  <label class="form-label inpfieldname" for="Dateofestimation">Date of Estimation Submission</label>
             <input type="text" name="est_sub_date" class="form-control fieldsbox" id="Dateofestimation" placeholder="dd/mm/yy">
          </div>

<div class="col-sm-4">
                 <label class="form-label inpfieldname" for="documents3">Estimated Documents</label>
                <div class="input-group">
                   <input type="file" name="estimate[]" class="form-control fieldsbox" id="more-files-upload">
                <span class="input-group-text plus">
                <i class="fa fa-plus-square-o" aria-hidden="true" id="add-more-file1" style="cursor: pointer;"></i>
                </span>
            </div>
              <div id="file-add-div1"></div>
            </div>

</div>

<div class="row projdetail">

<div class="col-sm-4">
                    <label class="form-label inpfieldname" for="estimatedcost">Estimated Cost</label>
                    <input type="text" class="fieldsbox form-control" id="estimatedcost" name="estimated_cost" 
                        placeholder="Enter Estimated Cost" required>
                </div>
                <div class=" col-sm-4">
                    <label class="form-label inpfieldname" for="Dateofeapproval">Date of Approval</label>
                    <input type="text" name="date_approval" class="form-control fieldsbox" id="Dateofeapproval" placeholder="dd/mm/yy">
                </div>

<div class="col-sm-4">
                 <label class="form-label inpfieldname" for="documents3">Approval Documents</label>
                <div class="input-group">
                   <input type="file" name="approval[]" class="form-control fieldsbox" id="more-files-upload">
                <span class="input-group-text plus">
                <i class="fa fa-plus-square-o" aria-hidden="true" id="add-more-file2" style="cursor: pointer;"></i>
                </span>
            </div>
              <div id="file-add-div2"></div>
            </div>
            </div>

<!-- <div class="row projdetail">

<div class=" col-sm-4">
                    <label class="form-label inpfieldname" for="ReleaseAmount">Released Amount</label>
                    <input type="number" name="released_amount[]" class="form-control fieldsbox" id="ReleaseAmount" min="0" >
                </div>

<div class="col-sm-4">
                    <label for="Releaseamountpart" class="form-label inpfieldname">Amount Released Date</label>
                    <input type="date" name="released_date[]" class="form-control fieldsbox" id="released_date">
                </div>

<div class="col-sm-4 ">
                    <label for="Expenditure" class="form-label inpfieldname">Expenditure</label>
                    <input type="number" name="expenditure[]" class="form-control fieldsbox" id="Expenditure">
                </div>
             
            </div> -->

<div class="row projdetail">

<div class="col-sm-4">
                    <label class="form-label inpfieldname" for="admamount">ADM Amount</label>
                    <input type="text" name="adm_amount" class="form-control fieldsbox" id="admamount" placeholder="Enter ADM Amount" >
                   
                </div>
                <div class="col-sm-4">
            
                    <label class="form-label inpfieldname" for="startdate">Start Date</label>
                    <input type="text" name="start_date" class="form-control fieldsbox" id="startdate" placeholder="dd/mm/yy">
                    </select>
                </div>

<div class="col-sm-4 ">
                <label for="status" class="form-label inpfieldname">Status</label>
                    <select name="status" id="status" class="form-control fieldsbox">
                        <option value="">Select</option>
                        
                        
                        
                    </select>
                </div>
            </div>

<div class=" projdetail row">
                 <div class="col-sm-4 ">
                    <label for="labourcontract" class="form-label inpfieldname">Labour Contract</label>
                    <input type="text" name="labour_contract" class="form-control fieldsbox" id="labourcontract" placeholder="Enter Labour Contract">
                </div>
                 <div class="col-sm-4 ">
                    <label for="labourcontract" class="form-label inpfieldname">Adm Date</label>
                    <input type="text" name="admDate" class="form-control fieldsbox" id="admDate" placeholder="dd/mm/yy">
                </div>
                <div class="col-sm-4">
                    <label for="Remarks" class="form-label inpfieldname">Remarks</label><br>
                    <textarea name="remarks" id="Remarks" class="form-control textfields projectinputs"  placeholder="Enter Remarks"></textarea>
                </div>

</div><br><br>
        <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>
    </form>
    </div>
    </div>
</section>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.8/dist/sweetalert2.all.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.8/dist/sweetalert2.min.css" rel="stylesheet">
// <script>
//     $(document).ready(function() {
//         $('#project-form').submit(function(e) {
//             e.preventDefault();

//             // Function to format date from dd/mm/yy to yy-mm-dd
//             function formatDate(date) {
//                 var dateParts = date.split('/');  // [dd, mm, yy]
//                 return dateParts[2] + '-' + dateParts[1] + '-' + dateParts[0];  // yy-mm-dd
//             }

//             var startDate = $('#startdate').val();
//             var formattedStartDate = formatDate(startDate);

//             var approvalDate = $('#Dateofeapproval').val();
//             var formattedApprovalDate = formatDate(approvalDate);

//             var estDate = $('#Dateofestimation').val();
//             var formattedEstDate = formatDate(estDate);

//             var proposal = $('#DateProposal').val();
//             var formattedProposal = formatDate(proposal);

//           var admDate = $('#admDate').val();
//             var formattedadmDate = formatDate(admDate);

//             // Create a FormData object from the form
//             var formData = new FormData($(this)[0]);

//             // Manually set the formatted dates into the formData object
//             formData.set('start_date', formattedStartDate);  
//             formData.set('date_approval', formattedApprovalDate);  
//             formData.set('est_sub_date', formattedEstDate);  
//             formData.set('dop', formattedProposal);  
//             formData.set('admDate', formattedadmDate);

//             $.ajax({
//                 url: "<?//php echo base_url('create-project') ?>", 
//                 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
//                         });
//                         $('#project-form')[0].reset();
//                         window.location.href = '<?//php echo base_url("createproject"); ?>';
//                     } else {
//                         console.log(response.message);
//                     }
//                 },
//                 error: function(xhr, status, error) {
//                     alert('An error occurred: ' + xhr.responseText);
//                 }
//             });
//         });
//     });
// </script>

// Function to format date from dd/mm/yy to yy-mm-dd, or return null if empty
            function formatDate(date) {
                if (!date || date.trim() === "") {
                    return null; // Return null for empty date
                }
                var dateParts = date.split('/'); // [dd, mm, yy]
                return dateParts[2] + '-' + dateParts[1] + '-' + dateParts[0]; // yy-mm-dd
            }

var startDate = formatDate($('#startdate').val());
            var approvalDate = formatDate($('#Dateofeapproval').val());
            var estDate = formatDate($('#Dateofestimation').val());
            var proposal = formatDate($('#DateProposal').val());
            var admDate = formatDate($('#admDate').val());

var formData = new FormData($(this)[0]);

// Manually set the formatted dates into the formData object
            if (startDate !== null) formData.set('start_date', startDate);
            if (approvalDate !== null) formData.set('date_approval', approvalDate);
            if (estDate !== null) formData.set('est_sub_date', estDate);
            if (proposal !== null) formData.set('dop', proposal);
            if (admDate !== null) formData.set('admDate', admDate);

$.ajax({
                url: "<?php echo base_url('create-project') ?>", 
                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
                        });
                        $('#project-form')[0].reset();
                        window.location.href = '<?php echo base_url("createproject"); ?>';
                    } else {
                        console.log(response.message);
                    }
                },
                error: function(xhr, status, error) {
                    alert('An error occurred: ' + xhr.responseText);
                }
            });
        });
    });
</script>

moreFile.addEventListener("click", function () {
    var inputContainer = document.createElement('div');
    inputContainer.classList.add('input-group', 'mb-2');

var newInput = document.createElement('input');
    newInput.classList.add('form-control', 'fieldsbox');
    newInput.type = 'file';
    newInput.name = 'proposal[]';

var removeIcon = document.createElement('i');
    removeIcon.classList.add('fa', 'fa-minus-square', 'remove-file-icon');
    removeIcon.style.marginLeft = '15px'; 
    removeIcon.style.marginRight = '15px'; 
    removeIcon.style.marginTop = '15px'; ;

removeIcon.addEventListener("click", function () {
        fileDiv.removeChild(inputContainer);
    });

inputContainer.appendChild(newInput);
    inputContainer.appendChild(removeIcon);

fileDiv.appendChild(inputContainer);
});

</script>
<script>
let moreFile1 = document.querySelector("#add-more-file1");
let fileDiv1= document.querySelector("#file-add-div1");

moreFile1.addEventListener("click", function () {
    var inputContainer1 = document.createElement('div');
    inputContainer1.classList.add('input-group', 'mb-2');

var newInput1 = document.createElement('input');
    newInput1.classList.add('form-control', 'fieldsbox');
    newInput1.type = 'file';
    newInput1.name = 'estimate[]';

var removeIcon1 = document.createElement('i');
    removeIcon1.classList.add('fa', 'fa-minus-square', 'remove-file-icon');
    removeIcon1.style.marginLeft = '15px'; 
    removeIcon1.style.marginRight = '15px'; 
    removeIcon1.style.marginTop = '15px';

removeIcon1.addEventListener("click", function () {
        fileDiv1.removeChild(inputContainer1);
    });

inputContainer1.appendChild(newInput1);
    inputContainer1.appendChild(removeIcon1);

fileDiv1.appendChild(inputContainer1);
});

</script>
<script>
let moreFile2 = document.querySelector("#add-more-file2");
let fileDiv2 = document.querySelector("#file-add-div2");

moreFile2.addEventListener("click", function () {
    var inputContainer2 = document.createElement('div');
    inputContainer2.classList.add('input-group', 'mb-2');

var newInput2 = document.createElement('input');
    newInput2.classList.add('form-control', 'fieldsbox');
    newInput2.type = 'file';
    newInput2.name = 'approval[]';

var removeIcon2 = document.createElement('i');
    removeIcon2.classList.add('fa', 'fa-minus-square', 'remove-file-icon');
    removeIcon2.style.cursor = 'pointer';
    removeIcon2.style.marginLeft = '15px'; 
    removeIcon2.style.marginRight = '15px'; 
    removeIcon2.style.marginTop = '15px';

removeIcon2.addEventListener("click", function () {
        fileDiv2.removeChild(inputContainer2);
    });

inputContainer2.appendChild(newInput2);
    inputContainer2.appendChild(removeIcon2);

fileDiv2.appendChild(inputContainer2);
});

</script>

</script>

</script>
<script>
    $(document).ready(function () {
        
        $.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);
            }
        });

$('#constituency').change(function () {
            var constituencyId = $(this).val();
            
            if (constituencyId !== '') {
                // Fetch MLA data based on selected constituency
                $.ajax({
                    url: '<?php echo base_url("fetch-mla-by-constituency"); ?>/' + constituencyId, 
                    method: 'GET',
                    success: function (response) {
                        if (response.length > 0) {
                            var mlaOptions = '<option value="">Select </option>';
                            $.each(response, function (key, value) {
                                mlaOptions += `<option value="${value.id}">${value.mla}</option>`;
                            });
                            $('#mla').html(mlaOptions); 
                        } else {
                            $('#mla').html('<option value="">Select MLA</option>');
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error("Error fetching MLA:", error);
                    }
                });
            } else {
               
                $.ajax({
                    url: '<?php echo base_url("fetch-mla-without-constituency"); ?>', 
                    method: 'GET',
                    success: function (response) {
                        if (response.length > 0) {
                            var mlaOptions = '<option value="">Select </option>';
                            $.each(response, function (key, value) {
                                mlaOptions += `<option value="${value.id}">${value.mla}</option>`;
                            });
                            $('#mla').html(mlaOptions);
                        } else {
                            $('#mla').html('<option value="">Select MLA</option>');
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error("Error fetching MLAs without constituency:", error);
                    }
                });
            }
        });
    });
</script>

<script>
    const selectedFiles = {};

function handleFileSelect(event, blockNumber) {
        const files = Array.from(event.target.files);
        if (!selectedFiles[blockNumber]) {
            selectedFiles[blockNumber] = [];
        }
        
        selectedFiles[blockNumber] = selectedFiles[blockNumber].concat(files);
        displayFileList(blockNumber);
    }

function displayFileList(blockNumber) {
        const fileList = document.getElementById(`fileList${blockNumber}`);
        fileList.innerHTML = '';

selectedFiles[blockNumber].forEach((file, index) => {
            const fileItem = document.createElement('div');
            fileItem.className = 'file-item';
            fileItem.textContent = file.name;

fileItem.appendChild(deleteIcon);
            fileList.appendChild(fileItem);
        });

if (selectedFiles[blockNumber].length === 0) {
            document.getElementById(`documents${blockNumber}`).value = '';
        }
    }
</script>

// Initialize Start Date datepicker
    $('#startdate').datepicker({
        dateFormat: 'dd/mm/yy', // Custom format: dd/mm/yy
        changeMonth: true,      // Allow changing the month
        changeYear: true        // Allow changing the year
    });

// Initialize Date of Approval datepicker
    $('#DateProposal').datepicker({
        dateFormat: 'dd/mm/yy', // Custom format: dd/mm/yy
        changeMonth: true,      // Allow changing the month
        changeYear: true        // Allow changing the year
    });
    
        $('#Dateofeapproval').datepicker({
        dateFormat: 'dd/mm/yy', // Custom format: dd/mm/yy
        changeMonth: true,      // Allow changing the month
        changeYear: true        // Allow changing the year
    });
        $('#admDate').datepicker({
        dateFormat: 'dd/mm/yy', // Custom format: dd/mm/yy
        changeMonth: true,      // Allow changing the month
        changeYear: true        // Allow changing the year
    });
});

</script>
<script>
    $(document).ready(function() {
        $('#excel').submit(function(e) {
            e.preventDefault();

var formData = new FormData($(this)[0]);
            $.ajax({
                url: "<?php echo base_url('Excel/import') ?>",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.result === 1) {
                        toastr.success(response.message, "Success");
                        $('#excel')[0].reset();

// Optional: Redirect to another page after success
                        // window.location.href = '<?php echo base_url("createproject"); ?>';
                    } else {
                        // toastr.error(response.message, "Error");
                        $('#excel')[0].reset();
                    }
                },
                error: function(xhr, status, error) {
                    toastr.error('An error occurred: ' + xhr.responseText, "Error");
                }
            });
        });
    });
</script>

var formData = new FormData($(this)[0]);
            $.ajax({
                url: "<?php echo base_url('Excel/import1') ?>",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.result === 1) {
                        toastr.success(response.message, "Success");
                        $('#excel')[0].reset();

// Optional: Redirect to another page after success
                        // window.location.href = '<?php echo base_url("createproject"); ?>';
                    } else {
                        toastr.error(response.message, "Error");
                    }
                },
                error: function(xhr, status, error) {
                    toastr.error('An error occurred: ' + xhr.responseText, "Error");
                }
            });
        });
    });
</script>

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