541 lines
27 KiB
XML
541 lines
27 KiB
XML
<?xml version="1.0" encoding="utf-8"?>
|
|
<odoo>
|
|
<!-- Shared Stepper Template -->
|
|
<template id="school_registration_stepper" name="School Registration Stepper">
|
|
<div class="school-stepper mb-4">
|
|
<div t-attf-class="step-item #{'active' if step == 1 else ('completed' if step > 1 else '')}">
|
|
<div class="step-circle">
|
|
<t t-if="step > 1"><i class="fa fa-check"></i></t>
|
|
<t t-else="">1</t>
|
|
</div>
|
|
<div class="step-label">Parent / Guardian</div>
|
|
</div>
|
|
<div t-attf-class="step-item #{'active' if step == 2 else ('completed' if step > 2 else '')}">
|
|
<div class="step-circle">
|
|
<t t-if="step > 2"><i class="fa fa-check"></i></t>
|
|
<t t-else="">2</t>
|
|
</div>
|
|
<div class="step-label">Student Details</div>
|
|
</div>
|
|
<div t-attf-class="step-item #{'active' if step == 3 else ('completed' if step > 3 else '')}">
|
|
<div class="step-circle">
|
|
<t t-if="step > 3"><i class="fa fa-check"></i></t>
|
|
<t t-else="">3</t>
|
|
</div>
|
|
<div class="step-label">Class Selection</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Shared Styles -->
|
|
<template id="school_registration_styles" name="School Registration Styles">
|
|
<style>
|
|
.school-reg-wrap {
|
|
background-color: #f7f8fc;
|
|
min-height: 85vh;
|
|
padding-bottom: 80px;
|
|
font-family: var(--community-font, 'Outfit', 'Inter', sans-serif);
|
|
}
|
|
.school-reg-hero {
|
|
background: linear-gradient(135deg, #120735 0%, #1e1048 50%, #2a165f 100%);
|
|
color: #ffffff;
|
|
padding: 50px 20px 65px 20px;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
.school-reg-hero::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, #e5a93c, #f3c669, #e5a93c);
|
|
}
|
|
.school-reg-card {
|
|
background: #ffffff;
|
|
border-radius: 18px;
|
|
border: 1px solid #e2e8f0;
|
|
box-shadow: 0 15px 40px rgba(18, 7, 53, 0.08);
|
|
padding: 42px 48px 48px 48px;
|
|
margin-top: -35px;
|
|
margin-bottom: 60px;
|
|
position: relative;
|
|
z-index: 10;
|
|
max-width: 640px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
@media (max-width: 576px) {
|
|
.school-reg-card {
|
|
padding: 28px 20px 32px 20px;
|
|
margin-top: -25px;
|
|
}
|
|
.btn-school-next, .btn-school-back {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
/* Stepper */
|
|
.school-stepper {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: relative;
|
|
margin-bottom: 32px;
|
|
}
|
|
.school-stepper::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 21px;
|
|
left: 40px;
|
|
right: 40px;
|
|
height: 3px;
|
|
background: #e2e8f0;
|
|
z-index: 1;
|
|
}
|
|
.step-item {
|
|
position: relative;
|
|
z-index: 2;
|
|
text-align: center;
|
|
flex: 1;
|
|
}
|
|
.step-circle {
|
|
width: 42px;
|
|
height: 42px;
|
|
border-radius: 50%;
|
|
background: #ffffff;
|
|
border: 3px solid #cbd5e1;
|
|
color: #64748b;
|
|
font-weight: 700;
|
|
font-size: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 8px auto;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.step-item.active .step-circle {
|
|
border-color: #e5a93c;
|
|
background: #120735;
|
|
color: #e5a93c;
|
|
box-shadow: 0 0 0 4px rgba(229, 169, 60, 0.2);
|
|
}
|
|
.step-item.completed .step-circle {
|
|
border-color: #10b981;
|
|
background: #10b981;
|
|
color: #ffffff;
|
|
}
|
|
.step-label {
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
color: #64748b;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.step-item.active .step-label {
|
|
color: #120735;
|
|
font-weight: 700;
|
|
}
|
|
.school-section-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
color: #120735;
|
|
border-bottom: 2px solid #edf2f7;
|
|
padding-bottom: 12px;
|
|
margin-bottom: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.form-label {
|
|
font-weight: 600;
|
|
color: #1e293b;
|
|
font-size: 0.95rem;
|
|
margin-bottom: 6px;
|
|
}
|
|
.input-group-text {
|
|
background-color: #f8fafc;
|
|
border-color: #cbd5e1;
|
|
color: #64748b;
|
|
padding-left: 14px;
|
|
padding-right: 14px;
|
|
border-top-left-radius: 8px;
|
|
border-bottom-left-radius: 8px;
|
|
}
|
|
.form-control, .form-select {
|
|
border-color: #cbd5e1;
|
|
padding: 11px 14px;
|
|
border-radius: 8px;
|
|
font-size: 0.95rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.form-control:focus, .form-select:focus {
|
|
border-color: #e5a93c;
|
|
box-shadow: 0 0 0 3px rgba(229, 169, 60, 0.2);
|
|
}
|
|
.btn-school-next {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, #e5a93c 0%, #d19b33 100%);
|
|
color: #120735;
|
|
font-weight: 700;
|
|
font-size: 1.05rem;
|
|
padding: 13px 38px;
|
|
border-radius: 30px;
|
|
border: none;
|
|
box-shadow: 0 6px 18px rgba(229, 169, 60, 0.35);
|
|
transition: all 0.25s ease;
|
|
cursor: pointer;
|
|
}
|
|
.btn-school-next:hover {
|
|
background: linear-gradient(135deg, #f3c669 0%, #e5a93c 100%);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 22px rgba(229, 169, 60, 0.45);
|
|
color: #120735;
|
|
}
|
|
.btn-school-back {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
border-radius: 30px;
|
|
padding: 12px 26px;
|
|
font-weight: 600;
|
|
color: #475569;
|
|
border: 1px solid #cbd5e1;
|
|
background: #ffffff;
|
|
transition: all 0.2s ease;
|
|
text-decoration: none;
|
|
}
|
|
.btn-school-back:hover {
|
|
background: #f1f5f9;
|
|
color: #0f172a;
|
|
}
|
|
.class-card {
|
|
border: 2px solid #e2e8f0;
|
|
border-radius: 12px;
|
|
padding: 16px 20px;
|
|
margin-bottom: 14px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
background: #ffffff;
|
|
}
|
|
.class-card:hover {
|
|
border-color: #e5a93c;
|
|
background-color: #fefcf7;
|
|
}
|
|
</style>
|
|
</template>
|
|
|
|
<!-- STEP 1: PARENT / GUARDIAN -->
|
|
<template id="registration_step_parent" name="School Registration: Parent">
|
|
<t t-call="website.layout">
|
|
<t t-call="community_school.school_registration_styles"/>
|
|
<div id="wrap" class="school-reg-wrap">
|
|
<!-- Hero Header -->
|
|
<div class="school-reg-hero">
|
|
<div class="container">
|
|
<span class="badge px-3 py-2 rounded-pill fw-bold mb-3" style="background-color: #e5a93c; color: #120735;">
|
|
LANGUAGE SCHOOL ADMISSIONS
|
|
</span>
|
|
<h1 class="display-5 fw-bold text-white mb-2">School Student Registration</h1>
|
|
<p class="fs-5 mb-0" style="color: #c9c3ec;">Step 1 of 3: Parent or Guardian Information</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Registration Card -->
|
|
<div class="container">
|
|
<div class="school-reg-card">
|
|
<t t-call="community_school.school_registration_stepper">
|
|
<t t-set="step" t-value="1"/>
|
|
</t>
|
|
|
|
<div class="school-section-title">
|
|
<i class="fa fa-user-circle text-warning"></i>
|
|
<span>Parent / Guardian Information</span>
|
|
</div>
|
|
|
|
<form method="POST" t-attf-action="/school/register">
|
|
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Full Name <span class="text-danger">*</span></label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fa fa-user"></i></span>
|
|
<input type="text" class="form-control" name="name" required="required" placeholder="e.g. Anand Natarajan"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Email Address <span class="text-danger">*</span></label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fa fa-envelope"></i></span>
|
|
<input type="email" class="form-control" name="email" required="required" placeholder="e.g. anand@example.com"/>
|
|
</div>
|
|
<small class="text-muted">Enrollment notices, invoices, and class reminders will be sent to this email.</small>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="form-label">Phone Number</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fa fa-phone"></i></span>
|
|
<input type="tel" class="form-control" name="phone" placeholder="e.g. +1 416-555-0199"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-end align-items-center pt-3 pb-2">
|
|
<button type="submit" class="btn btn-school-next">
|
|
Continue to Student Info <i class="fa fa-arrow-right ms-2"></i>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</t>
|
|
</template>
|
|
|
|
<!-- STEP 2: STUDENT -->
|
|
<template id="registration_step_student" name="School Registration: Student">
|
|
<t t-call="website.layout">
|
|
<t t-call="community_school.school_registration_styles"/>
|
|
<div id="wrap" class="school-reg-wrap">
|
|
<!-- Hero Header -->
|
|
<div class="school-reg-hero">
|
|
<div class="container">
|
|
<span class="badge px-3 py-2 rounded-pill fw-bold mb-3" style="background-color: #e5a93c; color: #120735;">
|
|
LANGUAGE SCHOOL ADMISSIONS
|
|
</span>
|
|
<h1 class="display-5 fw-bold text-white mb-2">School Student Registration</h1>
|
|
<p class="fs-5 mb-0" style="color: #c9c3ec;">Step 2 of 3: Student Details & Emergency Contact</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Registration Card -->
|
|
<div class="container">
|
|
<div class="school-reg-card">
|
|
<t t-call="community_school.school_registration_stepper">
|
|
<t t-set="step" t-value="2"/>
|
|
</t>
|
|
|
|
<div class="school-section-title">
|
|
<i class="fa fa-graduation-cap text-warning"></i>
|
|
<span>Student Information</span>
|
|
</div>
|
|
|
|
<form method="POST" t-attf-action="/school/register/student">
|
|
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Student Full Name <span class="text-danger">*</span></label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fa fa-id-card"></i></span>
|
|
<input type="text" class="form-control" name="name" required="required" placeholder="e.g. Kavin Anand"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Date of Birth</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fa fa-calendar"></i></span>
|
|
<input type="date" class="form-control" name="date_of_birth"/>
|
|
</div>
|
|
<small class="text-muted">Used to match the student to their appropriate age or grade level.</small>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Health & Medical Notes</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fa fa-medkit"></i></span>
|
|
<textarea class="form-control" name="health_notes" rows="2" placeholder="Allergies, medical conditions, or special requirements (optional)"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="school-section-title mt-4">
|
|
<i class="fa fa-shield text-warning"></i>
|
|
<span>Emergency Contact</span>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Emergency Contact Name</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fa fa-user-plus"></i></span>
|
|
<input type="text" class="form-control" name="emergency_contact_name" placeholder="Contact person if parent is unreachable"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="form-label">Emergency Contact Phone</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fa fa-phone-square"></i></span>
|
|
<input type="tel" class="form-control" name="emergency_contact_phone" placeholder="e.g. +1 416-555-0188"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex flex-wrap justify-content-between align-items-center gap-3 pt-3 pb-1">
|
|
<a href="/school/register" class="btn btn-school-back">
|
|
<i class="fa fa-arrow-left me-1"></i> Back
|
|
</a>
|
|
<button type="submit" class="btn btn-school-next">
|
|
Continue to Class Selection <i class="fa fa-arrow-right ms-2"></i>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</t>
|
|
</template>
|
|
|
|
<!-- STEP 3: CLASS SELECTION -->
|
|
<template id="registration_step_class" name="School Registration: Class">
|
|
<t t-call="website.layout">
|
|
<t t-call="community_school.school_registration_styles"/>
|
|
<div id="wrap" class="school-reg-wrap">
|
|
<!-- Hero Header -->
|
|
<div class="school-reg-hero">
|
|
<div class="container">
|
|
<span class="badge px-3 py-2 rounded-pill fw-bold mb-3" style="background-color: #e5a93c; color: #120735;">
|
|
LANGUAGE SCHOOL ADMISSIONS
|
|
</span>
|
|
<h1 class="display-5 fw-bold text-white mb-2">School Student Registration</h1>
|
|
<p class="fs-5 mb-0" style="color: #c9c3ec;">Step 3 of 3: Select Class & Complete Registration</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Registration Card -->
|
|
<div class="container">
|
|
<div class="school-reg-card">
|
|
<t t-call="community_school.school_registration_stepper">
|
|
<t t-set="step" t-value="3"/>
|
|
</t>
|
|
|
|
<div class="school-section-title">
|
|
<i class="fa fa-book text-warning"></i>
|
|
<span>Select Class</span>
|
|
</div>
|
|
|
|
<form method="POST" t-attf-action="/school/register/class">
|
|
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
|
|
|
|
<div class="mb-4">
|
|
<label class="form-label d-block mb-3">Available Classes <span class="text-danger">*</span></label>
|
|
|
|
<t t-foreach="classes" t-as="klass">
|
|
<div class="class-card">
|
|
<div class="form-check d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<input class="form-check-input me-2" type="radio" name="class_id"
|
|
t-att-value="klass.id" t-att-id="'class_' + str(klass.id)" required="required"/>
|
|
<label class="form-check-label fw-bold text-dark" t-att-for="'class_' + str(klass.id)">
|
|
<t t-out="klass.name"/>
|
|
</label>
|
|
<div class="small text-muted ps-4">
|
|
Seats: <t t-out="klass.enrolled_count"/> / <t t-out="klass.max_students"/>
|
|
<t t-if="klass.enrolled_count >= klass.max_students">
|
|
<span class="badge bg-warning text-dark ms-2">Waitlist</span>
|
|
</t>
|
|
<t t-else="">
|
|
<span class="badge bg-success ms-2">Available</span>
|
|
</t>
|
|
</div>
|
|
</div>
|
|
<div class="text-end">
|
|
<t t-if="klass.fee">
|
|
<span class="fw-bold text-primary fs-5">$<t t-out="'%g' % klass.fee"/></span>
|
|
</t>
|
|
<t t-else="">
|
|
<span class="badge bg-light text-secondary border">Free</span>
|
|
</t>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</t>
|
|
</div>
|
|
|
|
<div class="p-3 bg-light rounded-3 border mb-4">
|
|
<small class="text-muted d-block">
|
|
<i class="fa fa-info-circle text-primary me-1"></i>
|
|
Upon submission, an enrollment record will be created and an invoice/receipt will be generated. You will be able to view classroom details in your Member Portal.
|
|
</small>
|
|
</div>
|
|
|
|
<div class="d-flex flex-wrap justify-content-between align-items-center gap-3 pt-3 pb-1">
|
|
<a href="/school/register/student" class="btn btn-school-back">
|
|
<i class="fa fa-arrow-left me-1"></i> Back
|
|
</a>
|
|
<button type="submit" class="btn btn-school-next">
|
|
Complete Registration <i class="fa fa-check ms-2"></i>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</t>
|
|
</template>
|
|
|
|
<!-- STEP 4: DONE / CONFIRMATION -->
|
|
<template id="registration_done" name="School Registration: Done">
|
|
<t t-call="website.layout">
|
|
<t t-call="community_school.school_registration_styles"/>
|
|
<div id="wrap" class="school-reg-wrap py-5">
|
|
<div class="container py-4">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8 col-lg-7">
|
|
<div class="card border-0 shadow-sm rounded-4 p-4 p-md-5 text-center bg-white">
|
|
<t t-if="waitlisted">
|
|
<div class="mb-4">
|
|
<span class="d-inline-flex align-items-center justify-content-center rounded-circle"
|
|
style="width: 80px; height: 80px; background-color: #fff8e1; color: #f59e0b; font-size: 2.5rem;">
|
|
<i class="fa fa-clock-o"></i>
|
|
</span>
|
|
</div>
|
|
<h2 class="fw-bold mb-2" style="color: #120735;">Placed on Waitlist</h2>
|
|
<p class="text-secondary mb-4">
|
|
The selected class is currently full. We have placed
|
|
<b class="text-dark" t-out="enrollment.student_id.partner_id.name"/> on the waitlist for
|
|
<b class="text-primary" t-out="enrollment.class_id.name"/>.
|
|
You will be notified immediately when a seat opens up.
|
|
</p>
|
|
</t>
|
|
<t t-else="">
|
|
<div class="mb-4">
|
|
<span class="d-inline-flex align-items-center justify-content-center rounded-circle"
|
|
style="width: 80px; height: 80px; background-color: #e8f5e9; color: #2e7d32; font-size: 2.5rem;">
|
|
<i class="fa fa-check"></i>
|
|
</span>
|
|
</div>
|
|
<h2 class="fw-bold mb-2" style="color: #120735;">Registration Complete!</h2>
|
|
<p class="text-secondary mb-4">
|
|
Congratulations! <b class="text-dark" t-out="enrollment.student_id.partner_id.name"/> is successfully enrolled in
|
|
<b class="text-primary" t-out="enrollment.class_id.name"/>.
|
|
</p>
|
|
</t>
|
|
|
|
<div class="p-3 bg-light rounded-3 border text-start mb-4">
|
|
<h6 class="fw-bold mb-2 text-dark"><i class="fa fa-info-circle text-primary me-2"></i>What's Next:</h6>
|
|
<ul class="text-muted small mb-0 ps-3">
|
|
<li class="mb-1"><b>Confirmation Receipt:</b> An enrollment confirmation has been sent to your email.</li>
|
|
<li class="mb-1"><b>Classroom Access:</b> Log in to your portal anytime to view class schedule, instructors, and student attendance.</li>
|
|
<li><b>School Portal:</b> Access your parent dashboard at <a href="/my/school">/my/school</a>.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="d-flex flex-wrap gap-3 justify-content-center">
|
|
<a href="/" class="btn btn-outline-secondary px-4 py-2 rounded-pill">
|
|
<i class="fa fa-home me-2"></i>Return to Home
|
|
</a>
|
|
<a href="/my/school" class="btn px-4 py-2 rounded-pill fw-bold text-white" style="background-color: #120735;">
|
|
<i class="fa fa-graduation-cap me-2"></i>View Student Portal
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</t>
|
|
</template>
|
|
</odoo>
|