<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Register - Ghana Anaesthesiologists Society</title>
    <link href="<?= $baseUrl ?>/vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
    <link href="<?= $baseUrl ?>/css/sb-admin-2.min.css" rel="stylesheet">
    <link href="<?= $baseUrl ?>/css/glass.css" rel="stylesheet">
</head>
<body class="auth-wrapper">
    <div class="auth-card auth-card-wide">
        <div class="auth-logo">
            <?php if ($companyLogo): ?>
                <img src="<?= $baseUrl . '/' . ltrim($companyLogo, '/') ?>" alt="<?= htmlspecialchars($companyName) ?>" style="max-height: 80px; margin-bottom: 0.5rem;">
            <?php else: ?>
                <i class="fas fa-stethoscope"></i>
            <?php endif; ?>
            <h2><?= htmlspecialchars($companyName) ?></h2>
            <p>Membership Registration Form</p>
        </div>

        <?php if (isset($_SESSION['success'])): ?>
            <div class="alert alert-success glass-alert"><?= $_SESSION['success']; unset($_SESSION['success']); ?></div>
        <?php endif; ?>
        <?php if (isset($_SESSION['error'])): ?>
            <div class="alert alert-danger glass-alert"><?= $_SESSION['error']; unset($_SESSION['error']); ?></div>
        <?php endif; ?>

        <form method="POST" action="<?= $baseUrl ?>/register">
            <div class="form-section">
                <h5><i class="fas fa-user mr-2"></i>1. Personal Information</h5>
                <div class="row">
                    <div class="col-md-4 form-group">
                        <label style="color: rgba(255,255,255,0.7);">First Name *</label>
                        <input type="text" name="first_name" class="form-control glass-input" placeholder="First name" required>
                    </div>
                    <div class="col-md-4 form-group">
                        <label style="color: rgba(255,255,255,0.7);">Other Names</label>
                        <input type="text" name="other_names" class="form-control glass-input" placeholder="Other names">
                    </div>
                    <div class="col-md-4 form-group">
                        <label style="color: rgba(255,255,255,0.7);">Last Name *</label>
                        <input type="text" name="last_name" class="form-control glass-input" placeholder="Last name" required>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 form-group">
                        <label style="color: rgba(255,255,255,0.7);">Gender *</label>
                        <select name="gender" class="form-control glass-input">
                            <option value="">Select Gender</option>
                            <option value="male">Male</option>
                            <option value="female">Female</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    <div class="col-md-6 form-group">
                        <label style="color: rgba(255,255,255,0.7);">Nationality *</label>
                        <input type="text" name="nationality" class="form-control glass-input" placeholder="Ghanaian">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 form-group">
                        <label style="color: rgba(255,255,255,0.7);">Professional PIN</label>
                        <input type="text" name="professional_pin" class="form-control glass-input" placeholder="Professional identification number">
                    </div>
                    <div class="col-md-6 form-group">
                        <label style="color: rgba(255,255,255,0.7);">Medical/Dental Council Registration Number</label>
                        <input type="text" name="medical_council_number" class="form-control glass-input" placeholder="Registration number">
                    </div>
                </div>
            </div>

            <div class="form-section">
                <h5><i class="fas fa-address-book mr-2"></i>2. Contact Information</h5>
                <div class="row">
                    <div class="col-md-6 form-group">
                        <label style="color: rgba(255,255,255,0.7);">Postal Address</label>
                        <textarea name="postal_address" class="form-control glass-input" rows="2" placeholder="P.O. Box ..."></textarea>
                    </div>
                    <div class="col-md-6 form-group">
                        <label style="color: rgba(255,255,255,0.7);">Residential Address</label>
                        <textarea name="residential_address" class="form-control glass-input" rows="2" placeholder="Street, City"></textarea>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 form-group">
                        <label style="color: rgba(255,255,255,0.7);">Mobile Phone *</label>
                        <input type="tel" name="mobile_phone" class="form-control glass-input" placeholder="+233 XX XXX XXXX">
                    </div>
                    <div class="col-md-4 form-group">
                        <label style="color: rgba(255,255,255,0.7);">Alternative Phone</label>
                        <input type="tel" name="alternative_phone" class="form-control glass-input" placeholder="+233 XX XXX XXXX">
                    </div>
                    <div class="col-md-4 form-group">
                        <label style="color: rgba(255,255,255,0.7);">Email Address *</label>
                        <input type="email" name="email" class="form-control glass-input" placeholder="your@email.com" required>
                    </div>
                </div>
            </div>

            <div class="form-section">
                <h5><i class="fas fa-briefcase mr-2"></i>3. Professional Information</h5>
                <div class="row">
                    <div class="col-md-6 form-group">
                        <label style="color: rgba(255,255,255,0.7);">Institution/Hospital *</label>
                        <input type="text" name="institution_hospital" class="form-control glass-input" placeholder="Where do you practice?">
                    </div>
                    <div class="col-md-3 form-group">
                        <label style="color: rgba(255,255,255,0.7);">City/Town</label>
                        <input type="text" name="city_town" class="form-control glass-input" placeholder="City">
                    </div>
                    <div class="col-md-3 form-group">
                        <label style="color: rgba(255,255,255,0.7);">Country</label>
                        <input type="text" name="country" class="form-control glass-input" placeholder="Ghana">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 form-group">
                        <label style="color: rgba(255,255,255,0.7);">Years in Anaesthesia Practice</label>
                        <input type="number" name="years_practice" class="form-control glass-input" placeholder="Number of years">
                    </div>
                    <div class="col-md-6 form-group">
                        <label style="color: rgba(255,255,255,0.7);">Highest Qualification *</label>
                        <input type="text" name="highest_qualification" class="form-control glass-input" placeholder="e.g. FWACS, MD, PhD">
                    </div>
                </div>
            </div>

            <div class="form-section">
                <h5><i class="fas fa-tag mr-2"></i>4. Membership Category</h5>
                <div class="form-group">
                    <select name="membership_category" class="form-control glass-input">
                        <option value="">Select Membership Category</option>
                        <option value="Student Member">Student Member</option>
                        <option value="Resident/Trainee Member">Resident/Trainee Member</option>
                        <option value="Associate Member">Associate Member</option>
                        <option value="Member">Member</option>
                        <option value="Fellow">Fellow</option>
                        <option value="Honorary Member">Honorary Member</option>
                    </select>
                </div>
            </div>

            <div class="form-section">
                <h5><i class="fas fa-history mr-2"></i>5. Previous Society Membership</h5>
                <div class="form-group">
                    <label style="color: rgba(255,255,255,0.7);">Have you previously been a member of the Society?</label>
                    <div class="d-flex mt-2">
                        <div class="custom-control custom-radio mr-4">
                            <input type="radio" class="custom-control-input" id="prev_member_yes" name="previous_member" value="1">
                            <label class="custom-control-label" for="prev_member_yes" style="color: rgba(255,255,255,0.7);">Yes</label>
                        </div>
                        <div class="custom-control custom-radio">
                            <input type="radio" class="custom-control-input" id="prev_member_no" name="previous_member" value="0" checked>
                            <label class="custom-control-label" for="prev_member_no" style="color: rgba(255,255,255,0.7);">No</label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-section">
                <h5><i class="fas fa-lock mr-2"></i>6. Account Information</h5>
                <div class="row">
                    <div class="col-md-6 form-group position-relative">
                        <label style="color: rgba(255,255,255,0.7);">Password * (min. 8 characters)</label>
                        <input type="password" name="password" id="regPassword" class="form-control glass-input" placeholder="Create password" required minlength="8">
                        <span class="show-password-toggle" onclick="toggleRegPassword('regPassword')" style="position:absolute; right:12px; top:38px; cursor:pointer; color:rgba(255,255,255,0.5);" title="Show/Hide password"><i class="fas fa-eye"></i></span>
                    </div>
                    <div class="col-md-6 form-group position-relative">
                        <label style="color: rgba(255,255,255,0.7);">Confirm Password *</label>
                        <input type="password" name="password_confirm" id="regPasswordConfirm" class="form-control glass-input" placeholder="Confirm password" required minlength="8">
                        <span class="show-password-toggle" onclick="toggleRegPassword('regPasswordConfirm')" style="position:absolute; right:12px; top:38px; cursor:pointer; color:rgba(255,255,255,0.5);" title="Show/Hide password"><i class="fas fa-eye"></i></span>
                    </div>
                </div>
            </div>

            <div class="form-section">
                <h5><i class="fas fa-bell mr-2"></i>7. Notification Preferences</h5>
                <div class="row">
                    <div class="col-md-4">
                        <div class="custom-control custom-checkbox mb-2">
                            <input type="checkbox" class="custom-control-input" id="notify_conferences" name="notify_conferences" value="1" checked>
                            <label class="custom-control-label" for="notify_conferences" style="color: rgba(255,255,255,0.7);">Conferences</label>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="custom-control custom-checkbox mb-2">
                            <input type="checkbox" class="custom-control-input" id="notify_workshops" name="notify_workshops" value="1" checked>
                            <label class="custom-control-label" for="notify_workshops" style="color: rgba(255,255,255,0.7);">Workshops</label>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="custom-control custom-checkbox mb-2">
                            <input type="checkbox" class="custom-control-input" id="notify_webinars" name="notify_webinars" value="1" checked>
                            <label class="custom-control-label" for="notify_webinars" style="color: rgba(255,255,255,0.7);">Webinars</label>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="custom-control custom-checkbox mb-2">
                            <input type="checkbox" class="custom-control-input" id="notify_research" name="notify_research" value="1">
                            <label class="custom-control-label" for="notify_research" style="color: rgba(255,255,255,0.7);">Research Opportunities</label>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="custom-control custom-checkbox mb-2">
                            <input type="checkbox" class="custom-control-input" id="notify_scholarships" name="notify_scholarships" value="1">
                            <label class="custom-control-label" for="notify_scholarships" style="color: rgba(255,255,255,0.7);">Scholarships</label>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="custom-control custom-checkbox mb-2">
                            <input type="checkbox" class="custom-control-input" id="notify_news" name="notify_news" value="1" checked>
                            <label class="custom-control-label" for="notify_news" style="color: rgba(255,255,255,0.7);">Society News</label>
                        </div>
                    </div>
                </div>
            </div>

            <?php if (!empty($profileFields)): ?>
            <div class="form-section">
                <h5><i class="fas fa-plus-circle mr-2"></i>8. Additional Information</h5>
                <div class="row">
                    <?php foreach ($profileFields as $pf): ?>
                    <div class="col-md-<?= $pf->field_type === 'textarea' ? '12' : '6' ?> form-group">
                        <label style="color: rgba(255,255,255,0.7);">
                            <?= htmlspecialchars($pf->label) ?>
                            <?= $pf->is_required ? '<span class="text-danger">*</span>' : '' ?>
                        </label>
                        <?php if ($pf->field_type === 'textarea'): ?>
                        <textarea name="pf_<?= htmlspecialchars($pf->field_name) ?>" class="form-control glass-input" rows="3" <?= $pf->is_required ? 'required' : '' ?> placeholder="<?= htmlspecialchars($pf->placeholder ?? '') ?>"></textarea>
                        <?php elseif ($pf->field_type === 'select'): ?>
                        <select name="pf_<?= htmlspecialchars($pf->field_name) ?>" class="form-control glass-input" <?= $pf->is_required ? 'required' : '' ?>>
                            <option value=""><?= htmlspecialchars($pf->placeholder ?: 'Select...') ?></option>
                            <?php foreach (explode("\n", $pf->options ?? '') as $opt): $opt = trim($opt); if (empty($opt)) continue; ?>
                            <option value="<?= htmlspecialchars($opt) ?>"><?= htmlspecialchars($opt) ?></option>
                            <?php endforeach; ?>
                        </select>
                        <?php elseif ($pf->field_type === 'radio'): ?>
                        <div class="mt-2">
                            <?php foreach (explode("\n", $pf->options ?? '') as $opt): $opt = trim($opt); if (empty($opt)) continue; ?>
                            <div class="custom-control custom-radio custom-control-inline mb-2">
                                <input type="radio" class="custom-control-input" name="pf_<?= htmlspecialchars($pf->field_name) ?>" id="pf_reg_<?= htmlspecialchars($pf->field_name) . '_' . preg_replace('/[^a-z0-9]/i', '', $opt) ?>" value="<?= htmlspecialchars($opt) ?>" <?= $pf->is_required ? 'required' : '' ?>>
                                <label class="custom-control-label" for="pf_reg_<?= htmlspecialchars($pf->field_name) . '_' . preg_replace('/[^a-z0-9]/i', '', $opt) ?>" style="color: rgba(255,255,255,0.7);"><?= htmlspecialchars($opt) ?></label>
                            </div>
                            <?php endforeach; ?>
                        </div>
                        <?php elseif ($pf->field_type === 'checkbox'): ?>
                        <div class="custom-control custom-checkbox mt-2">
                            <input type="checkbox" class="custom-control-input" name="pf_<?= htmlspecialchars($pf->field_name) ?>" id="pf_reg_<?= htmlspecialchars($pf->field_name) ?>" value="1">
                            <label class="custom-control-label" for="pf_reg_<?= htmlspecialchars($pf->field_name) ?>" style="color: rgba(255,255,255,0.7);"><?= htmlspecialchars($pf->label) ?></label>
                        </div>
                        <?php else: ?>
                        <input type="<?= htmlspecialchars($pf->field_type) ?>" name="pf_<?= htmlspecialchars($pf->field_name) ?>" class="form-control glass-input" <?= $pf->is_required ? 'required' : '' ?> placeholder="<?= htmlspecialchars($pf->placeholder ?? '') ?>">
                        <?php endif; ?>
                        <?php if ($pf->help_text): ?>
                        <small style="color: rgba(255,255,255,0.4);"><?= htmlspecialchars($pf->help_text) ?></small>
                        <?php endif; ?>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
            <?php endif; ?>

            <div class="form-section">
                <h5><i class="fas fa-check-circle mr-2"></i>9. Declaration</h5>
                <div class="row">
                    <div class="col-md-6 form-group">
                        <label style="color: rgba(255,255,255,0.7);">Applicant Initials *</label>
                        <input type="text" name="declaration_initials" class="form-control glass-input" placeholder="Your initials" required>
                    </div>
                    <div class="col-md-6 form-group">
                        <label style="color: rgba(255,255,255,0.7);">Date *</label>
                        <input type="date" name="declaration_date" class="form-control glass-input" value="<?= date('Y-m-d') ?>" required>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="agreeTerms" name="agree_terms" required>
                    <label class="custom-control-label" for="agreeTerms" style="color: rgba(255,255,255,0.8);">
                        I certify that the information provided is true and complete. I agree to abide by the Constitution, By-laws, and Code of Ethics of the Ghana Anaesthesiologists Society and consent to the Society maintaining my information for membership administration and official communications. *
                    </label>
                </div>
            </div>

            <p style="color: rgba(255,255,255,0.5); font-size: 0.85rem;">* Required fields. Fields marked with an asterisk are required for membership.</p>

            <div class="d-flex justify-content-between">
                <a href="<?= $baseUrl ?>/login" class="glass-btn"><i class="fas fa-arrow-left mr-1"></i>Back to Login</a>
                <button type="submit" class="glass-btn glass-btn-primary btn-lg px-5">Submit Registration</button>
            </div>
        </form>
    </div>
    <script src="<?= $baseUrl ?>/vendor/jquery/jquery.min.js"></script>
    <script src="<?= $baseUrl ?>/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script>
    function toggleRegPassword(inputId) {
        const input = document.getElementById(inputId);
        const icon = input.nextElementSibling.querySelector('i');
        if (input.type === 'password') {
            input.type = 'text';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        } else {
            input.type = 'password';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        }
    }
    </script>
</body>
</html>