@extends('layouts.main')

@section('content')
    <div class="position-relative">
        <div class="shape overflow-hidden text-light">
            <svg viewBox="0 0 2880 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 48H1437.5H2880V0H2160C1442.5 52 720 0 720 0H0V48Z" fill="currentColor"></path>
            </svg>
        </div>
    </div>

    <section class="section bg-light">
        <div class="container">
            <h2 class="text-primary text-center mb-0">Agenda Kegiatan</h2>
            <p class="m-0 text-secondary text-center mb-5">Reservasi kegiatan sudah bisa dilakukan secara mandiri</p>
            <div class="row">
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <div id="calendar"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="position-relative">
        <div class="shape overflow-hidden text-footer">
            <svg viewBox="0 0 2880 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 48H1437.5H2880V0H2160C1442.5 52 720 0 720 0H0V48Z" fill="currentColor"></path>
            </svg>
        </div>
    </div>

    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-12 mb-0 mb-md-4 pb-0 pb-md-2">
                    <a href="#" class="logo-footer">
                        <img src="{{ asset('assets') }}/images/logo-dprd.png" height="60" alt="">
                    </a>
                    <p class="mt-4 mb-0">Jl. RE. Martadinata No.334 Kota Tasikmalaya, Provinsi Jawa Barat.</p>
                    <p class="mt-0">Telp. (0265) 313094</p>
                    <p class="mt-0"><a href="mailto:dprdkotatasikmalaya@gmail.com"
                            style="color: #adb5bd;">dprdkotatasikmalaya@gmail.com</a></p>
                    <ul class="list-unstyled social-icon foot-social-icon mb-0 mt-4">
                        <li class="list-inline-item"><a href="https://www.instagram.com/info.dprdkotatasikmalaya/"
                                class="rounded"><i data-feather="instagram" class="fea icon-sm fea-social"></i></a></li>
                        <li class="list-inline-item"><a href="https://twitter.com/DPRDKotaTasik" class="rounded"><i
                                    data-feather="twitter" class="fea icon-sm fea-social"></i></a></li>
                        <li class="list-inline-item"><a href="https://www.youtube.com/DPRDKotaTasikmalaya"
                                class="rounded"><i data-feather="youtube" class="fea icon-sm fea-social"></i></a></li>
                    </ul>
                </div>

                <div class="col-lg-2 col-md-4 col-12 mt-4 mt-sm-0 pt-2 pt-sm-0">
                    <h5 class="text-light footer-head">Company</h5>
                    <ul class="list-unstyled footer-list mt-4">
                        <li><a href="page-aboutus.html" class="text-foot"><i class="uil uil-angle-right-b me-1"></i> About
                                us</a></li>
                        <li><a href="page-services.html" class="text-foot"><i class="uil uil-angle-right-b me-1"></i>
                                Services</a></li>
                        <li><a href="page-team.html" class="text-foot"><i class="uil uil-angle-right-b me-1"></i> Team</a>
                        </li>
                    </ul>
                </div>

                <div class="col-lg-3 col-md-4 col-12 mt-4 mt-sm-0 pt-2 pt-sm-0">
                    <h5 class="text-light footer-head">Link Terkait</h5>
                    <ul class="list-unstyled footer-list mt-4">
                        <li><a href="https://dprd-tasikmalayakota.go.id/" class="text-foot"><i
                                    class="uil uil-angle-right-b me-1"></i> DPRD Kota Tasikmalaya</a></li>
                        <li><a href="https://jdih.tasikmalayakota.go.id/" class="text-foot"><i
                                    class="uil uil-angle-right-b me-1"></i> JDIH</a></li>
                    </ul>
                </div>

                <div class="col-lg-3 col-md-4 col-12 mt-4 mt-sm-0 pt-2 pt-sm-0">
                    <h5 class="text-light footer-head">Newsletter</h5>
                    <p class="mt-4">Sign up and receive the latest tips via email.</p>
                    <!-- <form>
                                                    <div class="row">
                                                        <div class="col-lg-12">
                                                            <div class="foot-subscribe mb-3">
                                                                <label class="form-label">Write your email <span class="text-danger">*</span></label>
                                                                <div class="form-icon position-relative">
                                                                    <i data-feather="mail" class="fea icon-sm icons"></i>
                                                                    <input type="email" name="email" id="emailsubscribe" class="form-control ps-5 rounded" placeholder="Your email : " required>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12">
                                                            <div class="d-grid">
                                                                <input type="submit" id="submitsubscribe" name="send" class="btn btn-soft-primary" value="Subscribe">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </form> -->
                </div>
            </div>
        </div>
    </footer>
    <footer class="footer footer-bar">
        <div class="container text-center">
            <div class="row align-items-center">
                <div class="col-sm-6">
                    <div class="text-sm-start">
                        <p class="mb-0">©
                            <script>
                                document.write(new Date().getFullYear())
                            </script> Sipermata. <a href="https://dprd-tasikmalayakota.go.id/"
                                target="_blank" class="text-reset">DPRD Kota Tasikmalaya</a>.
                        </p>
                    </div>
                </div>

            </div>
        </div>
    </footer>
    <a href="#" onclick="topFunction()" id="back-to-top" class="btn btn-icon btn-primary back-to-top"><i
            data-feather="arrow-up" class="icons"></i></a>

    <div class="modal fade" id="calendarModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body position-relative">
                    <span class="position-absolute top-0 start-100 translate-middle p-2 rounded-circle btn-close"
                        style="cursor: pointer;" data-bs-dismiss="modal" aria-label="Close">
                        <span class="visually-hidden">Close</span>
                    </span>
                    <div class="row">
                        <div class="col">
                            <table class="table table-borderless m-0">
                                <tr>
                                    <td class="pe-0">Nama Lembaga</td>
                                    <td class="pe-0">:</td>
                                    <td class="ps-0" id="institution"></td>
                                </tr>
                                <tr>
                                    <td class="pe-0">Topik</td>
                                    <td class="pe-0">:</td>
                                    <td class="ps-0" id="name"></td>
                                </tr>
                                <tr>
                                    <td class="pe-0">Mulai</td>
                                    <td class="pe-0">:</td>
                                    <td class="ps-0" id="timestart"></td>
                                </tr>
                                <tr>
                                    <td class="pe-0">Sifat</td>
                                    <td class="pe-0">:</td>
                                    <td class="ps-0" id="characteristic"></td>
                                </tr>
                                <tr>
                                    <td class="pe-0">Lokasi</td>
                                    <td class="pe-0">:</td>
                                    <td class="ps-0" id="place"></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/locales-all.min.js"></script>
    <script>
        const myModal = new bootstrap.Modal(document.getElementById('calendarModal'), {});

        // document.addEventListener('DOMContentLoaded', function() {
        //     const events = json_encode($events) ?>;
        //     events.map((val, i) => {
        //         val.title = val.name;
        //         val.start = val.datetime;
        //         val.end = val.datetime.split(' ')[0];
        //     });

        //     const calendarEl = document.getElementById('calendar');
        //     const calendar = new FullCalendar.Calendar(calendarEl, {
        //         themeSystem: 'bootstrap5',
        //         headerToolbar: {
        //             left: 'prev,next',
        //             center: 'title',
        //             right: 'listWeek,listYear,dayGridMonth',
        //         },
        //         locale: 'id',
        //         initialView: 'dayGridMonth',
        //         views: {
        //             listWeek: {
        //                 buttonText: 'Minggu'
        //             },
        //             listYear: {
        //                 buttonText: 'Tahun'
        //             },
        //             dayGridMonth: {
        //                 buttonText: 'Kalendar'
        //             }
        //         },
        //         events: events,
        //         eventTimeFormat: {
        //             hour: '2-digit',
        //             hour12: false
        //         },
        //         eventColor: '#2f55d4',
        //         eventBackgroundColor: '#2f55d4',
        //         eventClick: function(info) {
        //             let date = new Date(info.event.start);
        //             document.getElementById('institution').textContent = info.event.extendedProps
        //                 .institution;
        //             document.getElementById('characteristic').textContent = info.event.extendedProps
        //                 .characteristic;
        //             document.getElementById('place').textContent = info.event.extendedProps.place;
        //             document.getElementById('name').textContent = info.event.title;
        //             document.getElementById('timestart').textContent = date.getHours() + ':' + (date
        //                 .getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
        //             myModal.show();
        //         }
        //     });

        //     calendar.render();

        //     const listWeekButton = document.querySelector('.fc-listWeek-button');
        //     const listYearButton = document.querySelector('.fc-listYear-button');
        //     const dayGridMonthButton = document.querySelector('.fc-dayGridMonth-button');
        //     const nextButton = document.querySelector('.fc-next-button');
        //     const prevButton = document.querySelector('.fc-prev-button');

        //     listWeekButton.addEventListener('click', (e) => {
        //         setStyleOfToolbarCalendar();
        //     });
        //     listYearButton.addEventListener('click', (e) => {
        //         setStyleOfToolbarCalendar();
        //     });
        //     dayGridMonthButton.addEventListener('click', (e) => {
        //         setStyleOfToolbarCalendar();
        //     });
        //     nextButton.addEventListener('click', (e) => {
        //         setStyleOfToolbarCalendar();
        //     });
        //     prevButton.addEventListener('click', (e) => {
        //         setStyleOfToolbarCalendar();
        //     });

        //     setStyleOfToolbarCalendar();

        //     function setStyleOfToolbarCalendar() {
        //         listWeekButton.classList.remove('btn-primary');
        //         listWeekButton.classList.add('btn-outline-primary');
        //         listYearButton.classList.remove('btn-primary');
        //         listYearButton.classList.add('btn-outline-primary');
        //         dayGridMonthButton.classList.remove('btn-primary');
        //         dayGridMonthButton.classList.add('btn-outline-primary');
        //         nextButton.classList.remove('btn-primary');
        //         nextButton.classList.add('btn-outline-primary');
        //         prevButton.classList.remove('btn-primary');
        //         prevButton.classList.add('btn-outline-primary');
        //     }
        // });
    </script>
@endpush