@extends('layouts.app')
@push('styles')
    <style>
        .swiper {
            width: 100%;
            height: min(80vh, 800px);
            border-radius: 16px;
            position: relative;
        }

        #infografis.owl-carousel .owl-item img {
            height: 440px !important;
            width: auto !important;
            margin: auto;
            display: block;
        }

        /* .row {
                            margin-left: 0px;
                            margin-right: 0px;
                        } */



        .swiper-button-prev,
        .swiper-button-next {
            color: #fff;
        }

        @media only screen and (max-width: 600px) {


            .swiper {
                height: min(50vh, 500px);
                width: 100%;
                border-radius: 16px;
            }

            #wrapper {
                flex-direction: column-reverse !important;
            }

            #info {
                width: 500px !important;
                margin-top: 30px !important;

                margin-left: 0px !important;
            }



        }

        .swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }



        .hero-slider {
            position: relative;
            overflow: hidden;
            /* height: 100vh; */
            /* padding-top: 100px; */
            padding-left: 8px;
            padding-right: 8px;
            background-color: #1289a7;
            /* background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%233d8e59' fill-opacity='0.4'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); */

        }

        #scroll-button {
            position: relative;
            margin: auto;
            display: block;
            width: 100px;
            height: 100px;
        }

        #scroll-button span {
            position: absolute;
            top: 0;
            left: 50%;
            width: 24px;
            height: 24px;
            margin-left: -12px;
            border-left: 1px solid #fff;
            border-bottom: 1px solid #fff;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            -webkit-animation: sdb07 2s infinite;
            animation: sdb07 2s infinite;
            opacity: 0;
            box-sizing: border-box;
        }

        #scroll-button span:nth-of-type(1) {
            -webkit-animation-delay: 0s;
            animation-delay: 0s;
        }

        #scroll-button span:nth-of-type(2) {
            top: 16px;
            -webkit-animation-delay: .15s;
            animation-delay: .15s;
        }

        #scroll-button span:nth-of-type(3) {
            top: 32px;
            -webkit-animation-delay: .3s;
            animation-delay: .3s;
        }

        @-webkit-keyframes sdb07 {
            0% {
                opacity: 0;
            }

            50% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes sdb07 {
            0% {
                opacity: 0;
            }

            50% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

        .card {
            width: 100%;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            overflow: hidden;
            background-color: #fff;
            font-family: Arial, sans-serif;
            }

            .card img {
            width: 100%;
            height: auto;
            display: block;
            }

            .card-body {
            padding: 10px;
            }

            .card-title {
            font-size: 1.25rem;
            font-weight: bold;
            margin-bottom: 8px;
            }

            .card-text {
            font-size: 0.95rem;
            margin-bottom: 12px;
            color: #555;
            }

            .card-button {
            display: inline-block;
            padding: 8px 16px;
            background-color: #007bff;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            }


            .listKotak div h3 {
                font-size: 30px;
                font-weight: bolder;
                text-align: right;

            }

            .listKotak div h3 i {
                color:#2379c9 !important;
            }

            .logo-item {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 150px; /* Sesuaikan tinggi maksimum container logo */
            margin-bottom: 20px;
            border: 1px solid transparent; /* Optional bantu lihat grid */
            }

            .logo-item img {
            max-height: 110px;
            width: auto;
            object-fit: contain;
            }

    </style>
    <style>
        .tabs {
          display: flex;
          border-bottom: 2px solid #ccc;
        }
        .tabs button {
          padding: 10px 20px;
          border: none;
          background: none;
          border-bottom: 3px solid transparent;
          cursor: pointer;
          transition: 0.3s;
          font-size: 16px;
        }
        .tabs button.active {
          border-bottom-color: #007bff;
          color: #007bff;
          font-weight: bold;
        }
        .tab-content {
          display: none;
          padding: 15px 0;
        }
        .tab-content.active {
          display: block;
        }
    </style>
@endpush
@push('scripts')

    @if (isset($survei) && $survei != null)
        <!-- Modal -->
        <div class="modal fade" id="surveiModal" tabindex="-1" role="dialog" aria-labelledby="surveiModalLabel"
            aria-hidden="true" style="z-index: 9999;">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="surveiModalLabel">{{ @$survei->nama }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-4">
                                <img src="{{ url(@$survei->thumbnail) }}" alt="Gambar thumbnail survei">
                            </div>
                            <div class="col-md-8">
                                {{ @$survei->deskripsi }}
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal"
                            title="Close Modal">Close</button>
                        <a type="button" class="btn btn-primary" href="{{ @$survei->form }}" title="Isi Survei"
                            target="_blank">Isi Survei</a>
                    </div>
                </div>
            </div>
        </div>
    @endif
    {{-- script slider --}}
    <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
    <script>
        function myFunction() {
          // Declare variables
          var input, filter, table, tr, td, i, txtValue;
          input = document.getElementById("myInput");
          filter = input.value.toUpperCase();
          table = document.getElementById("myTable");
          tr = table.getElementsByTagName("tr");

          // Loop through all table rows, and hide those who don't match the search query
          for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[1];
            if (td) {
              txtValue = td.textContent || td.innerText;
              if (txtValue.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
              } else {
                tr[i].style.display = "none";
              }
            }
          }
        }

        function myFunctionkota() {
          // Declare variables
          var input, filter, table, tr, td, i, txtValue;
          input = document.getElementById("myInput_kota");
          filter = input.value.toUpperCase();
          table = document.getElementById("myTable_kota");
          tr = table.getElementsByTagName("tr");

          // Loop through all table rows, and hide those who don't match the search query
          for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[1];
            if (td) {
              txtValue = td.textContent || td.innerText;
              if (txtValue.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
              } else {
                tr[i].style.display = "none";
              }
            }
          }
        }
        </script>
    {{-- <script type="text/javascript" src="{{ asset('assets/js/jqueryeh.js') }}"></script> --}}
<script>

</script>
    {{-- script slider --}}
@endpush
@section('content')


<section style="background-color: #fefad6; background-size: cover; background-repeat: no-repeat; background-position-x: center;padding-top: 5px !important;">
    <div class="container" style="margin-top: 150px;">
        <div class="card">
            <div class="card-body">


                <embed src="{{url($settings->dip_pdf)}}" type="application/pdf" width="100%" height="600px">

                <div class="tabs">
                    <button class="tab-link active" data-tab="opd_tab">OPD</button>
                    <button class="tab-link" data-tab="kabupaten_kota_tab">Kabupaten/Kota</button>
                </div>
                <div class="tab-content active" id="opd_tab">
                    <input type="text" name="cari_opd" onkeyup="myFunction()" placeholder="Cari OPD disini..." class="form-control" id="myInput">
                    <table class="table table-bordered" id="myTable">
                        <thead>
                            <tr>
                                <th  style="text-align: center;">No</th>
                                <th>Perangkat Daerah</th>
                                <th  style="text-align: center;">Jumlah DIP</th>
                                <th  style="text-align: center;">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $Kominfo = null;
                            @endphp
                            @foreach ($dip_opd as $item)
                                @if($item->id != 3)
                                <tr>
                                    <td  style="text-align: center;">{{$loop->iteration}}</td>
                                    <td>{{ strtoupper($item->penerbit_dip) }}</td>
                                    <td  style="text-align: center;">{{$item->DataInformasiPublik->where('status', 'publik')->count()}}</td>
                                    <td>
                                        <center>
                                            <a href="{{url('dip/opd/'.$item->id)}}" class="btn btn-danger">DIP</a>
                                            <a href="{{ $item->web_ppid }}" target="_blank" class="btn btn-primary">Web PPID</a>
                                        </center>
                                    </td>
                                </tr>
                                @else
                                    @php
                                        $Kominfo = $item;
                                    @endphp
                                @endif
                            @endforeach
                                <tr>
                                    <td  style="text-align: center;">-</td>
                                    <td>{{$Kominfo->penerbit_dip}}</td>
                                    <td  style="text-align: center;">{{$Kominfo->DataInformasiPublik->where('status', 'publik')->count()}}</td>
                                    <td>
                                        <center>
                                            <a href="{{url('dip/opd/'.$Kominfo->id)}}" class="btn btn-danger">DIP</a>
                                            <a href="{{ $Kominfo->web_ppid }}" target="_blank" class="btn btn-primary">Web PPID</a>
                                        </center>
                                    </td>
                                </tr>
                        </tbody>
                    </table>
                </div>
                <div class="tab-content" id="kabupaten_kota_tab">
                    <input type="text" name="cari_kota" onkeyup="myFunctionkota()" placeholder="Cari Kabupaten/Kota disini..." class="form-control" id="myInput_kota">
                    <table class="table table-bordered" id="myTable_kota">
                        <thead>
                            <tr>
                                <th  style="text-align: center;">No</th>
                                <th>Perangkat Daerah</th>
                                <th  style="text-align: center;">Jumlah DIP</th>
                                <th  style="text-align: center;">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $kotaKabupatenNumber = 1;
                            @endphp
                            @foreach ($dip_kota as $item)
                                <tr>
                                    <td  style="text-align: center;">{{$kotaKabupatenNumber++}}</td>
                                    <td>{{ strtoupper($item->penerbit_dip) }}</td>
                                    <td  style="text-align: center;">{{$item->DataInformasiPublik->where('status', 'publik')->count()}}</td>
                                    <td>
                                        <center>
                                            <a href="{{url('dip/opd/'.$item->id)}}" class="btn btn-danger">DIP</a>
                                            <a href="{{ $item->web_ppid }}" target="_blank" class="btn btn-primary">Web PPID</a>
                                        </center>
                                    </td>
                                </tr>
                            @endforeach
                            @foreach ($dip_kabupaten as $item)
                                <tr>
                                    <td  style="text-align: center;">{{$kotaKabupatenNumber++}}</td>
                                    <td>{{ strtoupper($item->penerbit_dip) }}</td>
                                    <td  style="text-align: center;">{{$item->DataInformasiPublik->where('status', 'publik')->count()}}</td>
                                    <td>
                                        <center>
                                            <a href="{{url('dip/opd/'.$item->id)}}" class="btn btn-danger">DIP</a>
                                            <a href="{{ $item->web_ppid }}" target="_blank" class="btn btn-primary">Web PPID</a>
                                        </center>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                {{-- <h2 class="text-dark"><b>Kalender Agenda</b></h2> --}}
                {{-- <div id='calendar' class="fc-time"></div> --}}
            </div>
        </div>
    </div>
</section>
<script>
    const tabs = document.querySelectorAll(".tab-link");
    const contents = document.querySelectorAll(".tab-content");
    // let myTable_kota = new DataTable('#myTable_kota');

    tabs.forEach(tab => {
        tab.addEventListener("click", () => {
        // Remove active class dari semua tab dan konten
        tabs.forEach(t => t.classList.remove("active"));
        contents.forEach(c => c.classList.remove("active"));

        // Tambahkan active ke tab yg diklik dan kontennya
        tab.classList.add("active");
        document.getElementById(tab.dataset.tab).classList.add("active");
        });
    });
</script>
@endsection