@extends('layouts.app')

@php
    $pageTitle = 'Edit User';
    $pageHeading = 'Edit User';
    $pageDescription = 'Update data user login WDMS.';
@endphp

@section('content')
    @php($resolvedRole = strtolower((string) ($user->role ?? ((int) ($user->is_superuser ?? 0) === 1 ? 'admin' : 'viewer'))))

    @if ($errors->any())
        <section class="hero" style="border-color: rgba(180, 35, 24, 0.2); background: rgba(180, 35, 24, 0.06);">
            <strong style="display: block; color: var(--red); margin-bottom: 8px;">Ada error</strong>
            <ul style="margin: 0; padding-left: 18px; color: var(--ink);">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </section>
    @endif

    <section class="table-card">
        <div class="muted" style="margin-bottom: 14px; line-height: 1.7;">
            ID: <strong>{{ $user->id }}</strong> | Username: <strong>{{ $user->username }}</strong>
        </div>

        <form method="POST" action="{{ route('users.update', $user->id) }}" style="display:grid; gap:14px; max-width: 720px;">
            @csrf
            @method('PUT')

            <div style="display:grid; grid-template-columns: 1fr 1fr; gap:12px;">
                <label style="display:grid; gap:8px;">
                    <span class="muted" style="font-size:13px;">Username</span>
                    <input name="username" value="{{ old('username', $user->username) }}" required style="padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                </label>
                <label style="display:grid; gap:8px;">
                    <span class="muted" style="font-size:13px;">Email</span>
                    <input name="email" value="{{ old('email', $user->email) }}" style="padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                </label>
            </div>

            <div style="display:grid; grid-template-columns: 1fr 1fr; gap:12px;">
                <label style="display:grid; gap:8px;">
                    <span class="muted" style="font-size:13px;">First Name</span>
                    <input name="first_name" value="{{ old('first_name', $user->first_name) }}" style="padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                </label>
                <label style="display:grid; gap:8px;">
                    <span class="muted" style="font-size:13px;">Last Name</span>
                    <input name="last_name" value="{{ old('last_name', $user->last_name) }}" style="padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                </label>
            </div>

            <label style="display:grid; gap:8px;">
                <span class="muted" style="font-size:13px;">Password Baru (opsional)</span>
                <input type="password" name="password" style="padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                <span class="muted" style="font-size:12px;">Kosongkan jika tidak ingin mengganti password.</span>
            </label>

            <label style="display:grid; gap:8px; max-width: 280px;">
                <span class="muted" style="font-size:13px;">Role Akses</span>
                <select name="role" required style="padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                    <option value="viewer" @selected(old('role', $resolvedRole) === 'viewer')>Demo / Viewer (read-only)</option>
                    <option value="operator" @selected(old('role', $resolvedRole) === 'operator')>Operator</option>
                    <option value="admin" @selected(old('role', $resolvedRole) === 'admin')>Admin</option>
                </select>
                <span class="muted" style="font-size:12px;">Viewer hanya baca data. Operator untuk operasional. Admin untuk semua menu termasuk user dan backup.</span>
            </label>

            <div style="display:flex; gap:14px; flex-wrap:wrap;">
                <label style="display:flex; gap:10px; align-items:flex-start; cursor:pointer;">
                    <input type="hidden" name="is_active" value="0">
                    <input type="checkbox" name="is_active" value="1" style="margin-top: 3px;" @checked(old('is_active', (string) (int) $user->is_active) === '1')>
                    <div>
                        <div style="font-weight:800;">Active</div>
                        <div class="muted" style="font-size: 13px;">Bisa login ke WDMS.</div>
                    </div>
                </label>
                <input type="hidden" name="is_superuser" value="0">
            </div>

            <div style="display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap;">
                <a href="{{ route('users.index') }}" class="pill-link secondary">Kembali</a>
                <button type="submit" class="pill-link primary" style="cursor:pointer;">Simpan</button>
            </div>
        </form>

        <div style="margin-top: 14px; max-width: 720px; display:flex; justify-content:flex-end;">
            <form method="POST" action="{{ route('users.destroy', $user->id) }}" onsubmit="return confirm('Hapus user ini?')">
                @csrf
                @method('DELETE')
                <button type="submit" class="pill-link secondary" style="cursor:pointer; color:#fffaf2; background: linear-gradient(135deg, #8d2f23, #b42318); border: 0;">
                    Hapus User
                </button>
            </form>
        </div>
    </section>
@endsection