%PDF-
%PDF-
Mini Shell
Mini Shell
@extends('layouts.backend')
@section('title', $siteTitle)
@push('styles')
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style>
@media only screen and (max-width: 768px){
tr.row-column td{
width: 50% !important;
margin-right: 0 !important;
}
}
@media only screen and (max-width: 768px){
tr.row-column td{
width: 100% !important;
margin-right: 0 !important;
}
}
tr.row-column{
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 20px;
}
table td:first-child {
padding-left: 0 !important;
}
table td:last-child {
padding-right: 0 !important;
}
/* tr.row-column td:nth-child(3),
tr.row-column td:nth-child(6),
tr.row-column td:nth-child(9){
margin-right: 0;
}
table td:first-child {
padding-left: 0;
}
table td:last-child {
padding-right: 0;
} */
</style>
@endpush
@section('content')
<div class="row">
<div class="col-12">
<div class="card mt-3">
<div class="card-body py-2">
<div class="row align-items-center">
<div class="col-md-6 col-12 mb-2 mb-md-0">
<h5 class="mb-0">Welcome <strong>{{ Auth::user()->name }}</strong></h5>
</div>
</div>
</div>
</div>
</div>
</div>
@if (Auth::user()->role->slug == 'admin')
<div class="card mt-3">
<div class="card-body">
<form id="filter-form" method="POST">
@csrf
<div class="row">
<div class="col-md-4">
<x-form.selectbox name="agent" divClass="mb-0">
<option value="">-- Select Agent --</option>
@forelse ($agents as $agent)
<option value="{{ $agent->id }}">{{ $agent->name }}</option>
@empty
@endforelse
</x-form.selectbox>
</div>
<div class="col-md-4">
<x-form.selectbox name="status" onchange="selectStatus(this.value)" divClass="mb-0">
<option value="">-- Select Status --</option>
@forelse ($statuses as $status)
<option value="{{ $status->id }}">{{ $status->name }}</option>
@empty
@endforelse
</x-form.selectbox>
</div>
<div class="col-md-4">
<x-form.selectbox name="sub_status" divClass="mb-0">
<option value="">-- Select Sub Status --</option>
</x-form.selectbox>
</div>
</div>
<div class="row mt-2">
<div class="col-md-4">
<x-form.selectbox name="potential" divClass="mb-0">
<option value="">-- Select Potential --</option>
@foreach (POTENTIAL as $key=>$value)
<option value="{{ $key }}">{{ $value }}</option>
@endforeach
</x-form.selectbox>
</div>
<div class="col-md-4">
<input type="text" id="date_range" autocomplete="off" class="form-control" placeholder="YY/MM/DD">
<input type="hidden" name="start_date">
<input type="hidden" name="end_date">
</div>
<div class="col-md-4 text-left">
<button type="button" class="btn btn-primary filter-btn"><i class="fas fa-search"></i></button>
</div>
</div>
</form>
</div>
</div>
@endif
<div class="print-area-content mt-3">
<style>
@media screen {
.no_screen {display: none;}
.no_print {display: block;}
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
button {display: none;}
body {margin: 0;}
}
@media print {
body,
html {
-webkit-print-color-adjust: exact !important;
font-family: sans-serif;
margin-bottom: 100px !important;
}
table{
width: 100%;
}
tr.row-column td{
width: 32%;
margin-right: 2% !important;
display: inline-block
}
tr.row-column td:nth-child(3),
tr.row-column td:nth-child(6),
tr.row-column td:nth-child(9){
margin-right: 0 !important;
}
table td:first-child {
padding-left: 0 !important;
}
table td:last-child {
padding-right: 0 !important;
}
}
@page {
/* size: auto; */
margin: 5mm 5mm;
}
</style>
<table class="w-100">
<tr class="row-column">
<td>
<a href="{{ route('app.dashboard.box-data','total-call') }}" class="card">
<div class="card-body text-info border-bottom border-info border-w-5">
<h2 class="text-center" id="total_call">{{ $totalCalling }}</h2>
<h6 class="text-center">Total Calling</h6>
</div>
</a>
</td>
<td>
<a href="{{ route('app.dashboard.box-data','open-call') }}" class="card">
<div class="card-body text-success border-bottom border-success border-w-5">
<h2 class="text-center" id="open_call">{{ $openStatus }}</h2>
<h6 class="text-center">Open Call</h6>
</div>
</a>
</td>
<td>
<a href="{{ route('app.dashboard.box-data','closed-call') }}" class="card">
<div class="card-body text-danger border-bottom border-danger border-w-5">
<h2 class="text-center" id="closed_call">{{ $closedStatus }}</h2>
<h6 class="text-center">Closed Call</h6>
</div>
</a>
</td>
<td>
<a href="{{ route('app.dashboard.box-data','potential-call') }}" class="card">
<div class="card-body text-primary border-bottom border-primary border-w-5">
<h2 class="text-center" id="potential_call">{{ $potentialCall }}</h2>
<h6 class="text-center">Potential Call</h6>
</div>
</a>
</td>
<td>
<a href="{{ route('app.dashboard.box-data','in-progress-call') }}" class="card">
<div class="card-body text-danger border-bottom border-danger border-w-5">
<h2 class="text-center" id="in_progress_call">{{ $inProgress }}</h2>
<h6 class="text-center">In Progress</h6>
</div>
</a>
</td>
<td>
<a href="{{ route('app.dashboard.box-data','follow-up-call') }}" class="card">
<div class="card-body text-dark border-bottom border-dark border-w-5">
<h2 class="text-center" id="follow_up_call">{{ $followUp }}</h2>
<h6 class="text-center">Follow UP</h6>
</div>
</a>
</td>
<td>
<a href="{{ route('app.dashboard.box-data','interested-call') }}" class="card">
<div class="card-body text-warning border-bottom border-warning border-w-5">
<h2 class="text-center" id="interested_call">{{ $interested }}</h2>
<h6 class="text-center">Interested</h6>
</div>
</a>
</td>
<td>
<a href="{{ route('app.dashboard.box-data','called-no-reply') }}" class="card">
<div class="card-body text-secondary border-bottom border-secondary border-w-5">
<h2 class="text-center" id="no_reply_call">{{ $callNoReply }}</h2>
<h6 class="text-center">Called No Reply</h6>
</div>
</a>
</td>
</tr>
</table>
</div>
@endsection
@push('scripts')
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script src="{{ asset('assets/js/jquery.printarea.js') }}"></script>
<script>
$(document).on('click','form#filter-form button',function(){
var form = document.getElementById('filter-form');
var form_data = new FormData(form);
var agent = $('select[name="agent"]').val();
var status = $('select[name="status"]').val();
var sub_status = $('select[name="sub_status"]').val();
var potential = $('select[name="potential"]').val();
var start_date = $('input[name="start_date"]').val();
var end_date = $('input[name="end_date"]').val();
// filter data
if (agent != '' || status != '' || sub_status != '' || potential != '' || start_date != '' || end_date != '') {
$('tr.row-column > td > a').addClass('click-disabled');
}else{
$('tr.row-column > td > a').removeClass('click-disabled');
}
$.ajax({
type: "POST",
url: "{{ route('app.dashboard.filter') }}",
data: form_data,
processData: false,
contentType: false,
dataType: "JSON",
beforeSend: function(){
$('button.filter-btn i').removeClass('fas fa-search');
$('button.filter-btn i').addClass('spinner-border spinner-border-sm text-light');
},
complete: function(){
$('button.filter-btn i').addClass('fas fa-search');
$('button.filter-btn i').removeClass('spinner-border spinner-border-sm text-light');
},
success: function (response) {
if (response.status == 'error') {
flashMessage(response.status,response.message);
}else{
// empty
$('h2#total_call').text('');
$('h2#open_call').text('');
$('h2#closed_call').text('');
$('h2#potential_call').text('');
$('h2#in_progress_call').text('');
$('h2#follow_up_call').text('');
$('h2#interested_call').text('');
$('h2#no_reply_call').text('');
$('h2#total_call').text(response.totalCalling);
$('h2#open_call').text(response.openStatus);
$('h2#closed_call').text(response.closedStatus);
$('h2#potential_call').text(response.potentialCall);
$('h2#in_progress_call').text(response.inProgress);
$('h2#follow_up_call').text(response.followUp);
$('h2#interested_call').text(response.interested);
$('h2#no_reply_call').text(response.callNoReply);
}
}
});
});
function selectStatus(status){
$.ajax({
type: "POST",
url: "{{ route(routeName().'.callings.status.get-data') }}",
data: {_token:_token,status:status},
dataType: "JSON",
success: function (response) {
$('select[name="sub_status"]').html('');
if (response) {
$('select[name="sub_status"]').html(response);
}
}
});
}
// datepicker
$('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#date_range').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
$('input[name="start_date"]').val(picker.startDate.format('YYYY-MM-DD'));
$('input[name="end_date"]').val(picker.endDate.format('YYYY-MM-DD'));
});
$('input#date_range').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
$('input[name="start_date"]').val('');
$('input[name="end_date"]').val('');
});
// print area
$(document).on('click','button.printarea',function(){
var mode = 'iframe'; //popup
var close = mode = 'popup';
var options = {
mode : mode,
popClose: close
}
$('.print-area-content').printArea(options);
});
</script>
@endpush
Zerion Mini Shell 1.0