Untitled

@extends('admin.layout')
@section('header')
<div class="flex justify-between items-center"> <!-- Kontainer dengan ikon -->
    <h1 class="text-3xl font-bold text-green-600">Tambah Fasiliti</h1>
</div>
@endsection
@section('content')
    <div class="relative p-6 bg-white shadow-lg rounded-lg"> <!-- Kontainer dengan posisi relatif -->
        
        <!-- Ikon silang di sudut kanan atas -->
        <a href="{{ route('fasiliti.index') }}" class="absolute top-2 right-2 text-gray-600 hover:text-gray-800">
            <i class="fas fa-times text-2xl"></i> <!-- Ikon silang -->
        </a>

        <form action="{{ route('fasiliti.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf <!-- Token CSRF untuk keamanan -->

            <div class="mb-3">
                <div class="mb-2">
                    <label for="image" class="text-xl font-semibold ">Gambar Fasiliti</label>
                </div>

                <!-- Preview gambar -->
                <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()">
                    <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>
                    <img id="preview-image" src="" class="hidden h-60 object-cover w-full" />
                    <!-- Gambar pratinjau -->
                </div>

                @error('cover')
                    <span class="text-red-500 text-sm">{{ $message }}</span>
                @enderror

                <!-- Input file disembunyikan -->
                <input type="file" id="image" name="cover" accept="image/*" class="hidden" onchange="previewImage(event)">
            </div>

            <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" required>
                @error('nama')
                    <span class="text-red-500 text-sm">{{ $message }}</span>
                @enderror
            </div>

            <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></textarea>
                @error('keterangan')
                    <span class="text-red-500 text-sm">{{ $message }}</span>
                @enderror
            </div>

            <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">Aktif</option>
                    <option value="0">Tidak Aktif</option>
                </select>
                @error('status')
                    <span class="text-red-500 text-sm">{{ $message }}</span>
                @enderror
            </div>

            <div class="flex justify-center">
                <button type="submit" class="bg-green-600 hover:bg-green-700 text-white py-2 px-6 rounded-lg">
                    Tambah Fasilitas
                </button>
            </div>
        </form>
    </div>
    <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); 
                previewImage.classList.remove('hidden'); 
                icon.classList.add('hidden'); 
                instructions.classList.add('hidden'); 
            }
        }
    </script>
@endsection