@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 {
            width: 100%;
            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">
    <style>
        .tabs2 {
            display: flex;
            border-bottom: 2px solid #ccc;
        }
        
        .tabs2 a {
            padding: 10px 20px;
            border: none;
            background: none;
            border-bottom: 3px solid transparent;
            cursor: pointer;
            transition: 0.3s;
            font-size: 16px;
        }
        
        
        .tabs2 button {
            padding: 10px 20px;
            border: none;
            background: none;
            border-bottom: 3px solid transparent;
            cursor: pointer;
            transition: 0.3s;
            font-size: 16px;
        }
        .tabs2 button.active {
            border-bottom-color: #007bff;
            color: #007bff;
            font-weight: bold;
        }
        .tab2-content {
            display: none;
            padding: 15px 0;
        }
        .tab2-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";
              }
            }
          }
        }
        </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");
            });
        });

        const tabs2 = document.querySelectorAll(".tab2-link");
            const contents2 = document.querySelectorAll(".tab2-content");
          
        tabs2.forEach(tab => {
            tab.addEventListener("click", () => {
            // Remove active class dari semua tab dan konten
            tabs2.forEach(t => t.classList.remove("active"));
            contents2.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 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_perencanaan');
            let table1 = new DataTable('#myTable_pemilihan');
            let table2 = new DataTable('#myTable_pelaksanaan');

            let table3 = new DataTable('#myTable_sirup');
            let table4 = new DataTable('#myTable_lpse');

            // let table3 = new DataTable('#myTable_dikecualikan');
    
        </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: 80px;">
        <div class="p-2" style="padding: 10px;">
            <br />
<b>Warning</b>:  Undefined variable $pengadaan in <b>/home/aplikasiposinfo/public_html/ppid.aplikasipos.info/resources/views/barang_dan_jasa/detail.blade.php</b> on line <b>395</b><br />
<br />
<b>Warning</b>:  Attempt to read property "deskripsi" on null in <b>/home/aplikasiposinfo/public_html/ppid.aplikasipos.info/resources/views/barang_dan_jasa/detail.blade.php</b> on line <b>395</b><br />
        </div>
        <div class="tabs">
            {{-- <button class="tab-link active" data-tab="perencanaan">Tahapan Perencanaan </button> --}}
            <button class="tab-link active" data-tab="pemilihan">Tahapan Pemilihan </button>
            <button class="tab-link" data-tab="pelaksanaan">Tahapan Pelaksanaan</button>
        </div>
    
        <div class="content" style="padding: 10px;">
            <div class="tab-content " id="perencanaan">
                <span style="font-size: 16px; color: black;">Tahap Perencanaan Paket Pekerjaan sampai {{$pengadaan->year}}</span>
                <table class="table table-borderless" id="myTable_perencanaan">
                    <thead>
                        <th>No</th>
                        <th>Tahap Perencanaan</th>
                        <th>Akses</th>
                    </thead>
                    <tbody>
                        @foreach ($perencanaan as $item)
                            <tr>
                                <td>{{$loop->iteration}}</td>
                                <td>{{$item->judul}}</td>
                                <td><a href="{{url($item->akses)}}" target="_blank">Buka File >></a></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="tab-content active" id="pemilihan">
                <span style="font-size: 16px; color: black;">Tahap Pemilihan Paket Pekerjaan sampai {{$pengadaan->year}}</span>
                <table class="table table-borderless" id="myTable_pemilihan">
                    <thead>
                        <th>No</th>
                        <th>Tahap Pemilihan</th>
                        <th>Akses</th>
                    </thead>
                    <tbody>
                        @foreach ($pemilihan as $item)
                            <tr>
                                <td>{{$loop->iteration}}</td>
                                <td>{{$item->judul}}</td>
                                <td><a href="{{url($item->akses)}}" target="_blank">Buka File >></a></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="tab-content" id="pelaksanaan">
                <span style="font-size: 16px; color: black;">Tahap Pelaksanaan Paket Pekerjaan sampai {{$pengadaan->year}}</span>
                <table class="table table-borderless" id="myTable_pelaksanaan">
                    <thead>
                        <th>No</th>
                        <th>Tahap Pelaksanaan</th>
                        <th>Akses</th>
                    </thead>
                    <tbody>
                        @foreach ($pelaksanaan as $item)
                            <tr>
                                <td>{{$loop->iteration}}</td>
                                <td>{{$item->judul}}</td>
                                <td><a href="{{url($item->akses)}}" target="_blank">Buka File >></a></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <div class="tabs2">
            <button class="tab2-link active" data-tab="sirup">SIRUP {{$pengadaan->year}}</button>
            <button class="tab2-link" data-tab="lpse">LPSE {{$pengadaan->year}}</button>
            <a href="https://e-katalog.lkpp.go.id/landing" target="_blank" class="tab2-link" >Ecatalog</a>
        </div>

        <div class="content" style="padding: 10px;">
            <div class="tab2-content active" id="sirup">
                <table class="table table-primary" id="myTable_sirup">
                    <thead>
                        <th>No</th>
                        <th>Kode RUP</th>
                        <th>Nama Paket</th>
                        <th>Nama SKPD</th>
                        <th>Jenis</th>
                        <th>Pagu Paket</th>
                        <th>Akses</th>
                    </thead>
                    <tbody>
                                                @foreach ($sirup as $jenis)
                        <tr>
                            <td>{{$no++}}</td>
                            <td>{{ $jenis->kode_rup }}</td>
                            <td>{{ $jenis->nama_paket }}</td>
                            <td>{{ $jenis->nama_skpd }}</td>
                            <td>{{ $jenis->jenis }}</td>
                            <td>{{ number_format( $jenis->pagu_paket) }}</td>

                            <td>
                                <a href="{{ url($jenis->akses) }}" target="_blank" >Buka File >></a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="tab2-content" id="lpse">
                {{-- <span style="font-size: 16px; color: black;">Tahap Pemilihan Paket Pekerjaan sampai {{$pengadaan->year}}</span> --}}
                <table class="table table-primary" id="myTable_lpse">
                    <thead>
                        <th>No</th>
                        <th>Kode Tender</th>
                        <th>Nama Paket</th>
                        <th>Nama SKPD</th>
                        <th>Metode</th>
                        <th>Jenis</th>
                        <th>Pagu Paket</th>
                        <th>Akses</th>
                    </thead>
                    <tbody>
                                                @foreach ($lpse as $jenis)
                        <tr>
                            <td>{{$no++}}</td>
                            <td>{{ $jenis->kode_tender }}</td>
                            <td>{{ $jenis->nama_paket }}</td>
                            <td>{{ $jenis->nama_skpd }}</td>
                            <td>{{ $jenis->metode }}</td>
                            <td>{{ $jenis->jenis }}</td>
                            <td>{{ number_format( $jenis->pagu_paket) }}</td>

                            <td>
                                <a href="{{ url($jenis->akses) }}" target="_blank" >Buka File >></a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>

@endsection