@extends('admin/template')

@push('style')
<style>

.modal.detail .modal-dialog {
    transform: translateY(100%);
    transition: transform 0.4s ease-out;
}

.modal.detail.show .modal-dialog {
    transform: translateY(0);
}
.modal .modal-body .img-modal {
    object-fit: cover;
}
.modal .modal-body .status-modal,
.modal .modal-body .kode_pohon-modal,
.modal .modal-body .nama-modal {
    margin-bottom: 0px;
}
.modal .modal-body .deskripsi-text,
.modal .modal-body .manfaat-text {
    margin-bottom: 0px;
}
.modal .judul-modal {
    color: black;
}

.card-1 {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    border-radius: 12px; 
    margin-bottom: 20px;
}
.card-1 .card-img-top-1 {
    object-fit: cover;
    height: 100%; 
    width: 100%;
}
.card-1 .top-title-1 {
    position: absolute;
    font-style: italic;
    right: 0;
    margin: 0;
    color: white;
}
.card-1 .card-title-1 {
    position: absolute;
    right: 0;
    color: white;
    margin: 0;
}

/* responsive */
@media (max-width: 576px) {
    .card-1 .card-img-top-1 {
        height: 250px;
    }
    .card-1 .top-title-1 {
        font-size: 6px;
        bottom: 13px;
        left: 7px;
        padding: 5px;
    }
    .card-1 .card-title-1 {
        font-size: 8px;
        bottom: 5px;
        left: 7px;
        padding: 5px;
    }
    .order-last {
        font-size: 8px;
    }
    .modal .modal-body .img-modal {
        height: 300px;
    }
    .modal .modal-body .status-modal {
        font-size: 10px;
    }
    .modal .modal-body .kode_pohon-modal,
    .modal .modal-body .nama-modal,
    .modal .modal-body .kelompok_tanaman_id-modal,
    .modal .modal-body .deskripsi-text,
    .modal .modal-body .deskripsi-modal,
    .modal .modal-body .manfaat-text,
    .modal .modal-body .manfaat-modal {
        font-size: 12px;
    }
    .modal .modal-body .deskripsi-text {
        margin-top: 20px;
    }
    .modal .judul-modal {
        font-size: 12px;
    }
}

@media (min-width: 576px) and (max-width: 992px) {
    .card-1 .card-img-top-1 {
        height: 250px;
    }
    .card-1 .top-title-1 {
        font-size: 9px;
        bottom: 18px;
        left: 7px;
        padding: 5px;
    }
    .card-1 .card-title-1 {
        font-size: 12px;
        bottom: 6px;
        left: 7px;
        padding: 5px;
    }
    .order-last {
        font-size: 12px;
    }
    .modal .modal-body .img-modal {
        height: 350px;
    }
    .modal .modal-body .status-modal {
        font-size: 12px;
    }
    .modal .modal-body .kode_pohon-modal,
    .modal .modal-body .nama-modal,
    .modal .modal-body .kelompok_tanaman_id-modal,
    .modal .modal-body .deskripsi-text,
    .modal .modal-body .deskripsi-modal,
    .modal .modal-body .manfaat-text,
    .modal .modal-body .manfaat-modal {
        font-size: 14px;
    }
    .modal .modal-body .deskripsi-text {
        margin-top: 20px;
    }
    .modal .judul-modal {
        font-size: 16px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .card-1 .card-img-top-1 {
        height: 280px;
    }
    .card-1 .top-title-1 {
        font-size: 12px;
        bottom: 21px;
        left: 7px;
        padding: 5px;
    }
    .card-1 .card-title-1 {
        font-size: 15px;
        bottom: 6px;
        left: 7px;
        padding: 5px;
    }
    .order-last {
        font-size: 15px;
    }
    .modal .modal-body .img-modal {
        height: 400px;
    }
    .modal .modal-body .status-modal {
        font-size: 14px;
    }
    .modal .modal-body .kode_pohon-modal,
    .modal .modal-body .nama-modal,
    .modal .modal-body .kelompok_tanaman_id-modal,
    .modal .modal-body .deskripsi-text,
    .modal .modal-body .deskripsi-modal,
    .modal .modal-body .manfaat-text,
    .modal .modal-body .manfaat-modal {
        font-size: 16px;
    }
    .modal .modal-body .deskripsi-text {
        margin-top: 20px;
    }
    .modal .judul-modal {
        font-size: 18px;
    }
}

@media (min-width: 1201px) {
    .card-1 .card-img-top-1 {
        height: 300px;
    }
    .card-1 .top-title-1 {
        font-size: 15px;
        bottom: 24px;
        left: 7px;
        padding: 5px;
    }
    .card-1 .card-title-1 {
        font-size: 18px;
        bottom: 6px;
        left: 7px;
        padding: 5px;
    }
    .modal .modal-body .img-modal {
        height: 400px;
    }
    .modal .modal-body .status-modal {
        font-size: 14px;
    }
    .modal .modal-body .kode_pohon-modal,
    .modal .modal-body .nama-modal,
    .modal .modal-body .kelompok_tanaman_id-modal,
    .modal .modal-body .deskripsi-text,
    .modal .modal-body .deskripsi-modal,
    .modal .modal-body .manfaat-text,
    .modal .modal-body .manfaat-modal {
        font-size: 16px;
    }
    .modal .modal-body .deskripsi-text {
        margin-top: 20px;
    }
    .modal .judul-modal {
        font-size: 18px;
    }
}
</style>
@endpush

@section('content')
<section class="section-1">
    <div class="page-heading">
        <h5>Video</h5>
        <a href="/video-admin/create" class="btn btn-primary btn-sm" title="Tambah">
            <i class="fas fa-plus"></i> Tambah Data
        </a>
    </div> 
    <div class="cards-wrapper-1">
        <div class="row">
            @foreach ($beritas as $berita)
            
            <div class="col-lg-4 col-md-6 col-sm-6">
                <div class="card-1">
                    <img src="{{ $berita->thumbnail }}" class="card-img-top-1" alt="Tree">
                    {{-- <iframe class="card-img-top-1" id="videoPlay" src="{{ $berita->thumbnail }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> --}}
                    <div class="card-title-1 text-end">
                        <a href="/video-admin/{{ $berita->id }}"
                            class="btn btn-light btn-sm">
                            <i class="fas fa-eye" title="Show"></i>
                        </a>
                        <a href="/video-admin/{{ $berita->id }}/edit"
                            class="btn btn-warning btn-sm">
                            <i class="fas fa-edit" title="Edit"></i>
                        </a>
                        <form action="/video-admin/{{ $berita->id }}" method="POST"
                            class="d-inline">
                            @method('delete')
                            @csrf
                            <button type="submit" class="btn border-0 btn-danger btn-sm"
                                title="Hapus" id="btn-delete">
                                <i class="fas fa-trash"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        <div class="mt-2 p-2">{{ $beritas->links() }}</div>
    </div>
  </section>

  <div class="modal fade detail" id="detail-berita" 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">berita</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="row">
              <img src="" class="img-fluid img-modal" id="image-modal" alt="Gambar Pohon">
              <p class="status-modal fst-italic"><small>Kegiatan</small></p>
              <p id="judul" class="nama-modal"></p>
              <p class="deskripsi-text">Deskripsi :</p>
              <div id="deskripsi" class="deskripsi-modal"></div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-light" data-bs-dismiss="modal">Tutup</button>
        </div>
      </div>
    </div>
  </div>

@push('script')
<script>
$(document).ready(function() {
    $(document).on('click', '#set_dtl', function() {
        var deskripsi = $(this).data('deskripsi');
        var judul = $(this).data('judul');
        var image = $(this).data('image');

        $('#deskripsi').html(deskripsi);
        $('#judul').text(judul);
        $('#image-modal').attr('src', "{{ asset('storage/') }}/" + image);;
    })
})
</script>
@endpush
  
@endsection