Untitled

@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