@extends('landing.layout.index')

@push('styles')
    <style>
        .timeline {
            height: 100%;
        }
        .school-wrapper{
            height:170px;
            border-radius: 20px;
            background-image: url('{{ asset('assets2/images/bg-sekolah.png') }}');
            background-repeat: no-repeat;
            background-size: auto 140px;
            background-position: -7px 37px;
            position: relative;
        }
        .school-wrapper h6, .school-wrapper h3{
            color:#fff;
            position: absolute;
            left:145px
        }
        .school-wrapper h6{
            top:90px;
            font-size: 16px;
            line-height:20px
        }
        .school-wrapper h3{
            top:30px;
            font-size: 55px;
            font-weight:bold
        }

        .display-3 {
            font-size: 1.3rem;
            line-height: 1.8rem;
            font-weight: normal;
        }
        .timeline {
            position: relative;
            padding: 24px 0;
        }
        .timeline:before {
            content: '';
            display: block;
            position: absolute;
            width: 2px;
            left: 0;
            bottom: 0;
            top: 0;
            background: #DCDCE9;
            z-index: 1;
        }
        .timeline .item {
            position: relative;
            margin-bottom: 50px;
        }
        .timeline .dot {
            width: 12px;
            height: 12px;
            border-radius: 100%;
            position: absolute;
            background: #A9ABAD;
            left: -5px;
            top: 4px;
            z-index: 10;
        }
        .timeline .content {
            padding-left: 20px;
        }


    </style>
@endpush

@section('content')

    <div class="wrapper dark-wrapper">
        <div class="rev_slider_wrapper fullscreen-container" style="height:100vh">
            <div id="slider" class="rev_slider fullscreenbanner" data-version="5.4.7">
                <ul>
                    <li data-transition="fade" data-thumb="">
                        <img src="{{ asset('assets2/images/bg-1.jpeg') }}" alt="" />
                        <div class="tp-caption font-weight-600 color-white tp-caption-1"
                             data-x="['left','left','left','center']"
                             data-y="middle"
                             data-hoffset="['50','50','30','0']"
                             data-voffset="['-90','-90','-90','-70']"
                             data-fontsize="['44','44','38','30']"
                             data-lineheight="['54','54','48','40']"
                             data-width="['500','500','400','340']"
                             data-textAlign="['left','left','left','center']"
                             data-whitespace="['normal','normal','normal','normal']"
                             data-frames='[{"delay":300,"speed":1200,"frame":"0","from":"y:50px;opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                             data-responsive="on"
                             data-responsive_offset="on" style="z-index: 9;">
                            Selamat Datang<br>di PPDB Online
                        </div>
                        <div class="tp-caption font-weight-400 color-white tp-caption-2"
                             data-x="['left','left','left','center']"
                             data-y="middle"
                             data-hoffset="['50','50','30','0']"
                             data-voffset="['80','80','30','45']"
                             data-fontsize="['23','23','19','18']"
                             data-lineheight="['36','36','29','28']"
                             data-width="['500','500','400','340']"
                             data-textAlign="['left','left','left','center']"
                             data-whitespace="['normal','normal','normal','normal']"
                             data-frames='[{"delay":600,"speed":1200,"frame":"0","from":"y:50px;opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                             data-responsive="on"
                             data-responsive_offset="on" style="z-index: 9;">
                            Aplikasi untuk calon peserta didik yang ingin mendaftar di SD dan SMP Kota Kediri, dengan aplikasi ini diharapkan dapat mempercepat dan lebih transparan dalam menentukan peserta didik yang lolos dalam seleksi.
                            <div class="d-flex " style="gap: 10px;">
                                <div class="d-flex flex-lg-row flex-column mt-3" style="gap: 20px;">
                                    <a href="{{ route('login', 'operator') }}" class="btn btn-primary">Login Operator</a>
                                </div>
                                <div class="d-flex flex-lg-row flex-column mt-3" style="gap: 20px;">
                                    <a target="_blank" href="https://wa.me/6285157630501?text=PPDB_2024%0a%0a" class="btn btn-success">CS PPDB</a>
                                </div>
                            </div>
                        </div>
                        <div class="tp-caption"
                             data-x="['right','right','right','right']"
                             data-y="['bottom','bottom','bottom','bottom']"
                             data-hoffset="['100','50','0','50']"
                             data-voffset="['0','0','0','0']"
                             data-frames='[{"delay":500,"speed":1200,"frame":"0","from":"y:50px;opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                             data-visibility="['on','on','on','off']"
                             data-width="none"
                             data-height="none"
                             data-type="image"
                             data-responsive_offset="on" style="z-index: 5;">
                            <img
                                data-lazyload="" src="{{ asset('img/student.png') }}"
                                data-ww="['500','500','500','500']"
                                data-hh="['auto','auto','auto','auto']" alt="" />
                        </div>
                    </li>
                </ul>
                <div class="tp-bannertimer tp-bottom"></div>
            </div>
        </div>
    </div>

{{--    <div class="wrapper bg-opacity-default">--}}
{{--        <div class="container">--}}
{{--            <div class="row">--}}
{{--                <div class="col-lg-5 align-self-end">--}}
{{--                    <div class="card" style="border-bottom: 0; border-radius: 20px 20px 0 0;">--}}
{{--                        <div class="card-body">--}}
{{--                            <h2 class="title-color color-gray">Cek Data Siswa</h2>--}}
{{--                            <h3 class="display-3 mb-0">Periksa data siswa apabila sudah terdaftarkan di database</h3>--}}
{{--                            <div class="space30"></div>--}}
{{--                            <div class="form-group custom-select-wrapper">--}}
{{--                                <select class="custom-select">--}}
{{--                                    <option value="nisn">Nomor Induk Siswa Nasional (NISN)</option>--}}
{{--                                    <option value="nama">Nama Siswa</option>--}}
{{--                                    <option value="nama_sekolah">Sekolah</option>--}}
{{--                                </select>--}}
{{--                            </div>--}}
{{--                            <div class="form-group">--}}
{{--                                <input type="text" class="form-control" />--}}
{{--                            </div>--}}
{{--                            <button class="btn btn-red" style="width:100%;border-radius: 0.5rem">Cari Siswa</button>--}}
{{--                            <p class="mt-3 mb-0">Belum Terdaftar ?</p>--}}
{{--                            <a class="btn btn-red text-white rounded w-100" href="{{ route('daftar') }}">Daftar Peserta PPDB</a>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                <div class="col-lg-7">--}}
{{--                    <div class="inner" style="padding-left:20px">--}}
{{--                        <div class="align-self-center">--}}
{{--                            <h2 class="title-color color-gray">Pilihan Sekolah</h2>--}}
{{--                            <h3 class="display-3 mb-0">Calon peserta dapat memilih sekolah berdasarkan jarak dan keinginan.</h3>--}}
{{--                            <div class="space30"></div>--}}
{{--                            <div class="row counter counter-s">--}}
{{--                                <div class="col-md-6">--}}
{{--                                    <div class="school-wrapper" style="background-color:#D21312;">--}}
{{--                                        <h3>{{ $jumlah_sd }}</h3>--}}
{{--                                        <h6>Sekolah Dasar<br>(SD)</h6>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                                <div class="col-md-6">--}}
{{--                                    <div class="school-wrapper" style="background-color:#00337C;">--}}
{{--                                        <h3>{{ $jumlah_smp }}</h3>--}}
{{--                                        <h6>Sekolah Menengah Pertama<br>(SMP)</h6>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}
{{--    <div class="wrapper inverse-text" style="background:#2c3e50">--}}
{{--        <div class="container">--}}
{{--            <div class="row">--}}
{{--                <div class="col-lg-5 align-self-center">--}}
{{--                    <div style="padding:50px">--}}
{{--                        <img src="{{ asset('assets2/images/concept/concept12.png') }}" style="width:100%">--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                <div class="col-lg-7">--}}
{{--                    <div class="timeline">--}}
{{--                        <div class="item" style="margin-bottom:40px">--}}
{{--                            <div class="content">--}}
{{--                                <h2 class="title-color color-white">Jadwal Pelaksanaan</h2>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        @foreach($list_tahapan as $tahapan)--}}
{{--                            <div class="item">--}}
{{--                                <div class="dot bg-primary"></div>--}}
{{--                                <div class="content">--}}
{{--                                    <h6 class="fs-15 mb-0 color-gray">{{ fulldate($tahapan->tanggal_awal) . ' ' . $tahapan->waktu_awal }} s/d {{ fulldate($tahapan->tanggal_akhir) . ' ' . $tahapan->waktu_akhir }}</h6>--}}
{{--                                    <h3 class="color-blue">{{ $tahapan->nama }}</h3>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        @endforeach--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}
{{--    <div class="wrapper">--}}
{{--        <div class="container inner">--}}
{{--            <div class="row">--}}
{{--                <div class="col-lg-5">--}}
{{--                    <img src="{{ asset('assets2/images/concept/concept23.png') }}" style="width:100%">--}}
{{--                </div>--}}
{{--                <div class="col-lg-7">--}}
{{--                    <h2 class="title-color color-gray text-center text-lg-left">Tahapan Pelaksanaan PPDB</h2>--}}
{{--                    <h3 class="display-3 text-center text-lg-left">Penerimaan Peserta Didik Baru Tahun {{ $periode_aktif->nama }}</h3>--}}
{{--                    <div class="space30"></div>--}}
{{--                    <div class="row">--}}
{{--                        <div class="col-md-6">--}}
{{--                            <div class="d-flex flex-row">--}}
{{--                                <div>--}}
{{--                                    <span class="icon icon-bg icon-bg-red color-red mr-25"><span class="number">1</span></span>--}}
{{--                                </div>--}}
{{--                                <div>--}}
{{--                                    <h5 class="color-red">Upload Dokumen</h5>--}}
{{--                                    <p>Upload dokumen kelengkapan pada kolom yang sudah disesiakan</p>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <div class="col-md-6">--}}
{{--                            <div class="d-flex flex-row">--}}
{{--                                <div>--}}
{{--                                    <span class="icon icon-bg icon-bg-red color-red mr-25"><span class="number">2</span></span>--}}
{{--                                </div>--}}
{{--                                <div>--}}
{{--                                    <h5 class="color-red">Pilih Sekolah Tujuan</h5>--}}
{{--                                    <p>Pilih sekolah dasar tujuan yang anda inginkan (Maksimal 5).</p>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <div class="space10 d-none d-md-block"></div>--}}
{{--                        <div class="col-md-6">--}}
{{--                            <div class="d-flex flex-row">--}}
{{--                                <div>--}}
{{--                                    <span class="icon icon-bg icon-bg-red color-red mr-25"><span class="number">3</span></span>--}}
{{--                                </div>--}}
{{--                                <div>--}}
{{--                                    <h5 class="color-red">Pastikan Pilihan Sekolah</h5>--}}
{{--                                    <p>Pastikan sekolah yang dipilih memiliki skor yang paling tinggi yang tersedia.</p>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <div class="col-md-6">--}}
{{--                            <div class="d-flex flex-row">--}}
{{--                                <div>--}}
{{--                                    <span class="icon icon-bg icon-bg-red color-red mr-25"><span class="number">4</span></span>--}}
{{--                                </div>--}}
{{--                                <div>--}}
{{--                                    <h5 class="color-red">Verifikasi Dokumen</h5>--}}
{{--                                    <p>Bawa berkas berkas dokumen ke sekolah pilihan pertama untuk diverifikasi oleh petugas.</p>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <div class="space10 d-none d-md-block"></div>--}}
{{--                        <div class="col-md-6">--}}
{{--                            <div class="d-flex flex-row">--}}
{{--                                <div>--}}
{{--                                    <span class="icon icon-bg icon-bg-red color-red mr-25"><span class="number">5</span></span>--}}
{{--                                </div>--}}
{{--                                <div>--}}
{{--                                    <h5 class="color-red">Pastikan Pilihan Sekolah</h5>--}}
{{--                                    <p>Pastikan sekolah yang dipilih memiliki skor yang paling tinggi yang tersedia.</p>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <div class="col-md-6">--}}
{{--                            <div class="d-flex flex-row">--}}
{{--                                <div>--}}
{{--                                    <span class="icon icon-bg icon-bg-red color-red mr-25"><span class="number">6</span></span>--}}
{{--                                </div>--}}
{{--                                <div>--}}
{{--                                    <h5 class="color-red">Verifikasi Dokumen</h5>--}}
{{--                                    <p>Bawa berkas berkas dokumen ke sekolah pilihan pertama untuk diverifikasi oleh petugas.</p>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}
    <div class="wrapper white-wrapper">
        <div class="container inner">
            <h2 class="title-color color-gray text-center">Berita Terkini</h2>
            <h3 class="display-3 text-center">Berita terkait ppdb online</h3>
            <div class="space40"></div>
            <div class="grid-view">
                <div class="carousel owl-carousel" data-margin="30" data-dots="true" data-autoplay="false" data-autoplay-timeout="5000" data-responsive='{"0":{"items": "1"}, "768":{"items": "3"}, "992":{"items": "4"}}'>
                    @foreach($latest_news as $news)
                        <div class="item">
                            <figure class="overlay overlay1 rounded mb-30">
                                <a href="{{ route('berita.detail', $news->slug) }}"><img src="{{ asset('storage/' . $news->gambar) }}" alt="" /></a>
                                <figcaption>
                                    <h5 class="from-top mb-0">Read More</h5>
                                </figcaption>
                            </figure>
                            <div class="meta mb-1"><span class="date"><i class="jam jam-clock"></i>{{ fulldate($news->tanggal) }}</span></div>
                            <h6 class="post-title">
                                <a href="{{ route('berita.detail', $news->slug) }}">{{ $news->judul }}</a>
                            </h6>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        @if(session()->has('error'))
            Swal.fire({
                icon: 'error',
                position: 'top',
                title: 'Peringatan!',
                text: '{{ session('error') }}'
            })
        @else
            Swal.fire({
                position: 'top',
                title: 'Pemberitahuan!',
                html: 'Pengumuman<br>28 Juni 2024 pukul 10:00<br>Online Tanpa Login<br>(Sesuai Halaman Hasil Seleksi Pada Jenjang PPDB)<br><br> Daftar Ulang<br>28 Juni 2024 pukul 10.00-14.00<br>29 Juni 2024 pukul 08.00-14.00<br>Offline (Sekolah Penerima)',
            })
        @endif

    </script>
@endpush