@extends('layouts.master', ['title' => __('app.user_management')])
@push('meta')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endpush

@section('content')
    <div class="page-content-inner">
        <div class="personal-dashboard personal-dashboard-v1">
            <div class="columns">
                <div class="column is-12">
                    <div class="columns is-multiline">
                        <div class="column is-6">
                            <div class="fs-28 fw-700 my-2">@lang('app.users')</div>
                            <p>@lang('app.manage_access_for_all_user')</p>
                        </div>
                        <div class="column is-6" align="right">
                            <button class="button h-button is-warning h-modal-trigger" data-modal="modal_add_user" onclick="openModal()">
                                <i class="fas fa-plus mr-2"></i>
                                @lang('app.create_user')
                            </button>
                            @hasrole(['super_admin', 'contract_user'])
                                <a href="{{ route('user.access-request') }}" class="button h-button is-elevated">
                                    @lang('app.approve_request')
                                    <span class="tag is-rounded ml-2" id="total_request_approval">0</span>
                                </a>
                                <a href="javascript:;" class="button h-button is-warning" id="btn_export_user" style="background-color: #fff;color: #E89417;border: 1px solid;">
                                    <span class="icon">
                                        <i aria-hidden="true" class="fas fa-file-export"></i>
                                    </span>
                                    <span>@lang('app.export_users')</span>
                                </a>
                                {{-- <div style="display: inline-block;">
                                    <div id="dropdown_export_users" class="dropdown is-spaced is-dots is-right dropdown-trigger">
                                        <div class="is-trigger" aria-haspopup="true">
                                            @include('components.icons.more-vertical')
                                        </div>
                                        <div class="dropdown-menu mt-3" role="menu" style="min-width: 150px !important">
                                            <div class="dropdown-content">
                                                <a href="javascript:void(0)" class="dropdown-item is-media" id="btn_export_user">
                                                    <div class="meta">
                                                        <span>@lang('app.export_users')</span>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div> --}}
                            @endhasrole
                        </div>
                        <div class="column is-4">
                            <div class="card-medical">
                                <div class="txt-content-mc">@lang('app.total_users')</div>
                                <div id="value_total_users" class="fs-28 fw-600">0</div>
                            </div>
                        </div>
                        <div class="column is-4">
                            <div class="card-medical">
                                <div class="txt-content-mc">@lang('app.active_users')</div>
                                <div id="value_active_users" class="fs-28 fw-600">0</div>
                            </div>
                        </div>
                        <div class="column is-4">
                            <div class="card-medical">
                                <div class="txt-content-mc">@lang('app.administrator')</div>
                                <div id="value_administrator" class="fs-28 fw-600">0</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- <div class="dashboard-header" style="margin-left: -12px;margin-top:-5px">
                <div class="start">
                    <div class="fs-28 fw-700 my-2">@lang('app.users')</div>
                    <p>@lang('app.manage_access_for_all_user')</p>
                    <div class="mt-5" style="display: flex;gap: 20px;">
                        <div id="total_user" style="text-align: left;">
                            @lang('app.total_users')
                            <div id="value_total_users" class="fs-28 fw-600">0</div>
                        </div>
                        <div id="active_users" style="text-align: left;">
                            @lang('app.active_users')
                            <div id="value_active_users" class="fs-28 fw-600">0</div>
                        </div>
                        <div id="administrator" style="text-align: left;">
                            @lang('app.administrator')
                            <div id="value_administrator" class="fs-28 fw-600">0</div>
                        </div>
                    </div>
                </div>
                <div class="end" style="margin-top: -87px">
                    <button class="button h-button is-warning h-modal-trigger" data-modal="modal_add_user">
                        <i class="fas fa-plus mr-2"></i>
                        @lang('app.create_user')
                    </button>
                    @hasrole(['super_admin', 'contract_user'])
                        <a href="{{ route('user.access-request') }}" class="button h-button is-elevated">
                            @lang('app.approve_request')
                            <span class="tag is-rounded ml-2" id="total_request_approval">0</span>
                        </a>
                        <div class="right">
                            <div id="dropdown_export_users" class="dropdown is-spaced is-dots is-right dropdown-trigger">
                                <div class="is-trigger" aria-haspopup="true">
                                    @include('components.icons.more-vertical')
                                </div>
                                <div class="dropdown-menu mt-3" role="menu" style="min-width: 150px !important">
                                    <div class="dropdown-content">
                                        <a href="javascript:void(0)" class="dropdown-item is-media" id="btn_export_user">
                                            <div class="meta">
                                                <span>@lang('app.export_users')</span>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endhasrole
                </div>
            </div> --}}
            <div class="datatable-toolbar">
                <div class="field has-addons">
                    <div class="control has-icon mr-3">
                        <input type="text" style="width: 320px" placeholder="Enter public name or email address"
                            id="search_user" class="datatable-filter input">
                        <div class="form-icon">
                            <i data-feather="search"></i>
                        </div>
                    </div>
                    <div class="control">
                        <div class="dropdown dropdown-trigger is-right" id="filter_user">
                            <div class="is-trigger">
                                <button class="button" aria-haspopup="true">
                                    <span class="icon">
                                        <i data-feather="filter"></i>
                                    </span>
                                    <span>@lang('app.filter')</span>
                                </button>
                            </div>
                            <div class="dropdown-menu" role="menu">
                                @include('components.modal.modal-filter', [
                                    'filter' => 'user_management',
                                ])
                            </div>
                        </div>
                    </div>
                    <div id="showing_info_users" style="margin-left: 20px; display: flex; align-items: center; font-size: 14px; color: #666; font-weight: 500;"></div>
                </div>
            </div>
            <div class="table-wrapper">
                <table id="table_users" class="table is-datatable is-hoverable table-is-bordered">
                    <thead>
                        <tr>
                            <th data-type="number">
                                <div class="dissp-one">
                                    <span>@lang('app.nomor')</span>
                                    <span class="dissp-two">
                                        <span class="sort-indicator">⇅</span>
                                    </span>
                                </div>
                            </th>
                            <th data-type="text">
                                <div class="dissp-one">
                                    <span>@lang('app.users')</span>
                                    <span class="dissp-two">
                                        <span class="sort-indicator">⇅</span>
                                    </span>
                                </div>
                            </th>
                            <th data-type="text">
                                <div class="dissp-one">
                                    <span>@lang('app.role')</span>
                                    <span class="dissp-two">
                                        <span class="sort-indicator">⇅</span>
                                    </span>
                                </div>
                            </th>
                            <th data-type="date">
                                <div class="dissp-one">
                                    <span>@lang('app.last_active')</span>
                                    <span class="dissp-two">
                                        <span class="sort-indicator">⇅</span>
                                    </span>
                                </div>
                            </th>
                            <th data-type="text">
                                <div class="dissp-one">
                                    <span>@lang('app.status')</span>
                                    <span class="dissp-two">
                                        <span class="sort-indicator">⇅</span>
                                    </span>
                                </div>
                            </th>
                            <th>
                                <div class="dissp-one">
                                    <span>@lang('app.actions')</span>
                                    <span class="dissp-two">
                                        <span class="sort-indicator">⇅</span>
                                    </span>
                                </div>
                            </th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>

            <div id="pagination_users"></div>
        </div>
        @include('components.modal.modal-add-user')
        <!-- group is removed -->
        {{-- @include('components.modal.modal-add-to-group') --}}
    </div>
@endsection

@push('scripts')
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <link rel="stylesheet" href="{{ auto_asset('assets/css/select2/select2.min.css') }}">
    <script>
        const dataUser = '{{ route('user.datatable') }}'
        const deleteUser = '{{ route('user.delete') }}'
        const restoreUser = '{{ route('user.restore') }}'
        const urlCheckIdentity = '{{ route('employee.check-identity') }}'
        const urlCreateUser = '{{ route('user.store') }}'
        const urlAddToGroup = '{{ route('group.add-to-group') }}'
        const urlExportUser = '{{ route('user.export-user') }}'
        const urlFormContract = '{{ route('user.form-contract') }}'
        const urlFormContractUserContract = '{{ route('user.form-contract-user-contract') }}'
        const urlCheckContractNumber = '{{ route('user.check-contract-number') }}'
        const urlFormAdminContractorContract = '{{ route('user.form-admin-contractor-contract') }}'
        const urlCheckDuplicateAdminContractor = '{{ route('user.check-duplicate-admin-contractor') }}'
    </script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.js"></script>
    
    <script src="{{ asset('assets/js/table-loader.js') }}"></script>
    <script src="{{ asset('assets/js/user-management/index.js') }}"></script>
    <script src="{{ asset('assets/js/pagination/Paginate.js') }}"></script>
    <script src="{{ asset('assets/js/pagination/change-perpage.js') }}"></script>

    <!-- SORTING DATA -->
    <script>
        let modalOverflowStyle;

        function openModal() {
          modalOverflowStyle = document.createElement("style");
          modalOverflowStyle.id = "modalOverflowHidden";
          modalOverflowStyle.innerHTML = `
        :root, :host { overflow: hidden !important; }
        .datetimepicker.is-active {
            z-index: 22 !important;
            top: -420px;
            width: 100%;
        }
      `;

          document.head.appendChild(modalOverflowStyle);

          // buka modal
          document.querySelector('#myModal').classList.add('is-active');
        }

        function closeModal() {
          // hapus CSS
          const styleEl = document.getElementById("modalOverflowHidden");
          if (styleEl) styleEl.remove();

          // tutup modal
          document.querySelector('#myModal').classList.remove('is-active');
        }

        // Ketika tombol yang punya class .h-modal-trigger diklik
        $(document).on('click', '.h-modal-trigger', function () {
            const modalId = $(this).data('modal'); // ambil ID dari data-modal
            const modalEl = $('#' + modalId);

            // tunggu sedikit agar konten modal sudah muncul di DOM
            setTimeout(() => {
                // pastikan semua select2 di dalam modal sudah siap
                modalEl.find('.select2me').each(function () {
                    // Hapus select2 lama (jika ada), lalu inisialisasi ulang
                    if ($(this).hasClass('select2-hidden-accessible')) {
                        $(this).select2('destroy');
                    }

                    $(this).select2({
                        dropdownParent: modalEl,
                        width: '100%',
                        placeholder: 'Pilih data',
                        allowClear: true
                    });
                });
            }, 400); // waktu tunggu sedikit lebih lama untuk konten dinamis
        });

        function parseCell(text, type) {
          text = text.trim();
          if (type === "number") {
            const n = parseFloat(text.replace(",", "."));
            return isNaN(n) ? text.toLowerCase() : n;
          }
          if (type === "date") {
            const d = Date.parse(text);
            return isNaN(d) ? text.toLowerCase() : d;
          }
          return text.toLowerCase();
        }

        function compareValues(a, b) {
          if (typeof a === "number" && typeof b === "number") return a - b;
          return a > b ? 1 : a < b ? -1 : 0;
        }

        function sortingTable(idTable) {
            const table = document.getElementById(idTable);
            const thead = table.tHead;
            const tbody = table.tBodies[0];
            let sortState = { index: -1, dir: 1 };


            thead.addEventListener("click", function (e) {
                const th = e.target.closest("th");
                if (!th) return;

                const ths = Array.from(thead.querySelectorAll("th"));
                const colIndex = ths.indexOf(th);
                const type = th.getAttribute("data-type");

                // toggle arah
                if (sortState.index === colIndex) {
                    sortState.dir *= -1;
                } else {
                    sortState.index = colIndex;
                    sortState.dir = 1;
                }

                // ambil data row
                const rows = Array.from(tbody.rows);
                const keyed = rows.map(row => {
                    const raw = row.cells[colIndex].textContent;
                    return { row, key: parseCell(raw, type) };
                });

                // sortir
                keyed.sort((a, b) => compareValues(a.key, b.key) * sortState.dir);

                // render ulang
                const frag = document.createDocumentFragment();
                keyed.forEach(k => frag.appendChild(k.row));
                tbody.appendChild(frag);

                // 🔥 reset semua indikator ke default ⇅
                thead.querySelectorAll(".sort-indicator").forEach(span => span.textContent = "⇅");

                // ubah indikator di kolom aktif
                const indicator = th.querySelector(".sort-indicator");
                if (indicator) indicator.textContent = sortState.dir === 1 ? "▲" : "▼";
            });
        }

        $(document).ready(function(){
            sortingTable("table_users");
        });


    </script>
@endpush