apply.php

<?php
# Connect to the database #
require_once("db_setup.php");

# Get the available jobs for the dropdown #
$job_query = "SELECT job_reference_number, title FROM jobs";
$job_result = mysqli_query($dbconn, $job_query);
?>

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Xander Rode-Bramanis">
    <meta name="keywords" content="job application, employment, careers, volunteering">
    <meta name="description" content="a job application page for a not-for-profit organisation">
    <title>Job Application Page</title>
    <link rel="stylesheet" href="styles/styles.css">
    <style>
        .applyh1 {
        letter-spacing: 0.03em;
    }
    </style>
</head>

<body class="apply-page">
<!-- header -->
<?php include ("header.inc"); ?>
<!-- navigation bar -->
<nav>
    <?php include ("nav.inc"); ?>

</nav>

<main id="main-content" class="apply-main" tabindex="-1">

    <div class="apply_intro_box">

        <h1 class="applyh1">Job Application</h1>

        <p>Complete the form below to apply for one of our available positions.
        Please ensure all required information is entered correctly before submitting your application.</p> 
</div>


<!-- This is the form for the job application page. -->
<form action="process_eoi.php" method="post">

<!-- Job Reference Number fieldset. -->
<fieldset>
    <legend>Job Reference Number</legend>

    <div id="reference_number_form">
        <label for="job_reference_number">Job Reference Number: <span class="required">*</span></label>
        <select id="job_reference_number" name="job_reference_number" required>
        <option value="">Select a job</option>

        <?php
            while ($job = mysqli_fetch_assoc($job_result)) {

            echo '<option value="'
            . htmlspecialchars($job["job_reference_number"])
            . '">'
            . htmlspecialchars($job["job_reference_number"])
            . ' - '
            . htmlspecialchars($job["title"])
            . '</option>';
            }
        ?>

        </select>
    </div>
</fieldset>

<!-- Personal Details Fieldset-->

<!-- First Name. -->
<fieldset>
    <legend>Personal Details</legend>

    <div id="personal_details_form"> 
        
        <div class="details">
            <label for="first_name">First Name: <span class="required">*</span></label>
            <input type="text" id="first_name" name="first_name" autocomplete="given-name" placeholder="John" 
            pattern="[A-Za-z]{1,20}" maxlength="20" required>
        </div>

<!-- Last Name. -->
        <div class="details">
            <label for="last_name">Last Name: <span class="required">*</span></label>
            <input type="text" id="last_name" name="last_name" autocomplete="family-name" placeholder="Doe" 
            pattern="[A-Za-z]{1,20}" maxlength="20" required>
        </div>

<!-- Date of Birth. -->
        <div class="details">
            <label for="date_of_birth">Date of Birth:&nbsp;<span class="required">*</span></label>
            <input type="text" id="date_of_birth" name="date_of_birth" placeholder="dd/mm/yyyy" 
            pattern="(0[1-9]|[12][0-9]|3[01])/(0[1-9]|1[0-2])/[0-9]{4}" required>
        </div>
    </div>
</fieldset>

<!-- Gender fieldset. -->
<fieldset>
    <legend>Gender <span class="required">*</span></legend>

    <div id="gender_form">

        <div class="gender">
            <input type="radio" id="male" name="gender" value="male" required>
            <label for="male">Male</label>
        </div>

        <div class="gender">
            <input type="radio" id="female" name="gender" value="female">
            <label for="female">Female</label>
        </div>

        <div class="gender">
            <input type="radio" id="other" name="gender" value="other">
            <label for="other">Other</label>
        </div>

        <div class="gender">
            <input type="radio" id="prefer_not_to_say" name="gender" value="prefer_not_to_say">
            <label for="prefer_not_to_say">Prefer not to say</label>
        </div>
    </div>
</fieldset>

<!-- Address fieldset. -->
<fieldset>
    <legend>Address</legend>

    <div id="address_form">

    <div class="address">
        <label for="street_address">Street Address:&nbsp;<span class="required">*</span></label>
        <input type="text" id="street_address" name="street_address" autocomplete="address-line1" 
        placeholder="123 Main St" pattern=".{1,40}" maxlength="40" required>
    </div>
  
    <div class="address">
        <label for="suburb">Suburb/Town: <span class="required">*</span></label>
        <input type="text" id="suburb" name="suburb" autocomplete="address-level2" placeholder="Anytown"
        pattern=".{1,40}" maxlength="40" required>
    </div>

    <div class="address">
        <label for="state">State: <span class="required">*</span></label>
            <select id="state" name="state" autocomplete="address-level1" required>
                <option value="">Select a state</option>
                <option value="victoria">VIC</option>
                <option value="new_south_wales">NSW</option>            
                <option value="queensland">QLD</option>
                <option value="northern_territory">NT</option>
                <option value="western_australia">WA</option>
                <option value="south_australia">SA</option>
                <option value="tasmania">TAS</option>
                <option value="australian_capital_territory">ACT</option>
            </select>
    </div>
  
    <div class="address">
        <label for="postcode">Postcode: <span class="required">*</span></label>
        <input type="text" id="postcode" name="postcode" autocomplete="postal-code" placeholder="3034" 
        pattern="[0-9]{4}" required>
    </div>
</div>
</fieldset>

<!-- Contact Details fieldset. -->
<fieldset>
    <legend>Contact Details</legend>

    <div id="contact_form">

        <div class="contact">
            <label for="email">Email: <span class="required">*</span></label>
            <input type="email" id="email" name="email" autocomplete="email" placeholder="your.email@example.com"
            required>
        </div>

        <div class="contact">
            <label for="phone">Phone Number: <span class="required">*</span></label>
            <input type="tel" id="phone" name="phone" autocomplete="tel" placeholder="0412345678"
            pattern="[0-9]{8,12}" required>
        </div>
    </div>
</fieldset>

<!-- Skills fieldset. -->
<fieldset>
    <legend>Skills <span class="required">*</span></legend>

<div id="skills_form">

    <div class="skills">
        <input type="checkbox" id="communication" name="skills[]" value="communication">
        <label for="communication">Communication</label>
    </div>

    <div class="skills">
        <input type="checkbox" id="teamwork" name="skills[]" value="teamwork">
        <label for="teamwork">Teamwork</label>
    </div>

    <div class="skills">
        <input type="checkbox" id="leadership" name="skills[]" value="leadership">
        <label for="leadership">Leadership</label>
    </div>

    <div class="skills">
        <input type="checkbox" id="technical" name="skills[]" value="technical">
        <label for="technical">Technical</label>
    </div>

    <div class="skills">
        <input type="checkbox" id="problem-solving" name="skills[]" value="problem-solving">
        <label for="problem-solving">Problem Solving</label>
    </div>

    <div class="skills">
        <input type="checkbox" id="time-management" name="skills[]" value="time-management">
        <label for="time-management">Time Management</label>
    </div>

    <div class="other_skills">
        <label for="other_skills">Other Skills:</label>
	    <textarea id="other_skills" name="other_skills" rows="5" cols="40" 
        placeholder="Write other skills here..."></textarea>
    </div>
</div>
</fieldset>

<!-- Submit and Reset buttons. -->

<div class="form_buttons">
    <input type="submit" value="Apply" style="font-size: 20px;">
    <input type="reset" value="Reset Form" style="font-size: 20px;">
</div>

</form>

</main>

<!-- Footer with links to Jira project, GitHub repository, and email contact. -->
<footer>
    <?php include ("footer.inc"); ?>
</footer>

</body>

</html>