@extends('user.template')

@push('style')
<link rel="stylesheet" href="/assets/css/dashboard/footer.css">
<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));
}
.img-size {
    width: 100% !important;
    object-fit: cover;
}
.martop {
    margin-top: -15px;
}
.martop-1 {
    margin-top: 30px;
}
.fs-text {
    padding-bottom: 20px;
}

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

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

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

@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;
    }
    .card-title-text {
        font-size: 16px;
    }
    .card-small-text {
        font-size: 15px;
    }
    .img-size {
        height: 220px;
    }
}

.body-card {
    display: flex;
    flex-direction: column;
    /* height: 100%; */
}
.body-card .card-title-text {
    height: 500%;
}

.body-card .card-small-text {
    height: 100%;
}

/* 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;
    }
}
.tanggal {
    font-weight: 200;
    margin: 0;
    padding: 0;
    opacity: .7;
}
.card-img-top {
    object-fit: cover;
}
</style>
@endpush

    <section class="section-1">
        <div class="clearfix mb-0 pt-2" style="background: #055D2D; color: white">
            <div class="float-start ms-3">
                <a href="javascript:void(0);" onclick="redirectBack()">
                    <i class="bi bi-chevron-left" style="color: white"></i>
                </a>
            </div>
            <div class="float-end d-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" style="margin: 20px;">
            <div class="row">
                @if ($dokumentasi_images->count() > 0)
                    <p class="mt-2 mb-0 fs-text">Galeri Pengguna</p>
                @endif
                @foreach ($dokumentasi_images as $dokumentasi_image)
                    <a class="col-xl-4 col-md-6 col-sm-12 martop" href="/galeri-guest/{{ $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>
                @endforeach
            </div>
            
    
            <div class="row">
                @if ($dokumentasi_images_anom->count() > 0)
                    <p class="mt-2 mb-0 fs-text">Galeri Orang Lain</p>
                @endif
                @foreach ($dokumentasi_images_anom as $dokumentasi_image_an)
                    <a class="col-xl-4 col-md-6 col-sm-12 martop" href="/galeri-guest/{{ $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>
            <div class="mt-2 p-2">{{ $dokumentasi_images_anom->links() }}</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
    
@push('script')
<script src="/assets/js/ajax_jquery.min.js" integrity="" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    {{-- <script src="/assets/static/js/components/dark.js"></script> --}}
    <script src="/assets/extensions/perfect-scrollbar/perfect-scrollbar.min.js"></script>
    <script src="/assets/compiled/js/app.js"></script>
    <script src="/assets/sweetalert2/sweetalert2.min.js"></script>
    <script>
        function redirectBack() {
            window.history.back();
        }
    </script>
@endpush