@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@php
    // Membagi room_list menjadi 3 kolom per baris
    // $chunkedRooms = array_chunk($room_list, 3);
@endphp
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <a href="{{ url(($bookUrl ?? 'trsmybooking') . '/add') }}" id="floating-booking-btn"
        class="position-fixed d-flex align-items-center justify-content-center text-white text-decoration-none overflow-hidden"
        style="right: 2rem; bottom: 2rem; width: 72px; height: 72px; z-index: 1050; background-color: rgb(2, 130, 132); box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 1rem 0px; border-radius: 16px; transition: all 0.25s ease;"
        title="Buat Booking" aria-label="Buat Booking">
        <i id="floating-booking-icon" class="fas fa-plus"></i>
        <span id="floating-booking-text" class="position-absolute fw-bold"
            style="opacity: 0; transform: translateY(8px); transition: all 0.25s ease;">Booking</span>
        @if (in_array(session('user')->idroles, ['recept', 'admins'], true))
            <span
                class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">{{ $countNotApproved ?? 0 }}</span>
        @endif
    </a>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const btn = document.getElementById('floating-booking-btn');
            const icon = document.getElementById('floating-booking-icon');
            const text = document.getElementById('floating-booking-text');

            if (!btn || !icon || !text) return;

            btn.addEventListener('mouseenter', function() {
                btn.style.width = '140px';
                btn.style.height = '56px';
                btn.style.borderRadius = '16px';
                btn.style.backgroundColor = 'rgb(3, 166, 168)';
                icon.style.opacity = '0';
                icon.style.transform = 'translateY(-8px)';
                text.style.opacity = '1';
                text.style.transform = 'translateY(0)';
            });

            btn.addEventListener('mouseleave', function() {
                btn.style.width = '72px';
                btn.style.height = '72px';
                btn.style.borderRadius = '16px';
                btn.style.backgroundColor = 'rgb(2, 130, 132)';
                icon.style.opacity = '1';
                icon.style.transform = 'translateY(0)';
                text.style.opacity = '0';
                text.style.transform = 'translateY(8px)';
            });
        });
    </script>

    <div class="container-fluid py-4">
        <div class="row">

            {{-- Kalender Booking --}}
            <div class="col-md-8 mb-4">
                <div class="card">
                    <div class="card-header mx-2 pb-0 ">

                        <h5 for="input-{{ $dmenu }}-schedule-setting" class="form-control-label">Kalender Booking
                        </h5>
                    </div>
                    <div class="card-body pt-0 text-center">
                        {{-- Multi date Calender --}}
                        <x-multi-date-calender id="input-{{ $dmenu }}-calendar" dmenu="{{ $dmenu }}"
                            bookArr="{{ json_encode($bookArr) }}" room_list="{{ json_encode($room_list) }}" />
                    </div>
                </div>
            </div>

            {{-- Status Ruangan --}}
            <div class="col-md-4 mb-4">
                <div class="card">
                    <div class="card-header mx-2 pb-0 ">
                        <h5 for="currentDate" id="currentDate" class="form-control-label"></h5>
                        <p class="small text-disabled">*Status akan diperbarui setiap 1 menit</p>
                    </div>
                    <div class="card-body pt-0 text-center">
                        <div class="accordion text-black" id="accordionExample">

                            {{-- Start Loop Menampilkan List Ruangan --}}
                            @foreach ($room_list as $key => $room)
                                {{-- Buka Row Baru setiap 3 item --}}
                                @if ($key % 3 == 0)
                                    <div class="col mb-3">

                                        {{-- Nama lantai --}}
                                        @php
                                            $roomFloor = floor($key / 3) + 1;
                                            $floor = $roomFloor == 1 ? 'Lantai 2' : 'Lantai 1';
                                        @endphp

                                        <h5 class="form-control-label bg-gray-200 rounded rounded-lg text-lg py-1">
                                            {{ $floor }}</h5>
                                @endif

                                <div class="w-full">
                                    <li class="nav-item list-unstyled magang-hover:bg-gray-200 magang-hover:rounded-full">
                                        <a data-bs-toggle="collapse" href="#collapse{{ $room->name }}"
                                            class="nav-link magang-relative d-flex align-items-center justify-content-between magang-room-status-box"
                                            role="button" data-order='{{ $key }}'
                                            data-unavail-start-date="{{ $room->start_date ? $room->start_date : '' }}"
                                            data-unavail-end-date="{{ $room->end_date ? $room->end_date : '' }}">
                                            <div class="d-flex align-items-center gap-2">

                                                <span
                                                    class="magang-status-box {{ $room->status == 'reserv' ? 'magang-bg-reserved' : ($room->status == 'occu' ? 'magang-bg-occupied' : ($room->status == 'avail' ? 'magang-bg-available' : 'magang-bg-unavailable')) }}"></span>

                                                <div class="text-start mx-2 text-bold">
                                                    <span class="nav-link-text d-block text-lg">{{ $room->name }}</span>
                                                    <div class="small">

                                                        {{-- Status Text --}}
                                                        @if ($room->status == 'reserv')
                                                            Sudah Dipesan
                                                        @elseif ($room->status == 'occu')
                                                            Sedang Digunakan
                                                        @elseif ($room->status == 'avail')
                                                            Tersedia
                                                        @else
                                                            Tidak Tersedia
                                                        @endif

                                                    </div>
                                                </div>
                                            </div>
                                            <i class="ni ni-bold-down text-sm" id="arrow{{ $room->name }}"></i>
                                        </a>

                                        {{-- Start Data Dummy --}}
                                        <div class="collapse" id="collapse{{ $room->name }}"
                                            data-bs-parent="#accordionExample">
                                            <ul class="nav flex-column ms-3">

                                                {{-- Start Loop Data Dummy --}}
                                                @php
                                                    $isBooking = false;
                                                    $filteredBook = array_filter($bookArr, function ($item) {
                                                        return today()->isSameDay($item['date']);
                                                    });

                                                    // Sorting pesanan berdasarkan jam mulai secara ASC
                                                    usort($filteredBook, function ($a, $b) {
                                                        $timeComparison =
                                                            strtotime($a['start_time']) - strtotime($b['start_time']);
                                                        // Jika jam mulai sama, bandingkan berdasarkan jam selesai
                                                        if ($timeComparison === 0) {
                                                            return strtotime($a['end_time']) -
                                                                strtotime($b['end_time']);
                                                        }
                                                        return $timeComparison;
                                                    });
                                                @endphp

                                                {{-- Jika ada Booking di ruangan && dateNow --}}
                                                @foreach ($filteredBook as $value)
                                                    @if ($value['room_name'] == $room->name)
                                                        @php
                                                            $isBooking = true;
                                                        @endphp
                                                        <li class="nav-item list-unstyled">
                                                            <a class="nav-link d-flex justify-content-between align-items-center text-start disabled"
                                                                href="#">
                                                                <span>{{ substr($value['start_time'], 0, 5) }} -
                                                                    {{ substr($value['end_time'], 0, 5) }}</span>
                                                                <span
                                                                    class="text-end">{{ $value['representation'] }}</span>
                                                            </a>
                                                        </li>
                                                    @endif
                                                @endforeach

                                                {{-- Jika Tidak ada Booking di ruangan && dateNow --}}
                                                @if (!$isBooking)
                                                    <li class="nav-item list-unstyled">
                                                        <a class="nav-link d-flex justify-content-between align-items-center text-start disabled"
                                                            href="#">
                                                            <span class="text-center">Tidak Ada booking hari ini</span>
                                                        </a>
                                                    </li>
                                                @endif
                                                {{-- End Loop Data Dummy --}}
                                            </ul>
                                        </div>
                                    </li>
                                </div>

                                {{-- Tutup Col setiap 3 item --}}
                                @if ($key % 3 == 2 || $loop->last)
                        </div>
                        @endif
                        @endforeach
                        {{-- End Loop Menampilkan List Ruangan --}}

                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    @if ($authorize->add == '1')
        {{-- button add --}}
        {{-- <button class="magang-absolute magang-p-0 magang-border-none magang-rounded-full bg-primary"
            onclick="window.location='{{ URL::to($url_menu . '/add') }}'"
            style="bottom: 0; right: 0;"
        >
            <div class="magang-text-white font-weight-bold magang-relative magang-p-8 magang-rounded-full">
                <i class="magang-absolute fas fa-plus" style="top: 50%; left: 50%; transform: translate(-50%, -50%);"></i>
            </div>
        </button> --}}
    @endif
@endsection

@push('js')
    <script src="./assets/js/plugins/chartjs.min.js"></script>
    <script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const userRole = @json(session('user')->idroles);
            console.log("User Role:", userRole);

            if (userRole === 'recept') {
                const basePath = '/msjbooking';
                window.OneSignalDeferred = window.OneSignalDeferred || [];
                window.OneSignalDeferred.push(async function(OneSignal) {
                    await OneSignal.init({
                        appId: "{{ env('ONESIGNAL_APP_ID') }}",
                        notifyButton: {
                            enable: true
                        },
                        serviceWorkerPath: basePath + '/OneSignalSDKWorker.js',
                        serviceWorkerUpdaterPath: basePath + '/OneSignalSDKUpdaterWorker.js',
                        serviceWorkerParam: {
                            scope: basePath + '/'
                        }
                    });

                    try {
                        const isSubscribed = await OneSignal.User.PushSubscription.optedIn;
                        console.log("Push Notifications Enabled?", isSubscribed);

                        if (!isSubscribed) {
                            await OneSignal.User.PushSubscription.subscribe();
                            console.log("User successfully subscribed to notifications.");
                        }
                    } catch (e) {
                        console.error("OneSignal subscription error:", e);
                    }
                });
            }
        });
    </script>





    {{-- <script>
        var ctx1 = document.getElementById("chart-line").getContext("2d");

        var gradientStroke1 = ctx1.createLinearGradient(0, 230, 0, 50);

        gradientStroke1.addColorStop(1, 'rgba(251, 99, 64, 0.2)');
        gradientStroke1.addColorStop(0.2, 'rgba(251, 99, 64, 0.0)');
        gradientStroke1.addColorStop(0, 'rgba(251, 99, 64, 0)');
        new Chart(ctx1, {
            type: "line",
            data: {
                labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                datasets: [{
                    label: "Mobile apps",
                    tension: 0.4,
                    borderWidth: 0,
                    pointRadius: 0,
                    borderColor: "#fb6340",
                    backgroundColor: gradientStroke1,
                    borderWidth: 3,
                    fill: true,
                    data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
                    maxBarThickness: 6

                }],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false,
                    }
                },
                interaction: {
                    intersect: false,
                    mode: 'index',
                },
                scales: {
                    y: {
                        grid: {
                            drawBorder: false,
                            display: true,
                            drawOnChartArea: true,
                            drawTicks: false,
                            borderDash: [5, 5]
                        },
                        ticks: {
                            display: true,
                            padding: 10,
                            color: '#fbfbfb',
                            font: {
                                size: 11,
                                family: "Open Sans",
                                style: 'normal',
                                lineHeight: 2
                            },
                        }
                    },
                    x: {
                        grid: {
                            drawBorder: false,
                            display: false,
                            drawOnChartArea: false,
                            drawTicks: false,
                            borderDash: [5, 5]
                        },
                        ticks: {
                            display: true,
                            color: '#ccc',
                            padding: 20,
                            font: {
                                size: 11,
                                family: "Open Sans",
                                style: 'normal',
                                lineHeight: 2
                            },
                        }
                    },
                },
            },
        });
    </script> --}}

    {{-- magang --}}
    <script>
        let roomStatusBox = document.querySelectorAll('.magang-room-status-box');
        let dateOutput = document.getElementById('currentDate');
        let holidays = @json($isHoliday);
        let desc = @json($holidayAll);
        // console.log('kkk', roomStatusBox);



        function currentDate() {
            let now = new Date();
            let dateNow = now.toISOString().split('T')[0];
            let dateVar = prettyLongDate(dateNow);
            dateOutput.textContent = dateVar;
        }

        function renderPopover(parentElement, startDate, endDate) {
            let container = document.createElement("div");
            container.role = "tooltip";
            container.className =
                "magang-popover-top magang-whitespace-no-wrap magang-p-4 magang-rounded-md magang-bg-white"
            container.style.setProperty('color', '#344767', 'important');

            let popoverTitle = document.createElement("div");
            popoverTitle.className =
                "magang-font-bold magang-text-lg magang-p-2 magang-bg-unavailable magang-rounded-t-md text-white";
            popoverTitle.innerHTML = "Tidak Tersedia";
            container.appendChild(popoverTitle)

            let table = document.createElement("table");
            table.innerHTML = `
                <thead class="table-auto">
                    <tr class="magang-font-semibold magang-bg-gray-200">
                        <td>Tanggal Mulai</td>
                        <td>Tanggal Selesai</td>
                    </tr>
                </thead>
                <tbody></tbody>
            `;
            container.appendChild(table);

            let tr = document.createElement('tr');
            tr.className = "magang-py-1 magang-px-2"

            let tdStartDate = document.createElement('td');
            tdStartDate.innerHTML = prettyShortDate(startDate);

            let tdEndDate = document.createElement('td');
            tdEndDate.innerHTML = prettyShortDate(endDate);

            tr.appendChild(tdStartDate);
            tr.appendChild(tdEndDate);
            table.appendChild(tr);

            parentElement.appendChild(container);
            return container;
        }

        function showPopover(thisOrder) {
            // const thisOrder = this.dataset.order;
            const popoverElement = document.querySelector('a[data-order="' + thisOrder + '"]').lastElementChild;
            // const popoverElement = this.lastElementChild;
            // console.log("popoverElement show", popoverElement, thisOrder);
            if (popoverElement) {
                popoverElement.classList.add("magang-popover-top-show");
            }
        }

        function hidePopover(thisOrder) {
            // const thisOrder = this.dataset.order;
            const popoverElement = document.querySelector('a[data-order="' + thisOrder + '"]').lastElementChild;
            // const popoverElement = this.lastElementChild;
            // console.log("popoverElement hide", popoverElement, thisOrder);
            if (popoverElement) {
                popoverElement.classList.remove("magang-popover-top-show");
            }
        }

        currentDate();

        roomStatusBox.forEach(box => {
            if (box.dataset.unavailStartDate && box.dataset.unavailEndDate) {
                const badge = document.createElement("span");
                badge.className = "magang-status-box-badge";
                box.firstElementChild.firstElementChild.appendChild(badge);
                let popover = renderPopover(box, box.dataset.unavailStartDate, box.dataset.unavailEndDate);
                box.addEventListener('mouseenter', function() {
                    showPopover(box.dataset.order)
                });
                box.addEventListener('mouseleave', function() {
                    hidePopover(box.dataset.order)
                });
                popover.addEventListener('mouseover', function() {
                    hidePopover(box.dataset.order)
                });

            }
        });
        document.addEventListener("DOMContentLoaded", function() {
            document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(toggle => {
                let target = document.querySelector(toggle.getAttribute("href"));
                let arrow = document.querySelector(
                    `#arrow${toggle.getAttribute("href").replace("#collapse", "")}`);

                target.addEventListener('show.bs.collapse', function() {
                    arrow.style.transform = "rotate(180deg)";
                    arrow.style.transition = "transform 0.3s ease";
                });

                target.addEventListener('hide.bs.collapse', function() {
                    arrow.style.transform = "rotate(0deg)";
                    arrow.style.transition = "transform 0.3s ease";
                });
            });

        });
    </script>
@endpush