@extends('admin.template')

@push('style')
<style>
body {
    background-color: #D9D9D9;
    
}
.section-1 {
    font-family: "Poppins", sans-serif;
    color: black;
}
.humberger-line {
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
  display: block;
  height: 2px;
  width: 20px;
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity));
}
.section-1 .img-height {
    object-fit: cover;
}
.fs-text-2 {
    opacity: .6;
}

/* responsive */
@media (max-width: 560px) {
    .section-1 .fs-header {
        font-size: 14px;
    }
    .section-1 .fs-text {
        font-size: 12px;
    }
    .fs-text-2 {
        font-size: 10px;
    }
    .section-1 .img-height {
        height: 200px;
    }
    .section-1 .galeri-2 {
        padding-bottom: 20px;
    }
    .img-edit {
        height: 300px;
    }
}

@media (min-width: 561px) and (max-width: 992px) {
    .section-1 .fs-header {
        font-size: 16px;
    }
    .section-1 .fs-text {
        font-size: 14px;
    }
    .fs-text-2 {
        font-size: 12px;
    }
    .section-1 .img-height {
        height: 250px;
        margin-bottom: 10px;
    }
    .section-1 .galeri-2 {
        padding-bottom: 30px;
    }
}

@media (min-width: 561px) and (max-width: 716px) {
    .img-edit {
        height: 350px;
    }
}

@media (min-width: 716px) and (max-width: 992px) {
    .img-edit {
        height: 400px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .section-1 .fs-header {
        font-size: 18px;
    }
    .section-1 .fs-text {
        font-size: 16px;
    }
    .fs-text-2 {
        font-size: 14px;
    }
    .section-1 .img-height {
        height: 300px;
    }
    .section-1 .galeri-2 {
        padding-bottom: 50px;
    }
    .img-edit {
        height: 450px;
    }
}

@media (min-width: 1201px) {
    .section-1 .fs-header {
        font-size: 18px;
    }
    .section-1 .fs-text {
        font-size: 18px;
    }
    .fs-text-2 {
        font-size: 16px;
    }
    .section-1 .img-height {
        height: 300px;
    }
    .section-1 .galeri-2 {
        padding-bottom: 50px;
    }
    .img-edit {
        height: 450px;
    }
}
.img-edit {
    width: 100%;
    object-fit: cover;
}
</style>
@endpush

@section('content')
<section class="section-1 mb-4">
    <div class="card-body">
        <div class="row gallery">
            <a href="javascript:void(0);" onclick="redirectBack()" style="color: black" class="fs-text mb-2">
                <i class="bi bi-chevron-left"></i> kembali
            </a>
            @foreach ($dokumentasi_image as $dokumentasi_img)
            <p class="mt-2 mb-0 fs-text text-center">{{ ucwords($dokumentasi_img->dokumentasi->judul) }}</p>
            <div style="text-align: justify" class="mt-2 mb-3 mb-0 fs-text-2">{!! $dokumentasi_img->dokumentasi->deskripsi !!}</div>

                <div class="row">
                    <div class="col-md-12 col-lg-9 mx-auto">
                        <div class="card-body">
                            <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
                              <div class="carousel-inner">
                                @foreach ($dokumentasi_img->images as $key => $images)
                                <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                                    <img src="{{ asset('storage/' . $images) }}" class="d-block img-edit" alt="...">
                                </div>
                                @endforeach
                                
                              </div>
                              <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Previous</span>
                              </a>
                              <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Next</span>
                              </a>
                            </div>
                          </div>
                    </div>
                </div>

            @endforeach
            
        </div>
    </div>
</section>

@endsection

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