Anons79 Mini Shell
Anons79 Mini Shell
| Directory : /home/aplikasiposinfo/public_html/tokoku.fixmate.id/resources/views/pelanggan-aktif/ |
| Current File : /home/aplikasiposinfo/public_html/tokoku.fixmate.id/resources/views/pelanggan-aktif/index.blade.php |
@extends('layouts.app',['title'=>"Pelanggan Aktif"])
@push('styles')
<!-- JQuery DataTable Css -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style>
.grid-container {
display: grid;
gap: 1rem;
/* Adjust the gap between grid items */
}
.grid-container-center {
display: grid;
gap: 1rem;
/* Adjust the gap between grid items */
justify-content: center;
/* Center the grid items horizontally */
}
.info-box.big {
height: 200px;
}
.info-box.big .icon {
width: 200px !important;
display: flex;
justify-content: center;
align-items: center;
}
.info-box.big .content {
display: flex;
align-items: center;
}
.info-box.big .content .text {
font-size: 2rem;
}
.info-box.big .content .number {
font-size: 3rem;
}
.info-box.big .icon i {
font-size: 12rem !important;
/* Adjust icon size */
}
.grid-col-1 {
grid-template-columns: repeat(1, 1fr);
}
.grid-col-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-col-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-col-4 {
grid-template-columns: repeat(4, 1fr);
}
.grid-col-5 {
grid-template-columns: repeat(5, 1fr);
}
.grid-col-6 {
grid-template-columns: repeat(6, 1fr);
}
/* For large screens (desktops) - 5 columns */
@media (min-width: 1200px) {
/* .grid-container {
grid-template-columns: repeat(6, 1fr);
} */
}
/* For medium screens (tablets) - 3 columns */
@media (min-width: 768px) and (max-width: 1199px) {
/* .grid-container {
grid-template-columns: repeat(3, 1fr);
} */
.grid-col-5 {
grid-template-columns: repeat(3, 1fr);
}
.grid-col-6 {
grid-template-columns: repeat(3, 1fr);
}
}
/* For small screens (mobile) - 1 column */
@media (max-width: 767px) {
.grid-container,
.grid-container-center {
grid-template-columns: 1fr;
}
.info-box.big {
height: 150px;
}
.info-box.big .icon {
width: 150px !important;
}
.info-box.big .content .text {
font-size: 13px;
}
.info-box.big .content .number {
font-size: 26px;
}
.info-box.big .icon i {
font-size: 6rem !important;
/* Adjust icon size */
}
}
/* Optional: for some basic styling of the grid items */
.grid-item {
background-color: #f4f4f4;
padding: 1.5rem;
text-align: center;
border: 1px solid #ddd;
}
.grid-container-auto {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
</style>
@endpush
@push('scripts')
{{-- data Table --}}
<script src="{{ url('material') }}/js/pages/tables/jquery-datatable.js"></script>
<script src="{{ url('material') }}/plugins/jquery-datatable/jquery.dataTables.js"></script>
<script src="{{ url('material') }}/plugins/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js"></script>
{{-- data Table --}}
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script>
// $(function() {
// $('#pelangganTable').DataTable({
// responsive: true,
// });
// });
$(function () {
$('#daterange').daterangepicker({
opens: 'right',
locale: {
format: 'DD/MM/YYYY',
cancelLabel: 'Clear',
},
showCustomRangeLabel: true,
alwaysShowCalendars: true,
autoUpdateInput: false,
ranges: {
'Hari Ini': [moment(), moment()],
'Kemarin': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'7 Hari Terakhir': [moment().subtract(6, 'days'), moment()],
'1 Bulan Terakhir': [moment().subtract(29, 'days'), moment()],
'Bulan Ini': [moment().startOf('month'), moment().endOf('month')],
'Bulan Terakhir': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
'month').endOf('month')],
'Semua Waktu': [moment().subtract(10, 'year'), moment().add(10, 'year')]
}
}, function (start, end, label) {
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end
.format('YYYY-MM-DD'));
var delayInMilliseconds = 500; //1 second
$("#daterange").val(start.format('DD/MM/YYYY') + ' - ' + end
.format('DD/MM/YYYY'))
setTimeout(function () {
$("#filter-form").submit();
}, delayInMilliseconds);
}).on("apply.daterangepicker", function (e, picker) {
$("#daterange").val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate
.format('DD/MM/YYYY'));
setTimeout(function () {
$("#filter-form").submit();
}, 500);
});
});
</script>
@endpush
@section('content')
<div class="container-fluid">
<div class="block-header">
<h2>Data Pelanggan Aktif</h2>
</div>
<div class="row clearfix">
<!-- Task Info -->
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="card">
<div class="header">
</div>
<div class="body">
<div class="grid-container grid-col-5">
<div class="info-box hover-zoom-effect">
<div class="icon bg-blue">
<i class="material-icons">stars</i>
</div>
<div class="content">
<div class="text">Super Loyal</div>
<div class="number">{{ $jumlahSuperLoyal }}</div>
</div>
</div>
<div class="info-box hover-zoom-effect">
<div class="icon bg-amber">
<i class="material-icons">local_atm
</i>
</div>
<div class="content">
<div class="text">Loyal Aktif</div>
<div class="number">{{ $jumlahLoyalAktif }}</div>
</div>
</div>
<div class="info-box hover-zoom-effect">
<div class="icon bg-blue">
<i class="material-icons">new_releases
</i>
</div>
<div class="content">
<div class="text">Potensi Loyal</div>
<div class="number">{{ $jumlahPotensiLoyal }}</div>
</div>
</div>
<div class="info-box hover-zoom-effect">
<div class="icon bg-red">
<i class="material-icons">slow_motion_video
</i>
</div>
<div class="content">
<div class="text">Pasif</div>
<div class="number">{{ @$jumlahPasif }}</div>
</div>
</div>
<div class="info-box hover-zoom-effect">
<div class="icon bg-green">
<i class="material-icons">fiber_new</i>
</div>
<div class="content">
<div class="text">Baru</div>
<div class="number">{{ $jumlahBaru }}</div>
</div>
</div>
</div>
<div class="d-flex row justify-content-between">
<form action="" id="filter-form" class="col-lg-2">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">date_range</i>
</span>
<div class="form-line">
<input type="text" class="form-control" name="periode" id="daterange"
value="@if (isset($periode)) {{ $periode[0] }} - {{ $periode[1] }} @endif"
placeholder="Semua hari">
</div>
</div>
</form>
<form action="" id="form" class="col-lg-6">
<div class="row">
{{-- <div class="col-lg-2 col-md-3">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">date_range</i>
</span>
<div class="form-line">
<input type="text" class="form-control" name="periode" id="daterange"
value="@if (isset($periode)) {{ $periode[0] }} - {{ $periode[1] }} @endif">
</div>
</div>
</div> --}}
<div class="col-lg-12 col-md-3 "
style="display: flex; justify-content: space-between; align-items: center; gap: 20px">
<div class="input-group" style="width: 50%">
<span class="input-group-addon">
<i class="material-icons">person</i>
</span>
<div class="form-line" sty>
<input class="form-control" placeholder="Nama/No Telp/Alamat"
name="nama_pelanggan" value="{{ $request->nama_pelanggan }}">
</div>
</div>
<div class="input-group">
<select name="kecamatan" id="kecamatan" class="form-control w-25">
<option value="">Pilih Kecamatan</option>
@foreach ($dataKecamatan as $key => $value)
<option value="{{ $value->kecamatan_pelanggan }}">
{{ $value->kecamatan_pelanggan }}
</option>
@endforeach
</select>
</div>
<div class="input-group w-25" style="width: 25%">
<button class="btn btn-primary">Cari</button>
</div>
</div>
</div>
</form>
<div class="col-lg-3 col-md-3"
style="display: flex; justify-content: space-between; align-items: center;">
<div class="text-center" style="">
<h4>Jumlah Pelanggan</h4>
<h5>{{ $countAll }}</h5>
</div>
<form action="{{ route('laporan.daftarPelanggan.print') }}" target="_blank"
class="row flex-column-reverse">
<div class="col-md-6">
<input type="hidden" class="form-control" name="periode" id="daterange"
value="@if (isset($periode)) {{ $periode[0] }} - {{ $periode[1] }} @endif">
<input type="hidden" class="form-control" name="begin"
value="{{ $begin->format('Ymd H:i:s') }}">
<input type="hidden" class="form-control" name="kecamatan"
value="{{ request()->kecamatan }}">
<input type="hidden" class="form-control" name="order"
value="{{ request()->order }}">
<input type="hidden" class="form-control" name="sorting_order"
value="{{ $sorting_order }}">
</div>
<div class="col-md-6 text-right">
<button type="submit" class="btn bg-green waves-effect">
<i class="material-icons">print</i>
<span>Cetak Excel</span>
</button>
</div>
</form>
</div>
</div>
<div class="table-responsive">
<table class="table table-hover dashboard-task-infos datatable" id="pelangganTable">
<thead>
<tr>
<th>
Nama
</th>
<th>
<a style="color:#555555;"
href="{{ request()->fullUrlWithQuery(['order' => 'jumlah_transaksi', 'sorting_order' => $sorting_order]) }}">
Frekuensi Transaksi
</a>
</th>
<th>
<a style="color:#555555;"
href="{{ request()->fullUrlWithQuery(['order' => 'nominal', 'sorting_order' => $sorting_order]) }}">
Total Nominal Transaksi
</a>
</th>
<th>
<a style="color:#555555;"
href="{{ request()->fullUrlWithQuery(['order' => 'times_diff', 'sorting_order' => $sorting_order]) }}">
Durasi
</a>
</th>
<th>
<a style="color:#555555;"
href="{{ request()->fullUrlWithQuery(['order' => 'total_review', 'sorting_order' => $sorting_order]) }}">
Rating Puas
</a>
</th>
<th>
<a style="color:#555555;"
href="{{ request()->fullUrlWithQuery(['order' => 'jumlah_referral', 'sorting_order' => $sorting_order]) }}">
Teman yang Diajak
</a>
</th>
<th>
<a style="color:#555555;"
href="{{ request()->fullUrlWithQuery(['order' => 'skor_loyalitas', 'sorting_order' => $sorting_order]) }}">
Skor Loyalitas
</a>
</th>
<th>
<a style="color:#555555;"
href="{{ request()->fullUrlWithQuery(['order' => 'skor_loyalitas', 'sorting_order' => $sorting_order]) }}">
Kategori Pelanggan
</a>
</th>
<th>
Tools
</th>
</tr>
</thead>
<tbody>
@foreach ($datas as $data)
<tr>
<td>
{{ $data->nama_pelanggan }}
<br>
({{ $data->telp_pelanggan }})
</td>
<td>
{{ $data->jumlah_transaksi }}
</td>
<td>
<a href="{{ route('pelanggan.show', $data->id) }}" target="_blank">
Rp. {{ number_format($data->total_nominal) }}
</a>
</td>
<td>
{{ $data->durasi_label }}
</td>
<td>
{{ $data->total_review }}
</td>
<td>
{{ $data->jumlah_referral }}
</td>
<td>
{{ $data->skor_loyalitas }}
</td>
<td>
{{ $data->kategori_pelanggan }}
</td>
<td>
{{-- <div class="btn-group btn-block">
<button type="button"
class="btn btn-default btn-block waves-effect dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
@foreach ($promos as $promo)
<li>
<a
href="{{ route('pelanggan-aktif.action',['id'=>$data->id,'action_id'=>$promo->id]) }}">{{
$promo->judul }}</a>
</li>
@endforeach
</ul>
</div> --}}
<a href="{{ route('pelanggan.referral.index', ['pelanggan_id'=>$data->id]) }}" class="btn btn-success">Kode Ajak Teman</a>
</td>
</tr>
@endforeach
</tbody>
<tfoot>
<tr>
<td colspan="9">
{{ $datas->links() }}
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
<!-- #END# Task Info -->
</div>
</div>
@endsection