{% include "header.html"%}

        <!-- Header Layout Content -->
        <div class="mdk-header-layout__content">

            <div class="mdk-drawer-layout js-mdk-drawer-layout" data-push data-responsive-width="992px">
                <div class="mdk-drawer-layout__content page">



                    <div class="container pt-3">
                        <h1 class="heading">Add Lead</h1>
                            
                        <div class="row">
                            <div class="col-12">
                                <div class="card card-body">
                                    <form id="add_lead" method="post" enctype="multipart/form-data">
                                        {% csrf_token %}
                                        <div class="row">

                                       

                                        <div class="col-md-6 form-group">
                                            <label>First Name</label>
                                            <input type="text" class="form-control" name="first_name" id="first_name" placeholder="Enter first Name" />
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <label>Last Name</label>
                                            <input type="text" class="form-control" name="last_name" id="last_name" placeholder="Enter last Name" >
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <label>Email</label>
                                            <input type="text" class="form-control" name="email" id="email" placeholder="Enter Email Address">
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <label>Mobile Number</label>
                                            <input type="text" class="form-control" name="mobile" id="mobile" placeholder="Enter Mobile Number" required>
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <label>Location</label>
                                            <input type="text" class="form-control" name="location" id="location" placeholder="Enter Location">
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <label>Select Lead Type</label>
                                            <select class="form-control" name="lead_type" id="lead_type">
                                                <option value="Cold">Cold</option>
                                                <option value="Hot">Hot</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <label>Select source</label>
                                            <select class="form-control" name="source" id="source">
                                                {% for source in all_source %}
                                                <option value="{{source.id}}">{{ source.source_name }}</option>
                                                {%endfor%}
                                            </select>
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <label>Select Status</label>
                                            <select class="form-control" name="status">
                                                {% for status in all_status %}
                                                <option value="{{status.id}}" style="background-color: {{status.bg_color}};">{{ status.status_name }}</option>
                                                {%endfor%}
                                            </select>
                                        </div>
                                        <div class="col-md-12 form-group">
                                            <label>Remark</label>
                                            <textarea class="form-control" name="remark" id="remark" placeholder="Enter remark here.."></textarea>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div id="msg" class="mt-4"></div>
                                    </div>
                                    <div class="row ">
                                        <div class="d-flex justify-content-end ">
                                    <button type="submit" id="submit" class="add-btn mt-3">Submit</button>
                                  
                                   
                                </div></div>
                                </form>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- // END drawer-layout__content -->

                <!-- drawer -->
              {% include "sidebar.html"%}
                <!-- // END drawer -->
            </div>
            <!-- // END drawer-layout -->

        </div>
        <!-- // END header-layout__content -->

    </div>
    <!-- // END header-layout -->

{% include "footer.html"%}

<script>
  CKEDITOR.replace( 'question' );
  CKEDITOR.replace( 'paragraph' );
  CKEDITOR.replace( 'explaination' );
</script>

    <script>
        $('#add_lead').submit(function(event) {
            // Prevent the default form submission behavior
            event.preventDefault();
          
            var formData = new FormData($(this)[0]);
        
            // Send the Ajax request
            $.ajax({
            url: "{% url 'save-lead' %}",
            type: 'POST',
            data: formData,
            processData: false,
            dataType: 'json',
            contentType: false,
            success: function(response) {
                
                if(response.status=='success'){
             setTimeout(function () {
            Swal.fire({
                icon: 'success',
                title: 'Success!',
                text: 'Lead Created successfully.',
                confirmButtonColor: '#3085d6',
                confirmButtonText: 'OK'
            });
        }, 1000);
        setTimeout(function () {
            location.reload();
        }, 2000);
                    // $('#msg').html('<div class="alert alert-success">'+response.msg+'</div>');
                }
                else{
            
                    $('#msg').html('<div class="alert alert-danger">'+response.msg+'</div>');
                }
            },
            error: function(xhr, status, error) {
                // Handle the error response
                console.log(error);
            }
            });
         
        });
        $(document).ready(function() {
            $("#question_type").change(function() {
                var questionType = $(this).val();

                if (questionType === "mcq") {
                    $("#optionsContainer").show();
                    $("#paragraphContainer").hide();
                } else if (questionType === "paragraph") {
                    $("#optionsContainer").show();
                    $("#paragraphContainer").show();
                } else {
                    $("#optionsContainer").hide();
                    $("#paragraphContainer").hide();
                }
            });
        });
    </script>
</body>

</html>