    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <div class="img-profile ml-3 mt-3">

                    </div>
                    <h1 class="m-0 text-dark"><?php echo (isset($driverdetails)) ? 'Add Course' : 'Add Course' ?>
                    </h1>

                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="<?= base_url(); ?>dashboard/courses">Courses</a></li>
                        <li class="breadcrumb-item active"><?php echo (isset($driverdetails)) ? 'Add Course' : 'Add Course' ?></li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <form method="post" id="add_driver" class="card" action="" enctype="multipart/form-data">
        <section class="content">
            <div class="container-fluid">
                <div class="card-body">

                    <div class="row">
                        <input type="hidden" name="d_id" id="d_id" value="<?php echo (isset($driverdetails)) ? $driverdetails[0]['d_id'] : '' ?>">
                        <div class="col-sm-6 col-md-6">
                            <div class="form-group">
                                <label class="form-label">Category<span class="form-required">*</span></label>
                                <select id="categoryId" name="categoryId" class="form-control " required="">
                                    <option value="" selected>Select Category</option>
                                    <?php
                                      foreach($categories as $key => $category){
                                    ?>
                                    <option value="<?=$key?>"><?=$category['title']?></option>
                                    <?php } ?>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-3">
                            <label class="form-label">Title<span class="form-required">*</span></label>
                            <div class="form-group">
                                <input type="text" name="title" id="title" class="form-control" placeholder="Title" required value="<?php echo (isset($driverdetails)) ? $driverdetails[0]['firstName'] : '' ?>">
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12">
                            <div class="form-group">
                                <label class="form-label">Description</label>
                                <textarea rows="5" name="description" id="description" placeholder="Description" class="form-control" required></textarea>
                            </div>
                        </div>
                        <div class="container" id="questions" style="border: 1px solid black;">
                            <div class="col-sm-12 col-md-12">
                                <div class="form-group">
                                    <label class="form-label">Question</label>
                                    <input type="text" name="question[1][]" class="form-control" placeholder="Question">
                                </div>
                                <div class="col-sm-8 col-md-6 ml-5">
                                    <div class="form-group">
                                        <label class="form-label">Answer</label>
                                        <input type="text" name="answer[1][]" class="form-control" placeholder="Question">
                                    </div>
                                    <div id="morea-1">
                                        <a href="javascript:void(0)" onclick="addMoreAnswer(1)" style="color: dodgerblue;">Add Another answer</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 mt-4">
                            <a href="javascript:void(0)" onclick="addMore()" style="color: dodgerblue;">Add Another question</a>
                        </div>

                        <div class="col-sm-12 col-md-12 mt-4">
                            <div class="form-group">
                                <label class="form-label">Video</label>
                                <div class="dropzone" id="myDropzone"></div>
                                <!-- <input type="file" name="video" class="form-control" placeholder="Video" required> -->
                            </div>
                        </div>

                        <div class="col-sm-12 col-md-12">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="yes" id="isPro" name="isPro">
                                <label class="form-check-label" for="isPro">
                                    <strong style="color:black">isPro</strong>
                                </label>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 mt-3" id="radiosSec">

                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="allowedFor" id="allTeams" value="All Teams" onclick="showTeams()" checked>
                                <label class="form-check-label" for="inlineRadio1">All Teams</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="allowedFor" id="specificTeams" value="Specific Teams" onclick="showTeams()">
                                <label class="form-check-label" for="inlineRadio2">Specific Teams</label>
                            </div>

                        </div>
                        <div class="col-sm-12 col-md-12 mt-3" style="display: none;" id="teamsSec">

                            <div class="form-group">
                                <label class="form-label">Teams<span class="form-required">*</span></label>
                                <select id="allowedTeams" name="allowedTeams[]" class="form-control" multiple>
                                    <?php
                                      foreach($teams as $key => $team){
                                    ?>
                                    <option value="<?=$key?>"><?=$team['name']?></option>
                                    <?php } ?>
                                </select>
                            </div>
                        </div>

                    </div>

                </div>

            </div>
        </section>
        <section class="content">
            <div class="container-fluid">
                <div class="card-footer text-right">
                    <button type="submit" id="submit" class="btn btn-primary"> <?php echo (isset($vehicledetails) && isset($driverdetails)) ? 'Add Course' : 'Add Course' ?></button>
                </div>
            </div>
        </section>
    </form>
    <script type="text/javascript">
var counter = 2;

function addMoreAnswer(id) {
    let newRowAdd = `
        <div class="form-group" id="a-${id}">
        <label class="form-label">Answer</label>
        <input type="text" name="answer[${id}][]" class="form-control" placeholder="Question">
        <span style="float: right; color:red; cursor:pointer; margin-top:3px;" onclick="removeAnswer('${id}')">remove</span>
        </div>
    `;
    $(newRowAdd).insertBefore(`#morea-${id}`);
}

function addMore() {
    let newRowAdd = `
        <div class="col-sm-12 col-md-12 mt-5" id="q-${counter}">
            <div class="form-group">
                <label class="form-label">Question</label>
                <input type="text" name="question[${counter}][]" class="form-control" placeholder="Question">
                <span style="float: right; color:red; cursor:pointer; margin-top:3px;" onclick="removeQuestion('${counter}')">remove</span>
            </div>
            <div class="col-sm-8 col-md-6 ml-5">
                <div class="form-group">
                    <label class="form-label">Answer</label>
                    <input type="text" name="answer[${counter}][]" class="form-control" placeholder="Question">
                </div>
                <div id="morea-${counter}">
                    <a href="javascript:void(0)" onclick="addMoreAnswer(${counter})" style="color: dodgerblue;">Add Another answer</a>
                </div>
            </div>
        </div>
    `;
    counter++;

    $('#questions').append(newRowAdd);
}




function removeQuestion(id) {

    $("#q-" + id).remove();
    counter--;
}

function removeAnswer(id) {

    $("#a-" + id).remove();
}

function showRadios() {

    $("#teamsSec").hide();
    if (document.getElementById('isPro').checked) {
        $("#radiosSec").show();
        $("#specificTeams").prop('checked', false);
        $("#allTeams").prop('checked', true);
    } else {
        $("#radiosSec").hide();
    }
}

function showTeams() {

    if (document.getElementById('specificTeams').checked) {
        $("#teamsSec").show();
    } else {
        $("#teamsSec").hide();
    }
}


Dropzone.options.myDropzone = {
    url: '<?= base_url(); ?>dashboard/insertcourse',
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 1,
    maxFiles: 1,
    maxFilesize: 1e+9,
    acceptedFiles: 'video/*',
    addRemoveLinks: true,
    paramName: 'video',
    init: function() {
        dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

        // for Dropzone to process the queue (instead of default form behavior):
        document.getElementById("submit").addEventListener("click", function(e) {
            // Make sure that the form isn't actually being sent.
            e.preventDefault();
            e.stopPropagation();
            dzClosure.processQueue();
        });

        //send all the form data along with the files:
        this.on("sendingmultiple", function(data, xhr, formData) {
            $("form").find("input").each(function() {
                formData.append($(this).attr("name"), $(this).val());
            });
            formData.append("categoryId", $("#categoryId").val())
            formData.append("description", $("#description").val())
            formData.append("allowedTeams", $("#allowedTeams").val())
        });
        this.on("successmultiple", function(files, response) {
            // alert(response)
            window.location.reload();
        });
    }
}
    </script>