<?php

declare(strict_types=1);

ob_start();

$old = $old ?? [];

?>

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2 class="mb-1">Create Employee</h2>
        <p class="text-muted mb-0">
            Register a new personnel record.
        </p>
    </div>

    <a
        href="/public/employees"
        class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i>
        Back
    </a>
</div>

<?php if (!empty($error)): ?>

    <div class="alert alert-danger">
        <?= htmlspecialchars(
            (string) $error,
            ENT_QUOTES,
            'UTF-8'
        ) ?>
    </div>

<?php endif; ?>

<form
    method="POST"
    action="/public/employees/create"
    enctype="multipart/form-data">

    <div class="card shadow-sm border-0 mb-4">

        <div class="card-header bg-white py-3">
            <h5 class="mb-0">
                <i class="bi bi-person me-2"></i>
                Personal Information
            </h5>
        </div>

        <div class="card-body">

            <div class="row g-3">

                <div class="col-md-4">
                    <label class="form-label">
                        First Name
                    </label>

                    <input
                        type="text"
                        name="first_name"
                        class="form-control"
                        value="<?= htmlspecialchars(
                            (string) (
                                $old['first_name'] ?? ''
                            ),
                            ENT_QUOTES,
                            'UTF-8'
                        ) ?>"
                        required>
                </div>

                <div class="col-md-4">
                    <label class="form-label">
                        Middle Name
                    </label>

                    <input
                        type="text"
                        name="middle_name"
                        class="form-control"
                        value="<?= htmlspecialchars(
                            (string) (
                                $old['middle_name'] ?? ''
                            ),
                            ENT_QUOTES,
                            'UTF-8'
                        ) ?>">
                </div>

                <div class="col-md-4">
                    <label class="form-label">
                        Last Name
                    </label>

                    <input
                        type="text"
                        name="last_name"
                        class="form-control"
                        value="<?= htmlspecialchars(
                            (string) (
                                $old['last_name'] ?? ''
                            ),
                            ENT_QUOTES,
                            'UTF-8'
                        ) ?>"
                        required>
                </div>

                <div class="col-md-4">
                    <label class="form-label">
                        Gender
                    </label>

                    <select
                        name="gender"
                        class="form-select"
                        required>

                        <option value="">
                            Select Gender
                        </option>

                        <?php foreach (
                            ['MALE', 'FEMALE', 'OTHER']
                            as $gender
                        ): ?>

                            <option
                                value="<?= $gender ?>"
                                <?= (
                                    $old['gender'] ?? ''
                                ) === $gender
                                    ? 'selected'
                                    : '' ?>>

                                <?= ucfirst(
                                    strtolower($gender)
                                ) ?>

                            </option>

                        <?php endforeach; ?>

                    </select>
                </div>

                <div class="col-md-4">
                    <label class="form-label">
                        Date of Birth
                    </label>

                    <input
                        type="date"
                        name="date_of_birth"
                        class="form-control"
                        value="<?= htmlspecialchars(
                            (string) (
                                $old['date_of_birth'] ?? ''
                            ),
                            ENT_QUOTES,
                            'UTF-8'
                        ) ?>">
                </div>

                <div class="col-md-4">
                    <label class="form-label">
                        Nationality Number
                    </label>

                    <input
                        type="text"
                        name="nationality_number"
                        class="form-control"
                        value="<?= htmlspecialchars(
                            (string) (
                                $old[
                                    'nationality_number'
                                ] ?? ''
                            ),
                            ENT_QUOTES,
                            'UTF-8'
                        ) ?>">
                </div>
<div class="col-md-4">
    <label class="form-label">
        Police ID Number
    </label>

    <input
        type="text"
        name="police_id_number"
        class="form-control"
        value="<?= htmlspecialchars(
            (string) (
                $old[
                    'police_id_number'
                ] ?? ''
            ),
            ENT_QUOTES,
            'UTF-8'
        ) ?>"
        placeholder="Enter Police ID Number">
</div>
            </div>

        </div>

    </div>

    <div class="card shadow-sm border-0 mb-4">

        <div class="card-header bg-white py-3">
            <h5 class="mb-0">
                <i class="bi bi-building me-2"></i>
                Employment Information
            </h5>
        </div>

        <div class="card-body">

            <div class="row g-3">

                <div class="col-md-4">
                    <label class="form-label">
                        Rank
                    </label>

                    <select
                        name="rank_id"
                        class="form-select">

                        <option value="">
                            Select Rank
                        </option>

                        <?php foreach ($ranks as $rank): ?>

                            <option
                                value="<?= (int) $rank['id'] ?>"
                                <?= (int) (
                                    $old['rank_id'] ?? 0
                                ) === (int) $rank['id']
                                    ? 'selected'
                                    : '' ?>>

                                <?= htmlspecialchars(
                                    (string) $rank['rank_name'],
                                    ENT_QUOTES,
                                    'UTF-8'
                                ) ?>

                            </option>

                        <?php endforeach; ?>

                    </select>
                </div>

                <div class="col-md-4">
                    <label class="form-label">
                        Department
                    </label>

                    <select
                        name="department_id"
                        id="department_id"
                        class="form-select">

                        <option value="">
                            Select Department
                        </option>

                        <?php foreach (
                            $departments as $department
                        ): ?>

                            <option
                                value="<?= (int) $department['id'] ?>"
                                <?= (int) (
                                    $old['department_id'] ?? 0
                                ) === (int) $department['id']
                                    ? 'selected'
                                    : '' ?>>

                                <?= htmlspecialchars(
                                    (string) $department[
                                        'department_name'
                                    ],
                                    ENT_QUOTES,
                                    'UTF-8'
                                ) ?>

                            </option>

                        <?php endforeach; ?>

                    </select>
                </div>

                <div class="col-md-4">
                    <label class="form-label">
                        Position
                    </label>

                    <select
                        name="position_id"
                        id="position_id"
                        class="form-select">

                        <option value="">
                            Select Position
                        </option>

                        <?php foreach (
                            $positions as $position
                        ): ?>

                            <option
                                value="<?= (int) $position['id'] ?>"
                                data-department-id="<?= (int) $position['department_id'] ?>"
                                <?= (int) (
                                    $old['position_id'] ?? 0
                                ) === (int) $position['id']
                                    ? 'selected'
                                    : '' ?>>

                                <?= htmlspecialchars(
                                    (string) $position[
                                        'position_name'
                                    ],
                                    ENT_QUOTES,
                                    'UTF-8'
                                ) ?>

                            </option>

                        <?php endforeach; ?>

                    </select>
                </div>

                <div class="col-md-4">
                    <label class="form-label">
                        Hire Date
                    </label>

                    <input
                        type="date"
                        name="hire_date"
                        class="form-control"
                        value="<?= htmlspecialchars(
                            (string) (
                                $old['hire_date'] ?? ''
                            ),
                            ENT_QUOTES,
                            'UTF-8'
                        ) ?>">
                </div>

            </div>

        </div>

    </div>

    <div class="card shadow-sm border-0 mb-4">

        <div class="card-header bg-white py-3">
            <h5 class="mb-0">
                <i class="bi bi-geo-alt me-2"></i>
                Location Information
            </h5>
        </div>

        <div class="card-body">

            <div class="row g-3">

                <div class="col-md-4">
                    <label class="form-label">
                        State / Administrative Area
                    </label>

                    <select
                        name="state_id"
                        id="state_id"
                        class="form-select">

                        <option value="">
                            Select State / Area
                        </option>

                        <?php foreach ($states as $state): ?>

                            <option
                                value="<?= (int) $state['id'] ?>"
                                <?= (int) (
                                    $old['state_id'] ?? 0
                                ) === (int) $state['id']
                                    ? 'selected'
                                    : '' ?>>

                                <?= htmlspecialchars(
                                    (string) $state['state_name'],
                                    ENT_QUOTES,
                                    'UTF-8'
                                ) ?>

                            </option>

                        <?php endforeach; ?>

                    </select>
                </div>

                <div class="col-md-4">
                    <label class="form-label">
                        County
                    </label>

                    <select
                        name="county_id"
                        id="county_id"
                        class="form-select">

                        <option value="">
                            Select County
                        </option>

                        <?php foreach (
                            $counties as $county
                        ): ?>

                            <option
                                value="<?= (int) $county['id'] ?>"
                                data-state-id="<?= (int) $county['state_id'] ?>"
                                <?= (int) (
                                    $old['county_id'] ?? 0
                                ) === (int) $county['id']
                                    ? 'selected'
                                    : '' ?>>

                                <?= htmlspecialchars(
                                    (string) $county['county_name'],
                                    ENT_QUOTES,
                                    'UTF-8'
                                ) ?>

                            </option>

                        <?php endforeach; ?>

                    </select>
                </div>

                <div class="col-md-4">
                    <label class="form-label">
                        Payam
                    </label>

                    <select
                        name="payam_id"
                        id="payam_id"
                        class="form-select">

                        <option value="">
                            Select Payam
                        </option>

                        <?php foreach ($payams as $payam): ?>

                            <option
                                value="<?= (int) $payam['id'] ?>"
                                data-county-id="<?= (int) $payam['county_id'] ?>"
                                <?= (int) (
                                    $old['payam_id'] ?? 0
                                ) === (int) $payam['id']
                                    ? 'selected'
                                    : '' ?>>

                                <?= htmlspecialchars(
                                    (string) $payam['payam_name'],
                                    ENT_QUOTES,
                                    'UTF-8'
                                ) ?>

                            </option>

                        <?php endforeach; ?>

                    </select>
                </div>

            </div>

        </div>

    </div>

    <div class="card shadow-sm border-0 mb-4">

        <div class="card-header bg-white py-3">
            <h5 class="mb-0">
                <i class="bi bi-camera me-2"></i>
                Employee Photo
            </h5>
        </div>

        <div class="card-body">

            <div class="row">

                <div class="col-md-6">

                    <label class="form-label">
                        Upload Photo
                    </label>

                    <input
                        type="file"
                        name="photo"
                        id="photo"
                        class="form-control"
                        accept=".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp">

                    <div class="form-text">
                        JPG, PNG or WEBP. Maximum 5 MB.
                    </div>

                </div>

                <div class="col-md-3">

                    <img
                        id="photoPreview"
                        alt="Photo Preview"
                        class="img-thumbnail d-none"
                        style="width: 150px; height: 180px; object-fit: cover;">

                </div>

            </div>

        </div>

    </div>

    <div class="d-flex justify-content-between mb-5">

        <a
            href="/public/employees"
            class="btn btn-light">
            Cancel
        </a>

        <button
            type="submit"
            class="btn btn-primary px-4">

            <i class="bi bi-save me-1"></i>
            Create Employee

        </button>

    </div>

</form>

<script>
document.addEventListener('DOMContentLoaded', function () {

    const departmentSelect =
        document.getElementById('department_id');

    const positionSelect =
        document.getElementById('position_id');

    const stateSelect =
        document.getElementById('state_id');

    const countySelect =
        document.getElementById('county_id');

    const payamSelect =
        document.getElementById('payam_id');

    const positionOptions =
        Array.from(positionSelect.options);

    const countyOptions =
        Array.from(countySelect.options);

    const payamOptions =
        Array.from(payamSelect.options);

    function filterPositions(reset) {

        const departmentId =
            departmentSelect.value;

        positionOptions.forEach(function (option) {

            if (option.value === '') {
                option.hidden = false;
                return;
            }

            option.hidden =
                option.dataset.departmentId
                !== departmentId;
        });

        if (reset) {
            positionSelect.value = '';
        }
    }

    function filterCounties(reset) {

        const stateId =
            stateSelect.value;

        countyOptions.forEach(function (option) {

            if (option.value === '') {
                option.hidden = false;
                return;
            }

            option.hidden =
                option.dataset.stateId
                !== stateId;
        });

        if (reset) {
            countySelect.value = '';
            payamSelect.value = '';
        }

        filterPayams(false);
    }

    function filterPayams(reset) {

        const countyId =
            countySelect.value;

        payamOptions.forEach(function (option) {

            if (option.value === '') {
                option.hidden = false;
                return;
            }

            option.hidden =
                option.dataset.countyId
                !== countyId;
        });

        if (reset) {
            payamSelect.value = '';
        }
    }

    filterPositions(false);
    filterCounties(false);
    filterPayams(false);

    departmentSelect.addEventListener(
        'change',
        function () {
            filterPositions(true);
        }
    );

    stateSelect.addEventListener(
        'change',
        function () {
            filterCounties(true);
        }
    );

    countySelect.addEventListener(
        'change',
        function () {
            filterPayams(true);
        }
    );

    const photoInput =
        document.getElementById('photo');

    const photoPreview =
        document.getElementById('photoPreview');

    photoInput.addEventListener(
        'change',
        function () {

            const file =
                this.files[0];

            if (!file) {
                photoPreview.classList.add(
                    'd-none'
                );

                return;
            }

            photoPreview.src =
                URL.createObjectURL(file);

            photoPreview.classList.remove(
                'd-none'
            );
        }
    );

});
</script>

<?php

$content = ob_get_clean();

$title = 'Create Employee';

include APP_PATH
    . '/Modules/Administration/Views/layouts/admin.php';