@extends('_version_02.commons.layouts.admin')

@section('content')
{!! Form::model($model ?? [], ['class'=>'form-horizontal']) !!}
@include('_version_02.commons.layouts.partials._alert')

@php
    $downloadUrl = $page_variables['download_url'] ?? url('utility-charges/user-summary-report/download');
@endphp

<div class="hk-pg-header mb-0">
    <h4 class="hk-pg-title mb-10">
        <span class="pg-title-icon">
            <span class="feather-icon"><i data-feather="server"></i></span>
        </span>
        {{ $page_variables['page_title'] ?? App\Language::trans('User Account Summary Report') }}
    </h4>

    {{-- show button even if is_model_page not set, or keep your original condition --}}
    <div class="box-tools pull-right">
        <div class="button-list">
            <a href="{{ $downloadUrl }}"
               class="btn btn-primary js-user-summary-download">
                <i class="fa fa-file"></i> {{ App\Language::trans('Download') }}
            </a>
        </div>
    </div>
</div>

<section class="hk-sec-wrapper">
    <div id="user-summary-wrapper" class="table-responsive" style="min-height:70px;">
        <div class="text-center py-5">
            <i class="fa fa-spinner fa-spin fa-2x mb-2"></i>
            <p class="mb-0">{{ App\Language::trans('Generating Summary Data , it may take some time...') }}</p>
        </div>
    </div>
</section>

{{-- download/loading overlay --}}
<div id="report-loading-overlay" style="
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.45);
    z-index:9999;
    text-align:center;
">
    <div style="
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%, -50%);
        background:#fff;
        padding:18px 25px;
        border-radius:6px;
        min-width:240px;
        box-shadow:0 10px 30px rgba(0,0,0,0.2);
    ">
        <i class="fa fa-spinner fa-spin fa-2x mb-2" aria-hidden="true"></i>
        <p style="margin:10px 0 0 0;">
            {{ App\Language::trans('Generating excel data, please wait...') }}
        </p>
    </div>
</div>

{!! Form::close() !!}
@endsection

@section('script')
<script>
(function(){
    // 1) load the big table as soon as page loads (your test endpoint)
    var listUrl = "{{ url('utility-charges/user-summary-report/data-test') }}";
    var listXhr = new XMLHttpRequest();
    listXhr.open('GET', listUrl, true);
    listXhr.onreadystatechange = function(){
        if (listXhr.readyState === 4) {
            var container = document.getElementById('user-summary-wrapper');
            if (listXhr.status === 200) {
                container.innerHTML = listXhr.responseText && listXhr.responseText.trim().length
                    ? listXhr.responseText
                    : '<div class="alert alert-warning m-3">{{ App\Language::trans('No summary data found.') }}</div>';
            } else {
                container.innerHTML = '<div class="alert alert-danger m-3">Failed to load data (HTTP ' + listXhr.status + ')</div>';
            }
        }
    };
    listXhr.send();

    // 2) download sequence:
    // click -> show overlay -> ajax (to prepare/check) -> hide overlay -> start real download
    var overlay = document.getElementById('report-loading-overlay');

    function showOverlay() {
        if (overlay) overlay.style.display = 'block';
    }
    function hideOverlay() {
        if (overlay) overlay.style.display = 'none';
    }

    // small helper to actually start the download
    function startDownload(url) {
        // simplest: just navigate → browser downloads
        window.location = url;
    }

    function bindDownloadButton() {
        var btns = document.querySelectorAll('.js-user-summary-download');
        for (var i = 0; i < btns.length; i++) {
            (function(btn){
                btn.addEventListener('click', function(e){
                    e.preventDefault();

                    var realDownloadUrl = btn.getAttribute('href'); // actual file endpoint
                    if (!realDownloadUrl) return;

                    // show "generating..." first
                    showOverlay();

                    // call a quick ajax to your existing data-test (or any "prepare" endpoint)
                    var prepUrl = "{{ url('utility-charges/user-summary-report/data-test') }}";
                    var prepXhr = new XMLHttpRequest();
                    prepXhr.open('GET', prepUrl, true);
                    prepXhr.onreadystatechange = function(){
                        if (prepXhr.readyState === 4) {
                            // no matter success or error, we hide overlay
                            hideOverlay();
                            // now start real download
                            startDownload(realDownloadUrl);
                        }
                    };
                    prepXhr.send();

                });
            })(btns[i]);
        }
    }
    bindDownloadButton();

    // 3) optional datepicker
    if (window.jQuery && jQuery(".input-daterange").length) {
        jQuery(".input-daterange").datepicker({
            format: "dd-mm-yyyy"
        });
    }
})();
</script>
@endsection