@extends('layouts.app')

@section('title', 'Data Pengguna - INUFA')

@section('header')
<div class="relative inline-block text-left mb-2 bg-white p-2 rounded-lg shadow">
    <button type="button" class="inline-flex items-center rounded-md px-2 py-1 bg-transparent text-base font-semibold text-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blue-400" id="data-pengguna-dropdown-button" aria-expanded="true" aria-haspopup="true">
        Data Pengguna
        <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
    </button>

    <div class="origin-top-left absolute left-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none hidden" role="menu" aria-orientation="vertical" aria-labelledby="data-pengguna-dropdown-button" tabindex="-1" id="data-pengguna-dropdown-menu">
        <div class="py-1" role="none">
            <a href="{{ route('pengguna') }}" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 {{ $activeTab === 'admin' ? 'bg-gray-100' : '' }}" role="menuitem" tabindex="-1" id="menu-item-admin">Admin</a>
            <a href="{{ route('users') }}" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 {{ $activeTab === 'user' ? 'bg-gray-100' : '' }}" role="menuitem" tabindex="-1" id="menu-item-user">User</a>
        </div>
    </div>
</div>
@endsection

@section('content')
<!-- Add Button - Only visible for admin -->
<div id="adminContent" class="{{ $activeTab === 'admin' ? '' : 'hidden' }}">
    @if(auth()->user()->tipe_pengguna === 'admin')
    <div class="mb-6">
        <a href="{{ route('pengguna.create') }}" class="inline-block bg-white text-gray-800 px-4 py-2 rounded font-semibold">
            Tambah Admin
        </a>
    </div>
    @endif

    <!-- Table Admin -->
    <div class="bg-white rounded shadow overflow-x-auto">
        <table class="w-full table-fixed">
            <thead>
                <tr class="bg-gray-100">
                    <th class="py-3 px-4 text-left w-12 border-r">No</th>
                    <th class="py-3 px-4 text-left w-36 border-r">Nama</th>
                    <th class="py-3 px-4 text-left w-36 border-r">Username</th>
                    <th class="py-3 px-4 text-left w-48 border-r">Email</th>
                    <th class="py-3 px-4 text-left w-36 border-r">No.Telp</th>
                    <th class="py-3 px-4 text-left border-r">Alamat</th>
                </tr>
            </thead>
            <tbody>
                @forelse($pengguna as $index => $user)
                <tr class="border-t">
                    <td class="py-3 px-4 border-r">{{ $index + 1 }}</td>
                    <td class="py-3 px-4 border-r">{{ $user->nama }}</td>
                    <td class="py-3 px-4 border-r">{{ $user->username }}</td>
                    <td class="py-3 px-4 border-r">{{ $user->email }}</td>
                    <td class="py-3 px-4 border-r">{{ $user->no_telp }}</td>
                    <td class="py-3 px-4 border-r">{{ $user->alamat }}</td>
                </tr>
                @empty
                <tr class="border-t">
                    <td colspan="6" class="py-3 px-4 text-center">Tidak ada data admin</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Table User Content -->
<div id="userContent" class="{{ $activeTab === 'user' ? '' : 'hidden' }}">
    <div class="bg-white rounded shadow overflow-x-auto">
        <table class="w-full table-fixed">
            <thead>
                <tr class="bg-gray-100">
                    <th class="py-3 px-4 text-left w-12 border-r">No</th>
                    <th class="py-3 px-4 text-left w-36 border-r">Nama</th>
                    <th class="py-3 px-4 text-left w-36 border-r">Username</th>
                    <th class="py-3 px-4 text-left w-48 border-r">Email</th>
                    <th class="py-3 px-4 text-left w-36 border-r">No.Telp</th>
                    <th class="py-3 px-4 text-left border-r">Alamat</th>
                    @if(auth()->user()->tipe_pengguna === 'admin')
                    <th class="py-3 px-4 text-center w-24">Aksi</th>
                    @endif
                </tr>
            </thead>
            <tbody>
                @forelse($users as $index => $user)
                <tr class="border-t">
                    <td class="py-3 px-4 border-r">{{ $index + 1 }}</td>
                    <td class="py-3 px-4 border-r">{{ $user->nama }}</td>
                    <td class="py-3 px-4 border-r">{{ $user->username }}</td>
                    <td class="py-3 px-4 border-r">{{ $user->email }}</td>
                    <td class="py-3 px-4 border-r">{{ $user->no_telp }}</td>
                    <td class="py-3 px-4 border-r">{{ $user->alamat }}</td>
                    @if(auth()->user()->tipe_pengguna === 'admin')
                    <td class="py-3 px-4 text-center">
                        <form action="{{ route('users.destroy', $user->id) }}" method="POST" class="inline">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="bg-red-500 text-white px-4 py-1 rounded-sm font-medium text-sm">
                                Hapus
                            </button>
                        </form>
                    </td>
                    @endif
                </tr>
                @empty
                <tr class="border-t">
                    <td colspan="{{ auth()->user()->tipe_pengguna === 'admin' ? 7 : 6 }}" class="py-3 px-4 text-center">Tidak ada data pengguna</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@endsection

@push('scripts')
<script>
function showTab(tab) {
    // Update tab styling
    if (tab === 'admin') {
        document.getElementById('adminContent').style.display = 'block';
        document.getElementById('userContent').style.display = 'none';
    } else {
        document.getElementById('adminContent').style.display = 'none';
        document.getElementById('userContent').style.display = 'block';
    }
}

document.addEventListener('DOMContentLoaded', function() {
    const dropdownButton = document.getElementById('data-pengguna-dropdown-button');
    const dropdownMenu = document.getElementById('data-pengguna-dropdown-menu');

    if (dropdownButton && dropdownMenu) {
        dropdownButton.addEventListener('click', function() {
            dropdownMenu.classList.toggle('hidden');
        });

        document.addEventListener('click', function(event) {
            if (!dropdownButton.contains(event.target) && !dropdownMenu.contains(event.target)) {
                dropdownMenu.classList.add('hidden');
            }
        });

        // Set initial tab visibility based on $activeTab, this replaces the previous showTab logic
        const initialActiveTab = '{{ $activeTab }}';
        if (initialActiveTab === 'user') {
            document.getElementById('adminContent').classList.add('hidden');
            document.getElementById('userContent').classList.remove('hidden');
        } else {
            document.getElementById('adminContent').classList.remove('hidden');
            document.getElementById('userContent').classList.add('hidden');
        }

        // Handle click on dropdown menu items to switch tabs and hide menu
        document.getElementById('menu-item-admin').addEventListener('click', function(event) {
            event.preventDefault();
            window.location.href = this.href; // Redirect to the admin route
            dropdownMenu.classList.add('hidden');
        });

        document.getElementById('menu-item-user').addEventListener('click', function(event) {
            event.preventDefault();
            window.location.href = this.href; // Redirect to the user route
            dropdownMenu.classList.add('hidden');
        });
    }
});

// The showTab function is no longer needed in its original form if we rely on full page reload for tab switching.
// However, if there was client-side only tab switching logic that needed to be preserved, it would be different.
// For now, I'm assuming full page reload based on the hrefs.

</script>
@endpush