@extends('layouts.superadmin-app')

@section('page-title', 'Tambah Pengguna')
@section('page-subtitle', 'Buat akun pengguna baru')

@section('content')
<style>
.form-page { font-family: 'Sora', sans-serif; }

.form-wrapper { max-width: 640px; margin: 0 auto; }

.form-card {
    background: #fff; border-radius: 14px;
    border: 1px solid rgba(29,77,46,.09);
    box-shadow: 0 1px 6px rgba(29,77,46,.06);
    overflow: hidden;
}

.form-hdr {
    padding: 1.1rem 1.4rem;
    background: linear-gradient(130deg, #1a4d2e 0%, #2d7a4f 60%, #38a169 100%);
    display: flex; align-items: center; gap: .75rem;
    position: relative; overflow: hidden;
}
.form-hdr::before {
    content: ''; position: absolute; top: -30px; right: -30px;
    width: 120px; height: 120px; border-radius: 50%;
    background: rgba(255,255,255,.06); pointer-events: none;
}
.form-hdr-icon {
    width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
    background: rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
}
.form-hdr-title { font-size: .95rem; font-weight: 700; color: #fff; }
.form-hdr-sub   { font-size: .75rem; color: rgba(255,255,255,.6); margin-top: 1px; }

.form-body { padding: 1.4rem; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group.full { grid-column: 1 / -1; }

.form-label {
    font-size: .72rem; font-weight: 700; color: #374151;
    text-transform: uppercase; letter-spacing: .05em;
}
.label-opt { font-size: .7rem; font-weight: 400; color: #9ca3af; text-transform: none; letter-spacing: 0; }

.form-input, .form-select {
    width: 100%; padding: .6rem .85rem;
    border: 1.5px solid #e5e7eb; border-radius: 9px;
    font-size: .82rem; color: #111827; background: #fafafa;
    transition: all .2s; outline: none;
    font-family: 'Sora', sans-serif;
}
.form-input:focus, .form-select:focus {
    border-color: #16a34a; background: #fff;
    box-shadow: 0 0 0 3px rgba(22,163,74,.08);
}
.form-input.is-error, .form-select.is-error { border-color: #ef4444; background: #fff5f5; }
.form-input::placeholder { color: #c4c4cc; }

.form-select {
    appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2316a34a'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
    background-size: 14px; padding-right: 36px;
}

.error-msg { font-size: .72rem; color: #ef4444; font-weight: 500; }

.password-box {
    background: #f9fafb; border: 1.5px solid #e5e7eb; border-radius: 10px;
    padding: 1rem; margin-top: 1rem;
}
.password-box-label {
    display: flex; align-items: center; gap: .4rem;
    font-size: .72rem; font-weight: 700; color: #6b7280;
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: .75rem;
}
.password-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.divider { height: 1px; background: #f0fdf4; margin: 1.2rem 0; }

.form-actions { display: flex; align-items: center; justify-content: space-between; }
.btn-cancel {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .55rem 1rem; border-radius: 8px; font-size: .8rem; font-weight: 600;
    color: #6b7280; background: #f9fafb; border: 1.5px solid #e5e7eb;
    text-decoration: none; transition: all .15s;
}
.btn-cancel:hover { background: #f3f4f6; color: #374151; }
.btn-submit {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .6rem 1.2rem; border-radius: 8px; font-size: .82rem; font-weight: 700;
    background: linear-gradient(135deg, #2d7a4f, #16a34a);
    color: #fff; border: none; cursor: pointer;
    box-shadow: 0 2px 8px rgba(22,163,74,.3); transition: all .2s;
    font-family: 'Sora', sans-serif;
}
.btn-submit:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(22,163,74,.4); }
</style>

<div class="form-page">
<div class="form-wrapper">
<div class="form-card">

    <div class="form-hdr">
        <div class="form-hdr-icon">
            <svg width="16" height="16" fill="none" stroke="#fff" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/></svg>
        </div>
        <div>
            <div class="form-hdr-title">Tambah Pengguna Baru</div>
            <div class="form-hdr-sub">Lengkapi semua informasi untuk membuat akun baru</div>
        </div>
    </div>

    <form method="POST" action="{{ route('super-admin.users.store') }}" class="form-body">
        @csrf

        <div class="form-grid">
            <div class="form-group">
                <label for="username" class="form-label">Username</label>
                <input id="username" name="username" type="text"
                    value="{{ old('username') }}" placeholder="contoh: johndoe"
                    class="form-input @error('username') is-error @enderror"
                    required autofocus />
                @error('username')<p class="error-msg">{{ $message }}</p>@enderror
            </div>
            <div class="form-group">
                <label for="nama" class="form-label">Nama Lengkap</label>
                <input id="nama" name="nama" type="text"
                    value="{{ old('nama') }}" placeholder="Nama lengkap"
                    class="form-input @error('nama') is-error @enderror" required />
                @error('nama')<p class="error-msg">{{ $message }}</p>@enderror
            </div>
            <div class="form-group full">
                <label for="email" class="form-label">Email</label>
                <input id="email" name="email" type="email"
                    value="{{ old('email') }}" placeholder="contoh@email.com"
                    class="form-input @error('email') is-error @enderror" required />
                @error('email')<p class="error-msg">{{ $message }}</p>@enderror
            </div>
        </div>

        <div class="password-box">
            <div class="password-box-label">
                <svg width="12" height="12" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/></svg>
                Keamanan Akun
            </div>
            <div class="password-grid">
                <div class="form-group">
                    <label for="password" class="form-label">Password</label>
                    <input id="password" name="password" type="password"
                        placeholder="Min. 8 karakter"
                        class="form-input @error('password') is-error @enderror" required />
                    @error('password')<p class="error-msg">{{ $message }}</p>@enderror
                </div>
                <div class="form-group">
                    <label for="password_confirmation" class="form-label">Konfirmasi</label>
                    <input id="password_confirmation" name="password_confirmation" type="password"
                        placeholder="Ulangi password" class="form-input" required />
                </div>
            </div>
        </div>

        <div class="form-grid" style="margin-top:1rem;">
            <div class="form-group">
                <label for="no_hp" class="form-label">No HP <span class="label-opt">(opsional)</span></label>
                <input id="no_hp" name="no_hp" type="text"
                    value="{{ old('no_hp') }}" placeholder="08xxxxxxxxxx"
                    class="form-input @error('no_hp') is-error @enderror" />
                @error('no_hp')<p class="error-msg">{{ $message }}</p>@enderror
            </div>
            <div class="form-group">
                <label for="role" class="form-label">Role</label>
                <select id="role" name="role" class="form-select @error('role') is-error @enderror" required>
                    <option value="">Pilih Role</option>
                    <option value="super_admin" {{ old('role') == 'super_admin' ? 'selected' : '' }}>Super Admin</option>
                    <option value="admin" {{ old('role') == 'admin' ? 'selected' : '' }}>Admin</option>
                    <option value="user" {{ old('role') == 'user' ? 'selected' : '' }}>User</option>
                </select>
                @error('role')<p class="error-msg">{{ $message }}</p>@enderror
            </div>
        </div>

        <div class="divider"></div>

        <div class="form-actions">
            <a href="{{ route('super-admin.users.index') }}" class="btn-cancel">
                <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
                Batal
            </a>
            <button type="submit" class="btn-submit">
                <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                Simpan Pengguna
            </button>
        </div>
    </form>

</div>
</div>
</div>
@endsection