379 lines
16 KiB
PHP
379 lines
16 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Apply Now')
|
|
|
|
@section('content')
|
|
|
|
<style>
|
|
body {
|
|
font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
|
|
background: #F8FAFC;
|
|
color: #1E293B;
|
|
}
|
|
|
|
:root {
|
|
/* Premium Modern Automotive Palette */
|
|
--primary: #0F2C59;
|
|
--secondary: #822424;
|
|
--secondary-hover: #6a2525;
|
|
--accent-yellow: #FFE618;
|
|
--bg-light: #F8FAFC;
|
|
--text-main: #1E293B;
|
|
--card-border: rgba(62, 81, 184, 0.12);
|
|
}
|
|
|
|
|
|
|
|
.hero {
|
|
height: 240px;
|
|
background: linear-gradient(rgba(214, 219, 255, 0.79), rgba(0, 0, 0, 0.85)), 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;
|
|
text-align: center;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 36px;
|
|
font-weight: 800;
|
|
margin: 0;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
.apply-area {
|
|
margin-top: -50px;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.form-container-sm {
|
|
max-width: 850px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.form-card {
|
|
background: white;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--card-border);
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.form-header {
|
|
background: linear-gradient(135deg, #8C4242 0%, #161414fa 100%);
|
|
color: white;
|
|
padding: 25px 30px;
|
|
border-bottom: 3px solid var(--accent-yellow);
|
|
}
|
|
|
|
.form-header h2 {
|
|
margin: 0;
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.section-title {
|
|
background: var(--secondary);
|
|
color: white;
|
|
padding: 10px 16px;
|
|
margin-top: 30px;
|
|
margin-bottom: 20px;
|
|
font-size: 14px;
|
|
border-radius: 6px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.5px;
|
|
box-shadow: 0 4px 10px rgba(106, 37, 37, 0.15);
|
|
}
|
|
|
|
.form-label {
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
margin-bottom: 6px;
|
|
color: #000;
|
|
}
|
|
|
|
.form-control,
|
|
.form-select {
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 8px;
|
|
padding: 10px 14px;
|
|
font-size: 14px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.form-control:focus,
|
|
.form-select:focus {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 4px rgba(62, 81, 184, 0.15);
|
|
outline: 0;
|
|
}
|
|
|
|
.required {
|
|
color: var(--secondary-hover);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.submit-btn {
|
|
background:var(--secondary);
|
|
color: white;
|
|
border: none;
|
|
padding: 14px 30px;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
box-shadow: 0 4px 12px rgba(62, 81, 184, 0.2);
|
|
}
|
|
|
|
.submit-btn:hover {
|
|
background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
|
|
color: var(--accent-yellow);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(130, 36, 36, 0.35);
|
|
}
|
|
|
|
.mb-3-custom {
|
|
margin-bottom: 1.25rem !important;
|
|
}
|
|
|
|
.form-check-input:checked {
|
|
background-color: var(--primary);
|
|
border-color: var(--primary);
|
|
}
|
|
</style>
|
|
|
|
<div class="hero">
|
|
<div class="text-center px-3">
|
|
<h1>Course Enrolment Form</h1>
|
|
<p class="lead mb-0 mt-2 fw-semibold" style="font-size: 15px; opacity: 0.95; color: var(--accent-yellow);">
|
|
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>
|
|
New Student Registration
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="p-4 p-md-5">
|
|
|
|
@if(session('success'))
|
|
<div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
|
|
{{ session('success') }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
@endif
|
|
|
|
@if($errors->any())
|
|
<div class="alert alert-danger mb-4">
|
|
<ul class="mb-0">
|
|
@foreach($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
<form action="{{ route('apply.store') }}" 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" placeholder="Enter your first name" 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" placeholder="Enter your last name" required>
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3-custom">
|
|
<label class="form-label">NIC / Passport Number</label>
|
|
<input type="text" name="nic" class="form-control" placeholder="Identity Document No.">
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3-custom">
|
|
<label class="form-label">Nationality</label>
|
|
<input type="text" name="nationality" class="form-control" placeholder="e.g. Sri Lankan">
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3-custom">
|
|
<label class="form-label">Residential Address <span class="required">*</span></label>
|
|
<input type="text" name="address" class="form-control" placeholder="Street address" 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" placeholder="City or region" 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" placeholder="Primary phone number" 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" placeholder="Backup phone number">
|
|
</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" placeholder="name@example.com" 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 Call</option>
|
|
<option value="sms">SMS</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- EDUCATION --}}
|
|
<div class="section-title">
|
|
<i class="fa-solid fa-graduation-cap me-2"></i> Academic Qualifications
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3-custom">
|
|
<label class="form-label">Are you currently a school student?</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 last attended 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 Final 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 Standards</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">Core Subjects</label>
|
|
<input type="text" name="subjects" class="form-control" placeholder="e.g. Mathematics, Science, Tech">
|
|
</div>
|
|
|
|
<div class="col-12 mb-3-custom">
|
|
<label class="form-label">Grades / Academic Results Summary</label>
|
|
<textarea name="grades_results" class="form-control" rows="3" placeholder="List your relevant examination grades or index summaries..."></textarea>
|
|
</div>
|
|
|
|
<div class="col-12 mb-3-custom">
|
|
<label class="form-label">Upload Educational Certificates (Multiple Allowed)</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" placeholder="Full name of guardian/relative" 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" placeholder="e.g. Father, Mother, Spouse" required>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- TERMS AND CONDITIONS --}}
|
|
<div class="form-check mb-4 mt-3">
|
|
<input class="form-check-input" type="checkbox" id="terms" required>
|
|
<label class="form-check-label fw-semibold" for="terms" style="font-size: 13px; color: #000; cursor: pointer;">
|
|
I hereby declare that the details furnished above are true and correct to the best of my knowledge <span class="required">*</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<button type="submit" class="submit-btn">Submit Application</button>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection |