Untitled
unknown
plain_text
a year ago
5.2 kB
3
Indexable
@extends('admin.layout') @section('header') @endsection @section('content') <!-- Membuat kotak dengan margin dan padding untuk membuatnya lebih terstruktur --> <div class="p-6 bg-white border rounded-lg shadow-lg relative"> <!-- Kelas tambahan untuk kotak dan posisi --> <!-- Tombol silang untuk kembali ke menu indeks --> <a href="{{ route('fasiliti.index') }}" class="absolute top-3 right-3 text-gray-500 hover:text-gray-700"> <i class="fas fa-times"></i> <!-- Ikon silang --> </a> <!-- Judul dan aksi tambahan --> <div class="flex justify-between mb-4"> <h1 class="text-2xl font-bold text-green-600">Ubah maklumat fasiliti</h1> </div> <!-- Formulir untuk mengedit fasilitas --> <form action="{{ route('fasiliti.update', $fasilitas->id) }}" method="POST" enctype="multipart/form-data" class="space-y-6"> @csrf <!-- Token CSRF --> @method('POST') <!-- Metode HTTP untuk update --> <!-- Input untuk gambar --> <div class="mb-3"> <label for="image" class="text-xl font-semibold">Gambar Fasilitas</label> <div class="border-2 border-dashed border-gray-300 h-60 w-full flex items-center justify-center rounded-md overflow-hidden" id="image-preview" onclick="document.getElementById('image').click()"> @if ($fasilitas->gambar) <img id="preview-image" src="{{ asset($fasilitas->gambar) }}" class="h-60 object-cover w-full" /> @else <div class="flex flex-col items-center text-gray-500"> <i class="fas fa-upload text-4xl"></i> <!-- Ikon upload --> <p class="mt-2 text-sm">Pastikan gambar berformat PNG atau JPEG (file tidak lebih dari 8 MB)</p> </div> @endif </div> <!-- Pesan error jika ada --> @error('cover') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror <!-- Input file --> <input type="file" id="image" name="cover" accept="image/*" class="hidden" onchange="previewImage(event)"> </div> <!-- Input untuk nama --> <div> <label for="nama" class="block text-gray-700 font-bold mb-2">Nama Fasilitas:</label> <input type="text" id="nama" name="nama" class="w-full border border-gray-300 rounded-lg px-3 py-2" value="{{ old('nama', $fasilitas->nama) }}" required> @error('nama') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror </div> <!-- Input untuk keterangan --> <div> <label for="keterangan" class="block text-gray-700 font-bold mb-2">Keterangan:</label> <textarea id="keterangan" name="keterangan" rows="3" class="w-full border border-gray-300 rounded-lg px-3 py-2" required>{{ old('keterangan', $fasilitas->keterangan) }}</textarea> @error('keterangan') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror </div> <!-- Input untuk status --> <div> <label for="status" class="block text-gray-700 font-bold mb-2">Status:</label> <select id="status" name="status" class="w-full border border-gray-300 rounded-lg px-3 py-2" required> <option value="1" {{ old('status', $fasilitas->status) == 1 ? 'selected' : '' }}>Aktif</option> <option value="0" {{ old('status', $fasilitas->status) == 0 ? 'selected' : '' }}>Tidak Aktif</option> </select> @error('status') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror </div> <!-- Tombol Simpan Perubahan --> <div class="flex justify-center"> <button type="submit" class="bg-green-600 hover:bg-green-700 text-white py-2 px-6 rounded-lg"> Simpan Perubahan </button> </div> </form> </div> <!-- Script untuk preview gambar --> <script> function previewImage(event) { const [file] = event.target.files; const previewImage = document.getElementById('preview-image'); const icon = document.querySelector('#image-preview .fa-upload'); const instructions = document.querySelector('#image-preview p'); if (file) { previewImage.src = URL.createObjectURL(file); if (icon) { icon.classList.add('hidden'); } if (instructions) { instructions.classList.add('hidden'); } } } </script> @endsection
Editor is loading...
Leave a Comment