%PDF-
%PDF-
Mini Shell
Mini Shell
@extends('layouts.backend')
@section('title', $siteTitle)
@section('action')
@permission('app.monthly-data.create')
<a href="{{ route('app.monthly-data.create') }}" class="btn btn-sm btn-primary"><i class="ti-plus fs-ism fw-800"></i> Add New</a>
@endpermission
@endsection
@push('styles')
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style>
.onoffswitch {
position: relative;
width: 95px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border-radius: 20px;
margin-bottom: 0;
}
.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 25px;
padding: 0;
line-height: 25px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: 400;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "Enabled";
padding-left: 10px;
background-color: green;
color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "Disabled";
padding-right: 10px;
background-color: red;
color: #FFFFFF;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 25px;
margin: 2px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 67px;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
.date-range{
min-width: 100px;
}
</style>
@endpush
@section('content')
<div class="row">
<div class="col-12">
<div class="ibox">
<div class="ibox-head">
<h4 class="mb-0 ibox-title">Filter</h4>
</div>
<div class="ibox-body">
<div class="row align-items-center">
<div class="col-lg-5">
<div class="d-flex align-items-center">
<strong class="mr-2">Agent</strong>
<select name="agent" class="form-control">
<option value="">-- Select Agent --</option>
@forelse ($agents as $agent)
<option value="{{ $agent->agent_name }}">{{ $agent->agent_name }}</option>
@empty
@endforelse
</select>
</div>
</div>
<div class="col-lg-5">
<div class="d-flex align-items-center">
<strong class="mr-2 date-range">Date Range</strong>
<input type="text" class="form-control" id="date_range" placeholder="MM/DD/YY" autocomplete="off" autofocus>
<input type="hidden" name="start_date">
<input type="hidden" name="end_date">
</div>
</div>
<div class="col-lg-2">
<button type="submit" class="btn btn-md btn-primary filter-btn"><i class="fa fa-filter"></i> Filter</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="ibox">
<div class="ibox-body px-0">
<div class="table-responsive">
<table class="table table-sm w-100 table-borderless table-style" id="monthly-datatables">
<thead>
<th class="text-capitalize">Revenue Date</th>
<th class="text-capitalize">agent name</th>
<th class="text-capitalize">sale achievment</th>
<th class="text-capitalize">revenue achievment</th>
<th class="text-capitalize">Social Media Leads</th>
<th class="text-capitalize">DJ Leads</th>
<th class="text-capitalize">Telesale Leads</th>
<th class="text-capitalize">Cold Calling Leads</th>
<th class="text-capitalize">Old Social Media Leads</th>
<th class="text-capitalize">Meeting Attendance</th>
<th class="text-capitalize">Number of Deal</th>
<th class="text-capitalize">Number of Calls</th>
<th class="text-capitalize">Connected Calls</th>
<th class="text-capitalize">Meeting Source</th>
<th class="text-capitalize">remark</th>
<th class="text-capitalize">Created At</th>
<th class="text-capitalize text-right">Action</th>
</thead>
<tbody>
</tbody>
<tfoot>
<tr class="bg-danger" style="height: 40px;">
<th></th>
<th></th>
<th class="text-light"></th>
<th class="text-light"></th>
<th class="text-light"></th>
<th class="text-light"></th>
<th class="text-light"></th>
<th class="text-light"></th>
<th class="text-light"></th>
<th class="text-light"></th>
<th class="text-light"></th>
<th class="text-light"></th>
<th class="text-light"></th>
<th class="text-light"></th>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
@include('backend.modal.remark')
@endsection
@push('scripts')
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script>
table = $('#monthly-datatables').DataTable({
processing: true,
serverSide: true,
order: [], //Initial no order
bInfo: true, //TO show the total number of data
bFilter: false, //For datatable default search box show/hide
responsive: true,
ordering: false,
lengthMenu: [
[5, 10, 15, 25, 50, 100, 1000, 10000, -1],
[5, 10, 15, 25, 50, 100, 1000, 10000, "All"]
],
pageLength: 25, //number of data show per page
ajax: {
url: "{{ route('app.monthly-data.get-data') }}",
type: "POST",
dataType: "JSON",
data: function(d) {
d._token = _token;
d.start_date = $('input[name="start_date"]').val();
d.end_date = $('input[name="end_date"]').val();
d.agent_name = $('select[name="agent"]').val();
},
},
columns: [
{data: 'r_date'},
{data: 'agent_name'},
{data: 'sale_achievment'},
{data: 'revenue_achievment'},
{data: 's_media_lead'},
{data: 'dj_lead'},
{data: 'telesale_l'},
{data: 'c_caling_l'},
{data: 'old_s_media_l'},
{data: 'meeting_attendance'},
{data: 'n_of_deal'},
{data: 'n_of_call'},
{data: 'connected_call'},
{data: 'meeting_source'},
{data: 'remark'},
{data: 'created_at'},
{data: 'action'},
],
language: {
processing: '<img src="{{ asset("uploads/images/table-loading.svg") }}">',
emptyTable: '<strong class="text-danger">No Data Found</strong>',
infoEmpty: '',
zeroRecords: '<strong class="text-danger">No Data Found</strong>',
oPaginate: {
sPrevious: "Previous", // This is the link to the previous page
sNext: "Next", // This is the link to the next page
},
lengthMenu: "_MENU_"
},
dom: "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6' <'float-right pr-15'B>>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'<'float-right pr-15'p>>>",
buttons: {
buttons: [
{
text: '<i class="fa fa-refresh" aria-hidden="true"></i> Reload',
className: 'btn btn-sm btn-primary',
action: function (e, dt, node, config) {
dt.ajax.reload(null, false);
}
},
{
extend: 'pdf',
title: 'Monthly Data List',
filename: 'monthly_data_{{ date("d-m-Y") }}',
text: '<i class="fa fa-file-pdf-o" aria-hidden="true"></i> PDF',
className: 'pdfButton btn btn-sm btn-primary',
orientation: "landscape",
pageSize: "A3",
exportOptions: {
columns: '0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15'
},
customize: function(doc) {
doc.defaultStyle.alignment = 'center';
}
},
{
extend: 'excel',
title: 'Monthly Data List',
filename: 'monthly_data_{{ date("d-m-Y") }}',
text: '<i class="fa fa-file-excel-o" aria-hidden="true"></i> Excel',
className: 'excelButton btn btn-sm btn-primary',
exportOptions: {
columns: '0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15'
},
},
{
extend: 'print',
text: '<i class="fa fa-print" aria-hidden="true"></i> Print',
className: 'printButton btn btn-sm btn-primary',
orientation: "landscape",
pageSize: "A3",
exportOptions: {
columns: '0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15'
},
customize: function (win){
$(win.document.body).find('table').css('text-align', 'center');
$(win.document.body).find('.table thead th').css('text-align', 'center');
}
}
]
},
"footerCallback" : function(row,data,start,end,display)
{
var api = this.api(), data;
var intVal = function(i){
return typeof i === 'string' ? i.replace(/[\$,]/g,'')*1 : typeof i === 'number' ? i : 0;
};
for(var index=2;index <= 12;index++)
{
total = api.column(index).data().reduce(function (a,b){
return intVal(a) + intVal(b);
},0);
pageTotal = api.column(index, {page: 'current'}).data().reduce(function (a,b){
return intVal(a) + intVal(b);
},0);
$(api.column(index).footer()).html(parseFloat(pageTotal).toFixed(2));
}
}
});
// custom search
$(document).on('click', 'button.filter-btn', function(){
table.ajax.reload();
});
// date range init
$('input#date_range').daterangepicker({
opens: 'right',
autoUpdateInput: false,
locale: {
cancelLabel: 'Clear'
},
ranges: {
'Today' : [moment(), moment()],
'Last 7 Days' : [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month' : [moment().startOf('month'), moment().endOf('month')],
'Last Month' : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
}
}, function(start, end, label) {
$('input[name="start_date"]').val(start.format('YYYY-MM-DD'));
$('input[name="end_date"]').val(end.format('YYYY-MM-DD'));
});
$('input#date_range').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
});
$('input#date_range').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
});
// deletable btn
$(document).on('click', 'button.confirm-deletable-action', function(){
// modal data
let data_id = $('#deletable-modal input.datatable').val();
const url = "{{ route('app.monthly-data.destroy') }}";
deletable_action(data_id,url); // define function
});
$(document).on('click','button.remark-btn', function(){
var data_id = $(this).data('id');
$.ajax({
type: "POST",
url: "{{ route('app.monthly-data.remark') }}",
data: {data_id:data_id,_token:_token},
dataType: "JSON",
success: function (response) {
$('#data-box').html('')
if (response) {
$('#data-box').html(response.remark);
$('#monthly-data-modal').modal({
backdrop: 'static',
keyboard: false
});
}
}
});
});
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $(window).height() - 80;
if ($(window).scrollTop() > navHeight) {
$('thead').addClass('fixed');
}
else {
$('thead').removeClass('fixed');
}
});
});
</script>
@endpush
Zerion Mini Shell 1.0