{% extends "base.html" %}

{% block title %}Register - National Medlab Cooperative{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-10">
        <div class="card shadow">
            <div class="card-header text-center">
                <h4>Create Your Account</h4>
                <p class="mb-0">Join National Medlab Cooperative Society Ltd.</p>
            </div>
            <div class="card-body">
                <form method="POST" enctype="multipart/form-data" id="registrationForm">
                    <!-- Personal Information -->
                    <h5 class="mb-3">Personal Information</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="full_name" class="form-label">Full Name *</label>
                                <input type="text" class="form-control" id="full_name" name="full_name" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="email" class="form-label">Email Address *</label>
                                <input type="email" class="form-control" id="email" name="email" required>
                                <div class="form-text">You'll receive a verification email after registration.</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="phone" class="form-label">Mobile Phone Number *</label>
                                <input type="tel" class="form-control" id="phone" name="phone" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="gender" class="form-label">Gender *</label>
                                <select class="form-select" id="gender" name="gender" required>
                                    <option value="">Select Gender</option>
                                    <option value="Male">Male</option>
                                    <option value="Female">Female</option>
                                    <option value="Other">Other</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="nin" class="form-label">NIN *</label>
                                <input type="text" class="form-control" id="nin" name="nin" required placeholder="National Identification Number">
                            </div>
                        </div>
                    </div>

                    <!-- Address Information -->
                    <h5 class="mb-3 mt-4">Address Information</h5>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="state_of_residence" class="form-label">State of Residence *</label>
                                <select class="form-select" id="state_of_residence" name="state_of_residence" required>
                                    <option value="">Select State</option>
                                    <option value="Abia">Abia</option>
                                    <option value="Adamawa">Adamawa</option>
                                    <option value="Akwa Ibom">Akwa Ibom</option>
                                    <option value="Anambra">Anambra</option>
                                    <option value="Bauchi">Bauchi</option>
                                    <option value="Bayelsa">Bayelsa</option>
                                    <option value="Benue">Benue</option>
                                    <option value="Borno">Borno</option>
                                    <option value="Cross River">Cross River</option>
                                    <option value="Delta">Delta</option>
                                    <option value="Ebonyi">Ebonyi</option>
                                    <option value="Edo">Edo</option>
                                    <option value="Ekiti">Ekiti</option>
                                    <option value="Enugu">Enugu</option>
                                    <option value="FCT">FCT - Abuja</option>
                                    <option value="Gombe">Gombe</option>
                                    <option value="Imo">Imo</option>
                                    <option value="Jigawa">Jigawa</option>
                                    <option value="Kaduna">Kaduna</option>
                                    <option value="Kano">Kano</option>
                                    <option value="Katsina">Katsina</option>
                                    <option value="Kebbi">Kebbi</option>
                                    <option value="Kogi">Kogi</option>
                                    <option value="Kwara">Kwara</option>
                                    <option value="Lagos">Lagos</option>
                                    <option value="Nasarawa">Nasarawa</option>
                                    <option value="Niger">Niger</option>
                                    <option value="Ogun">Ogun</option>
                                    <option value="Ondo">Ondo</option>
                                    <option value="Osun">Osun</option>
                                    <option value="Oyo">Oyo</option>
                                    <option value="Plateau">Plateau</option>
                                    <option value="Rivers">Rivers</option>
                                    <option value="Sokoto">Sokoto</option>
                                    <option value="Taraba">Taraba</option>
                                    <option value="Yobe">Yobe</option>
                                    <option value="Zamfara">Zamfara</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="lga_of_residence" class="form-label">LGA of Residence *</label>
                                <input type="text" class="form-control" id="lga_of_residence" name="lga_of_residence" required placeholder="Local Government Area">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="expected_monthly_contribution" class="form-label">Expected Monthly Contribution (₦) *</label>
                                <input type="number" class="form-control" id="expected_monthly_contribution" name="expected_monthly_contribution" required min="1000" step="100">
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="work_study_address" class="form-label">Work/Study Address *</label>
                        <textarea class="form-control" id="work_study_address" name="work_study_address" rows="3" required placeholder="Your work or study address"></textarea>
                    </div>

                    <!-- Next of Kin Information -->
                    <h5 class="mb-3 mt-4">Next of Kin Information</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="next_of_kin_name" class="form-label">Next of Kin Name *</label>
                                <input type="text" class="form-control" id="next_of_kin_name" name="next_of_kin_name" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="next_of_kin_mobile" class="form-label">Next of Kin Mobile *</label>
                                <input type="tel" class="form-control" id="next_of_kin_mobile" name="next_of_kin_mobile" required>
                            </div>
                        </div>
                    </div>

                    <!-- Photo Upload -->
                    <h5 class="mb-3 mt-4">ID Card Photo</h5>
                    <div class="mb-3">
                        <label for="photo" class="form-label">Upload Photo for ID Card *</label>
                        <input type="file" class="form-control" id="photo" name="photo" accept="image/*" required>
                        <div class="form-text">Upload a clear passport photograph (max 5MB)</div>
                    </div>

                    <!-- Password Information -->
                    <h5 class="mb-3 mt-4">Account Security</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="password" class="form-label">Password *</label>
                                <input type="password" class="form-control" id="password" name="password" required minlength="6">
                                <div class="form-text">Minimum 6 characters.</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="confirm_password" class="form-label">Confirm Password *</label>
                                <input type="password" class="form-control" id="confirm_password" name="confirm_password" required minlength="6">
                            </div>
                        </div>
                    </div>

                    <!-- Cloudflare Captcha -->
                    <div class="mb-3">
                        <div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY"></div>
                        <input type="hidden" name="cf-turnstile-response" id="cf-turnstile-response">
                    </div>

                    <!-- Terms and Conditions -->
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="terms" name="terms" required>
                            <label class="form-check-label" for="terms">
                                I agree to the <a href="#" data-bs-toggle="modal" data-bs-target="#termsModal">Terms and Conditions</a> and <a href="#" data-bs-toggle="modal" data-bs-target="#privacyModal">Privacy Policy</a>
                            </label>
                        </div>
                    </div>
                    
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary" id="registerBtn">
                            <span id="btnText">Register Account</span>
                            <span id="btnSpinner" class="spinner-border spinner-border-sm d-none" role="status"></span>
                        </button>
                    </div>
                </form>
                
                <div class="text-center mt-3">
                    <p>Already have an account? <a href="{{ url_for('login') }}">Login here</a></p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Terms and Conditions Modal -->
<div class="modal fade" id="termsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Terms and Conditions</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <h6>Membership Terms</h6>
                <ul>
                    <li>Registration fee of ₦1,000 is required</li>
                    <li>Minimum monthly contribution is ₦1,000</li>
                    <li>Contributions are split: 80% Savings, 20% Shares</li>
                    <li>Members must be approved by admin before activation</li>
                    <li>Loan applications subject to approval and contribution history</li>
                    <li>Members must provide valid identification documents</li>
                </ul>
                
                <h6>Financial Terms</h6>
                <ul>
                    <li>Interest rate on loans is 5% per annum</li>
                    <li>Loan repayment periods range from 3-36 months</li>
                    <li>Late payments attract additional charges</li>
                    <li>Insurance premiums are deducted from contributions</li>
                </ul>
                
                <h6>Privacy and Data</h6>
                <ul>
                    <li>Member information is kept confidential</li>
                    <li>Data is used for cooperative operations only</li>
                    <li>Members consent to communication via email/SMS</li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Privacy Policy Modal -->
<div class="modal fade" id="privacyModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Privacy Policy</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <h6>Data Collection</h6>
                <p>We collect personal information including name, contact details, and financial data for cooperative operations.</p>
                
                <h6>Data Usage</h6>
                <p>Your data is used for:</p>
                <ul>
                    <li>Account management and services</li>
                    <li>Financial transactions and reporting</li>
                    <li>Communication and notifications</li>
                    <li>Regulatory compliance</li>
                </ul>
                
                <h6>Data Protection</h6>
                <p>We implement appropriate security measures to protect your personal information.</p>
                
                <h6>Data Sharing</h6>
                <p>We do not share your personal information with third parties except as required by law.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Form validation and submission
document.getElementById('registrationForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const btn = document.getElementById('registerBtn');
    const btnText = document.getElementById('btnText');
    const btnSpinner = document.getElementById('btnSpinner');
    
    // Validate passwords match
    const password = document.getElementById('password').value;
    const confirmPassword = document.getElementById('confirm_password').value;
    
    if (password !== confirmPassword) {
        alert('Passwords do not match!');
        return;
    }
    
    // Show loading state
    btn.disabled = true;
    btnText.textContent = 'Registering...';
    btnSpinner.classList.remove('d-none');
    
    // Submit form
    this.submit();
});

// Password strength indicator
document.getElementById('password').addEventListener('input', function() {
    const password = this.value;
    let strength = 0;
    
    if (password.length >= 6) strength++;
    if (password.length >= 10) strength++;
    if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++;
    if (/[0-9]/.test(password)) strength++;
    if (/[^a-zA-Z0-9]/.test(password)) strength++;
    
    // You can add visual strength indicator here
});

// File upload validation
document.getElementById('photo').addEventListener('change', function() {
    const file = this.files[0];
    if (file) {
        if (file.size > 5 * 1024 * 1024) { // 5MB
            alert('File size must be less than 5MB');
            this.value = '';
        }
        if (!file.type.startsWith('image/')) {
            alert('Please upload an image file');
            this.value = '';
        }
    }
});
</script>

<!-- Cloudflare Turnstile -->
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
{% endblock %}