@extends('layouts.app')
@section('title', 'Add New User')
@section('content')
<div class="page-header">
    <div><div class="page-title">Add New User</div><div class="page-subtitle">Create a new team member account</div></div>
    <div class="page-actions"><a href="{{ route('settings.users.index') }}" class="btn btn-secondary"><i class="fas fa-arrow-left"></i> Back</a></div>
</div>

<div style="display:grid;grid-template-columns:2fr 1fr;gap:20px">
    <div class="card">
        <div class="card-header"><span class="card-title">User Details</span></div>
        <form method="POST" action="{{ route('settings.users.store') }}">
            @csrf
            <div class="card-body">
                <div class="form-row">
                    <div class="form-group"><label class="form-label">Full Name <span class="required">*</span></label><input type="text" name="name" class="form-control" value="{{ old('name') }}" required placeholder="Md. Kamal Hossain"></div>
                    <div class="form-group"><label class="form-label">Email Address <span class="required">*</span></label><input type="email" name="email" class="form-control" value="{{ old('email') }}" required placeholder="user@company.com"></div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">Role <span class="required">*</span></label>
                        <select name="role" class="form-control" required onchange="updateRole(this.value)">
                            <option value="">— Select Role —</option>
                            @foreach($roles as $r)<option value="{{ $r }}" {{ old('role')===$r?'selected':'' }}>{{ ucfirst($r) }}</option>@endforeach
                        </select>
                    </div>
                    <div class="form-group"><label class="form-label">Phone</label><input type="text" name="phone" class="form-control" value="{{ old('phone') }}" placeholder="+880 1711 000000"></div>
                </div>
                <div class="form-group"><label class="form-label">Designation / Job Title</label><input type="text" name="designation" class="form-control" value="{{ old('designation') }}" placeholder="e.g. Senior Accountant"></div>
                <div class="form-row">
                    <div class="form-group"><label class="form-label">Password <span class="required">*</span></label><input type="password" name="password" class="form-control" required placeholder="Min 8 chars, mixed case + number"></div>
                    <div class="form-group"><label class="form-label">Confirm Password <span class="required">*</span></label><input type="password" name="password_confirmation" class="form-control" required></div>
                </div>
            </div>
            <div class="card-footer" style="display:flex;justify-content:flex-end;gap:10px">
                <a href="{{ route('settings.users.index') }}" class="btn btn-secondary">Cancel</a>
                <button type="submit" class="btn btn-primary"><i class="fas fa-user-plus"></i> Create User</button>
            </div>
        </form>
    </div>

    <div class="card">
        <div class="card-header"><span class="card-title">Role Guide</span></div>
        <div class="card-body" id="role-panel" style="font-size:13px;color:var(--text-muted)">Select a role above to see its permissions.</div>
    </div>
</div>

<script>
const roles={admin:{c:'#ef4444',d:'Full access to all modules, settings, and user management.',p:['All modules — create/edit/delete','Submit & approve documents','Manage users & settings','View all reports']},manager:{c:'var(--primary)',d:'Can create and approve documents across all modules.',p:['All modules — create & edit','Submit/approve documents','Cannot delete records','No user management']},accountant:{c:'#06b6d4',d:'Full access to accounting, sales billing, and reports.',p:['Accounting (full)','Sales invoicing','Purchase bills','Financial reports']},hr:{c:'#8b5cf6',d:'Access to HR, payroll and attendance only.',p:['Employees & departments','Payroll & salary slips','Attendance & leaves','No financial data']},sales:{c:'#10b981',d:'Sales and CRM access — create quotes, invoices, orders.',p:['Customers & CRM','Quotations & invoices','Delivery notes','No purchase/HR data']},purchase:{c:'#f59e0b',d:'Purchase access — raise POs, receive goods, bill entry.',p:['Suppliers & POs','Purchase receipts','Purchase invoices','No HR/accounting']},warehouse:{c:'#64748b',d:'Inventory management — items, stock entries, ledger.',p:['Items & warehouses','Stock entries','Stock ledger','No financial data']},readonly:{c:'#94a3b8',d:'Read-only access — can view but not create or edit.',p:['View all modules','No create or edit','No delete','No settings']}};
function updateRole(r){const i=roles[r];if(!i){document.getElementById('role-panel').innerHTML='Select a role above to see its permissions.';return}document.getElementById('role-panel').innerHTML=`<div style="display:inline-flex;background:${i.c}22;color:${i.c};padding:3px 10px;border-radius:100px;font-size:12px;font-weight:600;margin-bottom:10px">${r.charAt(0).toUpperCase()+r.slice(1)}</div><p style="margin-bottom:10px;line-height:1.65;color:var(--text)">${i.d}</p><ul style="list-style:none;display:flex;flex-direction:column;gap:6px">${i.p.map(p=>`<li style="display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text)"><i class="fas fa-check" style="color:${i.c};font-size:10px"></i>${p}</li>`).join('')}</ul>`}
</script>
@endsection