<html>

<head>
    <title>Profile creation</title>
    <link rel="stylesheet" href="graphics.css">
</head>

<body>
    <div class="block_text">
            <h1>Create a profile</h1>
    </div>

    <div class="block_image_text">
               <!--<form action="profile_create_next.php" method="POST" enctype="multipart/form-data" id="theform">-->
                    <p>Picture:</p>
                    <input name="person_picture" type="file">
                    <p>First name:</p>
                    <input name="first_name">
                    <p>Middle name:</p>
                    <input name="middle_name">
                    <p>Last name:</p>
                    <input name="last_name">
                    <p>Date of birth:</p>
                    <input name="date_of_birth" type="date">
                    <p>State of residence:</p>
                    <select name="state_of_residence" form="theform">
                        <?php
                        $state_of_residence = [
                        'ALABAMA', 'ALASKA', 'ARIZONA', 'ARKANSAS', 'CALIFORNIA',
                        'COLORADO', 'CONNECTICUT', 'DELAWARE', 'FLORIDA', 'GEORGIA',
                        'HAWAII', 'IDAHO', 'ILLINOIS', 'INDIANA', 'IOWA',
                        'KANSAS', 'KENTUCKY', 'LOUISIANA', 'MAINE', 'MARYLAND',
                        'MASSACHUSETTS', 'MICHIGAN', 'MINNESOTA', 'MISSISSIPPI', 'MISSOURI',
                        'MONTANA', 'NEBRASKA', 'NEVADA', 'NEW HAMPSHIRE', 'NEW JERSEY',
                        'NEW MEXICO', 'NEW YORK', 'NORTH CAROLINA', 'NORTH DAKOTA', 'OHIO',
                        'OKLAHOMA', 'OREGON', 'PENNSYLVANIA', 'RHODE ISLAND', 'SOUTH CAROLINA',
                        'SOUTH DAKOTA', 'TENNESSEE', 'TEXAS', 'UTAH', 'VERMONT',
                        'VIRGINIA', 'WASHINGTON', 'WEST VIRGINIA', 'WISCONSIN', 'WYOMING'
                        ];
                        foreach ($state_of_residence as $state){
                            ECHO "<option value=\"{$state}\">{$state}</option>\n ";
                        }
                        ?>
                    </select>
                    <br>
                    <!--<input type="hidden" name="form_origin" value="profile_create">-->
                    <button name="button">NEXT</button>
                    <br>
                <!--</form>-->
                    <script>
                    let elementPicture = document.getElementsByName("person_picture")[0].files;
                    let elementFirstName = document.getElementsByName("first_name")[0];
                    let elementMiddleName = document.getElementsByName("middle_name")[0];
                    let elementLastName = document.getElementsByName("last_name")[0];
                    let elementDateOfBirth = document.getElementsByName("date_of_birth")[0];
                    let elementStateOfResidence = document.getElementsByName("state_of_residence")[0];
                    let elementButton = document.getElementsByName("button")[0];

                    elementButton.addEventListener("click", function() {
                        let data = new FormData();
                        data.append("", elementPicture);
                        data.append("", elementFirstName);
                        data.append("", elementMiddleName);
                        data.append("", elementLastName);
                        data.append("", elementDateOfBirth);
                        data.append("", elementStateOfResidence);
                   
                        fetch("profile_management_api.php", {
                            method: "POST",
                            body: data
                        }).then(function(res)) {
                            return res.json()
                        }.then(function(res) {
                            // Logic for one return (for criminal record creation steps)
                            // Logic for changing the criminal record itself???
                        })
                    })
                    </script>
    </div>
</body>

</html>