237 lines
13 KiB
PHP
237 lines
13 KiB
PHP
@if (Auth::check())
|
|
@extends('layouts.master')
|
|
@else
|
|
@extends('layouts.apps')
|
|
@endif
|
|
|
|
@section('styles')
|
|
<!-- CSS untuk Efek Ceklist -->
|
|
<style>
|
|
.success-checkmark {
|
|
width: 80px;
|
|
height: 80px;
|
|
margin: 0 auto;
|
|
}
|
|
.check-icon {
|
|
width: 80px;
|
|
height: 80px;
|
|
position: relative;
|
|
border-radius: 50%;
|
|
box-sizing: content-box;
|
|
border: 4px solid #4CAF50;
|
|
}
|
|
.check-icon::before {
|
|
top: 3px; left: -2px; width: 30px; transform-origin: 100% 50%; border-radius: 100px 0 0 100px;
|
|
}
|
|
.check-icon::after {
|
|
top: 0; left: 30px; width: 60px; transform-origin: 0 50%; border-radius: 0 100px 100px 0; animation: rotateCircle 4.25s ease-in;
|
|
}
|
|
.icon-line {
|
|
height: 5px; background-color: #4CAF50; display: block; border-radius: 2px; position: absolute; z-index: 10;
|
|
}
|
|
.line-tip { top: 46px; left: 14px; width: 25px; transform: rotate(45deg); }
|
|
.line-long { top: 38px; right: 8px; width: 47px; transform: rotate(-45deg); }
|
|
|
|
@keyframes rotateCircle {
|
|
0% { transform: rotate(0deg); }
|
|
5% { transform: rotate(0deg); }
|
|
12% { transform: rotate(-5deg); }
|
|
100% { transform: rotate(-270deg); }
|
|
}
|
|
</style>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<div class="container-scroller">
|
|
<div class="container-fluid page-body-wrapper full-page-wrapper">
|
|
<div class="main-panel">
|
|
<div class="content-wrapper d-flex align-items-center auth px-0">
|
|
<div class="row w-100 mx-0">
|
|
<div class="col-lg-4 mx-auto">
|
|
<div class="auth-form-light text-left py-5 px-4 px-sm-5">
|
|
<div class="text-center mb-1">
|
|
<img src="{{ asset('images/parkq-services.png') }}"
|
|
alt="Logo Perusahaan"
|
|
style="max-height: 80px;">
|
|
</div>
|
|
<!-- Tampilan Jika Berhasil (Success Card) -->
|
|
@if(session('status_update'))
|
|
<div class="card border-success mb-4 shadow animate__animated animate__fadeIn">
|
|
<div class="card-body text-center">
|
|
<!-- Animasi Ceklist Sederhana -->
|
|
<div class="success-checkmark">
|
|
<div class="check-icon">
|
|
<span class="icon-line line-tip"></span>
|
|
<span class="icon-line line-long"></span>
|
|
<div class="icon-circle"></div>
|
|
<div class="icon-fix"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h4 class="text-success mt-3">{{ session('status_update') }}</h4>
|
|
<p class="text-muted">Jenis kendaraan telah berhasil diubah di sistem.</p>
|
|
<a href="{{ route('apps.index') }}" class="btn btn-outline-success btn-sm">Kembali ke Beranda</a>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
{{-- @if($data) --}}
|
|
{{-- @if($data || $cameraText) --}}
|
|
<div class="card shadow-sm border-0">
|
|
<div class="card-body p-4">
|
|
|
|
<h4 class="mb-3 font-weight-bold text-primary">
|
|
<i class="fa fa-edit mr-2"></i> Ubah Jenis Kendaraan
|
|
</h4>
|
|
<hr>
|
|
|
|
<form action="{{ route('apps.update', $data->no_pol ?? '') }}" method="POST">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
{{-- Informasi Transaksi --}}
|
|
<div class="bg-light rounded p-3 mb-4">
|
|
|
|
<div class="row mb-2">
|
|
<div class="col-md-4 font-weight-bold">
|
|
No. Transaksi
|
|
</div>
|
|
<div class="col-md-8 text-md-right text-primary font-weight-bold">
|
|
@if ($data)
|
|
{{ $data->no_pol }}
|
|
<input type="hidden" name="no_transaksi" value="{{ $data->no_pol }}">
|
|
@else
|
|
<div id="reader" style="width:300px;"></div>
|
|
|
|
<input type="text"
|
|
id="barcode_result"
|
|
name="barcode_result"
|
|
class="form-control mt-3"
|
|
placeholder="Hasil scan muncul disini">
|
|
{{-- <input type="file"
|
|
name="foto_kamera"
|
|
accept="image/*"
|
|
capture="environment"
|
|
class="form-control mb-2"> --}}
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-2">
|
|
<div class="col-md-4 font-weight-bold">
|
|
Jam Masuk
|
|
</div>
|
|
<div class="col-md-8 text-md-right">
|
|
@if ($data)
|
|
{{ date('Y-m-d H:i:s', strtotime($data->waktu_masuk)) }}
|
|
@else
|
|
Not Detected
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-4 font-weight-bold">
|
|
Pintu Masuk
|
|
</div>
|
|
<div class="col-md-8 text-md-right">
|
|
@if ($data)
|
|
{{ $data->gateIn }}
|
|
<span class="text-muted">(Gate : {{ $data->id_pintu_masuk }})</span>
|
|
@else
|
|
Not Detected
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-4 font-weight-bold">
|
|
Kendaraan terbaca :
|
|
</div>
|
|
<div class="col-md-8 text-md-right">
|
|
@if ($data)
|
|
<span class="text-muted"> <strong>{{ $data->vehiclename }}</strong></span>
|
|
@else
|
|
Not Detected
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{{-- Ubah Kendaraan --}}
|
|
<div class="form-group">
|
|
<label class="font-weight-bold">
|
|
Ubah Jenis Kendaraan
|
|
</label>
|
|
{{-- {{ json_encode($vehicle) }} --}}
|
|
@if ($data)
|
|
<select name="id_kendaraan_baru" class="form-control shadow-sm rounded" required>
|
|
<option value="" disabled>-- Pilih Jenis Kendaraan --</option>
|
|
@foreach ($vehicle as $kendaraan)
|
|
<option value="{{ $kendaraan->id }}"> {{ $kendaraan->nama }}</option>
|
|
@endforeach
|
|
</select>
|
|
@else
|
|
Not Detected
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Tombol --}}
|
|
<div class="d-flex justify-content-end gap-2 mt-4">
|
|
<a href="{{ route('apps.index') }}"
|
|
class="btn btn-outline-secondary px-4">
|
|
Batal
|
|
</a>
|
|
|
|
<button type="submit"
|
|
class="btn btn-primary px-4 shadow-sm">
|
|
Simpan Perubahan
|
|
</button>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{{-- @else
|
|
<h1>Halaman Utama Apps</h1>
|
|
<p>Ini adalah tampilan standar ketika tidak ada ID yang dipilih.</p>
|
|
@endif --}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('javascript')
|
|
<script src="https://unpkg.com/html5-qrcode"></script>
|
|
|
|
<script>
|
|
function onScanSuccess(decodedText) {
|
|
document.getElementById('barcode_result').value = decodedText;
|
|
|
|
// Optional: auto kirim ke server
|
|
fetch("{{ route('apps.scan') }}", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
"X-CSRF-TOKEN": "{{ csrf_token() }}"
|
|
},
|
|
body: JSON.stringify({ code: decodedText })
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
console.log(data);
|
|
});
|
|
}
|
|
|
|
let html5QrcodeScanner = new Html5QrcodeScanner(
|
|
"reader",
|
|
{ fps: 10, qrbox: 250 }
|
|
);
|
|
|
|
html5QrcodeScanner.render(onScanSuccess);
|
|
</script>
|
|
@endsection |