@extends('admin.admin_master')

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

    <style type="text/css">
        .bootstrap-tagsinput .tag {
            margin-right: 2px;
            color: #b70000;
            font-weight: 700px;
        }
    </style>

    <div class="page-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            @foreach ($breadcrumbs as $breadcrumb)
                                <li class="breadcrumb-item">
                                    <a href="{{ $breadcrumb['link'] }}">{{ $breadcrumb['text'] }}</a>
                                </li>
                            @endforeach
                            <li class="breadcrumb-item active" aria-current="page">
                                <i class="fas fa-file"></i> {{ $mediaDetails->title }}
                            </li>
                        </ol>
                    </nav>
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">
                                <i class="fas fa-info-circle"></i> Media Details
                            </h4>
                            <br>
                            <ul class="list-group">
                                <li class="list-group-item"><strong>Title:</strong>{{ $mediaDetails->title ? $mediaDetails->title : 'No data'}}</li>
                                <li class="list-group-item"><strong>Description:</strong>{!! $mediaDetails->description ? $mediaDetails->description : 'No data' !!}</li>

                                @if ($mediaDetails->type == 'youtube')
                                    <li class="list-group-item"><strong>Type:</strong>{{ $mediaDetails->type ? $mediaDetails->type :'No data'}}</li>
                                    <li class="list-group-item">
                                        {{-- <strong>YouTube Video:</strong> --}}
                                        <iframe width="100%" height="500" src="https://www.youtube.com/embed/{{$mediaDetails->url}}" allowfullscreen>
                                        </iframe>
                                    </li>
                                @endif

                                @if ($mediaDetails->type == 'link')
                                   <a href="{{$mediaDetails->url }}" target="_blank"> <li class="list-group-item"><strong>URL:</strong>{{ $mediaDetails->url ? $mediaDetails->url : 'No data'}}</li></a>
                                @endif

                                @if (!empty($mediaDetails->video))
                                    <li class="list-group-item"><strong>Type:</strong>{{ $mediaDetails->type ? $mediaDetails->type :'No data'}}</li>
                                    <li class="list-group-item">
                                        <strong>Video Player:</strong>
                                        <video width="100%" controls autoplay>
                                            <source src="{{ asset($mediaDetails->video)}}" type="video/mp4">
                                            Your browser does not support the video tag.
                                        </video>
                                    </li>
                                @endif

                                <li class="list-group-item">
                                    <strong>Status:</strong>
                                    <span class="badge rounded-pill {{ $mediaDetails->status == 1 ? 'bg-warning' : 'bg-primary' }}">
                                        {{ $mediaDetails->status == 1 ? 'Premium' : 'Free' }}
                                    </span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

 
@endsection