232 lines
9.1 KiB
PHP
232 lines
9.1 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<style>
|
|
|
|
:root {
|
|
--primary-navy: #0F2C59;
|
|
--accent-red: #822424;
|
|
--accent-red-hover: #6a2525;
|
|
--bg-light: #F4F6F9;
|
|
--text-main: #1E293B;
|
|
--text-muted: #64748B;
|
|
--border-color: rgba(15, 44, 89, 0.1);
|
|
}
|
|
|
|
.profile-card {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 16px;
|
|
box-shadow: 0 10px 30px rgba(15, 44, 89, 0.08) !important;
|
|
background: #ffffff;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.profile-header {
|
|
background: linear-gradient(135deg, var(--primary-navy) 0%, #1a3d73 100%);
|
|
padding: 1.5rem 1.75rem;
|
|
border: none;
|
|
}
|
|
|
|
.profile-info-row {
|
|
padding: 1.1rem 0;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.profile-info-row:hover {
|
|
background-color: #f8fafc;
|
|
}
|
|
|
|
.profile-info-row:last-of-type {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.profile-label {
|
|
color: var(--text-muted);
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.profile-value {
|
|
color: var(--text-main);
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* ===== Theme Buttons ===== */
|
|
.btn-edit {
|
|
background-color: var(--accent-red);
|
|
color: #ffffff;
|
|
border-radius: 30px;
|
|
padding: 0.6rem 2rem;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
border: none;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn-edit:hover {
|
|
background-color: var(--accent-red-hover);
|
|
color: #ffffff;
|
|
box-shadow: 0 6px 15px rgba(130, 36, 36, 0.3);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.btn-save {
|
|
background-color: var(--accent-red);
|
|
color: #ffffff;
|
|
border-radius: 6px;
|
|
font-weight: 600;
|
|
padding: 0.5rem 1.5rem;
|
|
border: none;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-save:hover {
|
|
background-color: var(--accent-red-hover);
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* Form & Input Enhancements */
|
|
.form-control:focus {
|
|
border-color: var(--primary-navy);
|
|
box-shadow: 0 0 0 0.25rem rgba(15, 44, 89, 0.15);
|
|
}
|
|
</style>
|
|
|
|
<div class="container py-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8">
|
|
|
|
{{-- Alert Success Message --}}
|
|
@if(session('success'))
|
|
<div class="alert alert-success alert-dismissible fade show mb-4 border-0 shadow-sm" role="alert" style="border-radius: 10px; background-color: #d1e7dd; color: #0f5132;">
|
|
<i class="fa-solid fa-circle-check me-2"></i> {{ session('success') }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Main Profile Card --}}
|
|
<div class="card profile-card">
|
|
|
|
<!-- Navy Header -->
|
|
<div class="card-header profile-header text-white d-flex align-items-center justify-content-between">
|
|
<h4 class="mb-0 fw-bold" style="font-size: 1.25rem; letter-spacing: 0.02em;">
|
|
<i class="fa-solid fa-user-gear me-2"></i>User Profile Dashboard
|
|
</h4>
|
|
<span class="badge bg-light text-dark fw-semibold px-3 py-2 rounded-pill small">Active Student</span>
|
|
</div>
|
|
|
|
<div class="card-body p-4 p-md-5">
|
|
|
|
<!-- Full Name -->
|
|
<div class="row profile-info-row align-items-center">
|
|
<div class="col-md-4 profile-label">
|
|
<i class="fa-solid fa-id-card me-2 " style="color: #822424;"></i>Full Name:
|
|
</div>
|
|
<div class="col-md-8 profile-value">{{ $user->first_name . ' ' . $user->last_name }}</div>
|
|
</div>
|
|
|
|
<!-- Email Address -->
|
|
<div class="row profile-info-row align-items-center">
|
|
<div class="col-md-4 profile-label">
|
|
<i class="fa-solid fa-envelope me-2 " style="color: #822424;"></i>Email Address:
|
|
</div>
|
|
<div class="col-md-8 profile-value">{{ $user->email }}</div>
|
|
</div>
|
|
|
|
<!-- Phone Number -->
|
|
<div class="row profile-info-row align-items-center">
|
|
<div class="col-md-4 profile-label">
|
|
<i class="fa-solid fa-phone me-2 " style="color: #822424;"></i>Phone Number:
|
|
</div>
|
|
<div class="col-md-8 profile-value">
|
|
{{ $user->phone ?? 'Not Provided' }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Created At -->
|
|
<div class="row profile-info-row align-items-center">
|
|
<div class="col-md-4 profile-label">
|
|
<i class="fa-solid fa-calendar-plus me-2 t " style="color: #822424;"></i>Account Created:
|
|
</div>
|
|
<div class="col-md-8 profile-value text-muted">
|
|
{{ $user->created_at ? $user->created_at->format('Y-m-d H:i') : 'N/A' }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Updated At -->
|
|
<div class="row profile-info-row align-items-center">
|
|
<div class="col-md-4 profile-label">
|
|
<i class="fa-solid fa-clock-rotate-left me-2 " style="color: #822424;"></i>Last Updated:
|
|
</div>
|
|
<div class="col-md-8 profile-value text-muted">
|
|
{{ $user->updated_at ? $user->updated_at->format('Y-m-d H:i') : 'N/A' }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Profile Trigger Button -->
|
|
<div class="mt-4 pt-2 text-end">
|
|
<button type="button" class="btn btn-edit shadow-sm" data-bs-toggle="modal" data-bs-target="#editProfileModal">
|
|
<i class="fa-solid fa-pen-to-square me-2"></i>Edit Profile
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ===================== EDIT PROFILE MODAL ===================== --}}
|
|
<div class="modal fade" id="editProfileModal" tabindex="-1" aria-labelledby="editProfileModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content border-0 shadow-lg" style="border-radius: 16px; overflow: hidden;">
|
|
|
|
<!-- Modal Header (Navy Theme) -->
|
|
<div class="modal-header text-white" style="background: linear-gradient(135deg, #0F2C59 0%, #1a3d73 100%);">
|
|
<h5 class="modal-title fw-bold fs-6" id="editProfileModalLabel">
|
|
<i class="fa-solid fa-user-pen me-2"></i>Update Profile Details
|
|
</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
|
|
<!-- Update Form -->
|
|
<form action="{{ route('profile.update') }}" method="POST">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<div class="modal-body p-4">
|
|
|
|
<!-- First Name Input -->
|
|
<div class="mb-3">
|
|
<label for="first_name" class="form-label fw-semibold small" style="color: var(--text-muted);">First Name</label>
|
|
<input type="text" class="form-control form-control-lg fs-6" id="first_name" name="first_name" value="{{ $user->first_name }}" required>
|
|
</div>
|
|
|
|
<!-- Last Name Input -->
|
|
<div class="mb-3">
|
|
<label for="last_name" class="form-label fw-semibold small" style="color: var(--text-muted);">Last Name</label>
|
|
<input type="text" class="form-control form-control-lg fs-6" id="last_name" name="last_name" value="{{ $user->last_name }}" required>
|
|
</div>
|
|
|
|
<!-- Phone Input -->
|
|
<div class="mb-3">
|
|
<label for="phone" class="form-label fw-semibold small" style="color: var(--text-muted);">Phone Number</label>
|
|
<input type="text" class="form-control form-control-lg fs-6" id="phone" name="phone" value="{{ $user->phone }}">
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Modal Footer -->
|
|
<div class="modal-footer bg-light px-4">
|
|
<button type="button" class="btn btn-secondary border-0 rounded-3" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn btn-save rounded-3">Save Changes</button>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection |