@extends('layouts.app')

@section('tajuk', 'Daftar Pengguna Baharu')
@section('saiz-container', 'container-kecil')

@section('kandungan')
    <div class="kad">
        <h1>Daftar Pengguna Baharu</h1>
        <p class="teks-kecil">Admin DUN perlu ditetapkan kepada satu DUN. Superadmin boleh urus pengguna dan lihat semua DUN.</p>

        @if ($errors->any())
            <div class="makluman makluman-ralat">{{ $errors->first() }}</div>
        @endif

        <form method="POST" action="{{ route('pengguna.store') }}">
            @csrf
            <label for="name">Nama</label>
            <input type="text" id="name" name="name" value="{{ old('name') }}" required autofocus>

            <label for="email">E-mel</label>
            <input type="email" id="email" name="email" value="{{ old('email') }}" required>

            <label for="role">Peranan</label>
            <select id="role" name="role" required>
                <option value="">— Pilih Peranan —</option>
                @foreach ($peranan as $kod)
                    <option value="{{ $kod }}" @selected(old('role') === $kod)>
                        {{ match ($kod) {
                            'superadmin' => 'Superadmin',
                            'admin' => 'Admin DUN',
                            default => $kod,
                        } }}
                    </option>
                @endforeach
            </select>

            <div id="baris-dun">
                <label for="dun_id">DUN</label>
                <select id="dun_id" name="dun_id">
                    <option value="">— Pilih DUN —</option>
                    @foreach ($senaraiDun as $dun)
                        <option value="{{ $dun->id }}" @selected(old('dun_id') == $dun->id)>
                            {{ $dun->code }} — {{ $dun->nama }}
                        </option>
                    @endforeach
                </select>
            </div>

            <label for="password">Kata Laluan</label>
            <input type="password" id="password" name="password" required minlength="8">

            <label for="password_confirmation">Sahkan Kata Laluan</label>
            <input type="password" id="password_confirmation" name="password_confirmation" required minlength="8">

            <button type="submit" class="btn btn-penuh">Daftar Pengguna</button>
        </form>
    </div>

    <script>
        (function () {
            var role = document.getElementById('role');
            var barisDun = document.getElementById('baris-dun');
            var dunSelect = document.getElementById('dun_id');

            function kemaskini() {
                var perluDun = role.value === 'admin';
                barisDun.style.display = perluDun ? '' : 'none';
                dunSelect.required = perluDun;
            }

            role.addEventListener('change', kemaskini);
            kemaskini();
        })();
    </script>
@endsection