@extends('layouts.app')
@section('content')
    <style>
        .dropdown-item.active {
            color: #000000;
            background-color: #fff
        }
    </style>
    @auth

        <script src="{{ asset('js/PWA/guide.js') }}"></script>
        <script src="{{ asset('js/pdf-viewer.js') }}"></script>


        @if (auth()->user()->email === 'donar@sample.com')
            <link rel="manifest" href="/manifest.json">
            <meta name="theme-color" content="#0d6efd">
        @endif
        <div class="container-fluid">
            <div class="row">
                {{-- <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-md-1">
                    <button id="navToggle" class="btn btn-outline-secondary">
                        <i id="navIcon" class="bi bi-list"></i>
                    </button>
                </div>


                <div class="col-md-10 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>
            <div class="row" style="position: relative">
                <nav class="col-12 col-md-3 bg-light p-3 sidebar" id="sidebar">
                    <ul class="list-unstyled">

                        {{-- <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> --}}
                        <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>
                        @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'
                                            style="color:#fff;">
                                            {{ $index + 1 . '. ' . $nav['navigation_name'] }}
                                        </a>
                                    </li>
                                @else
                                    <li>
                                        <div class="btn-group w-100">
                                            <button type="button" class="btn btn-secondary btn-lg dropdown-toggle text-left"
                                                data-bs-toggle="dropdown" aria-expanded="false">
                                                {{ $index + 1 . '. ' . $nav['navigation_name'] }}
                                            </button>
                                            <ul class="side-drop-menu dropdown-menu" style="width:100%">
                                                <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>

                                                @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-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"
                                                                    aria-expanded="false">
                                                                    {{ $index + 1 . '.' . $key + 1 . '. ' . $first_nav['navigation_name'] }}
                                                                </button>
                                                                <ul class="side-drop-menu dropdown-menu">
                                                                    <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>
                                                                    @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>

                <section id="create_section" class="col-md-12 text-dark page-color text-white" style="display: none;">
                    <form action="" id="main_nav_create_form" method="">
                        @csrf
                        <h1 class="header-text">Main Navigation Adding</h1>
                        <div class="row">
                            <h5 id="path_label_main" class="m-3"></h5>
                           
                            <div class="col-sm-2">
                                <label for="" class="form-label">Nav 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="">Navigation 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">
                        @csrf
                        <h1 class="header-text">Sub Navigation (first-level) Adding</h1>
                        <div class="row">
                            
                            <h5 id="path_label_first" class="m-3"></h5>
                            
                            <div class="col-sm-2">
                                <label for="" class="form-label">Nav 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="">Navigation 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">
                        @csrf
                        <h1 class="header-text">Sub Navigation (second-level) Adding</h1>
                        {{-- <div class="row">
                            <div class="col-sm-2">
                                <label for="" class="form-label">Nav 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="">Navigation 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"></h5>
                            <div class="col-sm-6">
                                <label for="">Navigation 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="first_nav_save">
                                    Submit
                                </button>
                            </div>
                        </div>
                    </form>
                </section>
                <main class="col-12 col-md-12 main-content page-color" id="main_content">
                    <h2 class="header-text" id="main-header"></h2>
                    <p id="initialGreeting"></p>
                    <div id="pdf-viewer" style="height: calc(100vh - 180px); display:block;">
                        <div id="pdf-toolbar" style="padding: .5rem 0;">
                            <a id="pdf-download" href="{{ asset('storage/pdf') }}" class="btn btn-primary" download>
                                Download PDF
                            </a>

                            <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>

                            {{-- <a href="{{ asset('storage/pdf/c83a6f9f-2536-4dd9-8ea8-c736cf35e3c1.pdf') }}" target="_blank">Open PDF</a> --}}
                        </div>
                        <iframe id="pdf-iframe" src="{{ asset('storage/pdf') }}" 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">
            (function($) {
                "use strict";

                $(document).ready(function() {

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

                    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()

                    });

                    $("#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) {
                                        location.reload();
                                    }
                                }
                            })
                        }

                    })


                    if ('serviceWorker' in navigator) {
                        navigator.serviceWorker.register('/service-worker.js')
                            .then(reg => console.log('SW registered:', reg))
                            .catch(err => console.error('SW registration failed:', err));
                    }
                    $('.nav-create').on("click",function(){
                        
                        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();
                            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();
                            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").hide()
                            }

                        } else {
                            $("#create_section,#second_nav_create_form").show();
                            $("#main_content,#first_nav_create_form,#main_nav_create_form").hide();
                            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_first").show()
                            } else {
                                $('#second_nav_save').text('Submit')
                                $('form input[type="text"], form select').val('');
                                $('.process').val('save')
                                $("#path_label_first").hide()
                            }
                        }
                        $('nav ul').addClass('final-side');
                        if ($('#sidebar').hasClass('show'))
                            sidebarshow()

                    })

                    function show_pdf(id, main_array, first_array, target) {
                        $("#main-header,#initialGreeting").text('');
                        $("#pdf-iframe").attr('src', '');
                        $("#pdf-download").attr('href', '').hide();
                        $('#create_section').hide();
                        $('#main_content').show();
                        $("#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(`${Number(id)+1}.${main_naves[id]['navigation_name']}`);
                            $("#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)
                            let 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(`${Number(main_array)+1}. ${main_naves[main_array]['navigation_name']}  -->  ${Number(main_array)+1}.${Number(id)+1}. ${main_naves[main_array][
                                'first_navs'
                            ][id]['navigation_name']}`);
                            $("#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)
                            let 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(`${Number(main_array)+1}. ${main_naves[main_array]['navigation_name']}  -->  ${Number(main_array)+1}.${Number(first_array)+1}. ${main_naves[main_array][
                                'first_navs'
                            ][first_array]['navigation_name']}  --> ${Number(main_array)+1}.${Number(first_array)+1}.${Number(id)+1}. ${current_data['navigation_name']}`);

                            $("#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)
                            let 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();
                        }
                        $("#pdf_update").attr('data-target', target).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)
                        $('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('')

                        }
                    }


                    $('#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) {
                                    location.reload();
                                }


                            },
                            error: function(xhr) {
                                alert(data.message);
                            }
                        });
                    });
                    $('#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) {

                                    location.reload();
                                }


                            },
                            error: function(xhr) {
                                alert(data.message);
                            }
                        });
                    });
                    $('#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) {
                                    location.reload();
                                }


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