@extends('admin.layouts.app')

@section('title', 'Users & Access')
@section('page_title', 'Users & Access Control')

@section('content')
    <div class="page-heading">
        <div>
            <h1>System Users</h1>
            <p>Manage administrators, user roles and account access.</p>
        </div>

        <a class="btn btn-primary" href="{{ route('admin.users.create') }}">
            + Add New User
        </a>
    </div>

    <div class="panel">
        <div class="panel-header">
            <h2 class="panel-title">Registered Users</h2>

            <span class="badge badge-role">
                Total: {{ $users->total() }}
            </span>
        </div>

        <div class="table-responsive">
            <table>
                <thead>
                <tr>
                    <th width="60">SL</th>
                    <th>User</th>
                    <th>Contact</th>
                    <th>Role</th>
                    <th>Status</th>
                    <th>Last Login</th>
                    <th width="170">Actions</th>
                </tr>
                </thead>

                <tbody>
                @forelse ($users as $user)
                    <tr>
                        <td>
                            {{ $users->firstItem() + $loop->index }}
                        </td>

                        <td>
                            <strong>{{ $user->name }}</strong>

                            @if (auth()->id() === $user->id)
                                <span class="badge badge-role">You</span>
                            @endif
                        </td>

                        <td>
                            <div>{{ $user->email }}</div>

                            @if ($user->phone)
                                <div class="table-muted">{{ $user->phone }}</div>
                            @endif
                        </td>

                        <td>
                            <span class="badge badge-role">
                                {{ ucwords(str_replace('_', ' ', $user->role)) }}
                            </span>
                        </td>

                        <td>
                            @if ($user->status)
                                <span class="badge badge-success">Active</span>
                            @else
                                <span class="badge badge-danger">Inactive</span>
                            @endif
                        </td>

                        <td>
                            @if ($user->last_login_at)
                                {{ $user->last_login_at->format('d M Y, h:i A') }}
                            @else
                                <span class="table-muted">Never</span>
                            @endif
                        </td>

                        <td>
                            <div class="action-group">
                                <a
                                    class="btn btn-secondary btn-small"
                                    href="{{ route('admin.users.edit', $user) }}"
                                >
                                    Edit
                                </a>

                                @if (auth()->id() !== $user->id)
                                    <form
                                        method="POST"
                                        action="{{ route('admin.users.destroy', $user) }}"
                                        onsubmit="return confirm('Are you sure you want to delete this user?');"
                                    >
                                        @csrf
                                        @method('DELETE')

                                        <button class="btn btn-danger btn-small" type="submit">
                                            Delete
                                        </button>
                                    </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7">
                            <div class="empty-state">
                                No system users found.
                            </div>
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>

        @if ($users->hasPages())
            <div class="custom-pagination">
                <div>
                    Showing {{ $users->firstItem() }}–{{ $users->lastItem() }}
                    of {{ $users->total() }} users
                </div>

                <div class="pagination-actions">
                    @if ($users->onFirstPage())
                        <span class="page-button disabled">Previous</span>
                    @else
                        <a class="page-button" href="{{ $users->previousPageUrl() }}">
                            Previous
                        </a>
                    @endif

                    <span class="page-current">
                        Page {{ $users->currentPage() }} of {{ $users->lastPage() }}
                    </span>

                    @if ($users->hasMorePages())
                        <a class="page-button" href="{{ $users->nextPageUrl() }}">
                            Next
                        </a>
                    @else
                        <span class="page-button disabled">Next</span>
                    @endif
                </div>
            </div>
        @endif
    </div>
@endsection

@push('styles')
    <style>
        .table-muted {
            margin-top: 5px;
            color: #8b989f;
            font-size: 12px;
        }

        .btn-small {
            min-height: 34px;
            padding: 7px 11px;
            font-size: 12px;
        }

        .action-group form {
            margin: 0;
        }

        .empty-state {
            padding: 45px 20px;
            color: #89969d;
            text-align: center;
        }

        .custom-pagination {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 18px 24px;
            color: #7b8992;
            font-size: 13px;
        }

        .pagination-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .page-button,
        .page-current {
            padding: 8px 11px;
            border: 1px solid #e0e5e8;
            border-radius: 7px;
            background: #fff;
            color: #425563;
            text-decoration: none;
        }

        .page-current {
            border-color: #071c2c;
            background: #071c2c;
            color: #fff;
        }

        .page-button.disabled {
            cursor: not-allowed;
            opacity: .5;
        }

        @media (max-width: 700px) {
            .custom-pagination {
                align-items: flex-start;
                flex-direction: column;
            }
        }
    </style>
@endpush