@extends('layouts.app')

@php
    use App\Services\ChangeControlService;
    use App\Support\RoleNames;

    $fmtDate = function ($value, string $format = 'M j, Y H:i') {
        if (empty($value)) return '—';
        try { return \Illuminate\Support\Carbon::parse($value)->format($format); }
        catch (\Throwable $e) { return (string) $value; }
    };

    $pendingInstance = $change->latestApprovalInstance();
    $hasPending      = $pendingInstance && in_array($pendingInstance->status, ['PENDING', 'IN_PROGRESS']);
@endphp

@section('title', $change->change_number . ' — ' . $change->title)

@section('content')
<div class="container-fluid">

    {{-- Flash --}}
    @foreach(['success' => 'check-circle', 'warning' => 'exclamation-triangle', 'error' => 'exclamation-circle'] as $key => $icon)
        @if(session($key))
            <div class="alert alert-{{ $key }} alert-dismissible fade show">
                <i class="fas fa-{{ $icon }} mr-1"></i> {{ session($key) }}
                @if($key === 'error' && session('missing'))
                    <hr class="my-2">
                    <strong>Missing prerequisites:</strong>
                    <ul class="mb-0">
                        @foreach(session('missing') as $m) <li>{{ $m }}</li> @endforeach
                    </ul>
                @endif
                <button type="button" class="close" data-dismiss="alert">&times;</button>
            </div>
        @endif
    @endforeach

    {{-- Pending approval banner --}}
    @if($hasPending)
        <div class="alert alert-info shadow-sm">
            <div class="d-flex justify-content-between align-items-center flex-wrap">
                <div>
                    <i class="fas fa-hourglass-half mr-2"></i>
                    <strong>Awaiting Approval</strong> —
                    Workflow <code>#{{ $pendingInstance->instance_id }}</code>
                    is pending at <strong>step {{ $pendingInstance->current_step }}</strong>.
                </div>
                <a href="{{ route('workflows.approvals.show', $pendingInstance->instance_id) }}"
                   class="btn btn-sm btn-primary">
                    <i class="fas fa-external-link-alt mr-1"></i> View Workflow
                </a>
            </div>
        </div>
    @endif

    {{-- Header --}}
    <div class="card shadow mb-3">
        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
            <div>
                <h3 class="mb-0">
                    <span class="badge bg-light text-dark mr-2">
                        <i class="fas {{ $change->change_type->icon() }} mr-1"></i>
                        {{ $change->change_type->label() }}
                    </span>
                    {{ $change->change_number }}
                </h3>
                <small>{{ $change->title }}</small>
            </div>
            <div class="no-print">
                <a href="{{ route('change-control.edit', $change) }}" class="btn btn-light btn-sm">
                    <i class="fas fa-edit"></i> Edit
                </a>
                <a href="{{ route('change-control.index') }}" class="btn btn-outline-light btn-sm">
                    <i class="fas fa-arrow-left"></i> Back
                </a>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-3">
                    <strong>Status:</strong>
                    <span class="badge badge-{{ $change->current_status->badge() }}">
                        {{ $change->current_status->label() }}
                    </span>
                </div>
                <div class="col-md-3">
                    <strong>Phase:</strong>
                    <span class="badge badge-{{ $change->current_phase->badge() }}">
                        {{ $change->current_phase->label() }}
                    </span>
                </div>
                <div class="col-md-3">
                    <strong>Category:</strong>
                    <span class="badge badge-{{ $change->change_category->badge() }}">
                        {{ $change->change_category->label() }}
                    </span>
                </div>
                <div class="col-md-3">
                    <strong>Priority:</strong>
                    <span class="badge badge-{{
                        match($change->priority) {
                            'CRITICAL' => 'danger', 'HIGH' => 'warning',
                            'MEDIUM' => 'info', default => 'success',
                        }
                    }}">{{ $change->priority }}</span>
                </div>
            </div>
            <div class="row mt-2">
                <div class="col-md-3"><strong>Owner:</strong> {{ $change->owner?->name ?? '—' }}</div>
                <div class="col-md-3"><strong>Department:</strong> {{ $change->department?->department_name ?? '—' }}</div>
                <div class="col-md-3"><strong>Initiated:</strong> {{ $fmtDate($change->initiated_date, 'M j, Y') }}</div>
                <div class="col-md-3">
                    <strong>Target:</strong> {{ $fmtDate($change->target_implementation_date, 'M j, Y') }}
                    @if($change->isOverdue()) <span class="badge badge-danger">Overdue</span> @endif
                </div>
            </div>
        </div>
    </div>
@include('record-links._tab', ['record' => $change])
    {{-- Status Transitions --}}
    @if(!empty($allowedStatuses))
        <div class="card shadow mb-3">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="fas fa-exchange-alt mr-1"></i> Status Transitions
                </h6>
            </div>
            <div class="card-body">
                @if($change->change_category->requiresQualifiedPerson())
                    <div class="alert alert-danger small mb-3">
                        <i class="fas fa-exclamation-triangle mr-1"></i>
                        This is a <strong>CRITICAL</strong> change — Qualified Person approval is required.
                    </div>
                @endif

                @if($hasPending)
                    <div class="alert alert-secondary small mb-3">
                        <i class="fas fa-lock mr-1"></i> You cannot transition while an approval is pending.
                    </div>
                @endif

                @foreach($allowedStatuses as $status)
                    @php
                        $needsApproval = ChangeControlService::requiresApproval($change->current_status->value, $status);
                        $docType       = ChangeControlService::workflowTypeFor($change->current_status->value, $status);

                        // Compute the approver list based on which workflow will actually run
                        $approvers = [];

                        if ($docType === 'APPROVAL' && $needsApproval) {
                            if ($change->change_category->value === 'CRITICAL') {
                                $approvers = [
                                    RoleNames::QA_MANAGER,
                                    RoleNames::DEPARTMENT_HEAD,
                                    RoleNames::QUALIFIED_PERSON,
                                ];
                            } else {
                                $approvers = [
                                    RoleNames::QA_MANAGER,
                                    RoleNames::DEPARTMENT_HEAD,
                                ];
                            }
                        } elseif ($docType && $needsApproval) {
                            $approvers = ChangeControlService::approverRolesFor($docType);
                        }

                        $approverLabel = empty($approvers)
                            ? '—'
                            : implode(' + ', array_map(function ($role) {
                                return match($role) {
                                    'qa_manager'       => 'QA Manager',
                                    'department_head'  => 'Department Head',
                                    'qualified_person' => 'Qualified Person',
                                    default            => ucwords(str_replace('_', ' ', $role)),
                                };
                            }, $approvers));
                    @endphp

                    <button class="btn btn-sm btn-outline-primary mr-1 mb-1"
                            data-toggle="modal" data-target="#transitionModal"
                            onclick="setTransitionStatus('{{ $status }}', {{ $needsApproval ? 'true' : 'false' }}, '{{ $approverLabel }}')"
                            @if($hasPending) disabled @endif>
                        <i class="fas fa-arrow-right mr-1"></i>
                        {{ str_replace('_', ' ', $status) }}
                        @if($needsApproval)
                            <span class="badge badge-warning ml-1"
                                  title="Approvers: {{ $approverLabel }}">
                                <i class="fas fa-user-check"></i> Approval
                            </span>
                        @else
                            <span class="badge badge-success ml-1">
                                <i class="fas fa-bolt"></i> Direct
                            </span>
                        @endif
                    </button>
                @endforeach
            </div>
        </div>
    @endif

    {{-- Tabs --}}
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tab-overview">Overview</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-impact">Impact</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-plan">Implementation</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-effectiveness">Effectiveness</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-links">Links</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-audit">Audit</a></li>
    </ul>

    <div class="tab-content mt-3">

        {{-- Overview --}}
        <div class="tab-pane fade show active" id="tab-overview">
            <div class="card shadow mb-3">
                <div class="card-body">
                    <h5>Description</h5>
                    <p>{!! nl2br(e($change->description)) !!}</p>

                    <h5 class="mt-4">Justification</h5>
                    <p>{!! nl2br(e($change->justification)) !!}</p>

                    @if($change->expected_benefits)
                        <h5 class="mt-4">Expected Benefits</h5>
                        <p>{!! nl2br(e($change->expected_benefits)) !!}</p>
                    @endif

                    @if($change->risks_if_not_implemented)
                        <h5 class="mt-4">Risks if Not Implemented</h5>
                        <p>{!! nl2br(e($change->risks_if_not_implemented)) !!}</p>
                    @endif
                </div>
            </div>
        </div>

        {{-- Impact --}}
        <div class="tab-pane fade" id="tab-impact">
            <div class="card shadow">
                <div class="card-header py-3 d-flex justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-exclamation-triangle mr-1"></i> Impact Assessment
                    </h6>
                    <button class="btn btn-sm btn-primary"
                            data-toggle="modal" data-target="#impactModal">
                        <i class="fas fa-{{ $change->impactAssessment ? 'edit' : 'plus' }} mr-1"></i>
                        {{ $change->impactAssessment ? 'Edit' : 'Add' }} Assessment
                    </button>
                </div>
                <div class="card-body">
                    @if($change->impactAssessment)
                        @php $ia = $change->impactAssessment; @endphp
                        <div class="row mb-3">
                            <div class="col-md-3">
                                <div class="p-3 bg-light rounded">
                                    <small>Risk Level</small>
                                    <div class="h5 mb-0">
                                        <span class="badge badge-{{
                                            match($ia->risk_level) {
                                                'CRITICAL' => 'danger', 'HIGH' => 'warning',
                                                'MEDIUM' => 'info', default => 'success',
                                            }
                                        }}">{{ $ia->risk_level }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="p-3 bg-light rounded">
                                    <small>RPN</small>
                                    <div class="h5 mb-0">{{ $ia->rpn ?? '—' }}</div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="p-3 bg-light rounded">
                                    <small>Assessed By</small>
                                    <div class="h5 mb-0">{{ $ia->assessor?->name ?? '—' }}</div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="p-3 bg-light rounded">
                                    <small>Approval Status</small>
                                    <div class="h5 mb-0">
                                        <span class="badge badge-{{
                                            match($ia->approval_status) {
                                                'APPROVED' => 'success',
                                                'REJECTED' => 'danger',
                                                default    => 'warning',
                                            }
                                        }}">{{ $ia->approval_status }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <h6>Summary</h6>
                        <p>{!! nl2br(e($ia->summary)) !!}</p>

                        <h6 class="mt-3">Impact Data</h6>
                        <table class="table table-sm table-bordered">
                            @foreach(($ia->impact_data ?? []) as $key => $value)
                                <tr>
                                    <th width="250">{{ Str::headline($key) }}</th>
                                    <td>
                                        @if(is_bool($value)) {{ $value ? 'Yes' : 'No' }}
                                        @elseif(is_array($value)) {{ implode(', ', $value) }}
                                        @else {{ $value ?: '—' }}
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </table>

                        @if($ia->mitigation_plan)
                            <h6 class="mt-3">Mitigation Plan</h6>
                            <p>{!! nl2br(e($ia->mitigation_plan)) !!}</p>
                        @endif
                    @else
                        <div class="alert alert-warning mb-0">
                            No impact assessment recorded. This is required before the change can be approved.
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Implementation Plan --}}
        <div class="tab-pane fade" id="tab-plan">
            <div class="card shadow">
                <div class="card-header py-3 d-flex justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-list-check mr-1"></i> Implementation Plan
                    </h6>
                    <button class="btn btn-sm btn-primary"
                            data-toggle="modal" data-target="#planModal">
                        <i class="fas fa-plus mr-1"></i> Add Step
                    </button>
                </div>
                <div class="card-body">
                    @if($change->implementationPlan->isEmpty())
                        <div class="alert alert-info mb-0">
                            No implementation steps defined. Add at least one before requesting implementation approval.
                        </div>
                    @else
                        <div class="table-responsive">
                            <table class="table table-sm table-hover mb-0">
                                <thead class="thead-light">
                                    <tr>
                                        <th width="60">#</th>
                                        <th>Step</th>
                                        <th>Responsible</th>
                                        <th>Due</th>
                                        <th>Completed</th>
                                        <th>Status</th>
                                        <th class="no-print" width="240">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($change->implementationPlan as $step)
                                        <tr>
                                            <td>{{ $step->step_order }}</td>
                                            <td>
                                                <strong>{{ $step->step_title }}</strong>
                                                @if($step->step_description)
                                                    <br><small class="text-muted">{{ Str::limit($step->step_description, 120) }}</small>
                                                @endif
                                            </td>
                                            <td>{{ $step->responsible?->name ?? '—' }}</td>
                                            <td>{{ $fmtDate($step->due_date, 'M j, Y') }}</td>
                                            <td>{{ $fmtDate($step->completed_date, 'M j, Y') }}</td>
                                            <td>
                                                <span class="badge badge-{{
                                                    match($step->status) {
                                                        'COMPLETED', 'VERIFIED' => 'success',
                                                        'IN_PROGRESS' => 'primary',
                                                        'CANCELLED'   => 'dark',
                                                        default       => 'secondary',
                                                    }
                                                }}">{{ $step->status }}</span>
                                            </td>
                                            <td class="no-print" style="white-space: nowrap;">
                                                {{-- Quick status dropdown --}}
                                                <form method="POST"
                                                      action="{{ route('change-control.plan.update', $step) }}"
                                                      class="d-inline-block mr-1">
                                                    @csrf @method('PUT')
                                                    <select name="status"
                                                            class="form-control form-control-sm d-inline-block"
                                                            style="width: 130px;"
                                                            onchange="this.form.submit()">
                                                        @foreach(['PENDING', 'IN_PROGRESS', 'COMPLETED', 'VERIFIED', 'CANCELLED'] as $s)
                                                            <option value="{{ $s }}" @selected($step->status === $s)>
                                                                {{ str_replace('_', ' ', $s) }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </form>

                                                {{-- Full edit button --}}
                                                <button type="button"
                                                        class="btn btn-sm btn-outline-primary"
                                                        data-toggle="modal"
                                                        data-target="#editPlanModal{{ $step->plan_id }}"
                                                        title="Edit Step">
                                                    <i class="fas fa-edit"></i>
                                                </button>

                                                {{-- Delete button --}}
                                                <form method="POST"
                                                      action="{{ route('change-control.plan.destroy', $step) }}"
                                                      class="d-inline"
                                                      onsubmit="return confirm('Remove this step?')">
                                                    @csrf @method('DELETE')
                                                    <button class="btn btn-sm btn-outline-danger" title="Delete Step">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </form>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Effectiveness --}}
        <div class="tab-pane fade" id="tab-effectiveness">
            <div class="card shadow">
                <div class="card-header py-3 d-flex justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-check-double mr-1"></i> Effectiveness Checks
                    </h6>
                    <button class="btn btn-sm btn-primary"
                            data-toggle="modal" data-target="#effectivenessModal">
                        <i class="fas fa-plus mr-1"></i> Add Check
                    </button>
                </div>
                <div class="card-body">
                    @forelse($change->effectivenessChecks as $check)
                        <div class="border-bottom py-2">
                            <span class="badge badge-{{
                                match($check->conclusion) {
                                    'EFFECTIVE'            => 'success',
                                    'PARTIALLY_EFFECTIVE'  => 'warning',
                                    'NOT_EFFECTIVE'        => 'danger',
                                    default                => 'secondary',
                                }
                            }}">{{ $check->conclusion }}</span>
                            <strong class="ml-2">Methodology:</strong> {{ Str::limit($check->methodology, 120) }}
                            @if($check->results)
                                <p class="mb-0 small">{!! nl2br(e($check->results)) !!}</p>
                            @endif
                        </div>
                    @empty
                        <div class="alert alert-warning mb-0">
                            No effectiveness check recorded. Required before the change can be closed.
                        </div>
                    @endforelse
                </div>
            </div>
        </div>

        {{-- Links --}}
        <div class="tab-pane fade" id="tab-links">
            <div class="card shadow">
                <div class="card-header py-3 d-flex justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-link mr-1"></i> Linked Records
                    </h6>
                    <button class="btn btn-sm btn-primary"
                            data-toggle="modal" data-target="#linkModal">
                        <i class="fas fa-plus mr-1"></i> Add Link
                    </button>
                </div>
                <div class="card-body">
                    @if($change->links->isEmpty())
                        <div class="alert alert-info mb-0">
                            No linked records. Link this change to affected documents, equipment, or products.
                        </div>
                    @else
                        <table class="table table-sm table-bordered mb-0">
                            <thead class="thead-light">
                                <tr>
                                    <th>Type</th>
                                    <th>ID</th>
                                    <th>Relationship</th>
                                    <th>Impact Notes</th>
                                    <th class="no-print" width="80">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($change->links as $link)
                                    <tr>
                                        <td><span class="badge badge-secondary">{{ $link->linked_type }}</span></td>
                                        <td>#{{ $link->linked_id }}</td>
                                        <td>{{ $link->relationship }}</td>
                                        <td>{{ Str::limit($link->impact_notes, 120) }}</td>
                                        <td class="no-print">
                                            <form method="POST"
                                                  action="{{ route('change-control.links.destroy', $link) }}"
                                                  class="d-inline"
                                                  onsubmit="return confirm('Remove this link?')">
                                                @csrf @method('DELETE')
                                                <button class="btn btn-sm btn-outline-danger">
                                                    <i class="fas fa-unlink"></i>
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    @endif
                </div>
            </div>
        </div>

        {{-- Audit --}}
        <div class="tab-pane fade" id="tab-audit">
            <div class="card shadow">
                <div class="card-body">
                    <table class="table table-sm">
                        <thead class="thead-light">
                            <tr>
                                <th>Date</th>
                                <th>User</th>
                                <th>Action</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($change->auditTrails as $t)
                                <tr>
                                    <td>{{ $fmtDate($t->changed_at) }}</td>
                                    <td>{{ $t->user?->name ?? 'System' }}</td>
                                    <td><code>{{ $t->action_type }}</code></td>
                                    <td>{{ $t->action_description }}</td>
                                </tr>
                            @empty
                                <tr><td colspan="4" class="text-center text-muted py-3">No audit entries.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ═══════════════════════════════════════════════════════════
     MODALS
═══════════════════════════════════════════════════════════ --}}

{{-- Transition --}}
<div class="modal fade" id="transitionModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ route('change-control.transition', $change) }}">
                @csrf
                <input type="hidden" name="new_status" id="transition_status_input">
                <div class="modal-header">
                    <h5 class="modal-title">Change Status</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <p>Transition to: <strong id="transition_status_label">—</strong></p>

                    <div id="transition_approval_notice" class="alert alert-info" style="display: none;">
                        <i class="fas fa-user-check mr-1"></i>
                        <strong>Approval required.</strong>
                        Approver(s): <span id="transition_approvers_label">—</span>.
                    </div>

                    <div class="form-group">
                        <label>Reason / Notes</label>
                        <textarea name="reason" rows="3" class="form-control"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Confirm</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Impact Assessment --}}
<div class="modal fade" id="impactModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form method="POST" action="{{ route('change-control.impact.store', $change) }}">
                @csrf
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title">Impact Assessment — {{ $change->change_type->label() }}</h5>
                    <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    @foreach($change->impactFields() as $field)
                        @php
                            $key   = $field['key'];
                            $label = $field['label'];
                            $type  = $field['type'] ?? 'text';
                            $req   = $field['required'] ?? false;
                            $opts  = $field['options'] ?? [];
                            $val   = $change->impactAssessment?->impact_data[$key] ?? null;
                        @endphp
                        <div class="form-group">
                            <label class="font-weight-bold">{{ $label }} @if($req)<span class="text-danger">*</span>@endif</label>
                            @if($type === 'textarea')
                                <textarea name="impact_data[{{ $key }}]" rows="3" class="form-control" @if($req) required @endif>{{ $val }}</textarea>
                            @elseif($type === 'boolean')
                                <select name="impact_data[{{ $key }}]" class="form-control" @if($req) required @endif>
                                    <option value="">— Select —</option>
                                    <option value="1" @selected($val === true)>Yes</option>
                                    <option value="0" @selected($val === false)>No</option>
                                </select>
                            @elseif($type === 'select')
                                <select name="impact_data[{{ $key }}]" class="form-control" @if($req) required @endif>
                                    <option value="">— Select —</option>
                                    @foreach($opts as $opt)
                                        <option value="{{ $opt }}" @selected($val === $opt)>{{ $opt }}</option>
                                    @endforeach
                                </select>
                            @else
                                <input type="text" name="impact_data[{{ $key }}]" class="form-control" value="{{ $val }}" @if($req) required @endif>
                            @endif
                        </div>
                    @endforeach

                    <hr>
                    <h6>Scoring & Summary</h6>

                    <div class="row">
                        <div class="col-md-3">
                            <label>Severity (1–10)</label>
                            <input type="number" name="severity" min="1" max="10" class="form-control"
                                   value="{{ old('severity', $change->impactAssessment?->severity ?? 5) }}">
                        </div>
                        <div class="col-md-3">
                            <label>Occurrence (1–10)</label>
                            <input type="number" name="occurrence" min="1" max="10" class="form-control"
                                   value="{{ old('occurrence', $change->impactAssessment?->occurrence ?? 5) }}">
                        </div>
                        <div class="col-md-3">
                            <label>Detection (1–10)</label>
                            <input type="number" name="detection" min="1" max="10" class="form-control"
                                   value="{{ old('detection', $change->impactAssessment?->detection ?? 5) }}">
                        </div>
                        <div class="col-md-3">
                            <label>Risk Level *</label>
                            <select name="risk_level" class="form-control" required>
                                @foreach(['LOW', 'MEDIUM', 'HIGH', 'CRITICAL'] as $r)
                                    <option value="{{ $r }}" @selected(old('risk_level', $change->impactAssessment?->risk_level ?? 'LOW') === $r)>{{ $r }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="form-group mt-3">
                        <label class="font-weight-bold">Summary * (min 20 chars)</label>
                        <textarea name="summary" rows="3" class="form-control" required minlength="20">{{ old('summary', $change->impactAssessment?->summary) }}</textarea>
                    </div>

                    <div class="form-group">
                        <label class="font-weight-bold">Mitigation Plan</label>
                        <textarea name="mitigation_plan" rows="2" class="form-control">{{ old('mitigation_plan', $change->impactAssessment?->mitigation_plan) }}</textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Assessment</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Add Plan Step --}}
<div class="modal fade" id="planModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ route('change-control.plan.store', $change) }}">
                @csrf
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title">Add Implementation Step</h5>
                    <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>Step Title *</label>
                        <input type="text" name="step_title" class="form-control" required maxlength="255">
                    </div>
                    <div class="form-group">
                        <label>Description</label>
                        <textarea name="step_description" rows="3" class="form-control"></textarea>
                    </div>
                    <div class="form-group">
                        <label>Responsible *</label>
                        <select name="responsible_user_id" class="form-control" required>
                            @foreach($users as $u)
                                <option value="{{ $u->id }}">{{ $u->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Due Date *</label>
                        <input type="date" name="due_date" class="form-control" required
                               value="{{ now()->addDays(7)->toDateString() }}">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Add Step</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- ═══════════════════════════════════════════════════════════
     EDIT IMPLEMENTATION STEP MODALS (one per row)
═══════════════════════════════════════════════════════════ --}}
@foreach($change->implementationPlan as $step)
    <div class="modal fade"
         id="editPlanModal{{ $step->plan_id }}"
         tabindex="-1" role="dialog"
         aria-labelledby="editPlanModalLabel{{ $step->plan_id }}"
         aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <form method="POST" action="{{ route('change-control.plan.update', $step) }}">
                    @csrf @method('PUT')

                    <div class="modal-header bg-primary text-white">
                        <h5 class="modal-title" id="editPlanModalLabel{{ $step->plan_id }}">
                            <i class="fas fa-edit mr-1"></i> Edit Step #{{ $step->step_order }}
                        </h5>
                        <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
                    </div>

                    <div class="modal-body">

                        <div class="form-group">
                            <label class="font-weight-bold">
                                Step Title <span class="text-danger">*</span>
                            </label>
                            <input type="text"
                                   name="step_title"
                                   class="form-control"
                                   required
                                   maxlength="255"
                                   value="{{ $step->step_title }}">
                        </div>

                        <div class="form-group">
                            <label class="font-weight-bold">Description</label>
                            <textarea name="step_description"
                                      rows="3"
                                      class="form-control">{{ $step->step_description }}</textarea>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="font-weight-bold">
                                        Responsible <span class="text-danger">*</span>
                                    </label>
                                    <select name="responsible_user_id" class="form-control" required>
                                        @foreach($users as $u)
                                            <option value="{{ $u->id }}"
                                                    @selected($step->responsible_user_id == $u->id)>
                                                {{ $u->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="font-weight-bold">
                                        Due Date <span class="text-danger">*</span>
                                    </label>
                                    <input type="date"
                                           name="due_date"
                                           class="form-control"
                                           required
                                           value="{{ $step->due_date?->format('Y-m-d') }}">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="font-weight-bold">Status</label>
                                    <select name="status"
                                            class="form-control"
                                            id="planStatus{{ $step->plan_id }}">
                                        @foreach(['PENDING', 'IN_PROGRESS', 'COMPLETED', 'VERIFIED', 'CANCELLED'] as $s)
                                            <option value="{{ $s }}" @selected($step->status === $s)>
                                                {{ str_replace('_', ' ', $s) }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="font-weight-bold">Completion Date</label>
                                    <input type="date"
                                           name="completed_date"
                                           class="form-control"
                                           id="planCompleted{{ $step->plan_id }}"
                                           value="{{ $step->completed_date?->format('Y-m-d') }}">
                                    <small class="text-muted">
                                        Auto-filled when status becomes COMPLETED.
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">
                            Cancel
                        </button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save mr-1"></i> Save Changes
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endforeach

{{-- Effectiveness --}}
<div class="modal fade" id="effectivenessModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ route('change-control.effectiveness.store', $change) }}">
                @csrf
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title">Record Effectiveness Check</h5>
                    <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>Methodology * (min 20 chars)</label>
                        <textarea name="methodology" rows="2" class="form-control" required minlength="20"></textarea>
                    </div>
                    <div class="form-group">
                        <label>Success Criteria * (min 20 chars)</label>
                        <textarea name="success_criteria" rows="2" class="form-control" required minlength="20"></textarea>
                    </div>
                    <div class="form-group">
                        <label>Monitoring Period</label>
                        <input type="text" name="monitoring_period" class="form-control" placeholder="e.g. 30 days">
                    </div>
                    <div class="form-group">
                        <label>Check Date</label>
                        <input type="date" name="check_date" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>Results</label>
                        <textarea name="results" rows="2" class="form-control"></textarea>
                    </div>
                    <div class="form-group">
                        <label>Conclusion *</label>
                        <select name="conclusion" class="form-control" required>
                            <option value="PENDING">Pending</option>
                            <option value="EFFECTIVE">Effective</option>
                            <option value="PARTIALLY_EFFECTIVE">Partially Effective</option>
                            <option value="NOT_EFFECTIVE">Not Effective</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Link --}}
<div class="modal fade" id="linkModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ route('change-control.links.store', $change) }}">
                @csrf
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title">Link Record</h5>
                    <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>Type *</label>
                        <select name="linked_type" class="form-control" required>
                            @foreach($change->change_type->allowedLinkTypes() as $type)
                                <option value="{{ $type }}">{{ $type }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>ID *</label>
                        <input type="number" name="linked_id" class="form-control" required min="1">
                    </div>
                    <div class="form-group">
                        <label>Relationship *</label>
                        <select name="relationship" class="form-control" required>
                            <option value="AFFECTED">Affected</option>
                            <option value="CREATED_BY">Created By</option>
                            <option value="MODIFIED_BY">Modified By</option>
                            <option value="RETIRED_BY">Retired By</option>
                            <option value="RELATED_TO">Related To</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Impact Notes</label>
                        <textarea name="impact_notes" rows="2" class="form-control"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Add Link</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    function setTransitionStatus(status, needsApproval, approvers) {
        document.getElementById('transition_status_input').value = status;
        document.getElementById('transition_status_label').textContent = status.replace(/_/g, ' ');

        const notice = document.getElementById('transition_approval_notice');
        const label  = document.getElementById('transition_approvers_label');

        if (needsApproval) {
            notice.style.display = '';
            label.textContent = approvers;
        } else {
            notice.style.display = 'none';
        }
    }

    // Auto-fill completed_date when status becomes COMPLETED
    document.querySelectorAll('select[id^="planStatus"]').forEach(function (select) {
        select.addEventListener('change', function () {
            const id        = this.id.replace('planStatus', '');
            const completed = document.getElementById('planCompleted' + id);
            if (!completed) return;

            if (this.value === 'COMPLETED' && !completed.value) {
                completed.value = new Date().toISOString().slice(0, 10);
            }
        });
    });
</script>
@endpush