@extends('layouts.app-bo')
@section('title', __('calendar.presentiel_training_calendar'))
@section('content')
<style>
    div.filter {
        padding: 3px;
    }
</style>
<div class="main-content container-fluid">
    <section class="section">
        <div class="container-fluid">
            <div class="d-md-flex align-items-center justify-content-between mb-7">
                <div class="mb-4 mb-md-0">
                    <h4 class="fs-6 mb-0">{{ __('calendar.presentiel_training_calendar') }}</h4>
                </div>
                <div class="d-flex align-items-center justify-content-between gap-6">
                    <a href="{{ route('training-demand.create', [$locale]) }}" class="btn btn-success d-flex align-items-center gap-1 fs-3 py-2 px-9" style="white-space: nowrap; padding: 11px!important">
                        <i class="ti ti-plus fs-4"></i>
                        {{ __("calendar.register_participant") }}
                    </a>
                    <button type="button" class="btn d-flex bg-warning-subtle w-100 d-block text-warning d-flex align-items-center gap-1 fs-3 py-2 px-9" style="white-space: nowrap;">
                        {{ __('calendar.reccuring_training') }} &nbsp; &nbsp;
                        <span class="badge ms-auto text-bg-warning">{{ $reccuring_training }}</span>
                    </button>
                    <button type="button" class="btn d-flex bg-primary-subtle w-100 d-block text-primary d-flex align-items-center gap-1 fs-3 py-2 px-9" style="white-space: nowrap;">
                        {{ __('calendar.non_reccuring_training') }} &nbsp; &nbsp;
                        <span class="badge ms-auto text-bg-primary">{{ $non_reccuring_training }}</span>
                    </button>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <form action="{{ route('admin.calendar', $locale) }}" method="GET">
                        <div class="row" style="margin-bottom: -15px !important;">
                            <div class="col-md-3 filter">
                                <div class="form mb-3">
                                    <label for="training_id">{{ __('calendar.by_trainings') }}</label>
                                    <select class="form-select select2" name="training_id[]" id="training_id" multiple="multiple">
                                        @foreach ($trainings as $training)
                                        <option value="{{ $training->id }}">{{ $training->name }} [{{ $training->prefix }}]</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2 filter">
                                <div class="form-floating mb-3 select2-auto-height">
                                    <select class="form-select select2" name="department_id" id="department_id">
                                        <option value="">{{ __('app.select') }} ...</option>
                                        @foreach ($departments as $department)
                                        <option value="{{ $department->id }}">{{ $department->name }}</option>
                                        @endforeach
                                    </select>
                                    <label for="department_id">{{ __('calendar.by_department') }}</label>
                                </div>
                            </div>
                            <div class="col-md-2 filter">
                                <div class="form-floating mb-3 select2-auto-height">
                                    <select class="form-select select2" name="subdepartment_id" id="subdepartment_id">
                                        <option value="">{{ __('app.select') }} ...</option>
                                        @foreach ($subdepartments as $subdepartment)
                                        <option value="{{ $subdepartment->id }}">{{ $subdepartment->name }}</option>
                                        @endforeach
                                    </select>
                                    <label for="subdepartment_id">{{ __ ('calendar.by_subdepartment') }}</label>
                                </div>
                            </div>
                            <div class="col-md-2 filter">
                                <div class="form-floating mb-3 select2-auto-height">
                                    <select class="form-select select2" name="location_id" id="location_id">
                                        <option value="">{{ __('app.select') }} ...</option>
                                        @foreach ($locations as $location)
                                        <option value="{{ $location->id }}">{{ $location->name }}</option>
                                        @endforeach
                                    </select>
                                    <label for="location_id">{{ __('calendar.by_division') }}</label>
                                </div>
                            </div>
                            <div class="col-md-2 filter">
                                <div class="form-floating mb-3 select2-auto-height">
                                    <select class="form-select select2" name="trainer_id" id="trainer_id">
                                        <option value="">{{ __('app.select') }} ...</option>
                                        @foreach ($trainers as $trainer)
                                        <option value="{{ $trainer->id }}">
                                            {{ $trainer->fname}} {{ $trainer->lname}} ({{ $trainer->training_institution}}) @if (!$trainer->user_id) [Ext]@endif
                                        </option>
                                        @endforeach
                                    </select>
                                    <label for="trainer_id">{{ __('calendar.by_trainer') }}</label>
                                </div>
                            </div>
                            <div class="col-md-1 filter">
                                <a href="{{ route('admin.calendar', [$locale]) }}" class="btn btn-xs btn-danger mt-1" style="white-space: nowrap; width: 100%;" title="{{ __('calendar.reset_filters') }}">
                                    <i class="ti ti-filter-off fs-4"></i>
                                    {{ __("calendar.reset") }}
                                </a>
                                <button type="submit" class="btn btn-xs btn-primary mt-1" style="white-space: nowrap; width: 100%;" title="{{ __('calendar.filter_trainings') }}">
                                    <i class="ti ti-search fs-4"></i>
                                    {{ __("calendar.filter") }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="card">
                <div class="card-body calender-sidebar app-calendar">
                    <div id="calendar"></div>
                </div>
            </div>
        </div>
    </section>
</div>

<!-- Modal event -->
<div class="modal fade" id="eventModal" tabindex="-1" aria-labelledby="eventModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <a href="{{ route('presentiel.view', [$locale, '__presentiel_id__']) }}" class="btn btn-success" id="edit_the_training">
                    <i class="ti ti-edit fs-4"></i>
                    {{ __("calendar.edit_the_training") }}
                </a>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="modal-body-content">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn bg-danger-subtle text-danger" data-bs-dismiss="modal">
                    {{ __('app.close') }}
                </button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function() {
            });

    document.addEventListener("DOMContentLoaded", function() {
        //  Calender Date variable
        var newDate = new Date();

        function getDynamicMonth() {
            getMonthValue = newDate.getMonth();
            _getUpdatedMonthValue = getMonthValue + 1;
            if (_getUpdatedMonthValue < 10) {
                return `0${_getUpdatedMonthValue}`;
            } else {
                return `${_getUpdatedMonthValue}`;
            }
        }

        // Calender Modal Elements
        var calendarsEvents = {
            Danger: "danger",
            Success: "success",
            Primary: "primary",
            Warning: "warning",
        };

        // Calendar Elements and options
        var calendarEl = document.querySelector("#calendar");
        var checkWidowWidth = function() {
            if (window.innerWidth <= 1199) {
                return true;
            } else {
                return false;
            }
        };
        var calendarHeaderToolbar = {
            left: "prev today next",
            center: "title",
            right: "dayGridMonth,timeGridWeek,timeGridDay",
        };
        var calendarEventsList = ;

        // Calendar Select fn.
        var calendarSelect = function(info) {
            myModal.show();
        };

        // Calendar AddEvent fn.
        var calendarAddEvent = function() {
            var currentDate = new Date();
            var dd = String(currentDate.getDate()).padStart(2, "0");
            var mm = String(currentDate.getMonth() + 1).padStart(2, "0"); // January is 0!
            var yyyy = currentDate.getFullYear();
            var combineDate = `${yyyy}-${mm}-${dd}T00:00:00`;
            myModal.show();
        };

        // Calender Event Function
        var calendarEventClick = function(info) {
            var eventObj = info.event;

            if (eventObj.url) {
                window.open(eventObj.url);

                info.jsEvent.preventDefault();
            } else {
                var getModalEventId = eventObj._def.publicId;
                var getModalEventLevel = eventObj._def.extendedProps["calendar"];
                var getModalCheckedRadioBtnEl = document.querySelector(
                    `input[value="${getModalEventLevel}"]`
                );
                var route = "{{ route('presentiel.view', [$locale, '__presentiel_id__']) }}";
                var presentiel_id = info.event.id;
                var href = route;
                var href = href.replace('__presentiel_id__', presentiel_id);
                $("#edit_the_training").attr("href", href);
                $.ajax({
                    url: '{{ route("admin.training-details", [$locale]) }}',
                    type: 'GET',
                    data: {
                        _token: '{{ csrf_token() }}',
                        id: presentiel_id
                    },
                    dataType: 'html',
                    success: function(response) {
                        $("#modal-body-content").html(response);
                        myModal.show();
                    }
                });
            }
        };

        // Calender Mouse Over
        var calendarMouseOver = function(info) {
            var tooltip = document.createElement('div');
            tooltip.id = 'event-tooltip';
            tooltip.style.position = 'absolute';
            tooltip.style.zIndex = '1000';
            tooltip.style.background = '#fff';
            tooltip.style.border = '1px solid #ccc';
            tooltip.style.padding = '10px';
            tooltip.style.borderRadius = '4px';
            tooltip.style.boxShadow = '0px 2px 6px rgba(0,0,0,0.1)';
            if (info.event.extendedProps.description) {
                tooltip.innerHTML = `
                    <strong>${info.event.title}</strong><br><hr>
                    ${info.event.extendedProps.description || ''}
                `;
            } else {
                tooltip.innerHTML = `
                    <strong>${info.event.title}</strong><br>
                `;
            }
            document.body.appendChild(tooltip);

            document.addEventListener('mousemove', function positionTooltip(e) {
                tooltip.style.top = e.pageY + 15 + 'px';
                tooltip.style.left = e.pageX + 15 + 'px';
            });
        };

        // Calender Mouse Out
        var calendarMouseOut = function(info) {
            var tooltip = document.getElementById('event-tooltip');
            if (tooltip) tooltip.remove();
        };

        // Active Calender
        var calendar = new FullCalendar.Calendar(calendarEl, {
            selectable: true,
            height: checkWidowWidth() ? 900 : 1052,
            initialView: checkWidowWidth() ? "listWeek" : "dayGridMonth",
            initialDate: `${newDate.getFullYear()}-${getDynamicMonth()}-07`,
            headerToolbar: calendarHeaderToolbar,
            events: calendarEventsList,
            // select: calendarSelect,
            unselect: function() {
                console.log("unselected");
            },
            customButtons: {
                addEventButton: {
                    text: "Add Event",
                    click: calendarAddEvent,
                },
            },
            eventClassNames: function({
                event: calendarEvent
            }) {
                const getColorValue =
                    calendarsEvents[calendarEvent._def.extendedProps.calendar];
                return ["event-fc-color fc-bg-" + getColorValue];
            },

            eventClick: calendarEventClick,
            windowResize: function(arg) {
                if (checkWidowWidth()) {
                    calendar.changeView("listWeek");
                    calendar.setOption("height", 900);
                } else {
                    calendar.changeView("dayGridMonth");
                    calendar.setOption("height", 1052);
                }
            },
            eventMouseEnter: calendarMouseOver,
            eventMouseLeave: calendarMouseOut
        });

        // Calendar Init
        calendar.render();
        var myModal = new bootstrap.Modal(document.getElementById("eventModal"));
        var modalToggle = document.querySelector(".fc-addEventButton-button ");
        document
            .getElementById("eventModal")
            .addEventListener("hidden.bs.modal", function(event) {
                getModalTitleEl.value = "";
                getModalStartDateEl.value = "";
                getModalEndDateEl.value = "";
                var getModalIfCheckedRadioBtnEl = document.querySelector(
                    'input[name="event-level"]:checked'
                );
                if (getModalIfCheckedRadioBtnEl !== null) {
                    getModalIfCheckedRadioBtnEl.checked = false;
                }
            });
    });
</script>
@endsection