{% extends team.id+'/base.html' %}

{% block title %}Join us{% endblock %}
{% block description %}Become a member of Muten Roshi FC: join the Turtle School. Junior and adult memberships with exclusive benefits at Kame House Stadium. Sign up!{% endblock %}


{% block content %}
<section class="container my-5">
    <div class="mb-5">
        <h1 class="fw-bold text-center">BECOME A MEMBER</h1>
        <p class="lead text-center">Become part of the {{team.name}} community and support the club.</p>
    </div>
    <div class="row g-5 justify-content-center">
        <div class="col-md-6 col-lg-5">
            <div class="card border-info border-2 shadow-sm mb-4">
                <div class="card-header bg-info text-dark fw-bold text-center py-3">YOUTH CATEGORY</div>
                <div class="card-body text-center">
                    <span class="display-5 fw-bold">0€</span>
                    <p class="text-muted small">For young prospects (0-14 years old)</p>
                    <ul class="list-unstyled text-start roboto mb-0">
                        <li><i class="bi bi-check2 text-info me-2"></i>Free access to the museum</li>
                        <li><i class="bi bi-check2 text-info me-2"></i>A training ball as a gift</li>
                        <li><i class="bi bi-check2 text-info me-2"></i>Participation in youth tournaments</li>
                    </ul>
                </div>
            </div>
            <div class="card-container">
                <p class="text-center text-muted small text-uppercase mb-2">Membership Card Preview</p>
                {% include team.id+'/includes/_young_card.html' %}
            </div>
        </div>

        <div class="col-md-6 col-lg-5">
            <div class="card border-warning border-2 shadow-sm mb-4">
                <div class="card-header bg-warning text-dark fw-bold text-center py-3">ADULT CATEGORY</div>
                <div class="card-body text-center">
                    <span class="display-5 fw-bold">30€ <small class="fs-6 text-muted">/ season</small></span>
                    <p class="text-muted small">For veteran (14+ years old)</p>
                    <ul class="list-unstyled text-start roboto mb-0">
                        <li><i class="bi bi-check2 text-warning me-2"></i>Voting rights at the Club Assembly</li>
                        <li><i class="bi bi-check2 text-warning me-2"></i>Discounts with sponsors</li>
                        <li><i class="bi bi-check2 text-warning me-2"></i>Discounts in the Club Shop</li>
                    </ul>
                </div>
            </div>
            <div class="card-container">
                <p class="text-center text-muted small text-uppercase mb-2">Membership Card Preview</p>
               {% set season=team["season"] %}{% include team.id+'/includes/_adult_card.html' %}
            </div>
        </div>
    </div>
	<div class="my-5 row justify-content-center">
        <div class="col-lg-8">
            <div class="bg-light-subtle p-4 p-md-5 rounded-4 shadow-lg border-top border-warning border-5">
                <div class="text-center mb-4">
                    <h2 class="fw-bold text-body">REGISTRATION FORM</h2>
                    <p class="text-muted">Become part of {{team.name}} Fill in your details to enter the season ticket draw.</p>
                </div>

                <form action="{{url_for ('team.new_member', team_id=team.id)}}" method="POST">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label small fw-bold text-uppercase">First Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control border-2" placeholder="Ex: Son Goku" required name="name">
                        </div>
						<div class="col-md-6">
                            <label class="form-label small fw-bold text-uppercase">Last Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control border-2" placeholder="Ex: Son Goku" required name="surnames">
                        </div>
						<div class="col-md-6">
                            <label class="form-label small fw-bold text-uppercase" for="birthday">Date of Birth</label>
							<input type="date" class="form-control border-2" id="birthday" name="birthday">
                        </div>
						<div class="col-md-6"></div>

                        <div class="col-md-6">
                            <label class="form-label small fw-bold text-uppercase">Contact Email</label>
                            <input type="email" class="form-control border-2" placeholder="your_email@capsulecorp.com" name="email">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label small fw-bold text-uppercase">Membership Type <span class="text-danger">*</span></label>
                            <select class="form-select border-2" required name="type">
								<option value="" selected>Membership Type</option>
                                <option value="1">Infantil(Free)</option>
                                <option value="2">Adult(30€)</option>
                            </select>
                        </div>
						<div class="col-md-6">
                            <label class="small fw-bold text-uppercase d-block mb-3 border-bottom pb-2">Preferences and Privacy</label>
                            <div class="row g-2">
								<div class="col-md-6">
									<div class="form-check">
										<input class="form-check-input border-warning" type="checkbox" id="newsletter" checked>
										<label class="form-check-label small" for="newsletter">
											<strong>Newsletter:</strong> Match results and league summaries.
										</label>
									</div>
								</div>
								<div class="col-md-6">
									<div class="form-check">
										<input class="form-check-input border-warning" type="checkbox" id="newsPromos">
										<label class="form-check-label small" for="newsPromos">
											<strong>Promotions:</strong> Offers on sports equipment.
										</label>
									</div>
								</div>
								<div class="col-md-6">
									<div class="form-check">
										<input class="form-check-input border-warning" type="checkbox" id="newsDraws">
										<label class="form-check-label small" for="newsDraws">
											<strong>Draws:</strong> Notify me about prizes and trips.
										</label>
									</div>
								</div>
								<div class="col-md-6">
									<div class="form-check">
										<input class="form-check-input border-warning" type="checkbox" id="newsTips">
										<label class="form-check-label small" for="newsTips">
											<strong>Tips:</strong> Advice to improve your performance.
										</label>
									</div>
								</div>
							</div>
                        </div>
						<div class="mt-5 col-md-12">
							<div class="form-check">
								<input class="form-check-input border-warning" type="checkbox" id="checkCondicions" required>
								<label class="form-check-label small" for="checkCondicions">
                                    I accept the <strong>conditions</strong> and the processing of my data by {{team.name}}.<span class="text-danger">*</span>
								</label>
							</div>
						</div>
                        <div class="col-12 text-center mt-4">
                            <button type="submit" class="btn btn-warning btn-lg px-5 fw-bold text-white shadow">
                                SUBMIT APPLICATION <i class="bi bi-send-fill ms-2"></i>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
{% endblock %}