159 lines
6.7 KiB
PHP
159 lines
6.7 KiB
PHP
@extends('layout.app')
|
|
|
|
@section('content')
|
|
|
|
|
|
<div class="w-full h-full bg-white rounded-lg shadow-lg p-5">
|
|
<div class="py-5">
|
|
<div class="pb-4 bg-white flex justify-between">
|
|
<div>
|
|
<a href="{{ route('pembelian.tambah')}}"> <button class="bg-yellow-500 hover:bg-yellow-400 text-white p-2 rounded-lg">
|
|
Tambah Data
|
|
</button></a>
|
|
</div>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table id="datatable" class="w-full">
|
|
<thead class="bg-gray-200">
|
|
<tr class="text-left">
|
|
<th class="p-3">No</th>
|
|
<th class="p-3">Nomor Transaksi</th>
|
|
<th class="p-3">Tanggal</th>
|
|
<th class="p-3">Supplier</th>
|
|
<th class="p-3">Jumlah Item</th>
|
|
<th class="p-3">Total</th>
|
|
<th class="p-3">Detail</th>
|
|
<th class="p-3"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($data['pembelian'] as $index => $item)
|
|
<tr class="text-left border-b border-gray-200">
|
|
<td class="p-3">{{ $index + 1 }}</td>
|
|
<td class="p-3">{{ $item->no_transaksi }}</td>
|
|
<td class="p-3">{{ date("d-m-Y",strtotime($item->created_at)) }}</td>
|
|
<td class="p-3">{{ $item->supplier->nama_supplier }}</td>
|
|
<td class="p-3">{{ count($item->listItem) }} Items</td>
|
|
<td class="p-3">{{ 'IDR ' . number_format($item->total_harga, 0, ',', '.') }}</td>
|
|
|
|
<td class="p-3">
|
|
<button class="bg-green-500 text-white p-2 rounded-lg"
|
|
onclick="openModal('{{ $item->listItem }}')">
|
|
List Item
|
|
</button>
|
|
</td>
|
|
<td class="p-3">
|
|
<button class="bg-red-500 text-white p-2 rounded-lg mr-2" onclick="deleteData({{ $item->id }})">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.320c-1.18 0-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
|
|
</svg>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div id="myModal" class="modal hidden fixed inset-0 py-32 z-50 overflow-auto bg-gray-500 bg-opacity-50 flex justify-center items-center">
|
|
<div class="modal-content bg-white w-full mx-32 p-10 rounded-lg">
|
|
<div class="col-span-3 flex justify-between border-b-2 border-[#ee69b1] py-2 mb-2">
|
|
<h2 class="text-xl font-bold">Detail</h2>
|
|
<button id="closeModalButton" class="close text-red-500 hover:text-red-700">×</button>
|
|
</div>
|
|
<div id="modal-content" class="text-lg font-semibold"></div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection
|
|
|
|
@section('script')
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('#datatable').DataTable();
|
|
});
|
|
|
|
window.addEventListener('DOMContentLoaded', function() {
|
|
fetchData();
|
|
});
|
|
|
|
function formatToIDR(amount) {
|
|
return 'IDR ' + new Intl.NumberFormat('id-ID').format(amount);
|
|
}
|
|
|
|
function openModal(data) {
|
|
// console.log(data);
|
|
const modal = document.getElementById("myModal");
|
|
const modalContent = document.getElementById("modal-content");
|
|
|
|
modal.classList.remove("hidden");
|
|
var html = `<table id="datatable" class="w-full">
|
|
<thead class="bg-gray-200">
|
|
<tr class="text-left">
|
|
<th class="p-3">No</th>
|
|
<th class="p-3">Nama Barang</th>
|
|
<th class="p-3">Ukuran</th>
|
|
<th class="p-3">Harga Beli</th>
|
|
<th class="p-3">Qty</th>
|
|
<th class="p-3">Sub Total</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>`;
|
|
var no = 1;
|
|
data = JSON.parse(data);
|
|
data.forEach(function(e){
|
|
html += `<tr class="text-left border-b border-gray-200">
|
|
<td class="p-3">${no}</td>
|
|
<td class="p-3">${e.nama_barang}</td>
|
|
<td class="p-3">${e.ukuran_barang}</td>
|
|
<td class="p-3">${formatToIDR(Math.round(parseFloat(e.harga_beli)))}</td>
|
|
<td class="p-3">${e.qty_beli}</td>
|
|
<td class="p-3">${formatToIDR(Math.round(parseFloat(e.harga_beli*e.qty_beli)))}</td>
|
|
</tr>`;
|
|
no++;
|
|
})
|
|
html += `</tbody></table>`;
|
|
modalContent.innerHTML = html;
|
|
}
|
|
|
|
document.querySelector('.close').addEventListener('click', function() {
|
|
const modal = document.getElementById("myModal");
|
|
modal.style.display = "none";
|
|
location.reload();
|
|
});
|
|
|
|
window.addEventListener('click', function(event) {
|
|
const modal = document.getElementById("myModal");
|
|
if (event.target == modal) {
|
|
modal.style.display = "none";
|
|
location.reload();
|
|
}
|
|
});
|
|
|
|
|
|
|
|
function deleteData(id) {
|
|
const baseUrl = "{{ route('pembelian.delete', ['id' => '__ID__']) }}";
|
|
if (confirm('Apakah anda yakin ingin menghapus data ini?')) {
|
|
$.ajax({
|
|
url: baseUrl.replace('__ID__', id),
|
|
type: 'GET',
|
|
success: function(response) {
|
|
alert(response.message);
|
|
location.reload();
|
|
},
|
|
error: function(error) {
|
|
console.error('Error getting data:', error.responseText);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
</script>
|
|
@endsection
|