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

@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="card">

            <div class="card-header border-bottom">
                <h5 class="card-title mb-0">
                    <span class="fw-normal">Edit Pengguna</span>
                </h5>
            </div>

            <div class="card-body">
                <div class="offcanvas-body mx-0 flex-grow-0 h-100 mt-2">

                    @if ($errors->any())
                        <div class="alert alert-danger alert-dismissible" role="alert">
                            <h4 class="alert-heading d-flex align-items-center">
                                <span class="alert-icon rounded">
                                    <i class="ri-error-warning-line ri-22px"></i>
                                </span>
                                Ada kesalahan!
                            </h4>
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    <form class="edit-user pt-0" id="editUserForm" method="POST" onsubmit="return false"
                        action="{{ route('users.update', $user->id) }}">
                        @csrf
                        @method('PUT')

                        <div class="form-floating form-floating-outline mb-5 mt-2">
                            <input type="text"
                                class="form-control @error('name')
                                is-invalid
                            @enderror"
                                id="edit-user-name" placeholder="John Doe" name="name" aria-label="John Doe"
                                value="{{ old('name', $user->name) }}" />
                            <label for="edit-user-name">Nama</label>

                            @error('name')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-floating form-floating-outline mb-5">
                            <input type="text" id="edit-user-email"
                                class="form-control @error('email')
                                is-invalid
                            @enderror"
                                placeholder="john.doe@example.com" aria-label="john.doe@example.com" name="email"
                                value="{{ old('email', $user->email) }}" />
                            <label for="edit-user-email">Email</label>

                            @error('email')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-floating form-floating-outline mb-5">
                            <select id="user-role"
                                class="form-select @error('role_id')
                                is-invalid
                            @enderror"
                                name="role_id">
                                <option value="">Pilih Peran</option>
                                @foreach ($roles as $role)
                                    <option value="{{ $role->id }}" @if (old('role_id', $user->role_id) == $role->id) selected @endif data-role-name="{{ strtolower($role->name) }}">
                                        {{ $role->name }}</option>
                                @endforeach
                            </select>
                            <label for="user-role">Peran Pengguna</label>

                            @error('role_id')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div id="nip-field" class="form-floating form-floating-outline mb-5 d-none">
                            <input type="text" id="add-user-nip" class="form-control" placeholder="123456789"
                                name="nip" value="{{ old('nip',$user->nip) }}"/>
                            <label for="add-user-nip">NIP</label>
                        </div>

                        <div class="form-floating form-floating-outline mb-5">
                            <input type="password" id="edit-user-password"
                                class="form-control @error('password')
                                is-invalid
                            @enderror"
                                placeholder="{!! passwordPlainText() !!}" aria-label="{!! passwordPlainText() !!}" name="password"
                                value="" />
                            <label for="edit-user-password">Kata Sandi</label>

                            @error('password')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-floating form-floating-outline mb-5">
                            <input type="password" id="edit-user-password-confirm"
                                class="form-control @error('password_confirmation')
                                is-invalid
                            @enderror"
                                placeholder="{!! passwordPlainText() !!}" aria-label="{!! passwordPlainText() !!}"
                                name="password_confirmation" />
                            <label for="edit-user-password-confirm">Konfirmasi kata sandi</label>

                            @error('password_confirmation')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <button type="submit" class="btn btn-primary me-sm-3 me-1 data-submit">Simpan</button>
                        <a href="{{ route('users.index') }}" class="btn btn-outline-secondary">Batal</a>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function () {
    const validateForm = (formSelector, fieldsConfig) => {
        const formElement = document.querySelector(formSelector);
        if (!formElement) return;

        FormValidation.formValidation(formElement, {
            fields: fieldsConfig,
            plugins: {
                trigger: new FormValidation.plugins.Trigger(),
                bootstrap5: new FormValidation.plugins.Bootstrap5({
                    eleValidClass: "",
                    rowSelector: ".form-floating", // Ensures proper positioning of validation messages
                }),
                submitButton: new FormValidation.plugins.SubmitButton(),
                autoFocus: new FormValidation.plugins.AutoFocus(),
            },
            init: (instance) => {
                instance.on("plugins.message.placed", function (e) {
                    if (
                        e.element.parentElement.classList.contains(
                            "input-group"
                        )
                    ) {
                        e.element.parentElement.insertAdjacentElement(
                            "afterend",
                            e.messageElement
                        );
                    }
                });

                instance.on("core.element.validated", function (e) {
                    if (e.valid) {
                        e.element.classList.add("is-valid");
                    } else {
                        e.element.classList.remove("is-valid");
                    }
                });

                instance.on("core.form.valid", function () {
                    formElement.submit();
                });
            },
        });
    };

    validateForm("#editUserForm", {
        name: {
            validators: {
                notEmpty: {
                    message: "Masukkan nama pengguna",
                },
                stringLength: {
                    min: 2,
                    message: "Nama pengguna minimal 2 karakter",
                },
            },
        },
        email: {
            validators: {
                notEmpty: {
                    message: "Masukkan alamat email",
                },
                emailAddress: {
                    message: "Masukkan alamat email yang valid",
                },
            },
        },
        role_id: {
            validators: {
                notEmpty: {
                    message: "Pilih peran pengguna",
                },
            },
        },
        password: {
            validators: {
                stringLength: {
                    min: 8,
                    message: "Password minimal 8 karakter",
                },
            },
        },
        password_confirmation: {
            validators: {
                callback: {
                    message: "Konfirmasi password diperlukan",
                    callback: function (value, validator, $field) {
                        const passwordValue = document.querySelector(
                            '#editUserForm [name="password"]'
                        ).value;
                        if (passwordValue === "") {
                            return true; // If password is empty, confirmation is not required
                        }
                        return value.length > 0; // If password is not empty, confirmation is required
                    },
                },
                identical: {
                    compare: function () {
                        return document.querySelector(
                            '#editUserForm [name="password"]'
                        ).value;
                    },
                    message: "Password dan konfirmasi password tidak cocok",
                },
            },
        },
    });
});

document.addEventListener("DOMContentLoaded", function () {
    const roleSelect = document.getElementById("user-role");
    const nipField = document.getElementById("nip-field");
    const nipInput = nipField.querySelector("input");

    function toggleNipField(roleName) {
        const isRequireNip = ["dosen", "aslab"].includes(roleName);

        if (isRequireNip) {
            nipField.classList.remove("d-none");
            nipInput.setAttribute("required", true);
        } else {
            nipField.classList.add("d-none");
            nipInput.removeAttribute("required");
            nipInput.value = "";
        }
    }

    // Trigger saat form pertama kali dibuka (misal di edit mode)
    const initialRole = roleSelect.options[roleSelect.selectedIndex]?.getAttribute("data-role-name");
    toggleNipField(initialRole);

    // Trigger saat user memilih role
    roleSelect.addEventListener("change", function () {
        const selectedRole = this.options[this.selectedIndex].getAttribute("data-role-name");
        toggleNipField(selectedRole);
    });
});

    </script>
@endpush