EVOLUTION-NINJA

Edit File: lead_form.php

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

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

.add-stud {
        background-color: #0065A3;
        color: #ffffff;
        font-size: 16px;
        font-weight: 500;
        
    }

.add-stud:hover {
        background-color: #0065A3;
        opacity: 0.9;
    }

.back-butt {
        color: #606060;
        font-size: 21px;
        font-weight: 500;
        outline: none;
        border: none
    }

/* -- ----------FORM SECTION-----------  */
    .student-education-detail {
        background-color: #ABC0F1;
        padding: 10px 25px;
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(4, 1fr);
    }

.form-select {
        height: 40px;
        width: 100%;
        font-size: 15px;
        font-weight: 500;
    }

.detail-names>h6 {
        color: #444;
    }

.student-form-detail-entry {
        margin-top: 10px;
        padding: 15px 25px;
        height: auto;
        background-color: #EFF3FC;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(5, 1fr);
        gap: 5px;
        grid-template-areas:
            "a1 a2 a3 a4"
            "a5 a6 a7 a4"
            "a8 a9 a10 a4"
            "a11 a11 a12 ."
            "a13 a14 a15 ."
            "a16 a17 a18 ."
            "a19 a19 a20 .";
    }

.student-form-detail-entry>div {
        padding: 5px 10px;
        font-size: 15px;
        margin-block: 4px;
        font-weight: 500;
        color: #606060;
    }

.a1 {
        grid-area: a1;
    }

.a2 {
        grid-area: a2;
    }

.a3 {
        grid-area: a3;
    }

.a4 {
        grid-area: a4;
/* 
        & input {
            height: 70px;
        } */
    }

.a5 {
        grid-area: a5;
    }

.a6 {
        grid-area: a6;
    }

.a7 {
        grid-area: a7;
    }

.a8 {
        grid-area: a8;
    }

.a9 {
        grid-area: a9;
    }

.a10 {
        grid-area: a10;
    }

.a11 {
        grid-area: a11;
    }

.a12 {
        grid-area: a12;
    }

.a13 {
        grid-area: a13;
    }

.a14 {
        grid-area: a14;
    }

.a15 {
        grid-area: a15;
    }

.a16 {
        grid-area: a16;
    }

.a17 {
        grid-area: a17;
    }

.a18 {
        grid-area: a18;
    }

.a19 {
        grid-area: a19;
    }

.a20 {
        grid-area: a20;
        display: flex;
        align-items: end;
    }

.submit-student-form {
        color: white;
        width: 100%;
        background: linear-gradient(#4E79FF, #71ACFF);
        border: none;
        outline: none;
        font-size: 18px;
        padding: 5px 4px;
        font-weight: 500;

}

.inp-boxes {
        border: none;
        box-shadow: 0px 0px 3px #ccc;

background-color: white !important;
    }

@media only screen and (max-width:728px) {
        .Add-student {
        width:100vw;
        }
        
    .add-stud {
        background-color: #0065A3;
        color: #ffffff;
        font-size: 12px;
        font-weight: 400;
        width:59%
    }
        .student-education-detail {
            width: 95vw;
            margin: auto;
            padding: 9px 7px;
            gap: 15px;
            grid-template-columns: repeat(1, 1fr);
        }

.student-form-detail-entry {
            width: 95vw;
            display:inherit;
        }

}
    @media only screen and(max-width:992px){
       
        .student-form-detail-entry {
            margin-top: 10px;
            padding: 10px ;
            height: auto;
            background-color: #EFF3FC;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: auto;
            gap: 5px;
            grid-template-areas:
                "a1 a2"
                "a3 a4"
                "a5 a6"
                "a7 a8"
                "a9 a10"
                "a11 a12"
                "a13 a14"
                "a15 a16"
                "a17 a18"
                "a19 a20";
        }
    }

.input-fields-student-form .div-img--contents {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.input-fields-student-form .img-wrapper {
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.input-fields-student-form .img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none; /* Initially hidden */
}

.input-fields-student-form .custom-btn {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.input-fields-student-form .custom-btn:hover {
    background-color: #0056b3;
}

.input-fields-student-form .default-btn {
    display: none; /* Hide the default file input */
}
#leftDiv{
    height: 900px !important;
}
.star-mad{
    color: #c83434;
    font-size: 20px;
    position: relative;
    top: 2px;
}
</style>

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

</section>

<section class="mt-3">
                <form id="student-form">

<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="" id="First-Name" class="inp-boxes form-control" name="first_name" required/></div>
                        <div class="input-fields-student-form a2 mt-2"><label for="Last-Name">Last Name </label></br><input type="text" placeholder="" id="Last-Name" class="mt-1 inp-boxes form-control" name="last_name" /></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" id="date" class="inp-boxes form-control" name="Date" 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">
                                        
                                    </div>
                                </div>
                                <input type="file" class="default-btn" name="file" 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="" id="dob" class="inp-boxes form-control" name="DOB" required/></div>
                        <div class="input-fields-student-form a6"><label for="Email">Email <span class="star-mad">*</span></label></br><input type="email" placeholder="" id="Email" class="inp-boxes form-control" name="email" required/></div>
                        <div class="input-fields-student-form a7" required><label for="student-gender">Gender <span class="star-mad">*</span></label></br>
                            <select class="form-select inp-boxes" id="student-gender" name="gender" required>
                                <option  value="">Select</option>
                                <option value="Male">Male</option>
                                <option value="Female">Female</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>
                        <div class="input-fields-student-form a8"><label for="phone">Mobile <span class="star-mad">*</span></label></br>
                        <input type="tel" oninput="validateInputnum(this)" placeholder="" id="phone" class="inp-boxes form-control" name="mobile_no" required/></div>
                        <div class="input-fields-student-form a9"><label for="student-qualification">Qualification <span class="star-mad">*</span></label></br><input type="text" placeholder="" id="student-qualification" class="inp-boxes form-control" name="qualification" 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="Just Dial">Just Dial</option>
                                <option value="Social Media">Social Media</option>
                                <option value="Referred by Friend">Referred by Friend</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  mt-1" id="student-profession" name="profession">
                                <option value="">Select</option>
                                <option value="Student">Student</option>
                                <option value="Working">Working</option>
                            </select>
                        </div>
                        <div class="input-fields-student-form a13"><label for="student-city">City <span class="star-mad">*</span></label></br><input type="text" placeholder="" id="student-city" class="inp-boxes form-control" 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" placeholder="" id="student-country" class="inp-boxes form-control" name="country" required/>
                            <!-- <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  mt-1" id="student-status" name="status">
                                <option value="">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="" id="course-offered-tostudents" class="inp-boxes form-control" name="course_offered" 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="" id="Counselor-Name" class="inp-boxes form-control" name="counselor_name" 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="" id="College-Company-Name" class=" mt-1 inp-boxes form-control" name="company_name"/></div>
                        <div class="input-fields-student-form a19"><label for="student-Remarks">Remarks</label></br><input type="text" placeholder="" id="student-Remarks" class="inp-boxes form-control" name="remarks"/></div>
                        <div class="input-fields-student-form a20"><button type="submit" class="submit-student-form">SUBMIT</button></div>
                    </div>
                </form>
            </section>
        </div>
    </div>
</div>

function referDefaultBtn() {
    defaultButton.click();
}

defaultButton.addEventListener("change", function () {
    const file = this.files[0];
    if (file) {
        let reader = new FileReader();
        reader.onload = function () {
            const result = reader.result;
            image.src = result;
            image.style.display = "block";
        }
        reader.readAsDataURL(file);
    }
});

$(document).ready(function() {
    $('#student-form').on('submit', function(event) {
        event.preventDefault();
        var formData = new FormData(this);
        $.ajax({
            url: '<?php echo site_url("submitForm"); ?>',
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            dataType: 'json',
            success: function(response) {
                if (response.status === 'success') {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        text: response.message, // Using the message from the response
                        confirmButtonText: 'OK'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            window.location.href = '<?php echo base_url("leads"); ?>';
                        }
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: response.message || 'Form submission failed!', // Using the message from the response or a default message
                    });
                    console.error('Form submission failed');
                }
            },
            error: function(xhr, status, error) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'An error occurred during the form submission. Please try again later.',
                });
                console.error('Error:', error);
            }
        });
    });
});
</script>

<script>
    function goBack() {
        window.location.href = "<?php echo base_url('leads');?>";
    }
</script>

<script>
    function validateInputnum(inputField) {
      var regex = /^[0-9\s\+]+$/;
      var inputValue = inputField.value;
      if (!regex.test(inputValue)) {
        inputField.value = inputValue.replace(/[^0-9\s\+]/g, '');
		toastr.error('Only numerical numbers,space and + are allowed.');
      }
    }
  </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>