@extends('layouts.admin')

@section('title', 'Add Staff Member')

@section('content')
<div class="admin-page-header">
    <h1>Add Staff Member</h1>
    <a href="{{ route('admin.users.staff') }}" class="admin-btn-primary">
        <i class="bi bi-arrow-left"></i> Back to Staff
    </a>
</div>

<div class="admin-card">
    <div class="card-body">
        <form action="{{ route('admin.users.store') }}" method="POST">
            @csrf
            
            <div class="admin-form-grid-2">
                <div>
                    <label for="name" class="admin-form-label">Full Name <span class="text-danger">*</span></label>
                    <input type="text" class="admin-form-control form-control @error('name') is-invalid @enderror" 
                           id="name" name="name" value="{{ old('name') }}" required>
                    @error('name')
                        <div class="invalid-feedback" style="font-size: 11px;">{{ $message }}</div>
                    @enderror
                </div>
                
                <div>
                    <label for="staff_number" class="admin-form-label">Staff Number</label>
                    <input type="text" class="admin-form-control form-control @error('staff_number') is-invalid @enderror" 
                           id="staff_number" name="staff_number" value="{{ old('staff_number') }}" 
                           placeholder="e.g., STF001, EMP123">
                    @error('staff_number')
                        <div class="invalid-feedback" style="font-size: 11px;">{{ $message }}</div>
                    @enderror
                    <small class="form-text text-muted" style="font-size: 11px;">Optional - Custom staff identifier</small>
                </div>
            </div>
            
            <div class="admin-form-grid-2">
                <div>
                    <label for="mobile" class="admin-form-label">Mobile Number <span class="text-danger">*</span></label>
                    <div class="input-group">
                        <span class="input-group-text" style="height: 32px; font-size: 13px; padding: 0.375rem 0.5rem;">+91</span>
                        <input type="text" class="admin-form-control form-control @error('mobile') is-invalid @enderror" 
                               id="mobile" name="mobile" value="{{ old('mobile') ? preg_replace('/^\+91/', '', old('mobile')) : '' }}" 
                               placeholder="9876543210" maxlength="10" pattern="[6-9]\d{9}" required>
                        @error('mobile')
                            <div class="invalid-feedback" style="font-size: 11px;">{{ $message }}</div>
                        @enderror
                    </div>
                    <small class="form-text text-muted" style="font-size: 11px;">This will be used for login</small>
                </div>
                
                <div>
                    <label for="email" class="admin-form-label">Email Address</label>
                    <input type="email" class="admin-form-control form-control @error('email') is-invalid @enderror" 
                           id="email" name="email" value="{{ old('email') }}">
                    @error('email')
                        <div class="invalid-feedback" style="font-size: 11px;">{{ $message }}</div>
                    @enderror
                    <small class="form-text text-muted" style="font-size: 11px;">Optional - for notifications</small>
                </div>
            </div>
            
            <div class="admin-form-grid-2">
                <div>
                    <label for="roles" class="admin-form-label">Role <span class="text-danger">*</span></label>
                    <select class="admin-form-control form-select @error('roles') is-invalid @enderror" name="roles[]" required>
                        <option value="">Select Role</option>
                        @foreach($roles as $role)
                            @if($role->name !== 'customer')
                                <option value="{{ $role->name }}" 
                                    {{ in_array($role->name, old('roles', [])) ? 'selected' : '' }}>
                                    {{ ucfirst($role->name) }}
                                </option>
                            @endif
                        @endforeach
                    </select>
                    @error('roles')
                        <div class="invalid-feedback" style="font-size: 11px;">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            
            <div class="admin-form-grid-2">
                <div>
                    <label for="password" class="admin-form-label">Password <span class="text-danger">*</span></label>
                    <input type="password" class="admin-form-control form-control @error('password') is-invalid @enderror" 
                           id="password" name="password" required>
                    @error('password')
                        <div class="invalid-feedback" style="font-size: 11px;">{{ $message }}</div>
                    @enderror
                    <small class="form-text text-muted" style="font-size: 11px;">Minimum 8 characters</small>
                </div>
                
                <div>
                    <label for="password_confirmation" class="admin-form-label">Confirm Password <span class="text-danger">*</span></label>
                    <input type="password" class="admin-form-control form-control" 
                           id="password_confirmation" name="password_confirmation" required>
                    <small class="form-text text-muted" style="font-size: 11px;">Re-enter the password</small>
                </div>
            </div>
            
            <div style="margin-top: 1rem; display: flex; justify-content: flex-end; gap: 0.5rem;">
                <a href="{{ route('admin.users.index', ['tab' => 'staff']) }}" class="btn btn-outline-secondary btn-sm">
                    Cancel
                </a>
                <button type="submit" class="admin-btn-primary">
                    <i class="bi bi-person-plus"></i> Create Staff Member
                </button>
            </div>
        </form>
    </div>
</div>
@endsection