@extends('admin.template')

@push('style')
<style>

/* responsive */
@media (max-width: 576px) {
    .card-title-text {
        font-size: 12px;
    }
    .martop {
        margin-bottom: 20px;
    }
    .card-img-top {
        height: 250px;
    }
}

@media (min-width: 576px) and (max-width: 992px) {
    .card-title-text {
        font-size: 14px;
    }
    .martop {
        margin-bottom: 20px;
    }
    .card-img-top {
        height: 250px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .card-title-text {
        font-size: 16px;
    }
    .martop {
        margin-bottom: 20px;
    }
    .card-img-top {
        height: 250px;
    }
}

@media (min-width: 1201px) {
    .card-title-text {
        font-size: 16px;
    }
    .card-img-top {
        height: 250px;
    }
    .martop {
        margin-bottom: 20px;
    }
}
.card-img-top {
    object-fit: cover;
}
</style>
@endpush

@section('content')
<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> Tambah Data
    </a>
</div> 
<div class="row mb-3">
    @foreach ($dokumentasi_images as $dokumentasi_image)
<div class="col-xl-4 col-md-6 col-sm-12 martop">
    <div class="card p-0 m-0">
        <div class="card-content">
            <img src="{{ asset('storage/' . $dokumentasi_image->images[0]) }}" class="card-img-top img-fluid"
                alt="singleminded">
            <div class="card-body">
                <p class="card-title-text">{{ $dokumentasi_image->dokumentasi->judul }}</p>
            </div>
        </div>
        <div class="d-flex align-items-center justify-content-end px-2 py-2">
            {{-- <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 }}" class="btn btn-light btn-sm">
                <i class="fa fa-eye"></i> 
            </a>
            <a href="/dokumentasi-admin/{{ $dokumentasi_image->dokumentasi->id }}/edit" class="btn btn-warning btn-sm mx-2">
                <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>
@endsection

@push('script')
    
@endpush