@once
@push('stylesheets')
<style>
    .pci-pc-v-climate-resilience-section .pci-pc-v-climate-resilience-heading {
        color: #1e7e34;
        font-weight: 700;
        font-size: 1rem;
    }
    .pci-pc-v-climate-disaster-review-box {
        background: #fff8e6;
        border: 1px solid #f0c040;
        border-radius: 0.25rem;
        padding: 0.75rem 1rem;
    }
    .pci-pc-v-climate-disaster-review-box .pci-pc-v-climate-disaster-label {
        color: #856404;
        font-weight: 700;
    }
</style>
@endpush
@endonce

@php
    $pciVEdit = canField('pc-forms', 'project_brief_descriptions', 'edit');
    $pciVSrc = $pcForm ?? null;
    $pciVFill = $pciCrudDraftFill ?? [];

    $pciVClimate = old('pc_v_climate_resilience_enhancements');
    if (! is_array($pciVClimate)) {
        $pciVClimate = $pciVSrc?->pc_v_climate_resilience_enhancements ?? ($pciVFill['pc_v_climate_resilience_enhancements'] ?? []);
        if (! is_array($pciVClimate)) {
            $pciVClimate = [];
        }
    }

    $pciVClimateWizardStep = (int) ($pciVClimateWizardStep ?? 5);
    $pciVClimateStepTitle = $pciVClimateStepTitle ?? ($pciVClimateWizardStep . '. Climate Resilience Enhancements & Environmental Co-Benefits');
@endphp

<div class="pci-page pci-pc-v-climate-resilience-section" data-page="{{ $pciVClimateWizardStep }}" data-pci-nav-key="pc-v-climate-resilience-enhancements" data-pci-step-title="{{ $pciVClimateStepTitle }}" data-pci-step-theme="5" data-pci-step-icon="leaf" id="pci-pc-v-climate-resilience-section">
    <div class="pci-gi-wrap">
        <button type="button" class="pci-gi-bar pci-gi-bar-primary" data-toggle="collapse" data-target="#pci-pc-v-climate-resilience-body" aria-expanded="true" id="pci-pc-v-climate-resilience-toggle">
            <span class="pci-gi-bar-title">{{ $pciVClimateWizardStep }}. Climate Resilience Enhancements &amp; Environmental Co-Benefits</span>
            <span class="pci-gi-round-chevron" aria-hidden="true"><i class="fas fa-chevron-down"></i></span>
        </button>
        <div id="pci-pc-v-climate-resilience-body" class="collapse show">
            <div class="pci-gi-mint">
                <div class="pci-gi-divider"></div>

                <p class="pci-pc-v-climate-resilience-heading mb-1">Planned and Actual Enhancement in Climate Resilience Framework</p>
                <p class="text-muted small mb-3">State explicit performance metrics achieved relative to the climate targets planned in PC-I.</p>

                {{-- Subsection a: Adaptation Progress --}}
                <div class="pci-gi-wrap mb-3">
                    <button type="button" class="pci-gi-bar pci-gi-bar-secondary" data-toggle="collapse" data-target="#pci-pc-v-climate-adaptation-body" aria-expanded="true" id="pci-pc-v-climate-adaptation-toggle">
                        <span class="pci-gi-bar-title pci-gi-bar-title-plain">a) Adaptation Progress (System adjustments made against active climate-induced events)</span>
                        <span class="pci-gi-round-chevron" aria-hidden="true"><i class="fas fa-chevron-down"></i></span>
                    </button>
                    <div id="pci-pc-v-climate-adaptation-body" class="collapse show">
                        <div class="pci-gi-mint">
                            <div class="form-group mb-0">
                                <label class="sr-only" for="pci-pc-v-climate-adaptation-progress">Adaptation Progress</label>
                                <textarea
                                    name="pc_v_climate_resilience_enhancements[adaptation_progress]"
                                    id="pci-pc-v-climate-adaptation-progress"
                                    rows="4"
                                    class="form-control form-control-sm {{ !$pciVEdit ? 'pci-readonly' : '' }}"
                                    placeholder="Record parameters regarding extreme flood defenses, infrastructure retrofitting performance..."
                                    {{ !$pciVEdit ? 'readonly' : '' }}>{{ $pciVClimate['adaptation_progress'] ?? '' }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Subsection b: Mitigation & Emission Reductions --}}
                <div class="pci-gi-wrap mb-3">
                    <button type="button" class="pci-gi-bar pci-gi-bar-secondary" data-toggle="collapse" data-target="#pci-pc-v-climate-mitigation-body" aria-expanded="true" id="pci-pc-v-climate-mitigation-toggle">
                        <span class="pci-gi-bar-title pci-gi-bar-title-plain">b) Mitigation &amp; Emission Reductions (Quantifiable carbon footprints, clean energy outputs)</span>
                        <span class="pci-gi-round-chevron" aria-hidden="true"><i class="fas fa-chevron-down"></i></span>
                    </button>
                    <div id="pci-pc-v-climate-mitigation-body" class="collapse show">
                        <div class="pci-gi-mint">
                            <div class="form-group mb-0">
                                <label class="sr-only" for="pci-pc-v-climate-mitigation-emissions">Mitigation &amp; Emission Reductions</label>
                                <textarea
                                    name="pc_v_climate_resilience_enhancements[mitigation_emission_reductions]"
                                    id="pci-pc-v-climate-mitigation-emissions"
                                    rows="4"
                                    class="form-control form-control-sm {{ !$pciVEdit ? 'pci-readonly' : '' }}"
                                    placeholder="Detail active GHG sequestration metrics, fuel conversions or energy efficiency indicators..."
                                    {{ !$pciVEdit ? 'readonly' : '' }}>{{ $pciVClimate['mitigation_emission_reductions'] ?? '' }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Subsection c: Climate Disaster Impact Review --}}
                <div class="pci-gi-wrap mb-0">
                    <button type="button" class="pci-gi-bar pci-gi-bar-secondary" data-toggle="collapse" data-target="#pci-pc-v-climate-disaster-body" aria-expanded="true" id="pci-pc-v-climate-disaster-toggle">
                        <span class="pci-gi-bar-title pci-gi-bar-title-plain">Climate Disaster Impact Review</span>
                        <span class="pci-gi-round-chevron" aria-hidden="true"><i class="fas fa-chevron-down"></i></span>
                    </button>
                    <div id="pci-pc-v-climate-disaster-body" class="collapse show">
                        <div class="pci-gi-mint">
                            <div class="pci-pc-v-climate-disaster-review-box">
                                <p class="pci-pc-v-climate-disaster-label mb-2">
                                    <i class="fas fa-exclamation-triangle mr-1" aria-hidden="true"></i>
                                    Climate Disaster Impact Review:
                                </p>
                                <p class="small mb-2">If any specific localized climate-induced disaster (e.g., catastrophic flooding, record heatwaves, seismic disruptions) affected operational output, detail the loss matrix:</p>
                                <label class="sr-only" for="pci-pc-v-climate-disaster-impact-review">Climate Disaster Impact Review</label>
                                <textarea
                                    name="pc_v_climate_resilience_enhancements[climate_disaster_impact_review]"
                                    id="pci-pc-v-climate-disaster-impact-review"
                                    rows="4"
                                    class="form-control form-control-sm {{ !$pciVEdit ? 'pci-readonly' : '' }}"
                                    placeholder="Indicate structural damage details, asset write-off valuations, and post-disaster remedy steps..."
                                    {{ !$pciVEdit ? 'readonly' : '' }}>{{ $pciVClimate['climate_disaster_impact_review'] ?? '' }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>