<div class="modal fade" id="editFoto{{ $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">Edit Paket {{ $f->nama }}</h5> <button type="button" class="btn-close"
                    data-bs-dismiss="modal" aria-label="Close"></button>
            </div>


            <form action="{{ route('admin.paket-foto.update', $f->id_paket) }}" method="POST"
                enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="row gx-3">

                        <div class="col-12 col-md-7">

                            <div class="mb-2">
                                <label class="form-label">Nama Paket</label>
                                <input type="text" name="nama"
                                    class="form-control @error('nama') is-invalid @enderror" style="font-size: 14px;"
                                    placeholder="Masukkan Nama Paket"value="{{ old('nama', $f->nama) }}">
                                @error('nama')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="row gx-1">
                                <div class="col-12 col-md-6">
                                    <div class="mb-2">
                                        <label class="form-label">Harga Paket</label>
                                        <input type="number" name="harga"
                                            class="form-control @error('harga') is-invalid @enderror"
                                            style="font-size: 14px;"
                                            placeholder="Harga Paket"value="{{ old('harga', $f->harga) }}">
                                        <p class="mb-0"><small class="text-muted mb-0">Dalam Rupiah</small>
                                        </p>
                                        @error('harga')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                </div>
                                <div class="col-12 col-md-6">
                                    <div class="mb-2">
                                        <label class="form-label">Durasi</label>
                                        <input type="number" name="durasi"
                                            class="form-control @error('durasi') is-invalid @enderror"
                                            style="font-size: 14px;"
                                            placeholder="Durasi Paket"value="{{ old('durasi', $f->durasi) }}">
                                        <p class="mb-0"><small class="text-muted mb-0">Dalam Menit</small>
                                        </p>
                                        @error('durasi')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="mb-2">
                                <label class="form-label">Deskripsi Paket</label>
                                <textarea class="form-control @error('deskripsi') is-invalid @enderror" rows="5" name="deskripsi"
                                    style="font-size: 14px;" placeholder="Masukkan Deskripsi Paket"> {{ old('deskripsi', $f->deskripsi) }}</textarea>
                                @error('deskripsi')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                        </div>
                        <div class="col-12 col-md-5">

                            <div class="mb-2">
                                <label class="form-label">Upload Foto Paket</label>
                                <div class="upload-area p-2  text-center d-flex flex-column align-items-center justify-content-center"
                                    onclick="document.getElementById('editFotoInput{{ $f->id_paket }}').click()">

                                    <i class="bi bi-file-earmark-arrow-up fs-5 text-secondary mb-3"></i>
                                    <span class="fw-semibold text-dark">Upload Foto Paket</span>
                                    <small class="text-muted">Max. 2 MB</small>

                                    <input type="file" id="editFotoInput{{ $f->id_paket }}" class="d-none"
                                        name="foto" accept="image/*"
                                        onchange="previewImage(this, 'editImgPreview{{ $f->id_paket }}', 'placeholder-edit-{{ $f->id_paket }}')">
                                </div>
                                @error('foto')
                                    <div class="text-danger mt-1" style="font-size: 12px;">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-2">
                                <label class="form-label">Preview Foto</label>

                                <div class="border rounded d-flex justify-content-center align-items-center position-relative"
                                    style="height: 120px; background-color: #f8f9fa; overflow: hidden;">

                                    <div id="placeholder-edit-{{ $f->id_paket }}"
                                        class="text-center text-muted d-none">
                                        <i class="bi bi-image fs-5 mb-2"></i>
                                        <p class="mb-0 fw-medium" style="font-size: 0.65rem;">Gambarmu akan muncul di
                                            sini</p>
                                    </div>

                                    <img id="editImgPreview{{ $f->id_paket }}"
                                        src="{{ asset('storage/' . $f->foto) }}" class="img-fluid w-100 h-100"
                                        style="object-fit: cover; position: absolute; top: 0; left: 0;">
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-end border-top-0 pt-0">
                    <button type="submit" class="btn btn-primary rounded-pill terima px-3 py-2">
                        Simpan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
