@extends('layouts.app')

@section('title', __('Approved monitoring reports'))

@push('stylesheets')
@include('partials.index-datatable-styles')
@include('reports.partials.mec-listing-table-styles')
<style>
    #reportsApprovedMonitoringCard .table-responsive { overflow-x: visible; overflow-y: visible; }
    @media (max-width: 768px) {
        #reportsApprovedMonitoringCard .table-responsive { overflow-x: auto; }
    }
    #reportsApprovedMonitoringCard tbody tr.report-approved-monitoring-detail-row { cursor: pointer; }
    #reportsApprovedMonitoringCard .card-header .card-title { min-width: 0; }
</style>
@endpush

@section('contents')
<section class="content">
    <div class="container-fluid">
        <div class="card pms-index-card" id="reportsApprovedMonitoringCard">
            <div class="card-header d-flex flex-nowrap align-items-center w-100">
                <h3 class="card-title mb-0 text-truncate flex-fill pr-2">{{ __('Approved monitoring reports') }}</h3>
                @include('reports.partials.new-monitoring-report-button')
            </div>
            <div class="card-body p-3">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered mb-0 w-100 pms-index-datatable" id="tblReportsApprovedMonitoring" style="width: 100%;">
                        <thead>
                            <tr>
                                <th>{{ __('Status') }}</th>
                                <th>{{ __('Report type') }}</th>
                                <th>{{ __('ADP #') }}</th>
                                <th>{{ __('UID') }}</th>
                                <th class="text-left">{{ __('Scheme') }}</th>
                                <th>{{ __('Submitted') }}</th>
                                <th>{{ __('Approved') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($reportRows as $row)
                                @php
                                    /** @var \App\Models\MecReport $r */
                                    $r = $row['report'];
                                    $submitted = $r->submitted_at ?? $r->created_at;
                                    $submittedOrder = $submitted instanceof \Illuminate\Support\Carbon ? $submitted->timestamp : 0;
                                    $approved = $r->approved_at;
                                    $approvedOrder = $approved instanceof \Illuminate\Support\Carbon ? $approved->timestamp : 0;
                                @endphp
                                <tr class="report-approved-monitoring-detail-row" data-report-id="{{ $r->id }}">
                                    <td class="text-nowrap pms-mec-report-status-cell" data-order="{{ $r->listingStatusSortKey() }}">
                                        @include('reports.partials.mec-listing-status-badges', ['report' => $r])
                                    </td>
                                    <td class="text-monospace small">{{ $r->report_type }}</td>
                                    <td class="text-monospace small">{{ $row['adp_number'] }}</td>
                                    <td class="text-monospace small">{{ $row['scheme_uid'] }}</td>
                                    <td class="text-left">{{ $row['scheme_name'] }}</td>
                                    <td data-order="{{ $submittedOrder }}">
                                        @if ($submitted instanceof \Illuminate\Support\Carbon)
                                            {{ $submitted->timezone(config('app.timezone'))->format('d M Y, H:i') }}
                                        @else
                                            —
                                        @endif
                                    </td>
                                    <td data-order="{{ $approvedOrder }}">
                                        @if ($approved instanceof \Illuminate\Support\Carbon)
                                            {{ $approved->timezone(config('app.timezone'))->format('d M Y, H:i') }}
                                        @else
                                            —
                                        @endif
                                    </td>
                                </tr>
                            @empty
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="report-approved-monitoring-detail-modal" tabindex="-1" role="dialog" aria-labelledby="report-approved-monitoring-detail-modal-title" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title text-white" id="report-approved-monitoring-detail-modal-title">
                        <i class="fas fa-file-alt mr-2"></i>{{ __('Approved report') }}
                    </h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="{{ __('Close') }}">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="report-approved-monitoring-modal-body" style="min-height: 120px;">
                    <div class="text-center py-4 text-muted">
                        <div class="spinner-border" role="status"><span class="sr-only">{{ __('Loading') }}…</span></div>
                        <p class="mt-2 mb-0">{{ __('Loading') }}…</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('Close') }}</button>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
@include('partials.index-datatable-scripts')
<script>
(function () {
    var tableSelector = '#tblReportsApprovedMonitoring';
    var emptyMsg = @json(__('No approved monitoring reports yet. Reports appear here after DG approval.'));
    var reportModalBase = @json(rtrim(url('/reports/in-processing'), '/'));
    var reportModal = $('#report-approved-monitoring-detail-modal');
    var reportBodyEl = document.getElementById('report-approved-monitoring-modal-body');

    function reportModalUrl(reportId) {
        return reportModalBase + '/' + encodeURIComponent(reportId) + '/modal-body';
    }

    $(function () {
        var $tbl = $(tableSelector);
        if (!$tbl.length || typeof window.PmsIndexDataTable === 'undefined') {
            return;
        }
        if ($.fn.DataTable.isDataTable($tbl)) {
            $tbl.DataTable().destroy();
        }
        $tbl.attr('data-pms-empty-message', emptyMsg);

        PmsIndexDataTable.init(tableSelector, {
            scrollX: true,
            lengthChange: true,
            pageLength: 25,
            paging: true,
            order: [[6, 'desc']]
        });

        $(tableSelector + ' tbody').on('click', 'tr.report-approved-monitoring-detail-row', function () {
            var reportId = this.getAttribute('data-report-id');
            if (!reportId || !reportBodyEl) {
                return;
            }
            reportBodyEl.innerHTML = '<div class="text-center py-4 text-muted"><div class="spinner-border" role="status"></div><p class="mt-2 mb-0">{{ __('Loading') }}…</p></div>';
            $.ajax({
                url: reportModalUrl(reportId),
                method: 'GET',
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            }).done(function (html) {
                reportBodyEl.innerHTML = html;
            }).fail(function (xhr) {
                reportBodyEl.innerHTML = '<p class="text-muted text-center py-4 mb-0">{{ __('Failed to load report details.') }} (HTTP ' + (xhr.status || '?') + ').</p>';
            });
            reportModal.modal('show');
        });
    });
})();
</script>
@endpush