@extends('opac.layouts.layout_home')

@section("title") Detail Pustaka Multimedia @endsection

@section("breadcrumb")
    <a class="text-white" href="/opac">Home</a> /
    <a class="text-white" href="/pc"> Pustaka Multimedia </a> /
    <a class="text-info" href=""> <b> Detail Pustaka Multimedia </b> </a>
@endsection

@section('header-scripts')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
@endsection


@section('content')

    <div class="section mt-0">
        <div class="container pb-5">
            <div class="main main-raised main-product pl-md-4 pr-md-4 pt-md-3 p-2">
                <div class="text-center">
                </div>
                <div class="row">
                    <div class="col-md-8 col-sm-8">
                        <div class="card card-blog card-plain mt-2">
                            {{-- <div class="card-header card-header-image">
                                <a href="#pablo">
                                    <!-- <img class="img" src="../assets/video/cb/1.png"> -->
                                    <video controls autoplay width="100%" height="100%">
                                        <source src="../assets/video/tkp-review.mp4" type="video/mp4">
                                        <!-- <source src="mov_bbb.ogg" type="video/ogg"> -->
                                    </video>
                                </a>
                                <div class="colored-shadow"></div>
                            </div> --}}

                            {{-- <div class="card-body pt-3"> --}}
                            <div class="tab-content tab-space p-0 m-0">
                                @if($pus_mul->link != '' || $pus_mul->link != null)
                                <div class="tab-pane active" id="link1">
                                    <iframe src="{{$pus_mul->link}}" width="100%"
                                            height="400px"></iframe>
                                </div>
                                @endif
                                <div class="tab-pane active" id="link1">
                                    <embed src="{{asset('storage/pustaka_multimedia/file/'. $pus_mul->file1)}}" width="100%"
                                           height="400px"
                                           pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">
                                </div>
                                @if ($pus_mul->file2 != null)
                                    <div class="tab-pane" id="link2">
                                        <embed src="{{asset('storage/pustaka_multimedia/file/'. $pus_mul->file2)}}" width="100%"
                                               height="400px"
                                               pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">
                                    </div>
                                @endif
                            </div>
                            @if ($pus_mul->file2 != null)
                                <ul class="nav nav-pills nav-pills-warning" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" data-toggle="tab" href="#link1" role="tablist">
                                            File 1
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-toggle="tab" href="#link2" role="tablist">
                                            File 2
                                        </a>
                                    </li>
                                </ul>
                            @endif
                            {{-- </div> --}}
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 mt-2">
                        <div id="accordion" role="tablist">
                            <div class="card card-collapse">
                                <h3 class=" mt-0 mb-0"> {{$pus_mul->judul}} </h3>
                                <h6 class=" text-rose mt-3 mb-0"> Abstraksi </h6>
                                <div class="card-body">
                                    @if (!empty($abstraksi))
                                        <div class=""></div>
                                    @else
                                        <div class=""><p>Tidak ada Abstraksi</p></div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection