@extends('layouts.master')

@section('content')

    <div class="container">

        <section id="content">

            <!-- Page Heading -->

            <section class="section page-heading animate-onscroll">

                <h1> Team Member Details </h1>

                <p class="breadcrumb"><a href="{{ route('home') }}">Home</a> / Team Member Name / {{ $data->name }}</p>

            </section>

            <!-- Page Heading -->

            <!-- Section -->

            <section class="section full-width-bg gray-bg">

                <div class="row">

                    <div class="col-lg-9 col-md-9 col-sm-8">

                        <div class="card mb-3">

                            <div class="card-body d-flex">

                                <img src="{{ asset(Storage::url($data->image)) }}" alt="" class="img-fluid"

                                    style="width: 340px; height: 310px; float: left; margin-right: 20px;">

                                <div>

                                    <h4 class="card-title"><span style="color: #274472;"> <b> {{ $data->name }} </b>

                                        </span> </h4>

                                    <p class="card-text" style="text-align: justify">{{ $data->bio }}</p>

                                    <!-- Add any additional details or content for the individual ambassador page -->

                                </div>

                            </div>

                        </div>

                    </div>

                    <!-- Sidebar -->

                    <style>

                        .list-group-item {

                            border: 2px solid blue;

                            height: 50px;

                            font-size: 20px;



                        }

                    </style>



                    <!-- Sidebar -->

                    <div class="col-lg-3 col-md-3 col-sm-4 sidebar">

                         

                            



                        <div class="banner-wrapper">

                            <a class="banner animate-onscroll" href="#">

                                <i class="icons icon-calendar"></i>

                                <h4>Join Events</h4>

                                <p>Join us at our upcoming Event!</p>

                            </a>

                        </div>



                        <div class="banner-wrapper">

                            <a class="banner animate-onscroll" href="{{ route('user.register') }}">

                                <i class="icons icon-check"></i>

                                <h4>Register here!</h4>

                                <p>Physician | Patient</p>

                            </a>

                        </div>



                        <div class="banner-wrapper">

                            <a class="banner animate-onscroll" href="{{route('volunteer')}}">

                                <i class="icons icon-user"></i>

                                <h4>Volunteer</h4>

                                <p>Join us and help</p>

                            </a>

                        </div>



                        <div class="banner-wrapper">

@include('appointment')

</div>

                        <div class="social-media animate-onscroll">

                            <span class="small-caption">Get connected:</span>

                            <ul class="social-icons">

                                <li class="facebook"><a href="https://www.facebook.com/myositisindia" class="tooltip-ontop"

                                        title="Facebook" target="_blank"><i class="icons icon-facebook"></i></a></li>

                                <li class="twitter"><a href="https://twitter.com/docrota" class="tooltip-ontop"

                                        title="Twitter" target="_blank"><i class="icons icon-twitter"></i></a></li>



                                <li class="youtube"><a href="https://youtu.be/evakulPVWM0" class="tooltip-ontop"

                                        title="Youtube" target="_blank"><i class="icons icon-youtube-1"></i></a></li>



                            </ul>

                            <ul class="social-buttons">

                                <li>

                                    <iframe

                                        src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;width&amp;layout=standard&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=35"

                                        style="border:none; overflow:hidden; height:21px; padding-top:1px; width:50px;"></iframe>

                                </li>

                                <li class="facebook-share">

                                    <div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/"

                                        data-type="button_count"></div>

                                </li>

                                <li class="twitter-share">

                                    <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>

                                </li>

                            </ul>

                        </div> <!-- Featured Video -->

                        <div class="sidebar-box white featured-video animate-onscroll">

                            <div class="sidebar-box white featured-video animate-onscroll">

                                <h3>Watch Video</h3>

                                <iframe width="560" height="315" src="https://www.youtube.com/embed/evakulPVWM0"

                                    allowfullscreen></iframe>

                                <a href="https://www.youtube.com/watch?v=evakulPVWM0&list=PLR-Y-tw_OQUhxqBBfP5u8h4q8qqQYoLUJ"

                                    class="button transparent button-arrow">More videos</a>

                            </div>

                        </div>

                        <!-- /Featured Video -->

                        <!-- Upcoming Events -->

                        

                            

                        <!-- /Upcoming Events -->

                        <!-- Image Banner -->

                        <!--<div class="sidebar-box image-banner animate-onscroll">

                            <a href="{{ route('samantha') }}">

                                <img src="{{ asset('asset/img/samantha2.jpeg') }}" alt="">

                                <h3>Samantha Ruth Prabhu</h3>

                                <p>Brand Ambassador</p>

                                <span class="button transparent button-arrow">Find out more</span>

                            </a>

                        </div> -->

                        <!-- /Image Banner -->





                    </div>

                    <!-- /Sidebar -->

                </div>

            </section>



            <!-- /Section -->

        </section>

    </div>

@endsection