@extends('layouts.site')

@section('global_variables')
    @php
        // Sprawdzamy zakres uprawnień do danych
        //$function_id = 2;
        $function_id = session()->get('function_id');
        $get_permision = new my_GetPermission();
        $permision_range = $get_permision->my_range($function_id);
        $permision_functions = $get_permision->my_function_values($function_id);
        $permision_functions_for_range = $get_permision->my_function_values_for_range($function_id);
        $active_rekord_id = session()->get('active_record_'.$function_id);

        $return_to = my_Return('return_to');
        $return_to_before = my_Return('return_to_before');
        $return_to_after_delete = $return_to_before;//Route::current()->getName(); //Request::getPathInfo();
        // dd($permision_range);
        // dd($permision_functions);
        // dd($permision_functions_for_range);

        // val. 1 - wpisy własne
        // val. 2 - wpisy komórki organizacyjnej
        // val. 3 - wpisy wszystkie w organizacji
    @endphp
@endsection

@php
    // if (in_array('3', $permision_range)) {}
    $dzialy_pracownika = $get_permision->my_EmployeeDepartments(Auth::user()->pracownik_id);
    //dd($dzialy_pracownika);


    $procesy = DB::table('v010_procesy_w_dzialach')
        ->where('sw010_proces_id','=',$proces->id)
        ->get();

    foreach ( $procesy as $item ){
        $dzial_id = $item->sw020_komorka_id;
    }

    $i = 0;
    $wybrany_proces_id = $proces->id;


    //$return_to = session()->get('return_to');


@endphp

{{-- Sekcja Tytył Strony --}}
@section('title','Strona Startowa')

{{-- Sekcja Główna --}}
@section('content')

    {{-- Status procesu --}}
    @php
        if(my_ProcesesComplete($proces->id)){
            $process_class = "btn-success";
            $status = "KOMPLETNY";
        }else{
            $process_class = "btn-warning";
            $status = "DO UZUPEŁNIENIA";
        }
    @endphp

    <div class="tab-content_2 col-md-11 mx-lg-auto">
        <div class="row">
            <div class="col-sm-12">
                <!-- /* Widoczne na wszystkich zakładkach */ -->
                <div class="row">
                    <div class="col-10">
                        <h5>
                            <i>Wybrany Proces -
                                {{ $proces->nazwa_procesu ?? '' }}
                            </i>
                        </h5>
                    </div>
                </div>
                <hr class="separator_site">
                <!-- /* KONIEC - Widoczne na wszystkich zakładkach */ -->

                {{-- START - Skrolowany DIV --}}
                <div>
                <div class=" proces-2 {{ $process_class }}" style="border-radius: 0.5rem;">
                    <nav id="navbar-example2" class="navbar navbar-light px-3 proces-2">
                        <p style="margin: auto 0 auto 1rem; position: absolute; left: 1rem;" data-toggle="tooltip" title="Status procesu - {{ $status ?? '' }}">{{ $status }}</p>
                        <ul class="nav nav-pills">
                            <li class="nav-item btn-secondary proces-2">
                                <a class="nav-link proces-2 active" href="#scrollspyHeading1">1</a>
                            </li>
                            <li class="nav-item btn-secondary proces-2">
                                <a class="nav-link proces-2" href="#scrollspyHeading2">2</a>
                            </li>
                            <li class="nav-item btn-secondary proces-2">
                                <a class="nav-link proces-2" href="#scrollspyHeading3">3</a>
                            </li>
                            <li class="nav-item btn-secondary proces-2">
                                <a class="nav-link proces-2" href="#scrollspyHeading4">4</a>
                            </li>
                            <li class="nav-item btn-secondary proces-2">
                                <a class="nav-link proces-2" href="#scrollspyHeading5">5</a>
                            </li>
                            <li class="nav-item btn-secondary proces-2">
                                <a class="nav-link proces-2" href="#scrollspyHeading6">6</a>
                            </li>
                            <li class="nav-item btn-secondary proces-2">
                                <a class="nav-link proces-2" href="#scrollspyHeading7">7</a>
                            </li>
                            <li class="nav-item btn-secondary proces-2">
                                <a class="nav-link proces-2" href="#scrollspyHeading8">8</a>
                            </li>
                            <li class="nav-item btn-secondary proces-2">
                                <a class="nav-link proces-2" href="#scrollspyHeading9">9</a>
                            </li>
                            <li class="nav-item btn-secondary proces-2">
                                <a class="nav-link proces-2" href="#scrollspyHeading9b">10</a>
                            </li>
                            @if(my_RoleIod())
                                {{-- START - Widoczne tylko dla IOD --}}
                                <li class="nav-item btn-secondary proces-2">
                                    <a class="nav-link proces-2" href="#scrollspyHeading10">11</a>
                                </li>
                                <li class="nav-item btn-secondary proces-2">
                                    <a class="nav-link proces-2" href="#scrollspyHeading11">12</a>
                                </li>
                                <li class="nav-item btn-secondary proces-2">
                                    <a class="nav-link proces-2" href="#scrollspyHeading12">13</a>
                                </li>
                                {{-- KONIEC - Widoczne tylko dla IOD --}}
                            @endif
                        </ul>

                        <!-- /* Buttony */ -->
                        <div class="my_DivEditButton-2" style="margin: auto 0 auto 1rem; position: absolute; right: 1rem;">
                            <div class="col-md-12 row d-flex" style="padding-right: unset; padding-left: 5px; align-items: center;">
                                @if(isset($edit_proces) || 1==1)
                                    <!-- /* Button Edycja */ -->
                                    <div class="right" style="align-items: center;">
                                        <input type="checkbox" id="form_edit" name="form_edit_name" data-toggle="toggle" data-on="Wyłącz Edycję" data-off="Włącz Edycję" class="form-control">
                                    </div>
                                    <!-- /* KONIEC - Button Edycja */ -->
                                @endif
                                <!-- /* Button Zamknij */ -->
                                <div class="col-md-1 right" style="align-items: center;">
                                    <a class="btn btn-dark" onclick="window.location='{{ url($return_to_before) }}'" data-toggle="tooltip" type="btn" title="Zamknij">
                                        <i class="fa fa-times fa-lg" aria-hidden="true"></i>
                                    </a>
                                </div>
                                <!-- /* KONIEC - Button Zamknij */ -->
                            </div>
                        </div>
                        <!-- /* KONIEC - Buttony */ -->
                    </nav>
                    {{--<div class="btn-primary" style="margin: 1rem 2rem;">xxxxx</div>--}}
                </div>

                    <div id="div_navbar-example2" data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example my_scrollbar_new my_scrollbar_2" tabindex="0" style="position: relative; height: 60vh; overflow: auto;">
                        <form id="form_tab_full" action="{{ route('m_odo_proces_2_form_tab_full_save') }}" method="POST">
                            @csrf

                            <h4 id="scrollspyHeading1" class="proces-2 btn-primary sticky-top" style="margin-top: unset;">1. Funkcja w przetwarzaniu danych</h4>
                            <div id="div_subcontainer_1" class="proces_subcontainer" style="height: auto;">
                                @include('sites.odo.procesy.proces_forms.proces-2_form_tab_1-10')
                            </div>

                            <h4 id="scrollspyHeading2" class="proces-2">2. Cel przetwarzania</h4>
                            <div id="div_subcontainer_2" class="proces_subcontainer" style="height: auto;">
                                @include('sites.odo.procesy.proces_forms.proces-2_form_tab_2-1')
                            </div>

                            <h4 id="scrollspyHeading3" class="proces-2">3. Kategorie osób których dane są przetwarzane</h4>
                            <div id="div_subcontainer_3" class="proces_subcontainer" style="height: auto;">
                                @include('sites.odo.procesy.proces_forms.proces-2_form_tab_3-2')
                            </div>

                            <h4 id="scrollspyHeading4" class="proces-2">4. Przesłanki legalności danych zwykłych</h4>
                            <div id="div_subcontainer_4" class="proces_subcontainer" style="height: auto;">
                                @include('sites.odo.procesy.proces_forms.proces-2_form_tab_4-3')
                            </div>
                            <div id="div_subcontainer_4b" style="height: auto;" hidden>
                                @include('sites.odo.procesy.proces_forms.proces-2_form_tab-nie_dotyczy')
                            </div>

                            <h4 id="scrollspyHeading5" class="proces-2">5. Przesłanki legalności danych szczególnej kategorii</h4>
                            <div id="div_subcontainer_5" class="proces_subcontainer" style="height: auto;">
                                @include('sites.odo.procesy.proces_forms.proces-2_form_tab_5-4')
                            </div>
                            <div id="div_subcontainer_5b" style="height: auto;" hidden>
                                @include('sites.odo.procesy.proces_forms.proces-2_form_tab-nie_dotyczy')
                            </div>

                            <h4 id="scrollspyHeading6" class="proces-2">6. Podmiot przetwarzający</h4>
                            <div id="div_subcontainer_6" class="proces_subcontainer" style="height: auto;">
                                @include('sites.odo.procesy.proces_forms.proces-2_form_tab_6-5')
                            </div>
                            <div id="div_subcontainer_6b" style="height: auto;" hidden>
                                @include('sites.odo.procesy.proces_forms.proces-2_form_tab-nie_dotyczy')
                            </div>

                            <h4 id="scrollspyHeading7" class="proces-2">7. Źródło pozyskania danych</h4>
                            <div id="div_subcontainer_7" class="proces_subcontainer" style="height: auto;">
                                @include('sites.odo.procesy.proces_forms.proces-2_form_tab_7-6')
                            </div>

                            <h4 id="scrollspyHeading8" class="proces-2">8. Aplikacje / Systemy / Zasoby</h4>
                            <div id="div_subcontainer_8" class="proces_subcontainer" style="height: auto;">
                                @include('sites.odo.procesy.proces_forms.proces-2_form_tab_8-7')
                            </div>

                            <h4 id="scrollspyHeading9" class="proces-2">9. Komórki Organizacyjne które biorą udział w procesie</h4>
                            <div id="div_subcontainer_9" class="proces_subcontainer" style="height: auto;">
                                @include('sites.odo.procesy.proces_forms.proces-2_form_tab_9-11')
                            </div>

                            <h4 id="scrollspyHeading9b" class="proces-2">10. Aktywa biorące udział w realizacji procesu</h4>
                            <div id="div_subcontainer_9b" class="proces_subcontainer" style="height: auto;">
                                @include('sites.odo.procesy.proces_forms.proces-2_form_tab_9b_aktywa')
                            </div>

                            @if(my_RoleIod())
                                {{-- START - Widoczne tylko dla IOD --}}
                                <h4 id="scrollspyHeading10" class="proces-2">11. Współadministrator</h4>
                                <div id="div_subcontainer_10" class="proces_subcontainer" style="height: auto;">
                                    @include('sites.odo.procesy.proces_forms.proces-2_form_tab_10-8')
                                </div>

                                <h4 id="scrollspyHeading11" class="proces-2">12. Stosowane Środki Bezpieczeństwa</h4>
                                <div id="div_subcontainer_11" class="proces_subcontainer" style="height: auto;">
                                    @include('sites.odo.procesy.proces_forms.proces-2_form_tab_11-9')
                                </div>

                                <h4 id="scrollspyHeading12" class="proces-2">13. Uwagi</h4>
                                <div id="div_subcontainer_12" class="proces_subcontainer" style="height: auto;">
                                    @include('sites.odo.procesy.proces_forms.proces-2_form_tab_12')
                                </div>
                                {{-- KONIEC - Widoczne tylko dla IOD --}}
                            @endif

                        </form>
                    </div>

                    {{-- Buttony dolne --}}
                    <hr/>
                        <div class="col-md-12 btn-position">



                            @php
                                    //$button_custom_array = array('klasa koloru','ikona buttonu','title');
                                    //my_TableButton($permision_functions_for_range,$function,$adress,$owner_tab,$onclick = null,$target = null,$value = null,$return_to = null)
                                    //$button_custom_array = array('btn-primary-light','fab fa-firstdraft fa-lg','Podgląd wydruku Wersja Syntetyczna');
                                    //$button_custom = my_TableButton($permision_functions_for_range,$button_custom_array,"m_odo_ocena_skutkow_print_preview_menagement/$ocena->id",$owner_tab,null,null,null,"m_odo_ocena_skutkow_print_preview_menagement/$ocena->id");
                                    //echo $button_custom;
                            @endphp

                            <button form="form_tab_full" type="submit" class="btn btn-primary my_OnOffEdition" onclick="my_Valid_Scroll();" data-toggle="tooltip" title="Zapisz">
                                <i class="fas fa-save fa-lg" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;Zapisz
                            </button>
                            @if(my_RoleIod())
                                <button type="button" class="btn btn-info" onclick="openModalForm('ModalForm_ProcesUwagi');" data-toggle="tooltip" title="Uwagi do procesu">
                                    Uwagi do procesu
                                </button>
                            @endif
                        </div>
                    {{-- KONIEC - Buttony dolne --}}

                </div>
                {{-- START - Skrolowany DIV --}}

            </div>
        </div>
    </div>

<script>

    // Pływająca zakładka na podstawie wielkości div-a
    //
    // Add active class to the current button (highlight it)
    var header = document.getElementById("navbar-example2");
    var btns = header.getElementsByClassName("nav-link");
    for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener("click", function() {
            const sections = document.querySelectorAll('h4');
            for(i2=0; i2<sections.length; i2++)
            {
                sections[i2].classList.remove('btn-primary');
                sections[i2].classList.remove('proces-2_fixed');
                sections[i2].classList.remove('sticky-top');
            }

            var current = document.getElementsByClassName("active");
            if (current.length > 0) {
                current[0].className = current[0].className.replace(" active", "");
            }
            this.className += " active";
            var h4_element_id = this.getAttribute("href");
            var h4_element = document.getElementById(h4_element_id.slice(1));
            h4_element.classList.add('btn-primary');

            setTimeout(()=> {
                h4_element.classList.add('sticky-top');
            },100);
            //console.log(h4_element_id.slice(1));
        });

    }



    /* Obsługa automatycznego aktywoania buttonów podczas skrolowania */
    const elements_array = ['scrollspyHeading1','scrollspyHeading2','scrollspyHeading3','scrollspyHeading4','scrollspyHeading5','scrollspyHeading6','scrollspyHeading7','scrollspyHeading8','scrollspyHeading9','scrollspyHeading9b','scrollspyHeading10','scrollspyHeading11','scrollspyHeading12'];
    const scrollDemo = document.querySelector("#div_navbar-example2");
    const output = document.querySelector(".output");

        scrollDemo.addEventListener("scroll", event => {
            const sections = document.querySelectorAll('h4');
            sections.forEach(section => {

                current = section.getAttribute('id');
                var x = $("#" + current).position();

                if(x.top >= 0 && x.top < 100){
                    //alert("Top position: " + x.top + " Left position: " + x.left);
                    var elements_all = document.querySelectorAll("a[href^='#']");
                    var els = document.querySelectorAll("a[href='#" + current +"']");
                    for(i=0; i<elements_all.length; i++)
                    {
                        elements_all[i].classList.remove('active');
                    }
                    for(i2=0; i2<sections.length; i2++)
                    {
                        sections[i2].classList.remove('btn-primary');
                        sections[i2].classList.remove('proces-2_fixed');
                        sections[i2].classList.remove('sticky-top');

                            // send form to save
                            //document.getElementById("form_tab_full").submit();
                    }

                    els[0].classList.add('active');
                    section.classList.add('btn-primary');
                    section.classList.add('sticky-top');
                }

                var sections_active = document.querySelectorAll('.sticky-top');
                if(sections_active[0]){
                    h4_active_id = sections_active[0].getAttribute('id');
                    //h4_active_element = document.getElementById(h4_active_id);
                    var x2 = $("#" + h4_active_id).position();
                    //console.log(h4_active_id + " | Top: " + x2.top);

                    if(x2.top > 500){
                        var index = elements_array.indexOf(h4_active_id);
                        var h4_before_active_element = document.getElementById(elements_array[index - 1]);

                        //--------------
                        var elements_all = document.querySelectorAll("a[href^='#']");
                        var els_before = document.querySelectorAll("a[href='#" + elements_array[index - 1] +"']");
                        for(i=0; i<elements_all.length; i++)
                        {
                            elements_all[i].classList.remove('active');
                        }
                        for(i2=0; i2<sections.length; i2++)
                        {
                            sections[i2].classList.remove('btn-primary');
                            sections[i2].classList.remove('proces-2_fixed');
                            sections[i2].classList.remove('sticky-top');
                        }
                        //console.log(h4_active_id + " | Top: " + x2.top + " | index: " + index + " | index_2: " + elements_array[index - 1]);
                        els_before[0].classList.add('active');
                        h4_before_active_element.classList.add('btn-primary');
                        h4_before_active_element.classList.add('sticky-top');
                        //--------------

                    }
                }


            });

        }, { passive: true });





</script>


@include('sites.odo.procesy.m_odo_procesy_info_2_include_js')
@include('sites.odo.procesy.m_odo_procesy_info_2_include_js_validator')

@endsection
{{-- Sekcja Główna - KONIEC --}}


{{-- Navbar section --}}
@section('navbar')

    @include('sites.odo._navbar_odo')
    @include('sites.odo.procesy._navbar_procesy')
    @include('sites.odo.procesy._navbar_procesy_dzial')

    <i class="fas fa-chevron-right separator"></i>
    <span class="navbar_navigate" title="Aktywna Strona">
        Proces - Szczegóły
    </span>

@endsection

{{-- Menu section --}}
@section('menu')
    @include('sites.odo.menu_odo')
@endsection

{{-- Modal Windows section --}}
@section('modal_windows')
    {{-- Tab-1 --}}
    @include('sites.odo.procesy.proces_forms.form_modal_administrator_add_lista') {{-- tab-1 --}}
    @include('sites.odo.procesy.proces_forms.form_modal_administrator_add') {{-- tab-1 --}}
    @include('sites.odo.procesy.proces_forms.form_modal_akt_prawa_add') {{-- tab-4 --}}
    @include('sites.odo.procesy.proces_forms.form_modal_podmiot_przetwarzajacy_add') {{-- tab-6 --}}
    @include('sites.odo.procesy.form_modal_add_program') {{-- tab-8 --}}
    @include('sites.odo.procesy.proces_forms.form_modal_wspoladministrator_add_lista') {{-- tab-10 --}}
    @include('sites.odo.procesy.proces_forms.form_modal_wspoladministrator_add') {{-- tab-10 --}}
    @include('sites.odo.procesy.proces_forms.form_modal_proces_uwagi') {{-- tab-12 --}}

@endsection