@extends('layouts.app')

@section('title', 'Users | DYSON LATAM')

@section('content')

    <style>
        .users-page {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .users-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 18px;
        }

        .users-kicker {
            margin-bottom: 5px;
            color: #7a80a0;
            font-family: monospace;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
        }

        .users-title {
            margin: 0;
            color: #161929;
            font-size: 24px;
            font-weight: 800;
            letter-spacing: -.03em;
        }

        .users-subtitle {
            margin: 6px 0 0;
            color: #7a80a0;
            font-family: monospace;
            font-size: 10px;
        }

        .users-new-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 38px;
            padding: 0 15px;
            border: 0;
            border-radius: 8px;
            background: #171a2b;
            color: #ffffff;
            font-family: monospace;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: .04em;
            text-decoration: none;
            text-transform: uppercase;
        }

        .users-new-button:hover {
            background: #252a41;
        }

        .users-card {
            background: #ffffff;
            border: 1px solid #dde1ee;
            border-radius: 12px;
            box-shadow: 0 4px 14px rgba(31, 36, 56, .04);
            overflow: hidden;
        }

        .users-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            padding: 16px 18px;
            border-bottom: 1px solid #edf0f6;
        }

        .users-card-title {
            margin: 0;
            color: #1a1d2e;
            font-size: 13px;
            font-weight: 800;
        }

        .users-card-count {
            color: #8c91aa;
            font-family: monospace;
            font-size: 8px;
            white-space: nowrap;
        }

        .users-table-wrap {
            overflow-x: auto;
        }

        .users-table {
            width: 100%;
            min-width: 760px;
            border-collapse: collapse;
        }

        .users-table th {
            padding: 10px 14px;
            background: #f7f8fc;
            border-bottom: 1px solid #dde1ee;
            color: #7a80a0;
            font-family: monospace;
            font-size: 8px;
            font-weight: 700;
            letter-spacing: .06em;
            text-align: left;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .users-table td {
            padding: 13px 14px;
            border-bottom: 1px solid #edf0f6;
            color: #34394f;
            font-size: 10px;
            vertical-align: middle;
        }

        .users-table tbody tr:last-child td {
            border-bottom: 0;
        }

        .users-name {
            color: #191c2c;
            font-size: 10px;
            font-weight: 800;
        }

        .users-email {
            color: #555b74;
            font-size: 10px;
        }

        .users-badge {
            display: inline-flex;
            align-items: center;
            min-height: 22px;
            padding: 0 8px;
            border: 1px solid #dfe3ee;
            border-radius: 999px;
            background: #f7f8fc;
            color: #565d79;
            font-family: monospace;
            font-size: 8px;
            font-weight: 700;
            white-space: nowrap;
        }

        .users-status-active {
            background: rgba(22, 163, 99, .08);
            border-color: rgba(22, 163, 99, .22);
            color: #16a363;
        }

        .users-status-inactive {
            background: rgba(208, 53, 53, .08);
            border-color: rgba(208, 53, 53, .22);
            color: #d03535;
        }

        .users-actions {
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .users-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 28px;
            padding: 0 10px;
            border-radius: 7px;
            font-family: monospace;
            font-size: 8px;
            font-weight: 700;
            text-decoration: none;
            text-transform: uppercase;
        }

        .users-action-edit {
            background: #f0f2f8;
            color: #4f566f;
        }

        .users-action-edit:hover {
            background: #e8eaf2;
            color: #171a2b;
        }

        .users-action-delete {
            border: 0;
            background: rgba(208, 53, 53, .08);
            color: #d03535;
            cursor: pointer;
        }

        .users-action-delete:hover {
            background: rgba(208, 53, 53, .14);
        }

        .users-empty {
            padding: 28px 16px;
            color: #8c91aa;
            font-family: monospace;
            font-size: 9px;
            text-align: center;
        }

        @media (max-width: 700px) {
            .users-header {
                flex-direction: column;
            }
        }
    </style>

    <div class="users-page">

        <div class="users-header">

            <div>
                <div class="users-kicker">
                    DYSON LATAM / ADMINISTRATION
                </div>

                <h1 class="users-title">
                    Users
                </h1>

                <p class="users-subtitle">
                    User and access profile management
                </p>
            </div>

            <a href="{{ route('users.create') }}" class="users-new-button">
                + New User
            </a>

        </div>

        <div class="users-card">

            <div class="users-card-header">

                <h2 class="users-card-title">
                    Registered Users
                </h2>

                <div class="users-card-count">
                    {{ $users->count() }} user(s)
                </div>

            </div>

            <div class="users-table-wrap">

                <table class="users-table">

                    <thead>
                        <tr>
                            <th>User</th>
                            <th>Mail</th>
                            <th>Profile</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>

                    <tbody>

                        @forelse ($users as $user)
                            <tr>

                                <td>
                                    <div class="users-name">
                                        {{ $user->name }}
                                    </div>
                                </td>

                                <td>
                                    <div class="users-email">
                                        {{ $user->email }}
                                    </div>
                                </td>

                                <td>

                                    @if ($user->role === 'admin')
                                        <span class="users-badge">
                                            ADMIN
                                        </span>
                                    @elseif ($user->role === 'editor')
                                        <span class="users-badge">
                                            EDITOR
                                        </span>
                                    @else
                                        <span class="users-badge">
                                            SOLO VER
                                        </span>
                                    @endif

                                </td>

                                <td>

                                    @if ($user->active)
                                        <span class="users-badge users-status-active">
                                            ACTIVO
                                        </span>
                                    @else
                                        <span class="users-badge users-status-inactive">
                                            INACTIVO
                                        </span>
                                    @endif

                                </td>

                                <td>

                                    <div class="users-actions">

                                        <a href="{{ route('users.edit', $user) }}" class="users-action users-action-edit">
                                            Edit
                                        </a>

                                        @if ($user->id !== auth()->id())
                                            <form action="{{ route('users.destroy', $user) }}" method="POST">
                                                @csrf
                                                @method('DELETE')

                                                <button type="submit" class="users-action users-action-delete"
                                                    onclick="return confirm('Are you sure you want to delete this user?')">
                                                    Delete
                                                </button>
                                            </form>
                                        @endif

                                    </div>

                                </td>

                            </tr>

                        @empty

                            <tr>
                                <td colspan="5">
                                    <div class="users-empty">
                                        No users registered.
                                    </div>
                                </td>
                            </tr>
                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>

    </div>

@endsection