<?= $this->extend('layout/main') ?>

<?= $this->section('content') ?>

<h2>User Profile</h2>

<?php if (session()->getFlashdata('success')) : ?>
    <div class="alert alert-success">
        <?= session()->getFlashdata('success') ?>
    </div>
<?php endif; ?>

<?php if (isset($validation)) : ?>
    <div class="alert alert-danger">
        <?= $validation->listErrors() ?>
    </div>
<?php endif; ?>

<form action="<?= base_url('/parent/updateProfile/' . $user['id']) ?>" method="post">
    <?= csrf_field() ?>
    <div class="container-fluid">
        <div class="row">
            <main class="col-4 px-md-4">
                <div class="form-group">
                    <label for="firstname">First Name:</label>
                    <input type="text" name="firstname" value="<?= esc($user['firstname']) ?>" class="form-control"
                        required>
                </div>
                <div class="form-group">
                    <label for="lastname">Last Name:</label>
                    <input type="text" name="lastname" value="<?= esc($user['lastname']) ?>" class="form-control"
                        required>
                </div>
                <div class="form-group">
                    <label for="cellphone">Cell Phone:</label>
                    <input type="text" name="cellphone"
                        value="<?= esc(preg_replace('/[()\-\s]/', '', $user['cellphone'])) ?>" class="form-control"
                        required>
                </div>

                <div class="form-group">
                    <label for="address_street">Street Address:</label>
                    <input type="text" name="address_street" value="<?= esc($user['address_street']) ?>"
                        class="form-control" required>
                </div>
                <div class="form-group">
                    <label for="city">City:</label>
                    <input type="text" name="city" value="<?= esc($user['city']) ?>" class="form-control" required>
                </div>
                <div class="form-group">
                    <label for="state">State:</label>
                    <input type="text" name="state" value="<?= esc($user['state']) ?>" class="form-control" required>
                </div>
                <div class="form-group">
                    <label for="zip">Zip Code:</label>
                    <input type="text" name="zip" value="<?= esc($user['zip']) ?>" class="form-control" required>
                </div>
                <button type="submit" class="btn btn-primary" style="margin-bottom: 20px;">Update Profile</button>
            </main>
        </div>
    </div>
</form>

<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
    document.querySelector('input[name="cellphone"]').addEventListener('input', function(e) {
        this.value = this.value.replace(/\D/g, ''); // Remove any non-digit characters
    });
</script>

<?= $this->endSection() ?>