@extends('layouts.app')

@section('content')
<div class="page-title"><i class="fas fa-user-plus me-2"></i>Add Staff Member</div>
<p class="page-subtitle">Create a new staff member for {{ $company->name }}</p>

<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <i class="fas fa-form me-2"></i>Staff Information
            </div>
            <div class="card-body">
                @if ($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <h5 class="alert-heading">Validation Errors</h5>
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                <form action="{{ route('staff.store') }}" method="POST">
                    @csrf

                    <div class="mb-3">
                        <label for="name" class="form-label">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="Enter staff member's full name"
                            required
                            autofocus
                        >
                        @error('name')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="email" class="form-label">Email Address <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="Enter email address"
                            required
                        >
                        @error('email')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="role_id" class="form-label">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 }}" data-role-name="{{ $role->name }}" {{ old('role_id') == $role->id ? 'selected' : '' }}>
                                    {{ ucfirst(str_replace('_', ' ', $role->name)) }}
                                </option>
                            @endforeach
                        </select>
                        @error('role_id')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                        <small class="form-text text-muted d-block mt-2">
                            <strong>Company Admin:</strong> Full access to company settings and staff management<br>
                            <strong>Company Owner:</strong> Everything a company admin can do, plus voiding billings — and their 6-digit code authorizes every void in the company<br>
                            <strong>Cashier:</strong> Can process payments and view billing<br>
                            <strong>Meter Reader:</strong> Can record meter readings
                        </small>
                    </div>

                    {{-- The owner's code authorizes every void in the company,
                         so an owner account is not usable without one. --}}
                    <div class="mb-3" id="voidCodeGroup" style="display:none;">
                        <label for="void_code" class="form-label">Void Authorization Code <span class="text-danger">*</span></label>
                        <input
                            type="password"
                            class="form-control text-center @error('void_code') is-invalid @enderror"
                            id="void_code"
                            name="void_code"
                            inputmode="numeric"
                            pattern="[0-9]{6}"
                            maxlength="6"
                            minlength="6"
                            autocomplete="off"
                            placeholder="••••••"
                            style="letter-spacing:.4rem;"
                            value="{{ old('void_code') }}"
                        >
                        @error('void_code')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                        <small class="form-text text-muted d-block mt-2">
                            6 digits. Required for a Company Owner — this code authorizes every
                            billing void in the company, including voids done by a company admin.
                            The owner can change it later from their own profile.
                        </small>
                    </div>

                    <div class="mb-3">
                        <label for="password" class="form-label">Password <span class="text-danger">*</span></label>
                        <input 
                            type="password" 
                            class="form-control @error('password') is-invalid @enderror"
                            id="password"
                            name="password"
                            placeholder="Enter a secure password"
                            required
                        >
                        @error('password')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                        <small class="form-text text-muted d-block mt-2">
                            Password must contain uppercase, lowercase, numbers, and symbols
                        </small>
                    </div>

                    <div class="mb-3">
                        <label for="password_confirmation" class="form-label">Confirm Password <span class="text-danger">*</span></label>
                        <input 
                            type="password" 
                            class="form-control @error('password_confirmation') is-invalid @enderror"
                            id="password_confirmation"
                            name="password_confirmation"
                            placeholder="Confirm the password"
                            required
                        >
                        @error('password_confirmation')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i>Create Staff Member
                        </button>
                        <a href="{{ route('staff.index') }}" class="btn btn-secondary">
                            <i class="fas fa-times me-1"></i>Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <i class="fas fa-info-circle me-2"></i>Information
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <h6 class="text-muted mb-2">Staff Roles:</h6>
                    <div class="role-list">
                        @foreach($roles as $role)
                            <div class="mb-2 pb-2 border-bottom">
                                <strong>{{ ucfirst(str_replace('_', ' ', $role->name)) }}</strong>
                                <p class="mb-0 small text-muted">
                                    @if($role->name === 'company_admin')
                                        Full access to manage the company, settings, and all staff
                                    @elseif($role->name === 'cashier')
                                        Process payments and manage billing documents
                                    @elseif($role->name === 'company_owner')
                                        Full company access, plus voiding billings (including paid ones). Their 6-digit code authorizes every void.
                                    @elseif($role->name === 'meter_reader')
                                        Record meter readings and consumption data
                                    @endif
                                </p>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="alert alert-info">
                    <i class="fas fa-lock me-2"></i>
                    <small>
                        <strong>Security:</strong> All passwords are securely hashed. Staff members must use their email and password to login.
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // The void code box only makes sense for a Company Owner
    (function () {
        var roleSelect = document.getElementById('role_id');
        var group = document.getElementById('voidCodeGroup');
        var input = document.getElementById('void_code');
        if (!roleSelect || !group) return;

        function sync() {
            var opt = roleSelect.options[roleSelect.selectedIndex];
            var isOwner = opt && opt.getAttribute('data-role-name') === 'company_owner';
            group.style.display = isOwner ? '' : 'none';
            if (input) {
                input.required = isOwner;
                if (!isOwner) input.value = '';
            }
        }

        roleSelect.addEventListener('change', sync);
        if (input) {
            input.addEventListener('input', function () {
                this.value = this.value.replace(/\D/g, '').slice(0, 6);
            });
        }
        sync();
    })();
</script>
@endsection