EVOLUTION-NINJA

Edit File: application_form.php

<?php echo view('includes/home_sidebar');?>
<style>
    /* uplaod image styles------  */
    .div-img--contents {
        width: 180px;
        height: 180px;
    }

.img-wrapper {
        width: 100%;
        height: 100%;
        border: 0.5px solid #ccc;
        position: relative;

}

.img-wrapper .img--upload {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: absolute;

}

.img-wrapper .img--upload #up-img {
        width: 180PX;
        height: 180PX;
        /* object-fit: contain; */

}

.custom-btn {
        background-color: #0065A3;
        color: white;
        border: none;
        outline: none;
        width: 100%;
        padding: 4px 10px;
        margin: 0;
        margin-top: 8px;

}

.custom-btn:hover {
        background-color: #0065A3;
        color: white;

}
    #leftDiv{
    height: 960px !important; 
    }
    @media only screen and (max-width:728px) {

.div-img--contents {
            width: 157px;
            height: 157px;
            margin-bottom: 57PX;
        }
    }
    .star-mad {
    color: #c83434;
    font-size: 20px;
    position: relative;
    top: 2px;
}
#leftDiv{
    height: 1100px !important;
}
#add-more-file {
    position: absolute;
    right: -13px;
    top: 35px !important;
    font-size: 24px;
}

</style>
<main id="rightDiv">
    <div class="container-fluid">
        <div class="row">

<div class="col-sm-12">
                
                <section class="Add-student row">

<div class="col-sm-6">
                        <h3  style="color: rgba(0, 72, 76, 1);">
                            
                            Enroll Students / Admission Application
                        </h3>
                    </div>
                    <div class="col-sm-5"></div>
                    <div class="col-sm-1">
                        <button class="btn back-butt" onclick="goBack()"><i class="fa fa-arrow-left"
                                aria-hidden="true"></i>&nbsp;Back</button>
                    </div>

</section>

<section class="mt-3 mb-5">
                    <form id="studentapplicaton">
                        <div class="student-education-detail">
                            <div class="detail-names">
                                <h6>Header <span class="star-mad">*</span></h6>
                                <select class="form-select" id="header" name="header_name" required>

</select>
                            </div>
                            <div class="detail-names">
                                <h6>Value <span class="star-mad">*</span></h6>

</div>
                            <div class="detail-names">
                                <h6>Duration (In Hours)</h6>
                                <input type="text" class="form-control" name="duration" id="duration" >

</div>

<div class="student-form-detail-entry">
                            <div class="input-fields-student-form a1"><label for="First-Name">First
                                    Name <span class="star-mad">*</span></label></br><input type="text" placeholder="" name="first_name" id="First-Name"
                                    class="inp-boxes form-control" required /></div>
                            <div class="input-fields-student-form a2 mt-2"><label for="Last-Name">Last
                                    Name </label></br><input type="text" placeholder="" name="last_name" id="Last-Name"
                                    class="inp-boxes form-control mt-1"/></div>
                            <div class="input-fields-student-form a3"><label for="date">Date
                                    (dd/mm/yyyy) <span class="star-mad">*</span></label></br><input type="date" name="date" id="date"
                                    class="inp-boxes form-control" required /></div>
                            <div class="input-fields-student-form a4">

<div class="div-img--contents">
                                    <label for="">Upload Photo</label>
                                    <div class="img-wrapper inp-boxes">
                                        <div class="img--upload">
                                            <img src="" alt="" id="up-img" hidden>
                                        </div>
                                    </div>
                                    <input type="file" class="default-btn" id='input-img' name="profile-image" hidden>
                                    <button type="button" class="custom-btn btn"
                                        onclick="referDefaultBtn()">UPLOAD</button>
                                </div>

</div>

<div class="input-fields-student-form a5"><label for="dob">DOB
                                    (dd/mm/yyyy) <span class="star-mad">*</span></label></br><input type="date" placeholder="" name="dob" id="dob"
                                    class="inp-boxes form-control   " required /></div>
                            <div class="input-fields-student-form a6"><label for="Email">Email <span class="star-mad">*</span></label></br><input
                                    type="email" placeholder="" name="email" id="Email" class="inp-boxes form-control "
                                    required /></div>
                            <div class="input-fields-student-form a7"><label for="student-gender">Gender <span class="star-mad">*</span></label></br>
                                <!-- <select class="form-select inp-boxes" name="gender" id="student-gender" required>

<option value=" " >Select</option>
                                    <option value="male">Male</option>
                                    <option value="female">Female</option>
                                </select> -->

<select class="form-select inp-boxes" name="gender" id="student-gender" required>
                                    <option value="">Select</option>
                                    <option value="male">Male</option>
                                    <option value="female">female</option> 
                                </select>
                            </div>
                            <div class="input-fields-student-form a8"><label for="phone">Mobile <span class="star-mad">*</span></label></br>
                            <input type="tel" placeholder="" id="phone" oninput="validateInputnum(this)" name="mobile_no"
                                    class="inp-boxes form-control  " required /></div>
                            <div class="input-fields-student-form a9"><label
                                    for="student-aualification">Qualification <span class="star-mad">*</span></label></br><input type="text"
                                    name="qualification" placeholder="" id="student-aualification"
                                    class="inp-boxes form-control " required /></div>
                            <div class="input-fields-student-form a10"><label for="student-source">Source <span class="star-mad">*</span></label></br>
                                <select class="form-select inp-boxes" id="student-source" name="source" required>
                                    <option value="">Select</option>
                                    <option value="Online">Online</option>
                                    <option value="Online">Offline</option>
                                </select>
                            </div>
                            <div class="input-fields-student-form a11"><label for="student-address">
                                    Address <span class="star-mad">*</span></label></br>
                                <textarea name="address" id="student-address" class="form-control" required></textarea>
                            </div>
                            <div class="input-fields-student-form a12 mt-2"><label
                                    for="student-profession">Profession  </label></br>
                                <select class="form-select inp-boxes" id="student-profession" name="profession"
                                     >
                                    <option  value="">Select</option>
                                    <option value="IT">IT</option>
                                    <option value="NON-IT">NON-IT</option>
                                </select>
                            </div>
                            <div class="input-fields-student-form a13"><label for="student-city">City <span class="star-mad">*</span></label></br>
                                <input class="form-control inp-boxes" id="student-city" name="city" required />
                            </div>
                            <div class="input-fields-student-form a14">
                                <label for="student-country">Country <span class="star-mad">*</span></label></br>
 
                                <input type="text" class="form-control inp-boxes" id="student-country" name="country" style="width: 100%;">

<!-- <select class="form-select inp-boxes" id="student-country" name="country" required>

<option  value="">Select</option>
                                    <option value="India">India</option>
                                </select> -->
                            </div>
                            <div class="input-fields-student-form a15  mt-2"><label for="student-status">Status  </label></br>
                                <select class="form-select inp-boxes" id="student-status" name="status" required>

<option selected>Select</option>
                                    <option value="Employed">Employed</option>
                                    <option value="unEmployed">Unemployed</option>
                                </select>
                            </div>
                            <div class="input-fields-student-form a16"><label for="course-offered-tostudents">Course
                                    Offered <span class="star-mad">*</span></label></br><input type="text" placeholder="" name="course_offered"
                                    id="course-offered-tostudents" class="inp-boxes form-control   " required /></div>
                            <div class="input-fields-student-form a17"><label for="Counselor Name">Counselor
                                    Name <span class="star-mad">*</span></label></br><input type="text" placeholder="" name="counselor_name"
                                    id="Counselor Name" class="inp-boxes form-control   " required /></div>
                            <div class="input-fields-student-form a18  mt-2"><label for="College-Company Name">College /
                                    Company
                                    Name  </label></br><input type="text" placeholder="" name="company_name"
                                    id="College-Company Name" class="inp-boxes form-control   "   /></div>
                            <div class="input-fields-student-form a19 mt-2  "><label
                                    for="student-Remarks">Remarks  </label></br><input type="text" name="remarks"
                                    placeholder="" id="student-Remarks" class="inp-boxes form-control   "   />
                            </div>

<div class="input-fields-student-form a20   "><label for="student-Remarks">Aadhar
                                    No <span class="star-mad">*</span> </label></br><input type="text" placeholder="" maxlength="14" oninput="validateInputnumadhar(this)" id="student-Remarks"
                                    name="adhaar_no" class="inp-boxes form-control" required/></div>

<label for="more-files-upload">Upload documents</label></br>
                                <input type="file" name="document[]" class="form-control" style="height: 36px;" > <i class="fa fa-plus-square-o"
                                    aria-hidden="true" id="add-more-file"></i>
                                <div id="file-add-div"></div>

</div>
                            <div class="input-fields-student-form a21"><button type="submit"
                                    class="submit-student-form">Submit</button>
                            </div>
                        </div>
                    </form>
                </section>
            </div>
        </div>
    </div>
  
</main>
</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>
    // Application form 
    $(document).ready(function () {
        $('#studentapplicaton').submit(function (e) {
            e.preventDefault();
            // if ($('#up-img').attr('src') == '') {
            //     Swal.fire({
            //         icon: 'error',
            //         title: 'Please upload a profile picture',
            //         showConfirmButton: true
            //     });
            //     return;
            // }
            var formdata = new FormData($(this)[0]);
            $('#app-btn').text('Sumitting...');
            $('#app-btn').attr('disabled', 'disabled');
            $.ajax({
                type: 'post',
                url: '<?php echo base_url("application-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 });
                        $('#studentapplicaton')[0].reset();
                        $('#up-img').attr('src', '').attr('hidden', true);
                        // $('#datatable').DataTable().ajax.reload();
                        window.location.href = '<?php echo base_url("student-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");
                }
            });
        });
    });

//course select
    $(document).ready(function () {
        $.ajax({
            type: 'GET',
            url: '<?php echo base_url("get-header");?>',
            dataType: 'json',
            success: function (response) {
                if (response.result == 1) {
                    var options = response.data;
                    var selectElement = $('#header');
                    selectElement.empty();
                    $('#header').html('<option value="" selected >Select course</option>');
                    $.each(options, function (index, option) {
                        if(option.id!=36){
                            selectElement.append($('<option>', {
                            value: option.id,
                            text: option.header_name
                        }));
                        }
                    });
                } else {
                    $('#header').html('<option value="">Course not found</option>');
                }
            },
            error: function (xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
        // Second select dropdown
        $('#header').change(function () {
            var headerId = $(this).val();
            $.ajax({
                type: 'GET',
                url: '<?php echo base_url("get-value");?>?id=' + headerId,
                dataType: 'json',
                success: function (response) {
                    if (response.result == 1) {
                        var options = response.data;
                        var selectElement = $('#description');
                        selectElement.empty();
                        $('#description').html('<option value="" selected >Select value</option>');
                        $.each(options, function (index, option) {
                            selectElement.append($('<option>', {
                                value: option.id,
                                text: option.value_name
                            }));
                        });
                    } else {
                        $('#description').html('<option value="">value not found</option>');
                    }
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        });
        //fee details
        $('#description').change(function () {
            var valueId = $(this).val();
            $.ajax({
                type: 'GET',
                url: '<?php echo base_url("get-fees");?>?id=' + valueId,
                dataType: 'json',
                success: function (response) {
                    if (response.result == 1) {
                        var feedata = response.data[0];
                        $('#fees').val(feedata.fees);
                        $('#duration').val(feedata.duration);
                    } else {
                        $('#fees').val('NOT FOUND');
                        $('#duration').val('NOT FOUND');
                    }
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        });
    })
</script>

const rightDivHeight = rightDiv.offsetHeight;

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

</script>

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

<script>
    let defaultButton = document.querySelector(".default-btn");
    let customButton = document.querySelector(".custom-btn");
    let image = document.getElementById("up-img");

function referDefaultBtn() {
        defaultButton.click();
    }
    function cancelUpload() {
        image.src = "";
        defaultButton.value = "";
    }
    defaultButton.addEventListener("change", function () {
        const file = this.files[0];
        if (file) {
            let reader = new FileReader();
            reader.onload = function () {
                const result = reader.result;
                image.hidden = false;

image.src = result;
            }
            reader.readAsDataURL(file);
        }
    });
</script>

<script type="text/javascript" src="<?php echo base_url('public/assets/js/intlTelInput.js');?>"></script>
    <script>
        var input = document.querySelector("#phone");
        window.intlTelInput(input, {
          autoPlaceholder: "on",
          utilsScript: "js/utils.js",
        });
      </script>