@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>
@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";
              }
            }
          }
        }
        </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">Informasi mengenai Pengadaan Barang dan Jasa</h3>
                </div>
                <div style="padding: 20px;">
                    <ul>
                        @foreach ($pengadaan as $item)
                            <li><a href="{{url('barang_dan_jasa/'.$item->id)}}">Pengadaan Barang dan Jasa Tahun {{$item->year}}</a></li>
                        @endforeach
                    </ul>
                </div>

                {{-- <h2 class="text-dark"><b>Kalender Agenda</b></h2> --}}
                {{-- <div id='calendar' class="fc-time"></div> --}}
            </div>
        </div>
        <br>
        <div class="row d-flex justify-content-center text-center my-4">
            <div class="col-md-3 col-sm-12">
                <div class="card">
                    <a href="https://lpse.kaltimprov.go.id/eproc4">
                        <div class="card-img">
                            <img src="https://biropbj.kaltimprov.go.id/sportal/img/icon/lpse.png" alt="" srcset="">
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-md-3 col-sm-12">
                <div class="card">
                    <a href="https://e-katalog.lkpp.go.id/">
                        <div class="card-img">
                            <img src="https://biropbj.kaltimprov.go.id/sportal/img/icon/ekatalog.png" alt="" srcset="">
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-md-3 col-sm-12">
                <div class="card">
                    <a href="https://sirup.kaltimprov.go.id/">
                        <div class="card-img">
                            <img src="https://biropbj.kaltimprov.go.id/sportal/img/icon/sirup.png" alt="" srcset="">
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection