504 lines
32 KiB
PHP
504 lines
32 KiB
PHP
@extends('layouts.master')
|
|
|
|
@section('styles')
|
|
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/jquery.dataTables.min.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css"
|
|
rel="stylesheet" />
|
|
<link rel="stylesheet" href="{{ asset('vendors/select2/select2.min.css') }}">
|
|
<style>
|
|
.detail-label {
|
|
font-size: 14px;
|
|
color: #6c757d;
|
|
}
|
|
|
|
.detail-value {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #212529;
|
|
}
|
|
|
|
.detail-row {
|
|
margin-bottom: 8px;
|
|
}
|
|
</style>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<div class="container-fluid page-body-wrapper">
|
|
<div class="main-panel">
|
|
<div class="content-wrapper">
|
|
<nav aria-label="Breadcrumb" class="breadcrumb">
|
|
<ol>
|
|
<li><a href="/">Home</a></li>
|
|
<li><a href="/products">Front Office</a></li>
|
|
<li><a href="#">Check IN/OUT</a></li>
|
|
{{-- <li><span aria-current="page"></span></li> --}}
|
|
</ol>
|
|
</nav>
|
|
<div class="row">
|
|
<div class="col-md-12 grid-margin stretch-card">
|
|
<div class="card">
|
|
{{-- <div class="card-header">
|
|
<h3 class="card-title">Pill Tabs style</h3>
|
|
</div> --}}
|
|
<div class="card-body">
|
|
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill"
|
|
data-bs-target="#pills-home" type="button" role="tab"
|
|
aria-controls="pills-home" aria-selected="true">Check IN</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill"
|
|
data-bs-target="#pills-profile" type="button" role="tab"
|
|
aria-controls="pills-profile" aria-selected="false">Check OUT</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill"
|
|
data-bs-target="#pills-contact" type="button" role="tab"
|
|
aria-controls="pills-contact" aria-selected="false">Contact</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill"
|
|
data-bs-target="#pills-disabled" type="button" role="tab"
|
|
aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</button>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content" id="pills-tabContent">
|
|
<div class="tab-pane fade show active" id="pills-home" role="tabpanel"
|
|
aria-labelledby="pills-home-tab" tabindex="0">
|
|
<div class="row g-3">
|
|
|
|
<!-- LEFT PANEL (SCAN / INPUT) -->
|
|
<div class="col-md-2">
|
|
<div class="card shadow-sm h-100">
|
|
<div class="card-body">
|
|
|
|
<label class="form-label fw-semibold">
|
|
Input / Scan Tiket / Kartu Akses
|
|
</label>
|
|
|
|
<input type="text" class="form-control mb-2" id="search-value"
|
|
placeholder="Scan / input tiket..." autofocus>
|
|
|
|
<small id="search-status" class="text-muted d-block mb-3"></small>
|
|
|
|
<div class="d-grid">
|
|
<button class="btn btn-primary btn-sm" data-bs-toggle="modal"
|
|
data-bs-target=".bd-example-modal-lg">
|
|
<i class="fa fa-plus me-1"></i> Tambah
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RIGHT PANEL -->
|
|
<div class="col-md-10">
|
|
<div class="row g-3">
|
|
<!-- DETAIL TRANSAKSI -->
|
|
<div class="col-md-5">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
|
|
<h5 class="card-title mb-3">Detail Transaksi</h5>
|
|
|
|
<form id="formTransaksi" method="POST">
|
|
@csrf
|
|
{{-- @method('PUT') --}}
|
|
|
|
<!-- ACTION BUTTON -->
|
|
<div id="rowActions" class="d-none mb-3"></div>
|
|
|
|
<hr>
|
|
|
|
<!-- FORM INPUT -->
|
|
<div class="d-none mt-3" id="formEdit">
|
|
|
|
<!-- Nama / Kamar -->
|
|
<div class="row align-items-center mb-2">
|
|
<div class="col-4">
|
|
<label class="form-label detail-label mb-0">
|
|
Nama / No. Kamar
|
|
</label>
|
|
</div>
|
|
<div class="col-8">
|
|
<input type="text"
|
|
name="nama"
|
|
class="form-control"
|
|
placeholder="Nama / K501">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- No Polisi -->
|
|
<div class="row align-items-center mb-2">
|
|
<div class="col-4">
|
|
<label class="form-label detail-label mb-0">
|
|
No. Polisi
|
|
</label>
|
|
</div>
|
|
<div class="col-8">
|
|
<input type="text"
|
|
name="no_pol"
|
|
class="form-control"
|
|
placeholder="B123TES">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lama Parkir -->
|
|
<div class="row align-items-center mb-3">
|
|
<div class="col-4">
|
|
<label class="form-label detail-label mb-0">
|
|
Lama Parkir
|
|
</label>
|
|
</div>
|
|
<div class="col-8">
|
|
<select name="durasi" class="form-select">
|
|
<option value="1">1 Malam</option>
|
|
<option value="2">2 Malam</option>
|
|
<option value="3">3 Malam</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SUBMIT BUTTON -->
|
|
<div class="d-flex justify-content-end">
|
|
<button type="submit" class="btn btn-success">
|
|
<i class="fa fa-save me-1"></i> Simpan
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</form>
|
|
|
|
<!-- DETAIL DISPLAY -->
|
|
<div id="detail-content" class="text-muted mt-3">
|
|
Pilih transaksi untuk melihat detail
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- IMAGE PREVIEW -->
|
|
<div class="col-md-7">
|
|
<div class="card h-100">
|
|
<div
|
|
class="card-body d-flex justify-content-center align-items-center">
|
|
|
|
<img id="pic_body_masuk" src=""
|
|
alt="Preview Kendaraan"
|
|
class="w-100 h-100 rounded d-none"
|
|
style="max-height: 880px; object-fit: cover;">
|
|
|
|
<span id="no-image" class="text-muted">
|
|
Tidak ada gambar
|
|
</span>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade" id="pills-profile" role="tabpanel"
|
|
aria-labelledby="pills-profile-tab" tabindex="0">
|
|
<ul class="list-group">
|
|
<li class="list-group-item d-flex justify-content-between align-items-start">
|
|
<div class="me-auto d-flex align-items-center">
|
|
<div>
|
|
<input class="form-check-input me-2 mt-0" name="checkbox1"
|
|
type="checkbox" value="" checked="">
|
|
<label class="form-check-label" for="checkbox1"></label>
|
|
</div>
|
|
<div>
|
|
<div class="fw-bold">Heading</div>
|
|
<p class="mb-0 text-muted">Donec id elit non mi porta
|
|
gravida at eget metus. Maecenas sed diam eget risus
|
|
varius blandit.</p>
|
|
</div>
|
|
</div>
|
|
<span class="badge bg-info rounded-pill">14</span>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between align-items-start">
|
|
<div class="me-auto d-flex align-items-center">
|
|
<div>
|
|
<input class="form-check-input me-2 mt-0" name="checkbox1"
|
|
type="checkbox" value="">
|
|
<label class="form-check-label" for="checkbox1"></label>
|
|
</div>
|
|
<div>
|
|
<div class="fw-bold">Heading</div>
|
|
<p class="mb-0 text-muted">Donec id elit non mi porta
|
|
gravida at eget metus. Maecenas sed diam eget risus
|
|
varius blandit.</p>
|
|
</div>
|
|
</div>
|
|
<span class="badge bg-danger rounded-pill">14</span>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between align-items-start">
|
|
<div class="me-auto d-flex align-items-center">
|
|
<div>
|
|
<input class="form-check-input me-2 mt-0" name="checkbox1"
|
|
type="checkbox" value="">
|
|
<label class="form-check-label" for="checkbox1"></label>
|
|
</div>
|
|
<div>
|
|
<div class="fw-bold">Heading</div>
|
|
<p class="mb-0 text-muted">Donec id elit non mi porta
|
|
gravida at eget metus. Maecenas sed diam eget risus
|
|
varius blandit.</p>
|
|
</div>
|
|
</div>
|
|
<span class="badge bg-success rounded-pill">14</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="tab-pane fade" id="pills-contact" role="tabpanel"
|
|
aria-labelledby="pills-contact-tab" tabindex="0">
|
|
<ul class="list-group">
|
|
<li class="list-group-item d-flex justify-content-between align-items-start">
|
|
<div class="me-auto d-flex align-items-center">
|
|
<div>
|
|
<input class="form-check-input me-2 mt-0" name="checkbox1"
|
|
type="checkbox" value="">
|
|
<label class="form-check-label" for="checkbox1"></label>
|
|
</div>
|
|
<div>
|
|
<div class="fw-bold">Heading</div>
|
|
<p class="mb-0 text-muted">Donec id elit non mi porta
|
|
gravida at eget metus. Maecenas sed diam eget risus
|
|
varius blandit.</p>
|
|
</div>
|
|
</div>
|
|
<span class="badge bg-info rounded-pill">14</span>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between align-items-start">
|
|
<div class="me-auto d-flex align-items-center">
|
|
<div>
|
|
<input class="form-check-input me-2 mt-0" name="checkbox1"
|
|
type="checkbox" value="">
|
|
<label class="form-check-label" for="checkbox1"></label>
|
|
</div>
|
|
<div>
|
|
<div class="fw-bold">Heading</div>
|
|
<p class="mb-0 text-muted">Donec id elit non mi porta
|
|
gravida at eget metus. Maecenas sed diam eget risus
|
|
varius blandit.</p>
|
|
</div>
|
|
</div>
|
|
<span class="badge bg-danger rounded-pill">14</span>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between align-items-start">
|
|
<div class="me-auto d-flex align-items-center">
|
|
<div>
|
|
<input class="form-check-input me-2 mt-0" name="checkbox1"
|
|
type="checkbox" value="" checked="">
|
|
<label class="form-check-label" for="checkbox1"></label>
|
|
</div>
|
|
<div>
|
|
<div class="fw-bold">Heading</div>
|
|
<p class="mb-0 text-muted">Donec id elit non mi porta
|
|
gravida at eget metus. Maecenas sed diam eget risus
|
|
varius blandit.</p>
|
|
</div>
|
|
</div>
|
|
<span class="badge bg-success rounded-pill">14</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="tab-pane fade" id="pills-disabled" role="tabpanel"
|
|
aria-labelledby="pills-disabled-tab" tabindex="0">
|
|
<ul class="list-group">
|
|
<li class="list-group-item d-flex justify-content-between align-items-start">
|
|
<div class="me-auto d-flex align-items-center">
|
|
<div>
|
|
<input class="form-check-input me-2 mt-0" name="checkbox1"
|
|
type="checkbox" value="" id="checkbox1">
|
|
<label class="form-check-label" for="checkbox1"></label>
|
|
</div>
|
|
<div>
|
|
<div class="fw-bold">Heading</div>
|
|
<p class="mb-0 text-muted">Donec id elit non mi porta
|
|
gravida at eget metus. Maecenas sed diam eget risus
|
|
varius blandit.</p>
|
|
</div>
|
|
</div>
|
|
<span class="badge bg-info rounded-pill">14</span>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between align-items-start">
|
|
<div class="me-auto d-flex align-items-center">
|
|
<div>
|
|
<input class="form-check-input me-2 mt-0" name="checkbox1"
|
|
type="checkbox" value="" checked="">
|
|
<label class="form-check-label" for="checkbox1"></label>
|
|
</div>
|
|
<div>
|
|
<div class="fw-bold">Heading</div>
|
|
<p class="mb-0 text-muted">Donec id elit non mi porta
|
|
gravida at eget metus. Maecenas sed diam eget risus
|
|
varius blandit.</p>
|
|
</div>
|
|
</div>
|
|
<span class="badge bg-danger rounded-pill">14</span>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between align-items-start">
|
|
<div class="me-auto d-flex align-items-center">
|
|
<div>
|
|
<input class="form-check-input me-2 mt-0" name="checkbox1"
|
|
type="checkbox" value="">
|
|
<label class="form-check-label" for="checkbox1"></label>
|
|
</div>
|
|
<div>
|
|
<div class="fw-bold">Heading</div>
|
|
<p class="mb-0 text-muted">Donec id elit non mi porta
|
|
gravida at eget metus. Maecenas sed diam eget risus
|
|
varius blandit.</p>
|
|
</div>
|
|
</div>
|
|
<span class="badge bg-success rounded-pill">14</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('javascript')
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
|
|
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.31/jspdf.plugin.autotable.min.js"></script>
|
|
<script src="{{ asset('vendors/select2/select2.min.js') }}"></script>
|
|
<script src="{{ asset('js/select2.js') }}"></script>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('#no-image').addClass('d-none');
|
|
|
|
function searchData(value) {
|
|
if (!value) return;
|
|
|
|
$('#search-status').text('Mencari...');
|
|
console.log(value);
|
|
|
|
$.ajax({
|
|
url: "{{ route('check-in-out.search') }}",
|
|
type: "GET",
|
|
data: {
|
|
q: value
|
|
},
|
|
success: function(res) {
|
|
if (res.status) {
|
|
$('#search-status').html('<span class="text-success">Ditemukan</span>');
|
|
let data = res.data;
|
|
$('#rowActions').html(`
|
|
<div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">No. :</span>
|
|
<span class="detail-value">${data.id}</span>
|
|
<input type="hidden" name="id" value="${data.id}">
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">No. Transaksi :</span>
|
|
<span class="detail-value">${data.no_pol}</span>
|
|
<input type="hidden" name="notrans" value="${data.no_pol}">
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">Jam Masuk : </span>
|
|
<span class="detail-value" name="indate">${data.waktu_masuk}</span>
|
|
<input type="hidden" name="waktu_masuk" value="${data.waktu_masuk}">
|
|
</div>
|
|
</div>
|
|
`).removeClass('d-none');
|
|
$('#formEdit').removeClass('d-none');
|
|
if (data.vehicle_capt) {
|
|
$('#pic_body_masuk').attr('src', `data:image/jpeg;base64,${data.vehicle_capt}`).removeClass('d-none');
|
|
// $('#pic_body_masuk').html(`
|
|
// <img src="data:image/jpeg;base64,${data.vehicle_capt}" alt="Pic Body Masuk" style="max-width: 700px; max-height: 300px;">
|
|
// `);
|
|
$('#no-image').addClass('d-none');
|
|
} else {
|
|
$('#pic_body_masuk').addClass('d-none');
|
|
$('#no-image').removeClass('d-none');
|
|
}
|
|
|
|
console.log(res);
|
|
// window.location.href = "/check-in-out" + res.data.id;
|
|
} else {
|
|
$('#search-status').html('<span class="text-danger">' + res.message +
|
|
'</span>');
|
|
}
|
|
|
|
$('#search-value').val('').focus();
|
|
},
|
|
error: function() {
|
|
$('#search-status').html('<span class="text-danger">Error server</span>');
|
|
}
|
|
});
|
|
}
|
|
|
|
$('#search-value').on('keypress', function(e) {
|
|
if (e.which == 13) {
|
|
e.preventDefault();
|
|
searchData($(this).val());
|
|
}
|
|
});
|
|
|
|
let timer;
|
|
$('#search-value').on('input', function() {
|
|
clearTimeout(timer);
|
|
let val = $(this).val();
|
|
|
|
timer = setTimeout(() => {
|
|
if (val.length >= 5) {
|
|
searchData(val);
|
|
}
|
|
|
|
}, 300);
|
|
});
|
|
|
|
$('#search-value').on('paste', function(e) {
|
|
let input = $(this);
|
|
|
|
setTimeout(() => {
|
|
let val = input.val();
|
|
|
|
console.log('PASTE VALUE:', val); // debug
|
|
|
|
searchData(val);
|
|
}, 100); // tunggu value masuk dulu
|
|
});
|
|
|
|
$('#formTransaksi').on('submit', function(e){
|
|
e.preventDefault();
|
|
|
|
let formData = $(this).serialize();
|
|
|
|
$.ajax({
|
|
url: $(this).attr('action'),
|
|
type: 'POST',
|
|
data: formData,
|
|
success: function(res){
|
|
alert('Berhasil disimpan');
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
});
|
|
</script>
|
|
@endsection
|