EVOLUTION-NINJA

Edit File: convert_lead.php

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Conversion Form</title>
    <style>
        /* Add your CSS styles here */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0, 0, 0);
            background-color: rgba(0, 0, 0, 0.4);
            padding-top: 60px;
        }

.modal-content {
            background-color: #fefefe;
            margin: 5% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 600px;
        }

.close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

.close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>

<button onclick="openModal()">Convert</button>

<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal()">&times;</span>
        
        <form id="conversionForm">
            <div class="student-form-detail-entry">
            <div class="student-form-detail-entry">
        <div class="input-fields-student-form a1"><label for="First-Name">First Name</label></br><input type="text"
                placeholder="" id="First-Name" class="inp-boxes form-control" /></div>
        <div class="input-fields-student-form a2"><label for="Last-Name">Last Name</label></br><input type="text"
                placeholder="" id="Last-Name" class="inp-boxes form-control" /></div>
        <div class="input-fields-student-form a3"><label for="date">Date (dd/mm/yyyy)</label></br><input type="date"
                id="date" class="inp-boxes form-control" /></div>
        <div class="input-fields-student-form a4"><label class="photo">Upload Photo</label></br><input type="file"
                placeholder="" id="photo" class="inp-boxes form-control" /></div>
        <div class="input-fields-student-form a5"><label for="dob">DOB (dd/mm/yyyy)</label></br><input type="date"
                placeholder="" id="dob" class="inp-boxes form-control   " /></div>
        <div class="input-fields-student-form a6"><label for="Email">Email</label></br><input type="email"
                placeholder="" id="Email" class="inp-boxes form-control " /></div>
        <div class="input-fields-student-form a7"><label for="student-gender">Gender</label></br>
            <select class="form-select inp-boxes" id="student-gender">

<option selected>Open this select menu</option>
                <option value="1">Male</option>
                <option value="2">Female</option>
                <option value="3">Other</option>
            </select>
        </div>
        <div class="input-fields-student-form a8"><label for="ph-num">Mobile</label></br><input type="tel"
                placeholder="" id="ph-num" class="inp-boxes form-control  " /></div>
        <div class="input-fields-student-form a9"><label
                for="student-aualification">Qualification</label></br><input type="text" placeholder=""
                id="student-aualification" class="inp-boxes form-control " /></div>
        <div class="input-fields-student-form a10"><label for="student-source">Source</label></br>
            <select class="form-select inp-boxes" id="student-source" >

<option selected>Open this select menu</option>
                <option value="1">Just Dial</option>
                <option value="2">Social Media </option>
                <option value="3">Refered by Friend</option>
            </select>
        </div>
        <div class="input-fields-student-form a11"><label for="student-address"> Address</label></br>
            <textarea name="student-address" id="student-address" class="form-control">

</textarea>
        </div>
        <div class="input-fields-student-form a12"><label for="student-profession">Profession</label></br>
            <select class="form-select inp-boxes" id="student-profession">

<option selected>Open this select menu</option>
                <option value="1">Student</option>
                <option value="2">working</option>
            </select>
        </div><br>
        <div class="detail-names">
                        <h6>City</h6>
                        <input type="text" class="form-control inp-boxes" id="student-city">
                    </div>

<div class="detail-names">
                        <h6>Country</h6>
                        <input type="text" class="form-control inp-boxes" id="student-country">
                    </div>

<div class="detail-names">
                        <h6>Status</h6>
                        <input type="text" class="form-control inp-boxes" id="student-status">
                    </div>
                
        <div class="input-fields-student-form a16"><label for="course-offered-tostudents">Course
                Offered</label></br><input type="text" placeholder="" id="course-offered-tostudents"
                class="inp-boxes form-control   " /></div>
        <div class="input-fields-student-form a17"><label for="Counselor Name">Counselor Name</label></br><input
                type="text" placeholder="" id="Counselor Name" class="inp-boxes form-control   " /></div>
        <div class="input-fields-student-form a18"><label for="College-Company Name">College / Company
                Name</label></br><input type="text" placeholder="" id="College-Company Name"
                class="inp-boxes form-control   " /></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="additional-fields">
                <div class="input-fields-student-form">
                    <label for="fees">Fees</label><br>
                    <input type="number" id="fees" class="inp-boxes form-control" oninput="calculateTotalAmount()"/><br>
                </div>

<div class="input-fields-student-form">
                    <label for="discount">Discount (%)</label><br>
                    <input type="number" id="discount" class="inp-boxes form-control" oninput="calculateTotalAmount()"/><br>
                </div>

<div class="input-fields-student-form">
                    <label for="discounted-amount">Discounted Amount</label><br>
                    <input type="number" id="discounted-amount" class="inp-boxes form-control" readonly /><br>
                </div>

<div class="input-fields-student-form">
                    <label for="converted-by">Converted By</label><br>
                    <input type="text" id="converted-by" class="inp-boxes form-control" /><br>
                </div>
            </div>

<button type="submit" onclick="submitForm()" id='conversionForm'>Submit</button>

</form>
    </div>
</div>
<script type="text/javascript" src="<?php echo base_url('public/assets/js/jquery-3.6.0.min.js'); ?>"></script>
<script>
    // Function to open the modal
    function openModal() {
        var modal = document.getElementById("myModal");
        modal.style.display = "block";
        
        // Fetch lead data via AJAX when modal is opened
        $.ajax({
            url: "<?php echo base_url('fetch_leads'); ?>", // Adjust the URL to your endpoint
            method: "GET",
            dataType: "json",
            success: function(response) {
                // Populate form fields with lead data
                $('#First-Name').val(response.first_name);
                $('#Last-Name').val(response.last_name);
                $('#date').val(response.date);
                // Add more fields as needed
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
                // Handle error if necessary
            }
        });
    }

// Function to close the modal
    function closeModal() {
        var modal = document.getElementById("myModal");
        modal.style.display = "none";
    }

// Submit form data
    $('#conversionForm').submit(function(event) {
        event.preventDefault();
        // Handle form submission (e.g., send data to server)
        closeModal(); // Close modal after form submission
    });

// Function to calculate total amount
    function calculateTotalAmount() {
        var fees = parseFloat($('#fees').val());
        var discount = parseFloat($('#discount').val());
        var discountedAmount = fees - (fees * (discount / 100));
        $('#discounted-amount').val(discountedAmount.toFixed(2));
    }
    $(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);
                    $('#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-aualification').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);
                },
                error: function(xhr, status, error) {
                    console.error('Error fetching lead details:', error);
                }
            });
        }
    });

// Function to submit form data via AJAX
function submitForm() {
    // Serialize form data
    var formData = $('#conversionForm').serialize();
    
    // Send AJAX request
    $.ajax({
        url: "<?php echo base_url('submit_form'); ?>", // Adjust the URL to your controller method
        method: "POST",
        data: formData,
        dataType: "json",
        success: function(response) {
            // Handle success response
            console.log(response);
        },
        error: function(xhr, status, error) {
            console.error(xhr.responseText);
            // Handle error if necessary
        }
    });
}

</script>

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