@extends('layouts.app')
@section('title', plan_index_list_page_title())

@push('stylesheets')
@include('partials.filter-card-styles')
@include('partials.collapsible-filter-styles')
@include('partials.index-datatable-styles')
<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') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/select2-bootstrap4-theme/select2-bootstrap4-custom.css') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/daterangepicker/daterangepicker.css') }}">
@include('schemes.partials.plan-scheme-selection-surface-styles')
<style>
    @include('partials.mec-plan-report-type-badge-styles')
    .collapsible-filter-card .collapsible-filter-card__collapse {
        padding: 1rem 1.25rem 1.15rem;
    }
    .plan-filter-card {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        border: 1px solid #e9ecef;
    }
    .plan-filter-card .card-body {
        padding: 1rem 1.25rem;
    }
    .plan-filter-form {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 1rem 1.5rem;
    }
    .plan-filter-field {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .plan-ssc-alignment-ring {
        width: 88px;
        height: 88px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1.15rem;
        flex-shrink: 0;
    }
    .plan-ssc-alignment-ring--high { background: rgba(40, 167, 69, 0.15); color: #1e7e34; border: 2px solid #28a745; }
    .plan-ssc-alignment-ring--mid { background: rgba(255, 193, 7, 0.2); color: #856404; border: 2px solid #ffc107; }
    .plan-ssc-alignment-ring--low { background: rgba(220, 53, 69, 0.12); color: #bd2130; border: 2px solid #dc3545; }
    .plan-ssc-section-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.5rem; }
    .plan-ssc-check-row { border-left: 3px solid #dee2e6; padding: 0.4rem 0 0.4rem 0.65rem; margin-bottom: 0.35rem; }
    .plan-ssc-check-row--pass { border-left-color: #28a745; }
    .plan-ssc-check-row--warn { border-left-color: #ffc107; }
    .plan-ssc-check-row--fail { border-left-color: #dc3545; }
    .plan-ssc-check-row--info { border-left-color: #6c757d; }
    body.dark-mode .plan-ssc-alignment-ring--high { background: rgba(40, 167, 69, 0.25); color: #8fd19e; }
    body.dark-mode .plan-ssc-alignment-ring--mid { background: rgba(255, 193, 7, 0.2); color: #ffda6a; }
    body.dark-mode .plan-ssc-alignment-ring--low { background: rgba(220, 53, 69, 0.25); color: #f5a5ad; }
    .plan-filter-field label {
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: #212529;
        margin-bottom: 0.35rem;
    }
    .plan-filter-field .form-control {
        border-radius: 6px;
        min-height: 38px;
        background: #fff;
    }
    .plan-filter-field select.form-control {
        min-width: 130px;
        appearance: auto;
    }
    .plan-filter-field input[name="year"] {
        min-width: 90px;
        color: #6c757d;
    }
    .plan-filter-actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-left: auto;
    }
    .plan-filter-actions .btn-filter {
        border-radius: 6px;
        padding: 0.4rem 1rem;
        font-weight: 600;
        min-height: 38px;
    }
    .plan-filter-actions .btn-reset {
        width: 38px;
        height: 38px;
        padding: 0;
        border-radius: 6px;
        background: #fff;
        border: 1px solid #dee2e6;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #212529;
    }
    .plan-filter-actions .btn-reset:hover {
        background: #f8f9fa;
        border-color: #adb5bd;
        color: #212529;
    }
    .plan-plan-details-badge {
        cursor: pointer;
    }
    .plan-plan-details-badge:hover {
        filter: brightness(0.95);
    }
    .plan-plan-details-badge:focus {
        outline: 2px solid rgba(0, 123, 255, 0.5);
        outline-offset: 2px;
    }
    /* Laravel pagination below table (Bootstrap 4); keep outside DataTables horizontal scroll */
    .plan-index-card-pagination {
        flex: 0 0 100%;
        width: 100%;
    }
    .plan-index-card-pagination .pagination {
        margin-bottom: 0;
    }
    .plan-filter-tier {
        border-top: 1px solid #e9ecef;
        padding-top: 0.85rem;
        margin-top: 0.85rem;
    }
    .plan-filter-tier--plan {
        border-top: 0;
        padding-top: 0;
        margin-top: 0;
    }
    .plan-filter-tier__label {
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #6c757d;
        margin-bottom: 0.5rem;
    }
    .plan-filter-tier__toggle {
        font-weight: 700;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #212529;
        text-decoration: none !important;
    }
    .plan-filter-tier__hint {
        font-size: 0.8rem;
        color: #6c757d;
        margin-left: 1.15rem;
    }
    .plan-filter-tier__fields {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 1rem 1.25rem;
    }
    .plan-filter-tier__fields--scheme {
        align-items: flex-start;
    }
    /* Visit plan filter rows */
    .plan-filter-row {
        width: 100%;
    }
    .plan-filter-row + .plan-filter-row {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #eef1f4;
    }
    .plan-filter-row--primary {
        display: grid;
        grid-template-columns: minmax(11rem, 1.35fr) minmax(10rem, 1fr) minmax(8.5rem, .85fr) minmax(5.5rem, .55fr) minmax(10rem, 1fr) minmax(8.5rem, .85fr);
        gap: 1rem 1.25rem;
        align-items: end;
    }
    .plan-filter-row--secondary {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 1rem 1.25rem;
    }
    .plan-filter-row--scheme #planIndexSchemeTriple {
        width: 100%;
    }
    .plan-filter-form--mec-unified .plan-filter-tier__fields--unified {
        display: block;
        width: 100%;
    }
    .plan-filter-field--search {
        min-width: 0;
    }
    .plan-filter-field--plan-type,
    .plan-filter-field--region {
        min-width: 0;
    }
    .plan-filter-field--month {
        min-width: 0;
    }
    .plan-filter-field--year {
        min-width: 0;
    }
    .plan-filter-field--range {
        flex: 0 1 16rem;
        min-width: 14rem;
    }
    /* Hide native multi-select chrome until Select2 enhances (MEC collapse init). */
    .plan-filter-multiselect:not(.select2-hidden-accessible) {
        min-height: 38px;
        max-height: 38px;
        overflow: hidden;
    }
    .plan-filter-field--multiselect .select2-container {
        width: 100% !important;
        min-width: 10rem;
    }
    .plan-filter-field--multiselect .select2-container--bootstrap4 .select2-selection--multiple {
        min-height: 38px;
        height: auto !important;
        border-radius: 6px;
        border-color: #ced4da;
        padding: 0.2rem 0.35rem;
    }
    .plan-filter-field--multiselect .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
        margin-top: 0.2rem;
        font-size: 0.78rem;
        border-radius: 4px;
    }
    .plan-filter-field--multiselect .select2-container--bootstrap4 .select2-search__field {
        min-width: 4rem;
    }
    .plan-filter-field--mo .form-control,
    .plan-filter-field--mo .select2-container {
        min-width: 11rem;
    }
    #planIndexSchemeTriple {
        flex: 1 1 100%;
    }
    .plan-filter-chips {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
    }
    .plan-filter-chips__label {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #6c757d;
    }
    .plan-filter-chip {
        display: inline-flex;
        align-items: center;
        padding: 0.2rem 0.55rem;
        border-radius: 999px;
        background: #e8f4fd;
        border: 1px solid #b8daff;
        color: #0c5460;
        font-size: 0.8rem;
        text-decoration: none !important;
    }
    .plan-filter-chip:hover {
        background: #d1ecf9;
        color: #062c33;
    }
    .plan-filter-chip__key {
        font-weight: 700;
        margin-right: 0.25rem;
    }
    .plan-filter-results-hint {
        font-size: 0.82rem;
        color: #495057;
    }
    .plan-index-scheme-match-count {
        font-weight: 700;
        color: #0056b3;
    }
    @keyframes planSchemeBlinkOnce {
        0%, 100% { box-shadow: none; }
        25%, 75% { box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.55); }
    }
    #planDetailsModalBody .pms-plan-scheme-card--filter-highlight.plan-scheme-blink-once {
        animation: planSchemeBlinkOnce 1s ease-in-out 1;
        background: rgba(0, 123, 255, 0.04);
    }
    body.dark-mode .plan-filter-chip {
        background: rgba(23, 162, 184, 0.15);
        border-color: rgba(23, 162, 184, 0.35);
        color: #9eeaf9;
    }
    @media (max-width: 991.98px) {
        .plan-filter-form {
            gap: 0.85rem 1rem;
        }
        .plan-filter-actions {
            margin-left: 0;
            width: 100%;
            justify-content: flex-end;
        }
        .plan-filter-row--primary {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .plan-filter-field {
            flex: 1 1 calc(50% - 0.5rem);
            min-width: 9rem;
        }
        .plan-filter-field--range {
            flex: 1 1 100%;
            min-width: 0;
        }
        #planIndexSchemeTriple {
            flex: 1 1 100%;
        }
    }
    @media (max-width: 575.98px) {
        .plan-filter-card .card-body {
            padding: 0.85rem 1rem;
        }
        .plan-filter-row--primary {
            grid-template-columns: 1fr;
        }
        .plan-filter-field {
            flex: 1 1 100%;
        }
        .plan-filter-field select.form-control,
        .plan-filter-field input.form-control {
            width: 100%;
            min-width: 0;
        }
        .plan-filter-actions .btn-filter {
            flex: 1 1 auto;
        }
    }
</style>
@endpush

@section('contents')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                @php
                    $planFiltersOpen = plan_index_has_scheme_filters()
                        || trim((string) ($search ?? '')) !== ''
                        || visit_plan_index_has_plan_type_filter()
                        || request()->filled('month')
                        || request()->filled('year')
                        || visit_plan_index_has_region_filter()
                        || (request()->filled('status') && ! in_array((string) request('status'), ['draft', 'in_process', 'approved'], true));
                @endphp
                <x-collapsible-filter-card
                    :title="__('FIND PLANS')"
                    collapse-id="planIndexFiltersCollapse"
                    form-id="planIndexFilterForm"
                    :reset-url="plan_index_list_reset_url()"
                    :open="$planFiltersOpen"
                >
                    <div class="card-body">
                        @include('plan.partials.index-filter-form', ['schemeFilterCatalog' => $schemeFilterCatalog ?? []])
                    </div>
                </x-collapsible-filter-card>

                <x-active-filter-chips :chips="$activeChips" />

                @php
                    $planTableHeaders = ['Region', 'Type', 'No. Schemes', 'Initiating Officer', 'Month-Year', 'Status', 'Last Action', 'Evaluator', 'Verifier', 'Approver'];
                    $planLastWorkflowDisplay = function ($plan) {
                        $at = $plan->plan_list_last_workflow_at ?? null;
                        if (! $at instanceof \Carbon\Carbon && ! $at instanceof \DateTimeInterface) {
                            return ['order' => 0, 'text' => '—'];
                        }
                        $parsed = \Carbon\Carbon::parse($at)->timezone(config('app.timezone'));

                        return [
                            'order' => $parsed->getTimestamp(),
                            'text' => $parsed->format('d M Y H:i'),
                        ];
                    };
                    /** Sidebar “Review & Approval” is `/plan` without `status=approved` or `status=in_process` (see PlanService::planListQuery). */
                    $planListShowsRdConsolidationControls = can_any_visit_plan('can_check')
                        && ! in_array((string) request('status', ''), ['draft', 'in_process', 'approved'], true);

                    $planMonthYear = function($plan) {
                        $month = (int) ($plan->month ?? 0);
                        $year = (string) ($plan->year ?? '');
                        if ($month >= 1 && $month <= 12 && $year !== '') {
                            return \Carbon\Carbon::create()->month($month)->format('F') . ' ' . $year;
                        }
                        return '—';
                    };
                    $planTypeBadgeVariant = function (?string $type): string {
                        return match (strtoupper(trim((string) $type))) {
                            'RVP' => 'custom-rvp',
                            'CVP' => 'custom-cvp',
                            'SVP' => 'custom-svp',
                            'DRP' => 'custom-drp',
                            'ERP' => 'custom-erp',
                            'PMP' => 'custom-pmp',
                            default => 'secondary',
                        };
                    };
                    $planSchemeCount = function ($plan): int {
                        $schemes = $plan->latestVersion?->schemes;
                        if ($schemes === null || $schemes->isEmpty()) {
                            return 0;
                        }

                        return $schemes->whereNull('rd_rejected_at')->count();
                    };
                    $planSchemeCountDisplay = function ($plan) use ($planSchemeCount): array {
                        if (plan_index_has_scheme_filters()) {
                            $match = (int) ($plan->plan_list_matching_scheme_count ?? 0);

                            return ['order' => $match, 'html' => '<span class="plan-index-scheme-match-count" title="'.e(__('Matching scheme filters')).'">'.$match.'</span>'];
                        }
                        $count = $planSchemeCount($plan);

                        return ['order' => $count, 'html' => (string) $count];
                    };
                @endphp
                <x-layouts.index-card
                    :createRoute="can_any_visit_plan('add') && !can_any_visit_plan('can_check') ? route('plan.visit.period') : null"
                    :tableHeading="plan_index_list_page_title()"
                    createLabel="Create Plan"
                    :headers="$planTableHeaders"
                    :sortColumns="['plans.mec_region_id', 'plans.plan_type', null, 'plans.created_by', 'plans.month', 'plans.status', 'plans.id', 'plans.checked_by', 'plans.verified_by', 'plans.approved_by']"
                    paginationClass="plan-index-card-pagination"
                    :perPageSlot="view('components.per-page-selector', ['current' => $perPage ?? 25, 'baseUrl' => request()->url()])"
                    :pagination="$plans->appends(plan_index_public_query_params())->links('vendor.pagination.bootstrap-4')">
                    @if(can_any_visit_plan('can_check'))
                        @if($planListShowsRdConsolidationControls)
                        @if(($pendingCheckerShellExtractions ?? 0) > 0)
                        <div class="alert alert-warning d-flex flex-wrap align-items-center justify-content-between gap-2 py-2 px-3 mb-2">
                            <div class="small mb-0">
                                <i class="fas fa-exclamation-triangle mr-1"></i>
                                {{ (int) $pendingCheckerShellExtractions === 1
                                    ? __('One declined consolidated plan still has your schemes that were not returned with the submitters\' plans.')
                                    : __(':count declined consolidated plans still have your schemes that were not returned with the submitters\' plans.', ['count' => (int) $pendingCheckerShellExtractions]) }}
                            </div>
                            <form method="POST" action="{{ route('plan.extract-declined-shell-schemes') }}" class="mb-0">
                                @csrf
                                <button type="submit" class="btn btn-sm btn-warning">
                                    <i class="fas fa-undo mr-1"></i>{{ __('Restore my schemes') }}
                                </button>
                            </form>
                        </div>
                        @endif
                        <div class="mb-2 d-flex flex-wrap align-items-center justify-content-between gap-2">
                            <span class="small text-muted"></span>
                            <div class="d-flex flex-wrap gap-2">
                                <button type="button" class="btn btn-sm btn-success" id="openConsolidateModalBtn" disabled data-toggle="modal" data-target="#consolidatePlansModal">
                                    <i class="fas fa-layer-group mr-1"></i>Consolidate
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-success" id="openForwardConsolidatedModalBtn" disabled data-toggle="modal" data-target="#forwardConsolidatedPlanModal">
                                    <i class="fas fa-share mr-1"></i><span id="openForwardConsolidatedModalBtnLabel">Forward</span>
                                </button>
                            </div>
                        </div>
                        @endif
                        @foreach ($plans as $plan)
                            <tr>
                                <td>
                                    @if($planListShowsRdConsolidationControls)
                                    <div class="d-flex align-items-center">
                                        <input type="checkbox"
                                               class="mr-2 consolidate-plan-check"
                                               value="{{ $plan->id }}"
                                               data-plan-type="{{ $plan->plan_type }}"
                                               data-plan-month="{{ $plan->month }}"
                                               data-plan-year="{{ $plan->year }}"
                                               data-mec-region-id="{{ (int) ($plan->mec_region_id ?? 0) }}"
                                               data-is-consolidated="{{ count($plan->consolidatedSourcePlanIds()) ? '1' : '0' }}"
                                               @if($plan->status !== 'rd_review') disabled @endif>
                                        {{ $plan->display_region ?? '—' }}
                                    </div>
                                    @else
                                        {{ $plan->display_region ?? '—' }}
                                    @endif
                                </td>
                                <td>
                                    @if(filled($plan->plan_type))
                                        <button type="button" class="badge badge-{{ $planTypeBadgeVariant($plan->plan_type) }} border-0 plan-plan-details-badge plan-type-badge-static" data-plan-id="{{ $plan->id }}" title="View plan details">{{ $plan->plan_type }}</button>
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>
                                @php $__psc = $planSchemeCountDisplay($plan); @endphp
                                <td data-order="{{ $__psc['order'] }}">{!! $__psc['html'] !!}</td>
                                <td>
                                    @if(($plan->plan_list_mo_column_mode ?? '') === 'consolidated')
                                        <span class="d-block text-muted small font-weight-bold text-uppercase mb-0" style="font-size: 0.65rem; letter-spacing: 0.04em;">Consolidated by</span>
                                        {{ $plan->display_consolidated_by ?? ($plan->creator->name ?? '—') }}
                                    @else
                                        {{ $plan->display_monitoring_officers ?? ($plan->creator->name ?? '—') }}
                                    @endif
                                </td>
                                <td>{{ $planMonthYear($plan) }}</td>
                                <td>
                                    @php $__ps = plan_list_row_status_for_badge($plan); @endphp
                                    <span class="badge badge-{{ $__ps === 'approved' ? 'success' : ($__ps === 'rejected' ? 'danger' : ($__ps === 'draft' ? 'secondary' : 'info')) }}">{{ plan_status_display_label($plan) }}</span>
                                    @if((int) ($plan->declined_scheme_count ?? 0) > 0)
                                        <span class="badge badge-secondary ml-1" title="Schemes declined from active review">{{ (int) $plan->declined_scheme_count }} declined</span>
                                    @endif
                                    @if(count($plan->consolidatedSourcePlanIds()))
                                        <span class="badge badge-warning text-dark ml-1" title="Plans merged for RD review">Consolidated</span>
                                    @endif
                                    @if((int) ($plan->plan_list_merged_into_plan_id ?? 0) > 0)
                                        <span class="badge badge-light border ml-1" title="Workflow continues on the consolidated plan">Merged into #{{ (int) $plan->plan_list_merged_into_plan_id }}</span>
                                    @endif
                                </td>
                                @php $__plw = $planLastWorkflowDisplay($plan); @endphp
                                <td class="text-nowrap small text-left" data-order="{{ $__plw['order'] }}">{{ $__plw['text'] }}</td>
                                <td>{{ $plan->checker->name ?? '—' }}</td>
                                <td>{{ $plan->verifier->name ?? '—' }}</td>
                                <td>{{ $plan->approver->name ?? '—' }}</td>
                            </tr>
                        @endforeach
                    @elseif(can_any_visit_plan('can_verify') || can_any_visit_plan('can_approve'))
                        @foreach ($plans as $plan)
                            <tr>
                                <td>{{ $plan->display_region ?? '—' }}</td>
                                <td>
                                    @if(filled($plan->plan_type))
                                        <button type="button" class="badge badge-{{ $planTypeBadgeVariant($plan->plan_type) }} border-0 plan-plan-details-badge plan-type-badge-static" data-plan-id="{{ $plan->id }}" title="View plan details">{{ $plan->plan_type }}</button>
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>
                                @php $__psc = $planSchemeCountDisplay($plan); @endphp
                                <td data-order="{{ $__psc['order'] }}">{!! $__psc['html'] !!}</td>
                                <td>
                                    @if(($plan->plan_list_mo_column_mode ?? '') === 'consolidated')
                                        <span class="d-block text-muted small font-weight-bold text-uppercase mb-0" style="font-size: 0.65rem; letter-spacing: 0.04em;">Consolidated by</span>
                                        {{ $plan->display_consolidated_by ?? ($plan->creator->name ?? '—') }}
                                    @else
                                        {{ $plan->display_monitoring_officers ?? ($plan->creator->name ?? '—') }}
                                    @endif
                                </td>
                                <td>{{ $planMonthYear($plan) }}</td>
                                <td>
                                    @php $__ps = plan_list_row_status_for_badge($plan); @endphp
                                    <span class="badge badge-{{ $__ps === 'approved' ? 'success' : ($__ps === 'rejected' ? 'danger' : ($__ps === 'draft' ? 'secondary' : 'info')) }}">{{ plan_status_display_label($plan) }}</span>
                                    @if((int) ($plan->declined_scheme_count ?? 0) > 0)
                                        <span class="badge badge-secondary ml-1" title="Schemes declined from active review">{{ (int) $plan->declined_scheme_count }} declined</span>
                                    @endif
                                    @if(count($plan->consolidatedSourcePlanIds()))
                                        <span class="badge badge-warning text-dark ml-1" title="Plans merged for RD review">Consolidated</span>
                                    @endif
                                    @if((int) ($plan->plan_list_merged_into_plan_id ?? 0) > 0)
                                        <span class="badge badge-light border ml-1" title="Workflow continues on the consolidated plan">Merged into #{{ (int) $plan->plan_list_merged_into_plan_id }}</span>
                                    @endif
                                </td>
                                @php $__plw = $planLastWorkflowDisplay($plan); @endphp
                                <td class="text-nowrap small text-left" data-order="{{ $__plw['order'] }}">{{ $__plw['text'] }}</td>
                                <td>{{ $plan->checker->name ?? '—' }}</td>
                                <td>{{ $plan->verifier->name ?? '—' }}</td>
                                <td>{{ $plan->approver->name ?? '—' }}</td>
                            </tr>
                        @endforeach
                    @else
                        @foreach ($plans as $plan)
                            <tr>
                                <td>{{ $plan->display_region ?? '—' }}</td>
                                <td>
                                    @if(filled($plan->plan_type))
                                        <button type="button" class="badge badge-{{ $planTypeBadgeVariant($plan->plan_type) }} border-0 plan-plan-details-badge plan-type-badge-static" data-plan-id="{{ $plan->id }}" title="View plan details">{{ $plan->plan_type }}</button>
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>
                                @php $__psc = $planSchemeCountDisplay($plan); @endphp
                                <td data-order="{{ $__psc['order'] }}">{!! $__psc['html'] !!}</td>
                                <td>
                                    @if(($plan->plan_list_mo_column_mode ?? '') === 'consolidated')
                                        <span class="d-block text-muted small font-weight-bold text-uppercase mb-0" style="font-size: 0.65rem; letter-spacing: 0.04em;">Consolidated by</span>
                                        {{ $plan->display_consolidated_by ?? ($plan->creator->name ?? '—') }}
                                    @else
                                        {{ $plan->display_monitoring_officers ?? ($plan->creator->name ?? '—') }}
                                    @endif
                                </td>
                                <td>{{ $planMonthYear($plan) }}</td>
                                <td>
                                    @php $__ps = plan_list_row_status_for_badge($plan); @endphp
                                    <span class="badge badge-{{ $__ps === 'approved' ? 'success' : ($__ps === 'rejected' ? 'danger' : ($__ps === 'draft' ? 'secondary' : 'info')) }}">{{ plan_status_display_label($plan) }}</span>
                                    @if((int) ($plan->declined_scheme_count ?? 0) > 0)
                                        <span class="badge badge-secondary ml-1" title="Schemes declined by RD pending correction">{{ (int) $plan->declined_scheme_count }} declined</span>
                                    @endif
                                    @if(count($plan->consolidatedSourcePlanIds()))
                                        <span class="badge badge-warning text-dark ml-1" title="Plans merged for RD review">Consolidated ({{ (int) ($plan->display_consolidation_source_count ?? count($plan->consolidatedSourcePlanIds())) }} sources)</span>
                                    @endif
                                    @if((int) ($plan->plan_list_merged_into_plan_id ?? 0) > 0)
                                        <span class="badge badge-light border ml-1" title="Workflow continues on the consolidated plan">Merged into #{{ (int) $plan->plan_list_merged_into_plan_id }}</span>
                                    @endif
                                </td>
                                @php $__plw = $planLastWorkflowDisplay($plan); @endphp
                                <td class="text-nowrap small text-left" data-order="{{ $__plw['order'] }}">{{ $__plw['text'] }}</td>
                                <td>{{ $plan->checker->name ?? '—' }}</td>
                                <td>{{ $plan->verifier->name ?? '—' }}</td>
                                <td>{{ $plan->approver->name ?? '—' }}</td>
                            </tr>
                        @endforeach
                    @endif
                </x-layouts.index-card>

                {{-- Plan details modal (body loaded via AJAX) --}}
                <div class="modal fade" id="planDetailsModal" tabindex="-1" role="dialog" aria-labelledby="planDetailsModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-xl" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="planDetailsModalLabel">Plan Details</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body" id="planDetailsModalBody" style="min-height: 200px;">
                                <div class="text-center py-5 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-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>

                @if($planListShowsRdConsolidationControls)
                <div class="modal fade" id="consolidatePlansModal" tabindex="-1" role="dialog" aria-labelledby="consolidatePlansModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <form id="consolidateForm" method="POST" action="{{ route('plan.consolidate') }}">
                                @csrf
                                <input type="hidden" name="plan_ids" id="consolidatePlanIds" value="">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="consolidatePlansModalLabel">Consolidate Selected Plans</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <p class="text-muted small mb-2">This merges the selected plans into one plan and keeps it in RD review. Forward it to the verifier separately when you are ready.</p>
                                    <p class="small mb-2"><strong>Selected plans:</strong> <span id="selectedPlanCount">0</span></p>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                    <button type="submit" class="btn btn-success" id="consolidateSubmitBtn">
                                        <i class="fas fa-layer-group mr-1"></i>Consolidate
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="modal fade" id="forwardConsolidatedPlanModal" tabindex="-1" role="dialog" aria-labelledby="forwardConsolidatedPlanModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <form id="forwardConsolidatedForm" method="POST" action="">
                                @csrf
                                <div class="modal-header">
                                    <h5 class="modal-title" id="forwardConsolidatedPlanModalLabel">Forward plan</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <p class="text-muted small mb-2" id="forwardConsolidatedPlanModalHelp">Send the selected plan to the next reviewer. Consolidation is optional; you can forward a single plan or a consolidated plan.</p>
                                    <div class="form-group mb-0">
                                        <label for="forwardConsolidatedRemarks">Remarks (optional)</label>
                                        <textarea id="forwardConsolidatedRemarks" name="remarks" class="form-control" rows="3" maxlength="2000" placeholder="Optional remarks"></textarea>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                    <button type="submit" class="btn btn-success" id="forwardConsolidatedSubmitBtn">
                                        <i class="fas fa-share mr-1"></i>Forward
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
@include('partials.index-datatable-scripts')
@include('partials.collapsible-filter-scripts')
<script src="{{ asset('assets/plugins/select2/js/select2.full.min.js') }}"></script>
<script src="{{ asset('assets/plugins/moment/moment.min.js') }}"></script>
<script src="{{ asset('assets/plugins/daterangepicker/daterangepicker.js') }}"></script>
<script>
@include('partials.pms-clean-filter-get-scripts')
</script>
<script>
    $(function () {
        if ($('#example1').length && typeof window.PmsIndexDataTable !== 'undefined') {
            PmsIndexDataTable.initLaravelPaginated('#example1', {
                scrollX: true,
            });
            PmsIndexDataTable.attachServerSort('#example1', {
                sortColParam: 'sort_column',
                sortDirParam: 'sort_direction',
                currentSortCol: '{{ request("sort_column", "plans.id") }}',
                currentSortDir: '{{ request("sort_direction", "desc") }}',
                currentQuery: @json(request()->except(['page', 'sort_column', 'sort_direction']))
            });
        }

        var $planFilterForm = $('#planIndexFilterForm');
        if ($planFilterForm.length) {
            window.pmsBindCleanFilterFormSubmit('#planIndexFilterForm');
            var select2Base = { theme: 'bootstrap4', width: '100%', allowClear: true };
            var $planFilterCollapse = $('#planIndexFiltersCollapse');

            function initPlanFilterMultiselects() {
                $planFilterForm.find('.plan-filter-multiselect').each(function () {
                    var $sel = $(this);
                    if ($sel.hasClass('select2-hidden-accessible')) {
                        $sel.select2('destroy');
                    }
                    $sel.select2($.extend({}, select2Base, {
                        placeholder: $.trim($sel.data('placeholder') || ''),
                        closeOnSelect: false,
                        dropdownParent: $planFilterCollapse.length ? $planFilterCollapse : $(document.body),
                    }));
                });
            }

            function initPlanFilterMoSelect() {
                var $mo = $('#plan_filter_mo');
                if (! $mo.length) {
                    return;
                }
                if ($mo.hasClass('select2-hidden-accessible')) {
                    $mo.select2('destroy');
                }
                $mo.select2($.extend({}, select2Base, {
                    placeholder: @json(__('All officers')),
                    dropdownParent: $planFilterCollapse.length ? $planFilterCollapse : $(document.body),
                }));
            }

            function initPlanFilterSelect2WhenVisible() {
                if ($planFilterCollapse.length && ! $planFilterCollapse.hasClass('show')) {
                    return;
                }
                initPlanFilterMultiselects();
                initPlanFilterMoSelect();
            }

            $planFilterForm.find('#planIndexSchemeTriple select.scheme-project-sync').each(function () {
                var $sel = $(this);
                if ($sel.hasClass('select2-hidden-accessible')) {
                    return;
                }
                var placeholder = $.trim($sel.find('option[value=""]').first().text() || '');
                var opts = $.extend({}, select2Base);
                if (placeholder !== '') {
                    opts.placeholder = placeholder;
                }
                $sel.select2(opts);
            });

            initPlanFilterSelect2WhenVisible();
            $planFilterCollapse.on('shown.bs.collapse', function () {
                initPlanFilterMultiselects();
                initPlanFilterMoSelect();
            });

            var planIndexTripleSyncing = false;
            var $planTripleSync = $planFilterForm.find('#planIndexSchemeTriple select.scheme-project-sync');
            $planTripleSync.on('change select2:select select2:clear', function () {
                if (planIndexTripleSyncing) {
                    return;
                }
                var pid = $(this).val() || '';
                planIndexTripleSyncing = true;
                try {
                    $planTripleSync.not(this).each(function () {
                        $(this).val(pid).trigger('change.select2');
                    });
                } finally {
                    planIndexTripleSyncing = false;
                }
            });

            var $visitRange = $('#plan_filter_visit_range');
            if ($visitRange.length && $.fn.daterangepicker) {
                var rangeStart = $('#plan_filter_visit_from').val() || null;
                var rangeEnd = $('#plan_filter_visit_to').val() || null;
                $visitRange.daterangepicker({
                    autoUpdateInput: false,
                    locale: {
                        format: 'MM/DD/YYYY',
                        cancelLabel: @json(__('Clear')),
                        applyLabel: @json(__('Apply')),
                    },
                    startDate: rangeStart ? moment(rangeStart, 'YYYY-MM-DD') : moment().startOf('month'),
                    endDate: rangeEnd ? moment(rangeEnd, 'YYYY-MM-DD') : moment().endOf('month'),
                });
                if (rangeStart && rangeEnd) {
                    $visitRange.val(
                        moment(rangeStart, 'YYYY-MM-DD').format('MM/DD/YYYY')
                        + ' - '
                        + moment(rangeEnd, 'YYYY-MM-DD').format('MM/DD/YYYY')
                    );
                }
                $visitRange.on('apply.daterangepicker', function (ev, picker) {
                    $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
                    $('#plan_filter_visit_from').val(picker.startDate.format('YYYY-MM-DD'));
                    $('#plan_filter_visit_to').val(picker.endDate.format('YYYY-MM-DD'));
                });
                $visitRange.on('cancel.daterangepicker', function () {
                    $(this).val('');
                    $('#plan_filter_visit_from').val('');
                    $('#plan_filter_visit_to').val('');
                });
            }

            $('#planSchemeFilterFields').on('show.bs.collapse hide.bs.collapse', function (e) {
                var $toggle = $('[data-target="#planSchemeFilterFields"]');
                var $chevron = $toggle.find('.plan-filter-tier__chevron');
                if (e.type === 'show') {
                    $toggle.attr('aria-expanded', 'true');
                    $chevron.removeClass('fa-chevron-right').addClass('fa-chevron-down');
                } else {
                    $toggle.attr('aria-expanded', 'false');
                    $chevron.removeClass('fa-chevron-down').addClass('fa-chevron-right');
                }
            });
        }
    });

    var planDetailsModalUrl = "{{ url('plan') }}";
    var planDetailsModalExtra = @json(plan_index_scheme_filter_modal_params());

    function planDetailsModalHighlightMatchingScheme($body) {
        var $target = $body.find('[data-plan-scheme-filter-highlight="1"]').first();
        if (!$target.length) {
            return;
        }
        var $collapse = $target.find('.collapse').first();
        if ($collapse.length && !$collapse.hasClass('show')) {
            $collapse.addClass('show');
            $target.find('.pms-plan-scheme-card__header').removeClass('collapsed').attr('aria-expanded', 'true');
        }
        var $scroll = $('#planDetailsModal .modal-body');
        window.setTimeout(function () {
            var offset = $target.offset().top - $scroll.offset().top + $scroll.scrollTop() - 16;
            $scroll.animate({ scrollTop: Math.max(0, offset) }, 350, function () {
                $target.addClass('plan-scheme-blink-once');
                window.setTimeout(function () {
                    $target.removeClass('plan-scheme-blink-once');
                }, 1100);
            });
        }, 150);
    }

    function openPlanDetailsModal(planId) {
        if (!planId) return;
        var $modal = $('#planDetailsModal');
        var $body = $('#planDetailsModalBody');
        $body.html('<div class="text-center py-5 text-muted"><div class="spinner-border" role="status"></div><p class="mt-2 mb-0">Loading...</p></div>');
        $modal.modal('show');
        $.get(planDetailsModalUrl + '/' + planId + '/details-modal', planDetailsModalExtra)
            .done(function(html) {
                $body.html(html);
                planDetailsModalHighlightMatchingScheme($body);
            })
            .fail(function() {
                $body.html('<p class="text-muted text-center py-4">Failed to load plan details.</p>');
                if (typeof Swal !== 'undefined') {
                    Swal.fire({ icon: 'error', title: 'Error', text: 'Failed to load plan details.' });
                }
            });
    }

    $(document).on('click', '.plan-plan-details-badge', function(e) {
        e.preventDefault();
        e.stopPropagation();
        openPlanDetailsModal($(this).data('plan-id'));
    });

    $(document).on('keydown', '.plan-plan-details-badge', function(e) {
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            e.stopPropagation();
            openPlanDetailsModal($(this).data('plan-id'));
        }
    });

    var planForwardUrlPrefix = @json(rtrim(url('plan'), '/'));
    var planApproveUrlPrefix = planForwardUrlPrefix;
    var planCheckerForwardStepLabels = @json(collect(\App\Support\PlanningWing::allPlanTypes())->mapWithKeys(
        fn (string $type) => [$type => plan_checker_forward_step_label($type)]
    )->all());

    function planCheckerForwardStepLabel(planType) {
        var normalized = String(planType || '').toUpperCase().trim();
        return planCheckerForwardStepLabels[normalized] || '—';
    }

    function syncForwardConsolidatedModalCopy(planType) {
        var designation = planCheckerForwardStepLabel(planType);
        $('#openForwardConsolidatedModalBtnLabel').text(@json(__('Forward to :designation', ['designation' => '__DESIGNATION__'])).replace('__DESIGNATION__', designation));
        $('#forwardConsolidatedPlanModalLabel').text(@json(__('Forward to :designation', ['designation' => '__DESIGNATION__'])).replace('__DESIGNATION__', designation));
        $('#forwardConsolidatedSubmitBtn').html('<i class="fas fa-share mr-1"></i>' + @json(__('Forward to :designation', ['designation' => '__DESIGNATION__'])).replace('__DESIGNATION__', designation));
        $('#forwardConsolidatedPlanModalHelp').text(@json(__('Send the selected plan to :designation for the next workflow step. Consolidation is optional; you can forward a single plan or a consolidated plan.', ['designation' => '__DESIGNATION__'])).replace('__DESIGNATION__', designation));
    }

    function refreshConsolidateSelectionState() {
        var selected = $('.consolidate-plan-check:checked');
        var ids = [];
        var firstType = null;
        var firstMonth = null;
        var firstYear = null;
        var compatible = true;
        var consolidatedCount = 0;
        var individualCount = 0;

        selected.each(function() {
            var $cb = $(this);
            ids.push($cb.val());
            if (String($cb.attr('data-is-consolidated')) === '1') {
                consolidatedCount++;
            } else {
                individualCount++;
            }
            if (firstType === null) {
                firstType = $cb.data('plan-type');
                firstMonth = String($cb.data('plan-month'));
                firstYear = String($cb.data('plan-year'));
                return;
            }
            if (
                firstType !== $cb.data('plan-type') ||
                firstMonth !== String($cb.data('plan-month')) ||
                firstYear !== String($cb.data('plan-year'))
            ) {
                compatible = false;
            }
        });

        $('#consolidatePlanIds').val(ids.join(','));
        $('#selectedPlanCount').text(ids.length);
        var canMergeInto = ids.length >= 2 && compatible && consolidatedCount === 1 && individualCount >= 1;
        var canCreateFresh = ids.length >= 2 && compatible && consolidatedCount === 0;
        var canConsolidate = canMergeInto || canCreateFresh;
        $('#openConsolidateModalBtn').prop('disabled', !canConsolidate);
        $('#consolidateSubmitBtn').prop('disabled', !canConsolidate);

        // Single RD-review row: forward to SDM (monitoring plans) or DG (ERP / PMP).
        var canActOnOne = ids.length === 1;
        $('#openForwardConsolidatedModalBtn').prop('disabled', !canActOnOne);
        if (canActOnOne) {
            syncForwardConsolidatedModalCopy(selected.first().data('plan-type'));
        } else {
            $('#openForwardConsolidatedModalBtnLabel').text('Forward');
        }
    }

    $('#openForwardConsolidatedModalBtn').on('click', function() {
        var selected = $('.consolidate-plan-check:checked');
        if (selected.length !== 1) {
            return;
        }
        var id = selected.val();
        syncForwardConsolidatedModalCopy(selected.first().data('plan-type'));
        $('#forwardConsolidatedForm').attr('action', planForwardUrlPrefix + '/' + id + '/forward');
    });

    $(document).on('change', '.consolidate-plan-check', function() {
        refreshConsolidateSelectionState();
    });

    $('#consolidateForm').on('submit', function(e) {
        var selected = $('.consolidate-plan-check:checked').map(function() { return $(this).val(); }).get();
        if (selected.length < 2) {
            e.preventDefault();
            if (typeof Swal !== 'undefined') {
                Swal.fire({ icon: 'warning', title: 'Select Plans', text: 'Select at least two plans to consolidate.' });
            }
            return false;
        }
        $('#consolidatePlanIds').val(selected.join(','));
        $('#selectedPlanCount').text(selected.length);
    });
</script>
<script>
(function () {
    var escapeHtml = window.pmsEscapeHtml;

    function statusIcon(status) {
        if (status === 'pass') return '<i class="fas fa-check-circle text-success mr-1"></i>';
        if (status === 'warn') return '<i class="fas fa-exclamation-triangle text-warning mr-1"></i>';
        if (status === 'fail') return '<i class="fas fa-times-circle text-danger mr-1"></i>';
        return '<i class="fas fa-info-circle text-muted mr-1"></i>';
    }

    function alignmentRingClass(pct) {
        if (pct >= 85) return 'plan-ssc-alignment-ring--high';
        if (pct >= 65) return 'plan-ssc-alignment-ring--mid';
        return 'plan-ssc-alignment-ring--low';
    }

    function renderSscResult($body, data) {
        var $content = $body.find('.plan-ssc-check-content');
        var pct = parseFloat(data.alignment_percent || 0);
        var ringClass = alignmentRingClass(pct);
        var html = '';

        html += '<div class="d-flex align-items-start mb-4">';
        html += '<div class="plan-ssc-alignment-ring ' + ringClass + ' mr-3">' + escapeHtml(pct) + '%</div>';
        html += '<div class="flex-grow-1">';
        html += '<p class="mb-1 font-weight-bold">' + escapeHtml(data.summary || '') + '</p>';
        if (data.period_label) {
            html += '<p class="text-muted small mb-0">' + escapeHtml(data.period_label);
            if (data.source_plan_count) {
                html += ' · ' + escapeHtml(data.source_plan_count) + ' {{ __('source plans merged') }}';
            }
            if (data.stats) {
                html += ' · ' + escapeHtml(data.stats.distinct_schemes) + ' {{ __('schemes') }}';
                html += ' · ' + escapeHtml(data.stats.meo_count) + ' {{ __('MEO/SMEOs') }}';
            }
            html += '</p>';
        }
        html += '</div></div>';

        (data.sections || []).forEach(function (section) {
            html += '<div class="mb-3">';
            html += '<div class="plan-ssc-section-title">' + escapeHtml(section.title || '') + '</div>';
            (section.checks || []).forEach(function (check) {
                var st = check.status || 'info';
                html += '<div class="plan-ssc-check-row plan-ssc-check-row--' + escapeHtml(st) + ' small">';
                html += '<div>' + statusIcon(st) + '<strong>' + escapeHtml(check.label || '') + '</strong></div>';
                if (check.detail) {
                    html += '<div class="text-muted ml-4">' + escapeHtml(check.detail) + '</div>';
                }
                if (check.fix && st !== 'pass') {
                    html += '<div class="text-danger ml-4"><em>{{ __('Fix') }}:</em> ' + escapeHtml(check.fix) + '</div>';
                }
                html += '</div>';
            });
            html += '</div>';
        });

        $content.html(html).removeClass('d-none');
    }

    function loadSscCheck($modal) {
        var $body = $modal.find('.plan-ssc-check-body');
        var url = $body.data('ssc-url');
        if (!url) return;

        $body.find('.plan-ssc-check-loading').removeClass('d-none');
        $body.find('.plan-ssc-check-content').addClass('d-none').empty();
        $body.find('.plan-ssc-check-error').addClass('d-none').empty();

        $.getJSON(url)
            .done(function (data) {
                $body.find('.plan-ssc-check-loading').addClass('d-none');
                if (!data.eligible) {
                    $body.find('.plan-ssc-check-error')
                        .removeClass('d-none')
                        .text(data.message || '{{ __('SSC Check is not available for this plan.') }}');
                    return;
                }
                renderSscResult($body, data);
            })
            .fail(function (xhr) {
                $body.find('.plan-ssc-check-loading').addClass('d-none');
                var msg = (xhr.responseJSON && xhr.responseJSON.message)
                    ? xhr.responseJSON.message
                    : '{{ __('Unable to run SSC Check. Please try again.') }}';
                $body.find('.plan-ssc-check-error').removeClass('d-none').text(msg);
            });
    }

    $(document).on('show.bs.modal', '.plan-ssc-check-modal', function () {
        loadSscCheck($(this));
    });

    $(function () {
        var params = new URLSearchParams(window.location.search);
        var openId = params.get('open');
        if (!openId) {
            return;
        }
        openPlanDetailsModal(openId);
        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);
        }
    });
})();
</script>
@endpush