@extends('layouts.app')

@section('title', 'Manajemen User')

@section('content')
<div x-data="{
    showModal: false,
    modalMode: 'create',
    selectedRole: '',
    formData: {},
    showConfirm: false,
    confirmUrl: '',
    openCreate() { this.modalMode = 'create'; this.selectedRole = ''; this.formData = {}; this.showModal = true; },
    openEdit(data) { this.modalMode = 'edit'; this.selectedRole = data.role; this.formData = data; this.showModal = true; },
    confirmToggle(url) { this.confirmUrl = url; this.showConfirm = true; }
}">

    {{-- Header --}}
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Manajemen User</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Kelola semua akun pengguna sistem</p>
        </div>
        <button @click="openCreate()"
            class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                    d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
                    clip-rule="evenodd" />
            </svg>
            Tambah User
        </button>
    </div>

    {{-- Session Alerts --}}
    @if(session('success'))<x-alert type="success">{{ session('success') }}</x-alert>@endif
    @if(session('error'))<x-alert type="danger">{{ session('error') }}</x-alert>@endif

    {{-- Filter --}}
    <x-filter-bar>
        <x-slot:fields>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Role</label>
                <select name="role"
                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="">Semua Role</option>
                    <option value="super_admin" {{ request('role')==='super_admin' ? 'selected' : '' }}>Super Admin
                    </option>
                    <option value="operator" {{ request('role')==='operator' ? 'selected' : '' }}>Operator</option>
                    <option value="teacher" {{ request('role')==='teacher' ? 'selected' : '' }}>Guru</option>
                    <option value="student" {{ request('role')==='student' ? 'selected' : '' }}>Siswa</option>
                </select>
            </div>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Status</label>
                <select name="status"
                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="">Semua Status</option>
                    <option value="1" {{ request('status')==='1' ? 'selected' : '' }}>Aktif</option>
                    <option value="0" {{ request('status')==='0' ? 'selected' : '' }}>Non-aktif</option>
                </select>
            </div>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Cari</label>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Nama atau email..."
                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>
        </x-slot:fields>
    </x-filter-bar>

    {{-- Tabel --}}
    <div class="bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
        <x-data-table>
            <x-slot:heading>
                <th class="px-4 py-3">Nama</th>
                <th class="px-4 py-3">Email</th>
                <th class="px-4 py-3">Role</th>
                <th class="px-4 py-3">Status</th>
                <th class="px-4 py-3">Dibuat</th>
                <th class="px-4 py-3 text-right">Aksi</th>
            </x-slot:heading>
            <x-slot:body>
                @forelse($users ?? [] as $user)
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                    <td class="px-4 py-3 font-medium text-gray-900 dark:text-white whitespace-nowrap">
                        <div class="flex items-center gap-3">
                            <div
                                class="w-8 h-8 rounded-full bg-primary-600 flex items-center justify-center text-white text-sm font-semibold shrink-0">
                                {{ strtoupper(substr($user->name, 0, 1)) }}
                            </div>
                            {{ $user->name }}
                        </div>
                    </td>
                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400">{{ $user->email }}</td>
                    <td class="px-4 py-3">
                        @php
                        $roleBadge = ['super_admin' => 'red', 'operator' => 'indigo', 'teacher' => 'green', 'student' =>
                        'yellow'];
                        @endphp
                        <x-badge :color="$roleBadge[$user->role->value] ?? 'gray'">
                            {{ ucfirst(str_replace('_', ' ', $user->role->label())) }}
                        </x-badge>
                    </td>
                    <td class="px-4 py-3">
                        <x-badge :color="$user->is_active ? 'green' : 'red'">
                            {{ $user->is_active ? 'Aktif' : 'Non-aktif' }}
                        </x-badge>
                    </td>
                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400">{{ $user->created_at->format('d M Y') }}</td>
                    <td class="px-4 py-3 text-right">
                        <div class="flex items-center justify-end gap-2">
                            <button
                                @click="openEdit({{ json_encode(['id' => $user->id, 'name' => $user->name, 'email' => $user->email, 'role' => $user->role->value, 'employee_number' => optional($user->teacher)->employee_number, 'student_number' => optional($user->student)->student_number]) }})"
                                class="font-medium text-primary-600 hover:underline dark:text-primary-400 text-sm">Edit</button>
                            <button @click="confirmToggle('{{ route('admin.users.toggle', $user->id) }}')"
                                class="font-medium text-{{ $user->is_active ? 'red' : 'green' }}-600 hover:underline dark:text-{{ $user->is_active ? 'red' : 'green' }}-400 text-sm">
                                {{ $user->is_active ? 'Non-aktifkan' : 'Aktifkan' }}
                            </button>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="px-4 py-8 text-center text-gray-400">Tidak ada data user</td>
                </tr>
                @endforelse
            </x-slot:body>
            @if(isset($users) && $users->hasPages())
            <x-slot:pagination>
                {{ $users->withQueryString()->links() }}
            </x-slot:pagination>
            @endif
        </x-data-table>
    </div>

    {{-- MODAL CREATE/EDIT --}}
    <x-modal show="showModal" title="Data User" size="md">
        <form
            :action="modalMode === 'create' ? '{{ route('admin.users.store') }}' : '{{ url('admin/users') }}/' + formData.id"
            method="POST" class="space-y-4" id="user-modal-form">
            @csrf
            <template x-if="modalMode === 'edit'">
                <input type="hidden" name="_method" value="PUT">
            </template>

            <div>
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Nama Lengkap</label>
                <input type="text" name="name" x-model="formData.name" required
                    class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>

            <div>
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email</label>
                <input type="email" name="email" x-model="formData.email"
                    :required="selectedRole !== 'teacher' && selectedRole !== 'student'"
                    class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>

            <div>
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Role</label>
                <select name="role" x-model="selectedRole" required
                    class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="">Pilih Role</option>
                    <option value="super_admin">Super Admin</option>
                    <option value="operator">Operator</option>
                    <option value="teacher">Guru</option>
                    <option value="student">Siswa</option>
                </select>
            </div>

            {{-- Field NIP (hanya tampil jika role = teacher) --}}
            <div x-show="selectedRole === 'teacher'" x-cloak>
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">NIP Guru</label>
                <input type="text" name="employee_number" x-model="formData.employee_number"
                    class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                    placeholder="NIP">
            </div>

            {{-- Field NIS (hanya tampil jika role = student) --}}
            <div x-show="selectedRole === 'student'" x-cloak>
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">NIS Siswa</label>
                <input type="text" name="student_number" x-model="formData.student_number"
                    class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                    placeholder="NIS">
            </div>

            {{-- Password hanya di create --}}
            <div x-show="modalMode === 'create'" x-cloak>
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label>
                <input type="password" name="password"
                    class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                    placeholder="Min. 8 karakter">
            </div>

            <x-slot:footer>
                <button type="button" @click="showModal = false"
                    class="px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600">
                    Batal
                </button>
                <button type="submit" form="user-modal-form"
                    class="px-5 py-2.5 text-sm font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700">
                    <span x-text="modalMode === 'create' ? 'Tambah User' : 'Simpan'">Simpan</span>
                </button>
            </x-slot:footer>
        </form>
    </x-modal>

    {{-- Confirm Toggle Status --}}
    <div x-show="showConfirm" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/60 p-4"
        @keydown.escape.window="showConfirm = false">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl p-6 max-w-md w-full text-center">
            <div class="flex justify-center mb-4">
                <div class="w-14 h-14 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center">
                    <svg class="w-7 h-7 text-yellow-600 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd"
                            d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
                            clip-rule="evenodd" />
                    </svg>
                </div>
            </div>
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Konfirmasi Toggle Status</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400 mb-6">Apakah Anda yakin ingin mengubah status user ini?
            </p>
            <div class="flex justify-center gap-3">
                <button @click="showConfirm = false"
                    class="px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600">Batal</button>
                <form :action="confirmUrl" method="POST" class="inline">@csrf @method('PATCH')
                    <button type="submit"
                        class="px-5 py-2.5 text-sm font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800">Ya,
                        Ubah</button>
                </form>
            </div>
        </div>
    </div>

</div>
@endsection