<?php

include $_SERVER['DOCUMENT_ROOT'] . "/WebBuilder/WebApp.class.php";
$db = new DBMain();

$person_list = "<datalist id='person_list'>";
$res = $db->exec_query("client_employees", ['*'], '', '', '', '', "1");
while ($data = $res->fetch_assoc()) {
    $person_list .= "<option value='" . $data['client_employees_name'] . ' ~ ' . $data['surname'] . ' ~ ' . $data['i_doc_passport'] . ' ~ ' . $data['cell'] . ' ~ ' . $data['record_id'] . "'>" . $data['client_employees_name'] . ' ' . $data['surname'] . "</option>";
}
echo $person_list .= "</datalist>";


$person_list = "<datalist id='courses'>";
$res = $db->exec_query("courses", ['*'], '', '', '', '', "1");
while ($data = $res->fetch_assoc()) {
    $person_list .= "<option value='" . $data['record_id'] . ' ~ ' . $data['courses_name'] . ' ~ ' . $data['unit_standard_number'] . "'>" . $data['course_title'] . "</option>";
}
echo $person_list .= "</datalist>";

?>

<div class="header">

    <h1>Create Certificate</h1>

</div>
<div class="" style="display: flex
;
    flex-direction: column;
    flex-wrap: wrap;">


</div>
<form action="save_certificate.php" method="POST">
    <div class="" style="display: flex;
    flex-direction: column;
    flex-wrap: wrap;">

        <h2>PERSON DETAILS</h2>
        <br>
        <h2>SEARCH EMPLOYEE</h2>
        <input type="text" class='input' onchange="check_select(this)" name="person" list="person_list">
        <input type="number" class='input' name="ID" placeholder="ID" required>
        <input type="text" class='input' name="name" placeholder="Name" required>
        <input type="text" class='input' name="surname" placeholder="Surname" required>
        <input type="text" class='input' name="cell" placeholder="Cell No">
        <input type="text" class='input' name="email" placeholder="Email">
    </div>

    <div class="" style="display: flex;
    flex-direction: column;
    flex-wrap: wrap;">
        <h2>CERTIFICATE DETAILS</h2>
        <input type="text" class='input' onchange="check_course(this)" name="certificate" list="courses">
        <input type="number" class='input' name="cert_number"
            placeholder="Certificate Number (leave blank if auto generated)">
        <input type="text" class='input' name="restricted_to" placeholder="Restricted to" required>
        <label>DATE OF CERTIFICATION</label>
        <input type="date" class='input' name="date_of_cert" required>
        <label>EXPIRY DATE OF CERTIFICATION</label>
        <input type="date" class='input' name="expiry_date" required>
        <input type="text" class='input' name="mine_sector" placeholder="Mine Sector" required>
        <input type="text" class='input' name="nql_level" placeholder="NQF Level">
        <input type="text" class='input' name="credits" placeholder="Credits">
        <input type="text" class='input' name="dol_ci_no" placeholder="DOL CI NO" value="04-MQA/SDP260322-5038">
        <input type="text" class='input' name="unit_std_no" placeholder="Unit Std No">
        <input type="text" class='input' name="iso_no" placeholder="ISO No" value="0016 K2011/10153/07">
    </div>
    <div class="" style="display: flex;
    flex-direction: column;
    flex-wrap: wrap;">
        <input type="submit" class='input' style='background: green;
    border-radius: 1vw;
    margin: 1vw;' value="Save">
    </div>
</form>

<script>
    function check_select(input) {
        var list = document.getElementById("person_list");
        var input_value = input.value;
        var match = false;
        for (var i = 0; i < list.options.length; i++) {
            if (list.options[i].value == input_value) {
                match = true;
                break;
            }
        }
        if (match) {
            var split = input_value.split(' ~ ');
            document.querySelector('input[name="ID"]').value = split[2];
            document.querySelector('input[name="name"]').value = split[0];
            document.querySelector('input[name="surname"]').value = split[1];
            document.querySelector('input[name="cell"]').value = split[3];
            document.querySelector('input[name="email"]').value = "";
        } else {
            alert("Please select a person from the list");
            input.value = "";
        }
    }

    function check_course(input) {
        var list = document.getElementById("courses");
        var input_value = input.value;
        var match = false;
        for (var i = 0; i < list.options.length; i++) {
            if (list.options[i].value == input_value) {
                match = true;
                break;
            }
        }
        if (match) {
            var split = input_value.split(' ~ ');
            document.querySelector('input[name="unit_std_no"]').value = split[2];

        } else {
            alert("Please select a course from the list");
            input.value = "";
        }
    }
</script>