armiejean
/
cms-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added card-type and add-card-type pages

This commit is contained in:
armiejean 2025-04-16 14:25:32 +08:00
parent 02fd963799
commit dd93f5b42e
3 changed files with 257 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
resources/views/pages/about us/card-types.blade.php
View File

@ -1,14 +1,125 @@
@extends('layouts.app')
@section('page_title', 'About Us')
@section('page_title', 'Card Types')
@section('content')
<div class="card" style="min-height: 500px;">
<div class="card-header">
<i class="fa-solid fa-circle-info" style="color:gray;"> Card Types</i>
</div>
<div class="card-body">
<p>This is the Card Types page content.</p>
</div>
</div>
@php
$cardTypes = [
[
'id' => 1,
'cardCode' => 'VISA01',
'cardTypeDescription' => 'Visa Platinum Card',
'cardTypeShortDescription' => 'Premium Visa card',
'cardTypeImage' => '',
'virtualCardFontColor' => 'White',
'cardTypeCoverImage' => '',
'idNumberRequired' => 'Yes',
'idNumberDescription' => 'Government-issued ID required',
'termsAndConditions' => 'Valid for 5 years. Annual fee applies.',
'faqs' => 'Q: What is the credit limit? A: Up to $10,000.'
],
[
'id' => 2,
'cardCode' => 'MC02',
'cardTypeDescription' => 'MasterCard Gold',
'cardTypeShortDescription' => 'Gold MasterCard',
'cardTypeImage' => '',
'virtualCardFontColor' => 'Black',
'cardTypeCoverImage' => '',
'idNumberRequired' => 'No',
'idNumberDescription' => '',
'termsAndConditions' => 'No annual fee for first year.',
'faqs' => 'Q: Can I use it abroad? A: Yes, globally accepted.'
],
[
'id' => 3,
'cardCode' => 'AMEX03',
'cardTypeDescription' => 'Amex Rewards Card',
'cardTypeShortDescription' => 'Amex Rewards',
'cardTypeImage' => '',
'virtualCardFontColor' => 'White',
'cardTypeCoverImage' => '',
'idNumberRequired' => 'Yes',
'idNumberDescription' => 'Passport or driver’s license',
'termsAndConditions' => 'Earn 2x points on travel.',
'faqs' => 'Q: How to redeem points? A: Via app.'
],
[
'id' => 4,
'cardCode' => 'VISA04',
'cardTypeDescription' => 'Visa Classic Card',
'cardTypeShortDescription' => 'Basic Visa card',
'cardTypeImage' => '',
'virtualCardFontColor' => 'Black',
'cardTypeCoverImage' => '',
'idNumberRequired' => 'No',
'idNumberDescription' => '',
'termsAndConditions' => 'Standard rates apply.',
'faqs' => 'Q: Is there a fee? A: No hidden fees.'
],
[
'id' => 5,
'cardCode' => 'MC05',
'cardTypeDescription' => 'MasterCard Premium',
'cardTypeShortDescription' => 'Premium MasterCard',
'cardTypeImage' => '',
'virtualCardFontColor' => 'White',
'cardTypeCoverImage' => '',
'idNumberRequired' => 'Yes',
'idNumberDescription' => 'ID for verification',
'termsAndConditions' => 'Free lounge access.',
'faqs' => 'Q: Lounge access? A: At major airports.'
],
[
'id' => 6,
'cardCode' => 'AMEX06',
'cardTypeDescription' => 'Amex Business Card',
'cardTypeShortDescription' => 'Business Amex',
'cardTypeImage' => '',
'virtualCardFontColor' => 'Black',
'cardTypeCoverImage' => '',
'idNumberRequired' => 'No',
'idNumberDescription' => '',
'termsAndConditions' => 'For business expenses.',
'faqs' => 'Q: Tax benefits? A: Consult accountant.'
]
];
@endphp
@include('components.table-component', [
'pageTitle' => 'Card Types',
'data' => $cardTypes,
'columns' => [
['name' => 'Card Type Code', 'key' => 'cardCode', 'sortable' => true],
['name' => 'Card Type Description', 'key' => 'cardTypeDescription', 'sortable' => true]
],
'allFields' => [
['name' => 'Card Code', 'key' => 'cardCode', 'type' => 'text', 'required' => true],
['name' => 'Card Type Description', 'key' => 'cardTypeDescription', 'type' => 'text', 'required' => true],
['name' => 'Card Type Short Description', 'key' => 'cardTypeShortDescription', 'type' => 'text', 'required' => true],
['name' => 'Card Type Image', 'key' => 'cardTypeImage', 'type' => 'file'],
['name' => 'Virtual Card Font Color', 'key' => 'virtualCardFontColor', 'type' => 'select', 'options' => ['White', 'Black'], 'required' => true],
['name' => 'Card Type Cover Image', 'key' => 'cardTypeCoverImage', 'type' => 'file'],
['name' => 'ID Number Required?', 'key' => 'idNumberRequired', 'type' => 'select', 'options' => ['Yes', 'No'], 'required' => true],
['name' => 'ID Number Description', 'key' => 'idNumberDescription', 'type' => 'text'],
['name' => 'Terms and Conditions', 'key' => 'termsAndConditions', 'type' => 'textarea', 'required' => true],
['name' => 'FAQs', 'key' => 'faqs', 'type' => 'textarea', 'required' => true]
],
'actions' => ['edit', 'view', 'delete'],
'showAddButton' => true,
'addButtonUrl' => '/add-card-types',
'showCheckboxes' => true,
'showBatchDelete' => true,
'showEditModal' => true,
'showViewModal' => true
])
<script>
const storedCardTypes = JSON.parse(sessionStorage.getItem('cardTypes') || '[]');
if (storedCardTypes.length > 0) {
tableConfig.data = [...tableConfig.data, ...storedCardTypes];
renderTable();
renderPagination();
}
</script>
@endsection

131
resources/views/pages/add-card-types.blade.php Normal file
View File

@ -0,0 +1,131 @@
@extends('layouts.app')
@section('page_title', 'Add Card Type')
@section('content')
<div class="card-header border-0 bg-transparent py-2">
<h5 class="mb-0 fw-bold text-dark" style="font-size: 1.25rem;">Add Card Type</h5>
</div>
<div class="row justify-content-center">
<div class="card-body p-3">
<form id="addCardTypeForm">
<div class="mb-3">
<label for="cardCode" class="form-label">Card Code</label>
<input type="text" class="form-control" id="cardCode" placeholder="Enter card code" required>
</div>
<div class="mb-3">
<label for="cardTypeDescription" class="form-label">Card Type Description</label>
<input type="text" class="form-control" id="cardTypeDescription" placeholder="Enter description" required>
</div>
<div class="mb-3">
<label for="cardTypeShortDescription" class="form-label">Card Type Short Description</label>
<input type="text" class="form-control" id="cardTypeShortDescription" placeholder="Enter short description" required>
</div>
<div class="mb-3">
<label for="cardTypeImage" class="form-label">Upload Card Type Image</label>
<input type="file" class="form-control" id="cardTypeImage" accept=".jpg,.jpeg,.png">
</div>
<div class="mb-3">
<label for="virtualCardFontColor" class="form-label">Virtual Card Font Color</label>
<select class="form-select" id="virtualCardFontColor" required>
<option value="" disabled selected>Select font color</option>
<option value="White">White</option>
<option value="Black">Black</option>
</select>
</div>
<div class="mb-3">
<label for="cardTypeCoverImage" class="form-label">Upload Card Type Cover Image</label>
<input type="file" class="form-control" id="cardTypeCoverImage" accept=".jpg,.jpeg,.png">
</div>
<div class="mb-3">
<label for="idNumberRequired" class="form-label">ID Number Required?</label>
<select class="form-select" id="idNumberRequired" required>
<option value="" disabled selected>Select option</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<div class="mb-3">
<label for="idNumberDescription" class="form-label">ID Number Description</label>
<input type="text" class="form-control" id="idNumberDescription" placeholder="Enter ID description">
</div>
<div class="mb-3">
<label for="termsAndConditions" class="form-label">Terms and Conditions</label>
<textarea class="form-control" id="termsAndConditions" rows="4" placeholder="Enter terms and conditions" required></textarea>
</div>
<div class="mb-3">
<label for="faqs" class="form-label">FAQs</label>
<textarea class="form-control" id="faqs" rows="4" placeholder="Enter FAQs" required></textarea>
</div>
<div class="d-flex justify-content-end mt-3">
<button type="button" class="btn btn-outline-secondary me-2" style="margin-right:5px">Cancel</button>
<button type="submit" class="btn btn-primary">Add Card Type</button>
</div>
</form>
</div>
</div>
<style>
.card {
border-radius: 5px;
border: 1px solid #dee2e6;
}
.form-label {
font-size: 0.95rem;
}
.form-control,
.form-select,
textarea.form-control {
font-size: 0.9rem;
width: 100%;
}
</style>
<script>
document.getElementById('addCardTypeForm').addEventListener('submit', function(e) {
e.preventDefault();
const cardCode = document.getElementById('cardCode').value;
const cardTypeDescription = document.getElementById('cardTypeDescription').value;
const cardTypeShortDescription = document.getElementById('cardTypeShortDescription').value;
const cardTypeImage = document.getElementById('cardTypeImage').files[0]?.name || '';
const virtualCardFontColor = document.getElementById('virtualCardFontColor').value;
const cardTypeCoverImage = document.getElementById('cardTypeCoverImage').files[0]?.name || '';
const idNumberRequired = document.getElementById('idNumberRequired').value;
const idNumberDescription = document.getElementById('idNumberDescription').value;
const termsAndConditions = document.getElementById('termsAndConditions').value;
const faqs = document.getElementById('faqs').value;
if (!cardCode || !cardTypeDescription || !cardTypeShortDescription ||
!virtualCardFontColor || !idNumberRequired || !termsAndConditions || !faqs) {
alert('Please fill out all required fields.');
return;
}
const newCardType = {
id: Date.now(),
cardCode,
cardTypeDescription,
cardTypeShortDescription,
cardTypeImage,
virtualCardFontColor,
cardTypeCoverImage,
idNumberRequired,
idNumberDescription,
termsAndConditions,
faqs
};
let cardTypes = JSON.parse(sessionStorage.getItem('cardTypes') || '[]');
cardTypes.push(newCardType);
sessionStorage.setItem('cardTypes', JSON.stringify(cardTypes));
alert('Card Type added successfully!');
window.location.href = '/card-types';
});
document.querySelector('.btn-outline-secondary').addEventListener('click', function() {
window.location.href = '/card-types';
});
</script>
@endsection

4
routes/web.php
View File

@ -111,3 +111,7 @@ Route::get('/add-promotions', function () {
Route::get('/add-top-up', function () {
return view('pages.add-top-up');
})->name('add-top-up');
Route::get('/add-card-types', function () {
return view('pages.add-card-types');
})->name('add-card-types');