@extends('admin.layouts.app')

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

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

        <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', $user->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', $user->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', $user->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', $user->phone) }}" required>
                @error('phone')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="col-md-6">
                <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', $user->redemption_center_id) == $center->id ? 'selected' : '' }}>
                            {{ $center->name }}
                        </option>
                    @endforeach
                </select>
                @error('redemption_center_id')
                    <div class="invalid-feedback">{{ $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', $user->role_id) == $role->id ? 'selected' : '' }}>
                            {{ $role->name }}
                        </option>
                    @endforeach
                </select>
            </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;"
                       value="{{ $user->redemptionCenter?->region?->name ?? '—' }}">
            </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;"
                       value="{{ $user->redemptionCenter?->state?->name ?? '—' }}">
            </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;"
                       value="{{ $user->redemptionCenter?->lga?->name ?? '—' }}">
            </div>
        </div>

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

@push('scripts')
<script>
    document.getElementById('redemption_center_id').addEventListener('change', function () {
        const centerId = this.value;
        if (!centerId) {
            document.getElementById('auto_region').value = '';
            document.getElementById('auto_state').value = '';
            document.getElementById('auto_lga').value = '';
            return;
        }

        fetch(`/admin/api/redemption-center/${centerId}`, {
            headers: { 'X-CSRF-TOKEN': window.csrfToken, 'Accept': 'application/json' }
        })
        .then(res => res.json())
        .then(data => {
            document.getElementById('auto_region').value = data.region || '—';
            document.getElementById('auto_state').value = data.state || '—';
            document.getElementById('auto_lga').value = data.lga || '—';
        });
    });
</script>
@endpush