@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>Dokumentasi</h5>
        <a href="/dokumentasi-admin/create" class="btn btn-primary btn-sm" title="Tambah">
            <i class="fas fa-plus"></i>
        </a>
    </div> 
    <div class="cards-wrapper-1">
        <div class="row">
            @foreach ($dokumentasi_images as $dokumentasi_image)
            <div class="col-lg-4 col-md-6 col-sm-6">
                <div class="card-1">
                    {{-- <div class="row gallery">
                        @if ($recents->count() > 0)
                        <p class="mt-2 mb-0 fs-text">Baru saja ditambahkan</p>
                        @endif
                        
                    </div> --}}
                    {{-- @foreach ($dokumentasi_image->image as $image)
                        {{ $image }}
                    @endforeach --}}
                    
                    
                    <img src="{{ asset('storage/' . $dokumentasi_image->images[0]) }}" class="card-img-top-1" alt="Tree">
                    <div class="card-title-1 text-end">
                        <a href="" class="btn btn-light btn-sm" id="set_dtl"
                            data-bs-toggle="modal" data-bs-target="#detail-dokumentasi"
                            data-deskripsi   ="{!! $dokumentasi_image->dokumentasi->jenis_pohon->deskripsi !!}"
                            data-judul       ="{{ $dokumentasi_image->dokumentasi->judul }}"
                            data-images="{{ implode(',', $dokumentasi_image->images) }}"
                            >
                                <i class="fa fa-eye"></i> 
                        </a>
                        <a href="/dokumentasi-admin/{{ $dokumentasi_image->dokumentasi->id }}/edit"
                            class="btn btn-warning btn-sm">
                            <i class="fas fa-edit" title="Edit"></i>
                        </a>
                        <form action="/dokumentasi-admin/{{ $dokumentasi_image->dokumentasi->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">{{ $dokumentasi_images->links() }}</div>
    </div>
  </section>

  <div class="modal fade detail" id="detail-dokumentasi" 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">Dokumentasi</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="row gallery">
              {{-- <div class="col-6 col-sm-6  col-lg-6 mt-md-0 mb-md-0 mb-2" id="images-modal"></div> --}}
              <div class="col-md-6 mt-md-0 mb-md-0 mb-2">
                <div id="images-modal" class="d-flex flex-wrap">
                    <!-- Images will be appended here -->
                </div>
            </div>
              <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);;
//     })
// })

$(document).ready(function () {
    $(document).on('click', '#set_dtl', function () {
        var deskripsi = $(this).data('deskripsi');
        var judul = $(this).data('judul');
        var images = $(this).data('images').split(','); // Split the string into an array

        $('#deskripsi').html(deskripsi);
        $('#judul').text(judul);

        // Display each image in the div with id="images-modal"
        var imagesModal = $('#images-modal');
        imagesModal.empty(); // Clear previous content

        images.forEach(function (image) {
            imagesModal.append('<img src="{{ asset('storage/') }}/' + image.trim() + '" class="w-100 img-height active img-modal" alt="Gambar Pohon">');
        });
    })
})
</script>
@endpush
  
@endsection