<div class="modal fade" id="show{{ $b->id_buket }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">Detail {{ $b->nama }}</h5> <button type="button" class="btn-close"
                    data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <div class="row gx-3 mb-2">
                    <div class="col-12 col-sm-4">
                        @if ($b->foto)
                            {{-- Langsung img tanpa wrapper --}}
                            <img src="{{ asset('storage/' . $b->foto) }}" class="custom-img-box"
                                onclick="showImage('{{ asset('storage/' . $b->foto) }}')">
                        @else
                            {{-- Div pengganti kalau tidak ada foto --}}
                            <div class="custom-img-box d-flex align-items-center justify-content-center text-muted">
                                <small>Tidak ada foto</small>
                            </div>
                        @endif

                    </div>
                    <div class="col-12 col-sm-8">
                        <div class="detail-buket ps-md-3">
                            <div class="row mb-2">
                                <div class="col-5 col-sm-4">
                                    <span class="detail-buket-label">Nama Buket</span>
                                </div>
                                <div class="col-7 col-sm-8">
                                    <span class="detail-buket-value">{{ $b->nama }}</span>
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-5 col-sm-4">
                                    <span class="detail-buket-label text-nowrap">Ukuran & Kategori</span>
                                </div>
                                <div class="col-7 col-sm-8">
                                    <div class="d-flex gap-2 flex-wrap">
                                        <span
                                            class="badge bg-success-subtle rounded-pill px-3 py-2 text-success">{{ $b->ukuran }}</span>
                                        <span
                                            class="badge bg-success-subtle rounded-pill px-3 py-2 text-success">{{ $b->kategori }}</span>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-2">
                                <div class="col-5 col-sm-4">
                                    <span class="detail-buket-label">Harga Buket</span>
                                </div>
                                <div class="col-7 col-sm-8">
                                    <span class="detail-buket-value">Rp
                                        {{ number_format($b->harga, 0, ',', '.') }}</span>
                                </div>
                            </div>

                            <div class="row mb-2">
                                <div class="col-5 col-sm-4">
                                    <span class="detail-buket-label text-nowrap">Deskripsi Buket</span>
                                </div>
                                <div class="col-7 col-sm-8">
                                    <p class="detail-buket-value text-justify mb-0" style="line-height: 1.6;">
                                        {{ $b->deskripsi }}
                                    </p>
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-5 col-sm-4">
                                    <span class="detail-buket-label text-nowrap">Request Khusus</span>
                                </div>
                                <div class="col-7 col-sm-8">
                                    <span class="detail-buket-value">{{ $b->request_khusus }}</span>
                                </div>
                            </div>

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

        </div>
    </div>
</div>
<div class="modal fade" id="modalImagePreview" 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">
                <img id="img-preview-target" src="" class="img-fluid rounded shadow-lg"
                    style="max-height: 85vh;">
            </div>

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