@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"
                                        style="background-color: #113F67; 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"
                                                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 Create Section</h1>
                        <div class="row">
                            <div class="col-sm-2">
                                <label for="" class="form-label">Sub Tag</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 Header</label>
                                <input type="text" name="main_content_name" id="" class="form-control">
                            </div>
                            <div class="col-sm-6">
                                <label for="">PDF Name</label>
                                <input type="text" name="pdf_name" id="" class="form-control">
                            </div>
                            <div class="col-sm-6">
                                <label for="">Introl Content</label>
                                <input type="text" name="main_introl_name" id="" class="form-control">
                            </div>
                            <div class="col-sm-6">
                                <label for="">Key Word</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">First Create Section</h1>
                        <div class="row">
                            <div class="col-sm-2">
                                <label for="" class="form-label">Sub Tag</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 Header</label>
                                <input type="text" name="main_content_name" id="" class="form-control">
                            </div>
                            <div class="col-sm-6">
                                <label for="">PDF Name</label>
                                <input type="text" name="pdf_name" id="" class="form-control">
                            </div>
                            <div class="col-sm-6">
                                <label for="">Introl Content</label>
                                <input type="text" name="main_introl_name" id="" class="form-control">
                            </div>
                            <div class="col-sm-6">
                                <label for="">Key Word</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">Second Create Section</h1>
                        {{-- <div class="row">
                            <div class="col-sm-2">
                                <label for="" class="form-label">Sub Tag</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">
                            <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 Header</label>
                                <input type="text" name="main_content_name" id="" class="form-control">
                            </div>
                            <div class="col-sm-6">
                                <label for="">PDF Name</label>
                                <input type="text" name="pdf_name" id="" class="form-control">
                            </div>
                            <div class="col-sm-6">
                                <label for="">Introl Content</label>
                                <input type="text" name="main_introl_name" id="" class="form-control">
                            </div>
                            <div class="col-sm-6">
                                <label for="">Key Word</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="{{ url('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="{{ url('storage/pdf/c83a6f9f-2536-4dd9-8ea8-c736cf35e3c1.pdf') }}" target="_blank">Open PDF</a> --}}
                        </div>
                        {{-- <iframe id="pdf-iframe" src="{{ url('storage/pdf/') }}" width="100%" height="100%"
                            style="border:0;"></iframe> --}}
                         <iframe id="pdf-iframe" src="{{ url('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() {
        const pdfBase = "{{ url('storage/pdf') }}/";
        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);
            icon.className = isOpen ? 'bi bi-x' : '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 };
            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']);
                        if (response['status'] == 200) location.reload();
                    }
                });
            }
        });

        // Service Worker
        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));
        }

        // Form create/update toggles
        $(".nav-create").click(function() {
            let target = $(this).attr('id');
            let update_target = $(this).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();
                $('#main_nav_save').text(update_target == 'main' ? 'Update' : 'Submit');
                if (update_target != 'main') {
                    $('form input[type=\"text\"], form select').val('');
                    $('.process').val('save');
                }
            } 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']);
                $('#first_nav_save').text(update_target == 'first_nav' ? 'Update' : 'Submit');
                if (update_target != 'first_nav') {
                    $('form input[type=\"text\"], form select').val('');
                    $('.process').val('save');
                }
            } 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']);
                $('#second_nav_save').text(update_target == 'second_nav' ? 'Update' : 'Submit');
                if (update_target != 'second_nav') {
                    $('form input[type=\"text\"], form select').val('');
                    $('.process').val('save');
                }
            }
            $('nav ul').addClass('final-side');
            if ($('#sidebar').hasClass('show')) sidebarshow();
        });

        // 🧩 Show PDF Function
        function show_pdf(id, main_array, first_array, target) {
            $("#main-header,#initialGreeting").text('');
            $("#pdf-iframe").attr('src', ''); // ✅ clear iframe safely
            $("#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') {
                let fileName = main_naves[id]['fileName'];
                console.log(fileName);
                $('#main-header').text(main_naves[id]['content_header']);
                $("#initialGreeting").text(main_naves[id]['introl_content']);
                $("#pdf-iframe").attr('src', pdfBase + fileName);
                $("#pdf-download")
                    .attr('href', pdfBase + fileName)
                    .text(main_naves[id]['pdf_name'])
                    .attr('download', main_naves[id]['pdf_name'])
                    .show();
            } 
            else if (target == 'first_nav') {
                let fileName = main_naves[main_array]['first_navs'][id]['fileName'];
                console.log(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', pdfBase + fileName);
                $("#pdf-download")
                    .attr('href', pdfBase + fileName)
                    .text(main_naves[main_array]['first_navs'][id]['pdf_name'])
                    .attr('download', main_naves[main_array]['first_navs'][id]['pdf_name'])
                    .show();
            } 
            else {
                let current_data = main_naves[main_array]['first_navs'][first_array]['second_navs'][id];
                let fileName = current_data['fileName'];
                console.log(fileName);
                $('#main-header').text(current_data['content_header']);
                $("#initialGreeting").text(current_data['introl_content']);
                $("#pdf-iframe").attr('src', pdfBase + fileName);
                $("#pdf-download")
                    .attr('href', pdfBase + 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();
        }

        // 🧭 Search by keyword
        $('#key_word_search').on('changed.bs.select', function(e, clickedIndex, isSelected, previousValue) {
            let selectedValue = $(this).val();
            try {
                let selectedArray = JSON.parse(selectedValue);
                let id, target, first_array, main_array;
                if (selectedArray.length == 1) {
                    target = 'main';
                    id = selectedArray[0];
                } else if (selectedArray.length == 2) {
                    target = 'first_nav';
                    main_array = selectedArray[0];
                    id = selectedArray[1];
                } else if (selectedArray.length == 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 click link
        $('.pdf-show a').on('click', function() {
            let id = $(this).attr('id');
            let main_array = $(this).data('main');
            let first_array = $(this).data('first');
            let target = $(this).data('target');
            show_pdf(id, main_array, first_array, target);
            $('nav ul').addClass('final-side');
        });

        // 🧩 Sub-tag dynamic visibility
        $(".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('');
            }
        }

        // 🧾 AJAX Submissions
        $('#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) {
                    alert(data.message);
                    if (data.status == 200) location.reload();
                },
                error: function(xhr) {
                    alert('Error saving main nav');
                }
            });
        });

        $('#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) {
                    alert(data.message);
                    if (data.status == 200) location.reload();
                },
                error: function(xhr) {
                    alert('Error saving first nav');
                }
            });
        });

        $('#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) {
                    alert(data.message);
                    if (data.status == 200) location.reload();
                },
                error: function(xhr) {
                    alert('Error saving second nav');
                }
            });
        });
    });
})(jQuery);
</script>
@endpush