@extends('admin.layouts.app')

@section('title', 'Create User')

@section('content')
<div class="form-card" style="max-width:750px;">
    <form method="POST" action="{{ route('admin.admin.users.store') }}">
        @csrf

        <div class="row g-3">
            <div class="col-md-6">
                <label for="first_name" class="form-label">First Name <span class="text-danger">*</span></label>
                <input type="text" class="form-control @error('first_name') is-invalid @enderror" id="first_name" name="first_name"
                       value="{{ old('first_name') }}" required>
                @error('first_name')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="col-md-6">
                <label for="last_name" class="form-label">Last Name <span class="text-danger">*</span></label>
                <input type="text" class="form-control @error('last_name') is-invalid @enderror" id="last_name" name="last_name"
                       value="{{ old('last_name') }}" required>
                @error('last_name')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="col-md-6">
                <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') }}" required>
                @error('email')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="col-md-6">
                <label for="phone" class="form-label">Phone Number <span class="text-danger">*</span></label>
                <input type="text" class="form-control @error('phone') is-invalid @enderror" id="phone" name="phone"
                       value="{{ old('phone') }}" required>
                @error('phone')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="col-md-6">
                <label for="password" class="form-label">Password <span class="text-danger">*</span></label>
                <div class="input-group">
                    <input type="text" class="form-control @error('password') is-invalid @enderror" id="password" name="password"
                           value="{{ old('password', $generatedPassword) }}" required readonly style="background:#f8f9fa;">
                    <button type="button" class="btn btn-outline-secondary" onclick="regeneratePassword()" style="font-size:13px;">
                        <i class="bi bi-arrow-clockwise"></i>
                    </button>
                </div>
                <small style="color:#888; font-size:11px;">Auto-generated. Copy this before saving.</small>
                @error('password')
                    <div style="color:#c62828; font-size:12px; margin-top:4px;">{{ $message }}</div>
                @enderror
            </div>
            <div class="col-md-6">
                <label for="role_id" class="form-label">Role</label>
                <select class="form-select" id="role_id" name="role_id">
                    <option value="">Select Role</option>
                    @foreach($roles as $role)
                        <option value="{{ $role->id }}" {{ old('role_id') == $role->id ? 'selected' : '' }}>
                            {{ $role->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-12">
                <label for="redemption_center_id" class="form-label">Redemption Centre <span class="text-danger">*</span></label>
                <select class="form-select @error('redemption_center_id') is-invalid @enderror" id="redemption_center_id" name="redemption_center_id" required>
                    <option value="">Select Redemption Centre</option>
                    @foreach($redemptionCenters as $center)
                        <option value="{{ $center->id }}" {{ old('redemption_center_id') == $center->id ? 'selected' : '' }}>
                            {{ $center->name }}
                        </option>
                    @endforeach
                </select>
                @error('redemption_center_id')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            {{-- Auto-populated location fields --}}
            <div class="col-md-4">
                <label class="form-label">Region</label>
                <input type="text" class="form-control" id="auto_region" readonly style="background:#f8f9fa;" placeholder="Auto-populated">
            </div>
            <div class="col-md-4">
                <label class="form-label">State</label>
                <input type="text" class="form-control" id="auto_state" readonly style="background:#f8f9fa;" placeholder="Auto-populated">
            </div>
            <div class="col-md-4">
                <label class="form-label">LGA</label>
                <input type="text" class="form-control" id="auto_lga" readonly style="background:#f8f9fa;" placeholder="Auto-populated">
            </div>
        </div>

        <div class="d-flex gap-2 mt-4">
            <button type="submit" class="btn-submit">Create User</button>
            <a href="{{ route('admin.admin.users.index') }}" class="btn-cancel">Cancel</a>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
    // Auto-populate location when redemption center is selected
    document.getElementById('redemption_center_id').addEventListener('change', function () {
        const centerId = this.value;
        const regionField = document.getElementById('auto_region');
        const stateField = document.getElementById('auto_state');
        const lgaField = document.getElementById('auto_lga');

        if (!centerId) {
            regionField.value = '';
            stateField.value = '';
            lgaField.value = '';
            return;
        }

        fetch(`/admin/api/redemption-center/${centerId}`, {
            headers: { 'X-CSRF-TOKEN': window.csrfToken, 'Accept': 'application/json' }
        })
        .then(res => res.json())
        .then(data => {
            regionField.value = data.region || '—';
            stateField.value = data.state || '—';
            lgaField.value = data.lga || '—';
        });
    });

    // Password regeneration
    function regeneratePassword() {
        const chars = 'ABCDEFGHJKMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789!@#$';
        let password = '';
        for (let i = 0; i < 10; i++) {
            password += chars.charAt(Math.floor(Math.random() * chars.length));
        }
        document.getElementById('password').value = password;
    }
</script>
@endpush