@extends('indexlayout')

@section('title', 'lokasi')
@push('style')
@endpush
@section('content')
    <div class="row">
        <main id="js-page-content" role="main" class="page-content">
            <ol class="breadcrumb page-breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:void(0);">Sarana & Prasarana</a></li>
                <li class="breadcrumb-item active">TPS3R</li>
                <li class="breadcrumb-item active">Lokasi TPS</li>
                <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
            </ol>


            <div class="container1">


                {{-- <div class="image-container1">
                    <div class="card-group">
                        <div class="image"><img src="{{ 'layout/dist/img/2022/tps_ketapang.jpeg' }}" alt=""></div>
                        <div class="image"><img src="{{ 'layout/dist/img/2022/tps_ketapang1.jpeg' }}" alt=""></div>
                        <div class="image"><img src="{{ 'layout/dist/img/2022/tps_ketapang3.jpeg' }}" alt=""></div>
                    </div>
                </div> --}}
                <div class="popup-image">
                    {{-- <span style="color: blue">&times;</span> --}}
                    <img src="" alt="">
                </div>

                <div class="card-group">

                    <div class="card-group">
                        <div class="container1" style="width: 1550px;">
                            <div class="panel-hdr">
                                <h2 style="justify-content: center; font-size:1.5rem">
                                    Lokasi TPS Ketapang
                                </h2>
                            </div>
                            <div class="image-container1">
                                <div class="card">
                                    <div class="card-body" style="width: 450px;">
                                        <img src="{{ 'layout/dist/img/2022/tps_ketapang1.jpeg' }}" class="card-img-top"
                                            alt="...">
                                        <h5 class="card-title" style="padding: 10px">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up
                                            the
                                            bulk
                                            of the card's content.</p>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-body" style="width: 450px;">
                                        <img src="{{ 'layout/dist/img/2022/tps_myjen1.jpeg' }}" class="card-img-top"
                                            alt="...">
                                        <h5 class="card-title" style="padding: 10px">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up
                                            the
                                            bulk
                                            of the card's content.</p>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-body" style="width: 450px;">
                                        <img src="{{ 'layout/dist/img/2022/tps_myjen1.jpeg' }}" class="card-img-top"
                                            alt="...">
                                        <h5 class="card-title" style="padding: 10px">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and
                                            make up
                                            the
                                            bulk
                                            of the card's content.</p>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-body" style="width: 450px;">
                                        <img src="{{ 'layout/dist/img/2022/tps_ketapang4.jpeg' }}" class="card-img-top"
                                            alt="...">
                                        <h5 class="card-title" style="padding: 10px">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and
                                            make up
                                            the
                                            bulk
                                            of the card's content.</p>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-body" style="width: 450px;">
                                        <img src="{{ 'layout/dist/img/2022/tps_ketapang5.jpeg' }}" class="card-img-top"
                                            alt="...">
                                        <h5 class="card-title" style="padding: 10px">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up
                                            the
                                            bulk
                                            of the card's content.</p>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-body" style="width: 450px;">
                                        <img src="{{ 'layout/dist/img/2022/tps_ketapang6.jpeg' }}" class="card-img-top"
                                            alt="...">
                                        <h5 class="card-title" style="padding: 10px">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up
                                            the
                                            bulk
                                            of the card's content.</p>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="container1">


                {{-- <div class="image-container1">
                    <div class="card-group">
                        <div class="image"><img src="{{ 'layout/dist/img/2022/tps_ketapang.jpeg' }}" alt=""></div>
                        <div class="image"><img src="{{ 'layout/dist/img/2022/tps_ketapang1.jpeg' }}" alt=""></div>
                        <div class="image"><img src="{{ 'layout/dist/img/2022/tps_ketapang3.jpeg' }}" alt=""></div>
                    </div>
                </div> --}}
                <div class="popup-image">
                    {{-- <span style="color: blue">&times;</span> --}}
                    <img src="" alt="">
                </div>

                <div class="card-group">

                    <div class="card-group">
                        <div class="container1" style="width: 1550px;">
                            <div class="panel-hdr">
                                <h2 style="justify-content: center; font-size:1.5rem" id="tps-mayjend">
                                    Lokasi TPS Mayjend Sutoyo (PLN)
                                </h2>
                            </div>
                            <div class="image-container1">
                                <div class="card">
                                    <div class="card-body" style="width: 450px;">
                                        <img src="{{ 'layout/dist/img/2022/tps_myjen1.jpeg' }}" class="card-img-top"
                                            alt="...">
                                        <h5 class="card-title" style="padding: 10px">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up
                                            the
                                            bulk
                                            of the card's content.</p>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-body" style="width: 450px;">
                                        <img src="{{ 'layout/dist/img/2022/tps_myjen2.jpeg' }}" class="card-img-top"
                                            alt="...">
                                        <h5 class="card-title" style="padding: 10px">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up
                                            the
                                            bulk
                                            of the card's content.</p>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-body" style="width: 450px;">
                                        <img src="{{ 'layout/dist/img/2022/tps_myjen3.jpeg' }}" class="card-img-top"
                                            alt="...">
                                        <h5 class="card-title" style="padding: 10px">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and
                                            make up
                                            the
                                            bulk
                                            of the card's content.</p>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-body" style="width: 450px;">
                                        <img src="{{ 'layout/dist/img/2022/tps_myjen4.jpeg' }}" class="card-img-top"
                                            alt="...">
                                        <h5 class="card-title" style="padding: 10px">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and
                                            make up
                                            the
                                            bulk
                                            of the card's content.</p>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-body" style="width: 450px;">
                                        <img src="{{ 'layout/dist/img/2022/tps_myjen5.jpeg' }}" class="card-img-top"
                                            alt="...">
                                        <h5 class="card-title" style="padding: 10px">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up
                                            the
                                            bulk
                                            of the card's content.</p>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-body" style="width: 450px;">
                                        <img src="{{ 'layout/dist/img/2022/tps_myjen6.jpeg' }}" class="card-img-top"
                                            alt="...">
                                        <h5 class="card-title" style="padding: 10px">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up
                                            the
                                            bulk
                                            of the card's content.</p>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="container1">


                {{-- <div class="image-container1">
                    <div class="card-group">
                        <div class="image"><img src="{{ 'layout/dist/img/2022/tps_ketapang.jpeg' }}" alt=""></div>
                        <div class="image"><img src="{{ 'layout/dist/img/2022/tps_ketapang1.jpeg' }}" alt=""></div>
                        <div class="image"><img src="{{ 'layout/dist/img/2022/tps_ketapang3.jpeg' }}" alt=""></div>
                    </div>
                </div> --}}
                <div class="popup-image">
                    {{-- <span style="color: blue">&times;</span> --}}
                    <img src="" alt="">
                </div>

                <div class="card-group">

                    <div class="card-group">
                        <div class="container1" style="width: 1550px;">
                            <div class="panel-hdr">
                                <h2 style="justify-content: center; font-size:1.5rem" id="tps-mayjend">
                                    Lokasi TPS H. Naman
                                </h2>
                            </div>
                            <div class="image-container1">
                                <div class="card">
                                    <div class="card-body" style="width: 450px;">
                                        <img src="{{ 'layout/dist/img/2022/tps_naman1.jpeg' }}" class="card-img-top"
                                            alt="...">
                                        <h5 class="card-title" style="padding: 10px">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up
                                            the
                                            bulk
                                            of the card's content.</p>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-body" style="width: 450px;">
                                        <img src="{{ 'layout/dist/img/2022/tps_naman2.jpeg' }}" class="card-img-top"
                                            alt="...">
                                        <h5 class="card-title" style="padding: 10px">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up
                                            the
                                            bulk
                                            of the card's content.</p>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-body" style="width: 450px;">
                                        <img src="{{ 'layout/dist/img/2022/tps_naman3.jpeg' }}" class="card-img-top"
                                            alt="...">
                                        <h5 class="card-title" style="padding: 10px">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and
                                            make up
                                            the
                                            bulk
                                            of the card's content.</p>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-body" style="width: 450px;">
                                        <img src="{{ 'layout/dist/img/2022/tps_naman4.jpeg' }}" class="card-img-top"
                                            alt="...">
                                        <h5 class="card-title" style="padding: 10px">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and
                                            make up
                                            the
                                            bulk
                                            of the card's content.</p>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-body" style="width: 450px;">
                                        <img src="{{ 'layout/dist/img/2022/tps_naman5.jpeg' }}" class="card-img-top"
                                            alt="...">
                                        <h5 class="card-title" style="padding: 10px">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up
                                            the
                                            bulk
                                            of the card's content.</p>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-body" style="width: 450px;">
                                        <img src="{{ 'layout/dist/img/2022/tps_naman6.jpeg' }}" class="card-img-top"
                                            alt="...">
                                        <h5 class="card-title" style="padding: 10px">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up
                                            the
                                            bulk
                                            of the card's content.</p>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="container1">


                {{-- <div class="image-container1">
                    <div class="card-group">
                        <div class="image"><img src="{{ 'layout/dist/img/2022/tps_ketapang.jpeg' }}" alt=""></div>
                        <div class="image"><img src="{{ 'layout/dist/img/2022/tps_ketapang1.jpeg' }}" alt=""></div>
                        <div class="image"><img src="{{ 'layout/dist/img/2022/tps_ketapang3.jpeg' }}" alt=""></div>
                    </div>
                </div> --}}
                <div class="popup-image">
                    {{-- <span style="color: blue">&times;</span> --}}
                    <img src="" alt="">
                </div>

                <div class="card-group">

                    <div class="card-group">
                        <div class="container1" style="width: 1550px;">
                            <div class="panel-hdr">
                                <h2 style="justify-content: center; font-size:1.5rem" id="tps-mayjend">
                                    Lokasi TPS PIK II
                                </h2>
                            </div>
                            <div class="image-container1">
                                <div class="card">
                                    <div class="card-body" style="width: 450px;">
                                        <img src="{{ 'layout/dist/img/2022/tps_pik1.jpeg' }}" class="card-img-top"
                                            alt="...">
                                        <h5 class="card-title" style="padding: 10px">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up
                                            the
                                            bulk
                                            of the card's content.</p>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-body" style="width: 450px;">
                                        <img src="{{ 'layout/dist/img/2022/tps_pik2.jpeg' }}" class="card-img-top"
                                            alt="...">
                                        <h5 class="card-title" style="padding: 10px">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up
                                            the
                                            bulk
                                            of the card's content.</p>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-body" style="width: 450px;">
                                        <img src="{{ 'layout/dist/img/2022/tps_pik3.jpeg' }}" class="card-img-top"
                                            alt="...">
                                        <h5 class="card-title" style="padding: 10px">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and
                                            make up
                                            the
                                            bulk
                                            of the card's content.</p>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-body" style="width: 450px;">
                                        <img src="{{ 'layout/dist/img/2022/tps_pik4.jpeg' }}" class="card-img-top"
                                            alt="...">
                                        <h5 class="card-title" style="padding: 10px">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and
                                            make up
                                            the
                                            bulk
                                            of the card's content.</p>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-body" style="width: 450px;">
                                        <img src="{{ 'layout/dist/img/2022/tps_pik5.jpeg' }}" class="card-img-top"
                                            alt="...">
                                        <h5 class="card-title" style="padding: 10px">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up
                                            the
                                            bulk
                                            of the card's content.</p>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-body" style="width: 450px;">
                                        <img src="{{ 'layout/dist/img/2022/tps_pik6.jpeg' }}" class="card-img-top"
                                            alt="...">
                                        <h5 class="card-title" style="padding: 10px">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up
                                            the
                                            bulk
                                            of the card's content.</p>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="container1">


                {{-- <div class="image-container1">
                    <div class="card-group">
                        <div class="image"><img src="{{ 'layout/dist/img/2022/tps_ketapang.jpeg' }}" alt=""></div>
                        <div class="image"><img src="{{ 'layout/dist/img/2022/tps_ketapang1.jpeg' }}" alt=""></div>
                        <div class="image"><img src="{{ 'layout/dist/img/2022/tps_ketapang3.jpeg' }}" alt=""></div>
                    </div>
                </div> --}}
                <div class="popup-image">
                    {{-- <span style="color: blue">&times;</span> --}}
                    <img src="" alt="">
                </div>

                <div class="card-group">

                    <div class="card-group">
                        <div class="container1" style="width: 1550px;">
                            <div class="panel-hdr">
                                <h2 style="justify-content: center; font-size:1.5rem" id="tps-mayjend">
                                    Lokasi TPS Pondok Kopi
                                </h2>
                            </div>
                            <div class="image-container1">
                                <div class="card">
                                    <div class="card-body" style="width: 450px;">
                                        <img src="{{ 'layout/dist/img/2022/tps_pondokkopi1.jpeg' }}" class="card-img-top"
                                            alt="...">
                                        <h5 class="card-title" style="padding: 10px">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up
                                            the
                                            bulk
                                            of the card's content.</p>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-body" style="width: 450px;">
                                        <img src="{{ 'layout/dist/img/2022/tps_pondokkopi2.jpeg' }}" class="card-img-top"
                                            alt="...">
                                        <h5 class="card-title" style="padding: 10px">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up
                                            the
                                            bulk
                                            of the card's content.</p>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-body" style="width: 450px;">
                                        <img src="{{ 'layout/dist/img/2022/tps_pondokkopi3.jpeg' }}" class="card-img-top"
                                            alt="...">
                                        <h5 class="card-title" style="padding: 10px">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and
                                            make up
                                            the
                                            bulk
                                            of the card's content.</p>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-body" style="width: 450px;">
                                        <img src="{{ 'layout/dist/img/2022/tps_pondokkopi4.jpeg' }}" class="card-img-top"
                                            alt="...">
                                        <h5 class="card-title" style="padding: 10px">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and
                                            make up
                                            the
                                            bulk
                                            of the card's content.</p>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-body" style="width: 450px;">
                                        <img src="{{ 'layout/dist/img/2022/tps_pondokkopi5.jpeg' }}" class="card-img-top"
                                            alt="...">
                                        <h5 class="card-title" style="padding: 10px">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up
                                            the
                                            bulk
                                            of the card's content.</p>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-body" style="width: 450px;">
                                        <img src="{{ 'layout/dist/img/2022/tps_pondokkopi6.jpeg' }}" class="card-img-top"
                                            alt="...">
                                        <h5 class="card-title" style="padding: 10px">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up
                                            the
                                            bulk
                                            of the card's content.</p>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

@endsection

@push('script')
    <script src="{{ asset('layout/dist/js/datagrid/datatables/datatables.bundle.js') }}"></script>
    {{-- <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> --}}
    <script src="{{ asset('layout/dist/js/tabel.js') }}"></script>
    <script src="{{ asset('layout/dist/js/linechart.js') }}"></script>
    <script src="{{ asset('layout/dist/js/iku.js') }}"></script>
    <script src="{{ asset('layout/dist/css/image.css') }}"></script>
    <script>
        document.querySelectorAll('.image-container1 img').forEach(image => {
            image.onclick = () => {
                document.querySelector('.popup-image').style.display = 'block';
                document.querySelector('.popup-image img').src = image.getAttribute('src');
            }
        });

        document.querySelector('.popup-image img').onclick = () => {
            document.querySelector('.popup-image').style.display = 'none';
        }
    </script>
@endpush