@extends('layouts.default-detail')

@section('content')

<!-- Page header -->
<div id="home" class="relative py-40 align-items-center d-flex bg-gray1 bb-1 b-gray1">
    <!-- Container for breadcrumb and title -->
    <div class="container">
        <!-- Row for all details -->
        <div class="row">
            <!-- Column for the title -->
            <div class="col-lg-6 t-left t-center-sm">
                <p class="font-secondary uppercase fs-20 dark">
                    GALERI
                </p>
            </div>
            <!-- Column for the breadcrumb -->
            <div class="col-lg-6 d-flex t-right t-center-sm justify-content-lg-end justify-content-center">
                <!-- Start breadcrumb -->
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 gray8 bold uppercase fs-12 c-default">
                        <li class="breadcrumb-item"><a href="/" class="colored-hover">Beranda</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Galeri</li>
                    </ol>
                </nav>
                <!-- End breadcrumb -->
            </div>
        </div>
        <!-- End row for all details -->
    </div>
    <!-- End container for breadcrumb and title -->
</div>
<!-- End page header -->

<!-- Start blog section -->
<section id="blog" class="bg-white pt-50 pb-120">

    <!-- Container for all -->
    <div class="container mt-50">

        <!-- Row -->
        <div class="row">

            <!-- Column for posts -->
            <div class="col-lg-12">

                <!-- Keeper for image and tags -->
                <div class="relative">
                    <!-- Your image -->
                    <div class="d-block relative zi-2">
                        <img data-src="{{asset('storage/gallery/' . $detail->image)}}" src="{{asset('assets/images/blog/post_loader.svg')}}" alt="post image template" class="d-block fullwidth">
                    </div>
                    <div class="overlay align-items-end justify-content-end px-30 py-30 zi-5 dark-corner-right-bottom pointer-events-none">
                        <!-- Post owner and date -->
                        <h6 class="white bold uppercase mt-15 pointer-events-all">
                            {{ $detail->created_at }}
                        </h6>
                    </div>
                </div>
                <!-- End keeper for image and tags -->

                <!-- Start post detals -->
                <div class="row">
                    <!-- Column fullwidth for texts and images -->
                    <div class="col-12 py-30">

                        <a href="#" class="h1 d-inline-flex underline-hover dark font-secondary uppercase lh-md">
                            {!!html_entity_decode($detail->title)!!}
                        </a>

                        <p class="fs-17 c-default lh-30 gray7 mt-15">
                            {!!html_entity_decode($detail->desc)!!}
                        </p>

                        <!-- Title -->
                        <h5 class="fs-18 medium gray9 mt-50">
                            Bagikan ke sosial media
                        </h5>

                        <!-- Share buttons -->
                        <div class="mt-15 d-flex justify-content-start align-items-start fullwidth flex-wrap">
                            <!-- Whatsapp -->
                            <a href="https://api.whatsapp.com/send?text={{ $detail->title }}%20{{ route('gallery.show', $detail->id) }}" target="_blank" class="btn-sm mr-15 mt-15 opacity-8-hover bg-whatsapp white fs-11 bold uppercase slow-sm">
                                Whatsapp
                            </a>
                            <!-- Facebook -->
                            <a href="https://www.facebook.com/sharer/sharer.php?u={{ route('gallery.show', $detail->id) }}" target="_blank" class="btn-sm mr-15 mt-15 opacity-8-hover bg-facebook white fs-11 bold uppercase slow-sm">
                                Facebook
                            </a>
                            <!-- Twitter -->
                            <a href="https://twitter.com/share" target="_blank" class="btn-sm mr-15 mt-15 opacity-8-hover bg-twitter white fs-11 bold uppercase slow-sm">
                                Twitter
                            </a>
                        </div>
                    </div>
                    <!-- End column fullwidth for texts and images -->
                </div>
                <!-- End post detals -->


                <!-- Row for related posts -->
                <div class="row mt-30">
                    <!-- Column for all -->
                    <div class="col-12">
                        <!-- Keeper -->
                        <div class="fullwidth px-25 py-30 bg-gray2 d-block b-1 b-gray2">

                            <!-- Title and navigation -->
                            <div class="row align-items-center justify-content-between">
                                <div class="col-auto">
                                    <h3 id="latest-articles-title" class="font-secondary uppercase">
                                        Daftar Galeri
                                    </h3>
                                </div>
                                <div class="col-auto ml-auto">
                                    <div class="px-5">
                                        <!-- Previous button -->
                                        <button type="button" class="icon-sm ml-3 bg-dark white bg-colored-hover" data-slider-control="#related-post-slider" data-slider-dir="prev">
                                            <i class="ti-angle-left"></i>
                                        </button>
                                        <!-- Next button -->
                                        <button type="button" class="icon-sm ml-3 bg-dark white bg-colored-hover" data-slider-control="#related-post-slider" data-slider-dir="next">
                                            <i class="ti-angle-right"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Slider -->
                            <div id="related-post-slider" class="custom-slider block-img dots-circle c-grab mt-20" data-slick='{"speed":600, "fade": false, "draggable":true, "slidesToShow": 4, "slidesToScroll": 1, "responsive":[{"breakpoint": 1024,"settings":{"slidesToShow": 4}},{"breakpoint": 768,"settings":{"slidesToShow": 1}}]}'>
                                @foreach ($data as $item)
                                <!-- Slide -->
                                <div class="px-5">
                                    <a href="{{ route('gallery.show', $item->id) }}" class="has-overlay d-flex hover-container">
                                        <!-- Overlay text -->
                                        <div class="overlay dark-bottom d-flex align-items-start justify-content-end flex-column px-30 py-20">
                                            <h3 class="fs-16 medium lh-25 white">
                                                {{ $item->title }}
                                            </h3>
                                            <p class="white mt-5 semibold fs-13 uppercase lh-normal">
                                                <i class="ti-timer mr-3"></i>
                                                {{ $item->created_at }}
                                            </p>
                                        </div>
                                        <img src="images/blog/post_loader.svg" data-lazy="{{ asset('storage/gallery/'. $item->image) }}" class="zoom-in-hover-item slow" alt="post iamge template">
                                    </a>
                                </div>
                                <!-- End slide -->
                                @endforeach
                            </div>
                            <!-- End Slider -->

                        </div>
                        <!-- End keeper -->
                    </div>
                    <!-- End column for all -->
                </div>
                <!-- End row for related posts -->

            </div>
            <!-- End column for posts -->

        </div>
        <!-- End row -->

    </div>
    <!-- End container for all -->

</section>
<!-- End blog section -->

@endsection