@extends('layouts.default')

@php
    use Illuminate\Support\Str;
@endphp

@section('title', 'Gallery Produk')

@push('css')
    <link href="{{ asset('assets/plugins/isotope/isotope.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/lightbox2/css/lightbox.css') }}" rel="stylesheet" />
    <style>
        .image-info .title {
            font-size: 15px;
            font-weight: 600;
        }

        .image-caption {
            font-size: 12px;
            text-align: center;
            background: #f8f9fa;
            border-radius: 4px;
            padding: 4px;
            margin-top: 6px;
        }

        /* ---- Layout grid gallery ---- */
        #gallery {
            display: flex;
            flex-wrap: wrap;
            justify-content: start;
            gap: 15px;
            /* jarak antar item */
        }

        /* ---- Item tiap produk ---- */
        #gallery .image {
            flex: 1 1 calc(25% - 15px);
            /* 4 kolom per baris */
            max-width: calc(25% - 15px);

            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            transition: transform .5s ease;
        }

        /* Efek hover */
        #gallery .image:hover {
            transform: translateY(-5px);
        }

        /* Gambar */
        #gallery .image img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        /* Info produk */
        #gallery .image-info {
            padding: 10px 14px;
        }

        #gallery .image-info h5 {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 5px;
        }

        #gallery .image-info small {
            color: #555;
        }

        #gallery .image-info .desc {
            color: #777;
            font-size: 13px;
        }

        /* Responsive Grid Layout */
        @media (max-width: 1200px) {

            /* Laptop – 3 kolom */
            #gallery .image {
                flex: 1 1 calc(33.333% - 15px);
                max-width: calc(33.333% - 15px);
            }
        }

        @media (max-width: 992px) {

            /* Tablet – 2 kolom */
            #gallery .image {
                flex: 1 1 calc(50% - 10px);
                max-width: calc(50% - 10px);
            }
        }

        @media (max-width: 576px) {

            /* Mobile – 1 kolom */
            #gallery {
                gap: 10px;
                /* kurangi jarak agar rapi di mobile */
            }

            #gallery .image {
                flex: 1 1 100%;
                max-width: 100%;
            }
        }
    </style>
@endpush

@section('content')
    <ol class="breadcrumb pull-right">
        <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
        <li class="breadcrumb-item active">Gallery Produk</li>
    </ol>

    <h1 class="page-header">Gallery Produk <small>Semua data aset & peralatan</small></h1>

    <!-- Filter Group -->
    <div id="options" class="m-b-10">
        <span class="gallery-option-set" id="filter" data-option-key="filter">
            <a href="#show-all" class="btn btn-default btn-xs active" data-option-value="*">Tampilkan Semua</a>
            @foreach($produk->groupBy('tipeProduk.nama_tipe') as $namaTipe => $group)
                <a href="#{{ Str::slug($namaTipe) }}" class="btn btn-default btn-xs"
                    data-option-value=".{{ Str::slug($namaTipe) }}">
                    {{ $namaTipe ?? 'Tanpa Tipe' }}
                </a>
            @endforeach
        </span>
    </div>

    <!-- Gallery -->
    <div id="gallery" class="gallery">
        @foreach($produk as $item)
            @php
                $groupClass = Str::slug(optional($item->tipeProduk)->nama_tipe ?? 'lainnya');
                $imagePath = $item->gambar_produk
                    ? asset('assets/images/gambar_produk/' . $item->gambar_produk)
                    : asset('assets/images/default.png');
            @endphp

            <div class="image {{ $groupClass }}">
                <div class="image-inner">
                    <a href="{{ $imagePath }}" data-lightbox="{{ $groupClass }}">
                        <img src="{{ $imagePath }}" alt="{{ $item->nama_produk }}" />
                    </a>
                    <p class="image-caption">
                        {{ $item->nama_produk }}
                    </p>
                </div>
                <div class="image-info">
                    <h5 class="title">{{ $item->nama_produk }}</h5>
                    <div class="pull-right">
                        <small>Tipe:</small>
                        <span class="badge badge-secondary">
                            {{ optional($item->tipeProduk)->nama_tipe ?? 'Tidak diketahui' }}
                        </span>
                    </div>
                    <div class="desc mt-2">
                        <strong>Merek:</strong> {{ $item->merek ?? '-' }}<br>
                        <strong>Tahun:</strong> {{ $item->tahun_produk ?? '-' }}<br>
                        <strong>Keterangan:</strong> {{ Str::limit($item->deskripsi_produk, 100) }}
                    </div>
                </div>
            </div>
        @endforeach
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('assets/plugins/isotope/jquery.isotope.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/lightbox2/js/lightbox.min.js') }}"></script>
    <script src="{{ asset('assets/js/demo/gallery.demo.js') }}"></script>
    <script>
        $(document).ready(function () {
            Gallery.init();

            // Panggil ulang layout setelah load
            setTimeout(function () {
                $('#gallery').isotope('layout');
            }, 500);
        });
    </script>
@endpush