web-dinda-private/resources/views/pimpinan/laporan_supplier/index.blade.php

109 lines
4.1 KiB
PHP

@extends('layouts.app_pimpinan')
@section('title', 'Laporan Supplier')
@section('content')
<div class="container mt-4">
<h4>Laporan Mitra Bisnis</h4>
<!-- Filter -->
<div class="mb-3" style="width: auto; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center;">
<div class="col-md-4 d-flex gap-0">
<button class="btn btn-outline-primary kategori-btn" data-kategori="pemasok">Pemasok</button>
<button class="btn btn-outline-primary kategori-btn" data-kategori="konsumen">Konsumen</button>
<input type="hidden" id="kategori" value="">
</div>
<div class="col d-flex gap-2 mb-2" style="flex-wrap: nowrap; flex-direction: row; justify-content: flex-end; align-items: center;">
<div class="col-md-4">
<input type="text" id="keyword" class="form-control" placeholder="Cari Nama atau Alamat Mitra">
</div>
<div class="col-md-2 d-flex gap-0" style="width: fit-content;">
<button id="unduhExcel" class="btn btn-success">Unduh Excel</button>
<button id="unduhPDF" class="btn btn-danger">Unduh PDF</button>
</div>
</div>
</div>
<!-- Kontainer Data -->
<div id="dataContainer">
@include('pimpinan.laporan_supplier._table', ['suppliers' => $suppliers])
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const keywordInput = document.getElementById('keyword');
const kategoriButtons = document.querySelectorAll('.kategori-btn');
const kategoriInput = document.getElementById('kategori');
const unduhBtn = document.getElementById('unduhExcel');
const unduhBtnPDF = document.getElementById('unduhPDF');
const container = document.getElementById('dataContainer');
async function fetchData() {
const params = new URLSearchParams({
keyword: keywordInput.value,
kategori: kategoriInput.value,
ajax: 1
});
try {
const response = await fetch("{{ route('laporan.supplier') }}?" + params.toString(), {
headers: { 'X-Requested-With': 'XMLHttpRequest' }
});
if (!response.ok) throw new Error('Gagal memuat data');
const html = await response.text();
container.innerHTML = html;
} catch (err) {
alert('Error: ' + err.message);
}
}
kategoriButtons.forEach(btn => {
btn.addEventListener('click', function () {
const currentValue = kategoriInput.value;
const newValue = this.dataset.kategori;
if (currentValue === newValue) {
kategoriInput.value = '';
kategoriButtons.forEach(b => b.classList.remove('active'));
} else {
kategoriInput.value = newValue;
kategoriButtons.forEach(b => b.classList.remove('active'));
this.classList.add('active');
}
fetchData();
});
});
keywordInput.addEventListener('input', () => {
clearTimeout(window.keywordTimeout);
window.keywordTimeout = setTimeout(fetchData, 500);
});
unduhBtn.addEventListener('click', function () {
const params = new URLSearchParams({
keyword: keywordInput.value,
kategori: kategoriInput.value,
export: 'excel'
});
window.location.href = "{{ route('laporan.supplier') }}" + '?' + params.toString();
});
unduhBtnPDF.addEventListener('click', function () {
const params = new URLSearchParams({
keyword: keywordInput.value,
kategori: kategoriInput.value,
export: 'pdf'
});
window.location.href = "{{ route('laporan.supplier') }}" + '?' + params.toString();
});
});
</script>
@endsection