@extends('layouts.app')

@section('title', ($read_only_hub ?? false)
    ? __('Compliance Replies — :source', ['source' => $source_label ?? __('Scheme')])
    : __('Compliance — :source', ['source' => $source_label ?? __('Scheme')]))

@push('stylesheets')
@if (! empty($can_assign_revisit))
    <link rel="stylesheet" href="{{ asset('assets/plugins/select2/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
@endif
<style>
    .mec-sims-compliance-page {
        max-width: 72rem;
        margin: 0 auto;
    }
    .mec-sims-compliance-card {
        background: #fff;
        border-radius: 1rem;
        border: 1px solid #f1f5f9;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
        overflow: hidden;
    }
    .mec-sims-compliance-card__header {
        padding: 1.5rem;
        border-bottom: 1px solid #f1f5f9;
        background: linear-gradient(180deg, rgba(248, 250, 252, 0.5) 0%, transparent 100%);
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
    }
    .mec-sims-compliance-badge-meta {
        font-family: 'Times New Roman', Times, serif;
        font-size: 0.6875rem;
        font-weight: 700;
        color: #334155;
        background: #f1f5f9;
        border: 1px solid rgba(226, 232, 240, 0.6);
        padding: 0.2rem 0.5rem;
        border-radius: 0.375rem;
    }
    .mec-sims-compliance-badge-meta__label {
        font-weight: 600;
        color: #64748b;
        margin-right: 0.15rem;
    }
    .mec-sims-compliance-badges-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
    }
    .mec-sims-compliance-card__title {
        font-size: 1rem;
        font-weight: 700;
        color: #0f172a;
        line-height: 1.4;
        margin: 0.5rem 0 0;
        letter-spacing: -0.01em;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    .mec-sims-compliance-card__location {
        font-size: 0.75rem;
        color: #64748b;
        margin: 0.35rem 0 0;
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }
    .mec-sims-compliance-card__location i {
        color: #94a3b8;
        font-size: 0.8rem;
    }
    .mec-sims-compliance-back {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.75rem;
        font-weight: 600;
        color: #475569;
        background: #fff;
        border: 1px solid #e2e8f0;
        padding: 0.5rem 0.875rem;
        border-radius: 0.75rem;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
        text-decoration: none;
        transition: background 0.15s, color 0.15s;
        flex-shrink: 0;
    }
    .mec-sims-compliance-back:hover {
        background: #f8fafc;
        color: #0f172a;
        text-decoration: none;
    }
    .mec-sims-compliance-card__body {
        padding: 1.5rem;
    }
    @media (min-width: 768px) {
        .mec-sims-compliance-card__body {
            padding: 2rem;
        }
    }
    .mec-sims-compliance-pair {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
        align-items: start;
    }
    @media (min-width: 768px) {
        .mec-sims-compliance-pair {
            grid-template-columns: 1fr 1fr;
        }
    }
    .mec-sims-compliance-pair + .mec-sims-compliance-pair {
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: 1px solid #f1f5f9;
    }
    .mec-sims-compliance-pair--matrix {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }
    .mec-sims-compliance-rrm .report-e2-officer-block {
        margin-bottom: 2rem;
    }
    .report-e2-officer-title-main {
        font-size: 0.95rem;
        font-weight: 700;
        color: #263238;
        letter-spacing: 0.02em;
    }
    .report-e2-officer-title-sub {
        font-size: 0.8125rem;
        font-weight: 400;
        color: #78909c;
        margin-top: 0.2rem;
    }
    .report-e2-category-panel {
        border: 2px solid #81d4fa;
        border-radius: 10px;
        background: #fff;
        padding: 1rem 1.15rem 1.25rem;
        margin-bottom: 1.25rem;
        box-shadow: 0 1px 4px rgba(2, 119, 189, 0.08);
    }
    .report-e2-cat-section-label {
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.11em;
        color: #455a64;
        margin-bottom: 0.35rem;
        text-transform: uppercase;
    }
    .mec-sims-compliance-category-name {
        font-size: 0.875rem;
        font-weight: 700;
        color: #0277bd;
        margin-bottom: 1rem;
    }
    .mec-sims-compliance-unit-banner {
        font-size: 0.875rem;
        font-weight: 700;
        color: #0f766e;
        background: #ecfdf5;
        border: 1px solid #a7f3d0;
        border-radius: 0.75rem;
        padding: 0.65rem 1rem;
        margin: 0 0 1.5rem;
    }
    .mec-sims-compliance-matrix-line--spaced {
        margin-top: 1.25rem;
        padding-top: 1.25rem;
        border-top: 1px dashed #e2e8f0;
    }
    .mec-sims-compliance-matrix-meta-table th {
        font-size: 0.6875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #64748b;
        background: #f8fafc;
    }
    .mec-sims-compliance-matrix-meta-table td {
        font-size: 0.75rem;
        vertical-align: top;
    }
    .mec-sims-compliance-reply-col .note-editor.note-frame {
        border-radius: 0.75rem;
        border-color: #e2e8f0;
        overflow: hidden;
    }
    .mec-sims-compliance-reply-col .note-editable {
        min-height: 7rem !important;
        font-size: 0.8125rem;
    }
    .mec-sims-compliance-field-label {
        display: block;
        font-size: 0.75rem;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 0.5rem;
    }
    .mec-sims-compliance-obs-box {
        background: rgba(248, 250, 252, 0.6);
        border: 1px solid #f1f5f9;
        border-radius: 1rem;
        padding: 1.25rem;
        min-height: 8.75rem;
        font-size: 0.75rem;
        line-height: 1.6;
        color: #475569;
        font-weight: 500;
        word-break: break-word;
    }
    .mec-sims-compliance-obs-box.mec-report-rtf-content ul,
    .mec-sims-compliance-obs-box.mec-report-rtf-content ol {
        margin: 0.15rem 0 0.35rem 1.1rem;
        padding-left: 1rem;
    }
    .mec-sims-compliance-obs-box.mec-report-rtf-content p {
        margin: 0 0 0.35rem;
    }
    .mec-sims-compliance-obs-box.mec-report-rtf-content p:last-child {
        margin-bottom: 0;
    }
    .mec-sims-compliance-obs-box--plain {
        white-space: pre-wrap;
    }
    .mec-sims-compliance-reply-col {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    .mec-sims-compliance-textarea-wrap {
        border-radius: 1rem;
        border: 1px solid #e2e8f0;
        background: #fff;
        overflow: hidden;
        transition: border-color 0.15s, box-shadow 0.15s;
    }
    .mec-sims-compliance-textarea-wrap:focus-within {
        border-color: #059669;
        box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
    }
    .mec-sims-compliance-textarea-wrap--locked {
        background: #f8fafc;
        border-color: #e2e8f0;
    }
    .mec-sims-compliance-textarea-wrap--locked:focus-within {
        border-color: #e2e8f0;
        box-shadow: none;
    }
    .mec-sims-compliance-textarea-wrap--locked textarea:disabled {
        color: #475569;
        cursor: not-allowed;
    }
    .mec-sims-compliance-textarea-wrap textarea {
        width: 100%;
        border: none;
        outline: none;
        resize: vertical;
        min-height: 7.5rem;
        padding: 1rem;
        font-size: 0.75rem;
        color: #1e293b;
        background: transparent;
    }
    .mec-sims-compliance-textarea-wrap textarea::placeholder {
        color: #94a3b8;
    }
    .mec-sims-compliance-readonly-reply {
        min-height: 7.5rem;
    }
    .mec-sims-compliance-footer {
        margin-top: 1.5rem;
        padding-top: 1rem;
        border-top: 1px solid #f1f5f9;
        display: flex;
        justify-content: flex-end;
    }
    .mec-sims-compliance-submit {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        background: #059669;
        color: #fff;
        font-size: 0.75rem;
        font-weight: 600;
        padding: 0.75rem 1.25rem;
        border: none;
        border-radius: 0.75rem;
        box-shadow: 0 4px 14px rgba(5, 150, 105, 0.15);
        transition: background 0.15s;
    }
    .mec-sims-compliance-submit:hover {
        background: #047857;
        color: #fff;
    }
    .mec-sims-compliance-empty {
        color: #64748b;
        font-size: 0.875rem;
    }
    .mec-sims-compliance-header-actions {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.75rem;
        flex-shrink: 0;
    }
    .mec-sims-compliance-revisit-banner {
        font-size: 0.75rem;
        color: #334155;
        background: #ecfdf5;
        border: 1px solid #a7f3d0;
        border-radius: 0.75rem;
        padding: 0.5rem 0.875rem;
        max-width: 18rem;
        line-height: 1.45;
    }
    .mec-sims-compliance-revisit-banner strong {
        color: #047857;
    }
    .mec-sims-compliance-assign-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.75rem;
        font-weight: 600;
        color: #fff;
        background: #0f766e;
        border: none;
        padding: 0.5rem 0.875rem;
        border-radius: 0.75rem;
        box-shadow: 0 1px 2px rgba(15, 118, 110, 0.2);
        cursor: pointer;
        transition: background 0.15s;
    }
    .mec-sims-compliance-assign-btn:hover {
        background: #0d9488;
        color: #fff;
    }
    #mecSimsAssignRevisitModal .modal-content,
    #mecSimsAssignRevisitModal .modal-body {
        overflow: visible;
    }
    #mecSimsAssignRevisitModal .select2-container {
        width: 100% !important;
    }
    #mecSimsAssignRevisitModal .select2-dropdown {
        z-index: 10066;
    }
    .mec-sims-compliance-attachments-section {
        margin-top: 2.5rem;
        padding-top: 2rem;
        border-top: 2px solid #e2e8f0;
    }
    .mec-sims-compliance-attachments-section__title {
        font-size: 0.75rem;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 1rem;
    }
    .mec-sims-compliance-attachment-row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 0.75rem;
        padding: 0.75rem;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 0.75rem;
        margin-bottom: 0.75rem;
    }
    .mec-sims-compliance-attachment-row__field {
        flex: 1 1 200px;
        min-width: 0;
    }
    .mec-sims-compliance-attachment-row__field label {
        display: block;
        font-size: 0.6875rem;
        font-weight: 600;
        color: #64748b;
        margin-bottom: 0.25rem;
    }
    .mec-sims-compliance-attachment-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .mec-sims-compliance-attachment-list li + li {
        margin-top: 0.5rem;
    }
    .mec-sims-compliance-attachment-list a {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8125rem;
        font-weight: 600;
        color: #0f766e;
        text-decoration: none;
    }
    .mec-sims-compliance-attachment-list a:hover {
        color: #0d9488;
        text-decoration: underline;
    }
</style>
@endpush

@section('contents')
<section class="content">
    <div class="container-fluid mec-sims-compliance-page">
        <div class="mec-sims-compliance-card">
            <div class="mec-sims-compliance-card__header">
                <div class="flex-grow-1" style="max-width: 48rem;">
                    <div class="mec-sims-compliance-badges-row">
                        @if (! empty($schemeRow['adp_number']) && $schemeRow['adp_number'] !== '—')
                            <span class="mec-sims-compliance-badge-meta">
                                <span class="mec-sims-compliance-badge-meta__label">{{ __('ADP') }}</span>{{ $schemeRow['adp_number'] }}
                            </span>
                        @endif
                        @if (! empty($schemeRow['scheme_uid']) && $schemeRow['scheme_uid'] !== '—')
                            <span class="mec-sims-compliance-badge-meta">
                                <span class="mec-sims-compliance-badge-meta__label">{{ __('UID') }}</span>{{ $schemeRow['scheme_uid'] }}
                            </span>
                        @endif
                        @if (! empty($source_label))
                            <span class="mec-sims-compliance-badge-meta">{{ $source_label }}</span>
                        @endif
                        @if (! empty($channel_label) && empty($read_only_hub))
                            <span class="mec-sims-compliance-badge-meta">{{ $channel_label }}</span>
                        @endif
                    </div>
                    @php
                        use Illuminate\Support\Str;
                        $schemeNameFull = $schemeRow['scheme_name'] ?? '—';
                        $schemeNameLimit = 140;
                        $schemeNameDisplay = $schemeNameFull === '—'
                            ? '—'
                            : Str::limit($schemeNameFull, $schemeNameLimit);
                    @endphp
                    <h2
                        class="mec-sims-compliance-card__title"
                        @if ($schemeNameFull !== $schemeNameDisplay && $schemeNameFull !== '—')
                            title="{{ $schemeNameFull }}"
                        @endif
                    >
                        {{ $schemeNameDisplay }}
                    </h2>
                    @if (! empty($schemeRow['location']) && $schemeRow['location'] !== '—')
                        <p class="mec-sims-compliance-card__location mb-0">
                            <i class="fas fa-map-marker-alt" aria-hidden="true"></i>
                            {{ $schemeRow['location'] }}
                        </p>
                    @endif
                </div>
                <div class="mec-sims-compliance-header-actions">
                    @if (! empty($revisit_assignment))
                        <div class="mec-sims-compliance-revisit-banner" id="mecSimsRevisitAssignmentBanner">
                            <strong>{{ __('Revisit assigned') }}</strong><br>
                            {{ $revisit_assignment['user_name'] }}
                            <span class="text-muted">· {{ $revisit_assignment['assigned_at'] }}</span>
                        </div>
                    @endif
                    @if (! empty($can_assign_revisit))
                        <button
                            type="button"
                            class="mec-sims-compliance-assign-btn"
                            data-toggle="modal"
                            data-target="#mecSimsAssignRevisitModal"
                        >
                            <i class="fas fa-user-check" aria-hidden="true"></i>
                            {{ __('Assign for revisit') }}
                        </button>
                    @endif
                    <a href="{{ $back_url ?? route('mec-sims.compliances.index') }}" class="mec-sims-compliance-back">
                        <i class="fas fa-arrow-left" aria-hidden="true"></i>
                        {{ __('Back to list') }}
                    </a>
                </div>
            </div>

            <div class="mec-sims-compliance-card__body">
                @php
                    $attachmentDownloadRoute = $attachment_download_route ?? 'mec-sims.compliances.attachment';
                    $complianceAttachments = $compliance_attachments ?? [];
                @endphp
                @if (! empty($films_visit_planning_blocked))
                    <p class="small text-muted mb-3">{{ __('Visit planning requires the scheme in CORE. You can still submit compliance replies against this FILMS record.') }}</p>
                @endif

                @if (! empty($read_only_hub))
                    @include('mec-sims.compliances.partials.observation-pairs', [
                        'heading' => __('AD replies'),
                        'observations' => $ad_observations ?? [],
                        'submitted' => $ad_submitted ?? false,
                        'can_reply' => false,
                        'compliance_submitted' => true,
                    ])
                    @include('mec-sims.compliances.partials.observation-pairs', [
                        'heading' => __('EA replies'),
                        'observations' => $ea_observations ?? [],
                        'submitted' => $ea_submitted ?? false,
                        'can_reply' => false,
                        'compliance_submitted' => true,
                    ])
                    @include('mec-sims.compliances.partials.attachments', [
                        'compliance_attachments' => $complianceAttachments,
                        'attachment_download_route' => $attachmentDownloadRoute,
                        'subject_key' => $subject_key ?? '',
                        'can_upload' => false,
                    ])
                @else
                    @php
                        $isManual = ($observations_mode ?? 'from_report') === 'manual';
                        $formAction = $store_url ?? (($mec_report ?? null) ? route('mec-sims.compliances.store', ['subject' => $subject_key ?? ('pms-'.$mec_report->id)]) : '');
                    @endphp
                    @if ($can_reply && ! $compliance_submitted && $formAction !== '')
                        <form method="post" action="{{ $formAction }}" id="mecSimsComplianceForm" enctype="multipart/form-data">
                            @csrf
                            @if ($errors->any())
                                <div class="alert alert-danger py-2 px-3" role="alert">
                                    {{ $errors->first() }}
                                </div>
                            @endif
                            <p class="small text-muted mb-3">{{ __('Every observation and reply is required.') }}</p>
                    @endif

                    @if ($isManual)
                        <div id="mecSimsManualRows">
                            @foreach (($observations ?: [['key' => 'm0', 'observation' => '', 'reply' => '']]) as $index => $obs)
                                <div class="mec-sims-compliance-pair js-manual-row">
                                    <div>
                                        <label class="mec-sims-compliance-field-label">{{ __('Observation / Discrepancies') }} <span class="text-danger">*</span></label>
                                        @if ($can_reply && ! $compliance_submitted)
                                            <textarea name="manual_rows[{{ $index }}][observation]" rows="5" class="form-control" required placeholder="{{ __('Enter the observation from the visit or FILMS record…') }}">{{ old('manual_rows.'.$index.'.observation', $obs['observation'] ?? '') }}</textarea>
                                        @else
                                            <div class="mec-sims-compliance-obs-box">{{ ($obs['observation'] ?? '') !== '' ? $obs['observation'] : '—' }}</div>
                                        @endif
                                    </div>
                                    <div class="mec-sims-compliance-reply-col">
                                        <label class="mec-sims-compliance-field-label">{{ __('Your Reply') }} <span class="text-danger">*</span></label>
                                        @if ($can_reply && ! $compliance_submitted)
                                            <textarea name="manual_rows[{{ $index }}][reply]" rows="5" class="form-control" required placeholder="{{ __('Enter formal compliance feedback or resolutions taken...') }}">{{ old('manual_rows.'.$index.'.reply', $obs['reply'] ?? '') }}</textarea>
                                        @else
                                            <div class="mec-sims-compliance-obs-box mec-sims-compliance-obs-box--plain">{{ ($obs['reply'] ?? '') !== '' ? $obs['reply'] : '—' }}</div>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        @if ($can_reply && ! $compliance_submitted)
                            <button type="button" class="btn btn-sm btn-outline-secondary mb-3" id="mecSimsAddManualRow">{{ __('Add observation') }}</button>
                        @endif
                    @else
                        @include('mec-sims.compliances.partials.observation-matrix-replies', [
                            'observations' => $observations,
                            'can_reply' => $can_reply,
                            'compliance_submitted' => $compliance_submitted,
                        ])
                    @endif

                    @include('mec-sims.compliances.partials.attachments', [
                        'compliance_attachments' => $complianceAttachments,
                        'attachment_download_route' => $attachmentDownloadRoute,
                        'subject_key' => $subject_key ?? '',
                        'can_upload' => $can_reply && ! $compliance_submitted && $formAction !== '',
                    ])

                    @if ($can_reply && ! $compliance_submitted && $formAction !== '')
                        <div class="mec-sims-compliance-footer" id="mecSimsComplianceFooter">
                            <button type="submit" class="mec-sims-compliance-submit" id="mecSimsComplianceSubmitBtn">
                                <i class="fas fa-paper-plane" aria-hidden="true"></i>
                                {{ __('Submit Compliance Replies') }}
                            </button>
                        </div>
                        </form>
                    @endif
                @endif
            </div>
        </div>
    </div>
</section>

@if (! empty($can_assign_revisit))
    <div class="modal fade" id="mecSimsAssignRevisitModal" tabindex="-1" role="dialog" aria-labelledby="mecSimsAssignRevisitModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content" style="border-radius: 1rem; border: 1px solid #e2e8f0;">
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title font-weight-bold" id="mecSimsAssignRevisitModalLabel">{{ __('Assign scheme for compliance revisit') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="{{ __('Close') }}">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body pt-2">
                    <p class="text-muted small mb-3">{{ __('Select a MEC field officer to revisit this scheme. Users with verify, approve, or publish permissions are not listed.') }}</p>
                    <div class="form-group mb-0">
                        <label for="mecSimsRevisitAssignee" class="small font-weight-bold text-uppercase text-muted">{{ __('Officer') }}</label>
                        <select id="mecSimsRevisitAssignee" class="form-control mec-sims-revisit-assignee-select" data-placeholder="{{ __('— Select officer —') }}">
                            <option value=""></option>
                            @foreach ($assignable_revisit_users ?? [] as $officer)
                                <option
                                    value="{{ $officer['id'] }}"
                                    @if (! empty($revisit_assignment['user_id']) && (int) $revisit_assignment['user_id'] === (int) $officer['id']) selected @endif
                                >{{ $officer['name'] }}</option>
                            @endforeach
                        </select>
                        <div id="mecSimsRevisitAssignError" class="text-danger small mt-2" style="display: none;"></div>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                    <button type="button" class="btn btn-success" id="mecSimsRevisitAssignSubmit" style="border-radius: 0.75rem;">
                        <i class="fas fa-check" aria-hidden="true"></i> {{ __('Assign') }}
                    </button>
                </div>
            </div>
        </div>
    </div>
@endif
@endsection

@push('scripts')
@if ($can_reply && ! ($compliance_submitted ?? false))
<script>
(function () {
    if (typeof window.summernoteDefaultOptions === 'undefined') {
        window.summernoteDefaultOptions = {
            placeholder: @json(__('Enter formal compliance feedback or resolutions taken...')),
            height: 180,
            followingToolbar: false,
            fontNames: [],
            defaultFontName: 'Arial',
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'italic', 'underline', 'clear']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link', 'picture']],
                ['view', ['fullscreen', 'codeview', 'help']]
            ]
        };
    }

    var form = document.getElementById('mecSimsComplianceForm');
    if (form) {
        form.addEventListener('submit', function () {
            if (typeof window.jQuery === 'undefined' || typeof window.jQuery.fn.summernote === 'undefined') {
                return;
            }
            window.jQuery('.mec-sims-compliance-reply-editor').each(function () {
                var $ta = window.jQuery(this);
                if ($ta.data('summernote')) {
                    $ta.val($ta.summernote('code'));
                }
            });
        });
    }

    var list = document.getElementById('mecSimsComplianceAttachmentList');
    var addBtn = document.getElementById('mecSimsComplianceAddAttachment');
    if (!list || !addBtn) {
        return;
    }

    function renumberAttachmentRows() {
        list.querySelectorAll('[data-attachment-row]').forEach(function (row, index) {
            row.querySelectorAll('[name]').forEach(function (el) {
                el.name = el.name.replace(/attachments\[\d+\]/, 'attachments[' + index + ']');
            });
        });
    }

    addBtn.addEventListener('click', function () {
        var index = list.querySelectorAll('[data-attachment-row]').length;
        var row = document.createElement('div');
        row.className = 'mec-sims-compliance-attachment-row';
        row.setAttribute('data-attachment-row', '');
        row.innerHTML =
            '<div class="mec-sims-compliance-attachment-row__field">' +
                '<label>' + @json(__('Document name')) + '</label>' +
                '<input type="text" name="attachments[' + index + '][document_name]" class="form-control form-control-sm" placeholder="' + @json(__('e.g. Compliance letter, site photographs')) + '" autocomplete="off">' +
            '</div>' +
            '<div class="mec-sims-compliance-attachment-row__field">' +
                '<label>' + @json(__('File')) + '</label>' +
                '<input type="file" name="attachments[' + index + '][file]" class="form-control form-control-sm" accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.jpg,.jpeg,.png">' +
            '</div>' +
            '<button type="button" class="btn btn-sm btn-outline-secondary mec-sims-compliance-remove-attachment" title="' + @json(__('Remove')) + '" aria-label="' + @json(__('Remove document row')) + '">' +
                '<i class="fas fa-times" aria-hidden="true"></i>' +
            '</button>';
        list.appendChild(row);
        renumberAttachmentRows();
        var nameInput = row.querySelector('input[type="text"]');
        if (nameInput) {
            nameInput.focus();
        }
    });

    list.addEventListener('click', function (event) {
        var removeBtn = event.target.closest('.mec-sims-compliance-remove-attachment');
        if (!removeBtn || !list.contains(removeBtn)) {
            return;
        }
        var rows = list.querySelectorAll('[data-attachment-row]');
        if (rows.length <= 1) {
            rows[0].querySelectorAll('input').forEach(function (input) {
                input.value = '';
            });
            return;
        }
        var row = removeBtn.closest('[data-attachment-row]');
        if (row) {
            row.remove();
        }
        renumberAttachmentRows();
    });
})();
</script>
@endif

@if (session('success'))
<script>
(function () {
    if (typeof Swal !== 'undefined' && Swal.fire) {
        Swal.fire({
            icon: 'success',
            title: @json(__('Compliance replies submitted')),
            text: @json(session('success')),
            confirmButtonText: @json(__('OK')),
            confirmButtonColor: '#059669',
        });
    }
})();
</script>
@endif

@if (! empty($can_assign_revisit) && ! empty($assign_revisit_url))
<script src="{{ asset('assets/plugins/select2/js/select2.full.min.js') }}"></script>
<script>
$(function () {
    if (typeof $.fn.select2 !== 'function') {
        return;
    }

    var submitBtn = document.getElementById('mecSimsRevisitAssignSubmit');
    var $select = $('#mecSimsRevisitAssignee');
    var $modal = $('#mecSimsAssignRevisitModal');
    var errorEl = document.getElementById('mecSimsRevisitAssignError');
    if (!submitBtn || !$select.length || !$modal.length) {
        return;
    }

    var placeholder = $select.data('placeholder') || @json(__('— Select officer —'));

    var $dropdownParent = $modal.find('.modal-content');
    if (!$dropdownParent.length) {
        $dropdownParent = $modal;
    }

    var select2Opts = {
        theme: 'bootstrap4',
        width: '100%',
        allowClear: true,
        placeholder: placeholder,
        dropdownParent: $dropdownParent,
        minimumResultsForSearch: 0,
    };

    function positionRevisitDropdown() {
        var instance = $select.data('select2');
        if (instance && instance.dropdown && typeof instance.dropdown._positionDropdown === 'function') {
            instance.dropdown._positionDropdown();
        }
    }

    function initRevisitAssigneeSelect2() {
        if ($select.hasClass('select2-hidden-accessible')) {
            $select.select2('destroy');
        }
        $select.select2(select2Opts);
    }

    $modal.on('shown.bs.modal', initRevisitAssigneeSelect2);

    $modal.on('hidden.bs.modal', function () {
        $(window).off('resize.mecSimsRevisitSelect2');
        if ($select.hasClass('select2-hidden-accessible')) {
            $select.select2('destroy');
        }
    });

    $select.on('select2:open', function () {
        window.setTimeout(positionRevisitDropdown, 0);
        var instance = $select.data('select2');
        if (!instance || !instance.$dropdown) {
            return;
        }
        instance.$dropdown.off('wheel.select2fix').on('wheel.select2fix', function (e) {
            e.stopPropagation();
        });
    });

    $(window).on('resize.mecSimsRevisitSelect2', function () {
        if ($select.next('.select2-container').hasClass('select2-container--open')) {
            positionRevisitDropdown();
        }
    });

    $modal.on('wheel', function (e) {
        if (!$('.select2-container--open').length) {
            return;
        }
        if ($(e.target).closest('.select2-container, .select2-dropdown').length) {
            return;
        }
        e.stopPropagation();
    });

    $select.on('change', function () {
        showError('');
    });

    var csrf = document.querySelector('meta[name="csrf-token"]');
    var csrfToken = csrf ? csrf.getAttribute('content') : '';

    function showError(msg) {
        if (!errorEl) {
            return;
        }
        errorEl.textContent = msg || '';
        errorEl.style.display = msg ? 'block' : 'none';
    }

    function updateBanner(assignment) {
        var banner = document.getElementById('mecSimsRevisitAssignmentBanner');
        if (!assignment) {
            return;
        }
        var html = '<strong>' + @json(__('Revisit assigned')) + '</strong><br>' +
            assignment.user_name +
            ' <span class="text-muted">· ' + assignment.assigned_at + '</span>';
        if (banner) {
            banner.innerHTML = html;
        } else {
            var actions = document.querySelector('.mec-sims-compliance-header-actions');
            if (!actions) {
                return;
            }
            var div = document.createElement('div');
            div.className = 'mec-sims-compliance-revisit-banner';
            div.id = 'mecSimsRevisitAssignmentBanner';
            div.innerHTML = html;
            actions.insertBefore(div, actions.firstChild);
        }
    }

    submitBtn.addEventListener('click', function () {
        var userId = parseInt($select.val(), 10);
        showError('');
        if (!userId) {
            showError(@json(__('Please select an officer.')));
            return;
        }

        submitBtn.disabled = true;
        var originalHtml = submitBtn.innerHTML;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin" aria-hidden="true"></i> ' + @json(__('Assigning…'));

        fetch(@json($assign_revisit_url), {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: JSON.stringify({ assigned_user_id: userId }),
        })
            .then(function (res) {
                return res.json().then(function (data) {
                    if (!res.ok) {
                        var msg = (data && data.message) ? data.message : @json(__('Assignment failed.'));
                        if (data && data.errors && data.errors.assigned_user_id) {
                            msg = data.errors.assigned_user_id[0];
                        }
                        throw new Error(msg);
                    }
                    return data;
                });
            })
            .then(function (data) {
                if (typeof Swal !== 'undefined' && Swal.fire) {
                    Swal.fire({
                        icon: 'success',
                        title: @json(__('Assigned')),
                        text: data.message || @json(__('Scheme assigned for compliance revisit.')),
                        confirmButtonColor: '#059669',
                    });
                }
                if (data.assignment) {
                    updateBanner(data.assignment);
                }
                var assignBtn = document.querySelector('.mec-sims-compliance-assign-btn');
                if (assignBtn) {
                    assignBtn.remove();
                }
                if (typeof window.jQuery !== 'undefined') {
                    window.jQuery('#mecSimsAssignRevisitModal').modal('hide');
                }
            })
            .catch(function (err) {
                showError(err.message || @json(__('Assignment failed.')));
            })
            .finally(function () {
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalHtml;
            });
    });
});
</script>
@endif

@if (($observations_mode ?? '') === 'manual' && ! empty($can_reply) && empty($compliance_submitted) && empty($read_only_hub))
<script>
(function () {
    var addBtn = document.getElementById('mecSimsAddManualRow');
    var wrap = document.getElementById('mecSimsManualRows');
    if (!addBtn || !wrap) {
        return;
    }
    addBtn.addEventListener('click', function () {
        var index = wrap.querySelectorAll('.js-manual-row').length;
        var row = document.createElement('div');
        row.className = 'mec-sims-compliance-pair js-manual-row';
        row.innerHTML = '<div><label class="mec-sims-compliance-field-label">{{ __('Observation / Discrepancies') }} <span class="text-danger">*</span></label>' +
            '<textarea name="manual_rows[' + index + '][observation]" rows="5" class="form-control" required></textarea></div>' +
            '<div class="mec-sims-compliance-reply-col"><label class="mec-sims-compliance-field-label">{{ __('Your Reply') }} <span class="text-danger">*</span></label>' +
            '<textarea name="manual_rows[' + index + '][reply]" rows="5" class="form-control" required></textarea></div>';
        wrap.appendChild(row);
    });
})();
</script>
@endif

@if (! empty($can_reply) && empty($compliance_submitted) && empty($read_only_hub))
<script>
(function () {
    var form = document.getElementById('mecSimsComplianceForm');
    if (!form) {
        return;
    }
    form.addEventListener('submit', function (event) {
        var fields = form.querySelectorAll('textarea[required]');
        for (var i = 0; i < fields.length; i++) {
            if (String(fields[i].value || '').trim() === '') {
                event.preventDefault();
                fields[i].value = '';
                fields[i].focus();
                if (typeof fields[i].reportValidity === 'function') {
                    fields[i].reportValidity();
                }
                return;
            }
        }
    });
})();
</script>
@endif
@endpush