Register
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Registration</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
background: linear-gradient(135deg, #2563eb, #7c3aed, #0ea5e9);
background-size: 400% 400%;
animation: bgMove 15s ease infinite;
}
@keyframes bgMove {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.glass {
backdrop-filter: blur(20px);
background: rgba(255, 255, 255, .18);
border: 1px solid rgba(255, 255, 255, .2);
box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
.input {
@apply w-full rounded-xl border border-gray-300 bg-white/80 px-4 py-3 outline-none transition;
}
</style>
</head>
<body class="min-h-screen flex items-center justify-center p-5">
<div class="w-full max-w-6xl glass rounded-3xl overflow-hidden">
<div class="grid lg:grid-cols-2">
<!-- LEFT SIDE -->
<div class="hidden lg:flex flex-col justify-center p-14 text-white bg-gradient-to-br from-blue-700/40 to-purple-700/40">
<h1 class="text-5xl font-extrabold leading-tight">Student <br>Registration </h1>
<p class="mt-6 text-lg text-blue-100"> Create your account to access the Student Management System. Register today and manage your profile securely. </p>
<div class="mt-12 space-y-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">✔ </div>
<span>100% Secure Registration</span>
</div>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">✔ </div>
<span>Fast Student Approval</span>
</div>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">✔ </div>
<span>Easy Profile Management</span>
</div>
</div>
</div>
<!-- RIGHT SIDE -->
<div class="bg-white p-6 md:p-10">
<div class="text-center">
<h2 class="text-4xl font-extrabold text-gray-800"> Register </h2>
<p class="text-gray-500 mt-2"> Fill in your information below </p>
</div>
<!-- Success Message --> @if(session('success')) <div class="mt-6 rounded-xl bg-green-100 border border-green-300 text-green-700 px-4 py-3">
{{ session('success') }}
</div> @endif
<!-- Error --> @if(session('error')) <div class="mt-6 rounded-xl bg-red-100 border border-red-300 text-red-700 px-4 py-3">
{{ session('error') }}
</div> @endif
<!-- Validation --> @if($errors->any()) <div class="mt-6 rounded-xl border border-red-300 bg-red-50 p-4">
<ul class="list-disc pl-5 text-red-600 text-sm"> @foreach($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul>
</div> @endif <form action="{{ route('send-registration-otp') }}" method="POST" enctype="multipart/form-data" class="mt-8 space-y-6"> @csrf <div class="grid md:grid-cols-2 gap-6">
<!-- Name -->
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2"> Full Name </label>
<input type="text" name="name" value="{{ old('name') }}" placeholder="Enter your full name" class="w-full rounded-xl border border-gray-300 px-4 py-3 focus:ring-4 focus:ring-blue-200 focus:border-blue-500">
</div>
<!-- Email -->
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2"> Email Address </label>
<input type="email" name="email" value="{{ old('email') }}" placeholder="example@email.com" class="w-full rounded-xl border border-gray-300 px-4 py-3 focus:ring-4 focus:ring-blue-200 focus:border-blue-500">
</div>
<!-- Guardian -->
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2"> Guardian Name </label>
<input type="text" name="guardian_name" value="{{ old('guardian_name') }}" placeholder="Guardian Name" class="w-full rounded-xl border border-gray-300 px-4 py-3 focus:ring-4 focus:ring-blue-200 focus:border-blue-500">
</div>
<!-- Phone -->
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2"> Phone Number </label>
<input type="text" name="phone" value="{{ old('phone') }}" placeholder="9876543210" pattern="[6-9]{1}[0-9]{9}" class="w-full rounded-xl border border-gray-300 px-4 py-3 focus:ring-4 focus:ring-blue-200 focus:border-blue-500">
</div>
<!-- DOB -->
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2"> Date of Birth </label>
<input type="date" name="date_of_birth" value="{{ old('date_of_birth') }}" class="w-full rounded-xl border border-gray-300 px-4 py-3 focus:ring-4 focus:ring-blue-200 focus:border-blue-500">
</div>
<!-- Gender -->
<div>
<label class="block text-sm font-semibold text-gray-700 mb-3"> Gender </label>
<div class="flex gap-6">
<label class="flex items-center gap-2 cursor-pointer">
<input type="radio" name="gender" value="male" {{ old('gender')=='male' ? 'checked' : '' }} class="w-5 h-5 text-blue-600">
<span>Male</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input type="radio" name="gender" value="female" {{ old('gender')=='female' ? 'checked' : '' }} class="w-5 h-5 text-blue-600">
<span>Female</span>
</label>
</div>
</div>
</div>
<!-- Blood Group -->
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2"> Blood Group </label>
<select name="blood_group" class="w-full rounded-xl border border-gray-300 px-4 py-3 focus:ring-4 focus:ring-blue-200 focus:border-blue-500">
<option value="">Select Blood Group</option>
<option value="A+" {{ old('blood_group')=="A+" ? 'selected' : '' }}>A+</option>
<option value="A-" {{ old('blood_group')=="A-" ? 'selected' : '' }}>A-</option>
<option value="B+" {{ old('blood_group')=="B+" ? 'selected' : '' }}>B+</option>
<option value="B-" {{ old('blood_group')=="B-" ? 'selected' : '' }}>B-</option>
<option value="AB+" {{ old('blood_group')=="AB+" ? 'selected' : '' }}>AB+</option>
<option value="AB-" {{ old('blood_group')=="AB-" ? 'selected' : '' }}>AB-</option>
<option value="O+" {{ old('blood_group')=="O+" ? 'selected' : '' }}>O+</option>
<option value="O-" {{ old('blood_group')=="O-" ? 'selected' : '' }}>O-</option>
</select>
</div>
<!-- Extra Curricular -->
<div>
<label class="block text-sm font-semibold text-gray-700 mb-3"> Extra Curricular Activities </label>
<div class="grid grid-cols-2 gap-3">
<label class="flex items-center gap-2 rounded-xl border p-3 cursor-pointer hover:bg-blue-50">
<input type="checkbox" name="extra_curricular[]" value="Sports" {{ is_array(old('extra_curricular')) && in_array('Sports', old('extra_curricular')) ? 'checked' : '' }} class="w-5 h-5"> Sports </label>
<label class="flex items-center gap-2 rounded-xl border p-3 cursor-pointer hover:bg-blue-50">
<input type="checkbox" name="extra_curricular[]" value="Music" {{ is_array(old('extra_curricular')) && in_array('Music', old('extra_curricular')) ? 'checked' : '' }} class="w-5 h-5"> Music </label>
<label class="flex items-center gap-2 rounded-xl border p-3 cursor-pointer hover:bg-blue-50">
<input type="checkbox" name="extra_curricular[]" value="Art" {{ is_array(old('extra_curricular')) && in_array('Art', old('extra_curricular')) ? 'checked' : '' }} class="w-5 h-5">Art </label>
<label class="flex items-center gap-2 rounded-xl border p-3 cursor-pointer hover:bg-blue-50">
<input type="checkbox" name="extra_curricular[]" value="Dance" {{ is_array(old('extra_curricular')) && in_array('Dance', old('extra_curricular')) ? 'checked' : '' }} class="w-5 h-5"> Dance </label>
</div>
</div>
<!-- Address -->
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2"> Address </label>
<textarea rows="4" name="address" placeholder="Enter your address" class="w-full rounded-xl border border-gray-300 px-4 py-3 focus:ring-4 focus:ring-blue-200 focus:border-blue-500">{{ old('address') }}</textarea>
</div>
<!-- Password -->
<div class="mt-6">
<label class="block text-sm font-semibold text-gray-700 mb-2"> Password </label>
<div class="relative">
<input type="password" id="password" name="password" placeholder="Create Password" class="w-full rounded-xl border border-gray-300 px-4 py-3 pr-14 focus:ring-4 focus:ring-blue-200">
<button type="button" onclick="togglePassword()" class="absolute right-4 top-3 text-gray-500">👁</button>
</div>
<div class="mt-3 h-2 bg-gray-200 rounded-full overflow-hidden">
<div id="strengthBar" class="h-full w-0 bg-red-500 transition-all duration-300"></div>
</div>
<p id="strengthText" class="mt-2 text-sm text-gray-600"></p>
</div>
<!-- Upload -->
<div class="mt-6">
<label class="block text-sm font-semibold text-gray-700 mb-3">Upload Profile Photo </label>
<div id="dropZone" class="border-2 border-dashed border-blue-300 rounded-2xl p-8 text-center cursor-pointer hover:bg-blue-50 transition">
<input id="file" type="file" name="image" accept="image/*" class="hidden">
<img id="preview" class="mx-auto w-36 h-36 rounded-full object-cover hidden shadow-lg mb-4">
<p class="text-gray-500"> Click here or drag & drop your image </p>
</div>
</div>
<!-- Declaration -->
<div class="mt-6">
<label class="flex items-start gap-3 cursor-pointer">
<input type="checkbox" name="declaration" value="1" {{ old('declaration') ? 'checked' : '' }} class="mt-1 w-5 h-5">
<span class="text-gray-600"> I hereby declare that all the information provided is true and correct. </span>
</label>
</div>
<!-- Submit -->
<div class="mt-8">
<button id="submitBtn" type="submit" class="w-full rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 text-white py-4 font-bold text-lg hover:scale-[1.02] transition duration-300 shadow-xl"> Register Student </button>
</div>
<div class="md:col-span-2 text-center"> Already have an account? <a href="{{ url('/login') }}" class="text-indigo-600 font-semibold hover:underline"> Login Here </a>
</div>
</form>
</div>
</div>
</div>
<script>
function togglePassword() {
let p = document.getElementById('password');
p.type = (p.type === 'password') ? 'text' : 'password';
}
const password = document.getElementById('password');
const bar = document.getElementById('strengthBar');
const text = document.getElementById('strengthText');
password.addEventListener('keyup', function() {
let v = this.value;
let score = 0;
if (v.length >= 8) score++;
if (/[A-Z]/.test(v)) score++;
if (/[0-9]/.test(v)) score++;
if (/[^A-Za-z0-9]/.test(v)) score++;
if (score == 1) {
bar.style.width = '25%';
bar.className = 'h-full bg-red-500';
text.innerHTML = 'Weak Password';
} else if (score == 2) {
bar.style.width = '50%';
bar.className = 'h-full bg-yellow-500';
text.innerHTML = 'Medium Password';
} else if (score == 3) {
bar.style.width = '75%';
bar.className = 'h-full bg-blue-500';
text.innerHTML = 'Good Password';
} else if (score == 4) {
bar.style.width = '100%';
bar.className = 'h-full bg-green-500';
text.innerHTML = 'Strong Password';
}
});
const dropZone = document.getElementById('dropZone');
const file = document.getElementById('file');
const preview = document.getElementById('preview');
dropZone.onclick = () => file.click();
file.onchange = function() {
let reader = new FileReader();
reader.onload = function(e) {
preview.src = e.target.result;
preview.classList.remove('hidden');
}
reader.readAsDataURL(file.files[0]);
};
</script>
</body>
</html>
Login
<!DOCTYPE html>
<html>
<head>
<title>Student Login</title>
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
</head>
<body class="bg-gradient-to-r from-blue-700 via-indigo-700 to-purple-700 min-h-screen flex justify-center items-center">
<div class="bg-white rounded-3xl shadow-2xl w-full max-w-md p-8">
<h2 class="text-3xl font-bold text-center mb-8"> Student Login </h2> @if(session('success')) <div class="bg-green-100 text-green-700 p-3 rounded-lg mb-5">
{{ session('success') }}
</div> @endif @if(session('error')) <div class="bg-red-100 text-red-700 p-3 rounded-lg mb-5">
{{ session('error') }}
</div> @endif <form action="{{ route('login.post') }}" method="POST"> @csrf
<!-- Email -->
<div class="mb-5">
<label class="font-medium"> Email </label>
<input type="email" name="email" value="{{ old('email') }}" class="w-full mt-2 border rounded-xl p-3 focus:ring-2 focus:ring-blue-500 outline-none"> @error('email') <p class="text-red-500 text-sm mt-1">
{{ $message }}
</p> @enderror
</div>
<!-- Password -->
<div class="mb-2">
<label class="font-medium"> Password </label>
<div class="relative mt-2">
<input type="password" id="password" name="password" class="w-full border rounded-xl p-3 pr-12 focus:ring-2 focus:ring-blue-500 outline-none">
<button type="button" onclick="togglePassword()" class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 hover:text-blue-600">
<i id="eyeIcon" class="fa-solid fa-eye"></i>
</button>
</div> @error('password') <p class="text-red-500 text-sm mt-1">
{{ $message }}
</p> @enderror
</div>
<!-- Forgot Password -->
<div class="text-right mb-6">
<a href="{{ route('forgot-password') }}" class="text-sm text-blue-600 hover:text-blue-800 hover:underline"> Forgot Password? </a>
</div>
<!-- Login Button -->
<button type="submit" class="w-full bg-blue-600 text-white rounded-xl py-3 hover:bg-blue-700 transition"> Login </button>
<!-- Register -->
<div class="text-center mt-6">
<span class="text-gray-600"> Don't have an account? </span>
<a href="{{ route('register') }}" class="text-blue-600 font-semibold hover:underline"> Register Here </a>
</div>
</form>
</div>
<script>
function togglePassword() {
let password = document.getElementById('password');
let eyeIcon = document.getElementById('eyeIcon');
if (password.type === "password") {
password.type = "text";
eyeIcon.classList.remove("fa-eye");
eyeIcon.classList.add("fa-eye-slash");
} else {
password.type = "password";
eyeIcon.classList.remove("fa-eye-slash");
eyeIcon.classList.add("fa-eye");
}
}
</script>
</body>
</html>
forgot-password
<!DOCTYPE html>
<html>
<head>
<title>Forgot Password</title>
<script src="https://cdn.tailwindcss.com"></script>
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body class="bg-gradient-to-r from-blue-700 via-indigo-700 to-purple-700 min-h-screen flex justify-center items-center">
<div class="bg-white rounded-3xl shadow-2xl w-full max-w-md p-8">
<h2 class="text-3xl font-bold text-center mb-8"> Forgot Password </h2> @if(session('error')) <div class="bg-red-100 text-red-700 p-3 rounded-lg mb-4">
{{ session('error') }}
</div> @endif @if(session('success')) <div class="bg-green-100 text-green-700 p-3 rounded-lg mb-4">
{{ session('success') }}
</div> @endif
<!-- EMAIL -->
<div>
<label class="font-semibold">Registered Email</label>
<input type="email" id="email" class="w-full border rounded-xl p-3 mt-2">
</div>
<button id="sendOtpBtn" class="w-full bg-blue-600 text-white rounded-xl py-3 mt-5"> Send OTP </button>
<!-- OTP -->
<div id="otpSection" class="hidden">
<h3 class="text-center font-bold mt-8 mb-4"> Enter OTP </h3>
<div class="flex justify-between">
<input maxlength="1" class="otp w-12 h-12 border text-center text-xl rounded-lg">
<input maxlength="1" class="otp w-12 h-12 border text-center text-xl rounded-lg">
<input maxlength="1" class="otp w-12 h-12 border text-center text-xl rounded-lg">
<input maxlength="1" class="otp w-12 h-12 border text-center text-xl rounded-lg">
<input maxlength="1" class="otp w-12 h-12 border text-center text-xl rounded-lg">
<input maxlength="1" class="otp w-12 h-12 border text-center text-xl rounded-lg">
</div>
<button id="verifyBtn" class="w-full bg-green-600 text-white rounded-xl py-3 mt-6"> Verify OTP </button>
</div>
<!-- PASSWORD -->
<form id="passwordForm" class="hidden mt-8" method="POST" action="{{ route('forgot-password.reset-password') }}"> @csrf <input type="hidden" name="email" id="hiddenEmail">
<div>
<label>New Password</label>
<input type="password" name="password" class="w-full border rounded-xl p-3 mt-2">
</div>
<div class="mt-4">
<label>Confirm Password</label>
<input type="password" name="password_confirmation" class="w-full border rounded-xl p-3 mt-2">
</div>
<button class="w-full bg-purple-600 text-white rounded-xl py-3 mt-6"> Change Password </button>
</form>
</div>
<script>
const csrf = document.querySelector('meta[name="csrf-token"]').content;
document.getElementById('sendOtpBtn').onclick = function() {
fetch("{{ route('forgot-password.send-otp') }}", {
method: "POST",
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': csrf
},
body: JSON.stringify({
email: document.getElementById('email').value
})
}).then(r => r.json()).then(data => {
alert(data.message);
if (data.status) {
document.getElementById('otpSection').classList.remove('hidden');
}
});
};
document.querySelectorAll(".otp").forEach((input, index) => {
input.addEventListener("input", () => {
if (input.value && index < 5) {
document.querySelectorAll(".otp")[index + 1].focus();
}
});
});
document.getElementById("verifyBtn").onclick = function() {
let otp = "";
document.querySelectorAll(".otp").forEach(i => {
otp += i.value;
});
fetch("{{ route('forgot-password.verify-otp') }}", {
method: "POST",
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': csrf
},
body: JSON.stringify({
email: document.getElementById('email').value,
otp: otp
})
}).then(r => r.json()).then(data => {
alert(data.message);
if (data.status) {
document.getElementById("hiddenEmail").value = document.getElementById("email").value;
document.getElementById("passwordForm").classList.remove("hidden");
}
});
};
</script>
</body>
</html>
register-otp
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Email Verification</title>
</head>
<body style="margin:0;padding:30px;background:#f5f5f5;font-family:Arial">
<table width="100%">
<tr>
<td align="center">
<table width="600" style="background:white;border-radius:10px;padding:40px">
<tr>
<td align="center">
<h1 style="color:#2563eb"> Student Management System </h1>
<h2>Email Verification</h2>
<p> Thank you for registering. </p>
<p> Use the OTP below to verify your email. </p>
<div style="margin:40px 0">
<span style="font-size:40px; font-weight:bold; letter-spacing:10px; color:#2563eb">
{{ $otp }}
</span>
</div>
<p> This OTP is valid for <strong>10 minutes</strong>
</p>
<p> Do not share this OTP with anyone. </p>
<hr>
<p style="color:gray;font-size:13px"> © {{ date('Y') }} Student Management System </p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
verify-email
<!DOCTYPE html>
<html>
<head>
<title>Email Verification</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gradient-to-r from-blue-700 via-indigo-700 to-purple-700 min-h-screen flex justify-center items-center">
<div class="bg-white rounded-3xl shadow-2xl p-8 w-full max-w-md">
<h2 class="text-3xl font-bold text-center"> Verify Email </h2>
<p class="text-center text-gray-500 mt-2"> Enter the 6-digit OTP sent to your email. </p> @if(session('success')) <div class="bg-green-100 text-green-700 p-3 rounded-lg mt-5">
{{ session('success') }}
</div> @endif @if(session('error')) <div class="bg-red-100 text-red-700 p-3 rounded-lg mt-5">
{{ session('error') }}
</div> @endif @if($errors->any()) <div class="bg-red-100 text-red-700 p-3 rounded-lg mt-5"> @foreach($errors->all() as $error) <div>{{ $error }}</div> @endforeach </div> @endif <form action="{{ route('verify-registration-otp') }}" method="POST" id="otpForm"> @csrf <div class="flex justify-between mt-8">
<input type="text" maxlength="1" class="otp w-12 h-12 border rounded-lg text-center text-2xl">
<input type="text" maxlength="1" class="otp w-12 h-12 border rounded-lg text-center text-2xl">
<input type="text" maxlength="1" class="otp w-12 h-12 border rounded-lg text-center text-2xl">
<input type="text" maxlength="1" class="otp w-12 h-12 border rounded-lg text-center text-2xl">
<input type="text" maxlength="1" class="otp w-12 h-12 border rounded-lg text-center text-2xl">
<input type="text" maxlength="1" class="otp w-12 h-12 border rounded-lg text-center text-2xl">
</div>
<input type="hidden" name="otp" id="otp">
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white rounded-xl py-3 mt-8"> Verify OTP </button>
</form>
<form action="{{ route('resend-registration-otp') }}" method="POST" class="text-center mt-5"> @csrf <button type="submit" id="resendBtn" disabled class="text-blue-600"> Resend OTP ( <span id="timer">60</span>s) </button>
</form>
</div>
<script>
const inputs = document.querySelectorAll('.otp');
inputs.forEach((input, index) => {
input.addEventListener('input', function() {
this.value = this.value.replace(/[^0-9]/g, '');
if (this.value && index < 5) {
inputs[index + 1].focus();
}
updateOTP();
});
input.addEventListener('keydown', function(e) {
if (e.key === 'Backspace' && this.value === '' && index > 0) {
inputs[index - 1].focus();
}
});
});
function updateOTP() {
let otp = '';
inputs.forEach(input => {
otp += input.value;
});
document.getElementById('otp').value = otp;
}
document.getElementById('otpForm').addEventListener('submit', function() {
updateOTP();
});
let sec = 60;
const resendBtn = document.getElementById('resendBtn');
const timer = document.getElementById('timer');
let interval = setInterval(function() {
sec--;
timer.innerHTML = sec;
if (sec <= 0) {
clearInterval(interval);
resendBtn.disabled = false;
resendBtn.innerHTML = 'Resend OTP';
}
}, 1000);
</script>
</body>
</html>
OTP
<h2>Your OTP is:</h2>
<h1 style="font-size:40px;color:#2563eb;">
{{ $otp }}
</h1>
<p>This OTP is valid for 10 minutes.</p>
admin.dashboard
@extends('admin.layout') @section('title', 'Dashboard') @section('page-title', 'Dashboard') @section('content')
<!-- Statistics Cards -->
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-6">
<!-- Total Students -->
<div class="bg-white rounded-2xl shadow-lg p-6 hover:shadow-2xl transition">
<div class="flex justify-between items-center">
<div>
<p class="text-gray-500"> Total Students </p>
<h2 class="text-4xl font-bold mt-2">
{{ $totalStudents ?? 0 }}
</h2>
</div>
<div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center text-3xl"> 👨🎓 </div>
</div>
</div>
<!-- Accepted -->
<div class="bg-white rounded-2xl shadow-lg p-6 hover:shadow-2xl transition">
<div class="flex justify-between items-center">
<div>
<p class="text-gray-500"> Accepted Students </p>
<h2 class="text-4xl font-bold text-green-600 mt-2">
{{ $acceptedStudents ?? 0 }}
</h2>
</div>
<div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center text-3xl"> ✅ </div>
</div>
</div>
<!-- Pending -->
<div class="bg-white rounded-2xl shadow-lg p-6 hover:shadow-2xl transition">
<div class="flex justify-between items-center">
<div>
<p class="text-gray-500"> Pending Students </p>
<h2 class="text-4xl font-bold text-yellow-600 mt-2">
{{ $pendingStudents ?? 0 }}
</h2>
</div>
<div class="w-16 h-16 rounded-full bg-yellow-100 flex items-center justify-center text-3xl"> ⏳ </div>
</div>
</div>
<!-- Rejected -->
<div class="bg-white rounded-2xl shadow-lg p-6 hover:shadow-2xl transition">
<div class="flex justify-between items-center">
<div>
<p class="text-gray-500"> Rejected Students </p>
<h2 class="text-4xl font-bold text-red-600 mt-2">
{{ $rejectedStudents ?? 0 }}
</h2>
</div>
<div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center text-3xl"> ❌ </div>
</div>
</div>
<!-- Male -->
<div class="bg-white rounded-2xl shadow-lg p-6 hover:shadow-2xl transition">
<div class="flex justify-between items-center">
<div>
<p class="text-gray-500"> Male Students </p>
<h2 class="text-4xl font-bold text-blue-600 mt-2">
{{ $maleStudents ?? 0 }}
</h2>
</div>
<div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center text-3xl"> 👦 </div>
</div>
</div>
<!-- Female -->
<div class="bg-white rounded-2xl shadow-lg p-6 hover:shadow-2xl transition">
<div class="flex justify-between items-center">
<div>
<p class="text-gray-500"> Female Students </p>
<h2 class="text-4xl font-bold text-pink-600 mt-2">
{{ $femaleStudents ?? 0 }}
</h2>
</div>
<div class="w-16 h-16 rounded-full bg-pink-100 flex items-center justify-center text-3xl"> 👧 </div>
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="mt-8 grid md:grid-cols-3 gap-6">
<a href="{{ route('students') }}" class="bg-green-600 text-white rounded-2xl p-6 shadow-lg hover:bg-green-700 transition">
<h3 class="text-xl font-bold"> 👨🎓 Student List </h3>
<p class="mt-2 text-green-100"> View all registered students. </p>
</a>
{{-- <a href="{{ route('admin.profile') }}" class="bg-purple-600 text-white rounded-2xl p-6 shadow-lg hover:bg-purple-700 transition"> <h3 class="text-xl font-bold"> 👤 My Profile </h3>
<p class="mt-2 text-purple-100"> Manage your profile. </p>
</a> --}}
</div>
<!-- Recent Students -->
<div class="mt-10 bg-white rounded-2xl shadow-lg">
<div class="border-b px-6 py-4">
<h3 class="text-xl font-bold"> Recent Students </h3>
</div>
<div class="overflow-x-auto">
<table class="w-full">
<thead class="bg-gray-100">
<tr>
<th class="p-4 text-left"> Image </th>
<th class="p-4 text-left"> Name </th>
<th class="p-4 text-left"> Email </th>
<th class="p-4 text-left"> Status </th>
<th class="p-4 text-center"> Action </th>
</tr>
</thead>
<tbody> @forelse($recentStudents ?? [] as $student) <tr class="border-b hover:bg-gray-50">
<td class="p-4"> @if($student->detail && $student->detail->image) <img src="{{ asset('storage/images/'.$student->detail->image) }}" class="w-12 h-12 rounded-full object-cover"> @else <img src="https://via.placeholder.com/50" class="w-12 h-12 rounded-full"> @endif </td>
<td class="p-4">
{{ $student->name }}
</td>
<td class="p-4">
{{ $student->email }}
</td>
<td class="p-4"> @if($student->status=="Accepted") <span class="bg-green-100 text-green-700 px-3 py-1 rounded-full"> Accepted </span> @elseif($student->status=="Pending") <span class="bg-yellow-100 text-yellow-700 px-3 py-1 rounded-full"> Pending </span> @else <span class="bg-red-100 text-red-700 px-3 py-1 rounded-full"> Rejected </span> @endif </td>
<td class="p-4 text-center">
<a href="{{ route('view-student',$student->id) }}" class="bg-blue-500 text-white px-3 py-2 rounded-lg">
<i class="fas fa-eye"></i>
</a>
</td>
</tr> @empty <tr>
<td colspan="5" class="text-center p-8 text-gray-500"> No students found. </td>
</tr> @endforelse </tbody>
</table>
</div>
</div> @endsection
admin.layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<title>@yield('title','Admin Dashboard')</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background: #3b82f6;
border-radius: 20px;
}
.active-menu {
background: #2563eb;
color: white;
}
</style>
</head>
<body class="bg-gray-100">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<aside id="sidebar" class="fixed lg:relative z-50
w-72 h-full
bg-slate-900
text-white
transform
-translate-x-full
lg:translate-x-0
transition-transform duration-300">
<!-- Logo -->
<div class="h-20 flex items-center justify-center border-b border-slate-700">
<h1 class="text-2xl font-bold"> Student Panel </h1>
</div>
<!-- Menu -->
<nav class="mt-6"> @if(auth()->user()->role == 'Admin') <a href="{{ route('dashboard') }}" class="flex items-center px-6 py-4 hover:bg-blue-600 transition
{{ request()->routeIs('dashboard') ? 'active-menu' : '' }}"> 📊 <span class="ml-4"> Dashboard </span>
</a>
<a href="{{ route('students') }}" class="flex items-center px-6 py-4 hover:bg-blue-600 transition
{{ request()->routeIs('students') ? 'active-menu' : '' }}"> 👨🎓 <span class="ml-4"> Students </span>
</a>
<a href="{{ route('pending-students') }}" class="flex items-center px-6 py-4 hover:bg-blue-600 transition
{{ request()->routeIs('pending-students') ? 'active-menu' : '' }}"> 👤 <span class="ml-4"> Pending Students </span>
</a>
{{-- <a href="{{ route('admin.profile') }}" class="flex items-center px-6 py-4 hover:bg-blue-600 transition {{ request()->routeIs('admin.profile') ? 'active-menu' : '' }}"> 👤 <span class="ml-4"> My Profile </span>
</a> --}} @endif
</nav>
</aside>
<!-- Content -->
<div class="flex-1 flex flex-col overflow-hidden">
<!-- Navbar -->
<header class="bg-white shadow h-20 flex items-center justify-between px-6">
<div class="flex items-center">
<!-- Mobile Button -->
<button onclick="toggleSidebar()" class="lg:hidden text-3xl"> ☰ </button>
<h2 class="ml-4 text-2xl font-bold"> @yield('page-title') </h2>
</div>
<!-- User -->
<div class="flex items-center gap-5">
<div class="text-right">
<p class="font-semibold">
{{ Auth::user()->name }}
</p>
<small class="text-gray-500">
{{ Auth::user()->role }}
</small>
</div>
<img src="https://ui-avatars.com/api/?name={{ urlencode(Auth::user()->name) }}" class="w-12 h-12 rounded-full">
<form method="POST" action="{{ route('logout') }}"> @csrf <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600"> Logout </button>
</form>
</div>
</header>
<!-- Main -->
<main class="flex-1 overflow-y-auto p-8"> @if(session('success')) <div class="mb-5 rounded-lg bg-green-100 text-green-700 p-4">
{{ session('success') }}
</div> @endif @if(session('error')) <div class="mb-5 rounded-lg bg-red-100 text-red-700 p-4">
{{ session('error') }}
</div> @endif @yield('content') </main>
<!-- Footer -->
<footer class="bg-white shadow py-4 text-center text-gray-500"> © {{ date('Y') }} Student Management System </footer>
</div>
</div>
<script>
function toggleSidebar() {
document.getElementById('sidebar').classList.toggle('-translate-x-full');
}
</script>
</body>
</html>
admin.students
@extends('admin.layout') @section('title', 'Students') @section('page-title', 'Student List') @section('content') @if(session('success')) <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg mb-5">
{{ session('success') }}
</div> @endif <div class="bg-white rounded-xl shadow-lg p-6">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-700"> All Students </h2>
</div>
<div class="overflow-x-auto">
<table class="min-w-full border border-gray-200">
<thead class="bg-gray-100">
<tr>
<th class="px-4 py-3 text-left">Photo</th>
<th class="px-4 py-3 text-left">Name</th>
<th class="px-4 py-3 text-left">Email</th>
<th class="px-4 py-3 text-left">Guardian</th>
<th class="px-4 py-3 text-left">Phone</th>
<th class="px-4 py-3 text-left">Gender</th>
<th class="px-4 py-3 text-left">Status</th>
<th class="px-4 py-3 text-center">Actions</th>
</tr>
</thead>
<tbody> @forelse($students as $student) <tr class="border-b hover:bg-gray-50">
<!-- Photo -->
<td class="px-4 py-3"> @if($student->detail && $student->detail->image) <img src="{{ asset('storage/images/'.$student->detail->image) }}" alt="Student Image" class="w-14 h-14 rounded-full object-cover border"> @else <img src="https://via.placeholder.com/60" class="w-14 h-14 rounded-full"> @endif </td>
<!-- Name -->
<td class="px-4 py-3 font-semibold">
{{ $student->name }}
</td>
<!-- Email -->
<td class="px-4 py-3">
{{ $student->email }}
</td>
<!-- Guardian -->
<td class="px-4 py-3">
{{ $student->detail->guardian_name ?? '-' }}
</td>
<!-- Phone -->
<td class="px-4 py-3">
{{ $student->detail->phone ?? '-' }}
</td>
<!-- Gender -->
<td class="px-4 py-3 capitalize">
{{ $student->detail->gender ?? '-' }}
</td>
<!-- Status -->
<td class="px-4 py-3"> @if($student->status == 'Accepted') <span class="bg-green-100 text-green-700 px-3 py-1 rounded-full text-sm"> Accepted </span> @elseif($student->status == 'Pending') <span class="bg-yellow-100 text-yellow-700 px-3 py-1 rounded-full text-sm"> Pending </span> @else <span class="bg-red-100 text-red-700 px-3 py-1 rounded-full text-sm"> Rejected </span> @endif </td>
<!-- Actions -->
<td class="px-4 py-3">
<div class="flex justify-center gap-2">
<!-- View -->
<a href="{{ url('view-student/'.$student->id) }}" class="bg-blue-500 hover:bg-blue-600 text-white w-10 h-10 rounded-lg flex items-center justify-center transition" title="View">
<i class="fas fa-eye"></i>
</a>
<!-- Edit -->
<a href="{{ url('edit-student/'.$student->id) }}" class="bg-green-500 hover:bg-green-600 text-white w-10 h-10 rounded-lg flex items-center justify-center transition" title="Edit">
<i class="fas fa-pen"></i>
</a>
<!-- Delete -->
<form action="{{ url('delete-student/'.$student->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this student?')"> @csrf @method('DELETE') <button type="submit" class="bg-red-500 hover:bg-red-600 text-white w-10 h-10 rounded-lg flex items-center justify-center transition" title="Delete">
<i class="fas fa-trash"></i>
</button>
</form>
</div>
</td>
</tr> @empty <tr>
<td colspan="8" class="text-center py-8 text-gray-500"> No Students Found. </td>
</tr> @endforelse </tbody>
</table>
</div>
<div class="mt-6">
{{ $students->links() }}
</div>
</div> @endsection
admin.edit-student
@extends('admin.layout') @section('title','Edit Student') @section('page-title','Edit Student') @section('content') <div class="bg-white rounded-2xl shadow-lg p-6">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-700"> Edit Student </h2>
<a href="{{ route('students') }}" class="bg-gray-600 hover:bg-gray-700 text-white px-5 py-2 rounded-lg">
<i class="fas fa-arrow-left"></i> Back </a>
</div> @if($errors->any()) <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg mb-5">
<ul> @foreach($errors->all() as $error) <li>
{{ $error }}
</li> @endforeach </ul>
</div> @endif <form action="{{ route('update-student',$student->id) }}" method="POST" enctype="multipart/form-data"> @csrf @method('PUT') <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Name -->
<div>
<label class="block font-semibold mb-2"> Student Name </label>
<input type="text" name="name" value="{{ old('name',$student->name) }}" class="w-full border rounded-lg px-4 py-2 focus:ring focus:ring-blue-200">
</div>
<!-- Email -->
<div>
<label class="block font-semibold mb-2"> Email </label>
<input type="email" name="email" value="{{ old('email',$student->email) }}" class="w-full border rounded-lg px-4 py-2">
</div>
<!-- Guardian -->
<div>
<label class="block font-semibold mb-2"> Guardian Name </label>
<input type="text" name="guardian_name" value="{{ old('guardian_name',$student->detail->guardian_name ?? '') }}" class="w-full border rounded-lg px-4 py-2">
</div>
<!-- Phone -->
<div>
<label class="block font-semibold mb-2"> Phone Number </label>
<input type="text" name="phone" value="{{ old('phone',$student->detail->phone ?? '') }}" class="w-full border rounded-lg px-4 py-2">
</div>
<!-- DOB -->
<div>
<label class="block font-semibold mb-2"> Date of Birth </label>
<input type="date" name="date_of_birth" value="{{ old('date_of_birth',$student->detail->date_of_birth ?? '') }}" class="w-full border rounded-lg px-4 py-2">
</div>
<!-- Gender -->
<div>
<label class="block font-semibold mb-2"> Gender </label> @php $gender = strtolower(old('gender', $student->detail->gender ?? '')); @endphp <select name="gender" class="w-full border rounded-lg px-4 py-2">
<option value=""> Select Gender </option>
<option value="male" {{ $gender == 'male' ? 'selected' : '' }}> Male </option>
<option value="female" {{ $gender == 'female' ? 'selected' : '' }}> Female </option>
</select>
</div>
<!-- Blood Group -->
<div>
<label class="block font-semibold mb-2"> Blood Group </label>
<select name="blood_group" class="w-full border rounded-lg px-4 py-2">
<option value=""> Select Blood Group </option> @foreach(['A+','A-','B+','B-','O+','O-','AB+','AB-'] as $group) <option value="{{ $group }}" {{ ($student->detail->blood_group ?? '') == $group ? 'selected':'' }}>
{{ $group }}
</option> @endforeach
</select>
</div>
<!-- Image -->
<div>
<label class="block font-semibold mb-2"> Profile Image </label>
<input type="file" name="image" class="w-full border rounded-lg px-4 py-2"> @if($student->detail && $student->detail->image) <img src="{{ asset('storage/images/'.$student->detail->image) }}" class="mt-3 w-24 h-24 rounded-full object-cover"> @endif
</div>
<!-- Password -->
<div>
<label class="block font-semibold mb-2"> Password <span class="text-gray-400"> (Optional) </span>
</label>
<input type="password" name="password" class="w-full border rounded-lg px-4 py-2">
</div>
</div>
<!-- Activities -->
<div class="mt-6">
<label class="block font-semibold mb-3"> Extra Curricular Activities </label> @php $activities = $student->detail->extra_curricular ?? []; if(is_string($activities)){ $activities=json_decode($activities,true); } @endphp <div class="grid grid-cols-2 md:grid-cols-5 gap-4"> @foreach(['Sports','Music','Dance','Drawing','Yoga'] as $activity) <label class="flex items-center gap-2">
<input type="checkbox" name="extra_curricular[]" value="{{ $activity }}" {{ in_array($activity,$activities ?? []) ? 'checked':'' }}>
<span>
{{ $activity }}
</span>
</label> @endforeach </div>
</div>
<!-- Address -->
<div class="mt-6">
<label class="block font-semibold mb-2"> Address </label>
<textarea name="address" rows="4" class="w-full border rounded-lg px-4 py-2">{{ old('address',$student->detail->address ?? '') }}</textarea>
</div>
<!-- Buttons -->
<div class="mt-8 flex gap-4">
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg">
<i class="fas fa-save"></i> Update Student </button>
<a href="{{ route('students') }}" class="bg-gray-500 hover:bg-gray-600 text-white px-6 py-3 rounded-lg"> Cancel </a>
</div>
</form>
</div> @endsection
admin.view-student
@extends('admin.layout') @section('title','View Student') @section('page-title','Student Details') @section('content') <div class="bg-white rounded-2xl shadow-lg p-6">
<!-- Header -->
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-700"> Student Profile </h2>
<a href="{{ route('students') }}" class="bg-gray-600 hover:bg-gray-700 text-white px-5 py-2 rounded-lg">
<i class="fas fa-arrow-left"></i> Back </a>
</div>
<!-- Profile Section -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Photo Card -->
<div class="bg-gray-50 rounded-xl p-6 text-center"> @if($student->detail && $student->detail->image) <img src="{{ asset('storage/images/'.$student->detail->image) }}" class="w-40 h-40 mx-auto rounded-full object-cover border-4 border-white shadow"> @else <img src="https://via.placeholder.com/150" class="w-40 h-40 mx-auto rounded-full"> @endif <h3 class="text-xl font-bold mt-4">
{{ $student->name }}
</h3>
<p class="text-gray-500">
{{ $student->email }}
</p>
<div class="mt-4"> @if($student->status=="Accepted") <span class="bg-green-100 text-green-700 px-4 py-2 rounded-full"> Accepted </span> @elseif($student->status=="Pending") <span class="bg-yellow-100 text-yellow-700 px-4 py-2 rounded-full"> Pending </span> @else <span class="bg-red-100 text-red-700 px-4 py-2 rounded-full"> Rejected </span> @endif </div>
</div>
<!-- Student Information -->
<div class="md:col-span-2">
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
<div>
<p class="text-gray-500 text-sm"> Student Name </p>
<h4 class="font-semibold">
{{ $student->name }}
</h4>
</div>
<div>
<p class="text-gray-500 text-sm"> Email </p>
<h4 class="font-semibold">
{{ $student->email }}
</h4>
</div>
<div>
<p class="text-gray-500 text-sm"> Guardian Name </p>
<h4 class="font-semibold">
{{ $student->detail->guardian_name ?? '-' }}
</h4>
</div>
<div>
<p class="text-gray-500 text-sm"> Phone Number </p>
<h4 class="font-semibold">
{{ $student->detail->phone ?? '-' }}
</h4>
</div>
<div>
<p class="text-gray-500 text-sm"> Date of Birth </p>
<h4 class="font-semibold">
{{ $student->detail->date_of_birth ?? '-' }}
</h4>
</div>
<div>
<p class="text-gray-500 text-sm"> Gender </p>
<h4 class="font-semibold capitalize">
{{ $student->detail->gender ?? '-' }}
</h4>
</div>
<div>
<p class="text-gray-500 text-sm"> Blood Group </p>
<h4 class="font-semibold">
{{ $student->detail->blood_group ?? '-' }}
</h4>
</div>
<div>
<p class="text-gray-500 text-sm"> Role </p>
<h4 class="font-semibold">
{{ $student->role }}
</h4>
</div>
</div>
</div>
</div>
<!-- Extra Details -->
<div class="mt-8 border-t pt-6">
<h3 class="text-xl font-bold mb-4"> Additional Information </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
<div>
<p class="text-gray-500 text-sm"> Extra Curricular Activities </p>
<p class="font-semibold"> @php $activities = $student->detail->extra_curricular ?? []; if(is_string($activities)){ $activities = json_decode($activities, true); } @endphp @if(!empty($activities)) {{ implode(', ', $activities) }} @else - @endif </p>
</div>
<div>
<p class="text-gray-500 text-sm"> Address </p>
<p class="font-semibold">
{{ $student->detail->address ?? '-' }}
</p>
</div>
</div>
</div>
<!-- Action Buttons -->
<div class="mt-8 flex gap-3">
<a href="{{ route('edit-student',$student->id) }}" class="bg-green-600 hover:bg-green-700 text-white px-5 py-2 rounded-lg">
<i class="fas fa-edit"></i> Edit Student </a>
<form action="{{ route('delete-student',$student->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this student?')"> @csrf @method('DELETE') <button type="submit" class="bg-red-600 hover:bg-red-700 text-white px-5 py-2 rounded-lg">
<i class="fas fa-trash"></i> Delete </button>
</form>
</div>
</div> @endsection
admin.pending-student
@extends('admin.layout') @section('title','Pending Students') @section('page-title','Pending Student Requests') @section('content') @if(session('success')) <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg mb-5">
{{ session('success') }}
</div> @endif <div class="bg-white rounded-2xl shadow-lg p-6">
<h2 class="text-2xl font-bold mb-6"> Pending Requests </h2>
<div class="overflow-x-auto">
<table class="w-full">
<thead class="bg-gray-100">
<tr>
<th class="p-4 text-left"> Photo </th>
<th class="p-4 text-left"> Name </th>
<th class="p-4 text-left"> Email </th>
<th class="p-4 text-left"> Guardian </th>
<th class="p-4 text-left"> Phone </th>
<th class="p-4 text-center"> Action </th>
</tr>
</thead>
<tbody> @forelse($students as $student) <tr class="border-b hover:bg-gray-50">
<td class="p-4"> @if($student->detail && $student->detail->image) <img src="{{ asset('storage/images/'.$student->detail->image) }}" class="w-12 h-12 rounded-full object-cover"> @else <img src="https://via.placeholder.com/50" class="w-12 h-12 rounded-full"> @endif </td>
<td class="p-4 font-semibold">
{{ $student->name }}
</td>
<td class="p-4">
{{ $student->email }}
</td>
<td class="p-4">
{{ $student->detail->guardian_name ?? '-' }}
</td>
<td class="p-4">
{{ $student->detail->phone ?? '-' }}
</td>
<td class="p-4">
<div class="flex justify-center gap-2">
<!-- Accept -->
<form action="{{ route('accept-student',$student->id) }}" method="POST"> @csrf @method('PUT') <button type="submit" onclick="return confirm('Accept this student?')" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg">
<i class="fas fa-check"></i> Accept </button>
</form>
<!-- Reject -->
<form action="{{ route('reject-student',$student->id) }}" method="POST"> @csrf @method('PUT') <button type="submit" onclick="return confirm('Reject this student?')" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg">
<i class="fas fa-times"></i> Reject </button>
</form>
</div>
</td>
</tr> @empty <tr>
<td colspan="6" class="text-center p-8 text-gray-500"> No pending requests found. </td>
</tr> @endforelse </tbody>
</table>
</div>
<div class="mt-5">
{{ $students->links() }}
</div>
</div> @endsection
Student.profile
@extends('student.layout') @section('title','My Profile') @section('page-title','My Profile') @section('content') <div class="bg-white rounded-2xl shadow-lg p-6">
<!-- Header -->
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-700"> Student Profile </h2>
</div>
<!-- Profile Top -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Image Card -->
<div class="bg-gray-50 rounded-xl p-6 text-center"> @if(auth()->user()->detail && auth()->user()->detail->image) <img src="{{ asset('storage/images/'.auth()->user()->detail->image) }}" class="w-40 h-40 mx-auto rounded-full object-cover shadow"> @else <img src="https://via.placeholder.com/150" class="w-40 h-40 mx-auto rounded-full"> @endif <h3 class="text-xl font-bold mt-4">
{{ auth()->user()->name }}
</h3>
<p class="text-gray-500">
{{ auth()->user()->email }}
</p>
<div class="mt-4"> @if(auth()->user()->status=="Accepted") <span class="bg-green-100 text-green-700 px-4 py-2 rounded-full"> Accepted </span> @elseif(auth()->user()->status=="Pending") <span class="bg-yellow-100 text-yellow-700 px-4 py-2 rounded-full"> Pending </span> @else <span class="bg-red-100 text-red-700 px-4 py-2 rounded-full"> Rejected </span> @endif </div>
</div>
<!-- Details -->
<div class="md:col-span-2">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<p class="text-gray-500 text-sm"> Student Name </p>
<h4 class="font-semibold">
{{ auth()->user()->name }}
</h4>
</div>
<div>
<p class="text-gray-500 text-sm"> Email </p>
<h4 class="font-semibold">
{{ auth()->user()->email }}
</h4>
</div>
<div>
<p class="text-gray-500 text-sm"> Guardian Name </p>
<h4 class="font-semibold">
{{ auth()->user()->detail->guardian_name ?? '-' }}
</h4>
</div>
<div>
<p class="text-gray-500 text-sm"> Phone </p>
<h4 class="font-semibold">
{{ auth()->user()->detail->phone ?? '-' }}
</h4>
</div>
<div>
<p class="text-gray-500 text-sm"> Date Of Birth </p>
<h4 class="font-semibold">
{{ auth()->user()->detail->date_of_birth ?? '-' }}
</h4>
</div>
<div>
<p class="text-gray-500 text-sm"> Gender </p>
<h4 class="font-semibold capitalize">
{{ auth()->user()->detail->gender ?? '-' }}
</h4>
</div>
<div>
<p class="text-gray-500 text-sm"> Blood Group </p>
<h4 class="font-semibold">
{{ auth()->user()->detail->blood_group ?? '-' }}
</h4>
</div>
<div>
<p class="text-gray-500 text-sm"> Account Status </p>
<h4 class="font-semibold">
{{ auth()->user()->status }}
</h4>
</div>
</div>
</div>
</div>
<!-- Additional Information -->
<div class="mt-8 border-t pt-6">
<h3 class="text-xl font-bold mb-5"> Additional Information </h3> @php $activities = auth()->user()->detail->extra_curricular ?? []; if(is_string($activities)){ $activities = json_decode($activities,true); } @endphp <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<p class="text-gray-500 text-sm"> Extra Curricular Activities </p>
<p class="font-semibold"> @if(!empty($activities)) {{ implode(', ', $activities) }} @else - @endif </p>
</div>
<div>
<p class="text-gray-500 text-sm"> Address </p>
<p class="font-semibold">
{{ auth()->user()->detail->address ?? '-' }}
</p>
</div>
</div>
</div>
<!-- Edit Button -->
<div class="mt-8">
<a href="{{ route('student.edit-profile') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg">
<i class="fas fa-edit"></i> Edit Profile </a>
</div>
</div> @endsection
student.layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<title>@yield('title','Admin Dashboard')</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background: #3b82f6;
border-radius: 20px;
}
.active-menu {
background: #2563eb;
color: white;
}
</style>
</head>
<body class="bg-gray-100">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<aside id="sidebar" class="fixed lg:relative z-50
w-72 h-full
bg-slate-900
text-white
transform
-translate-x-full
lg:translate-x-0
transition-transform duration-300">
<!-- Logo -->
<div class="h-20 flex items-center justify-center border-b border-slate-700">
<h1 class="text-2xl font-bold"> Student Panel </h1>
</div>
<!-- Menu -->
<nav class="mt-6"> @if(auth()->user()->role == 'Admin') <a href="{{ route('dashboard') }}" class="flex items-center px-6 py-4 hover:bg-blue-600 transition
{{ request()->routeIs('dashboard') ? 'active-menu' : '' }}"> 📊 <span class="ml-4"> Dashboard </span>
</a>
<a href="{{ route('students') }}" class="flex items-center px-6 py-4 hover:bg-blue-600 transition
{{ request()->routeIs('students.*') ? 'active-menu' : '' }}"> 👨🎓 <span class="ml-4"> Students </span>
</a>
<a href="#" class="flex items-center px-6 py-4 hover:bg-blue-600 transition
{{ request()->routeIs('students.create') ? 'active-menu' : '' }}"> ➕ <span class="ml-4"> Add Student </span>
</a>
<a href="{{ route('pending-students') }}" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-100">
<i class="fas fa-user-clock"></i> Pending Students </a>
{{-- <a href="{{ route('admin.profile') }}" class="flex items-center px-6 py-4 hover:bg-blue-600 transition {{ request()->routeIs('admin.profile') ? 'active-menu' : '' }}"> 👤 <span class="ml-4"> My Profile </span>
</a> --}} @endif
</nav>
<nav class="mt-6"> @if(auth()->user()->role == 'Student') <a href="{{ route('student.profile') }}" class="flex items-center px-6 py-4 hover:bg-blue-600 transition
{{ request()->routeIs('student.profile') ? 'active-menu' : '' }}"> 👤 <span class="ml-4"> My Profile </span>
</a> @endif </nav>
</aside>
<!-- Content -->
<div class="flex-1 flex flex-col overflow-hidden">
<!-- Navbar -->
<header class="bg-white shadow h-20 flex items-center justify-between px-6">
<div class="flex items-center">
<!-- Mobile Button -->
<button onclick="toggleSidebar()" class="lg:hidden text-3xl"> ☰ </button>
<h2 class="ml-4 text-2xl font-bold"> @yield('page-title') </h2>
</div>
<!-- User -->
<div class="flex items-center gap-5">
<div class="text-right">
<p class="font-semibold">
{{ Auth::user()->name }}
</p>
<small class="text-gray-500">
{{ Auth::user()->role }}
</small>
</div>
<img src="https://ui-avatars.com/api/?name={{ urlencode(Auth::user()->name) }}" class="w-12 h-12 rounded-full">
<form method="POST" action="{{ route('logout') }}"> @csrf <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600"> Logout </button>
</form>
</div>
</header>
<!-- Main -->
<main class="flex-1 overflow-y-auto p-8"> @if(session('success')) <div class="mb-5 rounded-lg bg-green-100 text-green-700 p-4">
{{ session('success') }}
</div> @endif @if(session('error')) <div class="mb-5 rounded-lg bg-red-100 text-red-700 p-4">
{{ session('error') }}
</div> @endif @yield('content') </main>
<!-- Footer -->
<footer class="bg-white shadow py-4 text-center text-gray-500"> © {{ date('Y') }} Student Management System </footer>
</div>
</div>
<script>
function toggleSidebar() {
document.getElementById('sidebar').classList.toggle('-translate-x-full');
}
</script>
</body>
</html>
student.edit-profile
@extends('student.layout') @section('title','Edit Profile') @section('page-title','Edit Profile') @section('content') <div class="bg-white rounded-2xl shadow-lg p-6">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-700"> Update Profile </h2>
<a href="{{ route('profile') }}" class="bg-gray-600 hover:bg-gray-700 text-white px-5 py-2 rounded-lg">
<i class="fas fa-arrow-left"></i> Back </a>
</div> @if($errors->any()) <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg mb-5">
<ul> @foreach($errors->all() as $error) <li>
{{ $error }}
</li> @endforeach </ul>
</div> @endif @if(session('success')) <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg mb-5">
{{ session('success') }}
</div> @endif <form action="{{ route('student.update-profile') }}" method="POST" enctype="multipart/form-data"> @csrf @method('PUT') <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Name -->
<div>
<label class="block font-semibold mb-2"> Student Name </label>
<input type="text" value="{{ auth()->user()->name }}" disabled class="w-full border rounded-lg px-4 py-2 bg-gray-100">
<p class="text-sm text-gray-400 mt-1"> Contact admin to change name </p>
</div>
<!-- Email -->
<div>
<label class="block font-semibold mb-2"> Email </label>
<input type="email" value="{{ auth()->user()->email }}" disabled class="w-full border rounded-lg px-4 py-2 bg-gray-100">
</div>
<!-- Guardian -->
<div>
<label class="block font-semibold mb-2"> Guardian Name </label>
<input type="text" name="guardian_name" value="{{ old('guardian_name',auth()->user()->detail->guardian_name ?? '') }}" class="w-full border rounded-lg px-4 py-2">
</div>
<!-- Phone -->
<div>
<label class="block font-semibold mb-2"> Phone Number </label>
<input type="text" name="phone" value="{{ old('phone',auth()->user()->detail->phone ?? '') }}" class="w-full border rounded-lg px-4 py-2">
</div>
<!-- Gender -->
<div>
<label class="block font-semibold mb-2"> Gender </label> @php $gender = strtolower(auth()->user()->detail->gender ?? ''); @endphp <select name="gender" class="w-full border rounded-lg px-4 py-2">
<option value=""> Select Gender </option>
<option value="male" {{ $gender=='male' ? 'selected':'' }}> Male </option>
<option value="female" {{ $gender=='female' ? 'selected':'' }}> Female </option>
</select>
</div>
<!-- Blood Group -->
<div>
<label class="block font-semibold mb-2"> Blood Group </label>
<select name="blood_group" class="w-full border rounded-lg px-4 py-2">
<option value=""> Select Blood Group </option> @foreach(['A+','A-','B+','B-','O+','O-','AB+','AB-'] as $group) <option value="{{ $group }}" {{ auth()->user()->detail->blood_group==$group ? 'selected':'' }}>
{{ $group }}
</option> @endforeach
</select>
</div>
<!-- Image -->
<div>
<label class="block font-semibold mb-2"> Profile Image </label>
<input type="file" name="image" accept="image/*" class="w-full border rounded-lg px-4 py-2"> @if(auth()->user()->detail->image) <img src="{{ asset('storage/images/'.auth()->user()->detail->image) }}" class="mt-3 w-24 h-24 rounded-full object-cover"> @endif
</div>
<!-- Password -->
<div>
<label class="block font-semibold mb-2"> New Password <span class="text-gray-400"> (Optional) </span>
</label>
<input type="password" name="password" class="w-full border rounded-lg px-4 py-2">
</div>
</div>
<!-- Activities -->
<div class="mt-6">
<label class="block font-semibold mb-3"> Extra Curricular Activities </label> @php $activities = auth()->user()->detail->extra_curricular ?? []; if(is_string($activities)){ $activities=json_decode($activities,true); } @endphp <div class="grid grid-cols-2 md:grid-cols-5 gap-4"> @foreach(['Sports','Music','Dance','Drawing','Yoga'] as $activity) <label class="flex items-center gap-2">
<input type="checkbox" name="extra_curricular[]" value="{{ $activity }}" {{ in_array($activity,$activities ?? []) ? 'checked':'' }}>
<span>
{{ $activity }}
</span>
</label> @endforeach </div>
</div>
<!-- Address -->
<div class="mt-6">
<label class="block font-semibold mb-2"> Address </label>
<textarea name="address" rows="4" class="w-full border rounded-lg px-4 py-2">{{ old('address',auth()->user()->detail->address ?? '') }}</textarea>
</div>
<div class="mt-8">
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg">
<i class="fas fa-save"></i> Update Profile </button>
</div>
</form>
</div> @endsection
Student.pending
<!DOCTYPE html>
<html>
<head>
<title>Pending Approval</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-yellow-100 flex justify-center items-center h-screen">
<div class="bg-white p-10 rounded-2xl shadow-xl text-center">
<h1 class="text-4xl font-bold text-yellow-600"> ⏳ </h1>
<h2 class="text-3xl font-bold mt-4"> Account Pending </h2>
<p class="mt-3"> Your registration has been submitted successfully. Please wait for Admin Approval. </p>
</div>
</body>
</html>
student.rejected
<!DOCTYPE html>
<html>
<head>
<title>Rejected</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-red-100 flex justify-center items-center h-screen">
<div class="bg-white p-10 rounded-2xl shadow-xl text-center">
<h1 class="text-5xl text-red-600"> ❌ </h1>
<h2 class="text-3xl font-bold mt-4"> Account Rejected </h2>
<p class="mt-4"> Please contact the administrator. </p>
</div>
</body>
</html>
