331 lines
13 KiB
PHP
331 lines
13 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title','Apply Now')
|
|
|
|
@section('content')
|
|
|
|
<style>
|
|
body {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
:root {
|
|
--primary: #5E244E;
|
|
--secondary: #8B3A74;
|
|
--light: #F8F4F7;
|
|
}
|
|
|
|
.hero {
|
|
height: 220px;
|
|
background: linear-gradient(rgba(20,20,20,.55),rgba(20,20,20,.55)),
|
|
url('https://images.unsplash.com/photo-1517520287167-4bbf64a00d66?auto=format&fit=crop&w=1600&q=80');
|
|
background-size: cover;
|
|
background-position: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: white;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
margin: 0;
|
|
}
|
|
|
|
.apply-area {
|
|
margin-top: -40px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
|
|
.form-container-sm {
|
|
max-width: 820px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.form-card {
|
|
background: white;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,.08);
|
|
}
|
|
|
|
.form-header {
|
|
background: var(--primary);
|
|
color: white;
|
|
padding: 15px 25px;
|
|
}
|
|
|
|
.form-header h2 {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.section-title {
|
|
background: var(--primary);
|
|
color: white;
|
|
padding: 8px 12px;
|
|
margin-top: 22px;
|
|
margin-bottom: 15px;
|
|
font-size: 14px;
|
|
border-radius: 5px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.form-label {
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.form-control,
|
|
.form-select {
|
|
border-radius: 5px;
|
|
padding: 6px 10px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.required {
|
|
color: red;
|
|
}
|
|
|
|
.submit-btn {
|
|
background: var(--primary);
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 20px;
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
border-radius: 30px;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
transition: 0.3s ease;
|
|
}
|
|
|
|
.submit-btn:hover {
|
|
background: var(--secondary);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
|
|
.mb-3-custom {
|
|
margin-bottom: 0.75rem !important;
|
|
}
|
|
</style>
|
|
|
|
<div class="hero">
|
|
<div class="text-center">
|
|
<h1>Course Enrolment Form</h1>
|
|
<p class="lead mb-0" style="font-size: 14px; opacity: 0.9;">Automobile Engineering Academy</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container apply-area">
|
|
|
|
<div class="form-container-sm">
|
|
<div class="form-card">
|
|
<div class="form-header">
|
|
<h2>
|
|
<i class="fa-solid fa-file-circle-check me-2"></i>
|
|
Course Enrolment Form
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="p-4">
|
|
<form action="#" method="POST" enctype="multipart/form-data">
|
|
@csrf
|
|
|
|
{{-- STUDENT INFORMATION --}}
|
|
<div class="section-title">
|
|
<i class="fa-solid fa-user me-2"></i> Student Information
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3-custom">
|
|
<label class="form-label">First Name <span class="required">*</span></label>
|
|
<input type="text" name="first_name" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3-custom">
|
|
<label class="form-label">Last Name <span class="required">*</span></label>
|
|
<input type="text" name="last_name" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3-custom">
|
|
<label class="form-label">NIC / Passport</label>
|
|
<input type="text" name="nic" class="form-control">
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3-custom">
|
|
<label class="form-label">Nationality</label>
|
|
<input type="text" name="nationality" class="form-control">
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3-custom">
|
|
<label class="form-label">Address <span class="required">*</span></label>
|
|
<input type="text" name="address" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3-custom">
|
|
<label class="form-label">District / City / State <span class="required">*</span></label>
|
|
<input type="text" name="state" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3-custom">
|
|
<label class="form-label">Gender</label>
|
|
<select name="gender" class="form-select">
|
|
<option selected disabled>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 mb-3-custom">
|
|
<label class="form-label">Date of Birth</label>
|
|
<input type="date" name="dob" class="form-control">
|
|
</div>
|
|
</div>
|
|
|
|
{{-- CONTACT INFORMATION --}}
|
|
<div class="section-title">
|
|
<i class="fa-solid fa-envelope me-2"></i> Contact Information
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3-custom">
|
|
<label class="form-label">Contact Number <span class="required">*</span></label>
|
|
<input type="tel" name="mobile" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3-custom">
|
|
<label class="form-label">Alternative Contact Number</label>
|
|
<input type="tel" name="mobile2" class="form-control">
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3-custom">
|
|
<label class="form-label">Email Address <span class="required">*</span></label>
|
|
<input type="email" name="email" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3-custom">
|
|
<label class="form-label">Preferred Contact Method</label>
|
|
<select name="preferred_contact_method" class="form-select">
|
|
<option selected disabled>Select Your Option</option>
|
|
<option value="email">Email</option>
|
|
<option value="phone">Phone</option>
|
|
<option value="sms">SMS</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- EDUCATION --}}
|
|
<div class="section-title">
|
|
<i class="fa-solid fa-graduation-cap me-2"></i> Education
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3-custom">
|
|
<label class="form-label">Still at school?</label>
|
|
<select name="still_at_school" class="form-select">
|
|
<option selected disabled>Select Your Option</option>
|
|
<option value="Yes">Yes</option>
|
|
<option value="No">No</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3-custom">
|
|
<label class="form-label">Highest Educational Qualification</label>
|
|
<select name="highest_qualification" class="form-select">
|
|
<option selected disabled>Select Qualification</option>
|
|
<option value="O/L">G.C.E. O/L</option>
|
|
<option value="A/L">G.C.E. A/L</option>
|
|
<option value="NVQ Level 3">NVQ Level 3</option>
|
|
<option value="NVQ Level 4">NVQ Level 4</option>
|
|
<option value="Certificate">Certificate</option>
|
|
<option value="Diploma">Diploma</option>
|
|
<option value="Higher Diploma">Higher Diploma</option>
|
|
<option value="Degree">Degree</option>
|
|
<option value="Other">Other</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3-custom">
|
|
<label class="form-label">School / College Name</label>
|
|
<input type="text" name="school_name" class="form-control" placeholder="Enter School Name">
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3-custom">
|
|
<label class="form-label">Year Completed</label>
|
|
<input type="number" name="year_completed" class="form-control" min="1980" max="2100" placeholder="e.g. 2025">
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3-custom">
|
|
<label class="form-label">Examination Passed</label>
|
|
<select name="exam_passed" class="form-select">
|
|
<option selected disabled>Select Examination</option>
|
|
<option value="G.C.E. O/L">G.C.E. O/L</option>
|
|
<option value="G.C.E. A/L">G.C.E. A/L</option>
|
|
<option value="NVQ">NVQ</option>
|
|
<option value="Certificate">Certificate</option>
|
|
<option value="Diploma">Diploma</option>
|
|
<option value="Degree">Degree</option>
|
|
<option value="Other">Other</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3-custom">
|
|
<label class="form-label">Subjects</label>
|
|
<input type="text" name="subjects" class="form-control" placeholder="e.g. Mathematics, Science">
|
|
</div>
|
|
|
|
<div class="col-12 mb-3-custom">
|
|
<label class="form-label">Grades / Results</label>
|
|
<textarea name="grades_results" class="form-control" rows="2" placeholder="Enter your grades or examination results"></textarea>
|
|
</div>
|
|
|
|
<div class="col-12 mb-3-custom">
|
|
<label class="form-label">Educational Certificates</label>
|
|
<input type="file" name="certificates[]" class="form-control" accept=".pdf,.jpg,.jpeg,.png" multiple>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- EMERGENCY CONTACTS --}}
|
|
<div class="section-title">
|
|
<i class="fa-solid fa-phone-flip me-2"></i> Emergency Contacts
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3-custom">
|
|
<label class="form-label">Emergency Contact Name <span class="required">*</span></label>
|
|
<input type="text" name="emergency_contact_name" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3-custom">
|
|
<label class="form-label">Relationship <span class="required">*</span></label>
|
|
<input type="text" name="emergency_contact_relationship" class="form-control" required>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- TERMS AND CONDITIONS --}}
|
|
<div class="form-check mb-3 mt-2">
|
|
<input class="form-check-input" type="checkbox" id="terms" required>
|
|
<label class="form-check-label" for="terms" style="font-size: 13px;">
|
|
I agree to the terms and conditions <span class="required">*</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="mt-3">
|
|
<button type="submit" class="submit-btn">Submit Application</button>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection |