@extends('layouts.app')
@section('title','Add User')@section('page-title','Add User')
@section('content')
<div class="page-header"><nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="{{ route('users.index') }}">Users</a></li><li class="breadcrumb-item active">Add User</li></ol></nav><h1>Add New User</h1></div>
<div class="row g-4">
<div class="col-12 col-xl-7"><div class="card"><div class="card-body p-4">
    <form action="{{ route('users.store') }}" method="POST">
        @csrf
        <div class="row g-3">
            <div class="col-md-6"><label class="form-label">Full Name *</label><input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" required>@error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror</div>
            <div class="col-md-6"><label class="form-label">Email Address *</label><input type="email" name="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}" required>@error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror</div>
            <div class="col-md-6"><label class="form-label">Phone</label><input type="text" name="phone" class="form-control" value="{{ old('phone') }}" placeholder="+231 77 000 000"></div>
            <div class="col-md-6"><label class="form-label">Role *</label><select name="role" class="form-select" required onchange="handleRoleChange(this)"><option value="">— Select —</option><option value="admin" {{ old('role')==='admin'?'selected':'' }}>Admin — All Branches</option><option value="manager" {{ old('role')==='manager'?'selected':'' }}>Manager — Branch Access</option><option value="staff" {{ old('role')==='staff'?'selected':'' }}>Staff — Branch Access</option></select></div>
            <div class="col-md-6" id="branchField"><label class="form-label">Branch *</label><select name="branch_id" class="form-select @error('branch_id') is-invalid @enderror"><option value="">— Select Branch —</option>@foreach($branches as $b)<option value="{{ $b->id }}" {{ old('branch_id')==$b->id?'selected':'' }}>{{ $b->code }} — {{ $b->name }}</option>@endforeach</select><small class="text-muted">User will only see data from this branch</small>@error('branch_id')<div class="invalid-feedback">{{ $message }}</div>@enderror</div>
            <div class="col-md-6" id="categoryField"><label class="form-label">Category Access</label><select name="category_id" class="form-select"><option value="">— All Categories —</option>@foreach($categories as $c)<option value="{{ $c->id }}" {{ old('category_id')==$c->id?'selected':'' }}>{{ $c->name }}</option>@endforeach</select></div>
            <div class="col-md-6"><label class="form-label">Password *</label><input type="password" name="password" class="form-control @error('password') is-invalid @enderror" required minlength="8">@error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror</div>
            <div class="col-md-6"><label class="form-label">Confirm Password *</label><input type="password" name="password_confirmation" class="form-control" required></div>
        </div>
        <div class="d-flex gap-3 mt-4"><button type="submit" class="btn btn-brand px-5"><i class="bi bi-check-lg me-2"></i>Create User</button><a href="{{ route('users.index') }}" class="btn btn-outline-secondary px-4">Cancel</a></div>
    </form>
</div></div></div>
<div class="col-12 col-xl-5"><div class="card"><div class="card-body p-4">
    <h6 class="fw-700 mb-3" style="font-family:'Space Grotesk',sans-serif;">Role Permissions</h6>
    @foreach([['Admin','#EF476F','bi-shield-fill','Full access to all branches, users, backups, and all reports.'],['Manager','#7209B7','bi-person-badge','Full operational access within their assigned branch and category.'],['Staff','#2EC4B6','bi-person','Can view products and record sales within their branch only.']] as [$role,$color,$icon,$desc])
    <div class="mb-3 p-3 rounded-3" style="background:{{ $color }}0a;border:1px solid {{ $color }}33"><div class="fw-700 mb-1" style="color:{{ $color }};font-size:13px;"><i class="bi {{ $icon }} me-1"></i>{{ $role }}</div><div style="font-size:13px;">{{ $desc }}</div></div>
    @endforeach
</div></div></div>
</div>
@endsection
@push('scripts')
<script>
function handleRoleChange(sel){
    const show=sel.value!=='admin';
    document.getElementById('branchField').style.display=show?'':'none';
    document.getElementById('categoryField').style.display=show?'':'none';
}
handleRoleChange(document.querySelector('[name=role]'));
</script>
@endpush