@extends('layouts-auth.main')

@section('extra-style-auth')
    <style>
        .fc-event-time, .fc-event-title {
            color: white;
        }

        .fc-daygrid-event-dot {
            display: none;
        }

        .fc-month-view span.fc-title{
         white-space: normal;
   }
    </style>
@endsection

@section('content-auth')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-12 col-sm-12">
                <div class="card">
                    <div class="card-body p-4">
                        <div class="p-2 mb-4">
                            <h5 class="mb-5 text-center">Jadwal Penggunaan Ruang Rapat</h5>
                            <div id='calendar' class="col-xl-12 col-lg-12 col-md-12 mt-4 mt-md-0"></div>
                        </div>
                        <div class="p-2">
                            <div class="table-responsive">
                                <table class="table table-striped table-prr" style="border-bottom:1px; width: 100%;">
                                    <thead class="bg-white">
                                        <tr class="text-center">
                                            <th width="5%" class="text-center">No</th>
                                            <th class="text-center">Ruang Rapat</th>
                                            <th class="text-center">Tanggal</th>
                                            <th class="text-center">Jam</th>
                                            <th class="text-center">Bidang</th>
                                            <th class="text-center">Keterangan</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('penggunaan-ruang-rapat.modal-detail')
@endsection

@section('extra-script-auth')
    <script type="text/javascript">
        const datas = "{{ $datas }}";
        const jsonString = datas.replace(/&quot;/g, '"');
        const events = JSON.parse(jsonString);
        
        $(document).ready(function() {
            // getDataJadwal();
            getDataJadwalTabel();
            $(".fc-daygrid-day-number").click(function(){return false;});
            
        });

        // function getDataJadwal() {
        //     $.ajax({
        //         url: "{{ route('penggunaan_ruang_rapat.get_data_jadwal_kalender') }}",
        //         type: "get",
        //         success: function(response) {
        //             if (response.status == "berhasil") {
        //                 console.log(response);
        //                 calender();
        //             } else if (response.status == "gagal") {
        //                 Swal.fire({
        //                     title: "Gagal",
        //                     text: "Data gagal diupdate",
        //                     icon: "error",
        //                     showConfirmButton: true
        //                 });
        //                 console.log(response.message);
        //             }
        //         },
        //         error: function(request, status, error) {
        //             // window.location.href = "{{ url('/login') }}";
        //             Swal.fire({
        //                 title: "Error",
        //                 text: "Terjadi kesalahan",
        //                 icon: "error",
        //                 showConfirmButton: true
        //             });
        //             console.log(request.responseText);
        //         }
        //     });
        // }

        // console.log(datas);
        

        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                headerToolbar: {
                    left: 'prev,next today',
                    // center: 'title',
                    right: 'title'
                    // ,timeGridWeek,timeGridDay,listMonth
                },
                initialDate: getDateNow(),
                navLinks: true,
                businessHours: true,
                editable: false,
                selectable: true,
                selectMirror: true,
                select: function(arg) {
                    console.log(arg);
                    var title = prompt('Event Title:');
                    if (title) {
                        calendar.addEvent({
                            title: title,
                            start: arg.start,
                            end: arg.end,
                            allDay: arg.allDay
                        })
                    }
                    calendar.unselect()
                },
                dayMaxEvents: true,
                displayEventEnd: true,
                locale: 'id',
                timeZone: 'Asia/Jakarta',
                eventDisplay: 'block',
                events: events,
                eventTimeFormat: {
                    hour: '2-digit',
                    minute: '2-digit',
                    hourCycle: 'h23'
                },
                eventClick:  function(arg) {
                    modalDetail(arg.event);
                }
            });

            calendar.render();
        });

        function getDataJadwalTabel() {
            $('.table-prr').DataTable().destroy();
            $('.table-prr').DataTable({
                responsive: true,
                serverSide: true,
                // "processing":true,
                // bAutoWidth: false,
                // scrollX: true,
                // scrollY: "500px",
                // scrollCollapse: true,
                // bLengthChange: true,
                // bPaginate: true,
                // // bFilter: true,
                // bInfo: true,
                // "searching": true,
                searching: false,
                // dom:'lBfrtip',
                ajax: {
                    url: '{{ route("penggunaan_ruang_rapat.get_data_jadwal_tabel") }}',
                    type: "get",
                    data: {
                        "_token": "{{ csrf_token() }}",
                    }
                },
                columns: [
                    { 
                        data: 'DT_RowIndex', 
                        name: 'DT_RowIndex', 
                        orderable: false, 
                        searchable: false 
                    },
                    {
                        data: 'ruang',
                        name: 'ruang',
                        class: 'text-left'
                    },
                    {
                        data: 'tanggal',
                        name: 'tanggal',
                        class: 'text-left'
                    },
                    {
                        data: 'jam',
                        name: 'jam',
                        class: 'text-left'
                    },
                    {
                        data: 'bidang',
                        name: 'bidang',
                        class: 'text-left'
                    },
                    {
                        data: 'keterangan',
                        name: 'keterangan',
                        class: 'text-left'
                    }
                ],
                pageLength: 10,
                lengthMenu: [
                    [10, 20, 50, -1],
                    [10, 20, 50, 'All']
                ],
                order: [[1, 'asc']]
            });
        //   "responsive": false, "lengthChange": false, "autoWidth": false,
        //   "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
                // }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
        }

        function modalDetail(items) {
            $(".prr-bidang-detail").val(items.extendedProps.bidang);
            $(".prr-ruang-detail").val(items.title);
            $(".prr-tanggal-detail").val(items.extendedProps.tanggal);
            $(".prr-jam-detail").val(items.extendedProps.jam);
            $(".prr-keterangan-detail").text(items.extendedProps.keterangan);

            $(".modal-prr-detail").modal("show");
        }
    </script>
@endsection