@extends('layout.layout')

@section('title', 'Detail Pengumuman')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">Detail Pengumuman</h5>
                    <a href="{{ route('pengumuman.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Kembali
                    </a>
                </div>
                <div class="card-body">
                    <div class="row">
                        <!-- Informasi Utama -->
                        <div class="col-lg-8">
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h6 class="card-title mb-0">Informasi Pengumuman</h6>
                                </div>
                                <div class="card-body">
                                    <div class="row mb-3">
                                        <div class="col-sm-4"><strong>No. Registrasi:</strong></div>
                                        <div class="col-sm-8">
                                            <span class="badge bg-primary">{{ $kegiatan->NoRegistrasi }}</span>
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-sm-4"><strong>Nama Kegiatan:</strong></div>
                                        <div class="col-sm-8">{{ $kegiatan->NamaKegiatan }}</div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-sm-4"><strong>Jenis Dokumen:</strong></div>
                                        <div class="col-sm-8">{{ $kegiatan->JenisDokumen }}</div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-sm-4"><strong>Bidang Usaha:</strong></div>
                                        <div class="col-sm-8">{{ $kegiatan->BidangUsaha }}</div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-sm-4"><strong>Skala Besaran:</strong></div>
                                        <div class="col-sm-8">{{ $kegiatan->SkalaBesaran }}</div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-sm-4"><strong>Kewenangan:</strong></div>
                                        <div class="col-sm-8">{{ $kegiatan->Kewenangan }}</div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-sm-4"><strong>Status:</strong></div>
                                        <div class="col-sm-8">
                                            @if($kegiatan->Status == 'aktif')
                                                <span class="badge bg-success">Aktif</span>
                                            @elseif($kegiatan->Status == 'nonaktif')
                                                <span class="badge bg-danger">Non Aktif</span>
                                            @elseif($kegiatan->Status == 'selesai')
                                                <span class="badge bg-info">Selesai</span>
                                            @else
                                                <span class="badge bg-warning">{{ $kegiatan->Status }}</span>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-sm-4"><strong>Deskripsi:</strong></div>
                                        <div class="col-sm-8">
                                            <div class="border p-3 bg-light rounded">
                                                {!! nl2br(e($kegiatan->DeskripsiKegiatan)) !!}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Informasi Lokasi -->
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h6 class="card-title mb-0">Informasi Lokasi</h6>
                                </div>
                                <div class="card-body">
                                    <div class="row mb-3">
                                        <div class="col-sm-4"><strong>Lokasi Kegiatan:</strong></div>
                                        <div class="col-sm-8">{{ $kegiatan->LokasiKegiatan ?? '-' }}</div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-sm-4"><strong>Provinsi/Kota:</strong></div>
                                        <div class="col-sm-8">{{ $kegiatan->ProvinsiKota }}</div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-sm-4"><strong>Deskripsi Lokasi:</strong></div>
                                        <div class="col-sm-8">{{ $kegiatan->DeskripsiLokasi }}</div>
                                    </div>

                                    @if($kegiatan->Latitude && $kegiatan->Longitude)
                                    <div class="row mb-3">
                                        <div class="col-sm-4"><strong>Koordinat:</strong></div>
                                        <div class="col-sm-8">
                                            <span class="badge bg-info">{{ $kegiatan->Latitude }}, {{ $kegiatan->Longitude }}</span>
                                        </div>
                                    </div>
                                    @endif
                                </div>
                            </div>

                            <!-- Dampak Potensial -->
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h6 class="card-title mb-0">Dampak Potensial</h6>
                                </div>
                                <div class="card-body">
                                    <div class="border p-3 bg-light rounded">
                                        {!! nl2br(e($kegiatan->DampakPotensial)) !!}
                                    </div>
                                </div>
                            </div>

                            <!-- Informasi Pemrakarsa -->
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h6 class="card-title mb-0">Informasi Pemrakarsa</h6>
                                </div>
                                <div class="card-body">
                                    <div class="row mb-3">
                                        <div class="col-sm-4"><strong>Nama Pemrakarsa:</strong></div>
                                        <div class="col-sm-8">{{ $kegiatan->Pemrakarsa }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Sidebar Informasi -->
                        <div class="col-lg-4">
                            <!-- Informasi Waktu -->
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h6 class="card-title mb-0">Informasi Waktu</h6>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <strong>Tanggal Mulai:</strong><br>
                                        <span class="text-primary">
                                            {{ \Carbon\Carbon::parse($kegiatan->TanggalMulaiPeriode)->format('d F Y') }}
                                        </span>
                                    </div>

                                    <div class="mb-3">
                                        <strong>Tanggal Selesai:</strong><br>
                                        <span class="text-danger">
                                            {{ \Carbon\Carbon::parse($kegiatan->TanggalSelesaiPeriode)->format('d F Y') }}
                                        </span>
                                    </div>

                                    <div class="mb-0">
                                        <strong>Dibuat:</strong><br>
                                        <small class="text-muted">
                                            {{ \Carbon\Carbon::parse($kegiatan->created_at)->format('d M Y H:i') }}
                                        </small>
                                    </div>
                                </div>
                            </div>

                            <!-- Status Pengumuman -->
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h6 class="card-title mb-0">Status Pengumuman</h6>
                                </div>
                                <div class="card-body text-center">
                                    @php
                                        $now = \Carbon\Carbon::now();
                                        $tanggalSelesai = \Carbon\Carbon::parse($kegiatan->TanggalSelesaiPeriode);
                                        $sisaHari = $now->diffInDays($tanggalSelesai, false);
                                    @endphp

                                    @if($sisaHari > 0)
                                        <div class="alert alert-success">
                                            <i class="fas fa-clock"></i>
                                            <strong>Masih Aktif</strong><br>
                                            <small>Sisa {{ $sisaHari }} hari lagi</small>
                                        </div>
                                    @elseif($sisaHari == 0)
                                        <div class="alert alert-warning">
                                            <i class="fas fa-exclamation-triangle"></i>
                                            <strong>Berakhir Hari Ini</strong>
                                        </div>
                                    @else
                                        <div class="alert alert-danger">
                                            <i class="fas fa-times-circle"></i>
                                            <strong>Sudah Berakhir</strong><br>
                                            <small>{{ abs($sisaHari) }} hari yang lalu</small>
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <!-- Tombol Aksi -->
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="card-title mb-0">Aksi</h6>
                                </div>
                                <div class="card-body">
                                    @if($sisaHari >= 0)
                                        <a href="#" class="btn btn-primary btn-block mb-2">
                                            <i class="fas fa-comment"></i> Berikan Tanggapan
                                        </a>
                                    @endif

                                    <a href="#" class="btn btn-info btn-block mb-2">
                                        <i class="fas fa-download"></i> Download PDF
                                    </a>

                                    <a href="#" class="btn btn-secondary btn-block">
                                        <i class="fas fa-print"></i> Print
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Tanggapan/Komentar -->
                    @if($kegiatan->saranTanggapanApproved && $kegiatan->saranTanggapanApproved->count() > 0)
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="card-title mb-0">
                                        Tanggapan Masyarakat
                                        <span class="badge bg-secondary">{{ $kegiatan->saranTanggapanApproved->count() }}</span>
                                    </h6>
                                </div>
                                <div class="card-body">
                                    @foreach($kegiatan->saranTanggapanApproved as $tanggapan)
                                    <div class="border-bottom pb-3 mb-3">
                                        <div class="d-flex justify-content-between align-items-start">
                                            <div>
                                                <strong>{{ $tanggapan->Nama }}</strong>
                                                <small class="text-muted">- {{ $tanggapan->Email }}</small>
                                                <span class="badge bg-info ms-2">{{ ucfirst($tanggapan->Peran) }}</span>
                                            </div>
                                            <small class="text-muted">
                                                {{ \Carbon\Carbon::parse($tanggapan->TanggalDiajukan)->format('d M Y H:i') }}
                                            </small>
                                        </div>

                                        <div class="mt-2">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <small class="text-muted"><strong>Kondisi Lingkungan:</strong></small>
                                                    <p class="mb-2">{{ $tanggapan->KondisiLingkungan }}</p>

                                                    <small class="text-muted"><strong>Nilai Lokal:</strong></small>
                                                    <p class="mb-2">{{ $tanggapan->NilaiLokal }}</p>
                                                </div>
                                                <div class="col-md-6">
                                                    <small class="text-muted"><strong>Kekhawatiran:</strong></small>
                                                    <p class="mb-2">{{ $tanggapan->Kekhawatiran }}</p>

                                                    <small class="text-muted"><strong>Harapan:</strong></small>
                                                    <p class="mb-2">{{ $tanggapan->Harapan }}</p>
                                                </div>
                                            </div>

                                            <div class="mt-2">
                                                <small class="text-muted"><strong>Tingkat Kekhawatiran:</strong></small>
                                                <div class="d-flex align-items-center">
                                                    @for($i = 1; $i <= 5; $i++)
                                                        @if($i <= $tanggapan->TingkatKekhawatiran)
                                                            <i class="fas fa-star text-warning"></i>
                                                        @else
                                                            <i class="far fa-star text-muted"></i>
                                                        @endif
                                                    @endfor
                                                    <span class="ms-2 text-muted">({{ $tanggapan->TingkatKekhawatiran }}/5)</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('styles')
<style>
.card {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border: 1px solid rgba(0, 0, 0, 0.125);
}

.btn-block {
    width: 100%;
}

.alert {
    border: none;
    border-radius: 8px;
}

.badge {
    font-size: 0.875em;
}

@media (max-width: 768px) {
    .col-sm-4 {
        font-weight: bold;
        margin-bottom: 0.5rem;
    }

    .col-sm-8 {
        margin-bottom: 1rem;
    }
}
</style>
@endsection