@extends('admin.layouts.app')

@section('header')
    <div class="bg-header text-white p-4 rounded-lg shadow-md flex justify-between items-center">
        <div>
            <h1 class="text-2xl font-medium">Manajemen User</h1>
            <span class="text-sm">Good morning, <span class="font-bold">{{ Auth::user()->name }}</span></span>
        </div>
        <form method="POST" action="{{ route('logout') }}">
            @csrf
            <button type="submit" class="flex items-center py-2 px-4 bg-red-600 hover:bg-red-700 rounded transition text-sm">
                <i class="bi bi-box-arrow-right mr-2"></i> Logout
            </button>
        </form>
    </div>
@endsection

@section('content')
    <div class="mt-6 bg-white p-6 rounded-lg shadow">
        <!-- Search & Add -->
        <div class="flex justify-between items-center mb-4">
            <form method="GET" action="{{ route('admin.manajemen-user.index') }}" class="flex items-center space-x-2">
                <div class="relative">
                    <input id="searchInput" name="search" value="{{ $search ?? '' }}" placeholder="Search Users…"
                        class="pl-8 pr-4 py-2 border rounded-lg bg-gray-100 w-56">
                    <i class="bi bi-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
                <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-lg">Cari</button>
            </form>
            <button id="btnTambah" class="bg-teal-500 text-white px-4 py-2 rounded-lg flex items-center">
                <i class="bi bi-plus-lg mr-2"></i> Tambah User
            </button>
        </div>

        <!-- Users Table -->
        <table class="min-w-full bg-white rounded-lg shadow">
            <thead class="bg-gray-200 text-gray-700">
                <tr>
                    <th class="py-2 px-4">NIM</th>
                    <th class="py-2 px-4">Username</th>
                    <th class="py-2 px-4">Name</th>
                    <th class="py-2 px-4">Email</th>
                    <th class="py-2 px-4">Role</th>
                    <th class="py-2 px-4">Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($users as $user)
                    <tr class="text-center border-t">
                        <td class="py-2 px-4">{{ $user->nim }}</td>
                        <td class="py-2 px-4">{{ $user->username }}</td>
                        <td class="py-2 px-4">{{ $user->name }}</td>
                        <td class="py-2 px-4">{{ $user->email }}</td>
                        <td class="py-2 px-4">{{ ucfirst($user->role) }}</td>
                        <td class="py-2 px-4 space-x-2">
                            <button data-id="{{ $user->id }}"
                                class="editBtn bg-yellow-400 text-white px-3 py-1 rounded">
                                Edit
                            </button>
                            <form action="{{ route('admin.manajemen-user.destroy', $user->id) }}" method="POST"
                                class="inline">
                                @csrf
                                @method('DELETE')
                                <button onclick="return confirm('Yakin hapus user?')"
                                    class="bg-red-500 text-white px-3 py-1 rounded">
                                    Hapus
                                </button>
                            </form>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        <!-- Modal Form -->
        <div id="modalForm" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md p-6">
                <h2 id="modalTitle" class="text-xl font-semibold mb-4">Tambah User</h2>
                <form id="formUser" method="POST" class="space-y-4">
                    @csrf
                    <input type="hidden" name="_method" id="methodInput" value="POST">

                    <div>
                        <label class="block text-sm">NIM</label>
                        <input type="text" name="nim" id="nimField"
                            class="mt-1 block w-full border rounded px-3 py-2" required>
                    </div>
                    <div>
                        <label class="block text-sm">Username</label>
                        <input type="text" name="username" id="usernameField"
                            class="mt-1 block w-full border rounded px-3 py-2" required>
                    </div>
                    <div>
                        <label class="block text-sm">Name</label>
                        <input type="text" name="name" id="nameField"
                            class="mt-1 block w-full border rounded px-3 py-2" required>
                    </div>
                    <div>
                        <label class="block text-sm">Email</label>
                        <input type="email" name="email" id="emailField"
                            class="mt-1 block w-full border rounded px-3 py-2" required>
                    </div>
                    <div>
                        <label class="block text-sm">No HP</label>
                        <input type="text" name="no_hp" id="hpField"
                            class="mt-1 block w-full border rounded px-3 py-2">
                    </div>
                    <div>
                        <label class="block text-sm">Role</label>
                        <select name="role" id="roleField" class="mt-1 block w-full border rounded px-3 py-2">
                            <option value="user">User</option>
                            <option value="admin">Admin</option>
                        </select>
                    </div>
                    <div id="passwordGroup">
                        <label class="block text-sm">Password</label>
                        <input type="password" name="password" id="passwordField"
                            class="mt-1 block w-full border rounded px-3 py-2">
                    </div>

                    <div class="flex justify-end space-x-3 pt-4">
                        <button type="button" id="btnBatal" class="px-4 py-2 rounded-lg">Batal</button>
                        <button type="submit" class="bg-blue text-white px-4 py-2 rounded-lg flex items-center">
                            <i id="modalIcon" class="bi bi-check-lg mr-1"></i>
                            <span id="modalButtonText">Simpan</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const modal = document.getElementById('modalForm');
            const form = document.getElementById('formUser');
            const methodIn = document.getElementById('methodInput');
            const icon = document.getElementById('modalIcon');
            const txt = document.getElementById('modalButtonText');
            const title = document.getElementById('modalTitle');
            const baseStoreUrl = "{{ route('admin.manajemen-user.store') }}";
            const baseApiUrl = "{{ url('admin/manajemen-user') }}";
            const passwordGroup = document.getElementById('passwordGroup');
            const passwordField = document.getElementById('passwordField');

            // Tambah
            document.getElementById('btnTambah').addEventListener('click', () => {
                form.reset();
                title.textContent = 'Tambah User';
                txt.textContent = 'Simpan';
                icon.className = 'bi bi-check-lg mr-1';
                form.action = baseStoreUrl;
                methodIn.value = 'POST';
                passwordGroup.style.display = 'block';
                passwordField.required = true;
                passwordField.value = '';
                modal.classList.remove('hidden');
            });

            // Batal
            document.getElementById('btnBatal').addEventListener('click', () => modal.classList.add('hidden'));

            // Edit
            function openEditUser(id) {
                fetch(`${baseApiUrl}/${id}/get`, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(res => res.json())
                    .then(user => {
                        form.reset();
                        title.textContent = 'Edit User';
                        txt.textContent = 'Update';
                        icon.className = 'bi bi-pencil-square mr-1';
                        form.action = `${baseApiUrl}/${id}`;
                        methodIn.value = 'PUT';
                        document.getElementById('nimField').value = user.nim;
                        document.getElementById('usernameField').value = user.username;
                        document.getElementById('nameField').value = user.name;
                        document.getElementById('emailField').value = user.email;
                        document.getElementById('hpField').value = user.no_hp || '';
                        document.getElementById('roleField').value = user.role;
                        passwordGroup.style.display = 'none';
                        passwordField.required = false;
                        modal.classList.remove('hidden');
                    })
                    .catch(() => alert('Gagal mengambil data user.'));
            }

            document.querySelectorAll('.editBtn').forEach(btn => btn.addEventListener('click', () => openEditUser(
                btn.dataset.id)));

            // Live search filter
            const searchInput = document.getElementById('searchInput');
            const rows = document.querySelectorAll('table tbody tr');
            searchInput.addEventListener('input', () => {
                const term = searchInput.value.toLowerCase().trim();
                rows.forEach(row => row.style.display = row.innerText.toLowerCase().includes(term) ? '' :
                    'none');
            });
        });
    </script>
@endpush