@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 type="text/javascript" src="{{ asset('assets/js/jqueryeh.js') }}"></script> --}}
<script>

</script>
    <script>
        $(document).ready(function() {
            var calendar = $('#calendar').fullCalendar({
                editable: true,
                header: {
                    left: 'prev, next today',
                    center: 'title',
                    right: 'month, agendaWeek, agendaDay'
                },
                events: {
                    url: '{{url("calendar")}}?kalender=kalender',
                    // color: '#3F8664',
                    // textColor: '#3F8664',
                },
                selectable: true,
                selectHelper: true,
                eventClick: function(event) {
                    var id = event.id;
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $.ajax({
                        url: "{{url("calendar")}}?kalender=show&id=" + id,
                        type: "GET",
                        success: function(response) {
                            var kegiatan = response.kegiatan;
                            // console.log();
                            // calendar.fullCalendar('refetchEvents');
                            alert(`${kegiatan.name}\n${kegiatan.description}`);
                        },
                    });
                }
            });

            const myModal = $('#surveiModal');
            if (myModal) {
                myModal.modal('toggle');
            }
            
            
            $('.listKotak').on('mouseenter', function() {
                $(this).css({
                    'background-color': 'rgb(12, 12, 12)', 
                    'height': '180px',
                });

                // 
                $(`#listKotakIcon_${$(this).attr('id')}`).attr('style', 
                'color:yellow !important;');
                $(`#listKotakTitle_${$(this).attr('id')}`).attr('style', 
                'font-size: 24px !important; font-weight: bolder !important; text-align: left !important; color: yellow !important;');
                // 
                // listKotakIcon
            });

                $('.listKotak').css({
                    'background-color': 'rgba(212, 212, 212, 1)', 
                    'height': '180px',
                });


                $('.listKotakTitle').attr('style', 
                'font-size: 24px !important; font-weight: bolder !important; text-align: left !important; color: #2379c9 !important;');

            $('.listKotak').on('mouseleave', function() {
                $(this).css({
                    'background-color': 'rgba(212, 212, 212, 1)', 
                    'height': '180px',
                });


                $(`#listKotakIcon_${$(this).attr('id')}`).attr('style', 
                'color:#2379c9 !important;');

                $(`#listKotakTitle_${$(this).attr('id')}`).attr('style', 
                'font-size: 24px !important; font-weight: bolder !important; text-align: left !important; color: #2379c9 !important;');
            });
        });
        var swiper = new Swiper(".mySwiper", {
            autoplay: {
                delay: 5000,
            },
            effect: 'fade',
            fadeEffect: {
                crossFade: true
            },

            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
    </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">
                {{-- <h2 class="text-dark"><b>Kalender Agenda</b></h2> --}}
                <div id='calendar' class="fc-time"></div>
            </div>
        </div>
    </div>
</section>

@endsection