@extends('layouts.app')

@section('title', 'Permohonan '.strtoupper($ipr->name))
@section('jadual', 'm-menu__item--active')
@section($cluster->name, 'm-menu__item--active')
@section($ipr->name, 'm-menu__item--active')

@section('css')

<link href="{{ asset('assets/vendors/custom/fullcalendar/main.css') }}" rel='stylesheet' />
<style>
    .image-upload-footer p{
	    display: inline
    }
    .image-upload  input[type=file]{
        display: none;
    }
    .image-upload label{
        margin-bottom: 0;
    }
    .image-upload img{
        cursor: pointer;
    }
    .profileback .deleteThis{
        position: absolute;
        top: 6px;
        right: 21px;
        padding: 0;
    }
    .deleteThis span{
        color: #fff
    }
    .image-upload-footer{
        background-color: rgba(34, 34, 34, 0.87);
        margin-top: -6px;
        padding: 4px 10px;
        width: 350px;
        margin-left: 256px;
    }
    .image-upload-footer button{
        padding: 0px 5px;
        border-radius: 100%;
        margin-left: 15px;
    }
    .image-upload-footer button span,.image-upload-footer p{
        color: #fff ;
    }
    .center {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
    }
    .fc-list-day-text {
        color: white !important;
    }
    .fc-list-day-side-text {
        color: white !important;
    }
</style>
@endsection

@section('content')
@role(['super_admin','principal_admin', 'admin'])
    @if($user->hasRole('super_admin') || $user->hasRole('principal_admin') || ($user->hasRole('admin') && $user->ipr_id == $ipr->id))
        <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">Pendaftaran Jadual Lokasi {{ $ipr->display_name }}
                            </div>
                        </div>
                        <div class="input-group justify-content-end mb-3">
                            @if($user->hasRole('super_admin') || $user->hasRole('principal_admin') || $is_permission_own || $is_permission_all)
                                <a href="#" id="export_file" onclick="exportFile();return false;" class="btn btn-info m-btn m-btn--custom m-btn--icon m-btn--air m-btn--pill m-2" style="padding:.75rem 1rem">
                                    <span>
                                        <i class="la la-file-excel-o"></i>
                                        <span>
                                            Export
                                        </span>
                                    </span>
                                </a>
                            @endif
                            @if($user->hasRole('super_admin') || $user->hasRole('principal_admin') || $is_permission_own || $is_permission_all)
                                <a href="#" id="add_event_btn" data-toggle="modal" data-target="#modal-view-event-add" class="btn btn-info m-btn m-btn--custom m-btn--icon m-btn--air m-btn--pill m-2" style="padding:.75rem 1rem">
                                    <span>
                                        <i class="la la-file-excel-o"></i>
                                        <span>
                                            Tambah Program
                                        </span>
                                    </span>
                                </a>
                            @endif
                            @if($user->hasRole('super_admin') || $user->hasRole('principal_admin') || $is_permission_own || $is_permission_all)
                                <a href="#" id="add_location_btn" data-toggle="modal" data-target="#modal-view-location-add" class="btn btn-info m-btn m-btn--custom m-btn--icon m-btn--air m-btn--pill m-2" style="padding:.75rem 1rem">
                                    <span>
                                        <i class="la la-file-excel-o"></i>
                                        <span>
                                            Tambah Lokasi SML
                                        </span>
                                    </span>
                                </a>
                            @endif
                        </div>
                        <div class="card">
                            <div class="card-body">
                                <div id="calendar"></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="event-body text-center mb-4"></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-primary" href="#"  data-toggle="modal" data-target="#modal-view-location-update">Kemaskini</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Kembali</button>
                    </div>
                </div>
            </div>
        </div>
        {{-- End Penerangan Program & Jadual Lokasi SML --}}

        {{-- Tambah Program --}}
        <div id="modal-view-event-add" class="modal modal-top fade calendar-modal" style="background-color: rgba(0, 0, 0,.6)">
            <div class="modal-dialog modal-dialog-centered modal-lg" style="max-width: 1000px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="exampleModalLabel">
                            Tambah Program Baharu
                        </h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">
                                &times;
                            </span>
                        </button>
                    </div>
                    <form id="add-event" enctype="multipart/form-data" action="{{ url('admin/permohonan/program/'.$ipr->name.'/add-program') }}" method="POST">
                        @csrf
                        <div class="modal-body">
                            <div class="m-form__section m-form__section--first">
                                <h5 style="color: #f4516c">
                                    Maklumat Program:
                                </h5>  
                                <br>
                                <div class="form-group row">
                                    <div class="col-md-12">
                                        <label>Nama Program</label>
                                        <input type="text" class="form-control" name="event-address">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-md-6">
                                        <label>Tarikh/Waktu Mula Program</label>
                                        <input type='text' class="datetimepicker form-control" id="tarikh_mula_program" name="edate_start">
                                    </div>
                                    <div class="col-md-6">
                                        <label>Tarikh/Waktu Akhir Program</label>
                                        <input type='text' class="datetimepicker form-control" id="tarikh_akhir_program" name="edate_finish">
                                    </div>
                                </div>   
                                <div class="form-group row">
                                    <div class="col-md-12">
                                        <label>Alamat Lokasi</label>
                                        <textarea class="form-control" name="ealamat"></textarea>
                                    </div>
                                </div>     
                                <div class="form-group row">
                                    <div class="col-md-12">
                                        <label>Penerangan Program</label>
                                        <textarea class="form-control" name="edesc"></textarea>
                                    </div>
                                </div>
                                <div class="form-group m-form__group row">
                                    <div class="col-lg-12">
                                        <label for="">Gambar</label>
                                        <input id="inputFile1" name="gambar_1" class="input-file" type="file" value="">
                                        <input class="form-control m-input" type="hidden" value="Gambar Pilihan" name="banner_title_1">
                                        <button id="reset_gambar_1" class="btn btn-red reset">reset gambar</button>
                                        <div class="mt-2">
                                            <img id="image_upload_preview1" style="width:528px; height:304px" src="{{ asset('img/placeholder.png') }}">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <p style="color: red; font-size: 12px">Sila muatnaik gambar berukuran tidak melebihi saiz 5 mb. 
                                            <br>Format Fail yang dibenarkan hanya PNG atau JPG/JPEG sahaja. 
                                            <br>Gambar dipaparkan hanyalah dalam ukuran 528x304px.
                                        </p>
                                    </div>
                                </div>
                            </div>        
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" onclick="submitForm()">Simpan</button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Kembali</button>        
                        </div>
                    </form>
                </div>
            </div>
        </div>
        {{-- Tambah Program --}}

        {{-- Tambah Lokasi --}}
        <div id="modal-view-location-add" class="modal modal-top fade calendar-modal" style="background-color: rgba(0, 0, 0,.6)">
            <div class="modal-dialog modal-dialog-centered modal-lg" style="max-width: 1000px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="exampleModalLabel">
                            Tambah Lokasi SML
                        </h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">
                                &times;
                            </span>
                        </button>
                    </div>
                    <form id="add-location" enctype="multipart/form-data" action="{{ url('admin/permohonan/location/'.$ipr->name.'/add-location') }}" method="POST">
                        @csrf
                        <div class="modal-body">
                            <div class="m-form__section m-form__section--first">
                                <h5 style="color: #f4516c">
                                    Maklumat SML:
                                </h5>  
                                <br>
                                <div class="form-group row">
                                    <div class="col-md-12">
                                        <label>Nama Lokasi <i style="font-size: small;">(Sila pilih PBT berkaitan)</i> </label>
                                        <select class="form-control" name="pbt" style="height:unset;padding:5px 5px;">
                                            <option value='' selected='selected'>Semua PBT</option>
                                            @foreach($pbt as $data)
                                                <option value='{{ $data->nama }}'>{{ $data->nama }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-md-12">
                                        <label>Nama Tempat</label>
                                        <input type="text" class="form-control" name="ename">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-md-6">
                                        <label>Tarikh/Waktu Mula</label>
                                        <input type='text' class="datetimepicker form-control" id="tarikh_mula_sml" name="edate_start_sml">
                                    </div>
                                    <div class="col-md-6">
                                        <label>Tarikh/Waktu Akhir</label>
                                        <input type='text' class="datetimepicker form-control" id="tarikh_akhir_sml" name="edate_finish_sml">
                                    </div>
                                </div>   
                                <div class="form-group row">
                                    <div class="col-md-12">
                                        <label>Alamat Lokasi</label>
                                        <textarea class="form-control" name="ealamat"></textarea>
                                    </div>
                                </div>     
                                <div class="form-group row">
                                    <div class="col-md-12">
                                        <label>Penerangan Tambahan</label>
                                        <textarea class="form-control" name="edesc" placeholder="(e.g: No. Van, Cuti Umum, Cuti Sekolah, dll..)"></textarea>
                                    </div>
                                </div>
                                <div class="form-group m-form__group row">
                                    <div class="col-lg-12 table_gambar">
                                        <div class="col-lg-12">
                                            <label for="">Gambar</label>
                                            <input id="inputFile2" name="gambar_2" class="input-file" type="file" value="">
                                            <input class="form-control m-input" type="hidden" value="Gambar Lokasi" name="banner_title_2">
                                            <button id="reset_gambar_2" class="btn btn-red reset">reset gambar</button>
                                            <div class="mt-2">
                                                <img id="image_upload_preview2" style="width:528px; height:304px" src="{{ asset('img/placeholder.png') }}">
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <p style="color: red; font-size: 12px">Sila muatnaik gambar berukuran tidak melebihi saiz 5 mb. 
                                                <br>Format Fail yang dibenarkan hanya PNG atau JPG/JPEG sahaja. 
                                                <br>Gambar dipaparkan hanyalah dalam ukuran 528x304px.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>        
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" onclick="submitLocation()">Simpan</button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Kembali</button>        
                        </div>
                    </form>
                </div>
            </div>
        </div>
        {{-- Tambah Lokasi --}}

        {{-- Update Lokasi --}}
        <div id="modal-view-location-update" class="modal modal-top fade calendar-modal" style="background-color: rgba(0, 0, 0,.6)">
            <div class="modal-dialog modal-dialog-centered modal-lg" style="max-width: 1000px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="exampleModalLabel">
                            Kemaskini Lokasi SML
                        </h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">
                                &times;
                            </span>
                        </button>
                    </div>
                    <form id="update-location" enctype="multipart/form-data" action="{{ url('admin/permohonan/location/'.$ipr->name.'/update-location') }}" method="POST">
                        @csrf
                        <div class="modal-body">
                            <div class="m-form__section m-form__section--first">
                                <h5 style="color: #f4516c">
                                    Maklumat SML:
                                </h5>  
                                <br>
                                <div class="form-group row">
                                    <div class="col-md-12">
                                        <label>Nama Lokasi <i style="font-size: small;">(Sila pilih PBT berkaitan)</i> </label>
                                        <select class="form-control" id="pbt" name="pbt" style="height:unset;padding:5px 5px;">
                                            <option value='' selected='selected'>Semua PBT</option>
                                            @foreach($pbt as $data)
                                                <option value='{{ $data->nama }}'>{{ $data->nama }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-md-12">
                                        <label>Nama Tempat</label>
                                        <input class="form-control" id="m_name_event" name="m_name_event">
                                        <input class="form-control" type="hidden" id="m_event_id" name="m_event_id">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-md-6">
                                        <label>Tarikh/Waktu Mula</label>
                                        <input class="form-control" id="m_event_time_start" name="m_event_time_start">
                                    </div>
                                    <div class="col-md-6">
                                        <label>Tarikh/Waktu Akhir</label>
                                        <input class="form-control" id="m_event_time_end" name="m_event_time_end">
                                    </div>
                                </div>   
                                <div class="form-group row">
                                    <div class="col-md-12">
                                        <label>Alamat Lokasi</label>
                                        <input class="form-control" id="m_event_address" name="m_event_address">
                                    </div>
                                </div>     
                                <div class="form-group row">
                                    <div class="col-md-12">
                                        <label>Penerangan Tambahan</label>
                                        <textarea class="form-control" id="m_event_description" name="m_event_description"></textarea>
                                    </div>
                                </div>
                                <div class="form-group m-form__group row">
                                    <div class="col-lg-12">
                                        <div class="col-lg-12">
                                            <label for="">Gambar</label>
                                            <input id="inputFile3" name="gambar_3" class="input-file" type="file" value="">
                                            <input class="form-control m-input" type="hidden" value="Gambar Lokasi" name="banner_title_3">
                                            <button type="reset" id="reset_gambar_3" class="btn btn-red reset">reset gambar</button>
                                            <div class="mt-2">
                                                <img id="image_upload_preview3" style="width:528px; height:304px" src="{{ asset('img/placeholder.png') }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <p style="color: red; font-size: 12px">Sila muatnaik gambar berukuran tidak melebihi saiz 5 mb. 
                                            <br>Format Fail yang dibenarkan hanya PNG atau JPG/JPEG sahaja. 
                                            <br>Gambar dipaparkan hanyalah dalam ukuran 528x304px.
                                        </p>
                                    </div>
                                </div>
                            </div>        
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" onclick="update()">Simpan</button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Kembali</button>        
                        </div>
                    </form>
                </div>
            </div>
        </div>
        {{-- Update Lokasi --}}
    @endif
@endrole
@endsection

@section('js')
@role(['super_admin', 'principal_admin','admin'])
    <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, {
                initialView: 'dayGridMonth',
                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: "{{ url('admin/permohonan/jadual/sml/list') }}",
                eventClick: function(info) {
                    // MAKLUMAT RUMUSAN
                    $('.event-icon').html("<i class='fa fa-"+info.event.extendedProps.icon+"'></i>");
                    $('.event-title').html(info.event.title);
                    $('.event-body').html('<img src="' + ( info.event._def.extendedProps.banner != null ? info.event._def.extendedProps.banner : "{{ asset('img/placeholder.png') }}" ) + '" max-width="100%" width="528" height="304" style="centre">');
                    $('.event-address').html(info.event._def.extendedProps.address);
                    $('.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();

                    // MAKLUMAT KEMASKINI
                    $('#pbt').val(info.event._def.extendedProps.pbt);
                    $('#m_name_event').val(info.event.title);
                    $('#m_event_icon').val(info.event.extendedProps.icon);
                    $('#m_event_address').val(info.event._def.extendedProps.address);
                    $('#image_upload_preview3').attr('src', info.event._def.extendedProps.banner);
                    $('#image_upload_preview3').attr('data-imgori', info.event._def.extendedProps.banner);

                    $('#m_event_description').val(info.event._def.extendedProps.description);

                    $('#m_event_time_start, #m_event_time_end').datetimepicker({
                        format: 'dd/mm/yyyy hh:ii'
                    })
                    $('#m_event_time_start').val(moment.utc(info.event._instance.range.start).format('DD/MM/YYYY hh:mm'));
                    $('#m_event_time_end').val(moment.utc(info.event._instance.range.end).format('DD/MM/YYYY hh:mm'));

                    $('#m_event_id').val(info.event._def.publicId);
                    info.el.style.borderColor = 'green';
                },
            });

            calendar.on('dateClick', function(info) {
                $('#modal-view-event-add').modal('show');
            });

            calendar.render();
        });

            function readURL(input) {
                var FileUploadPath = input.value;
                var Extension = FileUploadPath.substring(FileUploadPath.lastIndexOf('.') + 1).toLowerCase();

                if (Extension == "png" || Extension == "jpeg" || Extension == "jpg") {
                    if (input.files && input.files[0]) {
                        var size = input.files[0].size;
                        
                        if (size > 5000000) {
                            sizeErr();
                            $("#inputFile1").val('');
                            $("#inputFile2").val('');
                            $("#inputFile3").val('');
                            $("#image_upload_preview1").val('');
                            $("#image_upload_preview2").val('');
                            $("#image_upload_preview3").val('');
                            return;
                        } else {
                            var reader = new FileReader();
                            reader.onload = function (e) {
                                $('#image_upload_preview1').attr('src', e.target.result);
                                $('#image_upload_preview2').attr('src', e.target.result);
                                $('#image_upload_preview3').attr('src', e.target.result);
                            }
                            reader.readAsDataURL(input.files[0]);
                        }
                    }
                } else {
                    extensionErr();
                    $("#inputFile1").val('');
                    $("#inputFile2").val('');
                    $("#inputFile3").val('');
                    $("#image_upload_preview1").val('');
                    $("#image_upload_preview2").val('');
                    $("#image_upload_preview3").val('');
                }
            }

            $("#inputFile1").change(function () {
                readURL(this);
            });

            $("#inputFile2").change(function () {
                readURL(this);
            });

            $("#inputFile3").change(function () {
                readURL(this);
            });

            // RESET PREVIEW IMAGE
            $('#reset_gambar_1').click(function(e){
                e.preventDefault();
                $('#inputFile1').val(''); // RESET
                $("#image_upload_preview1").attr('src', '{{ asset("img/placeholder.png") }}');
            })
            $('#reset_gambar_2').click(function(e){
                e.preventDefault();
                $('#inputFile2').val(''); // RESET
                $("#image_upload_preview2").attr('src', '{{ asset("img/placeholder.png") }}');
            })
            $('#reset_gambar_3').click(function(e){
                e.preventDefault();
                $('#inputFile3').val(''); // RESET
                let img_ori = $("#image_upload_preview3").data('imgori'); // GET ORI IMG
                $("#image_upload_preview3").attr('src', img_ori); // DISPLAY ORI IMG
            })

            function sizeErr() {
                $.confirm({
                    title: 'Saiz dokumen melebihi had.',
                    content: 'Sila muatnaik fail tidak melebihi 5 MB.',
                    icon: 'fa fa-warning',
                    type: 'red',
                    buttons: {
                        ok: {
                            btnClass: 'btn-red',
                            action: function() {}
                        }
                    }
                });
            }

            function extensionErr() {
                $.confirm({
                    title: 'Format fail tidak dibenarkan.',
                    content: 'Sila muatnaik fail dalam format: JPG/JPEG/PNG sahaja.',
                    icon: 'fa fa-warning',
                    type: 'red',
                    buttons: {
                    ok: {
                            btnClass: 'btn-red',
                            action: function() {}
                        }
                    }
                });
            }

            $('.datetimepicker').datetimepicker({
                format: 'dd/mm/yyyy hh:ii'
            });

            function submitForm() {
                if ($('#tarikh_mula_program, input[name="edate_start"]').val() == '' || 
                    $('#tarikh_akhir_program, input[name="edate_finish"]').val() == '') {
                    error();
                } else {
                    $.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 error() {
                    $.confirm({
                        title: 'Maklumat tidak lengkap?',
                        content: 'Sila pastikan tarikh dan waktu telah diisi sebelum simpan.',
                        icon: 'fa fa-warning',
                        type: 'red',
                        buttons: {
                        ok: {
                            btnClass: 'btn-red',
                            action: function() {

                            }
                        }
                        }
                    });
                }
            }

            function exportFile() {
                var status = $('#status').val();
                var from_date = $('#from_date').val();
                var to_date = $('#to_date').val();
                var q = $('#q').val();
                var filter_type = $('#filter_type').val();

                window.open('{{ url('admin/rumusan/sml?_token=') }}{{csrf_token()}}&status='+status+'&from_date='+from_date+'&to_date='+to_date+'&q='+q+'&filter_type='+filter_type, '_blank');
            }

            function submitLocation() {
                if ($('#tarikh_mula_sml, input[name="edate_start_sml"]').val() == '' || 
                    $('#tarikh_akhir_sml, input[name="edate_finish_sml"]').val() == '') {
                    error();
                } else {
                    $.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() {}
                            }
                        }
                    });
                }
                
                function error() {
                    $.confirm({
                        title: 'Maklumat tidak lengkap?',
                        content: 'Sila pastikan tarikh dan waktu telah diisi sebelum simpan.',
                        icon: 'fa fa-warning',
                        type: 'red',
                        buttons: {
                        ok: {
                            btnClass: 'btn-red',
                            action: function() {

                            }
                        }
                        }
                    });
                }
            }

            function update() {
                if ($('#m_event_time_start, input[name="m_event_time_start"]').val() == '' || 
                    $('#m_event_time_end, input[name="m_event_time_end"]').val() == '') {
                    error1();
                } else {
                    $.confirm({
                        title: 'Simpan Maklumat?',
                        content: 'Anda pasti untuk teruskan?',
                        icon: 'fa fa-spinner fa-spin',
                        type: 'green',
                        buttons: {
                            hantar: {
                                btnClass: 'btn-green',
                                action: function() {
                                    $('#update-location').submit();
                                }
                            },
                            kembali: {
                                btnClass: 'btn-red',
                                action: function() {}
                            }
                        }
                    });
                }

                function error1() {
                    $.confirm({
                        title: 'Maklumat tidak lengkap?',
                        content: 'Sila pastikan tarikh dan waktu telah diisi sebelum simpan.',
                        icon: 'fa fa-warning',
                        type: 'red',
                        buttons: {
                            ok: {
                                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>
@endrole
@endsection