admin-erahn/resources/views/reports/data-pelanggan/index.blade.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', 'icon': 'fas fa-users' }
                ]">
            </breadcrumb>

            <div class="container">

                {{-- Error Alert --}}
                @if ($errors->any())
                <div id="error-alert" class="flex justify-center">
                    <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="flex-shrink-0 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 .5ZM9.5 4a1.5 1.5 0 1 1 0 3
                            1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1
                            1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
                        </svg>
                        <div class="ms-3 text-sm font-medium ml-2">
                            @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
                            </span>
                        </div>

                        {{-- FORM --}}
                        <form method="GET" id="formStokAudit"
                              action="{{ route('reports.dataPelanggan.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 border-2 rounded-l px-4 py-2"
                                            style="background-color: rgb(249, 250, 251);">
                                            Tahun
                                        </span>

                                        <select name="year" id="report_year"
                                                class="border border-2 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 --}}
                                        <div class="hidden">
                                            <input type="radio" name="generateType"
                                                   id="generateTypePdf" value="pdf">
                                            <input type="radio" name="generateType"
                                                   id="generateTypeExcel" value="excel">
                                        </div>

                                        {{-- Excel --}}
                                        <button id="generateExcel" type="button"
                                                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 id="generatePdf" type="button"
                                                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>

                            </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>
            <path class="opacity-75" fill="currentColor"
                  d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z">
            </path>
        </svg>
        <span class="text-gray-700 font-semibold">
            Sedang menjana laporan..
        </span>
    </div>
</div>

@endsection

{{-- =======================
| Scripts
|======================= --}}
@push('additional_scripts')
<script>
document.addEventListener("DOMContentLoaded", function () {

    const form = document.getElementById('formStokAudit');
    const loading = document.getElementById('loadingOverlay');

    let downloadFrame = null;
    let forceHideTimeout = null;
    let minLoadingTimeout = null;

    function showLoading() {
        loading.classList.remove('hidden');
    }

    function hideLoading() {
        loading.classList.add('hidden');

        clearTimeout(forceHideTimeout);
        clearTimeout(minLoadingTimeout);
    }

    // =====================
    // EXCEL DOWNLOAD
    // =====================
    document.getElementById('generateExcel').addEventListener("click", function () {

        document.getElementById('generateTypeExcel').checked = true;

        showLoading();

        // Remove iframe lama
        if (downloadFrame) downloadFrame.remove();

        downloadFrame = document.createElement('iframe');
        downloadFrame.name = 'downloadFrame';
        downloadFrame.style.display = 'none';
        document.body.appendChild(downloadFrame);

        form.target = 'downloadFrame';
        form.submit();

        /**
         * 🔐 Minimum loading time
         * elak tutup terlalu awal
         */
        minLoadingTimeout = setTimeout(() => {
            // Lepas 5 saat, barulah loading boleh ditutup
        }, 10000);

        /**
         * 🧯 Fallback safety
         * Tutup paksa selepas 20 saat
         */
        forceHideTimeout = setTimeout(() => {
            hideLoading();
        }, 20000);
    });

    // =====================
    // PDF VIEW
    // =====================
    document.getElementById('generatePdf').addEventListener("click", function () {

        document.getElementById('generateTypePdf').checked = true;

        form.removeAttribute('target');
        showLoading();

        form.submit();

        // PDF cepat → tutup awal
        setTimeout(() => {
            hideLoading();
        }, 10000);
    });

});
</script>
@endpush