EVOLUTION-NINJA
Edit File: add_asset.php
<?php echo view('includes/home_sidebar');?> <style> .add-asset-block { display: flex; justify-content: space-between; padding: 8px; border-bottom: 3px solid #8D8D8D; } .add-asset-heading { margin: 0; padding: 3px; align-self: center; color: #003352; font-size: 20px; font-weight: 600; } .back-butt { color: #606060; font-size: 21px; font-weight: 500; outline: none; border: none } .add-asset, .add-asset-doc, .add-asset-prod, .add-asset-agrement { background-color: #EFF3FC; padding: 15px 25px; } .add-asset, .add-asset-doc, .add-asset-prod, .add-asset-agrement label { padding: 5px 10px; font-size: 15px; margin-block: 4px; font-weight: 500; color: #606060; } .star-mad { color: #c83434; font-size: 20px; position: relative; top: 2px; } .inp-boxes-addasset { border: none; box-shadow: 0px 0px 3px #ccc; background-color: white !important; } .add-asset-button { color: white; width: 25%; background: linear-gradient(#4E79FF, #71ACFF); border: none; outline: none; font-size: 18px; padding: 5px 4px; font-weight: 500; float: inline-end; } @media screen and (max-width:728px) { .add-asset-block, .add-asset, .add-asset-doc, .add-asset-prod, .add-asset-agrement { width: 97vw; } .add-asset-button { width: 50%; float: inline-start; margin-top: 20px; } } #leftDiv{ height:1030px !important; } </style> <div class="container-fluid"> <div class="row"> <div class="col-sm-12"> <!-- -----ADDTIMETABLE eAND BACK BUTTON---------- --> <section class="add-asset-block"> <h5 class="add-asset-heading">Add Asset</h5> <button class="btn back-butt"><i class="fa fa-arrow-left" aria-hidden="true"></i> Back</button> </section> <!-- SELECT CATAGORY----- --> <form id="assetform"> <section> <div class="add-asset"> <!-- <div class="row"> <div class="col-sm-4"> <label for="Catagory">Catagory<span class="star-mad" required>*</span></label></br> <select class="form-select inp-boxes-addasset" id="Catagory"> <option selected> select</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div> </div> --> <div class="row mt-4"> <div class="col-sm-2"><input type="checkbox" name="product" value="Yes" id="product" checked><label for="product">Product</label></div> <div class="col-sm-2"><input type="checkbox" name="document" value="Yes" id="document"><label for="document">Document</label></div> <div class="col-sm-2"><input type="checkbox" name="agreement" value="Yes" id="agrement"><label for="agrement">Agrement</label></div> </div> </div> </section> <section> <div class="add-asset-prod mt-3" style='display:none'> <div class="row"> <div class="col-sm-4"> <label for="product-name">Product Name</label></br><input type="text" placeholder="" name="product_name" id="product-name" class="form-control inp-boxes-addasset" /> </div> <div class="col-sm-4"> <!-- <label for="product-start">Product Start</label></br><input type="text" placeholder="" name="product_start" id="product-start" class="form-control inp-boxes-addasset" /> --> <label for="purchase-bill">Purchase Bill</label></br><input type="file" placeholder="" id="purchase_bill" name="purchase_bill" class="form-control inp-boxes-addasset" /> </div> <div class="col-sm-4"> </div> </div> <div class="row"> <div class="col-sm-8"> <label for="product-desc">Product Description</label></br> <textarea name="product_description" rows="3" id="product-desc" class="form-control inp-boxes-addasset"></textarea> </div> <!-- <div class="col-sm-4"> <label for="">AMC Date</label></br> <div class="row"> <div class="col-sm d-flex flex-row align-items-center"> <input type="radio" placeholder="" name="amc" value="Yes"/> Yes <input type="radio" placeholder="" name="amc" value="No"/> No </div> <div class="col-sm-9"> <input type="date" class="form-control inp-boxes-addasset" name="amc_date"> </div> </div> <div class="row mt-4"> <label for="upload-img">Upload Product Image</label> <input type="file" id="upload-img" name="product_image" class="form-control inp-boxes-addasset"> </div> </div> --> <!-- <div class="col-sm-4"> <div class="row"> <div class="col-sm-12"> <label for="notify-before-expiry">Notify Before Expiry</label></br><input type="date" placeholder="" id="notify-before-expiry" name="notify_before" class="form-control inp-boxes-addasset" /> </div> <div class="col-sm-12 mt-4"> <label for="notify-before-expiry">Product Document</label></br><input type="file" placeholder="" id="notify-before-expiry" name="product_document" class="form-control inp-boxes-addasset" /> </div> </div> </div> --> </div> </div> </section> <!-- ADD DOCUMENT-------------- --> <section> <div class="add-asset-doc pt-3 pb-3" style='display:none'> <div class="row"> <div class="col-sm-4"> <label for="doc-name">Document Name</label></br><input type="text" placeholder="" name="document_name" id="doc-name" class="form-control inp-boxes-addasset" /> </div> <div class="col-sm-4"> <label for="upload-doc">Upload Document</label> <input type="file" id="upload-doc" name="upload_document" class="form-control inp-boxes-addasset"> </div> <div class="col-sm-4"> <!-- <label for="renewal">Renewal</label></br><input type="text" placeholder="" id="renewal" name="document_renewal" class="form-control inp-boxes-addasset" /> --> </div> </div> <div class="row"> <div class="col-sm-8"> <label for="description">Description</label></br> <textarea name="document_description" rows="3" id="Description" class="form-control inp-boxes-addasset"></textarea> </div> <div class="col-sm-4" style="display: flex;align-items: flex-end;"> </div> </div> </div> </section> <!-- ADD AGREMENT-------------- --> <section> <div class="add-asset-agrement pt-3 pb-3" style='display:none'> <div class="row"> <div class="col-sm-4"> <label for="agrement-name">Agrement Name</label></br><input type="text" placeholder="" name="agreement_name" id="agrement-name" class="form-control inp-boxes-addasset" /> </div> <div class="col-sm-4"> <label for="upload-doc1">Upload Document</label> <input type="file" id="upload-doc1" name="agreement_document" class="form-control inp-boxes-addasset"> </div> <div class="col-sm-4"> <!-- <label for="renewal1">Renewal</label></br><input type="text" placeholder="" id="renewal1" name="agreement_renewal" class="form-control inp-boxes-addasset" /> --> </div> </div> <div class="row"> <div class="col-sm-8"> <label for="description">Description</label></br> <textarea name="agreement_description" rows="3" id="Description" class="form-control inp-boxes-addasset"></textarea> </div> <div class="col-sm-4" style="display: flex;align-items: flex-end;"> </div> </div> </div> <button type="submit" id="app-btn" class="submit-student-form add-asset-button mx-3">Submit</button> </section> </form> </div> </div> </div> </section> </main> <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 () { $('#assetform').submit(function (e) { e.preventDefault(); var formdata = new FormData($(this)[0]); $('#app-btn').text('Submitting...'); $('#app-btn').attr('disabled', 'disabled'); $.ajax({ type: 'post', url: '<?php echo base_url("add-asset-form");?>', data: formdata, contentType: false, processData: false, success: function (response) { if (response.result == 1) { Swal.fire({ icon: "success", title: response.message, showConfirmButton: false, timer: 2000 }); $('#assetform')[0].reset(); window.location.href = '<?php echo base_url("asset-list");?>'; } else { Swal.fire({ icon: "error", title: response.message, showConfirmButton: false, timer: 1000 }); } $('#app-btn').removeAttr('disabled').text("Submit"); }, error: function (xhr, textStatus, errorThrown) { console.error(xhr.responseText); Swal.fire({ icon: "error", title: "An error occurred", showConfirmButton: false, timer: 1000 }); }, complete: function () { $('#app-btn').removeAttr('disabled').text("Submit"); } }); }); }); </script> <script> document.addEventListener("DOMContentLoaded", function() { var productCheckbox = document.getElementById('product'); var addAssetProd = document.querySelector('.add-asset-prod'); if(productCheckbox.checked) { addAssetProd.style.display = 'block'; } productCheckbox.addEventListener('change', function() { if(this.checked) { addAssetProd.style.display = 'block'; } else { addAssetProd.style.display = 'none'; } }); document.getElementById('document').addEventListener('change', function() { var addAssetDoc = document.querySelector('.add-asset-doc'); if(this.checked) { addAssetDoc.style.display = 'block'; } else { addAssetDoc.style.display = 'none'; } }); document.getElementById('agrement').addEventListener('change', function() { var addAssetAgrement = document.querySelector('.add-asset-agrement'); if(this.checked) { addAssetAgrement.style.display = 'block'; } else { addAssetAgrement.style.display = 'none'; } }); }); </script>