<!-- Modal Success -->
<div id="modalSuccess" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header flex-column">
                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                <div class="icon-box">
                    <i class="bi bi-check-circle-fill" style="color:green; font-size:70px;"></i>
                </div><br />
                <h4 class="modal-title text-center">Success</h4>
            </div>
            <div class="modal-body text-center">
                <p>ดำเนินการสำเร็จ</p>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-secondary" onClick="javascript:window.location.href='./?page=addCourse';" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <p class="fs-3">เพิ่มข้อมูลรายวิชา</p>
    <form method="post" name="courseForm" id="courseForm" action="javascript:insertCrs();" class="row g-3 needs-validation" novalidate>
        <input type="hidden" class="form-control" name="action" value="insertCrs" />
        <div class="col-md-6">
            <div class="input-group">
                <label for="inputGroup01" class="input-group-text">รหัสวิชา (ไทย)</label>
                <input type="text" class="form-control" name="crsCode" id="crsCode" required />
                <div class="invalid-feedback">
                    กรุณากรอกข้อมูลให้ถูกต้อง
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="input-group">
                <label for="inputGroup02" class="input-group-text">รหัสวิชา (อังกฤษ)</label>
                <input type="text" class="form-control" name="crsCodeE" id="crsCodeE" required />
                <div class="invalid-feedback">
                    กรุณากรอกข้อมูลให้ถูกต้อง
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="input-group">
                <label for="inputGroup01" class="input-group-text">ชื่อรายวิชา (ไทย)</label>
                <input type="text" class="form-control" name="crsName" id="crsName" required />
                <div class="invalid-feedback">
                    กรุณากรอกข้อมูลให้ถูกต้อง
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="input-group">
                <label for="inputGroup02" class="input-group-text">ชื่อรายวิชา (อังกฤษ)</label>
                <input type="text" class="form-control" name="crsNameE" id="crsNameE" required />
                <div class="invalid-feedback">
                    กรุณากรอกข้อมูลให้ถูกต้อง
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="input-group">
                <label for="inputGroup04" class="input-group-text">ชื่อย่อรายวิชา (ไทย)</label>
                <input type="text" class="form-control" name="crsAbbr" id="curNameAbbrT" required />
                <div class="invalid-feedback">
                    กรุณากรอกข้อมูลให้ถูกต้อง
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="input-group">
                <label for="inputGroup05" class="input-group-text">ชื่อย่อรายวิชา (อังกฤษ)</label>
                <input type="text" class="form-control" name="crsAbbrE" id="curNameAbbrE" required />
                <div class="invalid-feedback">
                    กรุณากรอกข้อมูลให้ถูกต้อง
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="input-group">
                <label for="inputGroup01" class="input-group-text">จำนวนหน่วยกิตรวม</label>
                <input type="number" class="form-control" name="crsCreditTotal" id="crsCode" required />
                <div class="invalid-feedback">
                    กรุณากรอกข้อมูลให้ถูกต้อง
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="input-group">
                <label for="inputGroup02" class="input-group-text">ชั่วโมงทฤษฎี</label>
                <input type="number" class="form-control" name="crsCredit1" id="crsCredit1" required />
                <div class="invalid-feedback">
                    กรุณากรอกข้อมูลให้ถูกต้อง
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="input-group">
                <label for="inputGroup01" class="input-group-text">ชั่วโมงปฏิบัติ</label>
                <input type="number" class="form-control" name="crsCredit2" id="crsCredit2" required />
                <div class="invalid-feedback">
                    กรุณากรอกข้อมูลให้ถูกต้อง
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="input-group">
                <label for="inputGroup02" class="input-group-text">ชั่วโมงศึกษาด้วยตัวเอง</label>
                <input type="number" class="form-control" name="crsPeriod3" id="crsPeriod3" required />
                <div class="invalid-feedback">
                    กรุณากรอกข้อมูลให้ถูกต้อง
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="input-group">
                <label for="inputGroupSelect02" class="input-group-text">หมวดวิชา</label>
                <select class="form-select" name="crsCdId" id="crsCdId" required>
                    <option selected disabled value="">-- เลือก --</option>
                    <?php
                    $sql = "SELECT * FROM rg_Condition";
                    $link->query($sql);
                    while ($data = $link->getnext()) {
                        echo "<option value='" . $data->cdId . "'>" . $data->cdName . " " . $data->cdNameE . "</option>";
                    }
                    ?>
                </select>
                <div class="invalid-feedback">
                    กรุณากรอกข้อมูลให้ถูกต้อง
                </div>
            </div>
        </div>
        <div class="col-12 text-center">
            <button class="btn btn-primary" id="btnAddCrsSubmit" type="submit" name="submit">Save</button>
        </div>
    </form>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
    $(document).ready(function() {
        $('#crsCdId').select2({
            theme: "bootstrap-5",
            width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
            placeholder: $(this).data('placeholder'),
        });
    });

    function insertCrs() {

        var $this = $("#btnAddCrsSubmit"); //submit button selector using ID
        var $caption = $this.html(); // We store the html content of the submit button
        var form = "#courseForm"; //defined the #form ID
        var formData = $(form).serializeArray(); //serialize the form into array
        //var route = $(form).attr('action'); //get the route using attribute action
        var route = "./api/course.php";

        //alert("call insert function");

        // Ajax config
        $.ajax({
            type: "POST", //we are using POST method to submit the data to the server side
            url: route, // get the route value
            data: formData, // our serialized array data for server side
            beforeSend: function() { //We add this before send to disable the button once we submit it so that we prevent the multiple click
                $this.attr('disabled', true).html("Processing...");
            },
            success: function(response) { //once the request successfully process to the server side it will return result here
                $this.attr('disabled', false).html($caption);

                // Reload lists of employees
                //getDataAll();
                //window.location.href='./?page=editCurriculum';
                //$('#curStrucList').DataTable().ajax.reload();
                //$('#curStrucList').DataTable().destroy();
                //getCurStructureByCur();

                // We will display the result using alert
                //alert(response);

                // Reset form
                //resetForm(form);

                // Close modal
                //$('#addCurStruc').modal().hide();
                //$(".modal-backdrop").remove();
                //$('#addCurStruc').modal().toggle();
                //$(".modal-backdrop").remove();

                if (response == "Insert Success!!") $('#modalSuccess').modal().toggle();
                else alert(response);

            },

        });
    }

    (() => {
        'use strict'

        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        const forms = document.querySelectorAll('.needs-validation')

        // Loop over them and prevent submission
        Array.from(forms).forEach(form => {
            form.addEventListener('submit', event => {
                if (!form.checkValidity()) {
                    event.preventDefault()
                    event.stopPropagation()
                }

                form.classList.add('was-validated')
            }, false)
        })
    })()
</script>