<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutor | @yield('title')</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="{{ asset('quil.css') }}">
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=dashboard" />
    <link rel="stylesheet" href="{{ asset('toaster/toaster.min.css') }}">
    <link rel="stylesheet" href="{{ asset('dashboards.css') }}">
    <meta name="csrf-token" content="{{ csrf_token() }}">


    <link rel="stylesheet" href="{{ asset('tutor/Fonts/Inter/Inter-VariableFont_opsz,wght.ttf') }}">
    @vite('resources/css/app.css')
    @vite('resources/js/app.js')

</head>


<script src="{{ asset('jquery/jquery.min.js') }}"></script>
<script src="{{ asset('quil.js') }}"></script>
<script src="{{ asset('toaster/toaster.min.js') }}"></script>

<script src="https://js.pusher.com/8.4.0/pusher.min.js"></script>
{{-- <script src="{{ asset('notification.js') }}"></script> --}}



@if (session()->has('success'))
    <script>
        toastr.success('{{ session('success') }}')
    </script>
@endif

@if (session()->has('error'))
    <script>
        toastr.error('{{ session('error') }}')
    </script>
@endif
<script>
    function toggleSidebar() {
        const sidebar = document.getElementById('sidebar');
        const overlay = document.getElementById('overlay');
        sidebar.classList.toggle('-translate-x-full');
        overlay.classList.toggle('hidden');
    }
</script>
<script>
    function toggleAccordion(btn) {
        const wrapper = btn.parentElement;
        const body = wrapper.querySelector('.accordionBody');
        const icon = btn.querySelector('i');

        if (!body) return;

        body.classList.toggle('hidden');

        if (body.classList.contains('hidden')) {
            icon.classList.remove('fa-minus');
            icon.classList.add('fa-plus');
        } else {
            icon.classList.remove('fa-plus');
            icon.classList.add('fa-minus');
        }
    }
</script>

<script>
    document.querySelectorAll('.editor').forEach((editor, index) => {
        new Quill(editor, {
            theme: 'snow'
        });

    });
</script>
<script>
    //     document.addEventListener("DOMContentLoaded", function () {
    //         console.log(window.Echo)
    //     if (window.Echo) {

    //         window.Echo.channel('my-channel')
    //         .listen('.my-event', (data) => {

    //             let userId = '{{ auth()->id() }}'

    //             if (data.user_id == userId) {

    //                 var counter = document.getElementById('notificationDropdownCount');

    //                 if (counter) {
    //                     counter.textContent = parseInt(counter.textContent || 0) + 1;
    //                 }

    //                 var list = document.getElementById('notificationDropdownSection');

    //                 if (list) {

    //                     let emptyText = list.querySelector('.text-gray-400');

    //                     if (emptyText && emptyText.textContent.trim() === "No notifications") {
    //                         emptyText.remove();
    //                     }

    //                     list.insertAdjacentHTML("afterbegin", data.html);

    //                     toastr.success('New notification received');
    //                 }
    //             }

    //         });

    //     }

    // });
    document.addEventListener("DOMContentLoaded", function() {
        console.log(window.Echo)
        if (window.Echo) {
            window.Echo.channel('my-channel')
                .listen('.my-event', (data) => {
                    console.log('🔥 Event received:', data);
                    alert(data.message);
                });

        }

    });
</script>
@stack('scripts')

</html>
