{% extends 'backend/components/layouts/default.html' %}
{% load static %}

{% block content %}
<meta name="csrf-token" content="{{ csrf_token }}">
<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">

<link href="{% static 'assets/css/fullcalendar.min.css' %}" rel='stylesheet' />
<script src="{% static 'assets/js/fullcalendar.min.js' %}"></script>
<div x-data="calendar">
    <div class="panel">
        <div class="mb-5">
            <div class="mb-4 flex items-center sm:flex-row flex-col sm:justify-between justify-center">
                <div class="sm:mb-0 mb-4">
                    <div class="text-lg font-semibold ltr:sm:text-left rtl:sm:text-right text-center">Calendar</div>
                    <div class="flex items-center mt-2 flex-wrap sm:justify-start justify-center">
                        <div class="flex items-center ltr:mr-4 rtl:ml-4">
                            <div class="h-2.5 w-2.5 rounded-sm ltr:mr-2 rtl:ml-2 bg-primary"></div>
                            <div>Other</div>
                        </div>
                        <div class="flex items-center ltr:mr-4 rtl:ml-4">
                            <div class="h-2.5 w-2.5 rounded-sm ltr:mr-2 rtl:ml-2 bg-info"></div>
                            <div>In Progress</div>
                        </div>
                        <div class="flex items-center ltr:mr-4 rtl:ml-4">
                            <div class="h-2.5 w-2.5 rounded-sm ltr:mr-2 rtl:ml-2 bg-success"></div>
                            <div>Completed</div>
                        </div>
                        <div class="flex items-center">
                            <div class="h-2.5 w-2.5 rounded-sm ltr:mr-2 rtl:ml-2 bg-danger"></div>
                            <div>Canceled</div>
                        </div>
                    </div>
                </div>
                {% if user.is_superuser %}
                <button type="button" class="btn btn-primary" @click="editEvent()">

                    <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 ltr:mr-2 rtl:ml-2">
                        <line x1="12" y1="5" x2="12" y2="19"></line>
                        <line x1="5" y1="12" x2="19" y2="12"></line>
                    </svg>
                    Create Event
                </button>
                {% endif %}
                <div class="fixed inset-0 bg-[black]/60 z-[999] overflow-y-auto hidden" :class="isAddEventModal && '!block'">
                    <div class="flex items-center justify-center min-h-screen px-4" @click.self="isAddEventModal = false">
                        <div x-show="isAddEventModal" x-transition x-transition.duration.300 class="panel border-0 p-0 rounded-lg overflow-hidden md:w-full max-w-lg w-[90%] my-8">
                            <button type="button" class="absolute top-4 ltr:right-4 rtl:left-4 text-white-dark hover:text-dark" @click="isAddEventModal = false">

                                <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
                                    <line x1="18" y1="6" x2="6" y2="18"></line>
                                    <line x1="6" y1="6" x2="18" y2="18"></line>
                                </svg>
                            </button>
                            <h3 class="text-lg font-medium bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]" x-text="params.id ? 'Edit Event' : 'Add Event'"></h3>
                            <div class="p-5">
                                <form @submit.prevent="saveEvent">
                                    <div class="mb-5">
                                        <label for="title">Event Title :</label>
                                        <input id="title" type="text" name="title" id="title" class="form-input" placeholder="Enter Event Title" x-model="params.title" required />
                                        <div class="text-danger mt-2" id="titleErr"></div>
                                    </div>

                                    <div class="mb-5">
                                        <label for="dateStart">From :</label>
                                        <input id="dateStart" type="datetime-local" name="start" id="start" class="form-input" placeholder="Event Start Date" x-model="params.start" :min="minStartDate" @change="startDateChange($event)" required />
                                        <div class="text-danger mt-2" id="startDateErr"></div>
                                    </div>
                                    <div class="mb-5">
                                        <label for="dateEnd">To :</label>
                                        <input id="dateEnd" type="datetime-local" name="end" id="end" class="form-input" placeholder="Event End Date" x-model="params.end" :min="minEndDate" required />
                                        <div class="text-danger mt-2" id="endDateErr"></div>
                                    </div>
                                    <div class="mb-5">
                                        <label for="description">Event Description :</label>
                                        <textarea id="description" name="description" id="description" class="form-textarea min-h-[130px]" placeholder="Enter Event Description" x-model="params.description" required></textarea>
                                    </div>
                                    <div class="mb-5">
                                        <label>Badge:</label>
                                        <div class="mt-3">
                                            <label class="inline-flex cursor-pointer ltr:mr-3 rtl:ml-3">
                                                <input type="radio" class="form-radio" name="badge" value="Milestone" x-model="params.badge" />
                                                <span class="ltr:pl-2 rtl:pr-2">is Milestone ?</span>
                                            </label>
                                            <label class="inline-flex cursor-pointer ltr:mr-3 rtl:ml-3">
                                                <input type="radio" class="form-radio" name="badge" value="Activity" x-model="params.badge" />
                                                <span class="ltr:pl-2 rtl:pr-2">is an Activity ?</span>
                                            </label>
                                        </div>
                                    </div> 
                                    {% if user.is_superuser %}                                   
                                    <div class="flex justify-end items-center mt-8">
                                        <button type="button" class="btn btn-outline-danger" @click="isAddEventModal = false">Cancel</button>
                                        <button type="submit" class="btn btn-primary ltr:ml-4 rtl:mr-4" x-text="params.id ? 'Update Event' : 'Create Event'"></button>
                                    </div>
                                    {% endif %}
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="calendar-wrapper" id='calendar'></div>
        </div>
    </div>
</div>
<script>
    document.addEventListener("alpine:init", () => {
        Alpine.data("calendar", () => ({
            defaultParams: ({
                id: null,
                title: '',
                start: '',
                end: '',
                description: '',
                type: '',
                badge: ''
            }),
            params: {
                id: null,
                title: '',
                start: '',
                end: '',
                description: '',
                type: '',
                badge: ''
            },
            isAddEventModal: false,
            minStartDate: '',
            minEndDate: '',
            calendar: null,
            now: new Date(),
            events: [],
            init() {
                // Fetch events from the server
                fetch('/events/')
                    .then(response => response.json())
                    .then(data => {
                        this.events = data;
                        var calendarEl = document.getElementById('calendar');
                        this.calendar = new FullCalendar.Calendar(calendarEl, {
                            initialView: 'dayGridMonth',
                            headerToolbar: {
                                left: 'prev,next today',
                                center: 'title',
                                right: 'dayGridMonth,timeGridWeek,timeGridDay',
                            },
                            editable: true,
                            dayMaxEvents: true,
                            selectable: true,
                            droppable: true,
                            eventClick: (event) => {
                                this.editEvent(event);
                            },
                            select: (event) => {
                                this.editDate(event)
                            },
                            events: this.events,
                        });
                        this.calendar.render();
    
                        this.$watch('$store.app.sidebar', () => {
                            setTimeout(() => {
                                this.calendar.render();
                            }, 300);
                        });
                    });
            },
    
            getMonth(dt, add = 0) {
                let month = dt.getMonth() + 1 + add;
                return dt.getMonth() < 10 ? '0' + month : month;
            },
    
            editEvent(data) {
                this.params = JSON.parse(JSON.stringify(this.defaultParams));
                if (data) {
                    let obj = JSON.parse(JSON.stringify(data.event));
                    this.params = {
                        id: obj.id ? obj.id : null,
                        title: obj.title ? obj.title : '',
                        start: this.dateFormat(obj.start),
                        end: this.dateFormat(obj.end),
                        type: obj.classNames ? obj.classNames[0] : '',
                        description: obj.extendedProps ? obj.extendedProps.description : '',
                        badge: obj.extendedProps && obj.extendedProps.badge ? obj.extendedProps.badge : ''
                    };
                    console.log('Editing event, badge:', this.params.badge);
                    this.minStartDate = new Date();
                    this.minEndDate = this.dateFormat(obj.start);
                } else {
                    this.minStartDate = new Date();
                    this.minEndDate = new Date();
                }

                this.isAddEventModal = true;
            },
    
            editDate(data) {
                let obj = {
                    event: {
                        start: data.start,
                        end: data.end
                    },
                };
                this.editEvent(obj);
            },
    
            dateFormat(dt) {
                dt = new Date(dt);
                const month = dt.getMonth() + 1 < 10 ? '0' + (dt.getMonth() + 1) : dt.getMonth() + 1;
                const date = dt.getDate() < 10 ? '0' + dt.getDate() : dt.getDate();
                const hours = dt.getHours() < 10 ? '0' + dt.getHours() : dt.getHours();
                const mins = dt.getMinutes() < 10 ? '0' + dt.getMinutes() : dt.getMinutes();
                dt = dt.getFullYear() + '-' + month + '-' + date + 'T' + hours + ':' + mins;
                return dt;
            },
    
            saveEvent() {
                if (!this.params.title || !this.params.start || !this.params.end) {
                    return true;
                }
            
                fetch('/events/save/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: JSON.stringify(this.params)
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        if (this.params.id) {
                            let event = this.calendar.getEventById(this.params.id);
                            event.setProp('title', this.params.title);
                            event.setStart(this.params.start);
                            event.setEnd(this.params.end);
                            event.setExtendedProp('description', this.params.description);
                            event.setProp('classNames', [this.params.type]);
                        } else {
                            this.calendar.addEvent({
                                id: data.id,  // assuming the backend returns the ID of the newly created event
                                title: this.params.title,
                                start: this.params.start,
                                end: this.params.end,
                                description: this.params.description,
                                classNames: [this.params.type],
                            });
                        }
                        this.calendar.refetchEvents();  // Ensure calendar is updated
                        this.showMessage('Event has been saved successfully.');
                        this.isAddEventModal = false;
                    } else {
                        this.showMessage(data.message, 'error');
                    }
                });
            },            
    
            startDateChange(event) {
                const dateStr = event.target.value;
                if (dateStr) {
                    this.minEndDate = this.dateFormat(dateStr);
                    this.params.end = '';
                }
            },
    
            showMessage(msg = '', type = 'success') {
                const toast = window.Swal.mixin({
                    toast: true,
                    position: 'top',
                    showConfirmButton: false,
                    timer: 3000,
                });
                toast.fire({
                    icon: type,
                    title: msg,
                    padding: '10px 20px',
                });
            }
        }));
    });
    
</script>

{% endblock %}