@extends('admin.layouts.app')

@section('title', 'Edit User')
@section('page-title', 'Edit User: ' . $user->name)

@section('content')
<div style="background: white; padding: 20px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); max-width: 700px;">
    <form action="{{ route('admin.users.update', $user) }}" method="POST">
        @csrf
        @method('PUT')

        {{-- ── Identity ─────────────────────────────────────────────────────── --}}
        <h3 style="margin: 0 0 16px; font-size: 14px; text-transform: uppercase; color: #666; letter-spacing: .05em;">Identity</h3>

        <div style="margin-bottom: 16px;">
            <label style="display: block; font-weight: bold; margin-bottom: 5px;">Name</label>
            <input type="text" name="name" value="{{ old('name', $user->name) }}"
                   style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;">
            @error('name')<span style="color:#e74c3c;font-size:12px;">{{ $message }}</span>@enderror
        </div>

        <div style="margin-bottom: 16px;">
            <label style="display: block; font-weight: bold; margin-bottom: 5px;">Email</label>
            <input type="email" name="email" value="{{ old('email', $user->email) }}"
                   style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;">
            @error('email')<span style="color:#e74c3c;font-size:12px;">{{ $message }}</span>@enderror
        </div>

        <div style="margin-bottom: 16px;">
            <label style="display: block; font-weight: bold; margin-bottom: 5px;">
                New Password <span style="font-weight: normal; color: #999;">(leave blank to keep current)</span>
            </label>
            <input type="password" name="password" autocomplete="new-password"
                   style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;">
            @error('password')<span style="color:#e74c3c;font-size:12px;">{{ $message }}</span>@enderror
        </div>

        <div style="margin-bottom: 16px;">
            <label style="display: block; font-weight: bold; margin-bottom: 5px;">WhatsApp Number</label>
            <input type="text" name="whatsapp_number" value="{{ old('whatsapp_number', $user->whatsapp_number) }}"
                   placeholder="e.g. 6281234567890"
                   style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;">
            @error('whatsapp_number')<span style="color:#e74c3c;font-size:12px;">{{ $message }}</span>@enderror
        </div>

        <div style="margin-bottom: 16px; display: flex; gap: 12px; flex-wrap: wrap;">
            <label style="display: flex; align-items: center; gap: 8px;">
                <input type="hidden" name="email_verified" value="0">
                <input type="checkbox" name="email_verified" value="1"
                       {{ old('email_verified', $user->email_verified_at ? '1' : '0') === '1' ? 'checked' : '' }}>
                <span style="font-weight: bold;">Email Verified</span>
            </label>

            <label style="display: flex; align-items: center; gap: 8px;">
                <input type="hidden" name="whatsapp_verified" value="0">
                <input type="checkbox" name="whatsapp_verified" value="1"
                       {{ old('whatsapp_verified', $user->whatsapp_verified_at ? '1' : '0') === '1' ? 'checked' : '' }}>
                <span style="font-weight: bold;">WhatsApp Verified</span>
            </label>

            <label style="display: flex; align-items: center; gap: 8px;">
                <input type="checkbox" name="is_admin" value="1"
                       {{ old('is_admin', $user->is_admin) ? 'checked' : '' }}>
                <span style="font-weight: bold;">Is Admin</span>
            </label>
        </div>

        <hr style="border: none; border-top: 1px solid #eee; margin: 20px 0;">

        {{-- ── Stats ────────────────────────────────────────────────────────── --}}
        <h3 style="margin: 0 0 16px; font-size: 14px; text-transform: uppercase; color: #666; letter-spacing: .05em;">Stats</h3>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;">
            <div>
                <label style="display: block; font-weight: bold; margin-bottom: 5px;">ELO Rating</label>
                <input type="number" name="elo_rating" value="{{ old('elo_rating', $user->elo_rating) }}"
                       style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;">
                @error('elo_rating')<span style="color:#e74c3c;font-size:12px;">{{ $message }}</span>@enderror
            </div>

            <div>
                <label style="display: block; font-weight: bold; margin-bottom: 5px;">Battles Played</label>
                <input type="number" name="battles_played" value="{{ old('battles_played', $user->battles_played) }}"
                       style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;">
                @error('battles_played')<span style="color:#e74c3c;font-size:12px;">{{ $message }}</span>@enderror
            </div>
        </div>

        <div style="margin-bottom: 16px;">
            <label style="display: flex; align-items: center; gap: 8px;">
                <input type="hidden" name="kana_completed" value="0">
                <input type="checkbox" name="kana_completed" value="1"
                       {{ old('kana_completed', $user->kana_completed) ? 'checked' : '' }}>
                <span style="font-weight: bold;">Kana Completed</span>
            </label>
        </div>

        <hr style="border: none; border-top: 1px solid #eee; margin: 20px 0;">

        {{-- ── OAuth ────────────────────────────────────────────────────────── --}}
        <h3 style="margin: 0 0 16px; font-size: 14px; text-transform: uppercase; color: #666; letter-spacing: .05em;">OAuth IDs <span style="font-weight: normal; font-size: 12px; color:#999;">(clear to unlink)</span></h3>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;">
            <div>
                <label style="display: block; font-weight: bold; margin-bottom: 5px;">Google ID</label>
                <input type="text" name="google_id" value="{{ old('google_id', $user->google_id) }}"
                       style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; font-family: monospace; font-size: 13px;">
            </div>
            <div>
                <label style="display: block; font-weight: bold; margin-bottom: 5px;">GitHub ID</label>
                <input type="text" name="github_id" value="{{ old('github_id', $user->github_id) }}"
                       style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; font-family: monospace; font-size: 13px;">
            </div>
        </div>

        <hr style="border: none; border-top: 1px solid #eee; margin: 20px 0;">

        {{-- ── Roles ────────────────────────────────────────────────────────── --}}
        <h3 style="margin: 0 0 16px; font-size: 14px; text-transform: uppercase; color: #666; letter-spacing: .05em;">Roles</h3>

        <div style="margin-bottom: 20px;">
            @foreach ($roles as $role)
                <label style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
                    <input type="checkbox" name="roles[]" value="{{ $role->id }}"
                           {{ $user->roles->contains($role->id) ? 'checked' : '' }}>
                    <span>{{ $role->name }}</span>
                </label>
            @endforeach
        </div>

        <div style="display: flex; gap: 10px;">
            <button type="submit" class="btn">Save Changes</button>
            <a href="{{ route('admin.users.show', $user) }}" class="btn" style="background-color: #95a5a6;">Cancel</a>
        </div>
    </form>
</div>
@endsection