@extends ('layouts.app', ['title' => 'Edit User'])

@section ('content')
    <div class="mb-4 flex items-center justify-between">
        <div class="text-xl font-bold">Edit Akun</div>
        <a
            href="{{ route('admin.users.index') }}"
            class="rounded-lg px-3 py-2 text-sm font-semibold hover:bg-slate-100 dark:hover:bg-slate-900"
            >Kembali</a
        >
    </div>
    {{-- ERROR VALIDATION --}}
@if($errors->any())

<div class="mb-4 rounded-xl bg-red-100 border border-red-300 p-4 text-red-700">

    <div class="font-bold mb-2">
        Terjadi kesalahan:
    </div>

    <ul class="list-disc ml-5">

        @foreach($errors->all() as $error)

            <li>{{ $error }}</li>

        @endforeach

    </ul>

</div>
@endif
    <form
        method="POST"
        action="{{ route('admin.users.update', $item->id) }}"
        class="max-w-xl space-y-4 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-950"
    >
        @csrf
        @method ('PUT')

        <div>
            <label class="mb-1 block text-sm font-medium">Username</label>
            <input
                name="username"
                value="{{ old('username', $item->username) }}"
                class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 focus:border-blue-500 focus:outline-none dark:border-slate-800 dark:bg-slate-950"
            />
            @error ('username')
                <div class="mt-1 text-sm text-red-600">{{ $message }}</div>
            @enderror
        </div>

        <div>
            <label class="mb-1 block text-sm font-medium"
                >Password (opsional)</label
            >
            <input
                type="password"
                name="password"
                placeholder="Kosongkan jika tidak ingin diubah"
                class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 focus:border-blue-500 focus:outline-none dark:border-slate-800 dark:bg-slate-950"
            />
            @error ('password')
                <div class="mt-1 text-sm text-red-600">{{ $message }}</div>
            @enderror
        </div>

        {{-- Input Role dengan ID untuk JavaScript --}}
       <div>
    <label class="mb-1 block text-sm font-medium">
        Role
    </label>

    <select
        name="roles[]"
        id="role-select"
        multiple
        class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 focus:border-blue-500 focus:outline-none dark:border-slate-800 dark:bg-slate-950 min-h-[180px]"
    >

        @foreach ($roles as $r)

            <option
                value="{{ $r }}"
                @selected(in_array(
                    $r,
                    old('roles', $item->roles ?? [])
                ))
            >

                {{ Str::headline($r) }}

            </option>

        @endforeach

    </select>

    <p class="mt-2 text-xs text-slate-500">
        Tekan CTRL + Klik untuk memilih lebih dari satu role.
    </p>

    @error('roles')
        <div class="mt-1 text-sm text-red-600">
            {{ $message }}
        </div>
    @enderror
</div>

        {{-- Dropdown Kelas Binaan (Hidden secara default, disinkronkan via JS) --}}
        <div id="kelas-container" class="hidden">
            <label class="mb-1 block text-sm font-medium"
                >Pilih Kelas Binaannya</label
            >
            <select
                name="kelas_id"
                class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 focus:border-blue-500 focus:outline-none dark:border-slate-800 dark:bg-slate-950"
            >
                <option value="">-- Pilih Kelas --</option>
                @foreach ($kelas as $k)
                    <option
                        value="{{ $k->kelas_id }}"
                        @selected (old('kelas_id', $item->kelas_id) == $k->kelas_id)
                    >
                        {{ $k->nama_kelas }}
                    </option>
                @endforeach
            </select>
            @error ('kelas_id')
                <div class="mt-1 text-sm text-red-600">{{ $message }}</div>
            @enderror
        </div>

        <div>
            <label class="mb-1 block text-sm font-medium">Status</label>
            <select
                name="status"
                class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 focus:border-blue-500 focus:outline-none dark:border-slate-800 dark:bg-slate-950"
            >
                @foreach (['aktif','nonaktif'] as $s)
                    <option
                        value="{{ $s }}"
                        @selected (old('status', $item->status) === $s)
                        >{{ $s }}
                    </option>
                @endforeach
            </select>
            @error ('status')
                <div class="mt-1 text-sm text-red-600">{{ $message }}</div>
            @enderror
        </div>

        <button
            class="w-full rounded-xl bg-blue-600 px-4 py-3 font-semibold text-white hover:bg-blue-700 transition-colors"
        >
            Update Akun
        </button>
    </form>
  <script>

document.addEventListener("DOMContentLoaded", function () {

    const roleSelect =
        document.getElementById("role-select");

    const kelasContainer =
        document.getElementById("kelas-container");

    function toggleKelasInput() {

        const selectedRoles =
            Array.from(
                roleSelect.selectedOptions
            ).map(
                option => option.value
            );

        if (
            selectedRoles.includes(
                "wali_kelas"
            )
        ) {

            kelasContainer.classList.remove(
                "hidden"
            );

        } else {

            kelasContainer.classList.add(
                "hidden"
            );

        }

    }

    toggleKelasInput();

    roleSelect.addEventListener(
        "change",
        toggleKelasInput
    );

});

</script>

@endsection