@extends('edufair.layouts.master')
@section('before_css')
{{--    <link rel="stylesheet" href="{{asset('public/theme/assets/js/plugins/slick-carousel/slick.css')}}">--}}
    <link rel="stylesheet" href="{{asset('public/css/testimonials.css')}}">
{{--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">--}}
{{--<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>--}}
{{--<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>--}}
{{--    <link rel="stylesheet" href="{{asset('public/theme/assets/js/plugins/slick-carousel/slick-theme.css')}}">--}}
@endsection
@section('content')
    <!-- Main Container -->
    <main id="main-container">
        <div class="bg-image" style="background-image: url('{{asset('/img/about-us.png')}}');">
            <div class="bg-black-75">
                <div class="content py-6">
                    <h3 class="text-left text-white mb-0">
                       Our Team
                    </h3>
                </div>
            </div>
        </div>
        <!-- Page Content -->
       <div class="about_us bg-white">

           @foreach($categories as $category)
               @if(count($category->public_teams)>0)
                <div class="content">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="py-5 text-center" id="heading_ti_adn">
                                <h1 class="font-w700 mb-2" id="f_ad_ne_main_title">
                                 {{$category->name}}
                                </h1>
                            </div>
                        </div><!-- col end-->
                    </div>
                    <div class="row justify-content-center">
                        @foreach($category->public_teams as $team)
                        <div class="col-md-2 col-xl-2">
                            <a class="block block-rounded block-link-pop text-center fx-item-zoom-in fx-overlay-zoom-in" href="javascript:void(0)">
                                <div class="options-container block-content block-content-full p-0">
                                    @if(isset($team->image))
                                        @php
                                            $storePath = config('filesystems.storagePath').'/'.'teams';
                                        @endphp
                                        @if(\Illuminate\Support\Facades\Storage::disk(config('filesystems.diskName'))->exists($storePath.'/'.$team->image))
                                            @php
                                                $url = config('filesystems.asset').'/'.'teams'.'/'.$team->image;
                                                $uploadedFile = pathinfo($url);
                                                $old_filename = $uploadedFile['filename'];
                                                $extension = $uploadedFile['extension'];
                                                $imageLink = config('filesystems.asset').'/'.'teams'.'/'.$old_filename.'.webp';
                                            @endphp
                                            <picture>
                                                <source type="image/webp" srcset="{{$imageLink}}">
                                                <source type="image/{{$extension}}" srcset="{{$url}}">
                                                <img class="img-fluid options-item"src="{{$url}}" alt="{{$team->name}} nepalschoolmela.com">
                                            </picture>
                                        @endif
                                    @endif
                                </div>
                                <div class="block-content p-3">
                                    <p class="font-w600 mb-0">{{$team->name}}</p>
                                    <p class="font-size-sm font-italic text-muted mb-0">
                                     {{$team->title}}
                                    </p>
                                </div>
                            </a>
                        </div>
                        @endforeach

                    </div>
                    <!-- END Images -->
                </div>
               @endif
           @endforeach

       </div>
@endsection
@section('after_js')
    @if(!(\Illuminate\Support\Facades\Auth::check()))
    <script type="text/javascript">
        $(window).on('load',function(){
            $('#myModal').modal('show');
        });
    </script>
    @endif
    @endsection
@section('script')
        <script src="{{asset('public/theme/assets/js/plugins/slick-carousel/slick.min.js')}}"></script>
        <script>jQuery(function () { Dashmix.helpers('slick'); });</script>
@endsection