Anons79 Mini Shell
Anons79 Mini Shell
| Directory : /home/aplikasiposinfo/www/derfacell.aplikasipos.info/resources/views/dashboard/ |
| Current File : /home/aplikasiposinfo/www/derfacell.aplikasipos.info/resources/views/dashboard/pengguna.blade.php |
@extends('layouts.app')
@push('styles')
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<!-- JQuery DataTable Css -->
<link href="{{ url('material') }}/plugins/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.css" rel="stylesheet">
<!-- JQuery DataTable Css -->
@endpush
@push('scripts')
{{-- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> --}}
<!-- ChartJs -->
<script src="{{ url('material') }}/plugins/chartjs/Chart.bundle.js"></script>
<script src="{{ url('material') }}/js/simplified.js"></script>
<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() {
$('#daterange').daterangepicker({
opens: 'right',
locale: {
format: 'DD/MM/YYYY'
},
showCustomRangeLabel: true,
alwaysShowCalendars: true,
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
setTimeout(function() {
$("#filter-form").submit();
}, delayInMilliseconds);
});
});
$("#karyawan_id").change(function() {
$("#filter-form").submit();
});
$("#kategori_item_id").change(function() {
$("#filter-form").submit();
});
</script>
{{-- chart Pertanggal --}}
@foreach ($charts as $key => $v)
<script>
var ctx_{{ $key }} = document.getElementById('{{ $key }}Chart');
if (ctx_{{ $key }}) {
new Chart(ctx_{{ $key }}, {
type: 'bar',
data: {
labels: {!! json_encode($periodeTanggals) !!},
datasets: [{
label: ' # {{ strtoupper(implode(' ', preg_split('/(?=[A-Z])/', $key))) }}',
data: {!! json_encode($v) !!},
borderWidth: 1,
backgroundColor: 'rgba(255, 99, 132, 0.5)',
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
},
maintainAspectRatio: false,
}
});
}
</script>
@endforeach
{{-- chart Pertanggal --}}
<script>
var combinedCtx = document.getElementById('omsetKotorChart');
if (combinedCtx) {
new Chart(combinedCtx, {
type: 'bar',
data: {
labels: {!! json_encode($periodeTanggals) !!},
datasets: [{
label: 'OMSET PENJUALAN',
data: {!! json_encode($charts['omsetPenjualan']) !!},
backgroundColor: 'rgba(255, 99, 132, 0.5)',
borderWidth: 1
},
{
label: 'SERVICE',
data: {!! json_encode($charts['service']) !!},
backgroundColor: 'rgba(54, 162, 235, 0.5)',
borderWidth: 1
}
]
},
options: {
scales: {
y: {
beginAtZero: true
}
},
maintainAspectRatio: false,
}
});
}
</script>
{{-- chart Perjam --}}
@foreach ($charts_perjam as $key => $v)
<script>
var ctx_{{ $key }} = document.getElementById('{{ $key }}Chart');
if (ctx_{{ $key }}) {
new Chart(ctx_{{ $key }}, {
type: 'bar',
data: {
labels: {!! json_encode($jam) !!},
datasets: [{
label: ' # {{ strtoupper(implode(' ', preg_split('/(?=[A-Z])/', $key))) }}',
data: {!! json_encode($v) !!},
borderWidth: 1,
backgroundColor: 'rgba(255, 99, 132, 0.5)',
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
},
maintainAspectRatio: false,
}
});
}
</script>
@endforeach
{{-- chart Perjam --}}
<script>
var combinedCtx = document.getElementById('omsetKotorPerjamChart');
if (combinedCtx) {
new Chart(combinedCtx, {
type: 'bar',
data: {
labels: {!! json_encode($jam) !!},
datasets: [{
label: 'OMSET PENJUALAN',
data: {!! json_encode($charts_perjam['penjualanPerjam']) !!},
backgroundColor: 'rgba(255, 99, 132, 0.5)',
borderWidth: 1
},
{
label: 'SERVICE',
data: {!! json_encode($charts_perjam['servicePerjam']) !!},
backgroundColor: 'rgba(54, 162, 235, 0.5)',
borderWidth: 1
}
]
},
options: {
scales: {
y: {
beginAtZero: true
}
},
maintainAspectRatio: false,
}
});
}
</script>
<script>
var tipeChart = document.getElementById('tipe_chart');
var chartHari = document.getElementById('hari');
var chartJam = document.getElementById('jam');
document.addEventListener('DOMContentLoaded', function() {
ubahTipe(tipeChart.value);
tipeChart.addEventListener('change', function() {
ubahTipe(tipeChart.value);
});
});
function ubahTipe(tipe) {
if (tipe == 1) {
chartJam.style.display = 'block';
chartHari.style.display = 'none';
} else {
chartJam.style.display = 'none';
chartHari.style.display = 'block';
}
}
</script>
@endpush
@section('content')
<style>
#jam {
display: none;
}
</style>
<div class="container-fluid">
<div class="block-header">
<h2>DASHBOARD</h2>
@if (str_contains(request()->getHost(), "fixmate"))
<div id="countdown" data-countdown="{{ $countdown[0]->countdown }}"></div>
@endif
</div>
@if (\Helper::hakAkses('dashboard_karyawan', 'view'))
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<h3 class="font-bold">Transaksi</h3>
<form action="" id="filter-form">
<div class="row">
<div class="col-lg-5 col-md-5">
<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>
</form>
</div>
<div class="body">
<div class="row clearfix">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="info-box hover-zoom-effect">
<div class="icon bg-teal">
<i class="material-icons">build</i>
</div>
<div class="content">
<div class="text">Service</div>
<div class="number">
{{ $t_service }}
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="info-box hover-zoom-effect">
<div class="icon bg-blue">
<i class="material-icons">attach_money</i>
</div>
<div class="content">
<div class="text">Penjualan</div>
<div class="number">
{{ $t_penjualan }}
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="info-box hover-zoom-effect">
<div class="icon bg-green">
<i class="material-icons">shopping_cart</i>
</div>
<div class="content">
<div class="text">Pembelian</div>
<div class="number">
{{ $t_pembelian }}
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="info-box hover-zoom-effect">
<div class="icon bg-cyan">
<i class="material-icons">money_off</i>
</div>
<div class="content">
<div class="text">Retur Penjualan</div>
<div class="number">
{{ $t_retur_penjualan }}
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="info-box hover-zoom-effect">
<div class="icon bg-grey">
<i class="material-icons">remove_shopping_cart</i>
</div>
<div class="content">
<div class="text">Retur Pembelian</div>
<div class="number">
{{ $t_retur_pembelian }}
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="info-box hover-zoom-effect">
<div class="icon bg-orange">
<i class="material-icons">monetization_on</i>
</div>
<div class="content">
<div class="text">Pembayaran Piutang</div>
<div class="number">
{{ $t_pembayaran_piutang }}
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="info-box hover-zoom-effect">
<div class="icon bg-red">
<i class="material-icons">business_center</i>
</div>
<div class="content">
<div class="text">Pembayaran Hutang</div>
<div class="number">
{{ $t_pembayaran_hutang }}
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="info-box hover-zoom-effect">
<div class="icon bg-lime">
<i class="material-icons">store_mall_directory</i>
</div>
<div class="content">
<div class="text">Transaksi Gudang</div>
<div class="number">
{{ $t_transaksi_gudang }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endif
@if (\Helper::hakAkses('dashboard_admin', 'view'))
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<form action="" id="filter-form">
<div class="row">
<div class="col-lg-3 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-3 col-md-3">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">card_membership</i>
</span>
<div class="form-line focused">
<select name="pengguna_id" class="form-control">
<option value="">Umum</option>
@foreach ($pengguna as $p)
<option value="{{ $p->id }}"
@if (isset($request->pengguna_id)) @if ($request->pengguna_id == $p->id) selected @endif
@endif>
{{ $p->nama_pengguna }} </option>
@endforeach
</select>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">card_membership</i>
</span>
<div class="form-line focused">
<select id="tipe_chart" class="form-control">
<option value="0">Hari</option>
<option value="1">Jam</option>
</select>
</div>
</div>
</div>
<div class="col-lg-2 col-md-3">
<div class="input-group">
<button class="btn btn-primary">Cari</button>
</div>
</div>
</div>
</form>
<ul class="header-dropdown m-r--5">
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</a>
<ul class="dropdown-menu pull-right">
<li><a href="javascript:void(0);">Action</a></li>
<li><a href="javascript:void(0);">Another action</a></li>
<li><a href="javascript:void(0);">Something else here</a></li>
</ul>
</li>
</ul>
</div>
<div class="body">
<!-- Nav tabs -->
<div id="hari">
<ul class="nav nav-tabs tab-nav-right" style="display: flex;" role="tablist">
<li role="presentation"class="active" style="flex: 1;">
<a href="#omsetKotor" data-toggle="tab">
<p>Omset Kotor</p>
<h5 class="simplified" data-value="{{ number_format($omsetKotor) }}"></h5>
</a>
</li>
<li role="presentation" style="flex: 1;">
<a href="#penjualan-kotor" data-toggle="tab">
<p>Omset Penjualan</p>
<h5 class="simplified" data-value="{{ number_format($omsetPenjualan) }}">
</h5>
</a>
</li>
<li role="presentation" style="flex: 1;">
<a href="#service" data-toggle="tab">
<p>Omset Service</p>
<h5 class="simplified" data-value="{{ number_format($service) }}"></h5>
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="omsetKotor">
<b>Omset Kotor</b>
<div style="height: 300px;">
<canvas id="omsetKotorChart"></canvas>
</div>
</div>
<div role="tabpanel" class="tab-pane fade in " id="penjualan-kotor">
<b>Omset Penjualan</b>
<div style="height: 300px;">
<canvas id="omsetPenjualanChart"></canvas>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="service">
<b>Omset Service</b>
<div style="height: 300px;">
<canvas id="serviceChart"></canvas>
</div>
</div>
</div>
</div>
<div id="jam">
<ul class="nav nav-tabs tab-nav-right" style="display: flex;" role="tablist">
<li role="presentation"class="active" style="flex: 1;">
<a href="#omsetKotorPerjam" data-toggle="tab">
<p>Omset Kotor </p>
<h5 class="simplified" data-value="{{ number_format($omsetKotor) }}"></h5>
</a>
</li>
<li role="presentation" style="flex: 1;">
<a href="#penjualanPerjam" data-toggle="tab">
<p>Omset Penjualan</p>
<h5 class="simplified" data-value="{{ number_format($omsetPenjualan) }}">
</h5>
</a>
</li>
<li role="presentation" style="flex: 1;">
<a href="#servicePerjam" data-toggle="tab">
<p>Omset Service</p>
<h5 class="simplified" data-value="{{ number_format($service) }}"></h5>
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="omsetKotorPerjam">
<b>Omset Kotor</b>
<div style="height: 300px;">
<canvas id="omsetKotorPerjamChart"></canvas>
</div>
</div>
<div role="tabpanel" class="tab-pane fade in " id="penjualanPerjam">
<b>Omset Penjualan</b>
<div style="height: 300px;">
<canvas id="penjualanPerjamChart"></canvas>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="servicePerjam">
<b>Omset Service</b>
<div style="height: 300px;">
<canvas id="servicePerjamChart"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<h3 class="font-bold">Transaksi</h3>
</div>
<div class="body">
<div class="row clearfix">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="info-box hover-zoom-effect">
<div class="icon bg-teal">
<i class="material-icons">build</i>
</div>
<div class="content">
<div class="text">Service</div>
<div class="number">
{{ $t_service }}
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="info-box hover-zoom-effect">
<div class="icon bg-blue">
<i class="material-icons">attach_money</i>
</div>
<div class="content">
<div class="text">Penjualan</div>
<div class="number">
{{ $t_penjualan }}
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="info-box hover-zoom-effect">
<div class="icon bg-green">
<i class="material-icons">shopping_cart</i>
</div>
<div class="content">
<div class="text">Pembelian</div>
<div class="number">
{{ $t_pembelian }}
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="info-box hover-zoom-effect">
<div class="icon bg-cyan">
<i class="material-icons">money_off</i>
</div>
<div class="content">
<div class="text">Retur Penjualan</div>
<div class="number">
{{ $t_retur_penjualan }}
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="info-box hover-zoom-effect">
<div class="icon bg-grey">
<i class="material-icons">remove_shopping_cart</i>
</div>
<div class="content">
<div class="text">Retur Pembelian</div>
<div class="number">
{{ $t_retur_pembelian }}
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="info-box hover-zoom-effect">
<div class="icon bg-orange">
<i class="material-icons">monetization_on</i>
</div>
<div class="content">
<div class="text">Pembayaran Piutang</div>
<div class="number">
{{ $t_pembayaran_piutang }}
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="info-box hover-zoom-effect">
<div class="icon bg-red">
<i class="material-icons">business_center</i>
</div>
<div class="content">
<div class="text">Pembayaran Hutang</div>
<div class="number">
{{ $t_pembayaran_hutang }}
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="info-box hover-zoom-effect">
<div class="icon bg-lime">
<i class="material-icons">store_mall_directory</i>
</div>
<div class="content">
<div class="text">Transaksi Gudang</div>
<div class="number">
{{ $t_transaksi_gudang }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card col-lg-12 col-md-12 col-sm-12 ">
<div class="row" style="padding-bottom:0px!important;padding-top:30px!important">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="info-box-4 hover-expand-effect">
<div class="icon">
<i class="material-icons col-teal">account_balance_wallet</i>
</div>
<div class="content">
<div class="text">Total Omset Sistem</div>
<div class="number">Rp. {{ number_format($omsetKotor) }}</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="info-box-4 hover-expand-effect">
<div class="icon">
<i class="material-icons col-green">credit_card</i>
</div>
<div class="content">
<div class="text">Total Omset Kasir (Total omset kasir + Dp selesai)</div>
<div class="number">Rp. {{ number_format($t_laporan_kasir) }}</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="info-box-4 hover-expand-effect">
<div class="icon">
<i class="material-icons col-deep-orange">book</i>
</div>
<div class="content">
<div class="text">Total Uang Muka Sistem</div>
<div class="number">Rp.
{{ number_format($dp_total_penjualan + $dp_total_service) }}
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="info-box-4 hover-expand-effect">
<div class="icon">
<i class="material-icons col-orange">event_note</i>
</div>
<div class="content">
<div class="text">Total Uang Muka Kasir</div>
<div class="number">Rp. {{ number_format($t_laporan_uang_muka) }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endif
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<h3 class="font-bold">Transaksi Service </h3>
</div>
<div class="body">
<div class="row clearfix">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="info-box hover-zoom-effect">
<div class="icon bg-blue">
<i class="material-icons">build</i>
</div>
<div class="content">
<div class="text">Service On Progress</div>
<div class="number">
{{ $t_service_proses }}
</div>
</div>
</div>
</div>
</div>
<h4>Status Perbaikan</h4>
<div class="row clearfix">
<div class="col-lg-2 col-md-2 col-sm-6 col-xs-12">
<div class="info-box-2 bg-deep-orange hover-zoom-effect">
<div class="icon">
<i class="material-icons">av_timer</i>
</div>
<div class="content">
<div class="text">Pending</div>
<div class="number">
@if (isset($pending))
{{ $pending }}
@else
0
@endif
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-6 col-xs-12">
<div class="info-box-2 bg-indigo hover-zoom-effect">
<div class="icon">
<i class="material-icons">format_indent_increase</i>
</div>
<div class="content">
<div class="text">Indent</div>
<div class="number">
@if (isset($indent))
{{ $indent }}
@else
0
@endif
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-6 col-xs-12">
<div class="info-box-2 bg-teal hover-zoom-effect">
<div class="icon">
<i class="material-icons">playlist_add_check</i>
</div>
<div class="content">
<div class="text">Pengecekan</div>
<div class="number">
@if (isset($pengecekan))
{{ $pengecekan }}
@else
0
@endif
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-6 col-xs-12">
<div class="info-box-2 bg-amber hover-zoom-effect">
<div class="icon">
<i class="material-icons">check_box</i>
</div>
<div class="content">
<div class="text">Konfirmasi</div>
<div class="number">
@if (isset($konfirmasi))
{{ $konfirmasi }}
@else
0
@endif
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-6 col-xs-12">
<div class="info-box-2 bg-deep-purple hover-zoom-effect">
<div class="icon">
<i class="material-icons">phonelink_ring</i>
</div>
<div class="content">
<div class="text">HP Normal</div>
<div class="number">
@if (isset($hp_normal))
{{ $hp_normal }}
@else
0
@endif
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-6 col-xs-12">
<div class="info-box-2 bg-pink hover-zoom-effect">
<div class="icon">
<i class="material-icons">query_builder</i>
</div>
<div class="content">
<div class="text">Pending Perbaikan</div>
<div class="number">
@if (isset($pending_perbaikan))
{{ $pending_perbaikan }}
@else
0
@endif
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-6 col-xs-12">
<div class="info-box-2 bg-blue hover-zoom-effect">
<div class="icon">
<i class="material-icons">build</i>
</div>
<div class="content">
<div class="text">Proses Perbaikan</div>
<div class="number">
@if (isset($proses_perbaikan))
{{ $proses_perbaikan }}
@else
0
@endif
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-6 col-xs-12">
<div class="info-box-2 bg-green hover-zoom-effect">
<div class="icon">
<i class="material-icons">done</i>
</div>
<div class="content">
<div class="text">Selesai Perbaikan</div>
<div class="number">
@if (isset($selesai))
{{ $selesai }}
@else
0
@endif
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-6 col-xs-12">
<div class="info-box-2 bg-red hover-zoom-effect ">
<div class="icon">
<i class="material-icons">close</i>
</div>
<div class="content">
<div class="text">Batal</div>
<div class="number">
@if (isset($batal))
{{ $batal }}
@else
0
@endif
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-6 col-xs-12">
<div class="info-box-2 bg-grey hover-zoom-effect">
<div class="icon">
<i class="material-icons">bug_report</i>
</div>
<div class="content">
<div class="text">Tidak Bisa Diperbaiki</div>
<div class="number">
@if (isset($tidak_bisa_diperbaiki))
{{ $tidak_bisa_diperbaiki }}
@else
0
@endif
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-6 col-xs-12">
<div class="info-box-2 bg-brown hover-zoom-effect">
<div class="icon">
<i class="material-icons">highlight_off</i>
</div>
<div class="content">
<div class="text">Gagal Perbaikan</div>
<div class="number">
@if (isset($gagal_perbaikan))
{{ $gagal_perbaikan }}
@else
0
@endif
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-6 col-xs-12">
<div class="info-box-2 bg-blue-grey hover-zoom-effect">
<div class="icon">
<i class="material-icons">money_off</i>
</div>
<div class="content">
<div class="text">Tidak Deal</div>
<div class="number">
@if (isset($tidak_deal))
{{ $tidak_deal }}
@else
0
@endif
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card col-lg-12 col-md-12 col-sm-12">
<div class="header">
<h3 class="font-bold">Item Terjual</h3>
</div>
<div class="body">
<div class="table-responsive" style=" ">
<table id="table_barang"
class=" table-responsive table table-bordered table-striped table-hover ">
<thead>
<tr>
<th>Nama Barang</th>
<th>Kategori</th>
<th>Transaksi</th>
<th>Terjual</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
@push('scripts')
{{-- data Table --}}
<script src="{{ url('material') }}/plugins/jquery-datatable/jquery.dataTables.js"></script>
<script src="{{ url('material') }}/js/pages/tables/jquery-datatable.js"></script>
<script src="{{ url('material') }}/plugins/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js"></script>
<!-- Jquery DataTable Plugin Js -->
{{-- data Table --}}
@if (str_contains(request()->getHost(), "fixmate"))
<script>
let element = document.getElementById("countdown");
var countDownDate = new Date(element.dataset.countdown).getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
element.innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s Fixmate Free";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
@endif
<script>
document.addEventListener("DOMContentLoaded", function() {
var table = $('#table_barang').DataTable({
"order": [[ 3, 'desc' ]]
});
// var table = document.querySelector('#table_barang');
var periode = {!! json_encode($periode) !!};
var periodeString = periode.join(' - ');
var encodedPeriode = encodeURIComponent(periodeString);
function loadData() {
$.ajax({
url: '/itemterjual?periode=' + encodedPeriode,
type: 'GET',
success: function(data) {
table.destroy();
var tbody = $('#table_barang tbody');
tbody.empty();
var items = Object.values(data);
items.forEach(function(item) {
var row = '<tr>' +
'<td>' + item.nama_barang + '</td>' +
'<td>' + item.kategori + '</td>' +
'<td>' + item.transaksi + '</td>' +
'<td>' + item.total_qty + '</td>' +
'</tr>';
tbody.append(row);
});
table = $('#table_barang').DataTable({
"order": [[ 3, 'desc' ]]
});
},
error: function(xhr, status, error) {
console.error('Error:', error);
}
});
}
loadData();
// var observer = new IntersectionObserver(function(entries, observer) {
// entries.forEach(function(entry) {
// if (entry.isIntersecting) {
// loadData();
// }
// });
// }, {
// threshold: 0.1
// });
// observer.observe(table);
});
</script>
@endpush
@endsection