EVOLUTION-NINJA

Edit File: add_expence.php

<?php echo view('includes/home_sidebar');?>
<style>
    #leftDiv {
        height: 1260px !important;
    }

/*  */

.expense_report_block {
        display: flex;
        justify-content: space-between;
        padding: 8px;
        border-bottom: 3px solid #8D8D8D;
    }

.expense_report-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
    }

/* expense report input block- */
    .expense_report h5 {
        color: #0065A3;
        font-size: 17px;
        font-weight: 600;
    }

.expense_report {
        background-color: #EFF3FC;
        padding: 15px 25px;
    }

.inp-boxes-expense {
        border: none;
        box-shadow: 0px 0px 3px #ccc;
        background-color: white !important;
    }

.expense_report label {
        padding: 5px 10px;
        font-size: 15px;
        margin-block: 4px;
        font-weight: 500;
        color: #606060;
    }

/* submit and cancel button  */
    .expense-submit-button {
        color: white;
        width: 100%;
        background: linear-gradient(#4E79FF, #71ACFF);
        border: none;
        outline: none;
        font-size: 18px;
        padding: 5px 4px;
        font-weight: 500;
    }

.submit-cancel-buttons {
        display: flex;
        align-items: end;
    }

@media screen and (max-width:728px) {

.expense_report,
        .expense_report_block {
            width: 97vw;
        }
    }
    .star-mad {
    color: #c83434;
    font-size: 20px;
    position: relative;
    top: 2px;
}
</style>
<main id="rightDiv">

<section class="expense_report_block">

<h3 class="expense_report-heading">Add Expense</h3>
                    <button class="btn back-butt" onclick="goBack()"><i class="fa fa-arrow-left"
                            aria-hidden="true"></i>&nbsp;Back</button>
                </section>
                <form id="expenseform">
                    <section>
                        <div class="expense_report container-fluid">
                            <h5>Expense Information</h5>
                            <div class="row">
                                <div class="col-sm-4">
                                    <label for="expense-type">Expense Type <span class="star-mad">*</span></label></br>
                                    <select class="form-select inp-boxes-expense" id="expense-type" name="expense_type" required>
                                    </select>
                                </div>

<div class="col-sm-4">
                                    <label for="expense-amount">Expense Amount <span class="star-mad">*</span></label></br><input type="text"
                                        placeholder="" name="expence_amount" id="expense-amount"
                                        class="form-control  inp-boxes-expense" required/>
                                </div>

<div class="col-sm-4 mt-2">
                                    <label for="expense-towards-account">Expense Towards Account </label></br><input
                                        type="text" placeholder="" id="expense-towards-account"
                                        name="expence_towards_account" class="form-control  inp-boxes-expense" />
                                </div>

</div>

<div class="row">
                                <div class="col-sm-4">
                                    <label for="expense-report-date">Date (dd/mm/yyyy) <span class="star-mad">*</span></label></br><input type="date"
                                        placeholder="" name="date" id="expense-report-date"
                                        class="form-control inp-boxes-expense" required/>
                                </div>
                                <div class="col-sm-4 mt-2">
                                    <label for="reference-number">Reference Number</label></br><input type="text"
                                        placeholder="" name="reference_number" id="reference-number"
                                        class="form-control inp-boxes-expense" />
                                </div>
                                <div class="col-sm-4 mt-2">
                                    <label for="payment-by">Payment By</label></br><input type="text" placeholder=""
                                        id="payment-by" name="payment_by" class="form-control inp-boxes-expense" />
                                </div>
                            </div>

<div class="row">
                                <div class="col-sm-4">
                                    <label for="payment-mode">Payment Mode<span class="star-mad">*</span></label></br>
                                    <select class="form-select inp-boxes-expense" id="payment_mode" name="payment_mode" required>
                                        <option value="" disabled selected hidden>Select</option>
                                        <option value="Card" required>Card</option>
                                        <option value="Cash" required>Cash</option>
                                        <option value="Online" required>Online</option>
                                        <option value="QR code" required>QR code</option>
                                    </select>
                                </div>
                                <div class="col-sm-4 mt-2">
                                    <label for="vendor-name">Vendor Name</label></br><input type="text" placeholder=""
                                        name="vendor_name" id="vendor-name" class="form-control inp-boxes-expense" />
                                </div>

<div class="col-sm-2 submit-cancel-buttons mt-2">
                                    <button type="submit" class="submit-student-form expense-submit-button"
                                        id="expense-submit">Submit</button>
                                </div>
                                <div class="col-sm-2 submit-cancel-buttons mt-2">
                                    
                                </div>
                            </div>
                        </div>
                    </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>
    // Application form 
    $(document).ready(function () {
        $('#expenseform').submit(function (e) {
            e.preventDefault();
   
            var formdata = new FormData($(this)[0]);
            $('#expense-submit').text('Sumitting...');
            $('#expense-submit').attr('disabled', 'disabled');
            $.ajax({
                type: 'post',
                url: '<?php echo base_url("add-expense");?>',
                data: formdata,
                contentType: false,
                processData: false,
                success: function (response) {
                    if (response.result == 1) {
                        Swal.fire({ icon: "success", title: response.message, showConfirmButton: false, timer: 2000 });
                        $('#expenseform')[0].reset();
                        // $('#datatable').DataTable().ajax.reload();
                        window.location.href = '<?php echo base_url("expence-list");?>';
                    } else {
                        Swal.fire({ icon: "error", title: response.message, showConfirmButton: false, timer: 1000 });
                    }
                    $('#expense-submit').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 () {
                    $('#expense-submit').removeAttr('disabled').text("SUBMIT");
                }
            });
        });
    });
</script>
<script>
    $(document).ready(function () {
        $.ajax({
            type: 'GET',
            url: '<?php echo base_url("add-expense-value");?>?',
            dataType: 'json',
            success: function (response) {
                if (response.result == 1) {
                    var options = response.data;
                    var selectElement = $('#expense-type');
                    selectElement.empty();
                    $('#description').html('<option value="" selected >Select value</option>');
                    $.each(options, function (index, option) {
                        selectElement.append($('<option>', {
                            value: option.id,
                            text: option.expense_name
                        }));
                    });
                } else {
                    $('#description').html('<option value="">value not found</option>');
                }
            },
            error: function (xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    });
</script>

<script>
    function goBack() {
        window.location.href = 'dashboard';
    }
</script>

const rightDivHeight = rightDiv.offsetHeight;

leftDiv.style.height = rightDivHeight + 'px';
    };

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