cms-frontend/resources/views/pages/promotions.blade.php

145 lines
4.6 KiB
PHP

@extends('layouts.app')
@section('page_title', 'Promotions')
@section('content')
@include('components.table-component', [
'pageTitle' => 'Promotions',
'data' => $promotions ?? [],
'columns' => [
['name' => 'Title', 'key' => 'title', 'sortable' => true],
['name' => 'Description', 'key' => 'description', 'sortable' => true],
['name' => 'Start Date', 'key' => 'startDate', 'sortable' => true],
['name' => 'End Date', 'key' => 'endDate', 'sortable' => true],
['name' => 'Status', 'key' => 'status', 'sortable' => true],
['name' => 'Image', 'key' => 'image', 'sortable' => false]
],
'allFields' => [
['name' => 'Title', 'key' => 'title', 'type' => 'text', 'required' => true],
['name' => 'Description', 'key' => 'description', 'type' => 'textarea', 'required' => true],
['name' => 'Start Date', 'key' => 'startDate', 'type' => 'date', 'required' => true],
['name' => 'End Date', 'key' => 'endDate', 'type' => 'date', 'required' => true],
['name' => 'Status', 'key' => 'status', 'type' => 'select', 'options' => ['Active', 'Inactive'], 'required' => true],
['name' => 'Image', 'key' => 'image', 'type' => 'file', 'accept' => 'image/*', 'required' => true]
],
'actions' => ['edit', 'view', 'delete'],
'showAddButton' => true,
'addButtonUrl' => route('promotions.create'),
'showCheckboxes' => true,
'showBatchDelete' => true,
'showEditModal' => true,
'showViewModal' => true,
'baseRoute' => 'promotions'
])
@endsection
@push('scripts')
<script>
$(document).ready(function() {
const dataTable = initializeDataTable({
route: '{{ route("promotions.data") }}',
columns: [
{ data: 'title' },
{
data: 'description',
render: function(data) {
return data.length > 50 ? data.substring(0, 50) + '...' : data;
}
},
{
data: 'startDate',
render: function(data) {
return moment(data).format('YYYY-MM-DD');
}
},
{
data: 'endDate',
render: function(data) {
return moment(data).format('YYYY-MM-DD');
}
},
{
data: 'status',
render: function(data) {
return `<span class="badge badge-${data === 'Active' ? 'success' : 'danger'}">${data}</span>`;
}
},
{
data: 'image',
render: function(data) {
return data ? `<img src="${data}" alt="Promotion" class="img-thumbnail" style="max-height: 50px;">` : '';
}
}
]
});
// Handle form submissions
handleFormSubmission({
addRoute: '{{ route("promotions.store") }}',
editRoute: '{{ route("promotions.update", ":id") }}',
deleteRoute: '{{ route("promotions.destroy", ":id") }}',
dataTable: dataTable,
validation: {
title: {
required: true,
minlength: 3
},
description: {
required: true,
minlength: 10
},
startDate: {
required: true,
date: true
},
endDate: {
required: true,
date: true,
greaterThan: '#startDate'
},
image: {
required: function() {
return !$('#editForm').length; // Required only for new promotions
},
accept: "image/*"
}
},
processData: false,
contentType: false,
isMultipart: true
});
// Date picker initialization
$('.datepicker').datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
todayHighlight: true,
startDate: '0d'
});
// Image preview
$('input[type="file"]').change(function(e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
$('#imagePreview').attr('src', e.target.result);
};
reader.readAsDataURL(file);
}
});
});
</script>
@endpush
@push('styles')
<style>
.promotion-image {
max-height: 50px;
width: auto;
}
.datepicker {
z-index: 1060;
}
</style>
@endpush