@extends('layouts.app')
@section('title','Edit User')@section('page-title','Edit 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">Edit</li></ol></nav><h1>Edit: {{ $user->name }}</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.update',$user) }}" method="POST">
        @csrf @method('PUT')
        <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" value="{{ old('name',$user->name) }}" required></div>
            <div class="col-md-6"><label class="form-label">Email *</label><input type="email" name="email" class="form-control" value="{{ old('email',$user->email) }}" required></div>
            <div class="col-md-6"><label class="form-label">Phone</label><input type="text" name="phone" class="form-control" value="{{ old('phone',$user->phone) }}"></div>
            <div class="col-md-6"><label class="form-label">Role *</label><select name="role" class="form-select" required onchange="handleRoleChange(this)"><option value="admin" {{ old('role',$user->role)==='admin'?'selected':'' }}>Admin</option><option value="manager" {{ old('role',$user->role)==='manager'?'selected':'' }}>Manager</option><option value="staff" {{ old('role',$user->role)==='staff'?'selected':'' }}>Staff</option></select></div>
            <div class="col-md-6" id="branchField"><label class="form-label">Branch</label><select name="branch_id" class="form-select"><option value="">— No Branch —</option>@foreach($branches as $b)<option value="{{ $b->id }}" {{ old('branch_id',$user->branch_id)==$b->id?'selected':'' }}>{{ $b->code }} — {{ $b->name }}</option>@endforeach</select></div>
            <div class="col-md-6" id="categoryField"><label class="form-label">Category</label><select name="category_id" class="form-select"><option value="">— All Categories —</option>@foreach($categories as $c)<option value="{{ $c->id }}" {{ old('category_id',$user->category_id)==$c->id?'selected':'' }}>{{ $c->name }}</option>@endforeach</select></div>
            <div class="col-md-6"><label class="form-label">Status</label><select name="is_active" class="form-select"><option value="1" {{ $user->is_active?'selected':'' }}>Active</option><option value="0" {{ !$user->is_active?'selected':'' }}>Inactive</option></select></div>
            <div class="col-12" style="border-top:1px solid var(--border-c);padding-top:16px;margin-top:4px;">
                <label class="form-label">New Password <small class="text-muted fw-400">(leave blank to keep current)</small></label>
                <div class="row g-3"><div class="col-md-6"><input type="password" name="password" class="form-control" minlength="8" placeholder="New password"></div><div class="col-md-6"><input type="password" name="password_confirmation" class="form-control" placeholder="Confirm"></div></div>
            </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>Update 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 text-center">
    <div style="width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--accent));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:32px;color:#fff;margin:0 auto 16px;">{{ strtoupper(substr($user->name,0,1)) }}</div>
    <div class="fw-700" style="font-size:18px;">{{ $user->name }}</div>
    <div class="text-muted mb-3" style="font-size:14px;">{{ $user->email }}</div>
    <span class="badge-status badge-{{ $user->role }}">{{ ucfirst($user->role) }}</span>
    @if($user->branch)<div class="mt-2"><span style="font-size:12px;font-family:monospace;background:rgba(46,196,182,.1);color:var(--accent);padding:2px 10px;border-radius:6px;font-weight:700;">{{ $user->branch->code }} — {{ $user->branch->name }}</span></div>@endif
    @if($user->category)<div class="mt-2 d-flex align-items-center justify-content-center gap-1" style="font-size:13px;"><span class="cat-dot" style="background:{{ $user->category->color }}"></span>{{ $user->category->name }}</div>@endif
    <div class="mt-3 text-muted" style="font-size:12px;">Member since {{ $user->created_at->format('M j, Y') }}</div>
</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