@push('styles')
    <link rel="stylesheet" href="{{ auto_asset("assets/vendor/jstree-3.3.17/dist/themes/default/style.min.css")}}">
    <style>
        #modal_add_user {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            background-color: white;
            overflow: hidden;
        }


        #modal_add_user .modal-background {
            background-color: white;
            pointer-events: none;
        }

        .modal-card-foot {
            padding: 16px;
            border-top: 1px solid #ddd;
            display: flex;
            justify-content: center;
            background-color: #f9f9f9;
        }

        .top-left-close {
            position: absolute;
            top: 16px;
            left: 16px;
            background: none;
            border: none;
            cursor: pointer;
            z-index: 10;
        }

        .top-left-close svg {
            width: 24px;
            height: 24px;
            stroke: #000;
        }
        .modal.is-big .modal-content {
            max-width: 100%;
            padding-left: 40px;
            padding-right: 0px;
        }
        .remove-input-behaviour {
            border: none;
            margin-left:0;
            padding-left:0;
            pointer-events: none;
            font-weight: 600;
        }
        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            color: #000;
            background-color: #e4e4e4;
          }

          .select2-container--default .select2-results__option {
            color: #000;
          }

          .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
            color: #000;
          }

          .select2-container--default .select2-selection--single .select2-selection__arrow {
            display: none;
          }

          a.jstree-anchor.jstree-clicked {
        background: #ebebeb;
    }

        .dropdown-tree {
            position: relative;
        }

        .dropdown-tree input {
            width: 100%;
            padding: 0.5rem;
            cursor: pointer;
            border: 1px solid #ccc;
            border-radius: 6px;
            background: #fff;
        }

        .dropdown-content2 {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            max-height: 300px;
            overflow-y: auto;
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            display: none;
            z-index: 1000;
        }

        .dropdown-tree.open .dropdown-content2 {
            display: block;
        }
    </style>
@endpush

<div id="modal_add_user" class="modal h-modal is-big" style="justify-content: unset; padding-top: 20px;">
    <div class="modal-background add-user h-modal-close"></div>
    <div class="modal-content add-user">
        <form id="form_create_user">
            <div class="modal-card add-user">
                <a href="javascript:;" class="h-modal-close top-left-close ml-auto" aria-label="close" style="position: absolute;left: unset;right: 0; margin-top: 10px; margin-right: 20px;" onclick="closeModal()">
                    @include('components.icons.close')
                </a>
                <div class="modal-card-body add-user" style="padding-bottom: 300px;">
                    <div class="fs-28 fw-700">@lang('app.create_user')</div>
                    <div class="fs-14 fw-500 text-grey m-b-10">@lang('app.subtitle_create_user')</div>
                    <div class="inner-content">
                        <div class="modal-form">
                            <div class="columns is-multiline" style="padding-right:40px;">
                                <div class="column is-12" id="column_role">
                                <div class="title is-5 is-narrow text-grey m-b-10">@lang('app.select_role')</div>
                                    @include('components.input.form-select', [
                                        'label' => __(''),
                                        'arr_type' => 'assoc',
                                        'name' => 'role',
                                        'options' => $roles,
                                        'mandatory' => false,
                                        'placeholder' => __('app.select_role'),
                                    ])

                                    <!-- this is for Location -->
                                    <div id="column_location" style="margin-top: 20px;">
                                        {{-- <div class="select is-fullwidth"> 
                                            <div class="title is-5 is-narrow text-grey m-b-10">Location</div>
                                            <select id="location_id" name="location_id" class="select2me">
                                                <option value="" disabled selected>-- Select One --</option>

                                                @php
                                                    $sqlLocation = DB::table('locations')
                                                        ->where(function ($q) {
                                                            $q->where('parent_id', '=', '')
                                                              ->orWhereNull('parent_id');
                                                        })
                                                        ->get();

                                                    $sqlLocation2 = DB::table('locations')
                                                        ->whereNull('parent_id')
                                                        ->whereNull('dokter_id')
                                                        ->get();

                                                @endphp
                                                <optgroup label="-- LEVEL 1 --">
                                                    @foreach ($sqlLocation2 as $itemLocation2)
                                                        <option value="{{ $itemLocation2->id }}">{{ $itemLocation2->name }}</option>
                                                    @endforeach
                                                </optgroup>
                                                <optgroup label="-- LEVEL 2 --">
                                                    @foreach ($sqlLocation as $itemLocation)
                                                        <optgroup label="{{ $itemLocation->name }}">
                                                            @php
                                                                $sqlLocationDetail = DB::table('locations')->where('parent_id', $itemLocation->id)->get();
                                                            @endphp
                                                            @foreach ($sqlLocationDetail as $itemLocationDetail)
                                                                <option value="{{ $itemLocationDetail->id }}">{{ $itemLocationDetail->name }}</option>
                                                            @endforeach
                                                        </optgroup>
                                                    @endforeach
                                                </optgroup>

                                            </select>
                                        </div> --}}
                                        <div class="control">
                                            <label class="fs-12 fw-400 text-grey" for="location">
                                                {{ __('app.location') }}<sup class="text-danger">*</sup>
                                            </label>
                                            <div class="dropdown-tree" id="treeSelect">
                                                <input type="text" class="input" name="location" id="location" readonly placeholder="Select location..." style="background-color: #fff;" />
                                                <div class="dropdown-content2" id="treeContainer"></div>
                                            </div>
                                            <input type="hidden" name="location_ids" id="location_ids" />
                                        </div>
                                    </div>

                                <div class="is-divider" data-content=""></div>
                                </div>

                                <div class="column is-6">
                                    @include('components.input.form-input', [
                                        'label' => 'Name',
                                        'name' => 'name',
                                        'placeholder' => 'Full Name',
                                        'mandatory' => true,
                                    ])
                                </div>
                                <div class="column is-6">
                                    <div class="control">
                                        <label class="fs-12 fw-400 text-grey" for="email">
                                            @lang('app.email')<sup class="text-danger">*</sup>
                                        </label>
                                        <input type="email" class="input" id="email" name="email"
                                            placeholder="Email" autocomplete="off">
                                    </div>
                                </div>
                                <div class="column is-6">
                                    <div class="control" style="position: relative">
                                        <label class="fs-12 fw-400 text-grey" for="password">
                                            @lang('app.password')<sup class="text-danger">*</sup>
                                        </label>
                                        <input type="password" class="input" id="password" name="password"
                                            placeholder="Password" autocomplete="off" style="padding-right: 40px;">

                                        <i class="fa-regular fa-eye" id="toggleEye"
                                            style="position: absolute; right: 10px; top: 65%; transform: translateY(-50%); cursor: pointer;"
                                            onclick="togglePassword('password','toggleEye')"></i>
                                    </div>
                                </div>
                                <div class="column is-6">
                                    <div class="control" style="position: relative">
                                        <label class="fs-12 fw-400 text-grey" for="password_confirmation">
                                            @lang('app.confirm_password')<sup class="text-danger">*</sup>
                                        </label>

                                        <input type="password" class="input" id="password_confirmation"
                                            name="password_confirmation" placeholder="Confirm Password"
                                            autocomplete="off" style="padding-right: 40px;">

                                        <i class="fa-regular fa-eye" id="toggleEyeConfirm"
                                            style="position: absolute; right: 10px; top: 65%; transform: translateY(-50%); cursor: pointer;"
                                            onclick="togglePassword('password_confirmation','toggleEyeConfirm')"></i>
                                    </div>
                                </div>
                                <div class="column is-6">
                                    @include('components.input.form-input', [
                                        'label' => 'Company',
                                        'name' => 'company',
                                        'placeholder' => 'PetroChina International Jabung Ltd',
                                        'value' => '',
                                        'mandatory' => true,
                                    ])
                                </div>
                                <div class="column is-6" id="column_department">
                                    @include('components.input.form-select', [
                                        'label' => __('app.select_department'),
                                        'arr_type' => 'assoc',
                                        'name' => 'department',
                                        'options' => $departments,
                                        'mandatory' => true,
                                        'placeholder' => __('app.select_department'),
                                    ])
                                </div>
                                <div class="column is-6" id="column_gender">
                                    @php
                                        $gender = ['Male', 'Female'];
                                    @endphp
                                    @include('components.input.form-select', [
                                        'label' => __('app.select_gender'),
                                        'arr_type' => 'linear',
                                        'name' => 'gender',
                                        'options' => $gender,
                                        'mandatory' => true,
                                        'placeholder' => __('app.select_gender'),
                                    ])
                                </div>
                                <div class="column is-6">
                                    @include('components.input.form-select', [
                                        'label' => 'Nationality',
                                        'name' => 'nationality',
                                        'options' => $countries,
                                        'arr_type' => 'assoc',
                                        'value_type' => 'string',
                                        'mandatory' => true,
                                    ])
                                </div>
                                <div class="column is-12">
                                    @include('components.input.form-textarea', [
                                        'label' => 'Address',
                                        'name' => 'address',
                                        'placeholder' => 'Address',
                                        'value' => '',
                                        'mandatory' => false,
                                    ])
                                </div>
                                <!-- this is for contract user - contracts crud -->
                                <div class="column is-12" id="column_contract_user_contracts">
                                </div>

                                <!-- this is for admin contractor - set the contract -->
                                <div class="column is-12" id="column_admin_contractor_contracts">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-card-foot">
                    <a class="button h-button h-modal-close" id="cancel_add_user"  onclick="closeModal()">
                        @lang('app.cancel')
                    </a>
                    <button type="submit" id="btn_submit_create_user" class="button h-button is-warning"
                        form="form_create_user">
                        @lang('app.submit')
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script src="{{ auto_asset("assets/vendor/jstree-3.3.17/dist/jstree.min.js") }}"></script>
    <script>

        function toggleClassOnClick(selector, className = 'is-active') {
            $(selector).on('click', function() {
                $(this).toggleClass(className);
            });
        }

        toggleClassOnClick('#select_role');
        toggleClassOnClick('#select_gender');
        toggleClassOnClick('#select_country');
        toggleClassOnClick('#select_department');

        function submitCreateUser() {
            $('#btn_submit_create_user').removeClass('is-loading')

            $.validator.addMethod("onlyNumbers", function(value, element) {
                return this.optional(element) || /^[0-9]+$/.test(value);
            }, "Contract number must contain only numbers.");

            $.validator.addMethod("onlyLetters", function(value, element) {
                return this.optional(element) || /^[A-Za-z0-9\s,]+$/.test(value);
            }, "Contract name must contain only letters, numbers, and commas.");

            $.validator.addMethod("validDateRange", function(value, element) {
                const datePattern = /^\d{2}\/\d{2}\/\d{4} - \d{2}\/\d{2}\/\d{4}$/;

                if (!datePattern.test(value)) {
                    return false;
                }

                const dates = value.split(" - ");
                const startParts = dates[0].split("/");
                const endParts = dates[1].split("/");

                const startDate = new Date(startParts[2], startParts[1] - 1, startParts[0]);
                const endDate = new Date(endParts[2], endParts[1] - 1, endParts[0]);

                return startDate <= endDate;
            }, "Please enter a valid date range (DD/MM/YYYY - DD/MM/YYYY) with the start date before the end date.");

            $("#form_create_user").validate({
                rules: {
                    name: {
                        required: true
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    password: {
                        required: true
                    },
                    password_confirmation: {
                        required: true,
                        equalTo: "#password"
                    },
                    role: {
                        required: true
                    },
                    "contract_period[]": {
                        required: true,
                        validDateRange: true,
                    },
                    department: {
                        required: true
                    },
                    "contract_name[]": {
                        required: true,
                        onlyLetters: true,
                    },
                    "contract_number[]": {
                        required: true
                    },
                    "contract_departmen[]": {
                        required: true
                    },
                    "contract_user[]": {
                        required: true,
                    },
                    gender: {
                        required: true
                    },
                    nationality: {
                        required: true
                    },
                    username: {
                        required: true
                    }
                },
                messages: {
                    name: {
                        required: "The name field is required."
                    },
                    gender: {
                        required: "Please select the gender"
                    },
                    nationality: {
                        required: "Please select the nationality"
                    },
                    username: {
                        required: "The username field is required.",
                    },
                    position: {
                        required: "The position field is required."
                    },
                    department: {
                        required: "Please select the department."
                    },
                    "contract_period[]": {
                        required: "The work period field is required.",
                        validDateRange: "Invalid format or end date must be after start date."
                    },
                    "contract_number[]": {
                        required: "The contract number field is required.",
                    },
                    "contract_departmen[]": {
                        required: "The departemen field is required.",
                    },
                    "contract_name[]": {
                        required: "The contract name field is required.",
                        onlyLetters: "Contract name must contain only letters."
                    },
                    "contract_user[]": {
                        required: "Please select the contract user."
                    },
                    password: {
                        required: "The password field is required."
                    },
                    password_confirmation: {
                        required: "The password confirmation field is required.",
                        equalTo: "Password confirmation does not match."
                    },
                    role: {
                        required: "Please select the Role"
                    },
                    email: {
                        required: "The email field is required.",
                        email: "Please enter a valid email address."
                    }
                },
                errorClass: 'invalid-feedback help text-danger',
                errorElement: 'div',
                errorPlacement: function(error, element) {
                    if (element.attr("id") === "select_country_box") {
                        error.appendTo("#select_country_error");
                    } else if (element.attr("id") === "select_gender_box") {
                        error.appendTo("#select_gender_error");
                    } else if (element.attr("id") === "select_role_box") {
                        error.appendTo("#select_gender_error");
                    } else {
                        error.insertAfter(element);
                    }
                },
                highlight: function(element) {
                    $(element).addClass('is-danger');
                },
                unhighlight: function(element) {
                    $(element).removeClass('is-danger');
                },
                submitHandler: function(form) {
                    $('#btn_submit_create_user').addClass('is-loading')

                    let formData = new FormData(form);
                    // let obj = {};
                    // formData.forEach((value, key) => {
                    //     obj[key] = value;
                    // });

                    // formData2 = JSON.stringify(obj, null, 2);

                    // alert(formData2);

                    $.ajax({
                        url: urlCreateUser,
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        beforeSend: function() {
                            $("#btn_submit_create_user").prop('disabled', true);
                        },
                        success: function(res) {
                            document.getElementById("form_create_user").reset();
                            if (res.status) {
                                $("#btn_submit_create_user").prop('disabled', false).removeClass(
                                    'is-loading')

                                getDataUser()

                                $('#modal_add_user').removeClass('is-active')

                                const subtitle = res.message?.subtitle ?? null;
                                showNotification('primary', 'Success', res.message.title, subtitle);

                                getTotalRequestApproval()
                            } else {
                                showNotification('danger', 'Failed', res.message);
                            }

                        },
                        error: function(xhr, status, error) {
                            $("#btn_submit_create_user").prop('disabled', false).removeClass(
                                'is-loading')
                            // Handle validation errors (status 422)
                            if (xhr.status === 422) {
                                $('.invalid-feedback').remove();

                                let errors = xhr.responseJSON.errors;

                                for (let field in errors) {
                                    if (errors.hasOwnProperty(field)) {
                                        let errorMessage = errors[field][0];
                                        let fieldElement = $(`[name="${field}"]`);
                                        if (fieldElement.length) {
                                            fieldElement.after(
                                                `<span id="${field}-error"
                                                    class="invalid-feedback text-danger"
                                                    style="position: static; display: block; margin-top: 4px; font-size: 10px; color: #D9292F;">
                                                    ${errorMessage}
                                                </span>`
                                            );
                                        }
                                    }
                                }
                            } else {
                                // get message from responseJSON safely
                                const title = xhr.responseJSON?.message?.title ?? "An unexpected error occurred. Please try again.";
                                const subtitle = xhr.responseJSON?.message?.subtitle ?? null;
                                showNotification('danger', title, subtitle);
                            }
                        }
                    });
                }
            });
        }

        var typingDelay = 2000;
        $('#username').on('keyup', function() {
            $('#username-error').remove();
            const userID = $('#user_id').val();

            clearTimeout(typingTimer);
            const username = $(this).val();

            const params = {
                username: username,
            }

            if (userID !== null) {
                params.user_id = userID
            }

            typingTimer = setTimeout(() => {
                $.ajax({
                    url: urlCheckIdentity,
                    data: params,
                    success: (res) => {
                        if (res.status) {
                            $('#username').after(
                                '<span id="username-error" class="help text-danger">NIK/KITAS is already registered</span>'
                            )
                            $('#modal_alert_username').html(res.html)
                            $("#btn_submit_create_user").removeClass('is-loading').prop(
                                'disabled', true);
                        } else {
                            $('#username-error').remove();
                            $("#btn_submit_create_user").prop('disabled', false);
                        }
                    }
                })
            }, typingDelay);
        });

        $('#email').on('keyup', function() {
            $('#email-error').remove();
            const userID = $('#user_id').val();

            clearTimeout(typingTimer);
            const email = $(this).val();

            if (email == '' || email == null) return

            const params = {
                email: email,
            }

            if (userID !== null) {
                params.user_id = userID
            }

            typingTimer = setTimeout(() => {
                $.ajax({
                    url: urlCheckIdentity,
                    data: params,
                    success: (res) => {
                        if (res.status) {
                            $('#email').after(
                                '<span id="email-error" class="help text-danger">Email is already registered</span>'
                            )
                            $('#modal_alert_email').html(res.html)
                            $("#btn_submit_create_user").removeClass('is-loading').prop(
                                'disabled', true);
                        } else {
                            $('#email-error').remove();
                            $("#btn_submit_create_user").prop('disabled', false);
                        }
                    }
                })
            }, typingDelay);
        });

        $('#nationality').on('change', function() {
            const value = $(this).val()

            if (value == 'Indonesia' || value == '') {
                $('#username').attr('placeholder', 'ID Number (NIK)')
            } else {
                $('#username').attr('placeholder', 'ID Number (KITAS)')
            }
        });

        $(document).ready(function() {
            $("#company").on("blur", function() {
                const role = parseInt($("#role").val());
                const companyName = $(this).val().trim();

                // Only check if role = 3 and input is not empty
                if (role === 3 && companyName !== "") {
                    checkDuplicateCompany(companyName);
                }
            });
        });

        function checkDuplicateCompany(companyName) {
            $('#company-error').remove();
            $.ajax({
                url: urlCheckDuplicateAdminContractor,
                method: "GET",
                data: { company: companyName },
                success: function (response) {
                    const exists = response?.data?.exists === 1;

                    if (exists) {
                        $('#company').after(
                            '<span id="company-error" class="help text-danger">Company is already registered</span>'
                        )
                        $("#btn_submit_create_user").removeClass('is-loading').prop('disabled', true);
                        $("#company").val('');
                    } else {
                        $('#company-error').remove();
                        $("#btn_submit_create_user").prop('disabled', false);
                    }
                },
                error: function (err) {
                    console.error("Failed to check company", err);
                }
            });
        }

        $("#column_location").hide();


        $('#role').on('change', function() {
            const val = parseInt($(this).val(), 10);

            switch (val) {
                case 1:
                case 2:
                    $("#company").val("PetroChina International Jabung Ltd");
                    $("#company").attr("readonly", true);
                    $("#column_contract_user_contracts").empty();
                    $("#column_admin_contractor_contracts").empty();
                    $("#column_gender").hide();
                    $("#column_department").show();
                    $("#column_location").hide();
                    break;

                case 5:
                case 7:
                    $("#company").val("PetroChina International Jabung Ltd");
                    $("#company").attr("readonly", true);
                    $("#column_contract_user_contracts").empty();
                    $("#column_admin_contractor_contracts").empty();
                    $("#column_gender").show();
                    $("#column_department").show();
                    $("#column_location").hide();
                    break;

                case 6: // dokter
                    $("#company").val("PetroChina International Jabung Ltd");
                    $("#company").attr("readonly", true);
                    $("#column_contract_user_contracts").empty();
                    $("#column_admin_contractor_contracts").empty();
                    $("#column_gender").show();
                    $("#column_department").show();
                    $("#column_location").show();
                    break;

                case 4: // Contract User
                    $("#company").val("PetroChina International Jabung Ltd");
                    $("#company").attr("readonly", true);
                    $("#column_admin_contractor_contracts").empty();
                    $("#column_gender").hide();
                    $("#column_department").show();
                    $("#column_location").hide();
                    appendFieldContractUser();
                    break;

                case 3: // Admin Contractor
                    $("#company").val("");
                    $("#company").removeAttr("readonly");
                    $("#column_contract_user_contracts").empty();
                    $("#column_gender").hide();
                    $("#column_department").hide();
                    $("#column_location").hide();
                    appendFieldAdminContractor();
                    break;

                default:
                    $("#company").val("");
                    $("#company").removeAttr("readonly");
                    $("#column_contract_user_contracts").empty();
                    $("#column_admin_contractor_contracts").empty();
                    $("#column_gender").show();
                    $("#column_department").show();
                    $("#column_location").hide();
                    break;
            }
        });


        $(document).on('click', '#add_field_contract', function() {
            fieldContract()
        })

        $(document).on("click", ".remove-field-contract", function(e) {
            e.preventDefault();

            if ($(".control.mt-3").length > 0) {
                $(this).closest(".control.mt-3").remove();
            } else {
                alert("At least one contract field is required.");
            }
        });

        function daterangeContractPeriode() {
            $(document).on('focus', '.contract-period', function() {
                if (!$(this).hasClass('daterangepicker-initialized')) {
                    let start = moment();
                    let end = moment().add(28, 'days');

                    $(this).daterangepicker({
                        autoUpdateInput: false,
                        singleDatePicker: false,
                        showDropdowns: true,
                        // minDate: moment(),
                        startDate: start,
                        endDate: end,
                        locale: {
                            format: 'DD/MM/YYYY',
                            applyLabel: "Apply",
                            cancelLabel: "Clear"
                        }
                    }).addClass('daterangepicker-initialized');

                    $(this).on('apply.daterangepicker', function(ev, picker) {
                        $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format(
                            'DD/MM/YYYY'));
                    });

                    $(this).on('cancel.daterangepicker', function(ev, picker) {
                        $(this).val('');
                    });
                }
            });
        }

        $(document).ready(function() {
            submitCreateUser();

            $('#cancel_add_user').on('click', function() {
                $(this).closest('.modal').find('.invalid-feedback').remove();
                $(this).closest('.modal').find('.input').removeClass('is-danger');
            });

            daterangeContractPeriode()

        });

        function fieldColumnContract() {
            $.ajax({
                url: urlFormContract,
                data: {
                    type: 'add'
                },
                success: function(res) {
                    $("#column_role").after(res);
                }
            });
        }

        function fieldContract() {
            $.ajax({
                url: urlFormContract,
                data: {
                    type: 'remove'
                },
                success: function(res) {
                    $("#contract_container").append(res);
                }
            });
        }

        function appendFieldContractUser() {
            if ($('#contract_user_contract_container').length === 0) {
                $.ajax({
                    url: urlFormContractUserContract,
                    success: function(res) {
                        $("#column_contract_user_contracts").append(res);
                    }
                });
            }
        }

        function appendFieldAdminContractor() {
            if ($('#admin_contractor_contract_container').length === 0) {
                $.ajax({
                    url: urlFormAdminContractorContract,
                    success: function(res) {
                        $("#column_admin_contractor_contracts").append(res);
                    }
                });
            }
        }
    </script>

    <script>
        // toggle dropdown on input click
        $('#treeSelect input').on('click', function () {
            $('#treeSelect').toggleClass('open');
        });

        // close dropdown if clicked outside
        $(document).on('click', function (e) {
            if (!$(e.target).closest('#treeSelect').length) {
                $('#treeSelect').removeClass('open');
            }
        });

        // update input text on selection change
        $('#treeContainer').on('changed.jstree', function (e, data) {
            const selectedText = data.selected.map(id => data.instance.get_node(id).text).join(', ');
            $('#treeSelect input').val(selectedText);
            const selectedIds = data.selected;
            $("#location_ids").val(selectedIds.join(','));
        });

        </script>
        <script>
            const locations = @json($locations);

            console.log(locations);

            function buildTreeFormat(items) {
                return items.map(item => ({
                    id: String(item.id),
                    text: item.name,
                    parent: item.parent_id ? String(item.parent_id) : "#",
                    icon: false
                }));
            }

            const listLocation = buildTreeFormat(locations);

            // Example: init jsTree
            $('#treeContainer').jstree({
                core: { data: listLocation },
                plugins: ['checkbox'],
                checkbox: {
                    cascade: 'up+down+undetermined'
                }
            });

        </script>
@endpush