@include('frontEnd.header')
@include('frontEnd.frontSidebar')

<link rel="stylesheet" type="text/css" href="{{url('/')}}/assets/js/zoom-img/jquery.magnify.css">
<style>
  #fs {
    
    width: 100%;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
    padding: 20px;
  }

  .magnify-modal {
    background-color: #fff !important;
    }

:fullscreen .magnify-stage {
    background: #fff !important;
}
</style>
            

            <!-- ============================================================== -->
            <!-- Start right Content here -->
            <!-- ============================================================== -->
            <div class="main-content">

                <div class="page-content">
                    <div class="container-fluid">

                         
                        @if(isset($page))
                        <!-- start page title -->
                       <div class="row page-titles sticky-top" style="top:10%">
                            <div class="col-lg-12">
                                <div class="page-title-box p-4 bg-white d-sm-flex align-items-center justify-content-between border-bottom " style="z-index: 2;">
                                    <h4 class="mb-sm-0 font-size-18">{{$page->topic->name}}</h4>
                                    <div class="page-title-right">
                                        <ol class="breadcrumb m-0">
                                            <li class="breadcrumb-item">
                                                <a href="{{ route('front.ssm-index',$chassis->variant_id) }}">Dashboard</a>
                                            </li>
                                            <li class="breadcrumb-item active">
                                                 <a href="{{ route('getPages', $page->topic->id) }}">{{$page->topic->name}}</a>
                                            </li>
                                             <li class="breadcrumb-item active">{{$page->no}}</li>
                                        </ol>
                                    </div>                                        
                                    <button data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Go to Fullscreen"onclick="var el = document.getElementById('fs'); el.requestFullscreen().catch((error) => {console.error(`Error while requesting fullscreen: ${error}`);});">
                                            <i class="fas fa-expand"></i>
                                    </button>
                                </div>
                                

                            </div>
                        </div>


                        <div class="row">
                            
                            <div class="col-lg-12 position-relative">
                                
                               
                                <div class="card p-3 fs" id="fs">



                                <div class="card-body" style="z-index: 2;">

                                     @if($page->digram_img!=null)
                            <div class="col-xl-12 ">


                                <div id="pageContent" class="border p-2">






                                    <!-- new image zoom start -->
                                    <a data-magnify="gallery" data-caption="{{$page->topic->name}}"
                                        href="{{url('/')}}/uploads/digram_img/{{$page->topic_id}}/{{$page->digram_img}}"
                                            class="img-fluid" alt="">

                                             <img src="{{url('/')}}/uploads/digram_img/{{$page->topic_id}}/{{$page->digram_img}}"
                                            class="img-fluid" alt="">
                                    </a>

                                   
                                </div>

                            </div>
                            @endif
                                    <div class="m-2">{!!$page->txt!!}</div>
                                </div>
                                </div>
                            </div>

                            
                            

                        </div>



                        <div class="row ">

                        <div class="col-12 ">
                           
                            <div class="">
                            
                            <div class=" text-center ">Total Pages:{{count($pages)}} </div>

                            <div class=" ">

                                <nav aria-label="Page navigation example">
                              <ul class="pagination justify-content-center ">
                                                                   @foreach($pages as $pg)
                                <li class="page-item active" >
                                        <a class="page-link"
                                            href="{{url('/')}}/viewPagebyID/{{$pg->id}}">{{$i++}}</a>
                                        </li>
                                        @endforeach
                                
                              </ul>
                            </nav>

                           
                                
                            </div>
                            
                            </div>

                            

                            
                            
                        </div>


 
                        </div><!-- end row--> 
                        @else
                        <div class="row">
                            <div class="col-12">
                                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                                    <h4 class="mb-sm-0 font-size-18">No data found</h4>
                                    
                                </div>
                            </div>
                        </div>

                        @endif
                    </div>
                    <!-- container-fluid -->
                </div>
                <!-- End Page-content -->

                @include('frontEnd.footer')

        <!-- JAVASCRIPT -->
        <script src="{{url('/')}}/assets/libs/jquery/jquery.min.js"></script>
        <script src="{{url('/')}}/assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
        <script src="{{url('/')}}/assets/libs/metismenu/metisMenu.min.js"></script>
        <script src="{{url('/')}}/assets/libs/simplebar/simplebar.min.js"></script>
        <script src="{{url('/')}}/assets/libs/node-waves/waves.min.js"></script>
        <script src="{{url('/')}}/assets/libs/feather-icons/feather.min.js"></script>
        <!-- pace js -->
        <script src="{{url('/')}}/assets/libs/pace-js/pace.min.js"></script>

        <!-- apexcharts -->
        <script src="{{url('/')}}/assets/libs/apexcharts/apexcharts.min.js"></script>

        <!-- Plugins js-->
        <script src="{{url('/')}}/assets/libs/admin-resources/jquery.vectormap/jquery-jvectormap-1.2.2.min.js"></script>
        <script src="{{url('/')}}/assets/libs/admin-resources/jquery.vectormap/maps/jquery-jvectormap-world-mill-en.js"></script>
        <!-- dashboard init -->
        <script src="{{url('/')}}/assets/js/pages/dashboard.init.js"></script>

        <script src="{{url('/')}}/assets/js/app.js"></script>
        <!--zoom-plugin-->



<!-- image zoom end -->
<script type="text/javascript">
$(document).ready(function() {
    $("img").on("contextmenu", function() {
        return false;
    });
});
</script>
<script type="text/javascript" src="{{url('/')}}/assets/js/zoom-img/jquery.magnify.js"></script>
<script>
$('[data-magnify]').magnify({
    fixedContent: false
});
</script>


       <!--  <script type="text/javascript">
            
            function getData(topic_id)
            {
                var topic_id=topic_id;
                loadDynamicResult(topic_id);
               // alert(topic_id)
            }

            function loadDynamicResult(topic_id) {
                //alert(topic_id);
    $.get('{{url('/')}}/getPages/'+topic_id, function(data) {
        //alert(data);
        const dataContainer = $('#data-container');
        data.forEach(function(item) {

        }

    });
}
        </script>
 -->
 <script>
$('.collapse').on('shown.bs.collapse', function() {
    $(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function() {
    $(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
</script>
    </body>


</html>