Nur Izzati
242 lines
10 KiB
PHP
242 lines
10 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<div class="bg-gray-900 opacity-50 hidden fixed inset-0 z-10" id="sidebarBackdrop"></div>
|
|
|
|
<div id="main-content" class="h-full w-full bg-gray-50 relative overflow-y-auto">
|
|
<main>
|
|
<div class="pt-6 px-4">
|
|
|
|
{{-- Breadcrumb --}}
|
|
<breadcrumb
|
|
:items="[
|
|
{ 'title': 'Laporan Keseluruhan', 'icon': 'fas fa-users', 'url': '{{ route('reports') }}' },
|
|
{ 'title': 'Data Pelanggan By Cawangan', 'icon': 'fas fa-users' }
|
|
]">
|
|
</breadcrumb>
|
|
|
|
<div class="container">
|
|
|
|
{{-- Error Alert --}}
|
|
@if ($errors->any())
|
|
<div class="flex justify-center mb-4">
|
|
<div class="flex items-center p-4 text-red-800 border-t-4 border-red-300 bg-red-50 px-10"
|
|
role="alert">
|
|
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
|
|
viewBox="0 0 20 20">
|
|
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Z"/>
|
|
</svg>
|
|
<div class="ml-3 text-sm font-medium">
|
|
@foreach ($errors->all() as $error)
|
|
{{ $error }}
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="flex w-full">
|
|
<div class="xl:w-2/3 2xl:w-1/2 p-8 mx-auto">
|
|
|
|
{{-- Header --}}
|
|
<div class="bg-yellow-600 text-gray-200 text-lg px-6 py-4 rounded-t-lg">
|
|
<a href="{{ route('reports') }}">
|
|
<i class="fas fa-backspace text-white"></i>
|
|
</a>
|
|
<span class="text-white font-bold ml-2">
|
|
Laporan Data Pelanggan By Cawangan
|
|
</span>
|
|
</div>
|
|
|
|
{{-- FORM --}}
|
|
<form method="GET"
|
|
id="formStokAudit"
|
|
action="{{ route('reports.dataPelangganBycaw.show') }}">
|
|
|
|
<iframe name="downloadFrame" class="hidden"></iframe>
|
|
|
|
<div class="rounded bg-white shadow p-6">
|
|
|
|
{{-- Tahun --}}
|
|
<div class="pb-6">
|
|
<label class="font-semibold text-gray-700 block pb-1">
|
|
Tahun Laporan
|
|
</label>
|
|
|
|
<div class="flex items-center">
|
|
<span class="text-gray-600 border rounded-l px-4 py-2 bg-gray-50">
|
|
Tahun
|
|
</span>
|
|
|
|
<select name="year"
|
|
id="report_year"
|
|
class="border border-l-0 rounded-r px-4 py-2 w-40 mr-4"
|
|
required>
|
|
<option value="">-- Pilih Tahun --</option>
|
|
@for ($y = now()->year; $y >= 2019; $y--)
|
|
<option value="{{ $y }}">{{ $y }}</option>
|
|
@endfor
|
|
</select>
|
|
|
|
{{-- Hidden generate type --}}
|
|
<input type="radio" name="generateType" id="generateTypePdf" value="pdf" hidden>
|
|
<input type="radio" name="generateType" id="generateTypeExcel" value="excel" hidden>
|
|
|
|
{{-- Excel --}}
|
|
<button type="button" id="generateExcel"
|
|
class="border border-yellow-600 text-yellow-600 py-2 px-6
|
|
rounded-xl hover:bg-yellow-600 hover:text-white transition-all">
|
|
<i class="fas fa-file-excel mr-2"></i> Excel
|
|
</button>
|
|
|
|
{{-- PDF --}}
|
|
<button type="button" id="generatePdf"
|
|
class="border border-yellow-600 text-yellow-600 py-2 px-6 ml-4
|
|
rounded-xl hover:bg-yellow-600 hover:text-white transition-all">
|
|
<i class="fas fa-eye mr-2"></i> View
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Pilih Cawangan --}}
|
|
<div class="pb-6">
|
|
<label class="font-semibold text-gray-700 block pb-2">
|
|
Pilih Cawangan
|
|
</label>
|
|
|
|
{{-- Select All --}}
|
|
<div class="mb-2">
|
|
<label class="inline-flex items-center">
|
|
<input type="checkbox" id="checkAllCawangan"
|
|
class="rounded border-gray-300">
|
|
<span class="ml-2 text-sm font-medium">Pilih Semua</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div id="cawanganContainer"
|
|
class="grid grid-cols-2 gap-3 max-h-64 overflow-y-auto
|
|
border rounded p-4 bg-gray-50 text-sm text-gray-500">
|
|
Memuatkan senarai cawangan...
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
@include('layouts.footer')
|
|
</div>
|
|
|
|
{{-- Loading Overlay --}}
|
|
<div id="loadingOverlay"
|
|
class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
|
|
<div class="bg-white p-6 rounded-xl flex flex-col items-center">
|
|
<svg class="animate-spin h-10 w-10 text-yellow-600 mb-4"
|
|
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10"
|
|
stroke="currentColor" stroke-width="4"></circle>
|
|
</svg>
|
|
<span class="text-gray-700 font-semibold">
|
|
Sedang menjana laporan..
|
|
</span>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('additional_scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
|
|
const form = document.getElementById('formStokAudit');
|
|
const loading = document.getElementById('loadingOverlay');
|
|
|
|
const container = document.getElementById('cawanganContainer');
|
|
const checkAll = document.getElementById('checkAllCawangan');
|
|
|
|
let downloadFrame = null;
|
|
let forceHideTimeout = null;
|
|
|
|
// =====================
|
|
// Fetch Cawangan API
|
|
// =====================
|
|
fetch("{{ config('api.url') }}/api/cawangan")
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
container.innerHTML = '';
|
|
if (!data.length) {
|
|
container.innerHTML = '<span class="text-gray-400">Tiada cawangan</span>';
|
|
return;
|
|
}
|
|
data.forEach(caw => {
|
|
container.innerHTML += `
|
|
<label class="flex items-center space-x-2">
|
|
<input type="checkbox"
|
|
name="cawangan[]"
|
|
value="${caw.kodcaw}"
|
|
class="cawangan-item rounded border-gray-300">
|
|
<span>${caw.kodcaw} - ${caw.details_caw}</span>
|
|
</label>
|
|
`;
|
|
});
|
|
})
|
|
.catch(() => {
|
|
container.innerHTML = '<span class="text-red-500">Gagal load cawangan</span>';
|
|
});
|
|
|
|
// =====================
|
|
// Select All Checkbox
|
|
// =====================
|
|
checkAll.addEventListener('change', function () {
|
|
document.querySelectorAll('.cawangan-item').forEach(cb => cb.checked = this.checked);
|
|
});
|
|
|
|
// =====================
|
|
// Submit Form Function
|
|
// =====================
|
|
function submitForm(isExcel = false) {
|
|
|
|
if (document.querySelectorAll('.cawangan-item:checked').length === 0) {
|
|
alert('Sila pilih sekurang-kurangnya satu cawangan');
|
|
return;
|
|
}
|
|
|
|
// set generateType
|
|
if (isExcel) document.getElementById('generateTypeExcel').checked = true;
|
|
else document.getElementById('generateTypePdf').checked = true;
|
|
|
|
// Show loading
|
|
loading.classList.remove('hidden');
|
|
|
|
// Excel via iframe
|
|
if (isExcel) {
|
|
if (downloadFrame) downloadFrame.remove();
|
|
downloadFrame = document.createElement('iframe');
|
|
downloadFrame.name = 'downloadFrame';
|
|
downloadFrame.style.display = 'none';
|
|
document.body.appendChild(downloadFrame);
|
|
form.target = 'downloadFrame';
|
|
} else {
|
|
form.removeAttribute('target');
|
|
}
|
|
|
|
form.submit();
|
|
|
|
// Hide overlay after max 15 sec
|
|
forceHideTimeout = setTimeout(() => loading.classList.add('hidden'), 15000);
|
|
}
|
|
|
|
// =====================
|
|
// Button Handlers
|
|
// =====================
|
|
document.getElementById('generateExcel').addEventListener('click', () => submitForm(true));
|
|
document.getElementById('generatePdf').addEventListener('click', () => submitForm(false));
|
|
|
|
});
|
|
</script>
|
|
@endpush
|