@extends('layouts.app')

@php
    $pageTitle = 'Create User';
    $pageHeading = 'Tambah User';
    $pageDescription = 'Buat user login WDMS (admin only).';
@endphp

@section('content')
    @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">
        <form method="POST" action="{{ route('users.store') }}" style="display:grid; gap:14px; max-width: 720px;">
            @csrf

            <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') }}" 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') }}" 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') }}" 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') }}" 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</span>
                <input type="password" name="password" required style="padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                <span class="muted" style="font-size:12px;">Password akan disimpan dengan format <code>pbkdf2_sha256</code> (kompatibel Django).</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', 'viewer') === 'viewer')>Demo / Viewer (read-only)</option>
                    <option value="operator" @selected(old('role') === 'operator')>Operator</option>
                    <option value="admin" @selected(old('role') === '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', '1') === '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>
    </section>
@endsection