@extends('hr_main')
@section('title', '| ' . $data['pageTitle'])
@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="" style="">
                <div class="">
                    <div class="panel panel-default" style="background-color: white!important;">
                        <div class="panel-heading" style="padding-bottom:0px">
                            <div class="panel-title">
                                <h2 class="hd">Holidays Calender</h2>

                            </div>

                            <div class="panel-options" style="border: #8a8a8a solid 1px; padding:5px!important;">
                                <div class="row" >
                                    <div class="col-md-12">
                                        <input disabled value="#00B21E" type="color">
                                        <label for=""
                                            style=" font-size:12px;  text-transform: ;
                                           color: #00B21E ; ">
                                            Weekly
                                            Holiday</label>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <input disabled class="form-control-sm" value="#F30909" type="color">
                                        <label for=""
                                            style="text-transform: ;
                                            font-size:12px;font-weight: bold; color: #F30909 ; ">
                                            Govt.
                                            Holiday</label>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <input disabled value="#000" type="color">
                                        <label for=""
                                            style=" text-transform: ;
                                            font-size:12px;font-weight: bold;color: #000 ; ">Org/Branch/Samity
                                            Holiday</label>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="panel-body panelBodyView" style="color: black!important;">

                            <div id='calendar'></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('footerAssets')

    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js'></script>
    {{-- <script src='https://unpkg.com/popper.js/dist/umd/popper.min.js'></script>
    <script src='https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js'></script> --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const calendarEl = document.getElementById('calendar')
            const calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'multiMonthYear',

                // eventDidMount: function(info) {
                //     var tooltip = new Tooltip(info.el, {
                //         title: info.event.extendedProps.description,
                //         placement: 'top',
                //         trigger: 'hover',
                //         container: 'body'
                //     });
                // },


                eventClick: function(info) {
                    alert(info.event?.title);
                    console.log(info)
                    // info.el.style.borderColor = 'red';
                },
                events: {
                    url: './fullCalender',
                    method: 'GET'
                },

            })
            calendar.render()
        })
    </script>


@endsection