@extends('layouts.app')

@section('title', __('Compliance Replies'))

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

@section('contents')
<section class="content">
    <div class="container-fluid">
                <x-table-filter-card
                    action="{{ route('reports.compliance-replies.index') }}"
                    id="complianceRepliesFilterForm"
                    :resetUrl="route('reports.compliance-replies.index')"
                    :title="__('FIND REPLIES')"
                    :open="trim((string) ($search ?? '')) !== ''"
                >
            <div class="pms-filter-field">
                <label for="filter-search">Search</label>
                <input type="text" name="search" id="filter-search" class="form-control form-control-sm"
                       placeholder="Search by scheme, ADP #, UID…" value="{{ $search ?? '' }}">
            </div>
        </x-table-filter-card>
        <x-active-filter-chips :chips="$activeChips ?? []" />
        <div class="card pms-mec-reports-listing-card pms-index-card" id="meComplianceRepliesCard">
            <div class="card-header d-flex flex-wrap align-items-center justify-content-between w-100 gap-2">
                <div class="d-flex flex-wrap align-items-center flex-fill min-width-0 gap-3">
                    <h3 class="card-title mb-0">{{ __('Compliance Replies') }}</h3>
                    @include('reports.partials.mec-listing-scheme-name-toggle')
                </div>
            </div>
            <div class="card-body p-3">
                <p class="text-primary small mb-3">
                    {{ __('Submitted AD and EA compliance replies on Un-Satisfactory PMS reports and FILMS records. Click a row to read observations and replies.') }}
                </p>
                <div class="table-responsive">
                    @include('reports.compliance-replies.partials.listing-table', [
                        'tableId' => 'tblMeComplianceReplies',
                        'reportRows' => $reportRows,
                    ])
                </div>
                <div class="pms-index-card__pagination">
                    <div class="pms-index-card__pagination-perpage">
                        {!! view('components.per-page-selector', ['current' => $perPage ?? 25, 'baseUrl' => route('reports.compliance-replies.index')])->render() !!}
                    </div>
                    <div class="pms-index-card__pagination-links">
                        {!! ($paginator ?? null)?->links('vendor.pagination.bootstrap-4') !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
@include('partials.index-datatable-scripts')
@include('reports.partials.mec-listing-scheme-name-toggle-scripts')
<script>
(function () {
    var tableSelector = '#tblMeComplianceReplies';
    var loadingHtml = '<div class="text-center py-4 text-muted"><div class="spinner-border" role="status"></div><p class="mt-2 mb-0">{{ __("Loading") }}…</p></div>';

    function bindMecListingRowClicks() {
        var inProcessingModalBase = @json(rtrim(url('/reports/in-processing'), '/'));
        var inProcessingModal = $('#report-in-processing-detail-modal');
        var inProcessingBodyEl = document.getElementById('report-in-processing-modal-body');
        var failMsg = @json(__('Failed to load report details.'));
        var rowSelector = 'tr.report-mec-listing-row';

        $(tableSelector + ' tbody').off('click.mecListingRow').on('click.mecListingRow', rowSelector, function () {
            var reportId = this.getAttribute('data-report-id');
            var wizardUrl = this.getAttribute('data-workflow-review-url');
            if (wizardUrl) {
                window.location.href = wizardUrl;
                return;
            }
            if (!reportId || !inProcessingBodyEl) return;
            inProcessingBodyEl.innerHTML = loadingHtml;
            $.ajax({
                url: inProcessingModalBase + '/' + encodeURIComponent(reportId) + '/modal-body',
                method: 'GET',
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            }).done(function (html) {
                inProcessingBodyEl.innerHTML = html;
            }).fail(function (xhr) {
                inProcessingBodyEl.innerHTML = '<p class="text-muted text-center py-4 mb-0">' + failMsg + ' (HTTP ' + (xhr.status || '?') + ').</p>';
            });
            inProcessingModal.modal('show');
        });
    }

    $(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', @json(__('No submitted compliance replies found.')));
        PmsIndexDataTable.initLaravelPaginated(tableSelector, {
            scrollX: true,
            columnDefs: @json(\App\Support\MecSimsComplianceListingTable::dataTableColumnDefs()),
            colvisPersistKey: @json('compliance-listing-hub-uid-' . (int) auth()->id()),
        });
        PmsIndexDataTable.attachServerSort(tableSelector, {
            sortColParam: 'sort_col',
            sortDirParam: 'sort_dir',
            currentSortCol: '{{ request("sort_col", "compliance_submitted_order") }}',
            currentSortDir: '{{ request("sort_dir", "desc") }}',
            currentQuery: @json(request()->except(['page', 'sort_col', 'sort_dir']))
        });
        bindMecListingRowClicks();
    });
})();
</script>
@endpush