Amir
266 lines
11 KiB
PHP
266 lines
11 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<link rel="stylesheet" href="{{ asset('css/viewer.min.css') }}">
|
|
<style>
|
|
.image-style {
|
|
display: grid;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 245px;
|
|
height: 137.812px;
|
|
border-start-start-radius: 7px;
|
|
border-start-end-radius: 7px;
|
|
}
|
|
|
|
.marhun-div-style {
|
|
max-width: 225px;
|
|
margin: 0.5rem;
|
|
}
|
|
|
|
.icon-image {
|
|
font-size: 50px;
|
|
}
|
|
|
|
.false-style {
|
|
background: #fdf3f3;
|
|
}
|
|
|
|
.item-wrapper {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(260px, auto));
|
|
gap: 1rem;
|
|
}
|
|
|
|
.item-main {
|
|
border: 1px solid #00000026;
|
|
margin: 10px;
|
|
border-start-start-radius: 8px;
|
|
border-start-end-radius: 8px;
|
|
}
|
|
|
|
.spinner-style {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: 5rem 0;
|
|
}
|
|
</style>
|
|
<div class="container-fluid">
|
|
<div class="row ">
|
|
<div class="col mx-auto p-4">
|
|
<div class="card">
|
|
<div class="card-header header-style">
|
|
<div class="header-style-title">
|
|
Galeri Marhun
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div>
|
|
<label>Pilih Batch Lelong</label>
|
|
<select class="custom-select" id="batchLelong">
|
|
<option value="null" selected>Batch Lelong</option>
|
|
@foreach ($lelong_all as $lelong)
|
|
<option value="{{ $lelong->id }}">{{ $lelong->id }}, {{ $lelong->tarikh_lelong }}
|
|
(fasa {{ $lelong->fasa }})
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div id="divCawangan" style="display: none" class="mt-3">
|
|
<label>Pilih Cawangan</label>
|
|
<div class="d-flex">
|
|
<select class="custom-select" id="cawanganLelong">
|
|
</select>
|
|
<button class="btn btn-primary d-flex text-nowrap" onclick="reloadListLelongBid()">Kemaskini
|
|
Data
|
|
Cawangan <span class="material-symbols-rounded">refresh</span></button>
|
|
</div>
|
|
</div>
|
|
<div class="spinner-style" id="divSpinner" style="display: none">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="sr-only">Loading...</span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<h6 id="divJumlahSurat" style="display: none">Jumlah Surat: <span id="text-jumlah-surat"></span>
|
|
</h6>
|
|
<h4 class="text-danger blink" id="divBelumSemak" style="display: none">Belum Semak: <span
|
|
id="text-belum-semak"></span></h4>
|
|
</div>
|
|
<div id="divGambar" style="display: none">
|
|
<div class="row justify-content-center" id="divComponentGambar">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var cawId = '<?php echo $caw_id; ?>';
|
|
|
|
$('#batchLelong').on('change', function() {
|
|
var valBatch = $("#batchLelong").val();
|
|
console.log("1st function: " + valBatch);
|
|
if (valBatch != "null") {
|
|
$("#divGambar").attr("style", "display:block");
|
|
// $('#cawanganLelong').find('option')
|
|
// .remove()
|
|
// .end()
|
|
// .append('<option selected value="null">Pilih Cawangan</option>');
|
|
// $.ajax({
|
|
// url: '{{ route('pengurusangambar.listcawangan') }}',
|
|
// method: 'GET',
|
|
// data: {
|
|
// "lelong_id": valBatch,
|
|
// },
|
|
// }).done(function(response) {
|
|
// for (var data of response) {
|
|
// $('#cawanganLelong').append($('<option>', {
|
|
// value: data.caw_id,
|
|
// text: data.caw_name
|
|
// }));
|
|
// }
|
|
// }).fail(function(error) {
|
|
// alert(error);
|
|
// });
|
|
reloadListLelongBid();
|
|
} else {
|
|
// $("#divCawangan").attr("style", "display:none")
|
|
$("#divGambar").attr("style", "display:none")
|
|
$("#divJumlahSurat").attr("style", "display:none")
|
|
$("#divBelumSemak").attr("style", "display:none")
|
|
}
|
|
// $("#divGambar").attr("style", "display:none")
|
|
// $("#divJumlahSurat").attr("style", "display:none")
|
|
// $("#divBelumSemak").attr("style", "display:none")
|
|
});
|
|
|
|
$('#cawanganLelong').on('change', function() {
|
|
var valCawangan = $("#cawanganLelong").val();
|
|
var valBatchLelong = $("#batchLelong").val();
|
|
console.log("2nd function: caw_id -> " + valCawangan);
|
|
if (valCawangan != "null") {
|
|
reloadListLelongBid();
|
|
$("#divGambar").attr("style", "display:block")
|
|
} else {
|
|
$("#divGambar").attr("style", "display:none")
|
|
$("#divJumlahSurat").attr("style", "display:none")
|
|
$("#divBelumSemak").attr("style", "display:none")
|
|
}
|
|
});
|
|
|
|
function reloadListLelongBid() {
|
|
$("#divJumlahSurat").attr("style", "display:none")
|
|
$("#divBelumSemak").attr("style", "display:none")
|
|
var dataCawangan = cawId;
|
|
var dataBatchLelong = $("#batchLelong").val();
|
|
if (dataCawangan == 'null') {
|
|
$.alert({
|
|
title: 'Gagal',
|
|
content: 'Sila pilih cawangan terlebih dahulu.',
|
|
backgroundDismiss: true,
|
|
type: 'red',
|
|
buttons: {
|
|
Kembali: {
|
|
keys: ['enter']
|
|
},
|
|
}
|
|
});
|
|
return;
|
|
}
|
|
$("#divSpinner").attr("style", "display:flex")
|
|
$("#divComponentGambar").empty();
|
|
console.log('reloadcawangan:' + dataCawangan);
|
|
console.log('reloadbatchlelong:' + dataBatchLelong);
|
|
$.ajax({
|
|
url: '{{ route('pengurusangambar.listlelongbid') }}',
|
|
method: 'GET',
|
|
data: {
|
|
"lelong_id": dataBatchLelong,
|
|
"caw_id": dataCawangan,
|
|
},
|
|
}).done(function(response) {
|
|
$("#text-jumlah-surat").text(response.jumlah_surat);
|
|
$("#divJumlahSurat").attr("style", "display:block")
|
|
if (response.belum_semak != 0) {
|
|
$("#text-belum-semak").text(response.belum_semak);
|
|
$("#divBelumSemak").attr("style", "display:block")
|
|
} else {
|
|
$("#divBelumSemak").attr("style", "display:none")
|
|
}
|
|
console.log(response);
|
|
for (var dataLelBid of response.lelong_bid) {
|
|
const gambarComponent = document.createElement('div');
|
|
if (dataLelBid.file_marhun_main != null) {
|
|
if (dataLelBid.file_marhun_main.gambar == 0) {
|
|
gambarComponent.innerHTML = `
|
|
<div class="text-primary bg-light image-style">
|
|
<span class="material-symbols-rounded icon-image">
|
|
cycle
|
|
</span>
|
|
<div>No Image in Storage</div>
|
|
</div>
|
|
`;
|
|
} else {
|
|
gambarComponent.innerHTML = `
|
|
<div style='cursor:pointer'>
|
|
<img id='image` + dataLelBid.id + `' src='data:image/png;base64,` + dataLelBid
|
|
.file_marhun_main.gambar + `' class="image-style" alt="gambar-marhun">
|
|
</div>
|
|
`;
|
|
|
|
|
|
}
|
|
} else {
|
|
gambarComponent.innerHTML = `
|
|
<div class="text-danger false-style image-style">
|
|
<span class="material-symbols-rounded icon-image">
|
|
cancel
|
|
</span>
|
|
<div>Gambar Belum Di Muat Naik</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
if (dataLelBid.status_semak == 0) {
|
|
var statusSem = 'unchecked';
|
|
} else {
|
|
var statusSem = '';
|
|
}
|
|
|
|
const marhunComponent = document.createElement('div');
|
|
|
|
marhunComponent.innerHTML = `
|
|
<div class="item-wrapper">
|
|
<div class="item-main">
|
|
<div class="text-center ` + statusSem + `">
|
|
` + gambarComponent.innerHTML + `
|
|
<div class="my-2">` + dataLelBid.norujukan + `</div>
|
|
<div class="marhun-div-style">` + dataLelBid.marhun + `</div>
|
|
<div class="my-2">` + dataLelBid.berat + `g</div>
|
|
<div class="my-2"><strong>N. Marhun: </strong>RM` + dataLelBid.nilaimarhun + `</div>
|
|
<div class="my-2"><strong>H. Asas: </strong>RM` + dataLelBid.hargaasas + `</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
$('#divComponentGambar').append(marhunComponent);
|
|
|
|
if (dataLelBid.file_marhun_main != null && dataLelBid.file_marhun_main.gambar != 0) {
|
|
const viewer = new Viewer(document.getElementById('image' + dataLelBid.id), {
|
|
inline: false,
|
|
title: false,
|
|
});
|
|
}
|
|
|
|
}
|
|
$("#divSpinner").attr("style", "display:none")
|
|
}).fail(function(error) {
|
|
alert(error);
|
|
});
|
|
}
|
|
</script>
|
|
@endsection
|