<div class="modal fade" id="foto{{ $f->id_paket }}" 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 {{ $f->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">
                    <div class="col-12 col-sm-4">
                        @if ($f->foto)
                            {{-- Langsung img tanpa wrapper --}}
                            <img src="{{ asset('storage/' . $f->foto) }}" class="custom-img-box-foto"
                                onclick="showImage('{{ asset('storage/' . $f->foto) }}')">
                        @else
                            {{-- Div pengganti kalau tidak ada foto --}}
                            <div
                                class="custom-img-box-foto 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 h-100">
                            <div class="row mb-2">
                                <div class="col-4 col-sm-3">
                                    <span class="detail-buket-label">Nama Paket</span>
                                </div>
                                <div class="col-8 col-sm-9">
                                    <span class="detail-buket-value">{{ $f->nama }}</span>
                                </div>
                            </div>

                            <div class="row mb-2">
                                <div class="col-4 col-sm-3">
                                    <span class="detail-buket-label">Harga Paket</span>
                                </div>
                                <div class="col-8 col-sm-9">
                                    <span class="detail-buket-value">Rp
                                        {{ number_format($f->harga, 0, ',', '.') }}</span>
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-4 col-sm-3">
                                    <span class="detail-buket-label">Durasi Paket</span>
                                </div>
                                <div class="col-8 col-sm-9">
                                    <span class="detail-buket-value">{{ $f->durasi }} Menit</span>
                                </div>
                            </div>

                            <div class="row mb-2">
                                <div class="col-4 col-sm-3">
                                    <span class="detail-buket-label text-nowrap">Deskripsi Paket</span>
                                </div>
                                <div class="col-8 col-sm-9">
                                    <p class="detail-buket-value text-justify mb-0" style="line-height: 1.6;">
                                        {{ $f->deskripsi }}
                                    </p>
                                </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>
