added card-type and add-card-type pages
This commit is contained in:
parent
02fd963799
commit
dd93f5b42e
|
|
@ -1,14 +1,125 @@
|
||||||
@extends('layouts.app')
|
@extends('layouts.app')
|
||||||
|
|
||||||
@section('page_title', 'About Us')
|
@section('page_title', 'Card Types')
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<div class="card" style="min-height: 500px;">
|
@php
|
||||||
<div class="card-header">
|
$cardTypes = [
|
||||||
<i class="fa-solid fa-circle-info" style="color:gray;"> Card Types</i>
|
[
|
||||||
</div>
|
'id' => 1,
|
||||||
<div class="card-body">
|
'cardCode' => 'VISA01',
|
||||||
<p>This is the Card Types page content.</p>
|
'cardTypeDescription' => 'Visa Platinum Card',
|
||||||
</div>
|
'cardTypeShortDescription' => 'Premium Visa card',
|
||||||
</div>
|
'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
|
@endsection
|
||||||
|
|
@ -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
|
||||||
|
|
@ -111,3 +111,7 @@ Route::get('/add-promotions', function () {
|
||||||
Route::get('/add-top-up', function () {
|
Route::get('/add-top-up', function () {
|
||||||
return view('pages.add-top-up');
|
return view('pages.add-top-up');
|
||||||
})->name('add-top-up');
|
})->name('add-top-up');
|
||||||
|
|
||||||
|
Route::get('/add-card-types', function () {
|
||||||
|
return view('pages.add-card-types');
|
||||||
|
})->name('add-card-types');
|
||||||
Loading…
Reference in New Issue