@extends('user.template')

@push('style')
<style>
body {
    background-color: #D9D9D9;
    /* overflow:hidden; */
}
.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-size {
    object-fit: cover;
}
.section-1 .card {
    background-color: #D9D9D9;
    position: relative;
    color: #055D2D;
}
.section-1 .card-body {
    position: relative;
}

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

@media (min-width: 561px) and (max-width: 705px) {
    
    .section-1 .fs-header {
        font-size: 16px;
    }
    .section-1 .card-text {
        font-size: 14px;
    }
    .section-1 .img-size {
        height: 300px;
        margin-bottom: 10px;
    }
    .section-1 .card-title {
        font-size: 12px;
    }
    .section-1 .card-padding {
        padding-bottom: 50px;
    }
}

@media (min-width: 705px) and (max-width: 1200px) {
    
    .section-1 .fs-header {
        font-size: 18px;
    }
    .section-1 .card-text {
        font-size: 16px;
    }
    .section-1 .img-size {
        height: 350px;
    }
    .section-1 .card{
        width: 80%;
    }
    .section-1 .card-title {
        font-size: 14px;
    }
    .section-1 .card-padding {
        padding-bottom: 100px;
    }
}

@media (min-width: 1201px) {
}

/* responsive */
@media (max-width: 560px) {
    .img-fluid {
        object-fit: cover;
        width: 100%;
        height: 250px;
    }
}

@media (min-width: 561px) and (max-width: 992px) {
    .img-fluid {
        object-fit: cover;
        width: 100%;
        height: 400px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .img-fluid {
        object-fit: cover;
        width: 100%;
        height: 400px;
    }
}

@media (min-width: 1201px) {
    .img-fluid {
        object-fit: cover;
        width: 100%;
        height: 400px;
    }
}
</style>
<link rel="stylesheet" href="/assets/css/dashboard/footer.css">
@endpush

@section('content')
<section class="section-1">
    <div class="clearfix mb-0">
        <div class="float-start">
            <a href="javascript:void(0);" onclick="redirectBack()">
                <i class="bi bi-chevron-left" style="color: black"></i>
            </a>
        </div>
        <div class="float-end d-xl-none">
            <span class="humberger-line"></span>
            <span class="humberger-line"></span>
            <span class="humberger-line"></span>
        </div>
        <p class="text-center text-header fs-header">Galeri</p>
    </div>
    @foreach ($dokumentasi_image as $dokumentasi_img)
    <div class="card mx-auto">
        <div class="row" >
            <div class="col-md-12 col-lg-10 rounded mx-auto">
                <div class="card-body">
                    <div id="carouselExampleCaptions" class="carousel slide d-flex justify-content-center" 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-fluid" 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 class="col-12 ">
                <!-- Set the height of the map container to 100% -->
                <p class="text-top mt-3">{{ ucwords($dokumentasi_img->dokumentasi->judul) }}</p>
                <div class="card-text card-padding" style="color: black; text-align: justify">{!! $dokumentasi_img->dokumentasi->deskripsi !!}</div>
            </div>
        </div>
        {{-- <img src="{{ asset('storage/' . $dokumentasi->image) }}" class="card-img-top img-size mb-3"> --}}
      </div>
    @endforeach
</section>

@push('footer')
  <footer class="bg-white text-white">
    <div class="container">
        <div class="row">
            <a href="/dashboard-user" class="col-4 text-center">
                <i class="icon bi bi-house"></i>
                <p>Home</p>
            </a>
            <div class="col-4 text-center">
                <div class="footer-circle-content">
                    <a href="/user-dashboard">
                        <i class="circle-icon bi bi-plus"></i>
                    </a>
                </div>
            </div>
            <a href="/pilih-profil-pohon" class="col-4 text-center">
                <i class="icon bi bi-tree"></i> 
                <p>Profil Pohon</p>
            </a>
        </div>
    </div>
</footer>
@endpush
    
@endsection

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