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

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

            <div class="card-header border-bottom">
                <div class="d-flex justify-content-between align-items-center row gx-5 pt-4 gap-5 gap-md-0">
                    <div class="col-md-4 user_role">
                        <select id="user-role-filter" class="form-select" data-filter="role" name="role_filter">
                            <option value="">Pilih Peran</option>
                            @foreach ($roles as $role)
                                <option value="{{ $role->id }}">{{ $role->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <div class="card-datatable table-responsive">
                {{ $dataTable->table(['class' => 'datatables-permissions table']) }}
            </div>

            <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasAddUser"
                aria-labelledby="offcanvasAddUserLabel">
                <div class="offcanvas-header border-bottom">
                    <h5 id="offcanvasAddUserLabel" class="offcanvas-title">Tambah Pengguna</h5>
                    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                        aria-label="Close"></button>
                </div>

                <div class="offcanvas-body mx-0 flex-grow-0 h-100">
                    <form class="add-new-user pt-0" id="addNewUserForm" method="POST" action="{{ route('users.store') }}">
                        @csrf

                        <div class="form-floating form-floating-outline mb-5">
                            <input type="text" class="form-control" id="add-user-name" placeholder="John Doe"
                                name="name" />
                            <label for="add-user-name">Nama</label>
                        </div>

                        <div class="form-floating form-floating-outline mb-5">
                            <input type="text" id="add-user-email" class="form-control"
                                placeholder="john.doe@example.com" name="email" />
                            <label for="add-user-email">Email</label>
                        </div>

                        <div class="form-floating form-floating-outline mb-5">
                            <select id="user-role" class="form-select" name="role_id">
                                <option value="">Pilih Peran</option>
                                @foreach ($roles as $role)
                                    <option value="{{ $role->id }}" data-role-name="{{ strtolower($role->name) }}">
                                        {{ $role->name }}</option>
                                @endforeach
                            </select>
                            <label for="user-role">Peran Pengguna</label>
                        </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" />
                            <label for="add-user-nip">NIP</label>
                        </div>

                        <div class="form-floating form-floating-outline mb-5">
                            <input type="password" id="add-user-password" class="form-control" name="password"
                                placeholder="{!! passwordPlainText() !!}" />
                            <label for="add-user-password">Kata Sandi</label>
                        </div>

                        <div class="form-floating form-floating-outline mb-5">
                            <input type="password" id="add-user-password-confirm" class="form-control"
                                name="password_confirmation" placeholder="{!! passwordPlainText() !!}" />
                            <label for="add-user-password-confirm">Konfirmasi Kata Sandi</label>
                        </div>

                        <button type="submit" class="btn btn-primary me-sm-3 me-1 data-submit">Simpan</button>
                        <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="offcanvas">Batal</button>
                    </form>
                </div>
            </div>

        </div>
    </div>
@endsection

@push('scripts')
    {{ $dataTable->scripts() }}

    <script>
        var urlDeleteUser = "{{ route('users.destroy', ':id') }}";
    </script>
    
    <script>
        document.addEventListener("DOMContentLoaded", () => {
    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",
                }),
                submitButton: new FormValidation.plugins.SubmitButton(),
                autoFocus: new FormValidation.plugins.AutoFocus(),
            },
            init: (instance) => {
                instance.on("plugins.message.placed", (e) => {
                    if (
                        e.element.parentElement.classList.contains(
                            "input-group"
                        )
                    ) {
                        e.element.parentElement.insertAdjacentElement(
                            "afterend",
                            e.messageElement
                        );
                    }
                });

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

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

    // Form validation configuration
    validateForm("#addNewUserForm", {
        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: "Alamat email tidak valid",
                },
            },
        },
        role_id: {
            validators: {
                notEmpty: {
                    message: "Pilih peran pengguna",
                },
            },
        },
        password: {
            validators: {
                stringLength: {
                    min: 8,
                    message: "Kata sandi minimal 8 karakter",
                },
                notEmpty: {
                    message: "Masukkan kata sandi",
                },
            },
        },
        password_confirmation: {
            validators: {
                identical: {
                    compare: () =>
                        document.querySelector(
                            '#addNewUserForm [name="password"]'
                        ).value,
                    message: "Kata sandi tidak cocok",
                },
                notEmpty: {
                    message: "Masukkan konfirmasi kata sandi",
                },
            },
        },
    });

    // Function to handle delete record confirmation
    const handleDeleteRecord = (e) => {
        const target = e.target.closest(".delete-record");
        if (!target) return;

        e.preventDefault();

        const recordId = target.getAttribute("data-id");
        if (!recordId) {
            console.error("Record ID not found.");
            return;
        }

        const form = document.createElement("form");
        form.method = "POST";
        form.action = urlDeleteUser.replace(":id", recordId);
        form.style.display = "none";

        const csrfToken = document.querySelector('meta[name="csrf-token"]');
        if (csrfToken) {
            const csrfInput = document.createElement("input");
            csrfInput.type = "hidden";
            csrfInput.name = "_token";
            csrfInput.value = csrfToken.getAttribute("content");
            form.appendChild(csrfInput);
        }

        const methodInput = document.createElement("input");
        methodInput.type = "hidden";
        methodInput.name = "_method";
        methodInput.value = "DELETE";
        form.appendChild(methodInput);

        document.body.appendChild(form);

        Swal.fire({
            title: "Are you sure?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Yes, delete it!",
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            } else {
                form.remove();
            }
        });
    };

    // Attach event listener for delete record
    document.addEventListener("click", handleDeleteRecord);

    // Initialize DataTables and setup filters
    $(document).ready(() => {
        const table = $("#users-table").DataTable();

        $("select[name=role_filter]").on("change", () => {
            table.draw();
        });
    });
});

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");
        }
    }

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