@extends('landing.tk.layout')

@section('title')
    Home
@endsection

@section('content')
    <div class="card shadow-sm">
        <div class="card-body p-lg-15">
            <div class="mb-13">
{{--                <img src="{{ asset('tahapan_ppdb.jpeg') }}" alt="" class="img-fluid">--}}

                <div class="mb-10">
                    <h4 class="fs-2x text-gray-800 w-bolder mb-6">Tahapan PPDB</h4>
                    <p class="fw-semibold fs-4 text-gray-600 mb-2">Waktu yang dijadikan acuan adalah waktu server</p>
                </div>
                <table class="table table-borderless table-sm">
                    <thead>
                    <tr class="fw-bolder bg-secondary">
                        <th width="300px" class="ps-3 rounded-start">Jalur</th>
                        <th width="150px"  class="px-3">Tahapan</th>
                        <th class="px-3 rounded-end">Tanggal</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td rowspan="3" class="ps-3">Afirmasi</td>
                        <td class="px-3">Pendaftaran</td>
                        <td class="px-3">27 Mei 2024 pukul 00:00 - 28 Mei 2024 pukul 14:00</td>
                    </tr>
                    <tr>
                        <td class="px-3">Pengumuman</td>
                        <td class="px-3">31 Mei 2024 pukul 10:00</td>
                    </tr>
                    <tr>
                        <td class="px-3">Daftar Ulang</td>
                        <td class="px-3">31 Mei pukul 08:00 dan 3 Juni 2024 pukul 14:00</td>
                    </tr>
                    <tr>
                        <td rowspan="4" class="ps-3">Inklusi</td>
                        <td class="px-3">Pendaftaran</td>
                        <td class="px-3">27 - 29 Mei 2024, pukul 00:00 - 14:00</td>
                    </tr>
                    <tr>
                        <td class="px-3">Assesmen</td>
                        <td class="px-3">30 Mei pukul 08:00 - 7 Juni 2024 pukul 14:00</td>
                    </tr>
                    <tr>
                        <td class="px-3">Pengumuman</td>
                        <td class="px-3">10 Juni 2024 pukul 10:00</td>
                    </tr>
                    <tr>
                        <td class="px-3">Daftar Ulang</td>
                        <td class="px-3">10 Juni pukul 08:00 - 12 Juni 2024 pukul 16:00</td>
                    </tr>
                    <tr>
                        <td rowspan="3" class="ps-3">Zonasi</td>
                        <td class="px-3">Pendaftaran</td>
                        <td class="px-3">24 Juni 2024 pukul 00:00 - 26 Juni 2024 pukul 14:00</td>
                    </tr>
                    <tr>
                        <td class="px-3">Pengumuman</td>
                        <td class="px-3">28 Juni 2024 pukul 10:00</td>
                    </tr>
                    <tr>
                        <td class="px-3">Daftar Ulang</td>
                        <td class="px-3">28 Mei 2024 pukul 08:00 - 29 Juni 2024 pukul 16:00</td>
                    </tr>
                    </tbody>
                </table>
{{--                @foreach($list_tahapan as $key => $tahapan)--}}
{{--                    <h3>Jalur {{ $tahapan['jalur'] }}</h3>--}}
{{--                    <div class="accordion accordion-icon-toggle" id="kt_accordion_{{ $key }}">--}}
{{--                        @foreach($tahapan['tahapan'] as $key2 => $tahapan)--}}
{{--                            <div class="mb-5">--}}
{{--                                <div class="accordion-header py-3 d-flex" data-bs-toggle="collapse" data-bs-target="#kt_accordion_item_{{ $key2 }}">--}}
{{--                                    <span class="accordion-icon"><span class="svg-icon svg-icon-muted fs-3"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.5" d="M9.63433 11.4343L5.45001 7.25C5.0358 6.83579 5.0358 6.16421 5.45001 5.75C5.86423 5.33579 6.5358 5.33579 6.95001 5.75L12.4929 11.2929C12.8834 11.6834 12.8834 12.3166 12.4929 12.7071L6.95001 18.25C6.5358 18.6642 5.86423 18.6642 5.45001 18.25C5.0358 17.8358 5.0358 17.1642 5.45001 16.75L9.63433 12.5657C9.94675 12.2533 9.94675 11.7467 9.63433 11.4343Z" fill="currentColor"/><path d="M15.6343 11.4343L11.45 7.25C11.0358 6.83579 11.0358 6.16421 11.45 5.75C11.8642 5.33579 12.5358 5.33579 12.95 5.75L18.4929 11.2929C18.8834 11.6834 18.8834 12.3166 18.4929 12.7071L12.95 18.25C12.5358 18.6642 11.8642 18.6642 11.45 18.25C11.0358 17.8358 11.0358 17.1642 11.45 16.75L15.6343 12.5657C15.9467 12.2533 15.9467 11.7467 15.6343 11.4343Z" fill="currentColor"/></svg></span></span>--}}
{{--                                    <h3 class="fs-4 fw-semibold mb-0 ms-4">{{ $tahapan->nama }}</h3>--}}
{{--                                </div>--}}
{{--                                <div id="kt_accordion_item_{{ $key2 }}" class="fs-6 collapse show ps-10" data-bs-parent="#kt_accordion">--}}
{{--                                    <p>{{ format_date($tahapan->tanggal_awal) }}, pukul {{ $tahapan->waktu_awal }} @if($tahapan->nama != 'Pengumuman') s/d {{ format_date($tahapan->tanggal_akhir) }}, pukul {{ $tahapan->waktu_akhir }} @endif</p>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        @endforeach--}}
{{--                    </div>--}}
{{--                @endforeach--}}
            </div>
        </div>
    </div>

    <div class="card shadow-sm mt-6">
        <div class="card-body p-lg-15">
            <div class="mb-13">
                <div class="mb-15">
                    <h4 class="fs-2x text-gray-800 w-bolder mb-6">Frequesntly Asked Questions</h4>
                    <p class="fw-semibold fs-4 text-gray-600 mb-2">
                        Hal-hal yang paling sering ditanyakan terkait PPDB Online. Apabila hal yang ingin kamu tanyakan tidak ada pada FAQ dibawah ini, dapat anda tanyakan langsung ke Dinas Pendidikan Kota Kediri
                    </p>
                </div>

                <div class="accordion accordion-icon-toggle" id="kt_accordion">
                    @foreach($faqs as $key2 => $faq)
                        <div class="mb-5">
                            <div class="accordion-header py-3 d-flex {{ $key2 > 0 ? 'collapsed' : '' }}" data-bs-toggle="collapse" data-bs-target="#kt_accordion_item_{{ $key2 }}">
                                <span class="accordion-icon"><span class="svg-icon svg-icon-muted fs-3"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.5" d="M9.63433 11.4343L5.45001 7.25C5.0358 6.83579 5.0358 6.16421 5.45001 5.75C5.86423 5.33579 6.5358 5.33579 6.95001 5.75L12.4929 11.2929C12.8834 11.6834 12.8834 12.3166 12.4929 12.7071L6.95001 18.25C6.5358 18.6642 5.86423 18.6642 5.45001 18.25C5.0358 17.8358 5.0358 17.1642 5.45001 16.75L9.63433 12.5657C9.94675 12.2533 9.94675 11.7467 9.63433 11.4343Z" fill="currentColor"/><path d="M15.6343 11.4343L11.45 7.25C11.0358 6.83579 11.0358 6.16421 11.45 5.75C11.8642 5.33579 12.5358 5.33579 12.95 5.75L18.4929 11.2929C18.8834 11.6834 18.8834 12.3166 18.4929 12.7071L12.95 18.25C12.5358 18.6642 11.8642 18.6642 11.45 18.25C11.0358 17.8358 11.0358 17.1642 11.45 16.75L15.6343 12.5657C15.9467 12.2533 15.9467 11.7467 15.6343 11.4343Z" fill="currentColor"/></svg></span></span>
                                <h3 class="fs-4 fw-semibold mb-0 ms-4">{{ $faq->pertanyaan }}</h3>
                            </div>
                            <div id="kt_accordion_item_{{ $key2 }}" class="fs-6 collapse {{ $key2 == 0 ? 'show' : '' }} ps-10" data-bs-parent="#kt_accordion">
                                <p>{!! str_replace(PHP_EOL, '<br>', $faq->jawaban) !!}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endsection


@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        // Swal.fire({
        //     position: 'top',
        //     title: 'Pemberitahuan!',
        //     html: 'Daftar Ulang PPDB Jenjang TK Jalur Zonasi Ke <br><b>Sekolah Penerima</b> pada Tanggal <br><b>3 Juli 2024 s/d 4 Juli 2024<br>Pukul 08.00-13.00</b>',
        // })
    </script>
@endpush