@extends('layouts.app')

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

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title">Manajemen User</h1>
        <p class="page-subtitle">{{ $users->total() }} user terdaftar</p>
    </div>
    @can('create users')
    <a href="{{ route('users.create') }}" class="btn btn-primary">
        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
        Tambah User
    </a>
    @endcan
</div>

{{-- Filter --}}
<div class="card" style="margin-bottom:1rem;">
    <div class="card-body" style="padding:.875rem 1.25rem;">
        <form method="GET" action="{{ route('users.index') }}">
            <div style="display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;">
                <div style="flex:1;min-width:200px;position:relative;">
                    <span style="position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--gray-400);">
                        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width:16px;height:16px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                    </span>
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari nama / email..." class="form-control" style="padding-left:2.25rem;" onchange="this.form.submit()">
                </div>
                <select name="role" class="form-control" style="width:150px;" onchange="this.form.submit()">
                    <option value="">Semua Role</option>
                    @foreach($roles as $role)
                    <option value="{{ $role->name }}" {{ request('role') === $role->name ? 'selected' : '' }}>
                        {{ ucfirst(str_replace('_', ' ', $role->name)) }}
                    </option>
                    @endforeach
                </select>
                @if(request()->hasAny(['search','role']))
                <a href="{{ route('users.index') }}" class="btn btn-ghost btn-sm">Reset</a>
                @endif
            </div>
        </form>
    </div>
</div>

<div class="card">
    <div class="table-wrapper">
        @if($users->isEmpty())
        <div class="empty-state">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
            <div class="empty-state-title">Belum ada user</div>
        </div>
        @else
        <table>
            <thead>
                <tr>
                    <th>User</th>
                    <th>Role</th>
                    <th>Telepon</th>
                    <th>Status</th>
                    <th>Bergabung</th>
                    <th style="text-align:right;">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @foreach($users as $user)
                <tr>
                    <td>
                        <div style="display:flex;align-items:center;gap:.75rem;">
                            <div style="width:36px;height:36px;border-radius:8px;background:var(--primary);color:white;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0;">
                                {{ $user->initials }}
                            </div>
                            <div>
                                <div class="fw-600" style="color:var(--gray-900);">{{ $user->name }}</div>
                                <div class="text-small text-muted">{{ $user->email }}</div>
                            </div>
                        </div>
                    </td>
                    <td>
                        @foreach($user->roles as $role)
                        <span class="badge badge-{{ $role->name === 'super_admin' ? 'red' : ($role->name === 'admin' ? 'purple' : ($role->name === 'manager' ? 'blue' : 'gray')) }}">
                            {{ ucfirst(str_replace('_', ' ', $role->name)) }}
                        </span>
                        @endforeach
                    </td>
                    <td class="text-small text-muted">{{ $user->phone ?? '—' }}</td>
                    <td>
                        <span class="badge badge-{{ $user->is_active ? 'green' : 'red' }}">
                            {{ $user->is_active ? 'Aktif' : 'Nonaktif' }}
                        </span>
                    </td>
                    <td class="text-small text-muted">{{ $user->created_at->locale('id')->isoFormat('D MMM YYYY') }}</td>
                    <td>
                        <div style="display:flex;gap:.25rem;justify-content:flex-end;">
                            @can('edit users')
                            <a href="{{ route('users.edit', $user) }}" class="btn btn-ghost btn-sm btn-icon" title="Edit">
                                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                            </a>
                            @endcan
                            @if($user->id !== auth()->id())
                            <form method="POST" action="{{ route('users.toggle', $user) }}">
                                @csrf
                                <button type="submit" class="btn btn-ghost btn-sm btn-icon" title="{{ $user->is_active ? 'Nonaktifkan' : 'Aktifkan' }}"
                                        style="color:{{ $user->is_active ? 'var(--warning)' : 'var(--success)' }};">
                                    @if($user->is_active)
                                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>
                                    @else
                                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                    @endif
                                </button>
                            </form>
                            @can('delete users')
                            <button type="button" class="btn btn-ghost btn-sm btn-icon" style="color:var(--danger);"
                                    onclick="confirmDelete('{{ route('users.destroy', $user) }}', '{{ $user->name }}')">
                                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                            </button>
                            @endcan
                            @endif
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        @endif
    </div>
    @if($users->hasPages())
    <div class="pagination-wrapper">
        <div class="pagination-info">{{ $users->firstItem() }}–{{ $users->lastItem() }} dari {{ $users->total() }} user</div>
        <div class="pagination">
            @if(!$users->onFirstPage())<a class="page-link" href="{{ $users->previousPageUrl() }}">‹</a>@endif
            @foreach($users->getUrlRange(max(1,$users->currentPage()-2), min($users->lastPage(),$users->currentPage()+2)) as $p => $url)
            <a class="page-link {{ $p===$users->currentPage()?'active':'' }}" href="{{ $url }}">{{ $p }}</a>
            @endforeach
            @if($users->hasMorePages())<a class="page-link" href="{{ $users->nextPageUrl() }}">›</a>@endif
        </div>
    </div>
    @endif
</div>

{{-- Delete Modal --}}
<div class="modal-overlay" id="deleteModal">
    <div class="modal" style="max-width:400px;">
        <div class="modal-header">
            <span class="modal-title">Hapus User</span>
            <button class="modal-close" onclick="closeModal('deleteModal')">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
        <div class="modal-body">
            <p style="color:var(--gray-600);">Hapus user <strong id="deleteUserName"></strong>? Data yang dibuat user ini akan tetap tersimpan.</p>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeModal('deleteModal')">Batal</button>
            <form id="deleteForm" method="POST">
                @csrf @method('DELETE')
                <button type="submit" class="btn btn-danger">Hapus</button>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
function confirmDelete(url, name) {
    document.getElementById('deleteForm').action = url;
    document.getElementById('deleteUserName').textContent = name;
    openModal('deleteModal');
}
</script>
@endpush