@extends('user.template')

@section('content')
    <!-- Page Title -->
    <div class="page-title">
        <div class="container d-lg-flex justify-content-between align-items-center">
            <h1 class="mb-2 mb-lg-0">Detail TPS</h1>
            <nav class="breadcrumbs">
                <ol>
                    <li><a href="index.html">Beranda</a></li>
                    <li class="current">Sebaran TPS</li>
                    <li class="current">Detail TPS</li>
                </ol>
            </nav>
        </div>
    </div><!-- End Page Title -->

    <section id="about" class="about section" style="padding-top: 0;">
        <div class="container" data-aos="fade-up">

            <div class="row g-4 g-lg-5" data-aos="fade-up" data-aos-delay="200">

                <div class="col-lg-5">
                    <div class="about-img">
                        <img src="{{ $tps->foto_tps ? asset('storage/' . $tps->foto_tps) : asset('assets/user/img/about-portrait.jpg') }}"
                            class="img-fluid" alt="">
                    </div>
                </div>

                <div class="col-lg-7">
                    <h3 class="pt-0 pt-lg-5">{{ $tps->nama_tps }}</h3>

                    <!-- Tab Content -->
                    <div class="tab-content">

                        <div class="tab-pane fade show active" id="about-tab1">

                            <p class="mb-4 fst-italic">
                                {{ $tps->alamat_tps }}
                            </p>

                            <div class="table-responsive">
                                <table class="table align-middle table-borderless">
                                    <tbody>
                                        <tr>
                                            <th width="40%">
                                                <i class="bi bi-tags me-1"></i>
                                                Kategori TPS
                                            </th>
                                            <td>{{ $tps->kategori->nama_kategori ?? '-' }}</td>
                                        </tr>

                                        <tr>
                                            <th>
                                                <i class="bi bi-info-circle me-1"></i>
                                                Status TPS
                                            </th>
                                            <td>{{ $tps->status_tps ?? '-' }}</td>
                                        </tr>

                                        <tr>
                                            <th>
                                                <i class="bi bi-box me-1"></i>
                                                Kapasitas TPS
                                            </th>
                                            <td>{{ $tps->kapasitas_tps ?? '-' }}</td>
                                        </tr>

                                        <tr>
                                            <th>
                                                <i class="bi bi-calendar me-1"></i>
                                                Tahun Pembuatan
                                            </th>
                                            <td>{{ $tps->tahun_pembuatan ?? '-' }}</td>
                                        </tr>

                                        <tr>
                                            <th>
                                                <i class="bi bi-crosshair me-1"></i>
                                                Koordinat
                                            </th>
                                            <td>
                                                {{ $tps->latitude }}, {{ $tps->longitude }}
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="mt-4 d-flex justify-content-between align-items-center">
                                    <small class="text-muted">
                                        Laporkan jika TPS bermasalah atau penuh
                                    </small>

                                    <a href="{{ route('user.aduan', ['tps_id' => $tps->id_tps]) }}" class="btn-aduan-tps">
                                        Adukan TPS
                                    </a>

                                </div>

                            </div>

                        </div><!-- End Tab 1 Content -->

                    </div>

                </div>
                {{-- ===================== --}}
{{-- ADUAN TPS (DITANGGAPI) --}}
{{-- ===================== --}}
<section class="mt-4 section bg-light">
    <div class="container">

        <h5 class="mb-3 fw-semibold">Aduan yang Telah Ditanggapi</h5>

        @if ($aduanTps->count())
            <div class="list-group list-group-flush">

                @foreach ($aduanTps as $aduan)
                    <div class="px-3 py-3 mb-2 bg-white rounded shadow-sm list-group-item">

                        {{-- HEADER --}}
                        <div class="mb-1 d-flex justify-content-between align-items-center">
                            <small class="fw-semibold text-dark">
                                {{ $aduan->nama_pelapor }}
                            </small>

                            <small class="text-muted">
                                {{ \Carbon\Carbon::parse($aduan->tanggal_aduan)->translatedFormat('d M Y') }}
                            </small>
                        </div>

                        {{-- ISI ADUAN --}}
                        <p class="mb-2 text-secondary small">
                            {{ $aduan->isi_aduan }}
                        </p>

                        {{-- TANGGAPAN --}}
                        <div class="border-start border-success ps-2">
                            <small class="text-success fw-semibold">
                                Tanggapan Admin:
                            </small>
                            <div class="small text-dark">
                                {{ $aduan->tanggapan_admin }}
                            </div>
                        </div>

                    </div>
                @endforeach

            </div>
        @else
            <small class="text-muted">
                Belum ada aduan yang ditanggapi.
            </small>
        @endif

    </div>
</section>


            </div>

        </div>
    </section>

    </div>

    </section>
@endsection