EVOLUTION-NINJA

Edit File: edit_form.php

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

.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 */
}
.star-mad {
    color: #c83434;
    font-size: 20px;
    position: relative;
    top: 2px;
}
</style>

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

</section>

<section class="mt-3">
    <div class="student-form-detail-entry">
    <input type="hidden" name="leadId" id="leadId" value="">
    <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" value="<?= $leadData['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="inp-boxes form-control mt-1" 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 mt-2">
        <label for="dob">DOB (dd/mm/yyyy)</label><br>
        <input type="date" placeholder="" id="dob" class="inp-boxes form-control mt-1" name="DOB"/>
    </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">
        <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="ph-num">Mobile <span class="star-mad">*</span></label><br>
        <input type="tel" oninput="validateInputnum(this)" placeholder="" id="ph-num" 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><br>
    <div class="detail-names">
    <h6>City <span class="star-mad">*</span></h6>
    <input type="text" class="form-control inp-boxes" id="student-city" name='city' required>
</div>

<div class="detail-names">
    <h6>Country <span class="star-mad">*</span></h6>
    
    <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="detail-names mt-2">
    <h6>Status</h6>
    
    <select class="form-select inp-boxes" 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" 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" 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="inp-boxes form-control mt-1">
</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">
</div>

<div class="input-fields-student-form a20">
        <button type="button" class="btn btn-info" onclick="updateStudent()">Update</button>
    </div>
        </div>
    </div>
</section>

</div>

</div>
</div>

<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>
    function goBack() {
        // window.history.back();
    }
</script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    let defaultButton = document.querySelector(".default-btn");
    let customButton = document.querySelector(".custom-btn");
    let image = document.getElementById("up-img");

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() {
    $(document).ready(function() {
    var leadId = '<?php echo isset($_GET['leadId']) ? $_GET['leadId'] : '' ?>';

if (leadId !== '') {
        $.ajax({
            type: 'GET',
            url: '<?= site_url('get_lead_details') ?>',
            data: { leadId: leadId },
            success: function(response) {
                // Populate input fields with fetched data
                $('#First-Name').val(response.first_name);
                $('#Last-Name').val(response.last_name);
                $('#Email').val(response.email);
                $('#dob').val(response.DOB);
                $('#date').val(response.Date);
                $('#ph-num').val(response.mobile_no);
                $('#student-address').val(response.address);
                $('#student-city').val(response.city);
                $('#course-offered-tostudents').val(response.course_offered);
                $('#student-qualification').val(response.qualification);
                $('#student-country').val(response.country);
                $('#Counselor-Name').val(response.counselor_name);
                $('#student-gender').val(response.gender);
                $('#student-source').val(response.source);
                $('#student-profession').val(response.profession);
                $('#student-status').val(response.status);
                $('#College-Company-Name').val(response.company_name);
                $('#student-Remarks').val(response.remarks);
                $('#leadId').val(leadId);  
                $('#up-img').attr('src', '<?= base_url('public/assets/lead_profileImg/') ?>' + response.profile_img)
                             .show(); 
            },
            error: function(xhr, status, error) {
                console.error('Error fetching lead details:', error);
            }
        });
    }
});
 });

// function updateStudent() {
//     var leadId = '<?php echo isset($_GET['leadId']) ? $_GET['leadId'] : '' ?>';
//     var formData = $('#editForm').serialize(); 
//     var url = '<?= site_url('update_lead') ?>';

//     $.ajax({
//         type: 'POST',
//         url: url,
//         data: { leadId: leadId },
//         success: function(data) {
//             console.log('Updated successfully:', data);
//             // window.location.href = '<?php echo base_url('/');?>';
//         },
//         error: function(xhr, status, error) {
//             console.error('Error updating student:', error);
//         }
//     });
// }
// function updateStudent() {
//     var formData = new FormData();
//     formData.append('leadId', $('#leadId').val());
//     formData.append('first_name', $('#First-Name').val());
//     formData.append('last_name', $('#Last-Name').val());
//     formData.append('Date', $('#date').val());
//     formData.append('DOB', $('#dob').val());
//     formData.append('email', $('#Email').val());
//     formData.append('gender', $('#student-gender').val());
//     formData.append('mobile_no', $('#ph-num').val());
//     formData.append('qualification', $('#student-qualification').val());
//     formData.append('source', $('#student-source').val());
//     formData.append('address', $('#student-address').val());
//     formData.append('profession', $('#student-profession').val());
//     formData.append('city', $('#student-city').val());
//     formData.append('country', $('#student-country').val());
//     formData.append('status', $('#student-status').val());
//     formData.append('course_offered', $('#course-offered-tostudents').val());
//     formData.append('counselor_name', $('#Counselor-Name').val());
//     formData.append('company_name', $('#College-Company-Name').val());
//     formData.append('remarks', $('#student-Remarks').val());
    
//     $.ajax({
//     url: '<?= base_url('updateLead') ?>',
//     type: 'POST',
//     data: formData,
//     processData: false,
//     contentType: false,
//     success: function(response) {
//         console.log('Student data updated successfully');
//         // Show success message using SweetAlert2
//         Swal.fire({
//             icon: 'success',
//             title: 'Success',
//             text: 'Lead data updated successfully!',
//             confirmButtonText: 'OK'
//         }).then((result) => {
//             if (result.isConfirmed) {
//                 // Redirect or perform any other action
//                 window.location.href = '<?php echo base_url('/leads');?>';
//             }
//         });
//     },
//     error: function(jqXHR, textStatus, errorThrown) {
//         console.error('Error updating student data: ' + textStatus, errorThrown);
//         // Optionally notify the user of the error
//     }
// });
// }
function updateStudent() {
    // Perform form validation
    if (!validateForm()) {
        return; // If validation fails, exit function
    }

if ($('#date').val() === '') {
        $('#date').addClass('is-invalid');
        isValid = false; // Mark form as invalid
        Swal.fire({
            icon: 'error',
            title: 'Validation Error',
            text: 'Please enter a date.',
            confirmButtonText: 'OK'
        });
    } else {
        $('#date').removeClass('is-invalid');
    }

if ($('#Email').val() === '') {
        $('#Email').addClass('is-invalid');
        isValid = false; // Mark form as invalid
        Swal.fire({
            icon: 'error',
            title: 'Validation Error',
            text: 'Please enter your email address.',
            confirmButtonText: 'OK'
        });
    } else {
        $('#Email').removeClass('is-invalid');
    }

if ($('#student-qualification').val() === '') {
        $('#student-qualification').addClass('is-invalid');
        isValid = false; // Mark form as invalid
        Swal.fire({
            icon: 'error',
            title: 'Validation Error',
            text: 'Please enter your Qualification.',
            confirmButtonText: 'OK'
        });
    } else {
        $('#student-qualification').removeClass('is-invalid');
    }
    
    if ($('#student-gender').val() === '') {
        $('#student-gender').addClass('is-invalid');
        isValid = false; // Mark form as invalid
        Swal.fire({
            icon: 'error',
            title: 'Validation Error',
            text: 'Please select your gender.',
            confirmButtonText: 'OK'
        });
    } else {
        $('#student-gender').removeClass('is-invalid');
    }
    
    if ($('#ph-num').val() === '') {
        $('#ph-num').addClass('is-invalid');
        isValid = false; // Mark form as invalid
        Swal.fire({
            icon: 'error',
            title: 'Validation Error',
            text: 'Please enter your mobile number.',
            confirmButtonText: 'OK'
        });
    } else {
        $('#ph-num').removeClass('is-invalid');
    }

if ($('#qualification').val() === '') {
        $('#qualification').addClass('is-invalid');
        isValid = false; // Mark form as invalid
        Swal.fire({
            icon: 'error',
            title: 'Validation Error',
            text: 'Please enter your qualification.',
            confirmButtonText: 'OK'
        });
    } else {
        $('#qualification').removeClass('is-invalid');
    }

if ($('#student-source').val() === '') {
        $('#student-source').addClass('is-invalid');
        isValid = false; // Mark form as invalid
        Swal.fire({
            icon: 'error',
            title: 'Validation Error',
            text: 'Please  select the Source.',
            confirmButtonText: 'OK'
        });
    } else {
        $('#student-source').removeClass('is-invalid');
    }

if ($('#student-address').val() === '') {
        $('#student-address').addClass('is-invalid');
        isValid = false; // Mark form as invalid
        Swal.fire({
            icon: 'error',
            title: 'Validation Error',
            text: 'Please enter your Address.',
            confirmButtonText: 'OK'
        });
    } else {
        $('#student-address').removeClass('is-invalid');
    }
    
    if ($('#student-city').val() === '') {
        $('#student-city').addClass('is-invalid');
        isValid = false; // Mark form as invalid
        Swal.fire({
            icon: 'error',
            title: 'Validation Error',
            text: 'Please enter your City.',
            confirmButtonText: 'OK'
        });
    } else {
        $('#student-city').removeClass('is-invalid');
    }

if ($('#student-country').val() === '') {
        $('#student-country').addClass('is-invalid');
        isValid = false; // Mark form as invalid
        Swal.fire({
            icon: 'error',
            title: 'Validation Error',
            text: 'Please  Select your Country.',
            confirmButtonText: 'OK'
        });
    } else {
        $('#student-country').removeClass('is-invalid');
    }

if ($('#course-offered-tostudents').val() === '') {
        $('#course-offered-tostudents').addClass('is-invalid');
        isValid = false; // Mark form as invalid
        Swal.fire({
            icon: 'error',
            title: 'Validation Error',
            text: 'Please enter your Course Offered.',
            confirmButtonText: 'OK'
        });
    } else {
        $('#course-offered-tostudents').removeClass('is-invalid');
    }
    if ($('#Counselor-Name').val() === '') {
        $('#Counselor-Name').addClass('is-invalid');
        isValid = false; // Mark form as invalid
        Swal.fire({
            icon: 'error',
            title: 'Validation Error',
            text: 'Please enter Counselor Name.',
            confirmButtonText: 'OK'
        });
    } else {
        $('#Counselor-Name').removeClass('is-invalid');
    }

return isValid;
}

</script>

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

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