@extends('admin.template')

@push('style')
<style>
.card-content {
    position: relative;
}

.back-button {
    position: absolute;
    color: white;
    left: 0px;
    z-index: 999;
}
.card-img-top-1 {
    width: 100%;
    object-fit: cover;
}
.card .judul-text {
    font-weight: 700;
}
.card .deskripsi-text {
    font-weight: 500;
}
.deskripsi-text {
    opacity: .8;
}
    
/* responsive */
@media (max-width: 576px) {
    .card .card-img-top-1 {
        height: 300px;
    }
    .card .judul-text {
        font-size: 14px;
    }
    .card .deskripsi-text, .btn-video {
        font-size: 12px !important;
    }
    .video {
        height: 400px;
    }
}

@media (min-width: 576px) and (max-width: 992px) {
    .card .card-img-top-1 {
        height: 400px;
    }
    .card .judul-text {
        font-size: 16px;
    }
    .card .deskripsi-text, .btn-video {
        font-size: 14px;
    }
    .video {
        height: 600px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .card .card-img-top-1 {
        height: 500px;
    }
    .card .judul-text {
        font-size: 18px;
    }
    .card .deskripsi-text, .btn-video {
        font-size: 16px;
    }
    .video {
        height: 800px;
    }
}

@media (min-width: 1201px) {
    .card .card-img-top-1 {
        height: 500px;
    }
    .card .judul-text {
        font-size: 18px;
    }
    .card #deskripsi-text, .btn-video {
        font-size: 16px;
    }
    .video {
        height: 400px;
    }
}

</style>
@endpush

@section('content')
<div class="card">
    <div class="card-content">
        <a href="javascript:void(0);" onclick="redirectBack()" class="btn btn-sm back-button">
            <i class="fas fa-arrow-left" title="Kembali"></i> Kembali
        </a>
        <img src="{{ asset('storage/' . $berita->foto) }}" class="card-img-top-1 img-fluid" alt="singleminded">
        {{-- <p class="">{{ $berita->video }}</p> --}}
        <a href="" class=" ms-2 btn-video" id="dtl_video"
            data-bs-toggle="modal" data-bs-target="#video"
            data-video     ="{{ $berita->video }}"
            >
            {{ $berita->video }}
        </a>
        <div class="card-body">
            <p class="card-title judul-text">{{ $berita->judul }}</p>
            <div class="card-text deskripsi-text" id="deskripsi-text">
                {!! $berita->deskripsi !!}
            </div>
        </div>
    </div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">
            <div class="text-end">
                <a href="/berita-admin/{{ $berita->id }}/edit" class="btn btn-warning btn-sm">
                    <i class="fas fa-edit" title="Edit"></i> Edit
                </a>
            </div>
        </li>
    </ul>
</div>


<div class="modal fade detail" id="video" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-fullscreen-xl-down modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="judul-modal" id="exampleModalLabel">Video</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="row">
            <iframe class="video" id="videoPlay" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-light" data-bs-dismiss="modal">Tutup</button>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('script')
<script>
$(document).ready(function() {
    $(document).on('click', '#dtl_video', function() {
        console.log('set_dtl clicked');
        var videoUrl = $(this).data('video');

        // Extract video ID from the URL
        var videoId = getYouTubeVideoId(videoUrl);

        // Construct the embed URL
        var embedUrl = "https://www.youtube.com/embed/" + videoId;
        console.log('Embed URL:', embedUrl);

        // Set the src attribute of the iframe
        $('#videoPlay').attr('src', embedUrl);
    });

    // Function to extract YouTube video ID from URL
    function getYouTubeVideoId(url) {
        var regExp = /^(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
        var match = url.match(regExp);
        return match && match[1] ? match[1] : null;
    }
});
</script>

<script>
    function redirectBack() {
        window.history.back();
    }
</script>
@endpush