@extends('template')

@section('content')
    @push('swipper')
    {{-- swiper --}}
    {{-- <script src="{{ url('https://cdn.jsdelivr.net/npm/swiper@10/swiper-element-bundle.min.js') }}"></script> --}}
    <script src="{{ asset('js/swiper-slider.js') }}"></script>
    {{-- swiper --}}

    @endpush
    @push('calendar')
        {{-- fullcalendar --}}
        <link rel="stylesheet" href="{{ asset('assets/extensions/Kalendar/fullcalendar.css') }}">
        <script src="{{ asset('assets/extensions/Kalendar/index.global.min.js') }}"></script>
        {{-- fullcalendar --}}

        {{-- script --}}
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                var event = @json($eventCalendar);

                var calendarEl = document.getElementById('calendar');
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    initialView: 'dayGridMonth'
                });
                if (Array.isArray(event) && event.length > 0) {
                    event.map(function(event) {
                        var endDate = new Date(event.tanggal_berakhir);
                        endDate.setDate(endDate.getDate() + 1);

                        calendar.addEvent({
                            title: event.nama,
                            start: event.tanggal_mulai,
                            end: endDate,
                            allDay: true,
                            backgroundColor: '#333',
                            borderColor: '#fff',


                        });
                        calendar.render();
                    });
                }



            });
        </script>
    @endpush
    @php
        use Carbon\Carbon;
    @endphp
    <style>
        .darken-video {
    filter: brightness(50%); /* Adjust the percentage to control the darkness */
}
    </style>

<div id="videobackground" class="mb-5" >
    <div class="swiper mySwipey">
        <div class="swiper-wrapper">
            @foreach($video_background as $item)
            <div class="swiper-slide">
                    <div class="h-screen">
                        <video style="object-fit: cover !important; width: 100%; height: 100%;" class="darken-video" muted autoplay playsinline src="{{asset('video/videobackground/'.$item->video)}}"></video>
                    </div>
                </div>
                @endforeach
            <div class="slide-captions container bigger" style="max-width: 700px"></div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </div>
    <div class="container  mb-5">
        <section class="row " >
            <div class="col-lg-7 col">
                
                <div class="swiper mySwiper bigger">
                    <div class="swiper-wrapper "style="position: relative!important;">
                        @foreach ($pengumuman as $item)
                            <div class="swiper-slide "  >
                                @if(isset($item->link_yt))
                                <div>
                                    @php
                                    if ($item->link_yt != '') {

                                        $link = $item->link_yt;

                                        $video_id = explode("?v=", $link);

                                        $video_id = $video_id[1];

                                        $id_yt = explode("&", $video_id);

                                        $id_yt = $id_yt[0];

                                       

                                    } else {

                                    $data['id_yt'] = "";

                                    }
                                    @endphp
                                    <iframe   src="https://www.youtube.com/embed/{{ $id_yt }}" muted title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" style=" width:100%;height:500px;  border-radius:15px; "></iframe>

                                </div>
                                @else
                                <div>
                                    <a  href="{{ $item->link }}" target="_blank">
                                        
                                        <img class=" w-100 " style=" min-height:500px; max-height:500px; border-radius:15px;object-fit:cover;"
                                        src="{{ asset('images/pengumuman/' . $item->photo) }}" alt="">
                                    </a>
                                </div>
                                @endif
                            </div>
                            @endforeach
                           
                    </div>
                    {{-- <div class="slide-captions text-uppercase">

                    </div> --}}
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
            </div>
            <div class="col-lg-5 col-12 m-3 m-lg-0">
                @foreach ($banner as $item)
                    <img src="{{ asset('images/banner/' . $item->photo) }}" alt="..." class="h-100 w-75"
                        style="object-fit: cover">
                @endforeach
            </div>
        </section>
        
    </div>
    <div class=" py-5 " style="background-color:black;background: rgba(25, 25, 25, .10);">
        <div class="container hidden">
            <div class="border-bottom border-danger mb-5 "style="width:fit-content;border-width:2px!important;">
                <h1>Berita Terkini</h1>
            </div>
        </div>


        <section class="row container m-auto hidden" style=" margin-top:75px;">
            @if ($berita_terbaru)
                <a style="text-decoration: none;"
                    href="{{ route('beritaDetail', Crypt::encryptString($berita_terbaru->id)) }}"
                    class="col-lg-7 link big">
                    <img src="{{ asset('images/berita/' . $berita_terbaru->photo) }}" class="img-fluid "
                        style="border-radius: 20px;" alt="Responsive image">
                    <div class="my-3">
                        <h5>{{ $berita_terbaru->title }}</h5>
                        <p class="text-secondary"><i
                                class="bi bi-calendar-week mr-2"></i>{{ Carbon::parse($berita_terbaru->tanggal)->formatLocalized('%d %b %Y') }}
                        </p>
                    </div>
                </a>
            @else
                <div class="col-lg-7">
                    <img src="{{ asset('assets/images/samples/origami.jpg') }}" class="img-fluid "
                        style="border-radius: 20px;" alt="Responsive image">
                    <div class="my-3">
                        <h5>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis officia assumenda culpa
                            facere, atque omnis veritatis magni error eos. Excepturi fuga modi quisquam aut quas vitae
                            suscipit earum vero cupiditate.</h5>
                        <p class="text-secondary"><i class="bi bi-calendar-week mr-2"></i>17 Agustus 2023
                        </p>
                    </div>
                </div>
            @endif
            <div class="col">
                @foreach ($berita as $item)
                    <a style="text-decoration: none;" href="{{ route('beritaDetail', Crypt::encryptString($item->id)) }}"
                        class="d-flex bigger card flex-row p-2 mb-2 align-items-center link">
                        <img src="{{ asset('images/berita/' . $item->photo) }}"style=" width:85px; height:85px;object-fit:cover;"
                            alt="..." class="img-thumbnail mr-3 ">
                        <div>
                            <p>{{{ Str::words(strip_tags($item->title), 8, ' ...') }}}</p>
                            <p style="text-decoration: none;" class="text-secondary"><i
                                    class="bi bi-calendar-week mr-2"></i>{{ Carbon::parse($item->tanggal)->formatLocalized('%d %b %Y') }}
                            </p>
                        </div>
                    </a>
                @endforeach


                <a href="{{ route('berita') }}" class="link h5"> Berita Lainnya ..</a>


            </div>


            <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
        </section>
        


    </div>
    <section class="hidden">
            <div class="container my-5">
                <div class="border-bottom border-danger my-3 "style="width:fit-content;border-width:2px!important;">
                    <h1>Event</h1>
                </div>
                <div class=" row">
                    <div class="row col-lg-7 col">
                        @foreach ($event as $item)
                            <a href="{{ $item->link }}" target="_blank" class="d-flex m-3 col-lg-5 col link bigger">
                                <img src="{{ asset('images/event/' . $item->photo) }}" class="img-fluid "
                                    style=" width:65px; height:65px;object-fit:cover;"alt="Responsive image">
                                <div class="mx-3">
                                    <h5>{{ $item->nama }}</h5>
                                    {{-- <p class="text-secondary"><i
                                            class="bi bi-calendar-week mr-2"></i>{{ Carbon::parse($item->tanggal)->formatLocalized('%d %b %Y') }}
                                    </p> --}}

                                </div>
                            </a>
                        @endforeach


                    </div>
                    <div class="col-lg-5  center col row">

                        <div id='calendar' style="background-color:white!important;"></div>
                    </div>
                </div>

                


            </div>
        </section>
 {{-- <script>
    document.addEventListener("DOMContentLoaded", function() {
            var youtubeVideo = document.getElementById("youtubeVideo");

            setTimeout(function() {
                if (youtubeVideo.contentWindow) {
                    youtubeVideo.contentWindow.postMessage(
                        '{"event":"command","func":"playVideo","args":""}', '*');
                }
            }, 1000);
        });
 </script> --}}
    {{-- script --}}
@endsection