@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>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.2.2/css/dataTables.dataTables.min.css">

@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 src="https://cdn.datatables.net/2.2.2/js/dataTables.min.js"></script>
    <script>
        let table = new DataTable('#myTable_dip_berkala');
        let table1 = new DataTable('#myTable_dip_serta_merta');
        let table2 = new DataTable('#myTable_dip_setiap_saat');
        let table3 = new DataTable('#myTable_dikecualikan');

    </script>
    <script>
        const tabs = document.querySelectorAll(".tab-link");
        const contents = document.querySelectorAll(".tab-content");
      
    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>

    {{-- <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">
                <div class="card-title">
                    <h3 style="font-weight: bold">{{$penerbit_dip->penerbit_dip}}</h3>
                </div>
                <div class="tabs">
                    <button class="tab-link active" data-tab="dip_berkala">Informasi Berkala <a href="#" class="btn btn-primary">{{$dip_berkala->count()}}</a></button>
                    <button class="tab-link" data-tab="dip_serta_merta">Informasi Serta Merta <a href="#" class="btn btn-success">{{$dip_serta_merta->count()}}</a></button>
                    <button class="tab-link" data-tab="setiap_saat">Informasi Setiap Saat <a href="#" class="btn btn-warning">{{$dip_setiap_saat->count()}}</a></button>
                    <button class="tab-link" data-tab="dikecualikan">Informasi Dikecualikan <a href="#" class="btn btn-danger">{{$dip_dikecualikan->count()}}</a></button>

                  </div>
                  
                  <div class="tab-content active" id="dip_berkala">
                    <table class="table table-bordered" id="myTable_dip_berkala">
                        <thead>
                            <tr>
                                <th style="text-align: center;">No</th>
                                <th style="text-align: center;">Kode DIP</th>
                                <th >Nama DIP</th>
                                <th style="text-align: center;">Tanggal Posting</th>
                                <th style="text-align: center;">Unduh</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($dip_berkala as $item)
                                <tr>
                                    <td style="text-align: center;">{{$loop->iteration}}</td>
                                    <td style="text-align: center;"><a href="{{url('dip/opd/'.$penerbit_dip->id.'/'.$item->id)}}" class="text-danger">{{$item->id}}</a></td>
                                    <td>{{ strtoupper($item->judul) }}</td>
                                    <td style="text-align: center;">{{date('d M,Y', strtotime($item->created_at))}}</td>
                                    <td style="text-align: center;">{{$item->views}}x</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                  </div>
                  <div class="tab-content" id="dip_serta_merta">
                    <table class="table table-bordered" id="myTable_dip_serta_merta">
                        <thead>
                            <tr>
                                <th style="text-align: center;">No</th>
                                <th style="text-align: center;">Kode DIP</th>
                                <th>Nama DIP</th>
                                <th style="text-align: center;">Tanggal Posting</th>
                                <th style="text-align: center;">Unduh</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($dip_serta_merta as $item)
                                <tr>
                                    <td style="text-align: center;">{{$loop->iteration}}</td>
                                    <td style="text-align: center;"><a href="{{url('dip/opd/'.$penerbit_dip->id.'/'.$item->id)}}" class="text-danger">{{$item->id}}</a></td>
                                    <td>{{$item->judul}}</td>
                                    <td style="text-align: center;">{{date('d M,Y', strtotime($item->created_at))}}</td>
                                    <td style="text-align: center;">{{$item->views}}x</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                  </div>
                  <div class="tab-content" id="setiap_saat">
                    <table class="table table-bordered" id="myTable_dip_setiap_saat">
                        <thead>
                            <tr>
                                <th style="text-align: center;">No</th>
                                <th style="text-align: center;">Kode DIP</th>
                                <th>Nama DIP</th>
                                <th style="text-align: center;">Tanggal Posting</th>
                                <th style="text-align: center;">Unduh</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($dip_setiap_saat as $item)
                                <tr>
                                    <td style="text-align: center;">{{$loop->iteration}}</td>
                                    <td style="text-align: center;"><a href="{{url('dip/opd/'.$penerbit_dip->id.'/'.$item->id)}}" class="text-danger">{{$item->id}}</a></td>
                                    <td>{{$item->judul}}</td>
                                    <td style="text-align: center;">{{date('d M,Y', strtotime($item->created_at))}}</td>
                                    <td style="text-align: center;">{{$item->views}}x</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                  </div>
                  <div class="tab-content" id="dikecualikan">
                    <table class="table table-bordered" id="myTable_dikecualikan">
                        <thead>
                            <tr>
                                <th style="text-align: center;">No</th>
                                <th style="text-align: center;">Kode DIP</th>
                                <th>Nama DIP</th>
                                <th style="text-align: center;">Tanggal Posting</th>
                                <th style="text-align: center;">Unduh</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($dip_dikecualikan as $item)
                                <tr>
                                    <td style="text-align: center;">{{$loop->iteration}}</td>
                                    <td style="text-align: center;"><a href="{{url('dip/opd/'.$penerbit_dip->id.'/'.$item->id)}}" class="text-danger">{{$item->id}}</a></td>
                                    <td>{{$item->judul}}</td>
                                    <td style="text-align: center;">{{date('d M,Y', strtotime($item->created_at))}}</td>
                                    <td style="text-align: center;">{{$item->views}}x</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>

@endsection