@extends('masterGuest')
@section('title', 'Beranda')
@push('script')
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
    <style>
        .slider-container {
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            width: 100%;
            margin:0px;
        }

        .slider {
            width: 100%;
            display: flex;
            margin: 0;
        }

        .slick-dots {
            bottom: 15px;
            margin: 0;
            padding: 0;
        }

        .slider img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }

        .slick-dots li button:before {
            font-size: 15px;
            color: blue;
            opacity: 1;
        }

        .slick-dots li.slick-active button:before {
            color: red;
            opacity: 1;
        }
    </style>
@endpush
@section('content')

    <div class="slider-container">
        <div class="slider">
            @foreach ($heading_slider as $slider)
                <div>
                    <img src="{{ asset('storage') }}/{{ $slider->image }}" class="img-fluid w-100 h-100 " alt="Image">
                </div>
            @endforeach
        </div>

    </div>

    <div class="container-fluid" style="background-color: #FE6C00;margin-top: -30;">
        <div class="col-12 news">
            <div class="row">
                <div class="col-2 news" style="background-color: #FF2424;width:160px;">
                    <h2 class="text-center bold">
                        Latest Post
                        <span></span>
                    </h2>
                </div>
                <div class="col-10 news-slider">
                    <marquee scrollamount="5" onmouseover="this.stop();" onmouseout="this.start();">
                        @foreach ($newsslide as $newest)
                            <a href="{{ url('berita') }}/{{ $newest->slug }}" style="color:white;text-decoration:none;"
                                class="px-3"><i class="fa fa-arrow-circle-right"></i> {{ $newest->title }}</a>
                        @endforeach
                    </marquee>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid pt-3" style="background-image: url('{{ asset('backdrop.png') }}');">
        <div class="container">
            <p style="font-weight: bold;font-size:22px;margin:0px;">Informasi Terkini Seputar Zhebotq-School</p>
            <p style="font-size:15px;" class="mb-3">Daftar indeks Berita Terbaru dari SMA-SMK PGRI 109 Tangerang</p>

            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-6 mb-2">
                        <div class="image-container1">
                            <a href="{{ url('berita') }}/{{ $head1->slug }}"><img src="{{ asset('storage') }}/{{ $head1->image }}" class="img-fluid" alt="Placeholder Image"></a>
                            <div class="title-overlay">
                                <a href="{{ url('berita') }}/{{ $head1->slug }}" class="m-0">{{ Str::limit($head1->title, 150) }} </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 row d-flex ">
                        <div class="col-md-6 mb-3">
                            <div class="image-container">
                                <a href="{{ url('berita') }}/{{ $head2->slug }}"><img src="{{ asset('storage') }}/{{ $head2->image }}" class="img-fluid"
                                    alt="Placeholder Image"></a>
                                <div class="title-overlay">
                                    <a href="{{ url('berita') }}/{{ $head2->slug }}" class="m-0">{{ Str::limit($head2->title, 70) }} </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="image-container">
                                <a href="{{ url('berita') }}/{{ $head3->slug }}"><img src="{{ asset('storage') }}/{{ $head3->image }}" class="img-fluid"
                                    alt="Placeholder Image"></a>
                                <div class="title-overlay">
                                    <a href="{{ url('berita') }}/{{ $head3->slug }}" class="m-0">{{ Str::limit($head3->title, 70) }} </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="image-container">
                                <a href="{{ url('berita') }}/{{ $head4->slug }}"><img src="{{ asset('storage') }}/{{ $head4->image }}" class="img-fluid"
                                    alt="Placeholder Image"></a>
                                <div class="title-overlay">
                                    <a href="{{ url('berita') }}/{{ $head4->slug }}" class="m-0">{{ Str::limit($head4->title, 70) }} </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="image-container">
                                <a href="{{ url('berita') }}/{{ $head5->slug }}"><img src="{{ asset('storage') }}/{{ $head5->image }}" class="img-fluid"
                                    alt="Placeholder Image"></a>
                                <div class="title-overlay">
                                    <a href="{{ url('berita') }}/{{ $head5->slug }}" class="m-0">{{ Str::limit($head5->title, 70) }} </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



@endsection
@push('javascript')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.slider').slick({
                infinite: true,
                slidesToShow: 1,
                slidesToScroll: 1,
                dots: true,
                autoplay: true,
                autoplaySpeed: 2000,
                cssEase: 'linear'
            });
        });
    </script>
@endpush