@extends('user.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;
}

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

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

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

@media (min-width: 1201px) {
    .section-1 .fs-header {
        font-size: 18px;
    }
    .section-1 .fs-text {
        font-size: 16px;
    }
    .section-1 .img-height {
        height: 250px;
    }
    .section-1 .galeri-2 {
        padding-bottom: 50px;
    }
}

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

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

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

@media (min-width: 1201px) {
    .card-title-text {
        font-size: 16px;
    }
    .tanggal {
        font-size: 14px;
    }
    .card-img-top {
        height: 250px;
    }
    .martop {
        margin-bottom: 30px;
    }
}
</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>
    <div class="card-body">
        <div class="row gallery ">
            <div class="col-md-12">
                <p class="mt-2 mb-0 fs-text">Galeri Pengguna</p>
            </div>
            @forelse ($dokumentasi_images as $dokumentasi_image)
                <a class="col-xl-4 col-md-6 col-sm-12 martop" href="/dokumentasi/{{ $dokumentasi_image->dokumentasi->id }}">
                    <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 class="d-flex justify-content-end"> --}}
                                    @php
                                        $namaBulanIndonesia = [
                                            "January" => "Januari",
                                            "February" => "Februari",
                                            "March" => "Maret",
                                            "April" => "Aprtil",
                                            "May" => "Mei",
                                            "June" => "Juni",
                                            "July" => "Juli",
                                            "August" => "Agustus",
                                            "September" => "Septemer",
                                            "October" => "Oktober",
                                            "November" => "November",
                                            "December" => "Desember",
                                        ];
                                        $tanggal = date("j", strtotime($dokumentasi_image->dokumentasi->created_at));
                                        $namaBulanInggris = date("F", strtotime($dokumentasi_image->dokumentasi->created_at));
                                        $namaBulanTerjemahan = $namaBulanIndonesia[$namaBulanInggris];
                                        $tahun = date("Y", strtotime($dokumentasi_image->dokumentasi->created_at));
                                        $formattedDate = "$tanggal $namaBulanTerjemahan $tahun";
                                    @endphp
                                    <span class="tanggal" style="font-weight: 200">{{ $formattedDate }}</span>
                                {{-- </div> --}}
                            </div>
                        </div>
                    </div>
                </a>
            @empty
                <center><h5>Belum ada data...</h5></center>
            @endforelse
        </div>
        <div class="row">
            <div class="col-md-12">
                <hr>
            </div>
        </div>
        

        <div class="row gallery ">
            <div class="col-md-12">
                <p class="mt-2 mb-0 fs-text">Galeri Orang Lain</p>
            </div>
            @foreach ($dokumentasi_images_anom as $dokumentasi_image_an)
                <a class="col-xl-4 col-md-6 col-sm-12 martop" href="/dokumentasi/{{ $dokumentasi_image_an->dokumentasi->id }}">
                    <div class="card p-0 m-0">
                        <div class="card-content">
                            <img src="{{ asset('storage/' . $dokumentasi_image_an->images[0]) }}" class="card-img-top img-fluid"
                                alt="singleminded">
                            <div class="card-body">
                                <p class="card-title-text">{{ $dokumentasi_image_an->dokumentasi->judul }}</p>
                                {{-- <div class="d-flex justify-content-end"> --}}
                                    @php
                                        $namaBulanIndonesia = [
                                            "January" => "Januari",
                                            "February" => "Februari",
                                            "March" => "Maret",
                                            "April" => "Aprtil",
                                            "May" => "Mei",
                                            "June" => "Juni",
                                            "July" => "Juli",
                                            "August" => "Agustus",
                                            "September" => "Septemer",
                                            "October" => "Oktober",
                                            "November" => "November",
                                            "December" => "Desember",
                                        ];
                                        $tanggal = date("j", strtotime($dokumentasi_image_an->dokumentasi->created_at));
                                        $namaBulanInggris = date("F", strtotime($dokumentasi_image_an->dokumentasi->created_at));
                                        $namaBulanTerjemahan = $namaBulanIndonesia[$namaBulanInggris];
                                        $tahun = date("Y", strtotime($dokumentasi_image_an->dokumentasi->created_at));
                                        $formattedDate = "$tanggal $namaBulanTerjemahan $tahun";
                                    @endphp
                                    <span class="tanggal" style="font-weight: 200">{{ $formattedDate }}</span>
                                {{-- </div> --}}
                            </div>
                        </div>
                    </div>
                </a>
            @endforeach
            <div class="mt-2 p-2">{{ $dokumentasi_images_anom->links() }}</div>
        </div>

        {{-- <div class="row mt-4 mt-md-4 gallery galeri-2">
            @if ($recents->count() > 0)
            <p class="mt-10 mb-0 fs-text">Album yang lain</p>
            @endif
            @foreach ($dokumentasis as $dokumentasi)
            <div class="col-6 col-sm-6 col-lg-3 mt-md-0 mb-3">
                <a href="/dokumentasi/{{ $dokumentasi->id }}">
                    <img class="w-100 img-height active" src="{{ asset('storage/' . $dokumentasi->image) }}">
                </a>
            </div>
            @endforeach
            <div class="mt-2 p-2">{{ $dokumentasis->links() }}</div>
        </div> --}}
    </div>
</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

{{-- <section class="section">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Our Gallery</h5>
                </div>
                
            </div>
        </div>
    </div>
</section> --}}