@extends('layouts.app')
@section('title', 'Permohonan')
@section('permohonan', 'm-menu__item--active')
@section('css')

<link href="{{ asset('assets/vendors/custom/fullcalendar/main.css') }}" rel='stylesheet' />
<style>
    .fc-list-day-text {
        color: white !important;
    }
    .fc-list-day-side-text {
        color: white !important;
    }
</style>
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="m-portlet m-portlet--mobile">
                <div class="m-portlet__body">
                    <div class="m-portlet__head-caption">
                        <div class="m-portlet__head-title">
                            <h3 class="m-portlet__head-text">Paparan Jadual Lokasi  {{ App\IPR::where('name', 'sml')->pluck('display_name')[0] }}
                        </div>
                    </div>
                    <div class="p-4">
                        <div class="card">
                            <div class="card-body p-0">
                                <div id="calendar"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    {{-- Penerangan Program & Jadual Lokasi SML --}}
    <div id="modal-view-event" class="modal modal-top fade calendar-modal">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="m-form_section m-form_section--first">
                        <h4 style="color: #f4516c" class="modal-title"><span class="event-icon"></span><span class="event-title"></span></h4>
                        <label strong class="event-time_start"></label>
                        <label strong>-</label>
                        <label strong class="event-time_end"></label>
                        <hr>
                            <div class="form-group row">
                                <div>
                                    <span style="centre" class="event-body"></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-12">
                                    <b><label>Alamat Program : </label></b>
                                    <span class="event-address"></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-12">
                                    <b><label>Keterangan Program : </label></b>
                                    <span class="event-description"></span>
                                </div>
                            </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Kembali</button>
                </div>
            </div>
        </div>
    </div>
    {{-- End Penerangan Program & Jadual Lokasi SML --}}
@endsection

@section('js')
    <script src="{{ asset('assets/vendors/custom/fullcalendar/main.js') }}"></script>
    <script src="{{ asset('assets/vendors/custom/fullcalendar/core/locales/ms.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

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

            var calendar = new FullCalendar.Calendar(calendarEl, {
                locale: 'ms',
                timeZone: 'UTC',
                themeSystem: 'bootstrap',
                businessHours: true,
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
                },
                weekNumbers: true,
                dayMaxEvents: true, // allow "more" link when too many events
                events: {!! json_encode($event_list) !!},
                eventClick: function(info) {
                    $('.event-icon').html("<i class='fa fa-"+info.event.extendedProps.icon+"'></i>");
                    $('.event-title').html(info.event.title);
                    $('.event-body').html('<td> - <img src="' + info.event.extendedProps.banner + '" alt="" srcset="" width="528" height="304" style="centre"</img></td>');
                    $('.event-address').html(info.event._def.extendedProps.address);
                    // $('.event-banner').html(info.event._def.extendedProps.banner);
                    $('.event-description').html(info.event._def.extendedProps.description);
                    $('.event-time_start').html(moment.utc(info.event._instance.range.start.toUTCString()).format('DD/MM/YYYY hh:mm A'));
                    $('.event-time_end').html(moment.utc(info.event._instance.range.end.toUTCString()).format('DD/MM/YYYY hh:mm A'));
                    
                    $('.eventUrl').attr('href',info.event.url);
                    $('#modal-view-event').modal();

                    info.el.style.borderColor = 'green';
                },
            });

            calendar.render();
        });

        function submitForm() {
            $.confirm({
                title: 'Simpan Maklumat?',
                content: 'Anda pasti untuk teruskan?',
                icon: 'fa fa-spinner fa-spin',
                type: 'green',
                buttons: {
                    hantar: {
                        btnClass: 'btn-green',
                        action: function() {
                        $('#add-event').submit();
                        }
                    },
                    kembali: {
                        btnClass: 'btn-red',
                        action: function() {}
                    }
                }
            });
        }

        function submitLocation() {
            $.confirm({
                title: 'Simpan Maklumat?',
                content: 'Anda pasti untuk teruskan?',
                icon: 'fa fa-spinner fa-spin',
                type: 'green',
                buttons: {
                    hantar: {
                        btnClass: 'btn-green',
                        action: function() {
                        $('#add-location').submit();
                        }
                    },
                    kembali: {
                        btnClass: 'btn-red',
                        action: function() {}
                    }
                }
            });
        }

        var start = moment("2019-01-01");
        var end = moment();

        String.prototype.capitalize = function() {
            return this.charAt(0).toUpperCase() + this.slice(1);
        }

        $('.modal').on("hidden.bs.modal", function (e) {
            if($('.modal:visible').length)
            {
                $('.modal-backdrop').first().css('z-index', parseInt($('.modal:visible').last().css('z-index')) - 10);
                $('body').addClass('modal-open');
            }
        }).on("show.bs.modal", function (e) {
            if($('.modal:visible').length)
            {
                $('.modal-backdrop.in').first().css('z-index', parseInt($('.modal:visible').last().css('z-index')) + 10);
                $(this).css('z-index', parseInt($('.modal-backdrop.in').first().css('z-index')) + 10);
            }
        });
    </script>
@endsection