{% extends "base.html" %}

{% block title %}Join OrchidStein Labs - The Orchid Continuum{% endblock %}

{% block content %}
<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <!-- Header Banner -->
            <div class="text-center mb-5">
                <h1 class="display-4 text-primary">🧬 OrchidStein Labs</h1>
                <p class="lead">Create Your Personal Orchid Breeding Laboratory</p>
                <p class="text-muted">Join researchers worldwide using AI-powered breeding analysis and statistical modeling</p>
            </div>

            <div class="card shadow-lg border-0">
                <div class="card-header bg-gradient-primary text-white py-4">
                    <h4 class="text-center mb-0">
                        <i data-feather="user-plus" class="me-2"></i>Create Your Lab Account
                    </h4>
                </div>
                <div class="card-body p-5">
                    <form method="POST" class="needs-validation" novalidate>
                        <!-- Basic Information -->
                        <h5 class="text-primary mb-3"><i data-feather="user"></i> Personal Information</h5>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="first_name" class="form-label">First Name *</label>
                                <input type="text" class="form-control" id="first_name" name="first_name" required>
                                <div class="invalid-feedback">Please provide your first name.</div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="last_name" class="form-label">Last Name *</label>
                                <input type="text" class="form-control" id="last_name" name="last_name" required>
                                <div class="invalid-feedback">Please provide your last name.</div>
                            </div>
                        </div>
                        
                        <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="invalid-feedback">Please provide a valid email address.</div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="password" class="form-label">Password *</label>
                                <input type="password" class="form-control" id="password" name="password" required minlength="8">
                                <div class="form-text">Minimum 8 characters</div>
                                <div class="invalid-feedback">Password must be at least 8 characters.</div>
                            </div>
                            <div class="col-md-6 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>
                                <div class="invalid-feedback">Passwords must match.</div>
                            </div>
                        </div>
                        
                        <!-- Lab Setup -->
                        <hr class="my-4">
                        <h5 class="text-primary mb-3"><i data-feather="settings"></i> Lab Configuration</h5>
                        
                        <div class="mb-3">
                            <label for="lab_name" class="form-label">Lab Name</label>
                            <input type="text" class="form-control" id="lab_name" name="lab_name" 
                                   placeholder="e.g., Smith Phalaenopsis Research Lab" value="My OrchidStein Lab">
                            <div class="form-text">Choose a unique name for your breeding laboratory</div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="breeding_specialization" class="form-label">Primary Focus</label>
                                <select class="form-select" id="breeding_specialization" name="breeding_specialization">
                                    <option value="">Select your specialty...</option>
                                    <option value="Phalaenopsis">Phalaenopsis (Moth Orchids)</option>
                                    <option value="Cattleya">Cattleya & Allies</option>
                                    <option value="Dendrobium">Dendrobium</option>
                                    <option value="Oncidium">Oncidium & Allies</option>
                                    <option value="Paphiopedilum">Paphiopedilum (Slippers)</option>
                                    <option value="Vanda">Vanda & Allies</option>
                                    <option value="Cymbidium">Cymbidium</option>
                                    <option value="Intergeneric">Intergeneric Hybrids</option>
                                    <option value="Species">Species Conservation</option>
                                    <option value="Mixed">Mixed Genera</option>
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="experience_level" class="form-label">Experience Level</label>
                                <select class="form-select" id="experience_level" name="experience_level">
                                    <option value="beginner">Beginner (0-2 years)</option>
                                    <option value="intermediate">Intermediate (3-10 years)</option>
                                    <option value="advanced">Advanced (10+ years)</option>
                                    <option value="professional">Professional Breeder</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="research_interests" class="form-label">Research Interests</label>
                            <textarea class="form-control" id="research_interests" name="research_interests" rows="3" 
                                      placeholder="What breeding goals interest you? (e.g., fragrance, color patterns, compact growth, heat tolerance...)"></textarea>
                            <div class="form-text">Describe your breeding goals and trait interests</div>
                        </div>
                        
                        <!-- Additional Info -->
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="organization" class="form-label">Organization</label>
                                <input type="text" class="form-control" id="organization" name="organization" 
                                       placeholder="Orchid Society, Research Institution, etc.">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="country" class="form-label">Country</label>
                                <input type="text" class="form-control" id="country" name="country">
                            </div>
                        </div>
                        
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg">
                                🚀 Create My OrchidStein Lab
                            </button>
                        </div>
                    </form>
                    
                    <hr>
                    <div class="text-center">
                        <p class="mb-0">Already have an account?</p>
                        <a href="{{ url_for('auth.login') }}" class="btn btn-link">Sign Into Your Lab</a>
                    </div>
                </div>
            </div>

            <!-- Lab Benefits Section -->
            <div class="row mt-5">
                <div class="col-md-4 mb-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body text-center">
                            <div class="bg-primary rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                <i data-feather="trending-up" class="text-white" style="width: 30px; height: 30px;"></i>
                            </div>
                            <h5>Statistical Analysis</h5>
                            <p class="text-muted">AI-powered trait segregation analysis with success probability predictions for your breeding crosses.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body text-center">
                            <div class="bg-success rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                <i data-feather="eye" class="text-white" style="width: 30px; height: 30px;"></i>
                            </div>
                            <h5>Offspring Visualization</h5>
                            <p class="text-muted">AI-generated graphics modeling potential offspring based on selected traits and genetic probabilities.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body text-center">
                            <div class="bg-info rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                <i data-feather="database" class="text-white" style="width: 30px; height: 30px;"></i>
                            </div>
                            <h5>Personal Lab</h5>
                            <p class="text-muted">Private workspace for tracking breeding projects, collections, and research with full data isolation.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Form validation
(function() {
    'use strict';
    window.addEventListener('load', function() {
        var forms = document.getElementsByClassName('needs-validation');
        var validation = Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add('was-validated');
            }, false);
        });
    }, false);
})();

// Password confirmation validation
document.getElementById('confirm_password').addEventListener('input', function() {
    const password = document.getElementById('password').value;
    const confirmPassword = this.value;
    
    if (password !== confirmPassword) {
        this.setCustomValidity('Passwords must match');
    } else {
        this.setCustomValidity('');
    }
});
</script>

{% endblock %}