@php
    $inbox = $inbox ?? 'pending';
    $isSubmittedInbox = $inbox === 'submitted';
    $pageTitle = $isSubmittedInbox ? __('Submitted Replies') : __('Submit Replies');
    $filterRoute = $isSubmittedInbox
        ? route('mec-sims.compliances.submitted')
        : route('mec-sims.compliances.index');
@endphp
@extends('layouts.app')

@section('title', $pageTitle)

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

@section('contents')
<section class="content">
    <div class="container-fluid">
        <x-table-filter-card
            action="{{ $filterRoute }}"
            id="mecSimsCompliancesFilterForm"
            :resetUrl="$filterRoute"
            :title="__('FIND COMPLIANCES')"
            :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="mecSimsCompliancesCard">
            <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">{{ $pageTitle }}</h3>
                    @include('reports.partials.mec-listing-scheme-name-toggle')
                </div>
            </div>
            <div class="card-body p-3">
                <p class="text-primary small mb-3">
                    @if ($isSubmittedInbox)
                        {{ __('Un-Satisfactory schemes in your department scope or assigned to you where your AD or EA reply is already submitted. Click a row for scheme and report details.') }}
                    @else
                        {{ __('Un-Satisfactory schemes in your department scope or assigned to you that still need your AD or EA reply. Click a row to view the report or submit a reply. EA users see assigned schemes only.') }}
                    @endif
                </p>
                <div class="table-responsive">
                    @include('mec-sims.compliances.partials.listing-table', [
                        'tableId' => 'tblMecSimsCompliances',
                        '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' => $filterRoute])->render() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="complianceReplyDetailModal" tabindex="-1" role="dialog" aria-labelledby="complianceReplyDetailModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title text-white" id="complianceReplyDetailModalTitle">
                        <i class="fas fa-clipboard-list mr-2"></i>{{ __('Scheme details') }}
                    </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="complianceReplyDetailModalBody" style="min-height: 140px;"></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')
@include('reports.partials.mec-listing-scheme-name-toggle-scripts')
<script>
(function () {
    var tableSelector = '#tblMecSimsCompliances';
    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>';
    var failMsg = @json(__('Failed to load scheme details.'));
    var $modal = $('#complianceReplyDetailModal');
    var bodyEl = document.getElementById('complianceReplyDetailModalBody');

    function openReplyModal(url) {
        if (!url || !bodyEl) {
            return;
        }
        bodyEl.innerHTML = loadingHtml;
        $modal.modal('show');
        $.ajax({
            url: url,
            method: 'GET',
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        }).done(function (html) {
            bodyEl.innerHTML = html;
        }).fail(function (xhr) {
            bodyEl.innerHTML = '<p class="text-muted text-center py-4 mb-0">' + failMsg + ' (HTTP ' + (xhr.status || '?') + ').</p>';
        });
    }

    $(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($isSubmittedInbox ? __('No submitted replies found.') : __('No Un-Satisfactory schemes waiting for your reply.')));
        PmsIndexDataTable.initLaravelPaginated(tableSelector, {
            scrollX: true,
            ordering: false,
            columnDefs: @json(\App\Support\MecSimsComplianceListingTable::dataTableColumnDefs()),
            colvisPersistKey: @json('compliance-listing-inbox-uid-' . (int) auth()->id()),
        });

        PmsIndexDataTable.attachServerSort(tableSelector, {
            baseUrl: '{{ request()->url() }}',
            currentQuery: @json(request()->except(['page'])),
            currentSortCol: '{{ request('sort_col', '') }}',
            currentSortDir: '{{ request('sort_dir', 'asc') }}'
        });

        $tbl.on('click', 'tbody tr.report-mec-listing-row', function () {
            var modalUrl = this.getAttribute('data-modal-url');
            if (modalUrl) {
                openReplyModal(modalUrl);
                return;
            }
            var wizardUrl = this.getAttribute('data-workflow-review-url');
            if (wizardUrl) {
                window.location.href = wizardUrl;
            }
        });

        var params = new URLSearchParams(window.location.search);
        var openSubject = params.get('open');
        if (openSubject) {
            openReplyModal(@json(url('mec-sims/compliances')) + '/' + encodeURIComponent(openSubject) + '/modal');
            params.delete('open');
            var next = window.location.pathname + (params.toString() ? '?' + params.toString() : '') + window.location.hash;
            if (window.history && window.history.replaceState) {
                window.history.replaceState({}, '', next);
            }
        }

        $modal.on('hidden.bs.modal', function () {
            if (bodyEl) {
                bodyEl.innerHTML = '';
            }
        });
    });
})();
</script>
@endpush