@extends('layouts.site')

@section('title','Strona Startowa')

@section('content')
<!-- Sekcja nr 1 - START -->


<div class="tab-content_2">
    <div class="row">
        <div class="col-sm-12">


            <div class="" id="nav-tabContent">
                <!-- /* Widoczne na wszystkich zakładkach */ -->
                <div class="row">
                    <div class="col-10">
                        <h5>
                            <i>Edycja Oceny Niezbędności i Proporcjonalności dla procesu:</i>
                        </h5>
                        <div style="font-weight: bold;">

                        </div>
                    </div>
                    <div class="col-2 text-right" style="padding: 1vh 3vh;">
                        <a href="{{ url('/m_odo_ocena_skutkow_info/') }}" type="btn" class="btn btn-info"><i class="far fa-lg fa-share-square fa-flip-horizontal" style="margin-right: 15px;"></i> Wróć do listy wyboru</a>
                    </div>
                </div>
                <hr class="separator_site">


                <!-- /* KONIEC - Widoczne na wszystkich zakładkach */ -->
                <div class="col-sm-10 m-md-auto" style="height: 71vh;">
                    <div id="carouselExampleIndicators" class="owl-carousel  slide" data-ride="carousel" data-type="multi" data-interval="false" data-wrap="false" style="border: 1px solid silver; border-radius: 10px; height: -webkit-fill-available; background-color: #f9f9f9; padding: 1rem;">
                        <ol id="li_scrollbar" class="carousel-indicators" style="color: black;">
                          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="d-flex active" style="height: 3rem; width: 3rem; justify-content: center; align-items: center; text-indent: 0px;">1</li>
                          <li data-target="#carouselExampleIndicators" data-slide-to="1" class="d-flex" style="height: 3rem; width: 3rem; justify-content: center; align-items: center; text-indent: 0px;">2</li>
                          <li data-target="#carouselExampleIndicators" data-slide-to="2" class="d-flex" style="height: 3rem; width: 3rem; justify-content: center; align-items: center; text-indent: 0px;">3</li>
                          <li data-target="#carouselExampleIndicators" data-slide-to="3" class="d-flex" style="height: 3rem; width: 3rem; justify-content: center; align-items: center; text-indent: 0px;">4</li>
                          <li data-target="#carouselExampleIndicators" data-slide-to="4" class="d-flex" style="height: 3rem; width: 3rem; justify-content: center; align-items: center; text-indent: 0px;">5</li>
                          <li data-target="#carouselExampleIndicators" data-slide-to="5" class="d-flex" style="height: 3rem; width: 3rem; justify-content: center; align-items: center; text-indent: 0px;">6</li>
                          <li data-target="#carouselExampleIndicators" data-slide-to="6" class="d-flex" style="height: 3rem; width: 3rem; justify-content: center; align-items: center; text-indent: 0px;">7</li>
                          <li data-target="#carouselExampleIndicators" data-slide-to="7" class="d-flex" style="height: 3rem; width: 3rem; justify-content: center; align-items: center; text-indent: 0px;">8</li>
                          <li data-target="#carouselExampleIndicators" data-slide-to="8" class="d-flex" style="height: 3rem; width: 3rem; justify-content: center; align-items: center; text-indent: 0px;">9</li>
                          <li data-target="#carouselExampleIndicators" data-slide-to="9" class="d-flex" style="height: 3rem; width: 3rem; justify-content: center; align-items: center; text-indent: 0px;">10</li>
                          <li data-target="#carouselExampleIndicators" data-slide-to="10" class="d-flex" style="height: 3rem; width: 3rem; justify-content: center; align-items: center; text-indent: 0px;">11</li>
                          <li data-target="#carouselExampleIndicators" data-slide-to="11" class="d-flex" style="height: 3rem; width: 3rem; justify-content: center; align-items: center; text-indent: 0px;">12</li>

                        </ol>
                        <div class="carousel-inner" style="height: 61vh; background-color: white;">
                          <div class="carousel-item text-center h-100 active">1
                            <img src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" class="d-block h-100 mx-auto" alt="...">
                          </div>
                          <div class="carousel-item text-center h-100">
                            <div class="tab-pane fade show active my_RejestrTable_NoScroll tableFixHead my_scrollbar_new my_scrollbar_2" id="nav-part1" role="tabpanel" aria-labelledby="nav-part1-tab" style="border-bottom: 1px solid lightgrey;">
                                Slide 2
                                <img src="https://images.creativefabrica.com/products/previews/2023/09/04/NGQKRRiBQ/2UvlOuHOmsPGma3fiYnq7t4JqX3-mobile.jpg" class="d-block h-100 mx-auto" alt="...">
                                <hr/>
                                <img src="https://images.creativefabrica.com/products/previews/2023/09/04/NGQKRRiBQ/2UvlOuHOmsPGma3fiYnq7t4JqX3-mobile.jpg" class="d-block h-100 mx-auto" alt="...">
                                <hr/>
                                <img src="https://images.creativefabrica.com/products/previews/2023/09/04/NGQKRRiBQ/2UvlOuHOmsPGma3fiYnq7t4JqX3-mobile.jpg" class="d-block h-100 mx-auto" alt="...">
                            </div>
                          </div>
                          <div class="carousel-item text-center h-100">3
                            <img src="https://img.freepik.com/darmowe-wektory/swiecace-kolo-fioletowy-oswietlenie-na-bialym-tle-na-ciemnym-tle_1441-2396.jpg?size=626&ext=jpg&ga=GA1.1.1518270500.1698192000&semt=ais" class="d-block h-100 mx-auto" alt="...">
                          </div>
                          <div class="carousel-item text-center h-100" style="height: 62vh;">
                            <div class="tab-pane fade show active my_RejestrTable_NoScroll tableFixHead my_scrollbar_new my_scrollbar_2" id="nav-part1" role="tabpanel" aria-labelledby="nav-part1-tab" style="border-bottom: 1px solid lightgrey;">
                                @include('sites.odo.ocena_skutkow.z_odo_analiza_ryzyka_print_preview_proces')
                            </div>
                          </div>
                          <div class="carousel-item text-center h-100" style="height: 62vh;">5
                            <img src="https://img.freepik.com/darmowe-wektory/swiecace-kolo-fioletowy-oswietlenie-na-bialym-tle-na-ciemnym-tle_1441-2396.jpg?size=626&ext=jpg&ga=GA1.1.1518270500.1698192000&semt=ais" class="d-block h-100 mx-auto" alt="...">
                          </div>
                          <div class="carousel-item text-center h-100" style="height: 62vh;">6
                            <img src="https://img.freepik.com/darmowe-wektory/swiecace-kolo-fioletowy-oswietlenie-na-bialym-tle-na-ciemnym-tle_1441-2396.jpg?size=626&ext=jpg&ga=GA1.1.1518270500.1698192000&semt=ais" class="d-block h-100 mx-auto" alt="...">
                          </div>
                          <div class="carousel-item text-center h-100" style="height: 62vh;">7
                            <img src="https://img.freepik.com/darmowe-wektory/swiecace-kolo-fioletowy-oswietlenie-na-bialym-tle-na-ciemnym-tle_1441-2396.jpg?size=626&ext=jpg&ga=GA1.1.1518270500.1698192000&semt=ais" class="d-block h-100 mx-auto" alt="...">
                          </div>
                          <div class="carousel-item text-center h-100" style="height: 62vh;">8
                            <img src="https://img.freepik.com/darmowe-wektory/swiecace-kolo-fioletowy-oswietlenie-na-bialym-tle-na-ciemnym-tle_1441-2396.jpg?size=626&ext=jpg&ga=GA1.1.1518270500.1698192000&semt=ais" class="d-block h-100 mx-auto" alt="...">
                          </div>
                          <div class="carousel-item text-center h-100" style="height: 62vh;">9
                            <img src="https://img.freepik.com/darmowe-wektory/swiecace-kolo-fioletowy-oswietlenie-na-bialym-tle-na-ciemnym-tle_1441-2396.jpg?size=626&ext=jpg&ga=GA1.1.1518270500.1698192000&semt=ais" class="d-block h-100 mx-auto" alt="...">
                          </div>
                          <div class="carousel-item text-center h-100" style="height: 62vh;">10
                            <img src="https://img.freepik.com/darmowe-wektory/swiecace-kolo-fioletowy-oswietlenie-na-bialym-tle-na-ciemnym-tle_1441-2396.jpg?size=626&ext=jpg&ga=GA1.1.1518270500.1698192000&semt=ais" class="d-block h-100 mx-auto" alt="...">
                          </div>
                          <div class="carousel-item text-center h-100" style="height: 62vh;">11
                            <img src="https://img.freepik.com/darmowe-wektory/swiecace-kolo-fioletowy-oswietlenie-na-bialym-tle-na-ciemnym-tle_1441-2396.jpg?size=626&ext=jpg&ga=GA1.1.1518270500.1698192000&semt=ais" class="d-block h-100 mx-auto" alt="...">
                          </div>
                          <div class="carousel-item text-center h-100" style="height: 62vh;">12
                            <img src="https://img.freepik.com/darmowe-wektory/swiecace-kolo-fioletowy-oswietlenie-na-bialym-tle-na-ciemnym-tle_1441-2396.jpg?size=626&ext=jpg&ga=GA1.1.1518270500.1698192000&semt=ais" class="d-block h-100 mx-auto" alt="...">
                          </div>
                        </div>
                        {{--
                        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                          <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                          <span class="carousel-control-next-icon" aria-hidden="true"></span>
                          <span class="sr-only">Next</span>
                        </a>
                        --}}
                      </div>
                </div>

            </div>

        </div>

    </div>
</div>




<!-- Sekcja nr 1 - KONIEC -->

<script>

    // Obsługa slidera poprzez menu
    $('.carousel-indicators li').click(function(e){
        e.stopPropagation();
        var goTo = $(this).data('slide-to');
        $('.carousel-inner .carousel-item').each(function(index){
            if($(this).data('id') == goTo){
                goTo = index;
                return false;
            }

        });
        $('#carouselExampleIndicators').carousel(goTo);
    });




    $(document).ready(function(){
        // invoke the carousel
        $('#carouselExampleIndicators').carousel({
            interval: false,    // do not autoplay after sliding (optional)
            wrap:false          // do not loop
        });


        var my_ScrollBar = document.getElementById("li_scrollbar");

        my_ScrollBar.onmouseover = function(){
            // scroll slides on mouse scroll
        $('#carouselExampleIndicators').on('mousewheel DOMMouseScroll', function(e){
            if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
                $(this).carousel('prev');
            }
            else{
                $(this).carousel('next');
            }
        });

        }

        my_ScrollBar.onmouseout = function(){
            // scroll slides on mouse scroll
            $('#carouselExampleIndicators').off('mousewheel DOMMouseScroll');
        }




        // Obsługa z klawiatury
        var owl = $('#carouselExampleIndicators');

        $(document.documentElement).keyup(function(event) {
            if (event.keyCode == 37) { /*left key*/
                owl.carousel('prev');
            } else if (event.keyCode == 39) { /*right key*/
                owl.carousel('next');
            }
        });





    });







</script>


@endsection




<!-- /* Navbar section */ -->
@section('navbar')

    <i class="fas fa-chevron-right separator"></i>
    <span class="navbar_navigate" title="Aktywna Strona">
        Ocena Niezbędności i Proporcjonalności dla Procesu
    </span>

@endsection


<!-- Menu section -->
@section('menu')
    @include('sites.odo.menu_odo')
@endsection