@extends('layouts.app')

@section('content')
<div class="page-title"><i class="fas fa-user-edit me-2"></i>Edit Staff Member</div>
<p class="page-subtitle">Update details for {{ $staff->name }} ({{ $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.update', $staff) }}" method="POST">
                    @csrf
                    @method('PUT')

                    <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', $staff->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', $staff->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', $staff->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>

                    <div class="mb-3" id="voidCodeGroup" style="display:none;">
                        <label for="void_code" class="form-label">
                            Void Authorization Code
                            @if($staff->void_code)
                                <span class="badge bg-success ms-1"><i class="fas fa-check"></i> Set</span>
                            @else
                                <span class="text-danger">*</span>
                            @endif
                        </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;"
                        >
                        @error('void_code')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                        <small class="form-text text-muted d-block mt-2">
                            @if($staff->void_code)
                                Leave blank to keep the current code. Enter 6 digits to replace it.
                            @else
                                6 digits. Required — no billing can be voided in this company until an owner has a code.
                            @endif
                            The owner can also change it themselves from their profile.
                        </small>
                    </div>

                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        <small>To change this staff member's password, ask them to use the password reset option on the login page.</small>
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i>Update 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>
        </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');
        var hasExistingCode = @js((bool) $staff->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) {
                // Blank keeps the existing code, so it is only mandatory for an
                // owner who does not have one yet.
                input.required = isOwner && !hasExistingCode;
                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