<div class="modal fade" id="createFoto" 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">Tambah Paket Foto</h5> <button type="button" class="btn-close"
                    data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="{{ route('admin.paket-foto.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <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') }}">
                                @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') }}">
                                        <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') }}">
                                        <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 name="deskripsi" class="form-control @error('deskripsi') is-invalid @enderror" rows="5"
                                    style="font-size: 14px;" placeholder="Masukkan Deskripsi Paket">{{ old('deskripsi') }}</textarea>
                                @error('deskripsi')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                </textarea>
                            </div>

                        </div>
                        <div class="col-12 col-md-5">
                            <div class="mb-3">
                                <label class="form-label">Upload Foto Buket</label>

                                {{-- Area Upload Custom --}}
                                <div class="upload-area p-4 text-centerd d-flex flex-column align-items-center justify-content-center"
                                    onclick="document.getElementById('createFotoInput').click()"
                                    style="cursor: pointer;">

                                    <i class="bi bi-file-earmark-arrow-up fs-5 text-secondary mb-3"></i>
                                    <span class="fw-semibold text-dark">Klik untuk Upload</span>
                                    <small class="text-muted">Max 2MB (JPG/PNG)</small>

                                    {{-- Input File Tersembunyi (ID UNIK: createFotoInput) --}}
                                    <input type="file" id="createFotoInput" class="d-none" name="foto"
                                        accept="image/*"
                                        onchange="previewImage(this, 'createImgPreview', 'createPlaceholder')">
                                </div>
                                @error('foto')
                                    <div class="text-danger mt-1" style="font-size: 12px;">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- 7. Preview Foto (Fixed Container) --}}
                            <div class="mb-3">
                                <label class="form-label">Preview</label>
                                <div class="border rounded d-flex justify-content-center align-items-center position-relative overflow-hidden"
                                    style="height: 120px; background-color: #f8f9fa;">

                                    {{-- Placeholder Teks (ID UNIK: createPlaceholder) --}}
                                    <div id="createPlaceholder" class="text-center text-muted">
                                        <i class="bi bi-image fs-4"></i>
                                        <p class="mb-0" style="font-size: 12px;">Belum ada foto dipilih</p>
                                    </div>

                                    {{-- Gambar Preview (ID UNIK: createImgPreview) --}}
                                    <img id="createImgPreview" src="#" class="d-none w-100 h-100"
                                        style="object-fit: contain;">
                                </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>
</div>
