@extends('layouts.app',[
'title'=>'Konsultasi'
])
@php
$trackingView = request()->trackingView ?? false;
$canPesan = \Helper::hakAkses('pesan&followup', 'view');
@endphp
@push('styles')
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style>
.btn-active {
background-color: #a88b42;
color: white !important;
}
.btn-inactive {
background-color: #E9C46A;
color: white !important;
}
</style>
<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')
{{-- modal to update tanggal jam booking --}}
<div class="modal fade" id="updateBookingModal" tabindex="-1" role="dialog" aria-labelledby="updateBookingModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="updateBookingModalLabel">Update Tanggal dan Jam Booking</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="updateBookingForm">
@csrf
<input type="hidden" name="konsultasi_id" id="konsultasi_id">
<p>No Konsultasi : <span id="no_konsultasi"></span></p>
<p>Nama Pelanggan : <span id="nama_pelanggan"></span></p>
<p>Telp Pelanggan : <span id="telp_pelanggan"></span></p>
<div class="form-group">
<div class="input-group">
<div class="form-line">
<label for="tanggal_booking">Tanggal Booking</label>
<input type="date" class="form-control" id="tanggal_booking" name="tanggal_booking" required>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="form-line">
<label for="jam_booking">Jam Booking</label>
<input type="time" class="form-control" id="jam_booking" name="jam_booking" required>
</div>
</div>
</div>
<div class="d-flex">
<button type="submit" class="btn btn-success">Update</button>
@if($canPesan)
<a type="submit" class="btn btn-warning" href="{{ route('konsultasi.pesan-default') }}" target="_blank">Edit Notifikasi</a>
<a type="submit" class="btn btn-warning" href="{{ route('konsultasi.pesan-default-schedule.index') }}" target="_blank">Edit Pengingat</a>
@endif
</div>
</form>
</div>
</div>
</div>
</div>
<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>
@if ($trackingView)
<script>
//disable all tag a link and all button
$(document).on('click', 'a, button', function(e) {
e.preventDefault();
});
</script>
@else
<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);
});
});
//when .booking-service click, get data konsultasi from attribute data-konsultasi, show modal with data no_konsultasi, nama_pelanggan, telp_pelanggan and form input for tanggal and jam booking
$(document).on('click', '.booking-service', function() {
event.preventDefault();
const dataKonsultasi = JSON.parse($(this).attr('data-konsultasi'));
$('#konsultasi_id').val(dataKonsultasi.id);
$('#no_konsultasi').text(dataKonsultasi.no_konsultasi);
$('#nama_pelanggan').text(dataKonsultasi.nama_pelanggan);
$('#telp_pelanggan').text(dataKonsultasi.telp_pelanggan);
var tanggalJamBooking = dataKonsultasi.tanggal_jam_booking ? dataKonsultasi.tanggal_jam_booking.split(' ') : [];
$('#tanggal_booking').val(tanggalJamBooking[0] || '');
$('#jam_booking').val(tanggalJamBooking[1] || '');
$('#updateBookingModal').modal('show');
});
//submit updateBookingForm with ajax to konsultasi.updateBooking
$('#updateBookingForm').on('submit', function(e) {
e.preventDefault();
//disable submit button
const formEl = $(this);
formEl.find('button[type="submit"]').prop('disabled', true);
var formData = $(this).serialize();
$.ajax({
url: "{{ route('konsultasi.updateBooking',':id') }}".replace(':id', $('#konsultasi_id').val()),
type: "POST",
data: formData,
success: function(response) {
$('#updateBookingModal').modal('hide');
$("#konsultasi-" + response.konsultasi.id + " .tanggal_jam_booking").text(response.konsultasi.tanggal_jam_booking);
$("#konsultasi-" + response.konsultasi.id + " .booking-service").data('konsultasi', JSON.stringify(response.konsultasi));
$("#konsultasi-" + response.konsultasi.id + " .status_penyelesaian").html('<span class="label label-primary">Booking Service</span>');
notyf.success(response.message);
formEl.find('button[type="submit"]').prop('disabled', false);
},
error: function(xhr, status, error) {
notyf.error("Error updating booking");
console.error("Error updating booking:", error);
formEl.find('button[type="submit"]').prop('disabled', false);
}
});
});
</script>
@endif
<script>
var targetElements = @json($metaPixels->where('target_page', 'konsultasi.index')->groupBy('target_element'));
for (const t in targetElements) {
if (Object.prototype.hasOwnProperty.call(targetElements, t)) {
const pixels = targetElements[t];
$(document).on('click', `${t} a`, function() {
event.preventDefault();
const nextUrl = $(this).attr('href');
for (const p in pixels) {
if (Object.prototype.hasOwnProperty.call(pixels, p)) {
const pixel = pixels[p];
if (pixel.source == "meta") {
//fbq('init', `${pixel.pixel_id}`);
fbq('trackCustom', `${pixel.pixel_event}`);
} else if (pixel.source == "tiktok") {
//ttq.load(`${pixel.pixel_id}`);
ttq.track(`${pixel.pixel_event}`);
} else if (pixel.source == "gtm") {
dataLayer.push({
'event': `${pixel.pixel_event}`
});
}
}
}
console.log(nextUrl);
if(nextUrl != "" && nextUrl != "#" && nextUrl != undefined){
setTimeout(function() {
window.location.href = nextUrl;
}, 200);
}
});
}
}
</script>
@endpush
@section('content')
<div class="container-fluid">
<div class="block-header">
<h2>Prospek/Konsultasi</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">
<h3>Data Prospek</h3>
</div>
<div class="body">
<div class="grid-container-center grid-col-2">
<div class="info-box big hover-zoom-effect">
<div class="icon bg-green">
<i class="material-icons">format_list_bulleted
</i>
</div>
<div class="content">
<div >
<div class="text">Total Masuk</div>
<div class="number">{{ $total_masuk }}</div>
</div>
</div>
</div>
<div class="info-box big hover-zoom-effect">
<div class="icon bg-purple">
<i class="material-icons">data_usage
</i>
</div>
<div class="content">
<div >
<div class="text">Rasio Service Masuk</div>
<div class="number">{{ number_format((float)$rasio_masuk, 2, '.', '') }} %</div>
</div>
</div>
</div>
</div>
<div class="grid-container grid-col-5">
<div class="info-box hover-zoom-effect">
<div class="icon bg-blue">
<i class="material-icons">refresh</i>
</div>
<div class="content">
<div class="text">Belum Direspon</div>
<div class="number">{{ $datas_process }}</div>
</div>
</div>
<div class="info-box hover-zoom-effect">
<div class="icon bg-amber">
<i class="material-icons">add_alert
</i>
</div>
<div class="content">
<div class="text">Sudah Direspon</div>
<div class="number">{{ $datas_sudah_direspon }}</div>
</div>
</div>
<div class="info-box hover-zoom-effect">
<div class="icon bg-blue">
<i class="material-icons">date_range
</i>
</div>
<div class="content">
<div class="text">Booking Service</div>
<div class="number">{{ $data_booking_service }}</div>
</div>
</div>
<div class="info-box hover-zoom-effect">
<div class="icon bg-red">
<i class="material-icons">cancel
</i>
</div>
<div class="content">
<div class="text">Tidak Respon Lagi</div>
<div class="number">{{ @$datas_tidak_direspon }}</div>
</div>
</div>
<div class="info-box hover-zoom-effect">
<div class="icon bg-green">
<i class="material-icons">check_circle</i>
</div>
<div class="content">
<div class="text">Service Masuk</div>
<div class="number">{{ $datas_success }}</div>
</div>
</div>
</div>
<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">person</i>
</span>
<div class="form-line">
<input class="form-control" placeholder="No.Konsultasi/Nama Pelanggan /No Telp"
name="key" value="{{ $request->key }}">
</div>
</div>
</div>
<div class="col-lg-2 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="status" class="form-control">
<option value="" @selected(request()->status == '')> Semua Status </option>
<option value="Process" @selected(request()->status == 'Process')> Belum Direspon </option>
<option value="Sudah Direspon" @selected(request()->status == 'Sudah Direspon')> Sudah direspon </option>
<option value="Booking Service" @selected(request()->status == 'Booking Service')> Booking Service </option>
<option value="Tidak Respon Lagi" @selected(request()->status == 'Tidak Respon Lagi')> Tidak Respon Lagi </option>
<option value="Service Masuk" @selected(request()->status == 'Service Masuk')> Service Masuk </option>
</select>
</div>
</div>
</div>
<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-2 col-md-3">
<div class="input-group">
<button class="btn btn-primary">Cari</button>
</div>
</div>
</div>
</form>
<div class="table-responsive">
<table class="table table-hover dashboard-task-infos">
<thead>
<tr>
<th>No.Konsultasi</th>
<th>Tanggal</th>
<th>Nama Pelanggan</th>
<th>No WA</th>
<th>Kota/Kecamatan</th>
<th style="min-width: 200px;">Alamat</th>
<th>Merk & Tipe HP</th>
<th style="min-width: 300px;">Keterangan</th>
<th>Status Penyelesaian</th>
<th>Pesan Follow-Up</th>
<th style="min-width: 100px;">Tanggal & Jam Booking</th>
@if (\Helper::hakAkses('Konsultasi', 'action'))
<th>Action</th>
@endif
@if (\Helper::hakAkses('Konsultasi', 'pesan'))
<th>Tools</th>
@endif
</tr>
</thead>
<tbody>
@foreach ($datas as $key => $data)
<tr id="konsultasi-{{ $data->id }}">
<td>{{ $data->no_konsultasi }}</td>
<td>{{ date('d F Y', $data->created_at->timestamp) }}</td>
<td>{{ $data->nama_pelanggan }}</td>
<td>{{ $data->telp_pelanggan }}</td>
<td>{{ $data->kota_kecamatan_pelanggan }}</td>
<td>{{ $data->alamat_pelanggan }}</td>
<td>{{ $data->merk_hp . ' ' . $data->tipe_hp }}</td>
<td>{{ $data->keluhan }}</td>
<td class="status_penyelesaian">
@switch($data->status_penyelesaian)
@case('Process')
<span class="label label-info">Belum Direspon</span>
@break
@case('Sudah Direspon')
<span class="label bg-amber"> Sudah Direspon </span>
@break
@case('Booking Service')
<span class="label label-primary">Booking Service</span>
@break
@case('Tidak Respon Lagi')
<span class="label bg-red"> Tidak Respon Lagi </span>
@break
@case('Service Masuk')
<span class="label label-success">Service Masuk </span>
@break
@endswitch
</td>
<td>
<div style="display: flex; flex-direction: row; gap: 10px; padding: 10px;">
@php
if (isset($data->follow_up)) {
$array = explode(',', $data->follow_up);
} else {
$array = [];
}
@endphp
@foreach ($pesan_konsultasis as $p)
@if ($p->tampilkan)
<a href="{{ route('pesanKonsultasi', [$data->id, $p->id]) }} "
class="btn btn-circle waves-effect waves-circle waves-float {{ in_array($p->id, $array) ? 'btn-active' : 'btn-inactive' }}"
style="margin: 5px; min-width:40px; min-height:40px; color:white!important;"
data-toggle="tooltip" data-placement="top"
title="{{ $p->nama_pesan }}">
<i class="material-icons">{{ $p->icon_pesan }}</i>
</a>
@endif
@endforeach
@if ($canPesan)
<a href="{{ route('pesan_konsultasi.index') }}"
class="btn btn-circle waves-effect waves-circle waves-float btn-inactive "
style="margin: 5px; min-width:40px; min-height:40px; color:white!important;"
data-toggle="tooltip" data-placement="top" title="Pengaturan Pesan">
<i class="material-icons">settings</i>
</a>
@endif
</div>
</td>
<td class="tanggal_jam_booking">
{{ $data->tanggal_jam_booking ?? "-" }}<br>
@if ($data->status_penyelesaian == "Booking Service" && $data->tanggal_jam_booking != null && strtotime($data->tanggal_jam_booking) < strtotime(date("Y-m-d H:i:s")))
<span class="label label-danger">
Lewat Jadwal
</span>
@endif
</td>
@if (\Helper::hakAkses('Konsultasi', 'action'))
{{-- @dd($data->status_penyelesaian) --}}
<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">
@if ($data->status_penyelesaian != 'Process' || $trackingView)
<li class="bg-info pending-respon"><a
href="{{ route('konsultasi.status', $data->id) }}?status=Process">Belum Direspon</a>
</li>
@endif
@if ($data->status_penyelesaian != 'Sudah Direspon' || $trackingView)
<li class="bg-warning sudah-direspon"><a
href="{{ route('konsultasi.status', $data->id) }}?status=Sudah%20Direspon">Sudah
Direspon</a>
</li>
@endif
@if ($data->status_penyelesaian != 'Tidak Respon Lagi' || $trackingView)
<li class="bg-warning tidak-direspon"><a
href="{{ route('konsultasi.status', $data->id) }}?status=Tidak%20Respon%20Lagi">
Tidak Respon Lagi</a>
</li>
@endif
<li class="booking-service" data-konsultasi='{{ json_encode($data) }}'><a
href="#">Booking Service</a>
</li>
@if ($data->status_penyelesaian != 'Service Masuk' || $trackingView)
<li class="bg-success service-masuk"><a
href="{{ route('konsultasi.status', $data->id) }}?status=Service%20Masuk">
Service Masuk</a>
</li>
@endif
@if ($canPesan)
<li role="separator" class="divider"></li>
<li class="pesan-action" >
<a href="{{ route('pesan_action_global.index') }}?model_name=App\Models\Konsultasi">Pesan Action</a>
</li>
@endif
</ul>
</div>
</td>
@endif
@if (\Helper::hakAkses('Konsultasi', 'action'))
<td >
<div style="display: flex;gap:6px;">
<a href="https://wa.me/{{ '628' . substr($data->telp_pelanggan, 2) }}"
target="blank_" class="btn btn-success waves-effect">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20" viewBox="0,0,256,256"
style="fill:#FFFFFF;">
<g fill="#ffffff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(8.53333,8.53333)"><path d="M15,3c-6.627,0 -12,5.373 -12,12c0,2.25121 0.63234,4.35007 1.71094,6.15039l-1.60352,5.84961l5.97461,-1.56836c1.74732,0.99342 3.76446,1.56836 5.91797,1.56836c6.627,0 12,-5.373 12,-12c0,-6.627 -5.373,-12 -12,-12zM10.89258,9.40234c0.195,0 0.39536,-0.00119 0.56836,0.00781c0.214,0.005 0.44692,0.02067 0.66992,0.51367c0.265,0.586 0.84202,2.05608 0.91602,2.20508c0.074,0.149 0.12644,0.32453 0.02344,0.51953c-0.098,0.2 -0.14897,0.32105 -0.29297,0.49805c-0.149,0.172 -0.31227,0.38563 -0.44727,0.51563c-0.149,0.149 -0.30286,0.31238 -0.13086,0.60938c0.172,0.297 0.76934,1.27064 1.65234,2.05664c1.135,1.014 2.09263,1.32561 2.39063,1.47461c0.298,0.149 0.47058,0.12578 0.64258,-0.07422c0.177,-0.195 0.74336,-0.86411 0.94336,-1.16211c0.195,-0.298 0.39406,-0.24644 0.66406,-0.14844c0.274,0.098 1.7352,0.8178 2.0332,0.9668c0.298,0.149 0.49336,0.22275 0.56836,0.34375c0.077,0.125 0.07708,0.72006 -0.16992,1.41406c-0.247,0.693 -1.45991,1.36316 -2.00391,1.41016c-0.549,0.051 -1.06136,0.24677 -3.56836,-0.74023c-3.024,-1.191 -4.93108,-4.28828 -5.08008,-4.48828c-0.149,-0.195 -1.21094,-1.61031 -1.21094,-3.07031c0,-1.465 0.76811,-2.18247 1.03711,-2.48047c0.274,-0.298 0.59492,-0.37109 0.79492,-0.37109z"></path></g></g>
</svg>
</a>
<form action="{{ route('konsultasi.destroy', $data->id) }}"
method="POST" style="display:inline">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger" id="hapus-button"><i
class="material-icons">delete</i></button>
</form>
</div>
</td>
@endif
</tr>
@endforeach
</tbody>
<tfoot>
<tr>
<td>
<div class="text-center">
@include('layouts.includes.pagination')
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
Anons79 File Manager Version 1.0, Coded By Anons79
Email: [email protected]
Anons79 Mini Shell