@extends('admin.layouts.main')
@section('title','Tambah Anggota Baru')

@section('content')
<div class="page-header d-flex align-items-center justify-content-between">
    <div>
        <h1 class="page-title">Tambah Anggota Baru</h1>
        <p class="page-sub">Buat akun untuk admin atau staff baru</p>
    </div>
    <a href="{{ route('admin.users.index') }}" class="btn-adm btn-outline-adm"><i class="fas fa-arrow-left"></i> Kembali</a>
</div>

<form action="{{ route('admin.users.store') }}" method="POST">
    @csrf
    <div class="row g-4">
        <div class="col-lg-7">
            <div class="adm-card mb-4">
                <div class="adm-card-header"><div class="adm-card-title"><i class="fas fa-user"></i> Informasi Akun</div></div>
                <div class="adm-card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Nama Lengkap <span style="color:#ef4444;">*</span></label>
                                <input type="text" name="name" class="form-control" value="{{ old('name') }}" placeholder="Nama lengkap" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Posisi / Jabatan</label>
                                <input type="text" name="position" class="form-control" value="{{ old('position') }}" placeholder="Contoh: Staff Pemasaran">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Email <span style="color:#ef4444;">*</span></label>
                                <input type="email" name="email" class="form-control" value="{{ old('email') }}" placeholder="email@lpkjayaabadi.com" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">No. Telepon</label>
                                <input type="text" name="phone" class="form-control" value="{{ old('phone') }}" placeholder="+62 8xx xxxx xxxx">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Password <span style="color:#ef4444;">*</span></label>
                                <input type="password" name="password" class="form-control" placeholder="Min. 8 karakter" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Konfirmasi Password <span style="color:#ef4444;">*</span></label>
                                <input type="password" name="password_confirmation" class="form-control" placeholder="Ulangi password" required>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-5">
            <div class="adm-card mb-4">
                <div class="adm-card-header"><div class="adm-card-title"><i class="fas fa-shield-alt"></i> Role & Akses</div></div>
                <div class="adm-card-body">
                    <div class="form-group">
                        <label class="form-label">Role <span style="color:#ef4444;">*</span></label>
                        <div class="d-flex gap-2">
                            @foreach(['admin'=>['Super Admin','user-shield','#2563eb','#eff6ff'], 'staff'=>['Staff','user-tie','#0d9488','#f0fdfa']] as $rk => $rv)
                            <label style="flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;background:{{ old('role')==$rk ? $rv[3] : 'var(--c-50)' }};border:2px solid {{ old('role')==$rk ? $rv[2] : 'var(--c-200)' }};border-radius:12px;cursor:pointer;transition:all .18s;" onclick="this.style.background='{{ $rv[3] }}';this.style.borderColor='{{ $rv[2] }}'">
                                <input type="radio" name="role" value="{{ $rk }}" {{ old('role','staff')==$rk ? 'checked' : '' }} style="display:none;" required>
                                <i class="fas fa-{{ $rv[1] }}" style="font-size:1.4rem;color:{{ $rv[2] }};"></i>
                                <span style="font-size:13px;font-weight:700;color:var(--c-900);">{{ $rv[0] }}</span>
                            </label>
                            @endforeach
                        </div>
                    </div>
                    <div style="background:var(--c-50);border:1px solid var(--c-200);border-radius:10px;padding:14px;margin-top:4px;">
                        <div style="font-size:12.5px;font-weight:700;color:var(--c-900);margin-bottom:8px;"><i class="fas fa-info-circle me-2" style="color:var(--c-blue);"></i>Hak Akses Default</div>
                        <div style="font-size:12px;color:var(--c-600);line-height:1.7;">
                            <strong>Admin:</strong> Semua akses (tidak bisa dibatasi)<br>
                            <strong>Staff:</strong> {{ count($staffPerms) }} hak akses default
                            <a href="{{ route('admin.users.permissions', ['role' => 'staff']) }}" style="color:var(--c-blue);">→ Atur hak akses staff</a>
                        </div>
                    </div>
                    <div style="margin-top:14px;">
                        <label style="display:flex;align-items:center;gap:10px;padding:12px;background:var(--c-50);border-radius:9px;cursor:pointer;border:1px solid var(--c-200);">
                            <input type="checkbox" name="is_active" checked>
                            <div>
                                <div style="font-size:13.5px;font-weight:600;color:var(--c-900);">Akun Aktif</div>
                                <div style="font-size:11.5px;color:var(--c-500);">Anggota bisa langsung login</div>
                            </div>
                        </label>
                    </div>
                </div>
            </div>
            <div class="d-flex gap-3">
                <button type="submit" class="btn-adm btn-primary-adm flex-fill" style="justify-content:center;">
                    <i class="fas fa-user-plus"></i> Buat Akun
                </button>
                <a href="{{ route('admin.users.index') }}" class="btn-adm btn-outline-adm">Batal</a>
            </div>
        </div>
    </div>
</form>
@endsection