@extends('layouts.dashboard')
<style>
    /* LEGEND */
    .legend-wrapper .legend-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        font-size: 14px;
    }

    .legend-wrapper .legend-item {
        display: flex;
        align-items: center;
    }

    .legend-wrapper .legend-color {
        width: 14px;
        height: 14px;
        margin-right: 6px;
        border-radius: 2px;
    }

    .legend-wrapper .color-today {
        background-color: purple;
    }

    .legend-wrapper .color-selected {
        background-color: #007bff;
    }

    .legend-wrapper .color-working {
        background-color: #fff;
    }

    .legend-wrapper .color-nonworking {
        background-color: orange;
    }

    .legend-wrapper .color-approved {
        background-color: green;
    }

    .legend-wrapper .color-pending {
        background-color: red;
    }

    .legend-wrapper .color-holiday {
        background-color: #0d1a26;
    }

    /* CALENDAR */
    .calendar-wrapper {
        min-height: 440px;
    }

    .calendar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: bold;
        font-size: 18px;
        padding: 10px;
        background: #007bff;
        color: white;
    }

    .calendar-body {
        padding: 10px;
    }

    .day-names,
    .calendar-days {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        text-align: center;
    }

    .day-name {
        font-weight: bold;
        padding: 5px 0;
    }

    .day {
        padding: 10px 0;
        border-radius: 6px;
        margin: 2px;
        cursor: pointer;
        position: relative;
    }

    /* STATUS CLASSES */
    .day.today {
        background-color: purple;
        color: #fff;
    }

    .day.selected {
        border: 2px solid #007bff;
    }


    .day.approved {
        border-bottom: 3px solid green;
    }

    .day.non-working {
        border-bottom: 3px solid orange;
    }

    .day.pending {
        border-bottom: 3px solid red;
        color: inherit;
    }

    .day.holiday {
        border-bottom: 3px solid #0d1a26;
        color: inherit;
    }

    .day.empty {
        visibility: hidden;
    }

    /* ARROWS */
    .arrow {
        cursor: pointer;
    }

    /* TOOLTIPS */
    .tooltip-box {
        position: absolute;
        bottom: 110%;
        left: 50%;
        transform: translateX(-50%);
        background-color: #343a40;
        color: #fff;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        display: none;
        z-index: 1;
        white-space: nowrap;
    }

    .day:hover .tooltip-box {
        display: block;
    }

    /* WRAPPER FOR OTHER CONTENT */
    .recent-box {
        max-height: 440px;
        overflow-y: auto;
    }

    .leave-item {
        margin-bottom: 5px;
    }

    .bg-warning.text-white>div span {
        color: #fff !important;
    }

    .bg-warning.text-white>div span.badge.badge-light {
        color: #000 !important;
    }

    .fade-in {
        animation: fadeIn 0.8s ease-in;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }
</style>

@section('content')

<!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6">
                <h1 class="m-0">Dashboard</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">Dashboard</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->

<section class="container-fluid legend-wrapper">
    <div class="row">
        <div class="col-12">
            <div class="legend-container mb-4">
                <div class="legend-item">
                    <div class="legend-color color-today"></div>
                    <p class="mb-0">Today</p>
                </div>
                <div class="legend-item">
                    <div class="legend-color color-selected"></div>
                    <p class="mb-0">Selected</p>
                </div>
                <div class="legend-item">
                    <div class="legend-color color-working"></div>
                    <p class="mb-0">Working Day</p>
                </div>
                <div class="legend-item">
                    <div class="legend-color color-nonworking"></div>
                    <p class="mb-0"> Non-Working Day</p>
                </div>
                <div class="legend-item">
                    <div class="legend-color color-approved"></div>
                    <p class="mb-0">Approved</p>
                </div>
                <div class="legend-item">
                    <div class="legend-color color-pending"></div>
                    <p class="mb-0">Pending / Cancellation Pending</p>
                </div>
                <div class="legend-item">
                    <div class="legend-color color-holiday"></div>
                    <p class="mb-0">Holiday</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="calendar-wrapper card m-0">
                <div class="calendar-header">
                    <span class="arrow" onclick="changeMonth(-1, 1)">&#8592;</span>
                    <span id="calendar-title1"></span>
                    <span class="arrow" onclick="changeMonth(1, 1)">&#8594;</span>
                </div>
                <div class="calendar-body">
                    <div class="day-names">
                        <div class="day-name">Sun</div>
                        <div class="day-name">Mon</div>
                        <div class="day-name">Tue</div>
                        <div class="day-name">Wed</div>
                        <div class="day-name">Thu</div>
                        <div class="day-name">Fri</div>
                        <div class="day-name">Sat</div>
                    </div>
                    <div class="calendar-days" id="calendar-days1"></div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="calendar-wrapper card m-0">
                <div class="calendar-header">
                    <span class="arrow" onclick="changeMonth(-1, 2)">&#8592;</span>
                    <span id="calendar-title2"></span>
                    <span class="arrow" onclick="changeMonth(1, 2)">&#8594;</span>
                </div>
                <div class="calendar-body">
                    <div class="day-names">
                        <div class="day-name">Sun</div>
                        <div class="day-name">Mon</div>
                        <div class="day-name">Tue</div>
                        <div class="day-name">Wed</div>
                        <div class="day-name">Thu</div>
                        <div class="day-name">Fri</div>
                        <div class="day-name">Sat</div>
                    </div>
                    <div class="calendar-days" id="calendar-days2"></div>
                </div>
            </div>
        </div>
      <div class="col-md-4">
    <div class="card card-outline card-primary">
        <div class="recent-box card-body p-3">
            <div class="mb-4">
                <h6 class="font-weight-bold border-bottom pb-2">Recent Leave Updates</h6>
                <ul id="leave-updates" class="list-unstyled mb-0">

                    {{-- Sick Leave --}}
                    <li class="leave-item">
                        <div class="d-flex justify-content-between align-items-center">
                            <span>SL - Sick Leave</span>
                            <span class="badge badge-light font-weight-normal">
                                Unlimited
                            </span>
                        </div>
                    </li>

                    {{-- Casual Leave --}}
                    <li class="leave-item">
                        <div class="d-flex justify-content-between align-items-center">
                            <span>CL - Casual Leave</span>
                            <span class="badge badge-light font-weight-normal">
                                {{ $remainingLeaves['cl'] ?? 0 }} left
                            </span>
                        </div>
                    </li>

                    {{-- Paid Leave --}}
                    <li class="leave-item">
                        <div class="d-flex justify-content-between align-items-center">
                            <span>PL - Paid Leave</span>
                            <span class="badge badge-light font-weight-normal">
                                {{ $remainingLeaves['pl'] ?? 0 }} left
                            </span>
                        </div>
                    </li>

                    {{-- Restricted Holiday --}}
                    <li class="leave-item">
                        <div class="d-flex justify-content-between align-items-center">
                            <span>RH - Restricted Holiday</span>
                            <span class="badge badge-light font-weight-normal">
                                {{ $remainingLeaves['rh'] ?? 0 }} left
                            </span>
                        </div>
                    </li>

                    {{-- Comp. Off --}}
                    <li class="leave-item">
                        <div class="d-flex justify-content-between align-items-center">
                            <span>CO - Comp. Off</span>
                            <span class="badge badge-light font-weight-normal">
                                   {{ $com_off->count ?? 0 }} left
                            </span>
                        </div>
                        <div class="text-danger small pl-1 mt-1">
                            Not allowed from 1st–7th of the month
                        </div>
                    </li>
                </ul>

                <a href="#" id="toggleLeave" class="d-block mt-2 text-primary text-sm text-right">Show More</a>
            </div>

            {{-- Upcoming Holidays --}}
            <div class="up-wrapper">
                <h6 class="font-weight-bold border-bottom pb-2">Upcoming Holidays</h6>
                @foreach($holidays as $holiday)
                    <div class="mb-3 list-wrapp">
                        <div class="d-flex justify-content-between">
                            <span>
                                <strong>{{ $holiday->name }}</strong>
                                <span class="text-muted">(1 day)</span>
                            </span>
                            <span class="text-success font-weight-bold">Holiday</span>
                        </div>
                        <div class="text-muted small">
                            {{ \Carbon\Carbon::parse($holiday->date)->format('D, M d, Y') }}
                        </div>
                    </div>
                @endforeach
                <a href="{{ url('/employee/holiday-list') }}" class="d-block text-primary text-sm text-right">Show All</a>
            </div>
        </div>
    </div>
</div>

</section>
@endsection
@push('scripts')
<script>
    const today = new Date();
    const selectedDates = new Set();

    // Dynamically add today's date to the approvedDates for tooltip
    const formatDate = (y, m, d) =>
        `${y}-${String(m + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;


   const approvedDates = @json($approvedDates);
    // const approvedDates = {
    //     '2025-07-06': {
    //         label: 'Holiday',
    //         type: 'holiday'
    //     },
    //     '2025-07-10': {
    //         label: 'Approved Leave',
    //         type: 'approved'
    //     },
    //     '2025-07-02': {
    //         label: 'Pending',
    //         type: 'pending'
    //     },
    //     '2025-07-05': {
    //         label: 'Working Day',
    //         type: 'working'
    //     }, // Optional
    //     '2025-07-19': {
    //         label: 'Non-Working Day',
    //         type: 'non-working'
    //     }, // Optional
    //     [formatDate(today.getFullYear(), today.getMonth(), today.getDate())]: {
    //         label: 'Today',
    //         type: 'today'
    //     }
    // };


    console.log(approvedDates);

    // Automatically select all approved dates on load
// Object.keys(approvedDates).forEach(date => selectedDates.add(date));

    let [currentMonth1, currentYear1] = [today.getMonth(), today.getFullYear()];
    let currentMonth2 = (currentMonth1 + 1) % 12;
    let currentYear2 = (currentMonth1 + 1 > 11) ? currentYear1 + 1 : currentYear1;

    function renderCalendar(month, year, containerId, titleId) {
        const title = document.getElementById(titleId);
        const daysContainer = document.getElementById(containerId);

        title.textContent = new Date(year, month).toLocaleString('default', {
            month: 'long',
            year: 'numeric'
        });

        daysContainer.innerHTML = '';

        const firstDay = new Date(year, month, 1).getDay();
        const totalDays = new Date(year, month + 1, 0).getDate();
        const totalCells = 42;

        // Fill empty cells before first day
        for (let i = 0; i < firstDay; i++) {
            const div = document.createElement('div');
            div.className = 'day empty';
            daysContainer.appendChild(div);
        }

        for (let d = 1; d <= totalDays; d++) {
            const dateKey = formatDate(year, month, d);
            const div = document.createElement('div');
            div.className = 'day';
            div.textContent = d;

            const weekday = new Date(year, month, d).getDay();
            const info = approvedDates[dateKey];

            // Weekend styling
            if ([0, 6].includes(weekday)) {
                div.classList.add('non-working');
            } else {
                div.classList.add('working');
            }

            // Status class from approvedDates
            if (info) {
                div.classList.add(info.type);

                const tip = document.createElement('div');
                tip.className = 'tooltip-box';
                tip.textContent = info.label;
                div.appendChild(tip);
            }

            // Today class (highlight)
            if (
                d === today.getDate() &&
                month === today.getMonth() &&
                year === today.getFullYear()
            ) {
                div.classList.add('today');
            }

            // Selected styling
            if (selectedDates.has(dateKey)) {
                div.classList.add('selected');
            }

            // OnClick toggle selection
            div.addEventListener('click', () => {
                selectedDates.has(dateKey) ?
                    selectedDates.delete(dateKey) :
                    selectedDates.add(dateKey);
                renderAllCalendars();
            });

            daysContainer.appendChild(div);
        }

        // Fill remaining empty cells to keep grid uniform (6 rows)
        const filled = firstDay + totalDays;
        for (let i = 0; i < totalCells - filled; i++) {
            const div = document.createElement('div');
            div.className = 'day empty';
            daysContainer.appendChild(div);
        }
    }

    function renderAllCalendars() {
        renderCalendar(currentMonth1, currentYear1, 'calendar-days1', 'calendar-title1');
        renderCalendar(currentMonth2, currentYear2, 'calendar-days2', 'calendar-title2');
    }

    function changeMonth(delta, cal = 1) {
        if (cal === 1) {
            currentMonth1 += delta;
            if (currentMonth1 > 11) currentMonth1 = 0, currentYear1++;
            if (currentMonth1 < 0) currentMonth1 = 11, currentYear1--;
            currentMonth2 = (currentMonth1 + 1) % 12;
            currentYear2 = (currentMonth1 + 1 > 11) ? currentYear1 + 1 : currentYear1;
        } else {
            currentMonth2 += delta;
            if (currentMonth2 > 11) currentMonth2 = 0, currentYear2++;
            if (currentMonth2 < 0) currentMonth2 = 11, currentYear2--;
            currentMonth1 = (currentMonth2 - 1 + 12) % 12;
            currentYear1 = (currentMonth2 - 1 < 0) ? currentYear2 - 1 : currentYear2;
        }
        renderAllCalendars();
    }

    document.addEventListener('DOMContentLoaded', renderAllCalendars);
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const list = document.getElementById('leave-updates'),
            items = list.querySelectorAll('.leave-item'),
            toggleBtn = document.getElementById('toggleLeave');
        let expanded = false;

        const bgClasses = ['bg-primary', 'bg-success', 'bg-danger', 'bg-warning', 'bg-info', 'bg-dark']
            .sort(() => 0.5 - Math.random());

        items.forEach((item, index) => {
            const bg = bgClasses[index % bgClasses.length];
            item.classList.add(bg, 'text-white', 'p-1', 'rounded', 'fade-in');
        });

        function updateList() {
            items.forEach((item, i) => item.style.display = (expanded || i < 2) ? 'block' : 'none');
            toggleBtn.textContent = expanded ? 'Show Less' : 'Show More';
        }

        toggleBtn.addEventListener('click', e => {
            e.preventDefault();
            expanded = !expanded;
            updateList();
        });

        updateList(); // Initial setup
    });
</script>


@endpush