@extends('layouts/layoutMaster')

@section('title', 'calendar')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
@section('vendor-style')
    @vite(['resources/assets/vendor/libs/fullcalendar/fullcalendar.scss', 'resources/assets/vendor/libs/flatpickr/flatpickr.scss', 'resources/assets/vendor/libs/select2/select2.scss', 'resources/assets/vendor/libs/quill/editor.scss', 'resources/assets/vendor/libs/@form-validation/form-validation.scss', 'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss', 'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss', 'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss', 'resources/assets/vendor/libs/animate-css/animate.scss', 'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss'])


@endsection

@section('page-style')
    @vite(['resources/assets/vendor/scss/pages/app-calendar.scss'])
@endsection

@section('vendor-script')
    @vite(['resources/assets/vendor/libs/fullcalendar/fullcalendar.js', 'resources/assets/vendor/libs/@form-validation/popular.js', 'resources/assets/vendor/libs/@form-validation/bootstrap5.js', 'resources/assets/vendor/libs/@form-validation/auto-focus.js', 'resources/assets/vendor/libs/select2/select2.js', 'resources/assets/vendor/libs/flatpickr/flatpickr.js', 'resources/assets/vendor/libs/moment/moment.js', 'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js', 'resources/assets/vendor/libs/cleavejs/cleave.js', 'resources/assets/vendor/libs/sweetalert2/sweetalert2.js', 'resources/assets/vendor/libs/cleavejs/cleave-phone.js'])


@endsection

@section('page-script')
    @vite(['resources/assets/js/app-calendar-events.js', 'resources/assets/js/app-calendar.js'])
@endsection

@section('content')
    <div class="card app-calendar-wrapper">
        <div class="row g-0">
            <!-- Calendar Sidebar -->
            <div class="col app-calendar-sidebar border-end" id="app-calendar-sidebar">
                <div class="p-5 my-sm-0 mb-4 border-bottom">
                    <button class="btn btn-primary btn-toggle-sidebar w-100" data-bs-toggle="offcanvas"
                        data-bs-target="#addEventSidebar" aria-controls="addEventSidebar">
                        <i class="ri-add-line ri-16px me-1_5"></i>
                        <span class="align-middle">Add Event</span>
                    </button>
                </div>
                <div class="px-4">
                    <!-- inline calendar (flatpicker) -->
                    <div class="inline-calendar"></div>

                    <hr class="mb-5 mx-n4 mt-3">
                    <!-- Filter -->
                    <div class="mb-4 ms-1">
                        <h5>Event Filters</h5>
                    </div>

                    <div class="form-check form-check-secondary mb-3 ms-3">
                        <input class="form-check-input select-all" type="checkbox" id="selectAll" data-value="all" checked>
                        <label class="form-check-label" for="selectAll">View All</label>
                    </div>

                    @php
                        // Fixed labels and their colors
                        $fixedLabels = [
                            'Public Holiday' => 'primary',
                            'Leaves' => 'danger',
                            'Task Event' => 'warning',
                            'Daily Task' => 'success',
                        ];
                        $eventLabelArray = $eventLabels->pluck('color', 'eventLabel')->toArray();
                        $dynamicLabels = array_diff_key($eventLabelArray, $fixedLabels);
                        $allLabels = $fixedLabels + $dynamicLabels;
                    @endphp

                    <div class="app-calendar-events-filter text-heading">
                        @foreach ($allLabels as $label => $color)
                            @php
                                $slug = Str::slug($label);
                            @endphp
                            <div class="form-check mb-3 ms-3 form-check-{{ $color }}">
                                <input class="form-check-input input-filter" type="checkbox" id="select-{{ $slug }}"
                                    data-value="{{ $label }}" checked>
                                <label class="form-check-label" for="select-{{ $slug }}">
                                    {{ ucfirst($label) }}
                                </label>
                            </div>
                        @endforeach
                    </div>



                </div>
            </div>
            <!-- /Calendar Sidebar -->

            <!-- Calendar & Modal -->
            <div class="col app-calendar-content">
                <div class="card shadow-none border-0 ">
                    <div class="card-body pb-0">
                        <!-- FullCalendar -->
                        <div id="calendar"></div>
                    </div>
                </div>
                <div class="app-overlay"></div>
                <!-- FullCalendar Offcanvas -->
                <div class="offcanvas offcanvas-end event-sidebar" tabindex="-1" id="addEventSidebar"
                    aria-labelledby="addEventSidebarLabel">
                    <div class="offcanvas-header border-bottom">
                        <h5 class="offcanvas-title" id="addEventSidebarLabel">Add Event</h5>
                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                            aria-label="Close"></button>
                    </div>
                    <div class="offcanvas-body">
                        <form class="event-form pt-0" id="eventForm" onsubmit="return false">
                            <input type="hidden" id="eventId" name="id">
                            <div class="form-floating form-floating-outline mb-5">
                                <input type="text" class="form-control" id="eventTitle" name="eventTitle"
                                    placeholder="Event Title" />
                                <label for="eventTitle">Title</label>
                            </div>
                            <div class="form-floating form-floating-outline mb-5 position-relative">
                                <select class="select2 select-event-label form-select" id="eventLabel" name="eventLabel">
                                    {{-- <option data-label="primary" value="Public Holiday" selected>Public Holiday</option>
                                    <option data-label="danger" value="Leaves">Leaves</option>
                                    <option data-label="warning" value="Task Event">Task Event</option>
                                    <option data-label="success" value="Daily Task">Daily Task</option> --}}
                                    @foreach ($allLabels as $label => $color)
                                        <option data-label="success"> {{ ucfirst($label) }}</option>
                                    @endforeach
                                </select>
                                <label for="eventLabel">Label</label>

                                <!-- Add button to trigger custom label popup -->
                                <button type="button"
                                    class="btn btn-sm btn-outline-secondary position-absolute top-0 end-0 me-2 mt-2"
                                    onclick="triggerTagAction()">
                                    + Custom Label
                                </button>
                            </div>


                            <div id="tagInputSection" class="d-none border p-3 bg-white rounded shadow"
                                style="position: absolute; z-index: 1000;">
                                <input type="text" id="tagInput" placeholder="Enter custom label"
                                    class="form-control mb-2">
                                <div id="tagColorPalette" class="d-flex gap-2 mb-2"></div>
                                <button type="button" class="btn btn-primary btn-sm" onclick="addTagAsOption()">Add
                                    Label</button>
                                <button type="button" class="btn btn-outline-secondary btn-sm"
                                    onclick="closeTagInput()">Cancel</button>
                            </div>
                            <input type="hidden" id="color" name="color" value="">


                            <div class="form-floating form-floating-outline mb-5">
                                <input type="text" class="form-control" id="eventStartDate" name="eventStartDate"
                                    placeholder="Start Date" />
                                <label for="eventStartDate">Start Date</label>
                            </div>
                            <div class="form-floating form-floating-outline mb-5">
                                <input type="text" class="form-control" id="eventEndDate" name="eventEndDate"
                                    placeholder="End Date" />
                                <label for="eventEndDate">End Date</label>
                            </div>



                            <div class="form-floating form-floating-outline mb-5">
                                <textarea class="form-control" name="eventDescription" id="eventDescription"></textarea>
                                <label for="eventDescription">Description</label>
                            </div>
                            <div class="mb-5 d-flex justify-content-sm-between justify-content-start my-6 gap-2">
                                <div class="d-flex">
                                    <button type="submit" class="btn btn-primary btn-add-event me-4">Add</button>
                                    <button type="reset" class="btn btn-outline-secondary btn-cancel me-sm-0 me-1"
                                        data-bs-dismiss="offcanvas">Cancel</button>
                                </div>
                                <button class="btn btn-outline-danger btn-delete-event d-none">Delete</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <script>
        // Global array to track tags (optional use)
        const tags = [];
        let selectedTagColor = '';

        // Available color options
        const tagColors = ['primary', 'danger', 'warning', 'success', 'info', 'dark'];

        // Show/hide the tag input popup and render color palette
        function triggerTagAction() {
            const tagSection = document.getElementById('tagInputSection');
            tagSection.classList.toggle('d-none');
            tagSection.classList.toggle('d-block');
            document.getElementById('tagInput').focus();
            renderTagColorPalette();
        }

        // Renders the clickable color palette
        function renderTagColorPalette() {
            const palette = document.getElementById('tagColorPalette');
            palette.innerHTML = '';
            tagColors.forEach(color => {
                const colorBox = document.createElement('div');
                colorBox.className = `rounded-circle bg-${color}`;
                colorBox.style.width = '20px';
                colorBox.style.height = '20px';
                colorBox.style.cursor = 'pointer';
                colorBox.setAttribute('data-color', color);
                colorBox.title = color;

                if (color === selectedTagColor) {
                    colorBox.style.outline = '2px solid black';
                }

                colorBox.addEventListener('click', () => {
                    selectedTagColor = color;
                    renderTagColorPalette(); // rerender to highlight selected color
                });

                palette.appendChild(colorBox);
            });
        }

        // Add a new label to the select dropdown
        function addTagAsOption() {
            const tagInput = document.getElementById('tagInput');
            const tagName = tagInput.value.trim();
            const select = document.getElementById('eventLabel'); // <-- correct select element!

            if (!tagName) {
                tagInput.focus();
                return;
            }

            if (!selectedTagColor) {
                alert('Please select a color!');
                return;
            }

            // Case-insensitive check for duplicates
            const exists = Array.from(select.options).some(opt => opt.value.toLowerCase() === tagName.toLowerCase());
            if (exists) {
                alert('Label already exists!');
                return;
            }

            // Add new option to select
            const newOption = document.createElement('option');
            newOption.value = tagName;
            newOption.text = tagName;
            newOption.setAttribute('data-label', selectedTagColor);
            select.appendChild(newOption);
            select.value = tagName;

            // Set hidden color field
            document.getElementById('color').value = selectedTagColor;

            if ($(select).hasClass('select2')) {
                $(select).trigger('change.select2');
            }

            closeTagInput();
        }



        function closeTagInput() {
            const tagInput = document.getElementById('tagInput');
            tagInput.value = '';
            document.getElementById('tagInputSection').classList.remove('d-block');
            document.getElementById('tagInputSection').classList.add('d-none');
        }


        // Optional: Initialize Select2 if needed
        $(document).ready(function() {
            if ($('.select2').length) {
                $('.select2').select2({
                    dropdownParent: $('#addEventSidebar')
                });
            }
        });
    </script>

@endsection