<div class="container">
    <div class="row">
        <div class="onboarding-container">
            <div class="card">
                <div class="card-header">
                    <img src="<?= $customer->picture_url ?: base_url('assets/images/user-placeholder.png') ?>" alt="<?= $customer->name ?>" class="profile-image">
                    <h2>Selamaat datangg, <?= explode(' ', $customer->name)[0] ?>!!!</h2>
                    <p class="subtitle">Lengkapi profil Kamu untuk melanjutkan, hanya sekitar 10-15 detik aja</p>
                </div>
                <div class="card-body">
                    <?php if (validation_errors()): ?>
                        <div class="alert alert-danger">
                            <?= validation_errors(); ?>
                        </div>
                    <?php endif; ?>

                    <?php if ($this->session->flashdata('error')): ?>
                        <div class="alert alert-danger">
                            <?= $this->session->flashdata('error'); ?>
                        </div>
                    <?php endif; ?>

                    <form method="post" action="<?= base_url('account/onboarding') ?>">
                        <input type="hidden" name="<?= $this->security->get_csrf_token_name() ?>" value="<?= $this->security->get_csrf_hash() ?>" class="csrf_token">

                        <?php if (empty($customer->birthday)): ?>
                            <div class="form-group">
                                <label for="birthday">Tanggal Lahir <span class="required">*</span></label>
                                <input type="date" id="birthday" name="birthday" max="<?= date('Y-m-d', strtotime('-21 years')) ?>" required>
                                <small>Kamu udah 21 tahun keatas kan?</small>
                            </div>
                        <?php endif; ?>

                        <?php if (empty($customer->sex_type)): ?>
                            <div class="form-group">
                                <label>Gender <span class="required">*</span></label>
                                <div class="radio-group">
                                    <div class="radio-item">
                                        <input type="radio" name="sex_type" id="male" value="male" required>
                                        <label for="male">Penis Owner</label>
                                    </div>
                                    <div class="radio-item">
                                        <input type="radio" name="sex_type" id="female" value="female">
                                        <label for="female">Vagina Owner</label>
                                    </div>
                                    <div class="radio-item">
                                        <input type="radio" name="sex_type" id="others" value="others">
                                        <label for="others">Others</label>
                                    </div>
                                </div>
                            </div>

                        <?php endif; ?>

                        <div class="form-group">
                            <div class="info-text">
                                <span class="icon">🔒</span> Informasi Kamu tidak akan dibagikan ke siapapun dan akan disimpan dengan aman, jadi tenang aja ya.
                            </div>
                        </div>

                        <button type="submit" class="btn-primary">Lanjutkan</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    .container {
        width: 100%;
        padding: 20px;
    }

    .row {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .onboarding-container {
        width: 100%;
        max-width: 450px;
        margin: 40px auto;
        animation: fadeIn 0.5s ease;
    }

    .card {
        background-color: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    .card-header {
        padding: 30px 20px;
        text-align: center;
        background-color: #fff;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .profile-image {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 15px;
    }

    .card-header h2 {
        font-size: 22px;
        color: #333;
        margin-bottom: 5px;
    }

    .subtitle {
        color: #777;
        font-size: 14px;
    }

    .card-body {
        padding: 30px;
    }

    .form-group {
        font-size: 14px;
        margin-bottom: 24px;
    }

    label {
        display: block;
        font-weight: 500;
        margin-bottom: 8px;
        color: #333;
    }

    input[type="date"] {
        width: 100%;
        padding: 12px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 16px;
    }

    input[type="date"]:focus {
        outline: none;
        border-color: #4c8bf5;
        box-shadow: 0 0 0 3px rgba(76, 139, 245, 0.15);
    }

    small {
        display: block;
        color: #777;
        font-size: 13px;
        margin-top: 6px;
    }

    .radio-group {
        display: flex;
        gap: 24px;
    }

    .radio-item,
    .checkbox-item {
        display: flex;
        align-items: center;
    }

    input[type="radio"],
    input[type="checkbox"] {
        margin-right: 8px;
        width: 18px;
        height: 18px;
    }

    .required {
        color: #e53935;
    }

    .btn-primary {
        display: block;
        width: 100%;
        padding: 12px;
        color: #7A4397;
        background-color: transparent;
        border: 1px solid #7A4397;
        border-radius: 6px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        margin-top: 20px;
    }

    .btn-primary:hover {
        background-color: #7A4397;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        color: white;
    }

    .btn-outline {
        display: inline-block;
        padding: 12px 30px;
        background-color: transparent;
        color: #777;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 16px;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .btn-outline:hover {
        background-color: #f5f5f5;
    }

    .alert {
        padding: 12px;
        margin-bottom: 20px;
        border-radius: 6px;
    }

    .alert-danger {
        background-color: #ffebee;
        color: #c62828;
        border: 1px solid #ffcdd2;
    }

    .info-text {
        display: flex;
        align-items: center;
        color: #777;
        font-size: 14px;
    }

    .icon {
        margin-right: 8px;
    }

    .age-restriction-container {
        background-color: #fff;
        border-radius: 12px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
        padding: 40px;
        text-align: center;
    }

    .restriction-image {
        max-width: 120px;
        margin-bottom: 20px;
    }

    .age-restriction-container h2 {
        margin-bottom: 12px;
        color: #333;
    }

    .age-restriction-container p {
        font-size: 18px;
        color: #555;
        margin-bottom: 24px;
    }

    @keyframes fadeIn {
        0% {
            opacity: 0;
            transform: translateY(10px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @media (max-width: 768px) {
        .onboarding-container {
            margin: 20px auto;
        }

        .card-body {
            padding: 20px;
        }

        .radio-group {
            flex-direction: column;
            gap: 12px;
        }

        .subtitle {
            font-size: 12px;
        }

        .card-header h2 {
            font-size: 16px;
        }

        .form-group {
            font-size: 12px;
        }

        .form-group small {
            font-size: 10px;
        }

        .radio-item label {
            font-size: 12px;
        }
    }
</style>