@extends('layouts.app')

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

@section('content')
<div class="mb-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-1 small">
            <li class="breadcrumb-item"><a href="{{ route('users.index') }}" class="text-success text-decoration-none">Staff</a></li>
            <li class="breadcrumb-item active" aria-current="page">Add Staff Account</li>
        </ol>
    </nav>
    <h3 class="fw-bold mb-1 text-dark">Register Staff Member</h3>
    <p class="text-muted mb-0 small">Create administrative or store operational staff credentials with secure role assignments.</p>
</div>

<div class="card shadow-sm border-0">
    <div class="card-body p-4">
        <form method="POST" action="{{ route('users.store') }}">
            @csrf

            <h5 class="fw-bold text-dark mb-3"><i class="bi bi-person me-2 text-success"></i>Personal & Contact Information</h5>
            <div class="row g-3 mb-4">
                <div class="col-md-6">
                    <label for="name" class="form-label small fw-semibold">Full Name <span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name') }}" placeholder="e.g. Anand Patel" required>
                    @error('name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-6">
                    <label for="email" class="form-label small fw-semibold">Email Address (Login Identity) <span class="text-danger">*</span></label>
                    <input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email" value="{{ old('email') }}" placeholder="user@pavitramagroz.com" required>
                    @error('email')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-6">
                    <label for="phone" class="form-label small fw-semibold">Telephone / Mobile</label>
                    <input type="text" class="form-control @error('phone') is-invalid @enderror" id="phone" name="phone" value="{{ old('phone') }}" placeholder="+91 98250 XXXXX">
                    @error('phone')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-6">
                    <label for="status" class="form-label small fw-semibold">Account Initial Status <span class="text-danger">*</span></label>
                    <select class="form-select @error('status') is-invalid @enderror" id="status" name="status" required>
                        <option value="active" {{ old('status', 'active') === 'active' ? 'selected' : '' }}>Active (Login Permitted)</option>
                        <option value="inactive" {{ old('status') === 'inactive' ? 'selected' : '' }}>Inactive (Deactivated)</option>
                    </select>
                    @error('status')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <h5 class="fw-bold text-dark mb-3 border-top pt-3"><i class="bi bi-shield-check me-2 text-success"></i>Role & Store Assignment</h5>
            <div class="row g-3 mb-4">
                <div class="col-md-6">
                    <label for="role_id" class="form-label small fw-semibold">System Role <span class="text-danger">*</span></label>
                    <select class="form-select @error('role_id') is-invalid @enderror" id="role_id" name="role_id" required>
                        <option value="">-- Select Role --</option>
                        @foreach($roles as $role)
                            <option value="{{ $role->id }}" {{ old('role_id') == $role->id ? 'selected' : '' }}>
                                {{ $role->name }} ({{ $role->slug }})
                            </option>
                        @endforeach
                    </select>
                    @error('role_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-6">
                    <label for="store_id" class="form-label small fw-semibold">Assigned Primary Store</label>
                    <select class="form-select @error('store_id') is-invalid @enderror" id="store_id" name="store_id">
                        <option value="">-- None / Organization Wide --</option>
                        @foreach($stores as $st)
                            <option value="{{ $st->id }}" {{ old('store_id', request('store_id')) == $st->id ? 'selected' : '' }}>
                                {{ $st->name }} ({{ $st->code }})
                            </option>
                        @endforeach
                    </select>
                    @error('store_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                    <div class="form-text small">Required for Store Admin and Cashier accounts.</div>
                </div>
            </div>

            <h5 class="fw-bold text-dark mb-3 border-top pt-3"><i class="bi bi-key me-2 text-success"></i>Security Credentials</h5>
            <div class="row g-3 mb-4">
                <div class="col-md-6">
                    <label for="password" class="form-label small fw-semibold">Password <span class="text-danger">*</span></label>
                    <input type="password" class="form-control @error('password') is-invalid @enderror" id="password" name="password" required autocomplete="new-password" placeholder="At least 8 chars, mixed case, number, symbol">
                    @error('password')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                    <div class="form-text small text-muted">
                        Must contain at least 8 characters, with uppercase, lowercase, numbers, and special symbols.
                    </div>
                </div>

                <div class="col-md-6">
                    <label for="password_confirmation" class="form-label small fw-semibold">Confirm Password <span class="text-danger">*</span></label>
                    <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" required autocomplete="new-password" placeholder="Re-enter password">
                </div>
            </div>

            <div class="border-top pt-3 d-flex justify-content-end gap-2">
                <a href="{{ route('users.index') }}" class="btn btn-light border">Cancel</a>
                <button type="submit" class="btn btn-agri">
                    <i class="bi bi-check2-circle me-1"></i> Register Staff Account
                </button>
            </div>
        </form>
    </div>
</div>
@endsection