@extends('layouts.dashboardAdmin')

@section('content')
<div class="p-6">
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-3xl font-semibold text-blue-900">📍 Daftar Lokasi</h2>
        <a href="{{ route('lokasi.create') }}" 
           class="bg-blue-800 hover:bg-blue-900 text-white font-semibold px-5 py-2 rounded-xl shadow-lg transition duration-200 ease-in-out">
            + Tambah Lokasi
        </a>
    </div>

    @if(session()->has('success'))
    <div id="success-popup" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm z-50">
        <div class="bg-white rounded-xl shadow-lg max-w-md w-full p-6 text-center animate-fade-in">
            <div class="flex justify-center">
                <div class="bg-blue-100 p-3 rounded-full">
                    <svg class="w-12 h-12 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                    </svg>
                </div>
            </div>
            <h2 class="text-xl font-semibold text-gray-800 mt-4">Berhasil!</h2>
            <p class="text-gray-600 mt-2">{{ session('success') }}</p>
            <button onclick="closeSuccessPopup()" class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">Tutup</button>
        </div>
    </div>

    <script>
        setTimeout(() => {
            closeSuccessPopup();
        }, 3000); // Pop-up akan otomatis hilang setelah 3 detik

        function closeSuccessPopup() {
            let popup = document.getElementById("success-popup");
            if (popup) {
                popup.classList.add("opacity-0", "transition-opacity", "duration-500");
                setTimeout(() => popup.remove(), 500);
            }
        }
    </script>
@endif



    <div class="overflow-x-auto rounded-xl shadow-lg">
        <table class="min-w-full bg-white rounded-xl overflow-hidden">
            <thead class="bg-blue-900 text-white uppercase text-sm tracking-wider">
                <tr>
                    <th class="py-4 px-6 text-left">#</th>
                    <th class="py-4 px-6 text-left">Nama Lokasi</th>
                    <th class="py-4 px-6 text-left">Aksi</th>
                </tr>
            </thead>
            <tbody class="text-blue-900 text-sm divide-y divide-gray-200">
                @forelse($lokasis as $index => $lokasi)
                    <tr class="hover:bg-blue-50 transition duration-150">
                        <td class="py-4 px-6 font-medium">{{ $index + 1 }}</td>
                        <td class="py-4 px-6">{{ $lokasi->nama_lokasi }}</td>
                        <td class="py-4 px-6 flex gap-4 items-center">
                            {{-- Edit --}}
                            <a href="{{ route('lokasi.edit', $lokasi->id) }}" class="hover:scale-105 transition" title="Edit">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-black" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M15.232 5.232l3.536 3.536M9 11l6-6 3 3-6 6H9v-3zM3 21h18" />
                                </svg>
                            </a>

                            {{-- Hapus --}}
                            <form action="{{ route('lokasi.destroy', $lokasi->id) }}" method="POST" onsubmit="return confirm('Yakin ingin menghapus?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="hover:scale-105 transition" title="Hapus">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-black" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6M9 7V4h6v3m-9 0h12" />
                                    </svg>
                                </button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="3" class="py-6 px-6 text-center text-gray-500 italic">Belum ada lokasi yang ditambahkan.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection