@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card mb-4" style="border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.05);">
                    <div class="card-header pb-3 d-flex justify-content-between align-items-center" style="border-bottom: 1px solid #f0f2f5;">
                        <h5 class="mb-0 text-primary fw-bold"><i class="fas fa-cubes me-2"></i>{{ $title_menu ?? 'Barang' }}</h5>
                    </div>
                    
                    <div class="card-body">
                        {{-- Filter & Search Form --}}
                        <form action="{{ url($url_menu) }}" method="GET" class="mb-4 bg-light p-3 pb-2 rounded border">
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label text-xs fw-bold text-uppercase text-secondary mb-1">Cari Barang</label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-white border-end-0"><i class="fas fa-search text-muted"></i></span>
                                        <input type="text" name="search" class="form-control border-start-0 ps-0" placeholder="Cari nama atau kode..." value="{{ $search }}" style="border-radius: 0 8px 8px 0;">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label text-xs fw-bold text-uppercase text-secondary mb-1">Filter Tag</label>
                                    <select name="tag" class="form-select custom-select" onchange="this.form.submit()" style="width: 100%; border-radius: 8px;">
                                        <option value="">-- Semua Tag --</option>
                                        @foreach($tags as $t)
                                            <option value="{{ $t->nama_tag }}" {{ $selectedTag == $t->nama_tag ? 'selected' : '' }}>
                                                {{ $t->nama_tag }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label text-xs fw-bold text-uppercase text-secondary mb-1">Filter Tipe</label>
                                    <select name="tipe" class="form-select custom-select" onchange="this.form.submit()" style="width: 100%; border-radius: 8px;">
                                        <option value="">-- Semua Tipe --</option>
                                        @foreach($tipes as $t)
                                            <option value="{{ $t }}" {{ $selectedTipe == $t ? 'selected' : '' }}>
                                                {{ $t }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-2 d-flex justify-content-end align-items-end gap-2">
                                    <button class="btn btn-primary mb-0 flex-grow-1" type="submit" style="border-radius: 8px;">Cari</button>
                                    <a href="{{ url($url_menu) }}" class="btn btn-outline-secondary mb-0 w-100" style="border-radius: 8px;" title="Reset Filter">
                                        <i class="fas fa-undo"></i>
                                    </a>
                                </div>
                                {{-- Re-bind change event for select2 if standard onchange doesn't trigger --}}
                                <script>
                                    document.addEventListener('DOMContentLoaded', function() {
                                        $('select[name="tag"], select[name="tipe"]').on('select2:select', function (e) {
                                            this.form.submit();
                                        });
                                    });
                                </script>
                            </div>
                        </form>

                        {{-- Grid Catalog --}}
                        <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-xl-5 g-4 mt-1">
                            @forelse($items as $item)
                                @php
                                    // Kumpulkan semua gambar dari array JSON gambar_json
                                    $imgList = [];
                                    if (isset($item->gambar_json) && !empty($item->gambar_json)) {
                                        $decoded = json_decode($item->gambar_json, true);
                                        if (is_array($decoded)) {
                                            foreach ($decoded as $img) {
                                                if (!empty($img) && $img !== 'noimage.png') {
                                                    $imgList[] = $img;
                                                }
                                            }
                                        }
                                    } else {
                                        // Fallback ke metode lama jika gambar_json kosong/null (opsional untuk keamanan)
                                        $imgFields = ['gambar', 'gambar2', 'gambar3', 'gambar4'];
                                        foreach ($imgFields as $f) {
                                            if (isset($item->$f) && !empty($item->$f) && $item->$f !== 'noimage.png') {
                                                $imgList[] = $item->$f;
                                            }
                                        }
                                    }
                                    
                                    $imgCount = count($imgList);
                                    $itemId = $item->kode_baru;
                                @endphp
                                <div class="col">
                                    <div class="card h-100 shadow-sm border" style="border-radius: 12px; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 10px 20px rgba(0,0,0,0.1)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 0.125rem 0.25rem rgba(0,0,0,0.075)';">
                                        {{-- Image Section (Carousel / Clickable) --}}
                                        <div class="position-relative bg-light custom-card-carousel" style="aspect-ratio: 1/1; width: 100%; border-bottom: 1px solid #f0f2f5; overflow: hidden;">
                                            @if($imgCount > 1)
                                                <div id="carouselCard{{ md5($itemId) }}" class="carousel slide h-100" data-bs-interval="false" data-bs-touch="true">
                                                    {{-- TikTok Style Indicators --}}
                                                    <div class="carousel-indicators mb-2" style="bottom: 0;">
                                                        @foreach($imgList as $idx => $img)
                                                            <button type="button" data-bs-target="#carouselCard{{ md5($itemId) }}" data-bs-slide-to="{{ $idx }}" class="{{ $idx == 0 ? 'active' : '' }}" aria-label="Slide {{ $idx+1 }}" style="width: 5px; height: 5px; border-radius: 50%; margin: 0 4px; border: none; background-color: rgba(255,255,255,0.9); box-shadow: 0 0 4px rgba(0,0,0,0.8), 0 0 1px rgba(0,0,0,0.9);" onclick="event.stopPropagation();"></button>
                                                        @endforeach
                                                    </div>
                                                    
                                                    {{-- Images --}}
                                                    <div class="carousel-inner h-100">
                                                        @foreach($imgList as $idx => $img)
                                                            <div class="carousel-item h-100 {{ $idx == 0 ? 'active' : '' }}" onclick="openImageModal('{{ $itemId }}')" style="cursor: zoom-in;">
                                                                <img src="{{ asset('storage/' . $img) }}" class="d-block w-100 h-100" style="object-fit: cover;" onerror="this.src='{{ asset('storage/noimage.png') }}'">
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                    
                                                    {{-- Subtle Controls --}}
                                                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselCard{{ md5($itemId) }}" data-bs-slide="prev" onclick="event.stopPropagation();" style="width: 30px; opacity: 0; transition: opacity 0.3s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0'">
                                                        <span class="carousel-control-prev-icon" aria-hidden="true" style="width: 1.3rem; height: 1.3rem; filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.95));"></span>
                                                    </button>
                                                    <button class="carousel-control-next" type="button" data-bs-target="#carouselCard{{ md5($itemId) }}" data-bs-slide="next" onclick="event.stopPropagation();" style="width: 30px; opacity: 0; transition: opacity 0.3s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0'">
                                                        <span class="carousel-control-next-icon" aria-hidden="true" style="width: 1.3rem; height: 1.3rem; filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.95));"></span>
                                                    </button>
                                                </div>
                                            @elseif($imgCount == 1)
                                                {{-- Single Image - No Carousel --}}
                                                <div class="w-100 h-100 d-flex align-items-center justify-content-center" onclick="openImageModal('{{ $itemId }}')" style="cursor: zoom-in;">
                                                    <img src="{{ asset('storage/' . $imgList[0]) }}" alt="{{ $item->nama }}" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease;" class="catalog-img rounded-0" onerror="this.src='{{ asset('storage/noimage.png') }}'">
                                                </div>
                                            @else
                                                {{-- No Image Placeholder --}}
                                                <div class="text-center text-muted w-100 h-100 d-flex flex-column align-items-center justify-content-center bg-white" onclick="openImageModal('{{ $itemId }}')" style="cursor: zoom-in;">
                                                    <i class="fas fa-image fa-3x mb-2" style="opacity: 0.15;"></i>
                                                    <div style="font-size: 0.75rem; opacity: 0.5;">No Image</div>
                                                </div>
                                            @endif
                                            
                                            {{-- CSS to make indicators and controls active state pop out more --}}
                                            <style>
                                                .custom-card-carousel .carousel-indicators {
                                                    margin-bottom: 8px;
                                                }
                                                .custom-card-carousel .carousel-indicators .active {
                                                    opacity: 1;
                                                    background-color: #3b82f6 !important; /* Blue accent */
                                                    transform: scale(1.4);
                                                    box-shadow: 0 0 5px rgba(0,0,0,0.8), 0 0 1px rgba(0,0,0,1);
                                                }
                                                /* Memastikan panah di Modal Zoom terlihat di atas gambar putih murni */
                                                #modalZoomGambar .carousel-control-prev-icon,
                                                #modalZoomGambar .carousel-control-next-icon {
                                                    filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.95)) drop-shadow(0px 0px 1px rgba(0,0,0,1)) !important;
                                                    width: 2.5rem;
                                                    height: 2.5rem;
                                                }
                                                /* Memastikan indikator bar di Modal Zoom terlihat */
                                                #modalZoomGambar .carousel-indicators button {
                                                    box-shadow: 0 2px 5px rgba(0,0,0,0.9);
                                                    border: 1px solid rgba(0,0,0,0.4);
                                                }
                                            </style>

                                            {{-- Badge Stok Overlaid --}}
                                            <div style="position: absolute; top: 10px; right: 10px; z-index: 2;">
                                                <span class="badge {{ ($item->stok ?? 0) > 0 ? 'bg-success' : 'bg-danger' }} shadow-sm" style="font-size: 0.7rem; letter-spacing: 0.5px;">
                                                    Stok: {{ (float) ($item->stok ?? 0) }} {{ $item->nama_satuan ?? '' }}
                                                </span>
                                            </div>
                                        </div>
                                        
                                        {{-- Content Section --}}
                                        <div class="card-body p-3 d-flex flex-column" style="background-color: #fcfdfd; cursor: pointer;" onclick="openDetailSheet('{{ $itemId }}')" title="Tap untuk lihat detail">
                                            <div class="d-flex align-items-center gap-2 mb-2">
                                                <span class="text-xs text-primary fw-bold mb-0">{{ $item->kode_baru }}</span>
                                                @if(!empty($item->tipe))
                                                    <span class="badge bg-secondary text-white fw-light border-0" style="font-size: 0.55rem; padding: 4px 8px; letter-spacing: 0.5px; border-radius: 10px;">{{ strtoupper($item->tipe) }}</span>
                                                @endif
                                            </div>
                                            <h6 class="card-title text-dark fw-bold mb-1 text-truncate" style="font-size: 0.95rem; line-height: 1.4; max-width: 100%; white-space: nowrap;" title="{{ $item->nama }}">
                                                {{ $item->nama }}
                                            </h6>
                                            
                                            <div class="mb-0 mt-1 d-flex flex-wrap gap-2 text-xs text-secondary">
                                                <span title="Kategori">
                                                    <i class="fas fa-tags text-info opacity-6 me-1"></i>{{ $item->nama_kategori ?? '-' }}
                                                </span>
                                                <span title="Lokasi Penyimpanan">
                                                    <i class="fas fa-map-marker-alt text-danger opacity-6 me-1"></i>{{ $item->lokasi ?? '-' }}
                                                </span>
                                            </div>

                                            <div class="border-top pt-2 mt-auto d-flex align-items-center flex-wrap gap-1 text-xs text-secondary">
                                                <span class="text-muted fw-bold me-1" style="font-size: 0.70rem;">Tags:</span>
                                                @if(!empty($item->tags))
                                                    @php
                                                        $itemTags = explode(',', $item->tags);
                                                    @endphp
                                                    @foreach($itemTags as $tg)
                                                        @if(trim($tg) != '')
                                                            <a href="{{ url($url_menu) }}?tag={{ urlencode(trim($tg)) }}" class="badge bg-gradient-info text-white" style="font-size: 0.65rem; text-decoration: none; padding: 3px 6px; border-radius: 4px;">
                                                                {{ trim($tg) }}
                                                            </a>
                                                        @endif
                                                    @endforeach
                                                @else
                                                    <span class="text-muted fst-italic" style="font-size: 0.70rem;">-</span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Hidden data container for modal --}}
                                <script>
                                    if (typeof katalogImages === 'undefined') var katalogImages = {};
                                    if (typeof katalogData === 'undefined') var katalogData = {};
                                    katalogImages['{{ $itemId }}'] = {
                                        nama: @json($item->nama),
                                        kode: '{{ $item->kode_baru }}',
                                        images: @json(array_map(function($img) { return asset('storage/' . $img); }, $imgList))
                                    };
                                    katalogData['{{ $itemId }}'] = {
                                        nama: @json($item->nama),
                                        kode_baru: @json($item->kode_baru),
                                        kode_lama: @json($item->kode_lama ?? '-'),
                                        tipe: @json($item->tipe ?? '-'),
                                        jenis: @json($item->jenis ?? '-'),
                                        kategori: @json($item->nama_kategori ?? '-'),
                                        nama_label: @json($item->nama_label ?? '-'),
                                        satuan: @json($item->nama_satuan ?? '-'),
                                        stok: {{ (float)($item->stok ?? 0) }},
                                        min_stok: {{ (float)($item->min_stok ?? 0) }},
                                        buffer_stok: @json($item->buffer_stok ?? '-'),
                                        lokasi: @json($item->nama_kontainer ?? $item->lokasi ?? '-'),
                                        status: @json($item->status ?? '-'),
                                        tags: @json($item->tags ?? ''),
                                        images: @json(array_map(function($img) { return asset('storage/' . $img); }, $imgList))
                                    };
                                </script>
                            @empty
                                <div class="col-12 text-center py-5 w-100">
                                    <div class="p-5 border rounded bg-light">
                                        <i class="fas fa-search text-muted mb-3" style="font-size: 4rem; opacity: 0.5;"></i>
                                        <h5 class="text-secondary">Tidak ada barang ditemukan</h5>
                                        <p class="text-muted text-sm mb-0">Coba gunakan kata kunci atau filter tag yang lain.</p>
                                    </div>
                                </div>
                            @endforelse
                        </div>

                        {{-- Pagination --}}
                        <div class="mt-4 pt-4 border-top d-flex justify-content-center" style="overflow-x: auto;">
                            {{-- CSS override untuk mencegah pagination meluber dan fixing text glitch --}}
                            <style>
                                .pagination {
                                    flex-wrap: wrap;
                                    justify-content: center;
                                    row-gap: 8px;
                                }
                                .page-item {
                                    margin: 0 3px;
                                }
                                .page-item .page-link {
                                    border-radius: 6px !important;
                                    padding: 0.5rem 0.85rem;
                                    font-weight: 600;
                                }
                                /* Merombak paksa tombol Previous & Next bawaan Laravel */
                                .page-item:first-child .page-link, 
                                .page-item:last-child .page-link {
                                    color: transparent !important; /* Hilangkan teks asli */
                                    position: relative;
                                    width: 42px;
                                    padding: 0;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                }
                                /* Menutupi SVG bawaan jika ada */
                                .page-item:first-child .page-link svg,
                                .page-item:last-child .page-link svg {
                                    display: none !important;
                                }
                                /* Buat panah sendiri dengan rapi */
                                .page-item:first-child .page-link::after {
                                    content: "«";
                                    color: #5e72e4; /* Bootstrap Primary Default */
                                    position: absolute;
                                    font-size: 1.25rem;
                                }
                                .page-item:last-child .page-link::after {
                                    content: "»";
                                    color: #5e72e4;
                                    position: absolute;
                                    font-size: 1.25rem;
                                }
                                .page-item.disabled .page-link::after {
                                    color: #8898aa !important; /* Warna disable */
                                    opacity: 0.6;
                                }
                            </style>
                            {{ $items->links('pagination::bootstrap-5') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ============================================== --}}
    {{-- MODAL ZOOM GAMBAR (CAROUSEL BOOTSTRAP 5) --}}
    {{-- ============================================== --}}
    <div class="modal fade" id="modalZoomGambar" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content bg-transparent border-0 shadow-none">
                <div class="modal-body p-0 text-center position-relative">
                    <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 mt-2 me-2" data-bs-dismiss="modal" aria-label="Close" style="z-index: 1050;"></button>
                    
                    <div id="katalogCarousel" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-indicators" id="carouselIndicators">
                            <!-- Indicators akan diinjeksi via JS -->
                        </div>
                        <div class="carousel-inner" id="carouselInner" style="background: rgba(0,0,0,0.6); border-radius: 8px;">
                            <!-- Items akan diinjeksi via JS -->
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#katalogCarousel" data-bs-slide="prev" id="carouselPrevBtn">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#katalogCarousel" data-bs-slide="next" id="carouselNextBtn">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                        </button>
                    </div>

                </div>
            </div>
        </div>
    </div>

    {{-- ============================================== --}}
    {{-- BOTTOM SHEET DETAIL BARANG --}}
    {{-- ============================================== --}}
    <div id="detailSheetOverlay" class="detail-sheet-overlay" onclick="closeDetailSheet()"></div>
    <div id="detailSheet" class="detail-sheet">
        {{-- Handle bar --}}
        <div class="detail-sheet-handle" onclick="closeDetailSheet()">
            <div class="detail-sheet-handle-bar"></div>
        </div>

        {{-- Header --}}
        <div class="detail-sheet-header">
            <div class="d-flex align-items-center justify-content-between w-100">
                <h6 class="fw-bold text-dark mb-0" id="dsNama" style="font-size: 1.05rem;">-</h6>
                <button type="button" class="btn btn-sm btn-light border-0 rounded-circle shadow-sm" onclick="closeDetailSheet()" style="width: 32px; height: 32px; padding: 0; line-height: 32px;">
                    <i class="fas fa-times text-secondary" style="font-size: 0.85rem;"></i>
                </button>
            </div>
            <div class="d-flex align-items-center gap-2 mt-1">
                <span class="text-xs text-primary fw-bold" id="dsKodeBaru">-</span>
                <span class="badge bg-secondary text-white fw-light" style="font-size: 0.55rem; padding: 3px 8px; border-radius: 10px;" id="dsTipeBadge"></span>
            </div>
        </div>

        {{-- Content --}}
        <div class="detail-sheet-body">
            {{-- Image Carousel --}}
            <div id="dsImageCarousel" class="detail-sheet-carousel mb-3">
                <div id="dsCarouselInner" class="detail-sheet-carousel-inner">
                    {{-- Gambar diinjeksi via JS --}}
                </div>
                <div id="dsCarouselDots" class="detail-sheet-carousel-dots mt-2"></div>
            </div>

            {{-- Info Grid --}}
            <div class="detail-sheet-info">
                <div class="ds-info-row">
                    <div class="ds-info-label"><i class="fas fa-barcode text-info me-2"></i>Kode Lama</div>
                    <div class="ds-info-value" id="dsKodeLama">-</div>
                </div>
                <div class="ds-info-row">
                    <div class="ds-info-label"><i class="fas fa-layer-group text-primary me-2"></i>Jenis</div>
                    <div class="ds-info-value" id="dsJenis">-</div>
                </div>
                <div class="ds-info-row">
                    <div class="ds-info-label"><i class="fas fa-th-large text-warning me-2"></i>Kategori</div>
                    <div class="ds-info-value" id="dsKategori">-</div>
                </div>
                <div class="ds-info-row">
                    <div class="ds-info-label"><i class="fas fa-tag text-success me-2"></i>Nama Label</div>
                    <div class="ds-info-value" id="dsNamaLabel">-</div>
                </div>
                <div class="ds-info-row">
                    <div class="ds-info-label"><i class="fas fa-balance-scale text-secondary me-2"></i>Satuan</div>
                    <div class="ds-info-value" id="dsSatuan">-</div>
                </div>
                <div class="ds-info-row">
                    <div class="ds-info-label"><i class="fas fa-map-marker-alt text-danger me-2"></i>Lokasi</div>
                    <div class="ds-info-value" id="dsLokasi">-</div>
                </div>
                
                {{-- Stok Section --}}
                <div class="ds-stok-section mt-3 mb-2">
                    <div class="text-xs text-uppercase fw-bold text-secondary mb-2" style="letter-spacing: 1px;">Informasi Stok</div>
                    <div class="row g-2">
                        <div class="col-6 col-md-3">
                            <div class="ds-stok-card">
                                <div class="ds-stok-value" id="dsStok">0</div>
                                <div class="ds-stok-label">Stok</div>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="ds-stok-card">
                                <div class="ds-stok-value" id="dsMinStok">0</div>
                                <div class="ds-stok-label">Min Stok</div>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="ds-stok-card">
                                <div class="ds-stok-value" id="dsBufferStok">-</div>
                                <div class="ds-stok-label">Buffer</div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Status & Tags --}}
                <div class="ds-info-row mt-2">
                    <div class="ds-info-label"><i class="fas fa-circle-check text-success me-2"></i>Status</div>
                    <div class="ds-info-value" id="dsStatus">-</div>
                </div>
                <div class="ds-tags-section mt-2">
                    <div class="ds-info-label mb-2"><i class="fas fa-hashtag text-info me-2"></i>Tags</div>
                    <div id="dsTags" class="d-flex flex-wrap gap-1">-</div>
                </div>
            </div>
        </div>
    </div>

    {{-- Bottom Sheet CSS --}}
    <style>
        /* Overlay */
        .detail-sheet-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.45);
            z-index: 1060;
            opacity: 0;
            transition: opacity 0.3s ease;
            -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
        }
        .detail-sheet-overlay.active {
            display: block;
            opacity: 1;
        }

        /* Sheet */
        .detail-sheet {
            position: fixed;
            left: 0; right: 0; bottom: 0;
            z-index: 1070;
            background: #fff;
            border-radius: 20px 20px 0 0;
            box-shadow: 0 -8px 30px rgba(0,0,0,0.15);
            transform: translateY(100%);
            transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            will-change: transform;
        }
        .detail-sheet.open {
            transform: translateY(0);
        }

        /* Handle bar */
        .detail-sheet-handle {
            display: flex;
            justify-content: center;
            padding: 12px 0 4px;
            cursor: pointer;
            flex-shrink: 0;
        }
        .detail-sheet-handle-bar {
            width: 40px;
            height: 4px;
            background: #d1d5db;
            border-radius: 99px;
        }

        /* Header */
        .detail-sheet-header {
            padding: 4px 20px 12px;
            border-bottom: 1px solid #f0f2f5;
            flex-shrink: 0;
        }

        /* Body scrollable */
        .detail-sheet-body {
            padding: 16px 20px 32px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            flex: 1;
            overscroll-behavior: contain;
        }

        /* Image carousel */
        .detail-sheet-carousel {
            border-radius: 12px;
            overflow: hidden;
            background: #f8f9fa;
        }
        .detail-sheet-carousel-inner {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .detail-sheet-carousel-inner::-webkit-scrollbar { display: none; }
        .detail-sheet-carousel-inner .ds-slide {
            flex: 0 0 100%;
            scroll-snap-align: start;
            aspect-ratio: 4/3;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f8f9fa;
        }
        .detail-sheet-carousel-inner .ds-slide img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        .detail-sheet-carousel-dots {
            display: flex;
            justify-content: center;
            gap: 6px;
            padding: 8px 0;
        }
        .detail-sheet-carousel-dots .ds-dot {
            width: 7px; height: 7px;
            border-radius: 50%;
            background: #d1d5db;
            border: none;
            padding: 0;
            transition: all 0.2s ease;
            cursor: pointer;
        }
        .detail-sheet-carousel-dots .ds-dot.active {
            background: #5e72e4;
            transform: scale(1.3);
        }

        /* Info rows */
        .ds-info-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #f5f5f8;
        }
        .ds-info-label {
            font-size: 0.82rem;
            color: #6b7280;
            font-weight: 500;
            white-space: nowrap;
        }
        .ds-info-value {
            font-size: 0.85rem;
            color: #1f2937;
            font-weight: 600;
            text-align: right;
            max-width: 55%;
            word-break: break-word;
        }

        /* Stok cards */
        .ds-stok-card {
            background: linear-gradient(135deg, #f8fafc, #eef2f7);
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            padding: 12px 8px;
            text-align: center;
            transition: transform 0.2s ease;
        }
        .ds-stok-card:hover { transform: translateY(-2px); }
        .ds-stok-value {
            font-size: 1.25rem;
            font-weight: 700;
            color: #1e293b;
            line-height: 1.2;
        }
        .ds-stok-label {
            font-size: 0.65rem;
            color: #9ca3af;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-top: 4px;
            font-weight: 600;
        }

        /* Desktop: limit width */
        @media (min-width: 768px) {
            .detail-sheet {
                left: 50%;
                right: auto;
                transform: translate(-50%, 100%);
                max-width: 520px;
                border-radius: 20px 20px 0 0;
            }
            .detail-sheet.open {
                transform: translate(-50%, 0);
            }
        }

        /* Prevent scroll behind */
        body.sheet-open {
            overflow: hidden;
        }
    </style>
@endsection

@push('js')
<script>
    // ============================================
    // IMAGE ZOOM MODAL (existing)
    // ============================================
    function openImageModal(itemId) {
        if (typeof katalogImages === 'undefined' || !katalogImages[itemId]) return;

        var data = katalogImages[itemId];
        var currentZoomImages = data.images;

        var indicators = document.getElementById('carouselIndicators');
        var inner = document.getElementById('carouselInner');
        
        indicators.innerHTML = '';
        inner.innerHTML = '';

        if (currentZoomImages.length === 0) {
            currentZoomImages = ['{{ asset("storage/noimage.png") }}'];
        }

        currentZoomImages.forEach(function(imgSrc, index) {
            var btnStyle = index === 0 ? 'class="active" aria-current="true"' : '';
            indicators.innerHTML += `<button type="button" data-bs-target="#katalogCarousel" data-bs-slide-to="${index}" ${btnStyle} aria-label="Slide ${index+1}"></button>`;
            
            var itemClass = index === 0 ? 'carousel-item active' : 'carousel-item';
            inner.innerHTML += `
                <div class="${itemClass}">
                    <img src="${imgSrc}" class="img-fluid rounded shadow-lg d-block w-100" style="max-height: 85vh; object-fit: contain;" alt="Zoom in Gambar ${index+1}" onerror="this.src='{{ asset('storage/noimage.png') }}'">
                </div>
            `;
        });

        var hasMultiple = currentZoomImages.length > 1;
        document.getElementById('carouselPrevBtn').style.display = hasMultiple ? 'flex' : 'none';
        document.getElementById('carouselNextBtn').style.display = hasMultiple ? 'flex' : 'none';
        indicators.style.display = hasMultiple ? 'flex' : 'none';

        var modal = new bootstrap.Modal(document.getElementById('modalZoomGambar'));
        modal.show();
    }

    // ============================================
    // BOTTOM SHEET DETAIL
    // ============================================
    var dsCurrentSlide = 0;
    var dsScrollContainer = null;

    function openDetailSheet(itemId) {
        if (typeof katalogData === 'undefined' || !katalogData[itemId]) return;
        var d = katalogData[itemId];

        // Populate header
        document.getElementById('dsNama').textContent = d.nama;
        document.getElementById('dsKodeBaru').textContent = d.kode_baru;
        var tipeBadge = document.getElementById('dsTipeBadge');
        if (d.tipe && d.tipe !== '-') {
            tipeBadge.textContent = d.tipe.toUpperCase();
            tipeBadge.style.display = '';
        } else {
            tipeBadge.style.display = 'none';
        }

        // Populate info
        document.getElementById('dsKodeLama').textContent = d.kode_lama || '-';
        document.getElementById('dsJenis').textContent = d.jenis || '-';
        document.getElementById('dsKategori').textContent = d.kategori || '-';
        document.getElementById('dsNamaLabel').textContent = d.nama_label || '-';
        document.getElementById('dsSatuan').textContent = d.satuan || '-';
        document.getElementById('dsLokasi').textContent = d.lokasi || '-';

        // Stok cards — strip trailing .00
        function cleanNum(v) { var s = String(v); return s.replace(/\.00$/, '').replace(/\.0$/, ''); }
        document.getElementById('dsStok').textContent = cleanNum(d.stok);
        document.getElementById('dsMinStok').textContent = cleanNum(d.min_stok);

        // Stok card color
        var stokEl = document.getElementById('dsStok');
        stokEl.style.color = d.stok > 0 ? '#16a34a' : '#dc2626';

        // Status
        var statusEl = document.getElementById('dsStatus');
        if (d.status == '1' || d.status == 'Lengkap') {
            statusEl.innerHTML = '<span class="badge bg-success">Lengkap</span>';
        } else if (d.status == '0' || d.status == 'Tidak Lengkap') {
            statusEl.innerHTML = '<span class="badge bg-danger">Tidak Lengkap</span>';
        } else {
            statusEl.textContent = d.status || '-';
        }

        // Tags
        var tagsEl = document.getElementById('dsTags');
        if (d.tags && d.tags.trim() !== '') {
            var tags = d.tags.split(',');
            tagsEl.innerHTML = tags.map(function(t) {
                t = t.trim();
                return t ? '<span class="badge bg-gradient-info text-white" style="font-size: 0.7rem; padding: 4px 10px; border-radius: 6px;">' + t + '</span>' : '';
            }).join('');
        } else {
            tagsEl.innerHTML = '<span class="text-muted fst-italic" style="font-size: 0.8rem;">Tidak ada tag</span>';
        }

        // Build image slides
        var images = d.images && d.images.length > 0 ? d.images : ['{{ asset("storage/noimage.png") }}'];
        var innerEl = document.getElementById('dsCarouselInner');
        var dotsEl = document.getElementById('dsCarouselDots');
        innerEl.innerHTML = '';
        dotsEl.innerHTML = '';
        dsCurrentSlide = 0;

        images.forEach(function(src, idx) {
            innerEl.innerHTML += '<div class="ds-slide"><img src="' + src + '" alt="Gambar ' + (idx+1) + '" onerror="this.src=\'{{ asset("storage/noimage.png") }}\'"></div>';
            if (images.length > 1) {
                dotsEl.innerHTML += '<button class="ds-dot ' + (idx === 0 ? 'active' : '') + '" onclick="dsGoToSlide(' + idx + ')"></button>';
            }
        });

        // Scroll listener for dots
        dsScrollContainer = innerEl;
        innerEl.scrollLeft = 0;
        innerEl.onscroll = function() {
            var slideW = innerEl.clientWidth;
            var idx = Math.round(innerEl.scrollLeft / slideW);
            if (idx !== dsCurrentSlide) {
                dsCurrentSlide = idx;
                dsUpdateDots(idx);
            }
        };

        // Show sheet
        document.getElementById('detailSheetOverlay').classList.add('active');
        document.body.classList.add('sheet-open');
        requestAnimationFrame(function() {
            document.getElementById('detailSheet').classList.add('open');
        });

        // Scroll body to top
        document.querySelector('.detail-sheet-body').scrollTop = 0;
    }

    function closeDetailSheet() {
        var sheet = document.getElementById('detailSheet');
        sheet.classList.remove('open');
        // Reset transform for desktop
        sheet.style.transform = '';
        document.getElementById('detailSheetOverlay').classList.remove('active');
        document.body.classList.remove('sheet-open');
    }

    function dsGoToSlide(idx) {
        if (!dsScrollContainer) return;
        var slideW = dsScrollContainer.clientWidth;
        dsScrollContainer.scrollTo({ left: slideW * idx, behavior: 'smooth' });
        dsCurrentSlide = idx;
        dsUpdateDots(idx);
    }

    function dsUpdateDots(activeIdx) {
        var dots = document.querySelectorAll('#dsCarouselDots .ds-dot');
        dots.forEach(function(dot, i) {
            dot.classList.toggle('active', i === activeIdx);
        });
    }

    // Close with Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') closeDetailSheet();
    });

    // Swipe-to-dismiss support
    (function() {
        var sheet = document.getElementById('detailSheet');
        var startY = 0, currentY = 0, isDragging = false;

        sheet.addEventListener('touchstart', function(e) {
            var body = sheet.querySelector('.detail-sheet-body');
            var handle = sheet.querySelector('.detail-sheet-handle');
            if (handle.contains(e.target) || body.scrollTop <= 0) {
                startY = e.touches[0].clientY;
                isDragging = true;
                sheet.style.transition = 'none';
            }
        }, { passive: true });

        sheet.addEventListener('touchmove', function(e) {
            if (!isDragging) return;
            currentY = e.touches[0].clientY;
            var diff = currentY - startY;
            if (diff > 0) {
                if (window.innerWidth >= 768) {
                    sheet.style.transform = 'translate(-50%, ' + diff + 'px)';
                } else {
                    sheet.style.transform = 'translateY(' + diff + 'px)';
                }
            }
        }, { passive: true });

        sheet.addEventListener('touchend', function() {
            if (!isDragging) return;
            isDragging = false;
            sheet.style.transition = '';
            var diff = currentY - startY;
            if (diff > 120) {
                closeDetailSheet();
            } else {
                sheet.style.transform = '';
                sheet.classList.add('open');
            }
            startY = 0;
            currentY = 0;
        }, { passive: true });
    })();
</script>
@endpush