@extends('layouts.app')

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

@section('kandungan')
    <div class="kad">
        <h1>Daftar Pengguna Baharu</h1>
        @unless (auth()->user()->isAdmin())
            <p class="teks-kecil">Pengguna yang didaftarkan akan ditetapkan untuk DUN anda sendiri.</p>
        @endunless

        @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) {
                            'admin' => 'Admin',
                            'pengurus' => 'Pengurus DUN',
                            'kaunter' => 'Kaunter',
                            default => $kod,
                        } }}
                    </option>
                @endforeach
            </select>

            @if (auth()->user()->isAdmin())
                <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>
            @endif

            <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>

    @if (auth()->user()->isAdmin())
        <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 !== '' && role.value !== 'admin';
                    barisDun.style.display = perluDun ? '' : 'none';
                    dunSelect.required = perluDun;
                }

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