{{-- resources/views/settings/users.blade.php --}}
@extends('layouts.app')
@section('title', 'Staff Users')
@section('page_title', 'Staff Users')
@section('page_subtitle', 'Manage team access and roles')

@section('content')

@include('settings.partials.nav')

<div class="row g-3">

    <div class="col-xl-8">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-people me-2" style="color:var(--clay)"></i>
                    Staff Users
                    <span style="font-size:.75rem;font-weight:400;
                                 color:var(--muted);margin-left:6px;">
                        {{ $users->count() }} total
                    </span>
                </span>
            </div>

            @if($users->isEmpty())
                <div class="card-body text-center py-4">
                    <p class="text-muted mb-0" style="font-size:.8rem;">
                        No staff users yet
                    </p>
                </div>
            @else
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>User</th>
                                <th>Role</th>
                                <th>Last Login</th>
                                <th>Status</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($users as $user)
                                <tr>
                                    <td>
                                        <div style="display:flex;
                                                    align-items:center;gap:9px;">
                                            <div style="width:32px;height:32px;
                                                        border-radius:8px;
                                                        background:var(--clay-light);
                                                        display:flex;align-items:center;
                                                        justify-content:center;
                                                        font-size:.75rem;font-weight:700;
                                                        color:var(--clay);flex-shrink:0;">
                                                {{ strtoupper(substr($user->name, 0, 1)) }}
                                            </div>
                                            <div>
                                                <div class="fw-semibold"
                                                     style="font-size:.82rem;">
                                                    {{ $user->name }}
                                                    @if($user->is_property_owner)
                                                        <span style="font-size:.65rem;
                                                                     background:var(--clay-light);
                                                                     color:var(--clay);
                                                                     padding:1px 5px;
                                                                     border-radius:4px;">
                                                            Owner
                                                        </span>
                                                    @endif
                                                </div>
                                                <div style="font-size:.7rem;
                                                            color:var(--muted);">
                                                    {{ $user->email }}
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <span style="font-size:.72rem;
                                                     background:var(--bg);
                                                     padding:2px 7px;
                                                     border-radius:4px;
                                                     font-weight:600;">
                                            {{ $user->roles->first()?->name ?? 'property_owner' }}
                                        </span>
                                    </td>
                                    <td style="font-size:.75rem;color:var(--muted);">
                                        {{ $user->last_login_at?->diffForHumans() ?? 'Never' }}
                                    </td>
                                    <td>
                                        @if($user->is_active)
                                            <span style="font-size:.7rem;background:#d1fae5;
                                                         color:#065f46;padding:2px 8px;
                                                         border-radius:20px;font-weight:600;">
                                                Active
                                            </span>
                                        @else
                                            <span style="font-size:.7rem;background:#fee2e2;
                                                         color:#991b1b;padding:2px 8px;
                                                         border-radius:20px;font-weight:600;">
                                                Inactive
                                            </span>
                                        @endif
                                    </td>
                                    <td>
                                        @if(!$user->is_property_owner)
                                            <div class="d-flex gap-1">
                                                <button class="btn btn-xs btn-outline-secondary"
                                                        onclick="editUser({{ $user->id }}, '{{ addslashes($user->name) }}', '{{ $user->phone }}', '{{ $user->roles->first()?->name ?? '' }}')">
                                                    <i class="bi bi-pencil"></i>
                                                </button>
                                                <form method="POST"
                                                      action="{{ tenant_route('settings.users.toggle', ['user' => $user->id]) }}">
                                                    @csrf
                                                    <button class="btn btn-xs {{ $user->is_active ? 'btn-outline-warning' : 'btn-outline-success' }}"
                                                            type="submit">
                                                        {{ $user->is_active ? 'Disable' : 'Enable' }}
                                                    </button>
                                                </form>
                                                <form method="POST"
                                                      action="{{ tenant_route('settings.users.destroy', ['user' => $user->id]) }}"
                                                      onsubmit="return confirm('Remove this user?')">
                                                    @csrf @method('DELETE')
                                                    <button class="btn btn-xs btn-outline-danger"
                                                            type="submit">
                                                        <i class="bi bi-trash"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>

    <div class="col-xl-4">
        <div class="card" id="userFormCard">
            <div class="card-header">
                <span class="card-title" id="userFormTitle">
                    Add Staff User
                </span>
            </div>
            <div class="card-body">
                <form method="POST"
                      id="userForm"
                      action="{{ tenant_route('settings.users.store') }}">
                    @csrf
                    <input type="hidden" name="_method"
                           id="userMethod" value="POST">
                    <input type="hidden" name="_user_id"
                           id="userId">

                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            Full Name <span class="text-danger">*</span>
                        </label>
                        <input type="text" name="name" id="userName"
                               class="form-control" required>
                    </div>

                    <div id="emailField" class="mb-3">
                        <label class="form-label fw-semibold">
                            Email <span class="text-danger">*</span>
                        </label>
                        <input type="email" name="email"
                               class="form-control">
                        <div style="font-size:.68rem;color:var(--muted);margin-top:3px;">
                            A temporary password will be generated
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Phone</label>
                        <input type="tel" name="phone" id="userPhone"
                               class="form-control"
                               placeholder="+263 77 123 4567">
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            Role <span class="text-danger">*</span>
                        </label>
                        <select name="role" id="userRole"
                                class="form-select" required>
                            <option value="">Select role</option>
                            @foreach($roles as $role)
                                <option value="{{ $role->name }}">
                                    {{ ucfirst(str_replace('_', ' ', $role->name)) }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div style="background:var(--bg);border-radius:8px;
                                padding:10px 12px;margin-bottom:14px;
                                font-size:.72rem;color:var(--muted);">
                        <strong>Role permissions:</strong><br>
                        Front Desk — reservations & check-in<br>
                        Accountant — invoicing & payments<br>
                        Manager — full access except admin<br>
                        Housekeeping — rooms & housekeeping only
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit"
                                class="btn btn-primary btn-sm">
                            Add User
                        </button>
                        <button type="button"
                                onclick="resetUserForm()"
                                class="btn btn-outline-secondary btn-sm">
                            Reset
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>

@endsection

@push('scripts')
<script>
function editUser(id, name, phone, role) {
    document.getElementById('userFormTitle').textContent = 'Edit User';
    document.getElementById('userMethod').value = 'PUT';
    document.getElementById('userId').value = id;
    document.getElementById('userName').value = name;
    document.getElementById('userPhone').value = phone || '';
    document.getElementById('userRole').value = role;
    document.getElementById('emailField').style.display = 'none';

    const form = document.getElementById('userForm');
    form.action = form.action.replace(/\/users\/\d+$/, '')
        + '/users/' + id;
    form.querySelector('[name="_method"]').value = 'PUT';

    document.getElementById('userFormCard').scrollIntoView({ behavior: 'smooth' });
}

function resetUserForm() {
    document.getElementById('userFormTitle').textContent = 'Add Staff User';
    document.getElementById('userForm').reset();
    document.getElementById('userMethod').value = 'POST';
    document.getElementById('emailField').style.display = 'block';
    document.getElementById('userForm').action =
        '{{ tenant_route('settings.users.store') }}';
}
</script>
@endpush