<x-app-layout>
    <x-slot name="header">
        <h2 class="serif" style="font-size: 1.3rem; color: var(--cream); font-weight: 400; letter-spacing: 0.05em;">
            {{ __('Admin / Edit User Role') }}
        </h2>
    </x-slot>

    <style>
        .form-card {
            background: #fff;
            border-radius: 4px;
            border: 1px solid rgba(26,24,20,0.08);
            padding: 3rem;
            max-width: 600px;
            margin: 0 auto;
        }
        .form-group { margin-bottom: 2rem; }
        .form-label {
            display: block;
            font-size: 0.7rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--warm-gray);
            font-weight: 600;
            margin-bottom: 0.6rem;
        }
        .form-input {
            width: 100%;
            padding: 0.8rem 1rem;
            background: var(--ivory);
            border: 1px solid rgba(26,24,20,0.08);
            border-radius: 2px;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.9rem;
            color: var(--ink);
            transition: border-color 0.2s;
        }
        .form-input:focus {
            outline: none;
            border-color: var(--amber);
        }
        .btn-save {
            background: var(--charcoal);
            color: var(--cream);
            border: none;
            border-radius: 2px;
            padding: 1rem 2rem;
            font-size: 0.8rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }
        .btn-save:hover {
            background: var(--amber);
            color: var(--charcoal);
        }
        .user-info-box {
            background: var(--ivory);
            padding: 1.5rem;
            border-radius: 4px;
            margin-bottom: 2.5rem;
            border: 1px dashed rgba(26,24,20,0.1);
        }
    </style>

    <div style="padding: 4rem 0 8rem;">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            
            <div class="form-card">
                <div class="user-info-box">
                    <div class="form-label">Editing User</div>
                    <div style="font-size: 1.2rem; font-family: 'Cormorant Garamond', serif; font-weight: 700; color: var(--charcoal);">
                        {{ $user->name }}
                    </div>
                    <div style="font-size: 0.85rem; color: var(--warm-gray);">{{ $user->email }}</div>
                </div>

                <form action="{{ route('admin.users.update', $user) }}" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="form-group">
                        <label class="form-label">System Role</label>
                        <select name="role" class="form-input" required>
                            <option value="user" {{ $user->role === 'user' ? 'selected' : '' }}>Customer (Regular User)</option>
                            <option value="order_manager" {{ $user->role === 'order_manager' ? 'selected' : '' }}>Order Manager (Process Orders Only)</option>
                            <option value="manager" {{ $user->role === 'manager' ? 'selected' : '' }}>Manager (Catalog & Orders)</option>
                            <option value="admin" {{ $user->role === 'admin' ? 'selected' : '' }}>Admin (General Administrator)</option>
                            <option value="super_admin" {{ $user->role === 'super_admin' ? 'selected' : '' }}>Super Admin (Full System Control)</option>
                        </select>
                        <p style="font-size: 0.75rem; color: var(--mist); margin-top: 0.5rem;">
                            Determines specific permissions within the admin panel.
                        </p>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Admin Panel Access</label>
                        <select name="is_admin" class="form-input" required>
                            <option value="0" {{ !$user->is_admin ? 'selected' : '' }}>No Access</option>
                            <option value="1" {{ $user->is_admin ? 'selected' : '' }}>Grant Admin Access</option>
                        </select>
                        <p style="font-size: 0.75rem; color: var(--mist); margin-top: 0.5rem;">
                            If enabled, the user can log into the /admin dashboard.
                        </p>
                    </div>

                    <div style="margin-top: 3rem; display: flex; justify-content: space-between; align-items: center;">
                        <a href="{{ route('admin.users.index') }}" style="color: var(--warm-gray); text-decoration: none; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em;">Cancel</a>
                        <button type="submit" class="btn-save">Update Permissions</button>
                    </div>
                </form>
            </div>

        </div>
    </div>
</x-app-layout>
