added content in photo-slider and promotions
This commit is contained in:
parent
c83f132231
commit
399c8de8dd
|
|
@ -3,15 +3,13 @@
|
||||||
@section('page_title', 'Add Notification')
|
@section('page_title', 'Add Notification')
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<div class="card-header border-0 bg-transparent px-3 pt-4">
|
<div class="card-header border-0 bg-transparent py-2">
|
||||||
<h5 class="mb-0 fw-bold text-dark">Add Notification</h5>
|
<h5 class="mb-0 fw-bold text-dark" style="font-size: 1.25rem;">Add Notification</h5>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="col-md-10">
|
|
||||||
|
|
||||||
|
|
||||||
<div class="card-body px-3 pb-4">
|
<div class="card-body px-3 pb-4">
|
||||||
<form id="addNotificationForm">
|
<form id="addNotificationForm">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
@ -39,7 +37,7 @@
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,99 @@
|
||||||
|
@extends('layouts.app')
|
||||||
|
|
||||||
|
@section('page_title', 'Add Photo Slider')
|
||||||
|
|
||||||
|
@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 Photo Slider</h5>
|
||||||
|
</div>
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="card-body p-3">
|
||||||
|
<form id="addPhotoSliderForm">
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="title" class="form-label">Title</label>
|
||||||
|
<input type="text" class="form-control" id="title" placeholder="Enter title" required>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="type" class="form-label">Type</label>
|
||||||
|
<select class="form-select" id="type" required>
|
||||||
|
<option value="" disabled selected>Select type</option>
|
||||||
|
<option value="Banner">Banner</option>
|
||||||
|
<option value="Carousel">Carousel</option>
|
||||||
|
<option value="Slider">Slider</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="startDate" class="form-label">Start Date</label>
|
||||||
|
<input type="date" class="form-control" id="startDate" required>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="endDate" class="form-label">End Date</label>
|
||||||
|
<input type="date" class="form-control" id="endDate" required>
|
||||||
|
</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 Photo Slider</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.card {
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px solid #dee2e6;
|
||||||
|
}
|
||||||
|
.form-label {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
.form-control,
|
||||||
|
.form-select {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('addPhotoSliderForm').addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const title = document.getElementById('title').value;
|
||||||
|
const type = document.getElementById('type').value;
|
||||||
|
const startDate = document.getElementById('startDate').value;
|
||||||
|
const endDate = document.getElementById('endDate').value;
|
||||||
|
|
||||||
|
if (!title || !type || !startDate || !endDate) {
|
||||||
|
alert('Please fill out all fields.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Simulate adding photo slider (frontend-only)
|
||||||
|
const newSlider = {
|
||||||
|
id: Date.now(),
|
||||||
|
title: title,
|
||||||
|
type: type,
|
||||||
|
startDate: startDate,
|
||||||
|
endDate: endDate
|
||||||
|
};
|
||||||
|
|
||||||
|
// Store in sessionStorage
|
||||||
|
let sliders = JSON.parse(sessionStorage.getItem('sliders') || '[]');
|
||||||
|
sliders.push(newSlider);
|
||||||
|
sessionStorage.setItem('sliders', JSON.stringify(sliders));
|
||||||
|
|
||||||
|
alert('Photo Slider added successfully!');
|
||||||
|
window.location.href = '/photo-slider';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Cancel button click handler
|
||||||
|
document.querySelector('.btn-outline-secondary').addEventListener('click', function() {
|
||||||
|
window.location.href = '/photo-slider';
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
@endsection
|
||||||
|
|
@ -1,14 +1,80 @@
|
||||||
@extends('layouts.app')
|
@extends('layouts.app')
|
||||||
|
|
||||||
@section('page_title', 'Home Page')
|
@section('page_title', 'Photo Slider')
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<div class="card" style="min-height: 500px;">
|
@php
|
||||||
<div class="card-header">
|
$sliders = [
|
||||||
<i class="fa-solid fa-mobile-screen" style="color:gray;"> Home Page</i>
|
[
|
||||||
</div>
|
'id' => 1,
|
||||||
<div class="card-body">
|
'title' => 'Homepage Banner',
|
||||||
<p>This is the Photo Slider page content.</p>
|
'type' => 'Banner',
|
||||||
</div>
|
'startDate' => '2025-04-10',
|
||||||
</div>
|
'endDate' => '2025-04-20'
|
||||||
@endsection
|
],
|
||||||
|
[
|
||||||
|
'id' => 2,
|
||||||
|
'title' => 'Product Carousel',
|
||||||
|
'type' => 'Carousel',
|
||||||
|
'startDate' => '2025-04-15',
|
||||||
|
'endDate' => '2025-04-25'
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'id' => 3,
|
||||||
|
'title' => 'Seasonal Promo',
|
||||||
|
'type' => 'Banner',
|
||||||
|
'startDate' => '2025-04-20',
|
||||||
|
'endDate' => '2025-05-01'
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'id' => 4,
|
||||||
|
'title' => 'Flash Sale Slider',
|
||||||
|
'type' => 'Slider',
|
||||||
|
'startDate' => '2025-04-22',
|
||||||
|
'endDate' => '2025-04-24'
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'id' => 5,
|
||||||
|
'title' => 'New Arrivals',
|
||||||
|
'type' => 'Carousel',
|
||||||
|
'startDate' => '2025-04-25',
|
||||||
|
'endDate' => '2025-05-05'
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'id' => 6,
|
||||||
|
'title' => 'Event Highlight',
|
||||||
|
'type' => 'Banner',
|
||||||
|
'startDate' => '2025-04-30',
|
||||||
|
'endDate' => '2025-05-10'
|
||||||
|
]
|
||||||
|
];
|
||||||
|
@endphp
|
||||||
|
|
||||||
|
@include('components.table-component', [
|
||||||
|
'pageTitle' => 'Photo Slider',
|
||||||
|
'data' => $sliders,
|
||||||
|
'columns' => [
|
||||||
|
['name' => 'Title', 'key' => 'title', 'sortable' => true],
|
||||||
|
['name' => 'Type', 'key' => 'type', 'sortable' => true],
|
||||||
|
['name' => 'Start Date', 'key' => 'startDate', 'sortable' => true],
|
||||||
|
['name' => 'End Date', 'key' => 'endDate', 'sortable' => true]
|
||||||
|
],
|
||||||
|
'actions' => ['edit', 'view', 'delete'],
|
||||||
|
'showAddButton' => true,
|
||||||
|
'addButtonUrl' => '/add-photo-slider',
|
||||||
|
'showCheckboxes' => true,
|
||||||
|
'showBatchDelete' => true,
|
||||||
|
'showEditModal' => true,
|
||||||
|
'showViewModal' => true
|
||||||
|
])
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const storedSliders = JSON.parse(sessionStorage.getItem('sliders') || '[]');
|
||||||
|
if (storedSliders.length > 0) {
|
||||||
|
const tableConfig = window.tableConfig || {};
|
||||||
|
tableConfig.data = [...tableConfig.data, ...storedSliders];
|
||||||
|
window.renderTable();
|
||||||
|
window.renderPagination();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
@endsection
|
||||||
|
|
@ -3,12 +3,74 @@
|
||||||
@section('page_title', 'Promotions')
|
@section('page_title', 'Promotions')
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<div class="card" style="min-height: 500px;">
|
@php
|
||||||
<div class="card-header">
|
$promotions = [
|
||||||
<i class="fa-solid fa-tag" style="color:gray;"> Promotions</i>
|
[
|
||||||
</div>
|
'id' => 1,
|
||||||
<div class="card-body">
|
'title' => 'Spring Sale',
|
||||||
<p>This is the Promotions page content.</p>
|
'type' => 'Discount',
|
||||||
</div>
|
'startDate' => '2025-04-10',
|
||||||
</div>
|
'endDate' => '2025-04-20',
|
||||||
@endsection
|
'status' => 'Done'
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'id' => 2,
|
||||||
|
'title' => 'Flash Deal',
|
||||||
|
'type' => 'Flash Sale',
|
||||||
|
'startDate' => '2025-04-15',
|
||||||
|
'endDate' => '2025-04-17',
|
||||||
|
'status' => 'On Going'
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'id' => 3,
|
||||||
|
'title' => 'Loyalty Promo',
|
||||||
|
'type' => 'Reward',
|
||||||
|
'startDate' => '2025-04-20',
|
||||||
|
'endDate' => '2025-05-01',
|
||||||
|
'status' => 'Done'
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'id' => 4,
|
||||||
|
'title' => 'Holiday Bundle',
|
||||||
|
'type' => 'Bundle',
|
||||||
|
'startDate' => '2025-04-25',
|
||||||
|
'endDate' => '2025-05-05',
|
||||||
|
'status' => 'On Going'
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'id' => 5,
|
||||||
|
'title' => 'Back-to-School',
|
||||||
|
'type' => 'Discount',
|
||||||
|
'startDate' => '2025-04-30',
|
||||||
|
'endDate' => '2025-05-10',
|
||||||
|
'status' => 'Done'
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'id' => 6,
|
||||||
|
'title' => 'Clearance Sale',
|
||||||
|
'type' => 'Flash Sale',
|
||||||
|
'startDate' => '2025-05-01',
|
||||||
|
'endDate' => '2025-05-03',
|
||||||
|
'status' => 'On Going'
|
||||||
|
]
|
||||||
|
];
|
||||||
|
@endphp
|
||||||
|
|
||||||
|
@include('components.table-component', [
|
||||||
|
'pageTitle' => 'Promotions',
|
||||||
|
'data' => $promotions,
|
||||||
|
'columns' => [
|
||||||
|
['name' => 'Title', 'key' => 'title', 'sortable' => true],
|
||||||
|
['name' => 'Type', 'key' => 'type', 'sortable' => true],
|
||||||
|
['name' => 'Start Date', 'key' => 'startDate', 'sortable' => true],
|
||||||
|
['name' => 'End Date', 'key' => 'endDate', 'sortable' => true],
|
||||||
|
['name' => 'Status', 'key' => 'status', 'sortable' => true]
|
||||||
|
],
|
||||||
|
'actions' => ['edit', 'view', 'delete'],
|
||||||
|
'showAddButton' => true,
|
||||||
|
'showCheckboxes' => true,
|
||||||
|
'showBatchDelete' => true,
|
||||||
|
'showEditModal' => true,
|
||||||
|
'showViewModal' => true
|
||||||
|
])
|
||||||
|
@endsection
|
||||||
|
|
@ -90,4 +90,16 @@ Route::get('/add-user', function () {
|
||||||
|
|
||||||
Route::get('/add-notification', function () {
|
Route::get('/add-notification', function () {
|
||||||
return view('pages.add-notification');
|
return view('pages.add-notification');
|
||||||
})->name('add-notification');
|
})->name('add-notification');
|
||||||
|
|
||||||
|
Route::get('/photo-slider', function () {
|
||||||
|
return view('pages.home page.photo-slider');
|
||||||
|
})->name('photo-slider');
|
||||||
|
|
||||||
|
Route::get('/promotions', function () {
|
||||||
|
return view('pages.promotions');
|
||||||
|
})->name('promotions');
|
||||||
|
|
||||||
|
Route::get('/add-photo-slider', function () {
|
||||||
|
return view('pages.add-photo-slider');
|
||||||
|
})->name('add-photo-slider');
|
||||||
Loading…
Reference in New Issue