489 lines
29 KiB
PHP
489 lines
29 KiB
PHP
@extends('Admin.layouts.master')
|
|
@section('content')
|
|
@php
|
|
$currentPage = 'dashboard';
|
|
@endphp
|
|
<div class="layout-px-spacing">
|
|
<div class="middle-content container-xxl p-0">
|
|
<div class="row layout-top-spacing ">
|
|
<div class="top-tabel">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<h6 class="card-title">Dashboard</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 d-flex align-items-center gap-3 p-0 mb-4">
|
|
<div class="col-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<a href="{{ route('manage.customer') }}">
|
|
<h5>No of Customers</h5>
|
|
<h2 class="m-0 font-weight-bold">{{ $customerCount }}</h2>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{-- <div class="col-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
|
|
<ol class="carousel-indicators m-0">
|
|
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
|
|
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
|
|
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
|
|
</ol>
|
|
<div class="carousel-inner">
|
|
<div class="carousel-item active">
|
|
<h5>Passports Live Now</h5>
|
|
<h2 class="m-0 font-weight-bold">Cheers to Summer</h2>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<h5>Passports Live Now</h5>
|
|
<h2 class="m-0 font-weight-bold">Cheers to Summer</h2>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<h5>Passports Live Now</h5>
|
|
<h2 class="m-0 font-weight-bold">Cheers to Summer</h2>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> --}}
|
|
<div class="col-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<a href="{{ route('manage.restaurants') }}">
|
|
<h5>No of Restaurants</h5>
|
|
<h2 class="m-0 font-weight-bold">{{ $restaurantCount }}</h2>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 d-flex align-items-center p-0 mb-4">
|
|
<div class="col-12 d-flex align-items-center p-0 mb-4">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h5>User Graph</h5>
|
|
<select class="form-control w-25" id="graph-filter">
|
|
<option value="monthly" selected>Monthly</option>
|
|
<option value="quarterly">Quarterly</option>
|
|
<option value="yearly">Yearly</option>
|
|
</select>
|
|
</div>
|
|
<div id="user-chart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- <div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h5>Sales Graph</h5>
|
|
<select class="form-control w-25" name="" id="">
|
|
<option value="" selected>Monthly</option>
|
|
<option value="">Quarterly</option>
|
|
<option value="">Yearly</option>
|
|
</select>
|
|
</div>
|
|
<div id="sales-chart">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> --}}
|
|
|
|
</div>
|
|
<div class="col-12 d-flex align-items-center p-0 mb-4">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5>Recent Transactions</h5>
|
|
<form method="POST" id="customer-form">
|
|
@csrf
|
|
<input type="hidden" name="selected_id" id="ids" disabled>
|
|
<input type="hidden" name="all_id" id="all_id" value="all" disabled>
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<table id="zero-config" class="table dt-table-hover location_table"
|
|
style="width:100%">
|
|
<thead class="text-center">
|
|
<tr>
|
|
<th class="w-10px pe-2">
|
|
<div
|
|
class="form-check form-check-sm form-check-custom form-check-solid me-3">
|
|
<input class="form-check-input" type="checkbox"
|
|
name="customer_ids" id="select-all-ids" />
|
|
</div>
|
|
</th>
|
|
<th class="text-start">Sr no</th>
|
|
<th class="text-start">Name</th>
|
|
<th class="text-start">Customer Id</th>
|
|
<th class="text-start">Amount</th>
|
|
<th class="text-start">payment Details</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-center">
|
|
@foreach ($recent_transaction as $recent_transactions)
|
|
<tr>
|
|
<td>
|
|
<div
|
|
class="form-check form-check-sm form-check-custom form-check-solid">
|
|
<input class="form-check-input" type="checkbox"
|
|
id="customer_checkbox_ids" name="customer_ids"
|
|
value="{{ $recent_transactions['id'] }}" />
|
|
</div>
|
|
</td>
|
|
<td class="text-start">{{ $loop->iteration }}</td>
|
|
<td class="text-start">
|
|
{{ $recent_transactions['subscription']['first_name'] }}
|
|
{{ $recent_transactions['subscription']['last_name'] }}
|
|
</td>
|
|
<td class="text-start">
|
|
{{ $recent_transactions['subscription']['id'] }}</td>
|
|
<td class="text-start">$ {{ $recent_transactions['amount'] }}</td>
|
|
<td class="text-start">
|
|
<a class="view-btn m-0 pointer sub_admin_permission"
|
|
data-toggle="modal" data-target="#payment-details-modal"
|
|
data-id="{{ $recent_transactions['id'] }}"
|
|
data-name="{{ $recent_transactions['subscription']['first_name'] }}"
|
|
data-price="{{ $recent_transactions['amount'] }}"
|
|
data-subscription-id="{{ $recent_transactions['subscription_id'] }}"
|
|
data-customer-id="{{ $recent_transactions['stripe_customer_id'] }}"
|
|
data-subscription-status="{{ $recent_transactions['subscription_status'] }}"
|
|
data-start-date="{{ $recent_transactions['current_period_start'] }}"
|
|
data-end-date="{{ $recent_transactions['current_period_end'] }}"
|
|
data-next-date="{{ $recent_transactions['next_payment_date'] }}">View</a>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="payment-details-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 550px;">
|
|
<div class="modal-content">
|
|
<div class="modal-body">
|
|
<div class="modal-header d-flex justify-content-between modal-title">
|
|
<h5>View Details</h5>
|
|
<button type="button pointer" class="btn-close" data-dismiss="modal" aria-label="Close">
|
|
x
|
|
</button>
|
|
</div>
|
|
<div class="row" style="padding: 0px 10px;">
|
|
<div class="form-group subadmin-option col-md-12">
|
|
<div class="payment-main-div">
|
|
<div class="payment-inn-div">
|
|
<p><strong>Name:</strong></p><span></span>
|
|
</div>
|
|
<div class="payment-inn-div">
|
|
<p><strong>Price:</strong></p><span></span>
|
|
</div>
|
|
<div class="payment-inn-div">
|
|
<p><strong>Subscription ID:</strong></p><span></span>
|
|
</div>
|
|
<div class="payment-inn-div">
|
|
<p><strong>Stripe Customer Id:</strong></p><span></span>
|
|
</div>
|
|
<div class="payment-inn-div">
|
|
<p><strong>Subscription Status:</strong></p><span></span>
|
|
</div>
|
|
<div class="payment-inn-div">
|
|
<p><strong>Current Start Period:</strong></p><span></span>
|
|
</div>
|
|
<div class="payment-inn-div">
|
|
<p><strong>Current End Period:</strong></p><span></span>
|
|
</div>
|
|
<div class="payment-inn-div">
|
|
<p><strong>Next Period Date:</strong></p><span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('section_script')
|
|
<script>
|
|
$('#zero-config').DataTable({
|
|
"dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
|
|
"<'table-responsive'tr>" +
|
|
"<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count mb-sm-0 mb-3'i><'dt--pagination'p>>",
|
|
"oLanguage": {
|
|
"oPaginate": {
|
|
"sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',
|
|
"sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>'
|
|
},
|
|
"sInfo": "Showing page PAGE of _PAGES_",
|
|
"sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
|
|
"sSearchPlaceholder": "Search...",
|
|
"sLengthMenu": "Results : _MENU_",
|
|
},
|
|
"stripeClasses": [],
|
|
"lengthMenu": [7, 10, 20, 50],
|
|
"pageLength": 10
|
|
});
|
|
|
|
$('#zero-config2').DataTable({
|
|
"dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
|
|
"<'table-responsive'tr>" +
|
|
"<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count mb-sm-0 mb-3'i><'dt--pagination'p>>",
|
|
"oLanguage": {
|
|
"oPaginate": {
|
|
"sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',
|
|
"sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>'
|
|
},
|
|
"sInfo": "Showing page PAGE of _PAGES_",
|
|
"sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
|
|
"sSearchPlaceholder": "Search...",
|
|
"sLengthMenu": "Results : _MENU_",
|
|
},
|
|
"stripeClasses": [],
|
|
"lengthMenu": [7, 10, 20, 50],
|
|
"pageLength": 10
|
|
});
|
|
|
|
|
|
$(function(e) {
|
|
$("#select-all-ids").click(function() {
|
|
$(".form-check-input").prop('checked', $(this).prop('checked'));
|
|
});
|
|
|
|
$(".form-check-input").click(function() {
|
|
if (!$(this).prop('checked')) {
|
|
$("#select-all-ids").prop('checked', false);
|
|
} else {
|
|
if ($(".form-check-input:checked").length === $(".form-check-input").length) {
|
|
$("#select-all-ids").prop('checked', true);
|
|
}
|
|
}
|
|
});
|
|
|
|
$(document).on("click", "#download-selected", function(e) {
|
|
e.preventDefault();
|
|
|
|
var allIds = [];
|
|
|
|
// Iterate over each page of the DataTable
|
|
var table = $('#zero-config').DataTable();
|
|
for (var i = 0; i < table.page.info().pages; i++) {
|
|
table.page(i).draw(false); // Switch to page i
|
|
$('#zero-config tbody input:checked').each(function() {
|
|
allIds.push($(this).val());
|
|
});
|
|
}
|
|
|
|
if (allIds.length > 0) {
|
|
// If there are selected customers
|
|
$('#ids').prop('disabled', false);
|
|
$('#all_id').prop('disabled', true);
|
|
$('#ids').val(allIds);
|
|
// Now submit the form or perform download action
|
|
$('#customer-form').submit(); // Or perform your download action here
|
|
} else {
|
|
// No customers selected
|
|
toastr.error("Please select at least one customer to download.");
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
$(document).on("click", "#download_all", function(e) {
|
|
$('#all_id').prop('disabled', false);
|
|
$('#ids').prop('disabled', true);
|
|
})
|
|
});
|
|
|
|
$(document).on("click", ".more", function(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
});
|
|
</script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
// $('<button><ul class="navbar-item flex-row ms-lg-auto ms-0"><li class="nav-item dropdown action-dropdown order-lg-0 order-1"><a href="javascript:void(0);"class="nav-link dropdown-toggle user extra-btn" id="actionDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><div class="avatar-container"><div class="avatar avatar-sm avatar-mid avatar-indicators avatar-online"><h3>Export</h3></div></div></a><div class="dropdown-menu position-absolute" aria-labelledby="actionDropdown"><div class="dropdown-item"><a href="javascript:void(0)" id="download_all"><span>Download Overview</span></a></div><div class="dropdown-item"><a href="javascript:void(0)" id="download-selected"><span id="export">Download Selected</span></a></div></div></li></ul></button>')
|
|
// .insertBefore("#zero-config_filter label");
|
|
$('<button>' +
|
|
'<ul class="navbar-item flex-row ms-lg-auto ms-0">' +
|
|
'<li class="nav-item dropdown action-dropdown order-lg-0 order-1">' +
|
|
'<a href="javascript:void(0);" class="nav-link dropdown-toggle user extra-btn" id="actionDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
|
|
'<div class="avatar-container">' +
|
|
'<div class="avatar avatar-sm avatar-mid avatar-indicators avatar-online">' +
|
|
'<h3>Export</h3>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</a>' +
|
|
'<div class="dropdown-menu position-absolute" aria-labelledby="actionDropdown">' +
|
|
'<div class="dropdown-item">' +
|
|
'<a href="javascript:void(0)" id="download_all"><span>Download Overview</span></a>' +
|
|
'</div>' +
|
|
'<div class="dropdown-item">' +
|
|
'<a href="javascript:void(0)" id="download-selected"><span id="export">Download Selected</span></a>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</li>' +
|
|
'</ul>' +
|
|
'</button>').insertBefore("#zero-config_filter label");
|
|
|
|
// Select/Deselect all checkboxes
|
|
// $('#select-all-ids').click(function() {
|
|
// $('input[name="customer_ids"]').prop('checked', this.checked);
|
|
// });
|
|
|
|
// // Download all data
|
|
// $('#download_all').click(function() {
|
|
// window.location.href = '{{ route("export.recent.transactions") }}?all_id=true';
|
|
// });
|
|
|
|
// // Download selected data
|
|
// $('#download-selected').click(function() {
|
|
// var selectedIds = [];
|
|
// $('input[name="customer_ids"]:checked').each(function() {
|
|
// selectedIds.push($(this).val());
|
|
// });
|
|
|
|
// if (selectedIds.length > 0) {
|
|
// var ids = selectedIds.join(',');
|
|
// window.location.href = '{{ route("export.recent.transactions") }}?selected_id=' + ids;
|
|
// } else {
|
|
// alert('Please select at least one transaction to export.');
|
|
// }
|
|
// });
|
|
$("#zero-config").on("click", ".sub_admin_permission", function() {
|
|
var Name = $(this).data('name');
|
|
var Price = $(this).data('price');
|
|
var SubID = $(this).data('subscription-id');
|
|
var CustID = $(this).data('customer-id');
|
|
var SubStatus = $(this).data('subscription-status');
|
|
var startDate = $(this).data('start-date');
|
|
var endDate = $(this).data('end-date');
|
|
var nextDate = $(this).data('next-date');
|
|
var formattedPrice = '$' + Price;
|
|
|
|
$('.subadmin-option span').eq(0).text(Name);
|
|
$('.subadmin-option span').eq(1).text(formattedPrice);
|
|
$('.subadmin-option span').eq(2).text(SubID);
|
|
$('.subadmin-option span').eq(3).text(CustID);
|
|
$('.subadmin-option span').eq(4).text(SubStatus);
|
|
$('.subadmin-option span').eq(5).text(startDate);
|
|
$('.subadmin-option span').eq(6).text(endDate);
|
|
$('.subadmin-option span').eq(7).text(nextDate); // Corrected index for next-date
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
// Initial data and categories
|
|
var userChartData = getUserChartData('monthly');
|
|
var userCategories = getUserChartCategories('monthly');
|
|
|
|
// Chart options
|
|
var userOptions = {
|
|
chart: {
|
|
type: 'line',
|
|
zoom: {
|
|
enabled: false
|
|
},
|
|
toolbar: {
|
|
show: false
|
|
}
|
|
},
|
|
series: userChartData,
|
|
xaxis: {
|
|
categories: userCategories
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: [4, 4]
|
|
}
|
|
};
|
|
|
|
// Create the chart
|
|
var userChart = new ApexCharts(document.querySelector("#user-chart"), userOptions);
|
|
userChart.render();
|
|
|
|
// Event listener for filter select element
|
|
document.getElementById('graph-filter').addEventListener('change', function(event) {
|
|
var selectedFilter = event.target.value;
|
|
userChartData = getUserChartData(selectedFilter);
|
|
userCategories = getUserChartCategories(selectedFilter);
|
|
|
|
userChart.updateSeries(userChartData);
|
|
userChart.updateOptions({
|
|
xaxis: {
|
|
categories: userCategories
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
function getUserChartData(filter) {
|
|
switch (filter) {
|
|
case 'monthly':
|
|
return [{
|
|
name: 'Total Accounts',
|
|
data: <?php echo json_encode(array_values($dataMonthlyWithType3)); ?>
|
|
},
|
|
{
|
|
name: 'Total Subscribed',
|
|
data: <?php echo json_encode(array_values($dataMonthlyWithType4)); ?>
|
|
}
|
|
];
|
|
case 'quarterly':
|
|
return [{
|
|
name: 'Total Accounts',
|
|
data: <?php echo json_encode(array_values($dataQuarterlyWithType3)); ?>
|
|
},
|
|
{
|
|
name: 'Total Subscribed',
|
|
data: <?php echo json_encode(array_values($dataQuarterlyWithType4)); ?>
|
|
}
|
|
];
|
|
case 'yearly':
|
|
return [{
|
|
name: 'Total Accounts',
|
|
data: <?php echo json_encode(array_values($dataYearlyWithType3)); ?>
|
|
},
|
|
{
|
|
name: 'Total Subscribed',
|
|
data: <?php echo json_encode(array_values($dataYearlyWithType4)); ?>
|
|
}
|
|
];
|
|
default:
|
|
return [];
|
|
}
|
|
}
|
|
|
|
function getUserChartCategories(filter) {
|
|
switch (filter) {
|
|
case 'monthly':
|
|
return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
|
case 'quarterly':
|
|
return ['Q1', 'Q2', 'Q3', 'Q4'];
|
|
case 'yearly':
|
|
return <?php echo json_encode(array_keys($dataYearlyWithType3)); ?>;
|
|
default:
|
|
return [];
|
|
}
|
|
}
|
|
</script>
|
|
@endsection
|