{{-- resources/views/admin/users.blade.php --}}
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Manajemen Pengguna</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
    <style>
        body { font-family: 'Inter', sans-serif; background-color: #f1f5f9; }
    </style>
</head>
<body class="flex h-screen overflow-hidden">

<!-- Sidebar -->
<aside id="sidebar" class="fixed top-0 left-0 z-30 w-64 h-full bg-white shadow-md overflow-y-auto hidden md:block">
    <div class="p-5 border-b">
        <h2 class="text-2xl font-bold text-blue-600">
            <a href="/admin/dashboard" class="hover:underline">Admin Panel</a>
        </h2>
    </div>
    <nav class="p-4 space-y-3">
        <a href="/admin/bookings" class="flex items-center gap-3 px-4 py-2 rounded hover:bg-blue-100 transition-all">
            <i class="bi bi-calendar3 text-blue-500"></i> Booking
        </a>
        <a href="/admin/users" class="flex items-center gap-3 px-4 py-2 rounded bg-blue-100 text-blue-700 font-semibold">
            <i class="bi bi-people-fill text-blue-500"></i> Pengguna
        </a>
        <a href="/admin/upload" class="flex items-center gap-3 px-4 py-2 rounded hover:bg-blue-100 transition-all">
            <i class="bi bi-upload text-blue-500"></i> Token Foto
        </a>
        <a href="/admin/reports" class="flex items-center gap-3 px-4 py-2 rounded hover:bg-blue-100 transition-all">
            <i class="bi bi-boxes text-blue-500"></i> Produk
        </a>
        <form action="/logout" method="POST" class="px-4 mt-4">
            @csrf
            <button type="submit" class="w-full flex items-center justify-center gap-2 bg-red-500 text-white py-2 rounded hover:bg-red-600 transition">
                <i class="bi bi-box-arrow-right"></i> Logout
            </button>
        </form>
    </nav>
</aside>

<!-- Mobile Topbar -->
<header class="md:hidden fixed top-0 left-0 w-full flex items-center justify-between bg-white shadow px-4 py-3 z-20">
    <button onclick="toggleSidebar()" class="text-2xl text-blue-600">
        <i class="bi bi-list"></i>
    </button>
    <h1 class="text-xl font-bold text-blue-600">Admin Panel</h1>
</header>

<!-- Mobile Overlay -->
<div id="overlay" class="fixed inset-0 bg-black bg-opacity-40 hidden z-20" onclick="toggleSidebar()"></div>

<!-- Main Content -->
<main class="flex-1 md:ml-64 mt-16 md:mt-0 p-6 overflow-y-auto w-full">
    <div class="max-w-6xl mx-auto">
        <h2 class="text-3xl font-bold text-gray-800 mb-6">Manajemen Pengguna</h2>

        @if(session('success'))
            <div class="bg-green-100 text-green-800 border border-green-300 px-4 py-3 rounded mb-4">
                {{ session('success') }}
            </div>
        @endif

        @if ($errors->any())
            <div class="bg-red-100 text-red-800 border border-red-300 px-4 py-3 rounded mb-4">
                <ul class="list-disc pl-5">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <!-- Toolbar -->
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
            <button onclick="openModal()" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center w-fit">
                <i class="bi bi-person-plus mr-2"></i> Tambah Karyawan
            </button>
            <form method="GET" action="{{ route('admin.users') }}" class="flex items-center gap-2">
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari nama/email..."
                       class="border border-gray-300 p-2 rounded-lg w-full md:w-64 focus:ring-2 focus:ring-blue-400">
                <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
                    <i class="bi bi-search mr-1"></i> Cari
                </button>
            </form>
        </div>

        <!-- Table -->
        <div class="bg-white shadow rounded-lg overflow-x-auto">
            <table class="min-w-full text-sm text-left">
                <thead class="bg-blue-500 text-white">
                    <tr>
                        <th class="px-4 py-3">No</th>
                        <th class="px-4 py-3">Nama</th>
                        <th class="px-4 py-3">Email</th>
                        <th class="px-4 py-3">Telepon</th>
                        <th class="px-4 py-3">Alamat</th>
                        <th class="px-4 py-3">Role</th>
                        <th class="px-4 py-3 text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody class="text-gray-700">
                    @foreach ($users as $user)
                    <tr class="border-b hover:bg-gray-100">
                        <td class="px-4 py-3">{{ $loop->iteration }}</td>
                        <td class="px-4 py-3">{{ $user->name }}</td>
                        <td class="px-4 py-3">{{ $user->email }}</td>
                        <td class="px-4 py-3">{{ $user->phone }}</td>
                        <td class="px-4 py-3">{{ $user->address }}</td>
                        <td class="px-4 py-3 capitalize">{{ $user->role == 'customer' ? 'Customer' : 'Karyawan' }}</td>
                        <td class="px-4 py-3 text-center space-x-2">
                            <button onclick="openEditModal({{ $user->id }})" class="bg-yellow-400 hover:bg-yellow-500 text-white px-3 py-1 rounded">
                                <i class="bi bi-pencil"></i>
                            </button>
                            <form action="{{ route('admin.users.delete', $user->id) }}" method="POST" class="inline">
                                @csrf
                                @method('DELETE')
                                <button onclick="return confirm('Yakin ingin menghapus pengguna ini?')" class="bg-red-500 hover:bg-red-600 text-white px-3 py-1 rounded">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</main>

<!-- Modal Tambah -->
<div id="userModal" class="hidden fixed inset-0 bg-black bg-opacity-40 z-50 flex items-center justify-center">
    <div class="bg-white p-6 rounded-lg w-full max-w-md shadow-lg space-y-4 max-h-[90vh] overflow-y-auto">
        <div class="flex justify-between items-center">
            <h3 class="text-xl font-bold">Tambah Karyawan</h3>
            <button onclick="closeModal()" class="text-2xl font-bold text-gray-500 hover:text-gray-700">&times;</button>
        </div>
        <form action="{{ route('admin.users.store') }}" method="POST" class="space-y-3">
            @csrf
            <input type="text" name="name" required placeholder="Nama" class="w-full border p-2 rounded-lg">
            <input type="email" name="email" required placeholder="Email" class="w-full border p-2 rounded-lg">
            <input type="password" name="password" required placeholder="Password" class="w-full border p-2 rounded-lg">
            <input type="text" name="phone" required placeholder="Telepon" class="w-full border p-2 rounded-lg">
            <input type="text" name="address" required placeholder="Alamat" class="w-full border p-2 rounded-lg">
            <select name="role" required class="w-full border p-2 rounded-lg">
                <option value="user">Karyawan</option>
                <option value="customer">Customer</option>
            </select>
            <button type="submit" class="w-full bg-green-500 text-white py-2 rounded-lg hover:bg-green-600">
                <i class="bi bi-check-circle mr-1"></i> Simpan
            </button>
        </form>
    </div>
</div>

<!-- Modal Edit -->
<div id="editModal" class="hidden fixed inset-0 bg-black bg-opacity-40 z-50 flex items-center justify-center">
    <div class="bg-white p-6 rounded-lg w-full max-w-md shadow-lg space-y-4 max-h-[90vh] overflow-y-auto">
        <div class="flex justify-between items-center">
            <h3 class="text-xl font-bold">Edit Pengguna</h3>
            <button onclick="closeEditModal()" class="text-2xl font-bold text-gray-500 hover:text-gray-700">&times;</button>
        </div>
        <form id="editForm" method="POST" action="#" class="space-y-3">
            @csrf @method('PUT')
            <input type="text" name="name" id="editName"placeholder="Nama" required class="w-full border p-2 rounded-lg">
            <input type="Email" name="email" id="editEmail" placeholder="email" required class="w-full border p-2 rounded-lg">
            <input type="password" name="password" id="editPassword" placeholder=" Password Kosongkan jika tidak diubah" class="w-full border p-2 rounded-lg">
            <input type="text" name="phone" id="editPhone" placeholder="Nomor telepon" required class="w-full border p-2 rounded-lg">
            <input type="text" name="address" id="editAddress" placeholder="Alamat" required class="w-full border p-2 rounded-lg">
            <select name="role" id="editRole" required class="w-full border p-2 rounded-lg">
                <option value="user">Karyawan</option>
                <option value="customer">Customer</option>
            </select>
            <button type="submit" class="w-full bg-green-500 text-white py-2 rounded-lg hover:bg-green-600">
                <i class="bi bi-check-circle mr-1"></i> Simpan Perubahan
            </button>
        </form>
    </div>
</div>

<script>
    function toggleSidebar() {
        document.getElementById('sidebar').classList.toggle('hidden');
        document.getElementById('overlay').classList.toggle('hidden');
    }

    function openModal() {
        document.getElementById("userModal").classList.remove("hidden");
    }

    function closeModal() {
        document.getElementById("userModal").classList.add("hidden");
    }

    function openEditModal(userId) {
        fetch(`/admin/users/${userId}/edit`)
            .then(response => response.json())
            .then(user => {
                document.getElementById("editName").value = user.name;
                document.getElementById("editEmail").value = user.email;
                document.getElementById("editPhone").value = user.phone;
                document.getElementById("editAddress").value = user.address;
                document.getElementById("editRole").value = user.role;
                document.getElementById("editPassword").value = '';
                document.getElementById("editForm").action = `/admin/users/${userId}`;
                document.getElementById("editModal").classList.remove("hidden");
            });
    }

    function closeEditModal() {
        document.getElementById("editModal").classList.add("hidden");
    }
</script>
<script>
    // Validasi input hanya angka untuk kolom telepon di modal edit
    document.addEventListener('DOMContentLoaded', function () {
        const phoneInput = document.getElementById('editPhone');

        phoneInput.addEventListener('input', function (e) {
            const originalValue = e.target.value;
            const numericValue = originalValue.replace(/\D/g, '');

            if (originalValue !== numericValue) {
                alert('Hanya angka yang diperbolehkan untuk nomor telepon.');
                e.target.value = numericValue;
            }
        });
    });
</script>


</body>
</html>
