@extends('Web/layout')
@section('title','Library Data')
@section('content')
    <div class="pt-3">
        <div class="page-title d-flex">
            <div class="align-self-center">
                <a href="#" data-back-button class="me-3 ms-0 icon icon-xxs bg-theme rounded-s shadow-m">
                <i class="bi bi-chevron-left color-theme font-14"></i>
                </a>
            </div>
            <div class="align-self-center me-auto">
                <h1 class="color-theme mb-0 font-18 color-highlight">Library Data </h1>
            </div>
            <div class="align-self-center ms-auto">
            
            </div>
        </div>
    </div>

    <div class="content my-0 px-1">
        <div class="d-flex">
            <div class="align-self-center">
                <h3 class="font-16 mb-2 opacity-70">Library Data</h3>
            </div>
            <div class="align-self-center ms-auto">
                <!-- <a href="page-activity.html" class="font-12 pt-1">View All</a> -->
            </div>
        </div>
    </div>

    <div class="row text-center">
            @if(!empty($library_data))
                @foreach($library_data as $key => $value)
                    @if($key == 0)
                        <div class="content my-0 px-1">
                            <div class="d-flex">
                                <div class="align-self-center">
                                    <h3 class="font-16 mb-2 opacity-70 color-highlight">{{$value->scheme_name}} >> <span class="color-highlight"> {{ $value->library_head_name}}</span></h3>
                                </div>
                                <div class="align-self-center ms-auto">
                                    <!-- <a href="page-activity.html" class="font-12 pt-1">View All</a> -->
                                </div>
                            </div>
                        </div>
                        
                    @endif
                               
                @endforeach
            @endif
       
    </div>
    <!-- <link rel="stylesheet" type="text/css" href="{{ URL::asset('webassets/styles/magnific-popup.css') }}">
  
 <script src= 
"{{ URL::asset('webassets/scripts/jquery-3.5.1.slim.min.js') }}"> 
	</script> 
	<script src= 
"{{ URL::asset('webassets/scripts/popper.min.js') }}"> 
	</script> 
	<script src= 
"{{ URL::asset('webassets/scripts/bootstrap.min.js') }}"> 
	</script>  -->

	<!-- Magnific Popup JavaScript-->
	<!-- <script type="text/javascript" src= 
"{{ URL::asset('webassets/scripts/jquery.magnific-popup.min.js') }}"> 
	</script>  -->
    <link rel='stylesheet' href="{{ URL::asset('webassets/styles/jquery.fancybox.min.css') }}">
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
    <script src="{{ URL::asset('webassets/scripts/jquery.fancybox.min.js') }}"></script>
<script type="text/javascript"> 
		// $(document).ready(function ($) { 
		// 	$('.gallery').magnificPopup({ 
		// 		type: 'image', 

		// 		// To invoke the popup 
		// 		// using the 'a' tag 
		// 		delegate: 'a', 

		// 		// Enable the gallery 
		// 		gallery: { 
		// 			enabled: true 
		// 		} 
		// 	}); 
		// }); 
        // $('.image-popup-vertical-fit').magnificPopup({
	        // type: 'image',
            // mainClass: 'mfp-with-zoom', 
            // gallery:{
            //             enabled:true
            //         },

            // zoom: {
            //     enabled: true, 

            //     duration: 300, // duration of the effect, in milliseconds
            //     easing: 'ease-in-out', // CSS transition easing function

            //     opener: function(openerElement) {

            //     return openerElement.is('img') ? openerElement : openerElement.find('img');
            // }
            // }

            // });

            // Fancybox Configuration
            $('[data-fancybox="gallery"]').fancybox({
            buttons: [
                "slideShow",
                "thumbs",
                "zoom",
                "fullScreen",
                "share",
                "close"
            ],
            loop: false,
            protect: true
            });
	</script> 
@endsection