@extends('layouts.app')
@section('content')

    <style>
        .dropdown-item.active {
            color: #000000;
            background-color: #fff
        }
    </style>
    @auth
        @php($canManageGuide = auth()->user()->canManageGuide())

        <script src="{{ asset('js/pdf-viewer.js') }}"></script>
        <link rel="manifest" href="/manifest.json">
        <meta name="theme-color" content="#0d6efd">

        @if (auth()->user()->email === 'donar@sample.com')
        @endif
        <div class="container-fluid guide-shell">
            <button onclick="refreshOfflineStorage()" class="btn-refresh btn btn-info guide-sync-btn">
                Update Offline Content
            </button>

            <div id="offline-status" class="guide-sync-status" style="display:none; width: 100%; background: #eee;">
                <span id="status-message">Ready</span>
                <div id="status-progress" style="height: 5px; background: blue; width: 0%;"></div>
            </div>
            <section class="guide-hero">
                <div>
                    <p class="guide-kicker">Guide Workspace</p>
                    <h1 class="guide-page-title">Clinical Guideline Navigator</h1>
                    <p class="guide-page-subtitle">Browse categories, manage navigation levels, and open resources from one workspace.</p>
                </div>
            </section>

            <div class="row guide-topbar guide-toolbar">
                {{-- <div class="col-sm-1 mt-3">
                    <button class="btn btn-secondary btn-sm" id="showServices"><i class="bi bi-list"></i></button>
                </div> --}}
                <div class="col-6 col-md-1">
                    <button id="navToggle" class="btn btn-outline-secondary guide-toolbar-btn">
                        <i id="navIcon" class="bi bi-list"></i>
                    </button>
                </div>


                <div class="col-12 col-md-9 form-group">
                    <select class="selectpicker form-control" id="key_word_search" data-live-search-style="contains"
                        data-live-search="true" title="Key Word Search">
                        @foreach ($main_nav as $index => $nav)
                            @if ($nav->key_word != null && count($nav->first_navs) == 0)
                                <option value={{ '[' . $index . ']' }}>{{ $nav->key_word . '-->' . $nav->pdf_name }}</option>
                            @else
                                @foreach ($nav->first_navs as $key => $first_nav)
                                    @if ($first_nav->key_word != null && count($nav->first_navs) == 0)
                                        <option value={{ '[' . $index . ',' . $key . ']' }}>
                                            {{ $first_nav->key_word . '-->' . $first_nav->pdf_name }}</option>
                                    @else
                                        @foreach ($first_nav['second_navs'] as $pointer => $seond_nav)
                                            <option value={{ '[' . $index . ',' . $key . ',' . $pointer . ']' }}>
                                                {{ $seond_nav->key_word . '-->' . $seond_nav->pdf_name }}</option>
                                        @endforeach
                                    @endif
                                @endforeach
                            @endif
                        @endforeach
                    </select>
                </div>
                <div class="col-6 col-md-2 text-md-end">
                    <button id="mainContentToggle" class="btn btn-outline-primary guide-toggle-btn guide-toolbar-btn w-100">
                        Hide Content
                    </button>
                </div>

            </div>
            <div class="row guide-layout">
                <nav class="col-12 col-lg-3 bg-light p-3 sidebar guide-sidebar-card" id="sidebar">
                    <div class="guide-sidebar-head">
                        <p class="guide-sidebar-kicker">Navigation Tree</p>
                        <h2 class="guide-sidebar-title">Guide Categories</h2>
                    </div>
                    <ul class="list-unstyled guide-nav-list">

                        {{-- <li class="dropdown-submenu">
                            <a class="side-item dropdown-item" href="#create_section" id="main-create" data-bs-toggle="dropdown"
                                role="button" aria-expanded="false">
                                <b><i class="bi bi-plus"></i></b> Create Main Nav
                            </a>
                        </li> --}}
                        @if ($canManageGuide)
                            <li>
                                <a class="side-item dropdown-item nav-create" href="#create_section" id="main-create"
                                    role="button">
                                    <b><i class="bi bi-plus"></i></b> Create Main Nav
                                </a>
                            </li>
                        @endif
                        @if ($main_nav != null)
                            @foreach ($main_nav as $index => $nav)
                                @if ($nav['sub_tag'] == 'No')
                                    <li class="nav-item btn btn-secondary btn-lg text-left pdf-show p-0" style="width:100%;">
                                        <a class="nav-link" href="#main" id="{{ $index }}" data-target='main'
                                            data-main-id="{{ $nav['id'] }}"
                                            style="color:#fff;">
                                            {{ $index + 1 . '. ' . $nav['navigation_name'] }}
                                        </a>
                                    </li>
                                @else
                                    <li>
                                        <div class="btn-group dropend w-100">
                                            <button type="button" class="btn btn-secondary btn-lg dropdown-toggle text-left"
                                                data-main-id="{{ $nav['id'] }}"
                                                aria-expanded="false">
                                                {{ $index + 1 . '. ' . $nav['navigation_name'] }}
                                            </button>
                                            <ul class="side-drop-menu dropdown-menu">
                                                @if ($canManageGuide)
                                                    <li>
                                                        <a class="side-item dropdown-item nav-create" href="#create_section"
                                                            data-parent="{{ $index }}" id="first_nav_create" role="button">
                                                            <b><i class="bi bi-plus"></i></b> Create First Nav
                                                        </a>
                                                    </li>
                                                @endif

                                                @if (!empty($nav['first_navs']))
                                                    @foreach ($nav['first_navs'] as $key => $first_nav)
                                                        @if ($first_nav['sub_tag'] == 'No')
                                                            <li class="pdf-show">
                                                                <a class="side-item dropdown-item"
                                                                    data-main={{ $index }} id={{ $key }}
                                                                    data-first-id="{{ $first_nav['id'] }}"
                                                                    data-target="first_nav"
                                                                    href="#main">{{ $index + 1 . '.' . $key + 1 . '. ' . $first_nav['navigation_name'] }}</a>
                                                            </li>
                                                        @else
                                                            <li class="dropdown-submenu">
                                                                <button class="side-item dropdown-item dropdown-toggle"
                                                                    href="#main" type="button" role="button"
                                                                    data-first-id="{{ $first_nav['id'] }}"
                                                                    aria-expanded="false">
                                                                    {{ $index + 1 . '.' . $key + 1 . '. ' . $first_nav['navigation_name'] }}
                                                                </button>
                                                                <ul class="side-drop-menu dropdown-menu">
                                                                    @if ($canManageGuide)
                                                                        <li>
                                                                            <a class="side-item dropdown-item nav-create"
                                                                                href="#create_section"
                                                                                data-parent="{{ $index }}"
                                                                                data-first="{{ $key }}"
                                                                                id="second_nav_create" role="button">
                                                                                <b><i class="bi bi-plus"></i></b> Create Second Nav
                                                                            </a>
                                                                        </li>
                                                                    @endif
                                                                    @foreach ($first_nav['second_navs'] as $pointer => $second_nav)
                                                                        <li class="pdf-show">
                                                                            <a class="side-item dropdown-item "
                                                                                data-main={{ $index }}
                                                                                data-first={{ $key }}
                                                                                id={{ $pointer }} data-target="second_nav"
                                                                                href="#main">{{ $index + 1 . '.' . $key + 1 . '.' . $pointer + 1 . '. ' . $second_nav['navigation_name'] }}</a>
                                                                        </li>
                                                                    @endforeach
                                                                    {{-- <li><a class="side-item dropdown-item" href="#">Facility based
                                                                            testing</a></li> --}}
                                                                </ul>
                                                            </li>
                                                        @endif
                                                    @endforeach
                                                @endif
                                            </ul>
                                        </div>
                                    </li>
                                @endif
                            @endforeach
                        @endif
                    </ul>
                </nav>

                @if ($canManageGuide)
                    <section id="create_section" class="col-12 col-lg-9 text-dark page-color text-white guide-editor-panel" style="display: none;">
                        <form action="" id="main_nav_create_form" method="" class="guide-form-card">
                            @csrf
                            <h1 class="header-text">Main Category Adding</h1>
                            <div class="row">
                                <h5 id="path_label_main" class="m-3 guide-context-badge"></h5>

                            <div class="col-sm-2">
                                <label for="" class="form-label">Main Category Title only ?</label>
                                <select name="sub_tag" id="sub_tag" class="form-select sub-tag" data-subtag='no-subTag'>
                                    <option value="No">No</option>
                                    <option value="Yes">Yes</option>
                                </select>
                            </div>
                            <div class="col-sm-6">
                                <label for="">Main Category Name</label>
                                <input type="text" name="main_nav_name" id="" class="form-control">
                            </div>
                        </div>
                        <div class="row justifiy-content-center no-subTag">

                            <div class="col-sm-6">
                                <label for="">Content Heading</label>
                                <input type="text" name="main_content_name" id="" class="form-control">
                            </div>
                            <div class="col-sm-6">
                                <label for="">File Name (accurately)</label>
                                <input type="text" name="pdf_name" id="" class="form-control">
                            </div>
                            <div class="col-sm-6">
                                <label for="">Description</label>
                                <input type="text" name="main_introl_name" id="" class="form-control">
                            </div>
                            <div class="col-sm-6">
                                <label for="">Key-word to find which Navigation Name quickly.</label>
                                <input type="text" name="key_word" id="" class="form-control">
                            </div>
                            <div class="col-sm-2 mt-5">
                                <input type="file" name="main_pdf" id=""accept="application/pdf">
                            </div>
                        </div>
                        <div class="row justify-content-center">
                            <input type="hidden" name="update_id" id="update_id" value="">
                            <input type="hidden" class="process" class="process" name="process" id="process"
                                value="">
                            <div class="col-auto">
                                <button type="submit" class="btn btn-info btn-primary" id="main_nav_save">
                                    Submit
                                </button>
                            </div>
                        </div>
                        </form>
                        <form action="" id="first_nav_create_form" class="guide-form-card">
                        @csrf
                        <h1 class="header-text">First Sub-Category Adding</h1>
                        <div class="row">

                            <h5 id="path_label_first" class="m-3 guide-context-badge"></h5>

                            <div class="col-sm-2">
                                <label for="" class="form-label">First Sub-Category title only?</label>
                                <select name="sub_tag" id="sub_tag" class="form-select sub-tag"
                                    data-subtag='first-no-subTag'>
                                    <option value="No">No</option>
                                    <option value="Yes">Yes</option>
                                </select>
                            </div>
                            <div class="col-sm-6">
                                <label for="">First Sub-Category Name</label>
                                <input type="text" name="main_nav_name" id="" class="form-control">
                            </div>
                        </div>
                        <div class="row justifiy-content-center first-no-subTag">

                            <div class="col-sm-6">
                                <label for="">Content Heading</label>
                                <input type="text" name="main_content_name" id="" class="form-control">
                            </div>
                            <div class="col-sm-6">
                                <label for="">File Name (accurately)</label>
                                <input type="text" name="pdf_name" id="" class="form-control">
                            </div>
                            <div class="col-sm-6">
                                <label for="">Description</label>
                                <input type="text" name="main_introl_name" id="" class="form-control">
                            </div>
                            <div class="col-sm-6">
                                <label for="">Key-word to find which Navigation Name quickly.</label>
                                <input type="text" name="key_word" id="" class="form-control">
                            </div>
                            <div class="col-sm-2 mt-5">
                                <input type="file" name="main_pdf" id=""accept="application/pdf">
                            </div>
                        </div>
                        <div class="row justify-content-center">

                            <div class="col-auto">
                                <input type="hidden" name="main_nav_id" id="main_nav">
                                <input type="hidden" name="process" id="process" value="">
                                <input type="hidden" name="update_id" id="update_id" value="">
                                <button type="submit" class="btn btn-info btn-primary" id="first_nav_save">
                                    Submit
                                </button>
                            </div>
                        </div>
                        </form>

                        <form action="" id="second_nav_create_form" class="guide-form-card">
                        @csrf
                        <h1 class="header-text">Second Sub-Category Adding</h1>
                        {{-- <div class="row">
                            <div class="col-sm-2">
                                <label for="" class="form-label">Second Sub-Category title only?</label>
                                <select name="sub_tag" id="sub_tag" class="form-select sub-tag" data-subtag='second-no-subTag'>
                                    <option value="No">No</option>
                                    <option value="Yes">Yes</option>
                                </select>
                            </div>
                            <div class="col-sm-6">
                                <label for="">Second Sub-Category Name</label>
                                <input type="text" name="main_nav_name" id="" class="form-control">
                            </div>
                        </div> --}}
                        <div class="row justifiy-content-center">
                            <h5 id="path_label_second" class="m-3 guide-context-badge"></h5>
                            <div class="col-sm-6">
                                <label for="">Second Sub-Category Name</label>
                                <input type="text" name="main_nav_name" id="" class="form-control">
                            </div>
                            <div class="col-sm-6">
                                <label for="">Content Heading</label>
                                <input type="text" name="main_content_name" id="" class="form-control">
                            </div>
                            <div class="col-sm-6">
                                <label for="">File Name (accurately)</label>
                                <input type="text" name="pdf_name" id="" class="form-control">
                            </div>
                            <div class="col-sm-6">
                                <label for="">Description</label>
                                <input type="text" name="main_introl_name" id="" class="form-control">
                            </div>
                            <div class="col-sm-6">
                                <label for="">Key-word to find which Navigation Name quickly.</label>
                                <input type="text" name="key_word" id="" class="form-control">
                            </div>
                            <div class="col-sm-2 mt-5">
                                <input type="file" name="main_pdf" id=""accept="application/pdf">
                            </div>
                        </div>
                        <div class="row justify-content-center ">

                            <div class="col-auto">
                                <input type="hidden" name="first_nav_id" id="first_nav_id">
                                <input type="hidden" name="update_id" id="update_id" value="">
                                <input type="hidden" class="process" name="process" id="process" value="">
                                <button type="submit" class="btn btn-info btn-primary" id="second_nav_save">
                                    Submit
                                </button>
                            </div>
                        </div>
                        </form>
                    </section>
                @endif
                <main class="col-12 col-lg-9 main-content page-color guide-viewer-panel" id="main_content">
                    <h2 class="header-text" id="main-header"></h2>
                    <p id="initialGreeting"></p>
                    <div id="pdf-viewer" class="guide-pdf-viewer" style="height: calc(100vh - 180px); display:block;">
                        <div id="pdf-toolbar" class="guide-pdf-toolbar" style="padding: .5rem 0;">
                            <a id="pdf-download" href="" class="btn btn-primary" download>
                                Download PDF
                            </a>
                            @if ($canManageGuide)
                                <button class="btn btn-info nav-create" id="pdf_update" style="display: none">Update</button>
                                <button class="btn btn-danger" id="nav_delete" style="display: none">Delete</button>
                            @endif

                            {{-- <a href="{{ asset('storage/pdf/c83a6f9f-2536-4dd9-8ea8-c736cf35e3c1.pdf') }}" target="_blank">Open PDF</a> --}}
                        </div>
                        <iframe id="pdf-iframe" src="" width="100%" height="100%" style="border:0;"></iframe>
                    </div>

                    {{-- <div id="content-area"><!-- your normal dynamic content goes here --></div> --}}
                </main>




            </div>
        @endauth
    @endsection
    @push('scripts')
        <script type="text/javascript">
            const GUIDE_SW_URL = '/service-worker.js?v=guide-pwa-v9';

            async function ensureGuideServiceWorkerReady() {
                    if (!("serviceWorker" in navigator)) {
                        return null;
                    }

                    try {
                        await navigator.serviceWorker.register(GUIDE_SW_URL);
                        return await navigator.serviceWorker.ready;
                    } catch (error) {
                        console.error('Service worker registration failed:', error);
                        return null;
                    }
                }

            async function refreshOfflineStorage() {
                    const registration = await ensureGuideServiceWorkerReady();
                    const activeWorker = navigator.serviceWorker.controller || registration?.active;

                    if (activeWorker) {
                        // Optional: Show an initial message
                        document.getElementById("offline-status").style.display = "block";
                        document.getElementById("status-message").innerText =
                            "Connecting to server...";

                        // Send command to Service Worker
                        activeWorker.postMessage({
                            type: "REQUEST_PURGE_AND_SYNC",
                        });
                    } else {
                        alert("PWA not ready. Please refresh the page.");
                    }
                }
                (function($) {
                    "use strict";

                    $(document).ready(function() {
                        ensureGuideServiceWorkerReady();

                        let main_naves = @json($main_nav);
                        console.log(main_naves);
                        const btn = document.getElementById('navToggle');
                        const icon = document.getElementById('navIcon');
                        const sidebar = document.getElementById('sidebar');
                        const mainContent = document.getElementById('main_content');
                        const mainContentToggle = document.getElementById('mainContentToggle');
                        let isOpen = false;

                        // 1. THE TRIGGER FUNCTION (Attach this to your button's onclick)


                        // 2. THE PROGRESS LISTENER (Your existing code, optimized)
                        if ("serviceWorker" in navigator) {
                            navigator.serviceWorker.addEventListener("message", (event) => {
                                if (event.data.type === "SYNC_PROGRESS") {
                                    const statusDiv = document.getElementById("offline-status");
                                    const messageSpan = document.getElementById("status-message");
                                    const progressBar = document.getElementById("status-progress");

                                    if (statusDiv) statusDiv.style.display = "block";
                                    if (messageSpan) messageSpan.innerText = event.data.message;
                                    if (progressBar) progressBar.style.width = event.data.percent + "%";

                                    // Hide the bar after 3 seconds if 100% complete
                                    if (event.data.percent === 100) {
                                        setTimeout(() => {
                                            if (statusDiv) statusDiv.style.display = "none";
                                        }, 3000);
                                    }
                                }
                            });
                        }

                        function sidebarshow() {
                            isOpen = !isOpen;
                            sidebar.classList.toggle('show', isOpen);

                            if (isOpen) {
                                icon.className = 'bi bi-x';

                            } else {
                                icon.className = 'bi bi-list';
                            }
                        }

                        btn.addEventListener('click', () => {
                            $('nav ul').removeClass('final-side');
                            sidebarshow()

                        });

                        function closeSidebarMenus() {
                            $('#sidebar .dropdown-submenu').removeClass('show');
                            $('#sidebar .dropdown-submenu > .dropdown-menu').removeClass('show');
                            $('#sidebar .dropdown-submenu > .dropdown-toggle').attr('aria-expanded', 'false');
                            $('#sidebar .btn-group.dropend').removeClass('show');
                            $('#sidebar .btn-group.dropend > .dropdown-menu').removeClass('show is-open');
                            $('#sidebar .btn-group.dropend > .dropdown-toggle').attr('aria-expanded', 'false');
                        }

                        function reloadGuideWithFocus(options = {}) {
                            const nextUrl = new URL("{{ route('guide.index') }}", window.location.origin);

                            if (options.mainId) {
                                nextUrl.searchParams.set('focus_main', options.mainId);
                            }

                            if (options.firstId) {
                                nextUrl.searchParams.set('focus_first', options.firstId);
                            }

                            nextUrl.searchParams.set('refresh', Date.now().toString());
                            window.location.assign(nextUrl.toString());
                        }

                        function findMainIdByFirstNavId(firstNavId) {
                            if (!firstNavId) {
                                return null;
                            }

                            for (const mainNav of main_naves) {
                                if (!Array.isArray(mainNav.first_navs)) {
                                    continue;
                                }

                                for (const firstNav of mainNav.first_navs) {
                                    if (String(firstNav.id) === String(firstNavId)) {
                                        return mainNav.id;
                                    }
                                }
                            }

                            return null;
                        }

                        function buildMainPath(mainIndex) {
                            return `${Number(mainIndex) + 1}. ${main_naves[mainIndex]['navigation_name']}`;
                        }

                        function buildFirstPath(mainIndex, firstIndex) {
                            return `${buildMainPath(mainIndex)}  -->  ${Number(mainIndex) + 1}.${Number(firstIndex) + 1}. ${main_naves[mainIndex]['first_navs'][firstIndex]['navigation_name']}`;
                        }

                        function buildSecondPath(mainIndex, firstIndex, secondIndex) {
                            return `${buildFirstPath(mainIndex, firstIndex)}  --> ${Number(mainIndex) + 1}.${Number(firstIndex) + 1}.${Number(secondIndex) + 1}. ${main_naves[mainIndex]['first_navs'][firstIndex]['second_navs'][secondIndex]['navigation_name']}`;
                        }

                        function revealFocusedNavFromQuery() {
                            const params = new URLSearchParams(window.location.search);
                            const focusMain = params.get('focus_main');
                            const focusFirst = params.get('focus_first');

                            if (!focusMain && !focusFirst) {
                                return;
                            }

                            closeSidebarMenus();

                            if (focusMain) {
                                const mainToggle = $('#sidebar .btn-group.dropend > .dropdown-toggle[data-main-id="' + focusMain + '"]')
                                    .first();
                                if (mainToggle.length) {
                                    const mainGroup = mainToggle.closest('.btn-group.dropend');
                                    const mainMenu = mainGroup.children('.dropdown-menu').first();
                                    mainGroup.addClass('show');
                                    mainMenu.addClass('show is-open');
                                    mainToggle.attr('aria-expanded', 'true');
                                } else {
                                    const mainLeaf = $('#sidebar a[data-main-id="' + focusMain + '"]').first();
                                    if (mainLeaf.length) {
                                        mainLeaf.addClass('active');
                                        setTimeout(() => mainLeaf.removeClass('active'), 1800);
                                    }
                                }
                            }

                            if (focusFirst) {
                                const firstToggle = $('#sidebar .dropdown-submenu > .dropdown-toggle[data-first-id="' + focusFirst + '"]')
                                    .first();
                                if (firstToggle.length) {
                                    const submenu = firstToggle.closest('.dropdown-submenu');
                                    submenu.addClass('show');
                                    submenu.children('.dropdown-menu').addClass('show');
                                    firstToggle.attr('aria-expanded', 'true');
                                    firstToggle.addClass('active');
                                    firstToggle[0].scrollIntoView({
                                        block: 'nearest'
                                    });
                                    setTimeout(() => firstToggle.removeClass('active'), 1800);
                                } else {
                                    const firstLeaf = $('#sidebar a[data-first-id="' + focusFirst + '"]').first();
                                    if (firstLeaf.length) {
                                        firstLeaf.addClass('active');
                                        firstLeaf[0].scrollIntoView({
                                            block: 'nearest'
                                        });
                                        setTimeout(() => firstLeaf.removeClass('active'), 1800);
                                    }
                                }
                            }

                            if (window.innerWidth <= 1024 && !sidebar.classList.contains('show')) {
                                $('nav ul').removeClass('final-side');
                                sidebarshow();
                            }
                        }

                        revealFocusedNavFromQuery();

                        $('#sidebar').on('click', '.btn-group.dropend > .dropdown-toggle', function(e) {
                            e.preventDefault();
                            e.stopPropagation();

                            const mainGroup = $(this).closest('.btn-group.dropend');
                            const mainMenu = mainGroup.children('.dropdown-menu').first();
                            const isOpen = mainMenu.hasClass('show') || mainMenu.hasClass('is-open');

                            closeSidebarMenus();

                            if (!isOpen) {
                                mainGroup.addClass('show');
                                mainMenu.addClass('show is-open');
                                $(this).attr('aria-expanded', 'true');
                            }
                        });

                        $('#sidebar').on('click', '.dropdown-submenu > .dropdown-toggle', function(e) {
                            e.preventDefault();
                            e.stopPropagation();
                            const submenu = $(this).closest('.dropdown-submenu');
                            const menu = submenu.children('.dropdown-menu');
                            const isOpen = submenu.hasClass('show');

                            submenu.siblings('.dropdown-submenu')
                                .removeClass('show')
                                .children('.dropdown-menu')
                                .removeClass('show');
                            submenu.siblings('.dropdown-submenu')
                                .find('> .dropdown-toggle')
                                .attr('aria-expanded', 'false');

                            submenu.toggleClass('show', !isOpen);
                            menu.toggleClass('show', !isOpen);
                            $(this).attr('aria-expanded', (!isOpen).toString());
                        });

                        $(document).on('click', function(e) {
                            if (!$(e.target).closest('#sidebar').length) {
                                closeSidebarMenus();
                            }
                        });

                        $('#sidebar').on('hidden.bs.dropdown', '.btn-group.dropend', function() {
                            $(this).find('.dropdown-submenu')
                                .removeClass('show')
                                .children('.dropdown-menu')
                                .removeClass('show');
                            $(this).find('.dropdown-submenu > .dropdown-toggle').attr('aria-expanded', 'false');
                            $(this).find('> .dropdown-menu').removeClass('is-open');
                        });

                        function syncMainToggleLabel() {
                            if (!mainContent || !mainContentToggle) {
                                return;
                            }
                            const isVisible = getComputedStyle(mainContent).display !== 'none';
                            mainContentToggle.textContent = isVisible ? 'Hide Content' : 'Show Content';
                        }

                        if (mainContent && mainContentToggle) {
                            mainContentToggle.addEventListener('click', () => {
                                const isVisible = getComputedStyle(mainContent).display !== 'none';
                                mainContent.style.display = isVisible ? 'none' : '';
                                syncMainToggleLabel();
                            });
                            syncMainToggleLabel();
                        }

                        $("#nav_delete").click('on', function() {
                            let id = $(this).data('id');
                            let target = $(this).data('target');
                            let nav = $(this).data('navigation');

                            let data = {
                                id: id,
                                target: target
                            }
                            let message;

                            if (confirm('Are you Sure to Delete' + nav + ' Nav.')) {
                                $.ajaxSetup({
                                    headers: {
                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
                                            'content'),
                                    }
                                });
                                $.ajax({
                                    type: 'DELETE',
                                    url: "{{ route('guide.delete') }}",

                                    dataType: 'json',
                                    contentType: 'application/json',
                                    data: JSON.stringify(data),
                                    success: function(response) {
                                        alert(response['message']);
                                        console.log(response);
                                        if (response['status'] == 200) {
                                            reloadGuideWithFocus();
                                        }
                                    }
                                })
                            }

                        })



                        $('.nav-create').on("click", function() {
                            closeSidebarMenus();

                            let target = $(this).attr('id');
                            let update_target = $(this).attr('data-target');
                            if (target == 'main-create' || update_target == 'main') {
                                $("#create_section,#main_nav_create_form").show();
                                $("#main_content,#first_nav_create_form,#second_nav_create_form").hide();
                                syncMainToggleLabel();
                                if (update_target == 'main') {
                                    $('#main_nav_save').text('Update')
                                    $("#path_label_main").show()
                                } else {
                                    $('#main_nav_save').text('Submit')
                                    $('form input[type="text"], form select').val('');
                                    $('.process').val('save')
                                    $("#path_label_main").hide()
                                }
                            } else if (target == 'first_nav_create' || update_target == 'first_nav') {
                                $("#create_section,#first_nav_create_form").show();
                                $("#main_content,#second_nav_create_form,#main_nav_create_form").hide();
                                syncMainToggleLabel();
                                let main_id = $(this).data('parent');
                                $('#main_nav').val(main_naves[main_id]['id']);
                                if (update_target == 'first_nav') {
                                    $('#first_nav_save').text('Update')
                                    $("#path_label_first").show()
                                } else {
                                    $('#first_nav_save').text('Submit')
                                    $('form input[type="text"], form select').val('');
                                    $('.process').val('save')
                                    $("#path_label_first")
                                        .text(`Parent Main Category: ${buildMainPath(main_id)}`)
                                        .show()
                                }

                            } else {
                                $("#create_section,#second_nav_create_form").show();
                                $("#main_content,#first_nav_create_form,#main_nav_create_form").hide();
                                syncMainToggleLabel();
                                let main_id = $(this).data('parent');
                                let first_id = $(this).data('first');

                                $('#first_nav_id').val(main_naves[main_id]['first_navs'][first_id]['id']);
                                if (update_target == 'second_nav') {
                                    $('#second_nav_save').text('Update')
                                    $("#path_label_second").show()
                                } else {
                                    $('#second_nav_save').text('Submit')
                                    $('form input[type="text"], form select').val('');
                                    $('.process').val('save')
                                    $("#path_label_second")
                                        .text(`Parent Path: ${buildFirstPath(main_id, first_id)}`)
                                        .show()
                                }
                            }
                            $('nav ul').addClass('final-side');
                            if ($('#sidebar').hasClass('show'))
                                sidebarshow()

                        })

                        function show_pdf(id, main_array, first_array, target) {
                            let fileName = null;
                            $("#main-header,#initialGreeting").text('');
                            $("#pdf-iframe").attr('src', '');
                            $("#pdf-download").attr('href', '').hide();
                            $('#create_section').hide();
                            $('#main_content').show();
                            syncMainToggleLabel();
                            $("#pdf_update").attr('data-target', '').hide()
                            $("#nav_delete").attr({
                                'data-target': '',
                                'data-id': '',
                                'data-navigation': ''
                            }).show();

                            $("form [name='process']").val('')
                            if (target == 'main') {
                                $("#nav_delete").attr({
                                    'data-target': 'main',
                                    'data-id': main_naves[id]['id'],
                                    'data-navigation': main_naves[id]['navigation_name']
                                });
                                $("#main_nav_create_form [name='sub_tag']").val(main_naves[id]['sub_tag'])
                                $("#main_nav_create_form [name='main_nav_name']").val(main_naves[id][
                                    'navigation_name'
                                ])
                                $("#main_nav_create_form [name='main_content_name']").val(main_naves[id][
                                    'content_header'
                                ])
                                $("#main_nav_create_form [name='pdf_name']").val(main_naves[id]['pdf_name'])
                                $("#main_nav_create_form [name='main_introl_name']").val(main_naves[id][
                                    'introl_content'
                                ])
                                $("#main_nav_create_form [name='key_word']").val(main_naves[id][
                                    'key_word'
                                ])
                                $("#path_label_main").text(buildMainPath(id));
                                $("#main_nav_create_form [name='update_id']").val(main_naves[id]['id'])
                                $("#main_nav_create_form [name='process']").val('update')
                                let subTagName = $("#main_nav_create_form .sub-tag").data('subtag')
                                let value = $("#main_nav_create_form .sub-tag").val();
                                subTagChange(subTagName, value)
                                fileName = main_naves[id]['fileName']

                                $('#main-header').text(main_naves[id]['content_header'])
                                $("#initialGreeting").text(main_naves[id]['introl_content'])
                                $("#pdf-iframe").attr('src', '/storage/pdf/' + fileName);



                                $("#pdf-download")
                                    .attr("href", "/storage/pdf/" + fileName)
                                    .text(main_naves[id]['pdf_name'])
                                    .attr("download", main_naves[id]['pdf_name']).show();
                            } else if (target == 'first_nav') {


                                $("#pdf_update").attr('data-parent', main_array)
                                $("#nav_delete").attr({
                                    'data-target': 'first_nav',
                                    'data-id': main_naves[main_array]['id'],
                                    'data-navigation': main_naves[main_array]['navigation_name']
                                });
                                $("#nav_id").attr('data-id', main_naves[main_array]['id']);
                                $("#first_nav_create_form [name='sub_tag']").val(main_naves[main_array][
                                    'first_navs'
                                ][id]['sub_tag'])
                                $("#first_nav_create_form [name='main_nav_name']").val(main_naves[main_array][
                                    'first_navs'
                                ][id]['navigation_name'])
                                $("#first_nav_create_form [name='main_content_name']").val(main_naves[
                                    main_array]['first_navs'][id]['content_header'])
                                $("#first_nav_create_form [name='pdf_name']").val(main_naves[main_array][
                                    'first_navs'
                                ][id]['pdf_name'])
                                $("#first_nav_create_form [name='main_introl_name']").val(main_naves[main_array]
                                    ['first_navs'][id]['introl_content'])
                                $("#first_nav_create_form [name='key_word']").val(main_naves[main_array]
                                    ['first_navs'][id]['key_word'])
                                $("#first_nav_create_form [name='update_id']").val(main_naves[main_array][
                                    'first_navs'
                                ][id]['id'])
                                $("#path_label_first").text(buildFirstPath(main_array, id));
                                $("#first_nav_create_form [name='process']").val('update')
                                let subTagName = $("#first_nav_create_form .sub-tag").data('subtag')
                                let value = $("#first_nav_create_form .sub-tag").val();
                                subTagChange(subTagName, value)
                                fileName = main_naves[main_array]['first_navs'][id]['fileName']


                                $('#main-header').text(main_naves[main_array]['first_navs'][id][
                                    'content_header'
                                ])
                                $("#initialGreeting").text(main_naves[main_array]['first_navs'][id][
                                    'introl_content'
                                ])
                                $("#pdf-iframe").attr('src', '/storage/pdf/' + fileName);
                                $("#pdf-download")
                                    .attr("href", "/storage/pdf/" + fileName)
                                    .text(main_naves[main_array]['first_navs'][id]['pdf_name'])
                                    .attr("download", main_naves[main_array]['first_navs'][id]['pdf_name'])
                                    .show();
                            } else {

                                $("#pdf_update").attr('data-parent', main_array).attr('data-first', first_array)

                                console.log([id, main_array]);
                                let current_data = main_naves[main_array]['first_navs'][first_array][
                                    'second_navs'
                                ][id];
                                $("#nav_delete").attr({
                                    'data-target': 'second_nav',
                                    'data-id': current_data['id'],
                                    'data-navigation': current_data['navigation_name']
                                });
                                $("#second_nav_create_form [name='sub_tag']").val(current_data['sub_tag'])
                                $("#second_nav_create_form [name='main_nav_name']").val(current_data[
                                    'navigation_name'])
                                $("#second_nav_create_form [name='main_content_name']").val(current_data[
                                    'content_header'])
                                $("#second_nav_create_form [name='pdf_name']").val(current_data['pdf_name'])
                                $("#second_nav_create_form [name='main_introl_name']").val(current_data[
                                    'introl_content'])
                                $("#second_nav_create_form [name='key_word']").val(current_data[
                                    'key_word'])
                                $("#second_nav_create_form [name='process']").val('update');

                                $("#path_label_second").text(buildSecondPath(main_array, first_array, id));

                                $("#second_nav_create_form [name='update_id']").val(current_data['id']);
                                let subTagName = $("#second_nav_create_form .sub-tag").data('subtag')
                                let value = $("#second_nav_create_form .sub-tag").val();
                                subTagChange(subTagName, value)
                                fileName = current_data['fileName']


                                $('#main-header').text(current_data[
                                    'content_header'
                                ])
                                $("#initialGreeting").text(current_data[
                                    'introl_content'
                                ])
                                $("#pdf-iframe").attr('src', '/storage/pdf/' + fileName);
                                $("#pdf-download")
                                    .attr("href", "/storage/pdf/" + fileName)
                                    .text(current_data['pdf_name'])
                                    .attr("download", current_data['pdf_name'])
                                    .show();
                            }
                            if (fileName != null) {
                                $("#pdf-iframe").show();
                            } else {
                                $("#pdf-iframe").hide();
                            }
                            $("#pdf_update").attr('data-target', target).show()
                            $("nav ul button").removeClass('show');
                            if ($('#sidebar').hasClass('show'))
                                sidebarshow()

                        }


                        $('#key_word_search').on('changed.bs.select', function(e, clickedIndex, isSelected,
                            previousValue) {
                            let selectedValue = $(this).val();
                            try {
                                let selectedArray = JSON.parse(selectedValue);
                                let countArray = selectedArray.length;
                                let id;
                                let target;
                                let first_array;
                                let main_array;
                                if (countArray == 1) {
                                    target = 'main';
                                    id = selectedArray[0];
                                } else if (countArray == 2) {
                                    target = 'first_nav'
                                    main_array = selectedArray[0];
                                    id = selectedArray[1]
                                } else if (countArray == 3) {
                                    target = 'second_nav'
                                    main_array = selectedArray[0];
                                    first_array = selectedArray[1];
                                    id = selectedArray[2];
                                }
                                show_pdf(id, main_array, first_array, target)
                                $(this).selectpicker('val', '');


                            } catch (e) {
                                console.log('Not valid JSON:', selectedValue);
                            }
                        });

                        $('.pdf-show a').on('click', function() {

                            let id = $(this).attr('id');
                            let main_array = $(this).attr('data-main');
                            let first_array = $(this).attr('data-first');
                            let target = $(this).attr('data-target');
                            show_pdf(id, main_array, first_array, target)
                            closeSidebarMenus();
                            $('nav ul').addClass('final-side');
                            //$(nav).closest('ul').style('display:none');
                        });



                        $(".sub-tag").on('change', function() {
                            let subTagName = $(this).data('subtag')
                            let value = $(this).val();
                            subTagChange(subTagName, value)

                        })

                        function subTagChange(subTagName, value) {

                            if (value == 'No') {
                                $(`.${subTagName}`).show()
                            } else {
                                $(`.${subTagName}`).hide()
                                $(`.${subTagName} input`).val('')

                            }
                        }

                        function resolveAjaxErrorMessage(xhr) {
                            if (xhr && xhr.responseJSON) {
                                if (xhr.responseJSON.message) {
                                    return xhr.responseJSON.message;
                                }

                                if (xhr.responseJSON.errors) {
                                    const firstKey = Object.keys(xhr.responseJSON.errors)[0];
                                    if (firstKey && xhr.responseJSON.errors[firstKey] && xhr.responseJSON.errors[firstKey][0]) {
                                        return xhr.responseJSON.errors[firstKey][0];
                                    }
                                }
                            }

                            if (xhr && xhr.status) {
                                return 'Request failed with status ' + xhr.status + '.';
                            }

                            return 'Request failed.';
                        }


                        $('#main_nav_create_form').on('submit', function(event) {
                            event.preventDefault();
                            $.ajax({
                                url: "{{ route('guide.main_nav') }}",
                                method: "POST",
                                data: new FormData(this),
                                contentType: false,
                                cache: false,
                                processData: false,
                                dataType: "json",
                                success: function(data) {
                                    console.log(data);
                                    alert(data.message);
                                    if (data.status == 200) {
                                        const process = $('#main_nav_create_form [name="process"]').val();
                                        const updateId = $('#main_nav_create_form [name="update_id"]').val();

                                        if (process === 'update' && updateId) {
                                            reloadGuideWithFocus({
                                                mainId: updateId
                                            });
                                            return;
                                        }

                                        reloadGuideWithFocus();
                                    }


                                },
                                error: function(xhr) {
                                    alert(resolveAjaxErrorMessage(xhr));
                                }
                            });
                        });
                        $('#first_nav_create_form').on('submit', function(event) {
                            event.preventDefault();

                            $.ajax({
                                url: "{{ route('guide.first_nav') }}",
                                method: "POST",
                                data: new FormData(this),
                                contentType: false,
                                cache: false,
                                processData: false,
                                dataType: "json",
                                success: function(data) {
                                    console.log(data);
                                    alert(data.message);
                                    if (data.status == 200) {
                                        const mainNavId = data.main_nav_id || $('#first_nav_create_form [name="main_nav_id"]').val();
                                        const firstNavId = data.first_nav_id || $('#first_nav_create_form [name="update_id"]').val();

                                        reloadGuideWithFocus({
                                            mainId: mainNavId,
                                            firstId: firstNavId
                                        });
                                    }


                                },
                                error: function(xhr) {
                                    alert(resolveAjaxErrorMessage(xhr));
                                }
                            });
                        });
                        $('#second_nav_create_form').on('submit', function(event) {
                            event.preventDefault();

                            $.ajax({
                                url: "{{ route('guide.second_nav') }}",
                                method: "POST",
                                data: new FormData(this),
                                contentType: false,
                                cache: false,
                                processData: false,
                                dataType: "json",
                                success: function(data) {
                                    console.log(data);
                                    alert(data.message);
                                    if (data.status == 200) {
                                        const firstNavId = $('#second_nav_create_form [name="first_nav_id"]').val();
                                        const mainNavId = findMainIdByFirstNavId(firstNavId);

                                        reloadGuideWithFocus({
                                            mainId: mainNavId,
                                            firstId: firstNavId
                                        });
                                    }


                                },
                                error: function(xhr) {
                                    alert(resolveAjaxErrorMessage(xhr));
                                }
                            });
                        });
                    })
                })(jQuery);
        </script>
    @endpush