<?php 

include "function.php";
 ?>

<!--begin::Content-->
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Container-->
    <div class="container-fluid" id="kt_content_container">
        <!--begin::Card-->
        <div class="card">
            <!--begin::Card body-->
            <div class="card-body">
                <form class="mx-auto mw-1000px w-800 pt-15 pb-10" novalidate="novalidate" id="add_form"
                    enctype="multipart/form-data" name="add_form" method="POST" action="api/ac_form.php?ac=add">


                    <!--begin::Input group-->
                    <div class="row g-9 mb-8">
                        <!--begin::Col-->
                        <div class="col-md-6 fv-row">
                            <label class="required fs-6 fw-bold mb-2">ชื่อแบบฟอร์ม</label>
                            <input type="text" class=" form-control form-control-solid" name="form_name" value="" />
                        </div>
                        <!--end::Col-->
                        <!--begin::Col-->
                        <div class="col-md-6 fv-row">
                            <label class="required fs-6 fw-bold mb-2">ชื่อย่อแบบฟอร์ม</label>
                            <input type="text" class="form-control form-control-solid" name="form_shortname" />
                        </div>
                        <!--end::Col-->
                    </div>
                    <!--end::Input group-->

                    <!--begin::Input group-->
                    <div class="row g-9 mb-8">
                        <!--begin::Col-->
                        <div class="col-md-12 fv-row">
                            <label class="required fs-6 fw-bold mb-2">รายละเอียดแบบฟอร์ม</label>
                            <!--begin::Textarea-->
                            <textarea name="form_detail" class="form-control form-control-solid mb-8" rows="5"
                                placeholder="รายละเอียดแบบฟอร์มข้อมูลเกี่ยวกับแบบฟอร์ม"></textarea>
                            <!--end::Textarea-->
                        </div>
                        <!--end::Col-->

                    </div>
                    <!--end::Input group-->


                     <!--begin::Input group-->
                    <div class="row g-9 mb-8">
                         <!--begin::Col-->
                        <div class="col-md-6 fv-row">
                            <label class="required fs-6 fw-bold mb-2">ไฟล์คู่มือ</label>
                            <input type="file" class="form-control form-control-solid" name="form_file" />
                        </div>
                        <!--end::Col-->

                    </div>
                    <!--end::Input group-->

                    <!--begin::Input group-->
                    <div class="row g-9 mb-8">
                        <!--begin::Col-->
                        <div class="col-md-4 fv-row">
                            <label class=" fs-6 fw-bold mb-2">จำนวนคำถาม</label>
                            <input type="number" class="form-control form-control-solid" id="input_ark" name="input_ark"
                                value="1" />
                        </div>
                        <!--end::Col-->

                        <!--begin::Col-->
                        <div class="col-md-4 fv-row">
                            <label class=" fs-6 fw-bold mb-2">จำนวนคำตอบ</label>
                            <input type="number" class="form-control form-control-solid" id="input_ans" name="input_ans"
                                value="1" />
                        </div>
                        <!--end::Col-->

                         <!--begin::Col-->
                        <div class="col-md-4 fv-row">
                            <label class=" fs-6 fw-bold mb-2">จำนวนการแบ่งระดับคะแนน</label>
                            <input type="number" class="form-control form-control-solid" id="input_point" name="input_ans"
                                value="1" />
                        </div>
                        <!--end::Col-->


                        <!--begin::Col-->
                        <div class="col-md-6 fv-row">
                            <label class="required fs-6 fw-bolder mb-2">คำตอบมีรายละเอียดเพิ่มเติม </label>
                            <!--start::Checkboxes-->
                            <div class="d-flex ">
                                <!--begin::Checkbox-->
                                <label class="form-check form-check-custom form-check-solid me-10">
                                    <!--begin::Input-->
                                    <input class="form-check-input h-20px w-20px" type="radio" value="มี"
                                        name="check_ansdetail" onclick="return checkAnsDetail()" />
                                    <!--end::Input-->
                                    <!--begin::Label-->
                                    <span class="form-check-label fw-bold">มี</span>
                                    <!--end::Label-->
                                </label>
                                <!--end::Checkbox-->
                                <!--begin::Checkbox-->
                                <label class="form-check form-check-custom form-check-solid me-10">
                                    <!--begin::Input-->
                                    <input class="form-check-input h-20px w-20px" type="radio" value="ไม่มี"
                                        name="check_ansdetail" onclick="return checkAnsDetail()" />
                                    <!--end::Input-->
                                    <!--begin::Label-->
                                    <span class="form-check-label fw-bold">ไม่มี</span>
                                    <!--end::Label-->
                                </label>
                                <!--end::Checkbox-->

                            </div>
                            <!--end::Checkboxes-->

                        </div>
                        <!--end::Col-->





                    </div>
                    <!--end::Input group-->






<div class="fw-bolder fs-5 d-flex align-items-center text-dark mt-10 mb-3">คำถามของแบบประเมิน</div>


                    <!--begin::Input group-->
                    <div class="row g-9 mb-8" id="ark_detail">

                       
                    </div>
                    <!--end::Input group-->


<div class="fw-bolder fs-5 d-flex align-items-center text-dark mt-10 mb-3">การแปรผลของแบบประเมิน</div>


                     <!--begin::Input group-->
                    <div class="row g-9 mb-8" id="point_detail">

                       
                    </div>
                    <!--end::Input group-->




                   



                    <!--begin::Input group-->
                    <div class="row g-9 mb-8 mt-10" >
                       
                        <button type="submit" class="col-3 btn btn-lg btn-primary me-3" name=""> เพิ่มแบบประเมิน </button> 
                       
                    </div>
                    <!--end::Input group-->


                </form>



            </div>
            <!--end::Card body-->
        </div>
        <!--end::Card-->
    </div>
    <!--end::Container-->
</div>
<!--end::Content-->

<!--begin::Javascript-->
<!--begin::Global Javascript Bundle(used by all pages)-->
<script src="assets/plugins/global/plugins.bundle.js"></script>
<script src="assets/js/scripts.bundle.js"></script>
<!--end::Global Javascript Bundle-->
<!--begin::Page Custom Javascript(used by this page)-->
<script src="assets/js/custom/modals/form_fa_validate.js"></script>
<script src="assets/js/custom/widgets.js"></script>
<script src="assets/js/custom/apps/chat/chat.js"></script>
<script src="assets/js/custom/modals/create-app.js"></script>
<script src="assets/js/custom/modals/upgrade-plan.js"></script>
<!--end::Page Custom Javascript-->
<!--end::Javascript-->

<script type="text/javascript" src="datepicker/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="datepicker/js/bootstrap-datepicker-thai.js"></script>
<script type="text/javascript" src="datepicker/js/locales/bootstrap-datepicker.th.js"></script>

<script>

var from = document.forms['add_form'];

const inputArk = document.getElementById('input_ark');
const inputArlHandler = function(e) {
    var num = e.target.value;
    var num2 = from['input_ans'].value;
    var opt = "";
    createArk(num, num2);
}

const inputAns = document.getElementById('input_ans');
const inputAnsHandler = function(e) {
    // console.log(e.target.value);
    var num = from['input_ark'].value;
    var num2 = e.target.value;
    var opt = "";
    createArk(num, num2);
}

const inputPoint = document.getElementById('input_point');
const inputPointlHandler = function(e) {
   
    createPoint(e.target.value)


}

inputArk.addEventListener('input', inputArlHandler);
inputAns.addEventListener('input', inputAnsHandler);
inputPoint.addEventListener('input', inputPointlHandler);


function createArk(num, num2) {
    // console.log(num)
    var opt = "";

    var chk_arr = document.getElementsByName("check_ansdetail");
   
    for (var i = 0; i < num; i++) {

        // <!--begin::Input group-->
        opt += "<div class=\"row g-9 mb-8\">";
        opt += "<div class=\"fw-bolder fs-5 d-flex align-items-center text-dark mt-0 mb-0\">ลำดับที่" + Number(i + 1) +
            "</div>"

         // <!--begin::Col-->
        opt += "<div class=\"col-md-12 fv-row\">";
        opt += "<label class=\"required fs-6 fw-bold mb-2\">รหัสคำถาม" + Number(i + 1) + " </label>";
        opt += "<input type=\"text\" class=\" form-control form-control-solid\" name=\"ark_code[]\" />";
        opt += " </div>";
        // <!--end::Col-->

        // <!--begin::Col-->
        opt += "<div class=\"col-md-12 fv-row\">";
        opt += "<label class=\"required fs-6 fw-bold mb-2\">คำถามข้อที่" + Number(i + 1) + " </label>";
        opt += "<input type=\"text\" class=\" form-control form-control-solid\" name=\"ark_name[]\" />";
        opt += " </div>";
        // <!--end::Col-->

        // <!--begin::Col-->
        opt += "<div class=\"col-md-12 fv-row\">"
        opt += "    <label class=\"fs-6 fw-bold mb-2\">รายละเอียดคำถามเพื่มเติม</label>"
        // opt += "    <!--begin::Textarea-->
        opt +=
            "<textarea name=\"ark_detail[]\" class=\"form-control form-control-solid mb-8\" rows=\"2\" placeholder=\"รายละเอียดคำถามเพื่มเติม\"></textarea>"
        // opt += "    <!--end::Textarea-->
        opt += "</div>"
        // <!--end::Col-->


        for (var n = 0; n < num2; n++) {
            // <!--begin::Col-->
            opt += "<div class=\"col-md-12 fv-row\">";
            opt += "<label class=\"required fs-6 fw-bold mb-2\">คำตอบ" + Number(n + 1) + " </label>";
            opt += "<input type=\"text\" class=\" form-control form-control-solid\" name=\"ans_name[" + i + "][]\" />";
            opt += " </div>";
            // <!--end::Col-->

            // <!--begin::Col-->
            opt += "<div class=\"col-md-6 fv-row\">";
            opt += "<label class=\"required fs-6 fw-bold mb-2\">รหัสคำตอบ" + Number(n + 1) + " </label>";
            opt += "<input type=\"text\" class=\" form-control form-control-solid\" name=\"ans_code[" + i + "][]\" />";
            opt += " </div>";
            // <!--end::Col-->

             // <!--begin::Col-->
            opt += "<div class=\"col-md-6 fv-row\">";
            opt += "<label class=\"required fs-6 fw-bold mb-2\">คะแนนของคำตอบ" + Number(n + 1) + " </label>";
            opt += "<input type=\"number\" class=\" form-control form-control-solid\" name=\"ans_point[" + i + "][]\" />";
            opt += " </div>";
            // <!--end::Col-->

            if (chk_arr[0].checked == true) {
                // <!--begin::Col-->
                opt += "<div class=\"col-md-12 fv-row\">"
               
            }else{
                opt += "<div class=\"col-md-12 fv-row d-none\">"

            }

             opt += "    <label class=\"fs-6 fw-bold mb-2\">รายละเอียดคำตอบเพื่มเติม</label>"
                //<!--begin::Textarea-->
                opt +=
                    "<textarea name=\"ans_detail[" + i + "][]\" class=\"form-control form-control-solid mb-8\" rows=\"2\" placeholder=\"รายละเอียดคำตอบเพื่มเติม\"></textarea>"
                // <!--end::Textarea-->
                opt += "</div>"
                // <!--end::Col-->

        }

        opt += " </div>";

        // <!--end::Input group-->


    }

    $("#ark_detail").html(opt);
}



function checkAnsDetail() {

    var num = from['input_ark'].value;
    var num2 = from['input_ans'].value
    createArk(num, num2)
}

function createPoint(num){



    var opt = "";

    for (var i = 0; i < num; i++) {

        // <!--begin::Input group-->
        opt += "<div class=\"row g-9 mb-8\">";
        opt += "<div class=\"fw-bolder fs-5 d-flex align-items-center text-dark mt-0 mb-0\">ลำดับที่" + Number(i + 1) +
            "</div>"

        // <!--begin::Col-->
        opt += "<div class=\"col-md-6 fv-row\">";
        opt += "<label class=\"required fs-6 fw-bold mb-2\">ระดับคะแนนรวมเริ่มต้น"  + " </label>";
        opt += "<input type=\"number\" class=\" form-control form-control-solid\" name=\"point_start[]\" />";
        opt += " </div>";
        // <!--end::Col-->

          // <!--begin::Col-->
        opt += "<div class=\"col-md-6 fv-row\">";
        opt += "<label class=\"required fs-6 fw-bold mb-2\">ระดับคะแนนรวมสิ้นสุด"  + " </label>";
        opt += "<input type=\"number\" class=\" form-control form-control-solid\" name=\"point_end[]\" />";
        opt += " </div>";
        // <!--end::Col-->

        // <!--begin::Col-->
        opt += "<div class=\"col-md-12 fv-row\">";
        opt += "<label class=\"required fs-6 fw-bold mb-2\">การแปลผล"  + " </label>";
        opt += "<input type=\"text\" class=\" form-control form-control-solid\" name=\"point_name[]\" />";
        opt += " </div>";
        // <!--end::Col-->

        // <!--begin::Col-->
        opt += "<div class=\"col-md-12 fv-row\">"
        opt += "    <label class=\"fs-6 fw-bold mb-2\">รายละการแปลผลเพื่มเติม</label>"
        // opt += "    <!--begin::Textarea-->
        opt +=
            "<textarea name=\"point_detail[]\" class=\"form-control form-control-solid mb-8\" rows=\"2\" placeholder=\"รายละการแปลผลเพื่มเติม\"></textarea>"
        // opt += "    <!--end::Textarea-->
        opt += "</div>"
        // <!--end::Col-->

         // <!--begin::Col-->
        opt += "<div class=\"col-md-12 fv-row\">"
        opt += "    <label class=\"fs-6 fw-bold mb-2\">เครื่องมือที่ใช้กับการแปลผล</label>"
        // opt += "    <!--begin::Textarea-->
        opt +=
            "<textarea name=\"point_option[]\" class=\"form-control form-control-solid mb-8\" rows=\"2\" placeholder=\"เครื่องมือที่ใช้กับการแปลผล\"></textarea>"
        // opt += "    <!--end::Textarea-->
        opt += "</div>"
        // <!--end::Col-->


        
        opt += " </div>";

        // <!--end::Input group-->


    }

    $("#point_detail").html(opt);
   
}


$(document).on("submit", "#add_form", function(e) {
    e.preventDefault();
    var url = $(this).attr("action");
    var data = new FormData(this);
    // console.log("result data : am in ");
    // console.log(url);
     // console.log(data);
    $.ajax({
        url: url,
        type: $(this).attr("method"),
        dataType: "JSON",
        data: data,
        processData: false,
        contentType: false,
        beforeSend: function() {
            $("#btn_send_form").attr('data-kt-indicator', 'on');
        },
        success: function(data, status) {
            // console.log("data API");
            // console.log(data);
            if (data['status'] == true) {
                $("#btn_send_form").attr('data-kt-indicator', 'off');

                Swal.fire({
                    text: data['msg'],
                    icon: "success",
                    buttonsStyling: false,
                    confirmButtonText: "ตกลง",
                    customClass: {
                        confirmButton: "btn btn-primary"
                    }
                }).then(function(result) {
                        window.location.replace("index.php");

                   
                });
            } else {
                $("#btn_send_form").attr('data-kt-indicator', 'off');
                Swal.fire({
                    text: data['msg'] + '  ERROR : ' + data['log'],
                    icon: "error",
                    buttonsStyling: false,
                    confirmButtonText: "ตกลง",
                    customClass: {
                        confirmButton: "btn btn-primary"
                    }
                });
            }

        }
    });

});
</script>