{{-- Simplified Information Card --}}
<div class="card shadow-sm mb-4">
    <div class="card-header bg-white">
        <div class="d-flex justify-content-between align-items-center">
            <h5 class="mb-0">
                <i class="bi bi-file-earmark-text text-kopassus"></i> Informasi Surat
            </h5>
            <div class="d-flex gap-2 align-items-center">
                {{-- Kilat Badge --}}
                @if($suratMasuk->is_kilat)
                    <span class="badge bg-danger px-3 py-2">
                        <i class="bi bi-lightning-charge-fill"></i> KILAT
                    </span>
                @endif
                @if($suratMasuk->is_tembusan)
                    <span class="badge bg-info px-3 py-2">
                        <i class="bi bi-cc-circle"></i> TEMBUSAN
                    </span>
                @endif
            </div>
        </div>
    </div>

    <div class="card-body">
        @php
            // If surat masuk came from surat keluar, use the surat keluar's current data
            // This ensures the latest nomor_surat and perihal are always shown after numbering
            $skSource = $suratMasuk->is_from_surat_keluar && $suratMasuk->relationLoaded('sourceSuratKeluar') && $suratMasuk->sourceSuratKeluar
                ? $suratMasuk->sourceSuratKeluar : null;
            $displayNomorSurat = $skSource && $skSource->nomor_surat ? $skSource->nomor_surat : $suratMasuk->nomor_surat;
            $displayPerihal = $skSource && $skSource->perihal ? $skSource->perihal : $suratMasuk->perihal;
        @endphp
        <div class="row g-4">
            {{-- Left Column --}}
            <div class="col-md-6">
                {{-- Nomor Surat --}}
                <div class="mb-4">
                    <label class="text-muted small mb-1">Nomor Surat</label>
                    <h5 class="text-kopassus mb-0 fw-bold">{{ $displayNomorSurat }}</h5>
                </div>

                {{-- Perihal --}}
                <div class="mb-4">
                    <label class="text-muted small mb-1">Perihal</label>
                    <p class="mb-0">{{ $displayPerihal }}</p>
                </div>

                {{-- Asal Surat --}}
                <div class="mb-0">
                    <label class="text-muted small mb-1">Asal Surat</label>
                    <h6 class="mb-0">{{ $suratMasuk->asal_surat_short ?? $suratMasuk->asal_surat }}</h6>
                </div>
            </div>

            {{-- Right Column --}}
            <div class="col-md-6">
                {{-- Nomor Agenda --}}
                <div class="mb-4">
                    <label class="text-muted small mb-1">Nomor Agenda</label>
                    <h5 class="mb-0">
                        <span class="badge badge-gold fs-6">{{ $suratMasuk->nomor_agenda_internal ?? $suratMasuk->nomor_agenda }}</span>
                    </h5>
                </div>

                {{-- Tanggal --}}
                <div class="mb-4">
                    <label class="text-muted small mb-1">Tanggal Surat</label>
                    <p class="mb-1">
                        <i class="bi bi-calendar3 text-kopassus"></i>
                        {{ $suratMasuk->tanggal_surat->format('d F Y') }}
                    </p>
                    <small class="text-muted">
                        Dibuat: {{ $suratMasuk->created_at->format('d F Y, H:i') }} WIB
                    </small>
                </div>

                {{-- Ditujukan Kepada - hanya tampil jika sudah ada disposisi --}}
                @if(!$suratMasuk->isMenungguAgenda())
                <div class="mb-4">
                    <label class="text-muted small mb-1">Ditujukan Kepada</label>
                    @php
                        $ditujukanKepada = $suratMasuk->tujuanAkhir;
                        if ($ditujukanKepada && ($ditujukanKepada->isTU() || $ditujukanKepada->isKASMIN())) {
                            $ditujukanKepada = $ditujukanKepada->superior ?? $ditujukanKepada;
                        }
                    @endphp
                    @if($ditujukanKepada)
                        <div class="d-flex align-items-center gap-2">
                            <div class="avatar-circle bg-kopassus text-white">
                                {{ strtoupper(substr($ditujukanKepada->jabatan_short ?? $ditujukanKepada->name, 0, 2)) }}
                            </div>
                            <div>
                                <div class="fw-semibold">{{ $ditujukanKepada->jabatan_with_satuan }}</div>
                            </div>
                        </div>
                    @else
                        <span class="text-muted">-</span>
                    @endif
                </div>
                @endif

                {{-- Total Disposisi --}}
                @php
                    $totalDisposisiCount = $suratMasuk->disposisi->count();
                    if ($suratMasuk->relationLoaded('childSurat') && $suratMasuk->childSurat) {
                        $totalDisposisiCount += $suratMasuk->childSurat->sum(fn($child) => $child->relationLoaded('disposisi') ? $child->disposisi->count() : 0);
                    }
                @endphp
                <div class="mb-4">
                    <label class="text-muted small mb-1">Total Disposisi</label>
                    <a href="#perjalanan-surat" class="text-decoration-none d-block" onclick="document.getElementById('perjalanan-surat')?.scrollIntoView({behavior: 'smooth'}); return false;">
                        <h5 class="text-kopassus mb-0" style="cursor: pointer;">
                            <i class="bi bi-arrow-right-circle"></i>
                            {{ $totalDisposisiCount }} Disposisi
                            <i class="bi bi-chevron-down small"></i>
                        </h5>
                    </a>
                </div>
            </div>
        </div>

        {{-- Catatan dari Pembuat Surat (Full Width) --}}
        @if($suratMasuk->keterangan)
            <div class="alert alert-info alert-permanent mb-0 mt-3">
                <i class="bi bi-info-circle"></i>
                <strong>Catatan dari {{ $suratMasuk->createdBy->jabatan_with_satuan ?? 'Pembuat Surat' }} (saat membuat surat):</strong>
                <x-catatan-display :content="$suratMasuk->keterangan" />
            </div>
        @endif

        {{-- Catatan Agenda sudah ditampilkan di bagian Perjalanan Surat dibawah --}}
    </div>

    <div class="card-footer bg-light">
        <div class="d-flex justify-content-between align-items-center text-muted small">
            <span>
                <i class="bi bi-person"></i>
                {{ $suratMasuk->createdBy->jabatan_with_satuan ?? '-' }}
            </span>
            <span>
                <i class="bi bi-clock"></i>
                {{ $suratMasuk->created_at->format('d M Y, H:i') }}
            </span>
        </div>
    </div>
</div>

<style>
.avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.badge-gold {
    background: linear-gradient(135deg, #D4AF37 0%, #F4E5A1 100%);
    color: #000;
    font-weight: 600;
}
</style>