@extends('Front.layout')
@push('front-styles')
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #f8f9fa;
}
.container {
max-width: 800px;
}
.tracking-card {
border: none;
border-radius: 0.75rem;
}
.status-header {
background-color: #e9ecef;
border-bottom: 1px solid #dee2e6;
font-weight: 600;
}
/* Styling for the progress tracker */
.progress-timeline {
display: flex;
justify-content: space-between;
list-style: none;
padding: 0;
margin: 2rem 0;
position: relative;
}
.progress-timeline::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 3px;
background-color: #e9ecef;
transform: translateY(-50%);
z-index: 1;
}
.progress-step {
position: relative;
z-index: 2;
text-align: center;
}
.progress-marker {
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #e9ecef;
border: 3px solid #e9ecef;
display: inline-block;
transition: all 0.3s ease;
}
.progress-step.completed .progress-marker {
background-color: #198754;
/* Green for completed */
border-color: #198754;
}
.progress-step.active .progress-marker {
background-color: #0d6efd;
/* Blue for active */
border-color: #0d6efd;
transform: scale(1.2);
}
.progress-step-label {
margin-top: 0.5rem;
font-size: 0.85rem;
color: #6c757d;
font-weight: 500;
}
.progress-step.completed .progress-step-label,
.progress-step.active .progress-step-label {
color: #212529;
font-weight: 600;
}
</style>
@endpush
@push('front-scripts')
<script>
var pixels = @json($metaPixels->where('target_page', 'status-perbaikan.index')->where('target_element', 'button#cek-button')->toArray());
console.log(pixels);
document.querySelector("button#cek-button").addEventListener('click', function(event) {
event.preventDefault();
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}`
});
}
}
}
setTimeout(function() {
document.getElementById('trackingForm').submit();
}, 200);
});
</script>
@endpush
@section('frontcontent')
<div class="container my-5" style="min-height: 70vh;">
<!-- Page Header -->
<div class="text-center mb-5">
<h1 class="fw-bold">Lacak Status Perbaikan</h1>
<p class="text-muted">Masukkan Nomor Servis Anda di bawah ini untuk melihat progres perbaikan perangkat Anda.
</p>
</div>
<!-- Tracking Form Card -->
<div class="card shadow-sm tracking-card">
<div class="card-body p-4">
<form id="trackingForm" method="POST" action="{{ route('status-perbaikan.cek') }}">
@csrf
<div class="row align-items-center">
<div class="col-md-9 mb-3 mb-md-0">
<label for="serviceNumber" class="form-label visually-hidden">Nomor Servis</label>
<input type="text" class="form-control form-control-lg" name="no_service" id="serviceNumber"
placeholder="Masukan nomor service..." required
value="{{ old('no_service', @$no_service) }}">
</div>
<div class="col-md-3">
<button type="submit" class="btn btn-lg btn-primary w-100"
style="background-color: {{ $landing->primary_color }};color: {{ $landing->secondary_color }};"
id="cek-button">
Cek
</button>
</div>
</div>
</form>
</div>
</div>
@if (isset($service))
@if ($service)
<!-- Divider for better visual separation -->
<hr class="my-4 " id="resultDivider">
<!-- Result Display Area (Initially Hidden) -->
<div id="statusResult">
<div class="card shadow-sm tracking-card">
<div class="card-header status-header d-flex justify-content-between align-items-center p-3">
<span id="resultHeader">Status Perbaikan untuk Nomor Servis:</span>
<span id="resultServiceNumber" class="badge bg-secondary">{{ $service->no_service }}</span>
</div>
<div class="card-body p-4 p-md-5">
{{-- <!-- Progress Timeline -->
<div class="progress-timeline">
<div class="progress-step" id="step1">
<div class="progress-marker"></div>
<div class="progress-step-label">Diterima</div>
</div>
<div class="progress-step" id="step2">
<div class="progress-marker"></div>
<div class="progress-step-label">Diagnosa</div>
</div>
<div class="progress-step" id="step3">
<div class="progress-marker"></div>
<div class="progress-step-label">Pengerjaan</div>
</div>
<div class="progress-step" id="step4">
<div class="progress-marker"></div>
<div class="progress-step-label">Selesai</div>
</div>
<div class="progress-step" id="step5">
<div class="progress-marker"></div>
<div class="progress-step-label">Siap Diambil</div>
</div>
</div>
<!-- End of Progress Timeline -->
<hr> --}}
<div class="row">
<div class="col-md-12 text-center">
@switch($service->status)
@case('pending')
<span class="fs-2 badge bg-danger">{{ $service->status }}</span>
@break
@case('tidak_deal')
<span class="fs-2 badge bg-danger"
style="text-transform: capitalize;">{{ str_replace('_', ' ', $service->status) }}</span>
@break
@case('konfirmasi')
<span class="fs-2 badge bg-warning"
style="text-transform: capitalize;">{{ $service->status }}</span>
@break
@case('pending_perbaikan')
<span class="label bg-cyan"
style="text-transform: capitalize;">{{ str_replace('_', ' ', $service->status) }}</span>
@break
@case('tidak_bisa_diperbaiki')
<span class="fs-2 badge bg-danger text-center "
style="text-transform: capitalize;">{{ str_replace('_', ' ', $service->status) }}</span>
@break
@case('hp_bisa_diperbaiki')
<span class="label bg-light-green text-center "
style="text-transform: capitalize;">{{ str_replace('_', ' ', $service->status) }}
</span>
@break
@case('hp_normal')
<span class="label bg-indigo text-center "
style="text-transform: capitalize;">{{ str_replace('_', ' ', $service->status) }}</span>
@break
@case('gagal_perbaikan')
<span class="fs-2 badge bg-danger text-center " style="text-transform: capitalize;">
{{ str_replace('_', ' ', $service->status) }}</span>
@break
@case('pengecekan')
<span class="fs-2 badge bg-info">{{ $service->status }}</span>
@break
@case('indent')
<span class="fs-2 badge bg-info">{{ $service->status }}</span>
@break
@case('proses_perbaikan')
<span class="fs-2 badge bg-primary"
style="text-transform: capitalize;">{{ str_replace('_', ' ', $service->status) }}</span>
@break
@case('selesai')
<span class="fs-2 badge bg-success">Selesai Perbaikan</span>
@break
@case('batal')
<span class="fs-2 badge bg-danger">{{ $service->status }}</span>
@break
@default
<span class="fs-2 badge bg-success">{{ $service->status }}</span>
@endswitch
</div>
</div>
<!-- Details Section -->
{{-- <div class="row mt-4">
<div class="col-md-6">
<h5 class="fw-semibold">Informasi Perangkat</h5>
<ul class="list-unstyled text-muted">
<li><strong>Perangkat:</strong> {{ $service->merk }}</li>
<li><strong>Model:</strong> {{ $service->tipe }}</li>
<li><strong>Warna:</strong> {{ $service->color }}</li>
</ul>
</div>
<div class="col-md-6">
<h5 class="fw-semibold">Informasi Pelanggan</h5>
<ul class="list-unstyled text-muted">
<li><strong>Nama:</strong> {{$service->pelanggan->nama_pelanggan}}</li>
<li><strong>Tanggal Masuk:</strong> {{$service->tanggal}}</li>
<li><strong>Tanggal Selesai:</strong> {{$service->tanggal_selesai ?? "-"}}</li>
</ul>
</div>
</div> --}}
{{-- <!-- History Log Section -->
<div class="mt-4">
<h5 class="fw-semibold">Riwayat Status</h5>
<ul class="list-group" id="statusHistory">
<!-- History items will be populated by JavaScript -->
</ul>
</div> --}}
</div>
<div class="card-footer text-center text-muted p-3">
Ada pertanyaan? Hubungi kami di {{ $profil->kontak }}.
</div>
</div>
</div>
@else
<!-- Not Found Alert (Initially Hidden) -->
<div id="notFoundAlert" class="alert alert-danger mt-4" role="alert">
<h5 class="alert-heading">Tidak Ditemukan!</h5>
<p>Nomor servis yang Anda masukkan tidak ditemukan. Mohon periksa kembali nomor Anda dan coba lagi.</p>
</div>
@endif
@endif
</div>
@endsection
Anons79 File Manager Version 1.0, Coded By Anons79
Email: [email protected]
Anons79 Mini Shell