@extends('layouts.app')
@section('title', 'Tambah Pengguna')
@section('content')

@php $viewer = auth()->user(); @endphp

<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">Tambah Pengguna Baru</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.store') }}">
                    @csrf
                    <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') }}" placeholder="Nama lengkap">
                            @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') }}"
                                placeholder="8 digit angka" 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') }}" placeholder="email@example.com">
                            @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        {{-- Role — opsi berdasarkan siapa yang login --}}
                        <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)">
                                <option value="">-- Pilih Role --</option>
                                @foreach($availableRoles as $roleValue => $roleLabel)
                                <option value="{{ $roleValue }}"
                                    {{ old('role') === $roleValue ? 'selected' : '' }}>
                                    {{ $roleLabel }}
                                </option>
                                @endforeach
                            </select>
                            @error('role')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

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

                        {{-- Password --}}
                        <div class="col-md-6">
                            <label class="form-label fw-medium">
                                Password <span class="text-danger">*</span>
                            </label>
                            <input type="password" name="password"
                                class="form-control @error('password') is-invalid @enderror"
                                placeholder="Minimal 6 karakter">
                            @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </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') }}" placeholder="08xxx">
                        </div>

                        {{-- Unit Type --}}
                        {{-- marketing_admin: dikunci ke marketing, tidak bisa pilih divisi --}}
                        <div class="col-md-6">
                            <label class="form-label fw-medium">
                                Unit Type <span class="text-danger">*</span>
                            </label>

                            @if($viewer->isMarketingAdmin())
                                {{-- marketing_admin: hanya marketing, tidak ada pilihan divisi --}}
                                <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 style="font-size:1.3rem">🪪</div>
                                    <div class="fw-semibold small text-primary">Consumer Insight</div>
                                    <small class="text-muted" style="font-size:10px">
                                        Hanya dapat membuat user Consumer Insight
                                    </small>
                                </div>
                            @else
                                {{-- super_admin: bisa pilih marketing atau divisi --}}
                                <div class="d-flex gap-2">
                                    <label class="unit-type-card flex-grow-1 p-2 border rounded-3 text-center"
                                        style="cursor:pointer;transition:all .2s">
                                        <input type="radio" name="unit_type" value="marketing"
                                            class="d-none unit-type-radio"
                                            {{ old('unit_type', 'marketing') === 'marketing' ? 'checked' : '' }}>
                                        <div style="font-size:1.3rem">🪪</div>
                                        <div class="fw-semibold small">Consumer Insight</div>
                                    </label>
                                    <label class="unit-type-card flex-grow-1 p-2 border rounded-3 text-center"
                                        style="cursor:pointer;transition:all .2s">
                                        <input type="radio" name="unit_type" value="divisi"
                                            class="d-none unit-type-radio"
                                            {{ old('unit_type') === 'divisi' ? 'checked' : '' }}>
                                        <div style="font-size:1.3rem">🏢</div>
                                        <div class="fw-semibold small">Divisi</div>
                                    </label>
                                </div>
                            @endif

                            @error('unit_type')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Section Marketing --}}
                        <div id="marketingSection" class="col-12"
                            style="{{ $viewer->isMarketingAdmin() ? 'display:block' : 'display:none' }}">
                            <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">
                                    <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 @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') === $office->name ? 'selected' : '' }}>
                                                {{ $office->name }}
                                            </option>
                                            @endforeach
                                        </select>
                                        @error('area_office')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label fw-medium small">
                                            Area Promotion <span class="text-danger">*</span>
                                        </label>
                                        <select name="area_promotion" id="areaPromotionSelect"
                                            class="form-select @error('area_promotion') is-invalid @enderror"
                                            disabled>
                                            <option value="">-- Pilih Area Office dulu --</option>
                                        </select>
                                        @error('area_promotion')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Section Divisi — hanya tampil untuk super_admin --}}
                        @if($viewer->isSuperAdmin())
                        <div id="divisiSection" class="col-12" style="display:none">
                            <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 <span class="text-danger">*</span>
                                    </label>
                                    <select name="division"
                                        class="form-select @error('division') is-invalid @enderror">
                                        <option value="">-- Pilih Divisi --</option>
                                        @foreach($divisis as $divisi)
                                        <option value="{{ $divisi->code }}"
                                            {{ old('division') === $divisi->code ? 'selected' : '' }}>
                                            {{ $divisi->name }}
                                        </option>
                                        @endforeach
                                    </select>
                                    @error('division')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                        </div>
                        @endif

                        {{-- Buttons --}}
                        <div class="col-12 d-flex gap-2 justify-content-end mt-2">
                            <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> Simpan User
                            </button>
                        </div>

                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
const oldAreaPromotion = "{{ old('area_promotion') }}";
const isMarketingAdmin = {{ auth()->user()->isMarketingAdmin() ? 'true' : 'false' }};

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>';
        if (data.length === 0) {
            select.innerHTML = '<option value="">Belum ada SP untuk area ini</option>';
            return;
        }
        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>';
    }
}

function toggleUnitType(value) {
    const marketingSection = document.getElementById('marketingSection');
    const divisiSection    = document.getElementById('divisiSection');
    const areaOffice       = document.getElementById('areaOfficeSelect');
    const division         = document.querySelector('[name="division"]');
    const areaPromotion    = document.getElementById('areaPromotionSelect');

    if (value === 'marketing') {
        if (marketingSection) marketingSection.style.display = 'block';
        if (divisiSection)    divisiSection.style.display    = 'none';
        if (areaOffice)       areaOffice.required            = true;
        if (areaPromotion)    areaPromotion.required         = true;
        if (division)         division.required              = false;
    } else if (value === 'divisi') {
        if (marketingSection) marketingSection.style.display = 'none';
        if (divisiSection)    divisiSection.style.display    = 'block';
        if (areaOffice)       areaOffice.required            = false;
        if (areaPromotion)    areaPromotion.required         = false;
        if (division)         division.required              = true;
    }
}

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

// Event: Unit Type Radio (hanya untuk super_admin)
document.querySelectorAll('.unit-type-radio').forEach(radio => {
    radio.addEventListener('change', () => {
        document.querySelectorAll('.unit-type-card').forEach(card => {
            card.style.background  = '';
            card.style.borderColor = '';
        });
        const card = radio.closest('.unit-type-card');
        if (radio.value === 'marketing') {
            card.style.background  = '#dbeafe';
            card.style.borderColor = '#3b82f6';
        } else {
            card.style.background  = '#dcfce7';
            card.style.borderColor = '#22c55e';
        }
        toggleUnitType(radio.value);
    });
    if (radio.checked) radio.dispatchEvent(new Event('change'));
});

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

function toggleAreaPromotion(role) {
    const section = document.getElementById('areaPromotionSection');
    if (!section) return;
    if (role === 'manager') {
        section.style.display = 'none';
        const sel = section.querySelector('select, input');
        if (sel) sel.required = false;
    } else {
        section.style.display = '';
        const sel = section.querySelector('select, input');
        if (sel) sel.required = true;
    }
}

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

    // marketing_admin: langsung load area promotion jika ada area office terpilih
    if (isMarketingAdmin) {
        const officeEl = document.getElementById('areaOfficeSelect');
        const oldId    = officeEl?.options[officeEl?.selectedIndex]?.dataset?.id;
        if (oldId) loadAreaPromotion(oldId, oldAreaPromotion);
        // Set required
        const areaOffice    = document.getElementById('areaOfficeSelect');
        const areaPromotion = document.getElementById('areaPromotionSelect');
        if (areaOffice)    areaOffice.required    = true;
        if (areaPromotion) areaPromotion.required = true;
    } else {
        // super_admin: restore old unit_type
        const officeEl = document.getElementById('areaOfficeSelect');
        const oldId    = officeEl?.options[officeEl?.selectedIndex]?.dataset?.id;
        if (oldId) loadAreaPromotion(oldId, oldAreaPromotion);
    }
});
</script>
@endpush