<div>
    @if($careSettings->isEmpty())
        <div class="card shadow-sm border-0">
            <div class="card-body text-center p-5 text-muted">
                <i class="mdi mdi-hospital-building" style="font-size: 48px;"></i>
                <p class="mt-3 fw-bold">No care settings found.</p>
                <p class="small">Add care settings in the Application tab first.</p>
            </div>
        </div>
    @else
        @foreach($careSettings as $cs)
            <div class="card shadow-sm border-0 mb-4" wire:key="statement-{{ $cs->id }}">
                <div class="card-header bg-light d-flex justify-content-between align-items-center py-3">
                    <div>
                        <h5 class="fw-bold mb-0">{{ $cs->institution->display_name }}</h5>
                        @if($cs->dates)
                            <small class="text-muted">{{ $cs->dates }}</small>
                        @endif
                    </div>
                    @if($cs->statementHistory->isNotEmpty())
                        <span class="badge bg-secondary">
                            {{ $cs->statementHistory->count() }}
                            {{ Str::plural('version', $cs->statementHistory->count()) }}
                        </span>
                    @endif
                </div>

                <div class="card-body">
                    <label class="form-label fw-bold small text-uppercase text-muted">Personal Statement</label>
                    <textarea
                        class="form-control"
                        wire:model="statements.{{ $cs->id }}"
                        placeholder="Enter the personal statement for {{ $cs->institution->display_name }}..."
                        style="min-height: 220px; resize: vertical;"
                    ></textarea>
                </div>

                <div class="card-footer d-flex justify-content-between align-items-center bg-white">
                    <button
                        class="btn btn-success px-4"
                        wire:click="saveStatement({{ $cs->id }})"
                        wire:loading.attr="disabled"
                        wire:target="saveStatement({{ $cs->id }})"
                    >
                        <span wire:loading.remove wire:target="saveStatement({{ $cs->id }})">
                            <i class="mdi mdi-content-save me-1"></i> Save Statement
                        </span>
                        <span wire:loading wire:target="saveStatement({{ $cs->id }})">
                            <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
                            Saving...
                        </span>
                    </button>
                </div>

                @if($cs->statementHistory->isNotEmpty())
                    <div class="card-footer bg-light border-top">
                        <a class="d-flex justify-content-between align-items-center text-decoration-none text-dark"
                           data-bs-toggle="collapse"
                           href="#history-{{ $cs->id }}"
                           role="button"
                           aria-expanded="false">
                            <span class="fw-bold small text-uppercase text-muted">
                                <i class="mdi mdi-history me-1"></i> Version History
                            </span>
                            <i class="mdi mdi-chevron-down text-muted"></i>
                        </a>

                        <div class="collapse" id="history-{{ $cs->id }}">
                            <ul class="activity-feed mb-0 ps-2 mt-3">
                                @foreach($cs->statementHistory as $version)
                                    <li class="feed-item pb-3">
                                        <div class="feed-item-list">
                                            <div class="d-flex justify-content-between align-items-start mb-1">
                                                <div>
                                                    @if($version->user)
                                                        <strong class="small">{{ $version->user->name_first }} {{ $version->user->name_last }}</strong>
                                                    @else
                                                        <strong class="small text-muted">Unknown user</strong>
                                                    @endif
                                                    <span class="text-muted small ms-1">saved a version</span>
                                                </div>
                                                <small class="text-muted text-nowrap ms-2" title="{{ $version->created_at->format('d/m/Y H:i') }}">
                                                    {{ $version->created_at->diffForHumans() }}
                                                </small>
                                            </div>
                                            @if($version->statement)
                                                <div class="border rounded bg-white p-2 mt-1"
                                                     style="max-height: 120px; overflow-y: auto; font-size: 0.8rem; white-space: pre-wrap; color: #555;">{{ $version->statement }}</div>
                                            @else
                                                <em class="text-muted small">Empty statement</em>
                                            @endif
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                @endif
            </div>
        @endforeach
    @endif
</div>
