@extends('layouts.app')
@php $viewer = auth()->user(); @endphp
@section('title', 'Edit Pengguna')
@section('content')

<div class="d-flex align-items-center gap-2 mb-4">
    <a href="{{ route('users.index') }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-arrow-left"></i>
    </a>
    <h4 class="fw-bold mb-0">Edit Pengguna</h4>
</div>

<div class="row justify-content-center">
    <div class="col-lg-7">
        <div class="card">
            <div class="card-body p-4">

                @if($errors->any())
                <div class="alert alert-danger mb-3">
                    <ul class="mb-0">
                        @foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach
                    </ul>
                </div>
                @endif

                <form method="POST" action="{{ route('users.update', $user) }}">
                    @csrf @method('PUT')
                    <div class="row g-3">

                        {{-- Nama --}}
                        <div class="col-12">
                            <label class="form-label fw-medium">
                                Nama Lengkap <span class="text-danger">*</span>
                            </label>
                            <input type="text" name="name"
                                class="form-control @error('name') is-invalid @enderror"
                                value="{{ old('name', $user->name) }}">
                            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        {{-- No. Perner --}}
                        <div class="col-md-6">
                            <label class="form-label fw-medium">
                                No. Perner <span class="text-danger">*</span>
                            </label>
                            <input type="text" name="perner_number"
                                class="form-control @error('perner_number') is-invalid @enderror"
                                value="{{ old('perner_number', $user->perner_number) }}"
                                maxlength="8" inputmode="numeric"
                                oninput="this.value=this.value.replace(/[^0-9]/g,'').slice(0,8)">
                            @error('perner_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        {{-- Email --}}
                        <div class="col-md-6">
                            <label class="form-label fw-medium">
                                Email <span class="text-danger">*</span>
                            </label>
                            <input type="email" name="email"
                                class="form-control @error('email') is-invalid @enderror"
                                value="{{ old('email', $user->email) }}">
                            @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        {{-- Role --}}
                        <div class="col-md-6">
                            <label class="form-label fw-medium">
                                Role <span class="text-danger">*</span>
                            </label>
                            <select name="role" id="roleSelect"
                                class="form-select @error('role') is-invalid @enderror"
                                onchange="syncJabatan(this.value); toggleAreaPromotion(this.value)">
                                @foreach($availableRoles as $roleValue => $roleLabel)
                                <option value="{{ $roleValue }}"
                                    {{ old('role', $user->role) === $roleValue ? 'selected' : '' }}>
                                    {{ $roleLabel }}
                                </option>
                                @endforeach
                            </select>
                            @error('role')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        <input type="hidden" name="jabatan" id="jabatanInput"
                            value="{{ old('jabatan', $user->jabatan) }}">

                        {{-- Password --}}
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Password Baru</label>
                            <input type="password" name="password" class="form-control"
                                placeholder="Kosongkan jika tidak diubah">
                        </div>

                        {{-- No. HP --}}
                        <div class="col-md-6">
                            <label class="form-label fw-medium">No. HP</label>
                            <input type="text" name="phone" class="form-control"
                                value="{{ old('phone', $user->phone) }}">
                        </div>

                        {{-- Unit Type --}}
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Unit Type</label>
                            @if($user->unit_type === 'marketing')
                            <input type="hidden" name="unit_type" value="marketing">
                            <div class="p-2 border rounded-3 text-center"
                                style="background:#dbeafe;border-color:#3b82f6!important">
                                <div class="fw-semibold small text-primary">Consumer Insight</div>
                            </div>
                            @else
                            <input type="hidden" name="unit_type" value="divisi">
                            <div class="p-2 border rounded-3 text-center"
                                style="background:#dcfce7;border-color:#22c55e!important">
                                <div class="fw-semibold small text-success">Divisi</div>
                            </div>
                            @endif
                        </div>

                        {{-- Status --}}
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Status</label>
                            <select name="is_active" class="form-select">
                                <option value="1" {{ $user->is_active ? 'selected' : '' }}>Aktif</option>
                                <option value="0" {{ !$user->is_active ? 'selected' : '' }}>Nonaktif</option>
                            </select>
                        </div>

                        {{-- Marketing fields --}}
                        @if($user->unit_type === 'marketing')
                        <div class="col-12">
                            <div class="p-3 rounded-3" style="background:#eff6ff;border:1.5px solid #bfdbfe">
                                <h6 class="fw-bold mb-3" style="color:#1d4ed8;font-size:13px">
                                    <i class="bi bi-geo-alt-fill"></i> Data Consumer Insight
                                </h6>
                                <div class="row g-2">
                                    {{-- Area Office --}}
                                    <div class="col-md-6">
                                        <label class="form-label fw-medium small">
                                            Area Office <span class="text-danger">*</span>
                                        </label>
                                        <select name="area_office" id="areaOfficeSelect"
                                            class="form-select form-select-sm @error('area_office') is-invalid @enderror">
                                            <option value="">-- Pilih Area Office --</option>
                                            @foreach($areaOffices as $office)
                                            <option value="{{ $office->name }}"
                                                data-id="{{ $office->id }}"
                                                {{ old('area_office', $user->area_office) === $office->name ? 'selected' : '' }}>
                                                {{ $office->name }}
                                            </option>
                                            @endforeach
                                        </select>
                                        @error('area_office')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>

                                    {{-- Area Promotion (hanya spv/spg) --}}
                                    <div class="col-md-6" id="areaPromotionSection"
                                        style="{{ in_array($user->role, ['spv','spg']) ? '' : 'display:none' }}">
                                        <label class="form-label fw-medium small">
                                            Area Promotion
                                            <span class="text-danger" id="apRequired">
                                                {{ in_array($user->role, ['spv','spg']) ? '*' : '' }}
                                            </span>
                                        </label>
                                        <select name="area_promotion" id="areaPromotionSelect"
                                            class="form-select form-select-sm @error('area_promotion') is-invalid @enderror"
                                            {{ in_array($user->role, ['spv','spg']) ? 'required' : '' }} disabled>
                                            <option value="">-- Pilih Area Office dulu --</option>
                                        </select>
                                        @error('area_promotion')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Divisi fields --}}
                        @else
                        <div class="col-12">
                            <div class="p-3 rounded-3" style="background:#f0fdf4;border:1.5px solid #bbf7d0">
                                <h6 class="fw-bold mb-3" style="color:#166534;font-size:13px">
                                    <i class="bi bi-building"></i> Data Divisi
                                </h6>
                                <div class="col-12">
                                    <label class="form-label fw-medium small">Nama Divisi</label>
                                    <select name="division" class="form-select form-select-sm">
                                        <option value="">-- Pilih Divisi --</option>
                                        @foreach($divisis as $divisi)
                                        <option value="{{ $divisi->code }}"
                                            {{ old('division', $user->division) === $divisi->code ? 'selected' : '' }}>
                                            {{ $divisi->name }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        @endif

                        {{-- Tombol --}}
                        <div class="col-12 d-flex gap-2 justify-content-end">
                            <a href="{{ route('users.index') }}" class="btn btn-outline-secondary">Batal</a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-lg"></i> Update User
                            </button>
                        </div>

                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
const oldAreaPromotion = "{{ old('area_promotion', $user->area_promotion) }}";

function toggleAreaPromotion(role) {
    const section = document.getElementById('areaPromotionSection');
    if (!section) return;
    const isSpgSpv = ['spg', 'spv'].includes(role);
    section.style.display = isSpgSpv ? '' : 'none';
    const sel = section.querySelector('select');
    if (sel) sel.required = isSpgSpv;
    const req = document.getElementById('apRequired');
    if (req) req.textContent = isSpgSpv ? '*' : '';
}

function syncJabatan(role) {
    const j = document.getElementById('jabatanInput');
    if (j) j.value = role;
}

async function loadAreaPromotion(officeId, oldVal = null) {
    const select = document.getElementById('areaPromotionSelect');
    if (!officeId) {
        select.innerHTML = '<option value="">-- Pilih Area Office dulu --</option>';
        select.disabled = true;
        return;
    }
    select.innerHTML = '<option value="">Memuat...</option>';
    select.disabled = true;
    try {
        const res  = await fetch(`/api/master/promotions/${officeId}`);
        const data = await res.json();
        select.innerHTML = '<option value="">-- Pilih Area Promotion --</option>';
        data.forEach(sp => {
            const opt = document.createElement('option');
            opt.value = sp.name;
            opt.textContent = sp.name;
            if (oldVal && sp.name === oldVal) opt.selected = true;
            select.appendChild(opt);
        });
        select.disabled = false;
    } catch (e) {
        select.innerHTML = '<option value="">Gagal memuat data</option>';
    }
}

document.getElementById('areaOfficeSelect')?.addEventListener('change', function () {
    const id = this.options[this.selectedIndex]?.dataset?.id;
    loadAreaPromotion(id);
});

document.addEventListener('DOMContentLoaded', () => {
    const oldRole = document.getElementById('roleSelect')?.value;
    if (oldRole) { syncJabatan(oldRole); toggleAreaPromotion(oldRole); }

    const officeEl = document.getElementById('areaOfficeSelect');
    const oldId    = officeEl?.options[officeEl?.selectedIndex]?.dataset?.id;
    if (oldId) loadAreaPromotion(oldId, oldAreaPromotion);
});
</script>
@endpush