@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="fst-italic mb-4">
                                {{ $tps->alamat_tps }}
                            </p>

                            <div class="table-responsive">
                                <table class="table table-borderless align-middle">
                                    <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>

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

                    </div>

                </div>

            </div>

        </div>

    </section>
@endsection