@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <style>
        #list_mstlpk tbody tr.pending-link td {
            background-color: #ffe9ed !important;
        }
    </style>
    <div class="container-fluid">
        @include('components.karyawan-tanpa-ftm-alert')
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="row">
                            <div class="card-header col-md-12">
                                <h5 class="mb-0">List {{ $title_menu }}</h5>
                            </div>
                            <div class="col-md-12 px-4 pt-3">
                                {{-- alert --}}
                                @include('components.alert')
                                @if (($dmenu ?? '') === 'mstlpk')
                                    @include('components.karyawan-tanpa-ftm-alert', app(\App\Services\FtmNoScanService::class)->getPeriodeLaporan())
                                @endif
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper d-flex justify-content-between align-items-center flex-wrap gap-2">
                                    <div>
                                        {{-- check authorize add --}}
                                        @if ($authorize->add == '1')
                                            {{-- button add --}}
                                            <button class="btn btn-primary mb-0"
                                                onclick="window.location='{{ URL::to($url_menu . '/add') }}'"><i
                                                    class="fas fa-plus me-1"> </i><span class="font-weight-bold">
                                                    Tambah</span></button>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
@if (($dmenu ?? '') === 'mstlpk')
    @php
        // User ber-role KRL hanya menyinkronkan karyawan dengan status miliknya (mst_korlab).
        $krlSyncStatus = \App\Helpers\Function_Helper::getKrlStatusForUser();
        $krlSyncStatusNama = (string) ($krlSyncStatus['status_nama'] ?? '');
    @endphp
    <div class="row px-4 pb-2">
        <div class="col-12">
            <div class="d-flex justify-content-start">
                @if (($dmenu ?? '') === 'mstlpk')
                    <button class="btn btn-primary mb-0" onclick="syncMasterLinkPin(this)">
                        <i class="fas fa-arrows-rotate me-1"></i><span class="font-weight-bold">Sync</span>
                    </button>
                @elseif (($dmenu ?? '') === 'mstjsh')
                    <button class="btn btn-primary mb-0" onclick="syncShift(this)">
                        <i class="fas fa-arrows-rotate me-1"></i><span class="font-weight-bold">Sync</span>
                    </button>
                @elseif (($dmenu ?? '') === 'mstkls')
                    <button class="btn btn-primary mb-0" onclick="syncKalenderShift(this)">
                        <i class="fas fa-arrows-rotate me-1"></i><span class="font-weight-bold">Sync</span>
                    </button>
                @elseif (($dmenu ?? '') === 'mstkns')
                    <button class="btn btn-primary mb-0" onclick="syncKalenderNonShift(this)">
                        <i class="fas fa-arrows-rotate me-1"></i><span class="font-weight-bold">Sync</span>
                    </button>
                @endif
            </div>
        </div>
    </div>
@endif
                        @if (($dmenu ?? '') === 'mstlpk')
                            <div class="row px-4 pb-2 d-none" id="masterSyncProgressCard">
                                <div class="col-12">
                                    <div class="card shadow-sm mb-0">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-2">
                                                <h6 class="mb-0 text-dark font-weight-bold">Progress Sync Master</h6>
                                                <span class="badge bg-gradient-info" id="masterSyncStatusBadge">Menunggu</span>
                                            </div>
                                            <div class="progress mb-2" style="height: 18px;">
                                                <div id="masterSyncProgressBar" class="progress-bar bg-success progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                                            </div>
                                            <div class="row text-sm">
                                                <div class="col-md-8">
                                                    <span class="text-secondary" id="masterSyncProgressMessage">Belum ada proses yang berjalan.</span>
                                                </div>
                                                <div class="col-md-4 text-md-end">
                                                    <span class="text-secondary" id="masterSyncProgressMeta">Tahap 0 / 0</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                        @if (($dmenu ?? '') === 'mstjsh')
                            <div class="row px-4 pb-2 d-none" id="shiftSyncProgressCard">
                                <div class="col-12">
                                    <div class="card shadow-sm mb-0">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-2">
                                                <h6 class="mb-0 text-dark font-weight-bold">Progress Sync Jadwal Shift</h6>
                                                <span class="badge bg-gradient-info" id="shiftSyncStatusBadge">Menunggu</span>
                                            </div>
                                            <div class="progress mb-2" style="height: 18px;">
                                                <div id="shiftSyncProgressBar" class="progress-bar bg-success progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                                            </div>
                                            <div class="row text-sm">
                                                <div class="col-md-8">
                                                    <span class="text-secondary" id="shiftSyncProgressMessage">Belum ada proses yang berjalan.</span>
                                                </div>
                                                <div class="col-md-4 text-md-end">
                                                    <span class="text-secondary" id="shiftSyncProgressMeta">Tahap 0 / 0</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                        @if (($dmenu ?? '') === 'mstkls')
                            <div class="row px-4 pb-2 d-none" id="kalenderShiftSyncProgressCard">
                                <div class="col-12">
                                    <div class="card shadow-sm mb-0">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-2">
                                                <h6 class="mb-0 text-dark font-weight-bold">Progress Sync Kalender Shift</h6>
                                                <span class="badge bg-gradient-info" id="kalenderShiftSyncStatusBadge">Menunggu</span>
                                            </div>
                                            <div class="progress mb-2" style="height: 18px;">
                                                <div id="kalenderShiftSyncProgressBar" class="progress-bar bg-success progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                                            </div>
                                            <div class="row text-sm">
                                                <div class="col-md-8">
                                                    <span class="text-secondary" id="kalenderShiftSyncProgressMessage">Belum ada proses yang berjalan.</span>
                                                </div>
                                                <div class="col-md-4 text-md-end">
                                                    <span class="text-secondary" id="kalenderShiftSyncProgressMeta">Tahap 0 / 0</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                        @if (($dmenu ?? '') === 'mstkns')
                            <div class="row px-4 pb-2 d-none" id="kalenderNonShiftSyncProgressCard">
                                <div class="col-12">
                                    <div class="card shadow-sm mb-0">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-2">
                                                <h6 class="mb-0 text-dark font-weight-bold">Progress Sync Kalender Non Shift</h6>
                                                <span class="badge bg-gradient-info" id="kalenderNonShiftSyncStatusBadge">Menunggu</span>
                                            </div>
                                            <div class="progress mb-2" style="height: 18px;">
                                                <div id="kalenderNonShiftSyncProgressBar" class="progress-bar bg-success progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                                            </div>
                                            <div class="row text-sm">
                                                <div class="col-md-8">
                                                    <span class="text-secondary" id="kalenderNonShiftSyncProgressMessage">Belum ada proses yang berjalan.</span>
                                                </div>
                                                <div class="col-md-4 text-md-end">
                                                    <span class="text-secondary" id="kalenderNonShiftSyncProgressMeta">Tahap 0 / 0</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                        @if (($dmenu ?? '') === 'mstlpk')
                            <div id="linkPinStatusFilterContainer" class="d-none">
                                <div class="d-flex align-items-center gap-2 me-3">
                                    <label for="linkPinStatusFilter" class="mb-0 text-sm font-weight-bold">Status Link</label>
                                    <select class="form-select form-select-sm" id="linkPinStatusFilter" style="min-width: 170px;">
                                        <option value="semua" {{ request('status_link') === null || request('status_link') === '' || strtolower((string) request('status_link')) === 'semua' ? 'selected' : '' }}>Semua Status</option>
                                        <option value="Linked" {{ request('status_link') === 'Linked' ? 'selected' : '' }}>Linked</option>
                                        <option value="Pending" {{ request('status_link') === 'Pending' ? 'selected' : '' }}>Pending</option>
                                        <option value="Unlinked" {{ request('status_link') === 'Unlinked' ? 'selected' : '' }}>Unlinked</option>
                                    </select>
                                </div>
                            </div>
                        @endif
                        @if (in_array($dmenu ?? '', ['mstkls', 'mstkns'], true))
                            <div id="calendarYearFilterContainer" class="d-none">
                                <div class="d-flex align-items-center gap-2 me-3">
                                    <label for="calendarYearFilter" class="mb-0 text-sm font-weight-bold">Tahun</label>
                                    <select class="form-select" id="calendarYearFilter" style="min-width: 120px; height: 38px;">
                                        <option value="">Semua Tahun</option>
                                        @foreach (($calendar_year_options ?? []) as $yearOption)
                                            <option value="{{ $yearOption }}" {{ (string) request('filter_year', '') === (string) $yearOption ? 'selected' : '' }}>
                                                {{ $yearOption }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        @endif
                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table display" id="list_{{ $dmenu }}">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th width="110">Action</th>
                                            <th>No</th>
                                            {{-- retrieve table header --}}
                                            @foreach ($table_header as $header)
                                                <th>{{ $header->alias }}</th>
                                            @endforeach
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{-- retrieve table detail --}}
                                        @foreach ($table_detail as $detail)
                                            @php
                                                $primary = '';
                                                foreach ($table_primary as $p) {
                                                    $primary == ''
                                                        ? ($primary = $detail->{$p->field})
                                                        : ($primary = $primary . ':' . $detail->{$p->field});
                                                }
                                                $vcount = $loop->iteration;
                                            @endphp
                                            <tr
                                                {{ $detail->isactive == '0' ? 'class=not style=background-color:#ffe9ed;' : '' }}>
                                                <td class="text-sm font-weight-normal">
                                                    <div class="btn-group">
                                                        <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                                            title="View Data"
                                                            onclick="window.location='{{ url($url_menu . '/show' . '/' . encrypt($primary)) }}'">
                                                            <i class="fas fa-eye"> </i><span class="font-weight-bold"> View</span>
                                                        </button>
                                                        @if ($authorize->edit == '1' || $authorize->delete == '1')
                                                            <button type="button"
                                                                class="btn btn-sm btn-primary mb-0 px-3 dropdown-toggle dropdown-toggle-split"
                                                                data-bs-toggle="dropdown" aria-expanded="false">
                                                                <span class="visually-hidden">Toggle Dropdown</span>
                                                            </button>
                                                            <ul class="dropdown-menu">
                                                                {{-- check authorize edit --}}
                                                                @if ($authorize->edit == '1')
                                                                    {{-- button edit --}}
                                                                    <li>
                                                                        <button type="button"
                                                                            class="btn btn-sm btn-warning mx-2 mb-0 w-90"
                                                                            title="Edit Data"
                                                                            onclick="window.location='{{ url($url_menu . '/edit' . '/' . encrypt($primary)) }}'">
                                                                            <i class="fas fa-edit"></i><span
                                                                                class="font-weight-bold">
                                                                                Edit</span>
                                                                        </button>
                                                                    </li>
                                                                @endif
                                                                {{-- check authorize delete --}}
                                                                @if ($authorize->delete == '1')
                                                                    <li>
                                                                        <hr class="dropdown-divider">
                                                                    </li>
                                                                    @php
                                                                        $isActive = (string) ($detail->isactive ?? '1') === '1';
                                                                        $toggleLabel = $isActive ? 'Non Aktifkan' : 'Aktifkan';
                                                                        $toggleTitle = $isActive ? 'Non Aktifkan Data' : 'Aktifkan Data';
                                                                        $toggleBtnClass = $isActive ? 'btn-danger' : 'btn-success';
                                                                    @endphp
                                                                    <li>
                                                                        <form method="POST"
                                                                            action="{{ url($url_menu . '/' . encrypt($primary)) }}"
                                                                            onsubmit="deleteData(event, '{{ $primary }}', '{{ $toggleLabel }}')">
                                                                            @csrf
                                                                            @method('DELETE')
                                                                            <button type="submit"
                                                                                class="btn btn-sm {{ $toggleBtnClass }} mx-2 mb-0 w-90"
                                                                                title="{{ $toggleTitle }}">
                                                                                <i class="fas fa-random me-1"></i><span
                                                                                    class="font-weight-bold">
                                                                                    {{ $toggleLabel }}</span>
                                                                            </button>
                                                                        </form>
                                                                    </li>
                                                                @endif
                                                            </ul>
                                                        @endif
                                                    </div>
                                                </td>
                                                <td>{{ $loop->iteration }}</td>
                                                @foreach ($table_header as $field)
                                                    @php
                                                        $string = $field->field;
                                                    @endphp
                                                    {{-- field type enum --}}
                                                    @if ($field->type == 'enum')
                                                        <td
                                                            class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                                            @php
                                                                $data_query = $header_query_results[$field->field] ?? [];
                                                                $displayValue = '';
                                                            @endphp
                                                            @if (Str::contains($field->class, 'select-multiple'))
                                                                @php
                                                                    $multiple = array_map('trim', explode(',', (string) $detail->$string));
                                                                    foreach ($data_query as $q) {
                                                                        $sAsArray = array_values((array) $q);
                                                                        if (in_array($sAsArray[0], $multiple)) {
                                                                            $displayValue = $displayValue === ''
                                                                                ? $sAsArray[1]
                                                                                : $displayValue . ',' . $sAsArray[1];
                                                                        }
                                                                    }
                                                                @endphp
                                                            @else
                                                                @foreach ($data_query as $q)
                                                                    @php $sAsArray = array_values((array) $q); @endphp
                                                                    @if ((string) $detail->$string === (string) $sAsArray[0])
                                                                        @php $displayValue = $sAsArray[1]; @endphp
                                                                    @endif
                                                                @endforeach
                                                            @endif

                                                            @if ($field->link != '')
                                                                <a target="_blank"
                                                                    href="{{ url($field->link . '/?id=' . encrypt($detail->$string)) }}">
                                                                    {{ $displayValue }}
                                                                    <i aria-hidden="true" class="fas fa-external-link-alt ms-1"></i>
                                                                </a>
                                                            @else
                                                                {{ $displayValue }}
                                                            @endif
                                                        </td>
                                                        {{-- field type file --}}
                                                    @elseif ($field->type == 'file')
                                                        <td
                                                            class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                                            @if ($detail->$string)
                                                                <a target="_blank"
                                                                    class="btn btn-sm btn-outline-success mb-0 py-1 px-2"
                                                                    href="{{ asset('/storage' . '/' . $detail->$string) }}">
                                                                    <i aria-hidden="true" class="fas fa-file-lines text-lg">
                                                                    </i>
                                                                    {{ $field->alias }}</a>
                                                            @endif
                                                        </td>
                                                        {{-- field type image --}}
                                                    @elseif($field->type == 'image')
                                                        <td
                                                            class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                                            <span class="my-2 text-xs">
                                                                <img src="{{ file_exists(public_path('storage/' . $detail->$string . 'tumb.png')) ? asset('/storage' . '/' . $detail->$string . 'tumb.png') : asset('storage/' . $detail->$string) }}"
                                                                    alt="image" style="height: 35px;"
                                                                    data-bs-toggle="modal"
                                                                    data-bs-target="#imageModal{{ $field->field }}{{ $vcount }}">
                                                            </span>
                                                            <span
                                                                style="display: none;">{{ asset('/storage' . '/' . $detail->$string) }}
                                                            </span>
                                                            <!-- Modal -->
                                                            <div class="modal fade"
                                                                id="imageModal{{ $field->field }}{{ $vcount }}"
                                                                tabindex="-1" role="dialog"
                                                                aria-labelledby="imageModalLabel" aria-hidden="true">
                                                                <div class="modal-dialog modal-dialog-centered"
                                                                    role="document">
                                                                    <div class="modal-content">
                                                                        <div class="modal-header">
                                                                            <h5 class="modal-title" id="imageModalLabel">
                                                                                Preview Image
                                                                            </h5>
                                                                            <button type="button" class="btn-close"
                                                                                data-bs-dismiss="modal" aria-label="Close">
                                                                                <span aria-hidden="true">&times;</span>
                                                                            </button>
                                                                        </div>
                                                                        <div class="modal-body">
                                                                            <img src="{{ asset('/storage' . '/' . $detail->$string) }}"
                                                                                id="preview" alt="image"
                                                                                class="w-100 border-radius-lg shadow-sm">
                                                                        </div>
                                                                        <div class="modal-footer">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        {{-- field type join --}}
                                                    @elseif($field->type == 'join')
                                                        <td
                                                            class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                                            @php
                                                                $data_query = $join_query_results[$field->field][$detail->$string] ?? [];
                                                            @endphp
                                                            @foreach ($data_query as $q)
                                                                <br />
<b>Warning</b>:  Undefined variable $q in <b>/opt/lampp/htdocs/msjabsensi/resources/views/master/auto/list.blade.php</b> on line <b>395</b><br />
                                                                @if ($field->default != 'image')
                                                                    {{ $sAsArray[0] != '' ? $sAsArray[0] : '' }}
                                                                @else
                                                                    <span class="my-2 text-xs">
                                                                        <img src="{{ asset('/storage' . '/' . $sAsArray[0]) }}"
                                                                            alt="image" style="height: 40px;"
                                                                            data-bs-toggle="modal"
                                                                            data-bs-target="#imageModalJoin{{ $field->field }}{{ $vcount }}">
                                                                    </span>
                                                                    <span
                                                                        style="display: none;">{{ asset('/storage' . '/' . $sAsArray[0]) }}
                                                                    </span>
                                                                    <!-- Modal -->
                                                                    <div class="modal fade"
                                                                        id="imageModalJoin{{ $field->field }}{{ $vcount }}"
                                                                        tabindex="-1" role="dialog"
                                                                        aria-labelledby="imageModalJoinLabel"
                                                                        aria-hidden="true">
                                                                        <div class="modal-dialog modal-dialog-centered"
                                                                            role="document">
                                                                            <div class="modal-content">
                                                                                <div class="modal-header">
                                                                                    <h5 class="modal-title"
                                                                                        id="imageModalJoinLabel">
                                                                                        Preview Image
                                                                                    </h5>
                                                                                    <button type="button"
                                                                                        class="btn-close"
                                                                                        data-bs-dismiss="modal"
                                                                                        aria-label="Close">
                                                                                        <span
                                                                                            aria-hidden="true">&times;</span>
                                                                                    </button>
                                                                                </div>
                                                                                <div class="modal-body">
                                                                                    <img src="{{ asset('/storage' . '/' . $sAsArray[0]) }}"
                                                                                        id="preview" alt="image"
                                                                                        class="w-100 border-radius-lg shadow-sm">
                                                                                </div>
                                                                                <div class="modal-footer">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                @endif
                                                            @endforeach
                                                        </td>
                                                        {{-- field type currency --}}
                                                    @elseif ($field->type == 'currency')
                                                        <td
                                                            class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                                            {{ $format->CurrencyFormat($detail->$string, $field->decimals, $field->sub) }}
                                                        </td>
                                                        {{-- field type date --}}
                                                    @elseif ($field->type == 'date')
                                                        <td
                                                            class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }} {{ $field->class == 'check-date' ? $detail->$string : '' }}">
                                                            {{ $detail->$string }}
                                                        </td>
                                                        @if ($field->note != '')
                                                            <p id="datenote" style="display: none">
                                                                {{ $field->note }}
                                                            </p>
                                                        @else
                                                            <p id="datenote" style="display: none">Date Expired <=
                                                                    {{ $field->length }} Day </p>
                                                        @endif
                                                        @if ($field->class == 'check-date')
                                                            <script>
                                                                var inputDate = new Date('{{ $detail->$string }}');
                                                                var currentDate = new Date();
                                                                var futureDate = new Date(currentDate.setDate(currentDate.getDate() + parseInt('{{ $field->length }}')));

                                                                if (inputDate <= futureDate) {
                                                                    $('.{{ $detail->$string }}').parents('tr').addClass('exp');
                                                                    $('.{{ $detail->$string }}').parents('tr').css('background-color', '#ffe768');
                                                                }
                                                            </script>
                                                        @endif
                                                    @elseif ($field->type == 'number')
                                                        <td
                                                            class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }} {{ $field->class == 'check-stock' ? $detail->$string . $detail->{$field->sub} : '' }}">
                                                            {{ $detail->$string }}
                                                        </td>
                                                        @if ($field->note != '')
                                                            <p id="stocknote" style="display: none">
                                                                {{ $field->note }}
                                                            </p>
                                                        @else
                                                            <p id="stocknote" style="display: none">Stock < minimal stock
                                                                    </p>
                                                        @endif
                                                        @if ($field->class == 'check-stock')
                                                            <script>
                                                                var vstock = {{ $detail->$string }};
                                                                var vminstock = {{ $detail->{$field->sub} }};

                                                                if (vstock < vminstock) {
                                                                    $('.{{ $detail->$string . $detail->{$field->sub} }}').parents('tr').addClass('stock');
                                                                    $('.{{ $detail->$string . $detail->{$field->sub} }}').parents('tr').css('background-color', '#f93c3c');
                                                                    $('.{{ $detail->$string . $detail->{$field->sub} }}').parents('tr').css('color', '#000');
                                                                }
                                                            </script>
                                                        @endif
                                                    @else
                                                        <td
                                                            class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                                            @if ($field->link != '')
                                                                <a target="_blank"
                                                                    href="{{ url($field->link . '/?id=' . encrypt($detail->$string)) }}">
                                                                    {{ $detail->$string }}&nbsp;&nbsp;
                                                                    <i aria-hidden="true"
                                                                        class="fas fa-external-link-alt">
                                                                    </i>
                                                                </a>
                                                            @else
                                                                {{ $detail->$string }}
                                                            @endif
                                                        </td>
                                                    @endif
                                                @endforeach
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper" id="noted"><code>Note : <i aria-hidden="true"
                                            style="color: #ffc2cd;" class="fas fa-circle"></i> {{ ($dmenu ?? '') === 'mstlpk' ? 'Data not synchronized' : (($dmenu ?? '') === 'mstjsh' ? 'Time crosses to the next day' : 'Data not active') }}</code>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection
@push('js')
    <script>
        const linkPinStatusFilter = $('#linkPinStatusFilter');
        const masterSyncStorageKey = 'masterSyncJob';
        const masterSyncStatusNama = @json($krlSyncStatusNama ?? '');
        let masterSyncTimer = null;
        let masterSyncStartTime = null;
        let shiftSyncTimer = null;
        let shiftSyncStartTime = null;
        let kalenderShiftSyncTimer = null;
        let kalenderShiftSyncStartTime = null;
        let kalenderNonShiftSyncTimer = null;
        let kalenderNonShiftSyncStartTime = null;
        const MASTER_SYNC_QUEUE_TIMEOUT = 10000; // 10 detik

        function syncKalenderShift(button) {
            Swal.fire({
                title: 'Sinkronisasi Kalender Shift FTM',
                text: 'Sync akan memperbarui data kalender shift dari database FTM, lanjutkan?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya',
                cancelButtonText: 'Tidak',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (!result.isConfirmed) return;

                clearKalenderShiftSyncJob();
                showKalenderShiftSyncCard();
                updateKalenderShiftSyncUI({
                    status: 'queued',
                    progress: 0,
                    message: 'Menunggu proses sync kalender shift dimulai...',
                    processed_steps: 0,
                    total_steps: 1
                });

                const original = button.innerHTML;
                button.disabled = true;
                button.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i><span class="font-weight-bold">Syncing...</span>';

                $.post('{{ route("system.sync.kalendershift.start") }}', {
                    _token: '{{ csrf_token() }}'
                }).done(function (response) {
                    if (response.job_key) {
                        startKalenderShiftSyncMonitor(response.job_key);
                    } else {
                        hideKalenderShiftSyncCard();
                        Swal.fire('Gagal', 'Tidak menerima job key dari server.', 'error');
                    }
                }).fail(function (xhr) {
                    hideKalenderShiftSyncCard();
                    Swal.fire('Gagal', xhr.responseJSON?.message || 'Sync kalender shift gagal.', 'error');
                }).always(function () {
                    button.disabled = false;
                    button.innerHTML = original;
                });
            });
        }

        function clearKalenderShiftSyncJob() {
            localStorage.removeItem('kalenderShiftSyncJob');
            if (kalenderShiftSyncTimer) {
                clearInterval(kalenderShiftSyncTimer);
                kalenderShiftSyncTimer = null;
            }
        }

        function showKalenderShiftSyncCard() {
            document.getElementById('kalenderShiftSyncProgressCard')?.classList.remove('d-none');
        }

        function hideKalenderShiftSyncCard() {
            document.getElementById('kalenderShiftSyncProgressCard')?.classList.add('d-none');
        }

        function updateKalenderShiftSyncUI(data) {
            const progress = Math.max(0, Math.min(100, parseInt(data.progress || 0, 10)));
            const status = String(data.status || 'queued');
            const message = data.message || 'Memproses sync kalender shift...';
            const processedSteps = data.processed_steps || 0;
            const totalSteps = data.total_steps || 0;

            const progressBar = document.getElementById('kalenderShiftSyncProgressBar');
            const statusBadge = document.getElementById('kalenderShiftSyncStatusBadge');

            if (!progressBar || !statusBadge) {
                return;
            }

            progressBar.style.width = `${progress}%`;
            progressBar.setAttribute('aria-valuenow', progress);
            progressBar.textContent = `${progress}%`;

            document.getElementById('kalenderShiftSyncProgressMessage').textContent = message;
            document.getElementById('kalenderShiftSyncProgressMeta').textContent = `Tahap ${processedSteps} / ${totalSteps}`;

            statusBadge.className = 'badge';

            if (status === 'completed') {
                statusBadge.classList.add('bg-gradient-success');
                statusBadge.textContent = 'Selesai';
                progressBar.classList.remove('progress-bar-animated');
            } else if (status === 'failed') {
                statusBadge.classList.add('bg-gradient-danger');
                statusBadge.textContent = 'Gagal';
                progressBar.classList.remove('progress-bar-animated');
                progressBar.classList.remove('bg-success');
                progressBar.classList.add('bg-danger');
            } else {
                statusBadge.classList.add('bg-gradient-info');
                statusBadge.textContent = status === 'queued' ? 'Menunggu' : 'Berjalan';
                progressBar.classList.add('progress-bar-animated');
                progressBar.classList.remove('bg-danger');
                progressBar.classList.add('bg-success');
            }
        }

        function finishKalenderShiftSync(data) {
            const status = String(data.status || 'completed');
            const message = data.message || (status === 'completed' ? 'Sync kalender shift selesai.' : 'Sync kalender shift gagal.');
            const title = status === 'completed' ? 'Sukses' : 'Gagal';
            const icon = status === 'completed' ? 'success' : 'error';

            clearKalenderShiftSyncJob();
            kalenderShiftSyncStartTime = null;
            updateKalenderShiftSyncUI(data);

            if (status === 'completed') {
                setTimeout(() => {
                    hideKalenderShiftSyncCard();
                    window.location.reload();
                }, 1200);
            }

            Swal.fire(title, message, icon);
        }

        function pollKalenderShiftStatus() {
            const activeJob = readKalenderShiftSyncJob();
            if (!activeJob || !activeJob.job_key) {
                clearKalenderShiftSyncJob();
                hideKalenderShiftSyncCard();
                kalenderShiftSyncStartTime = null;
                return;
            }

            $.get(`{{ url('/system/sync/kalender-shift/status') }}/${activeJob.job_key}`)
                .done(function(response) {
                    const data = response.data || {};

                    writeKalenderShiftSyncJob({
                        ...activeJob,
                        last_payload: data,
                        updated_at: new Date().toISOString()
                    });

                    showKalenderShiftSyncCard();
                    updateKalenderShiftSyncUI(data);

                    if (data.status === 'completed' || data.status === 'failed') {
                        kalenderShiftSyncStartTime = null;
                        finishKalenderShiftSync(data);
                    } else if (data.status === 'queued') {
                        checkKalenderShiftSyncQueueTimeout();
                    }
                })
                .fail(function(xhr) {
                    if (xhr.status === 404) {
                        kalenderShiftSyncStartTime = null;
                        finishKalenderShiftSync({
                            status: 'failed',
                            progress: 100,
                            message: 'Status sync kalender shift tidak ditemukan atau sudah kedaluwarsa.'
                        });
                    }
                });
        }

        function startKalenderShiftSyncMonitor(jobKey) {
            kalenderShiftSyncStartTime = Date.now();

            writeKalenderShiftSyncJob({
                job_key: jobKey,
                started_at: new Date().toISOString(),
                last_payload: {
                    status: 'queued',
                    progress: 0,
                    message: 'Menunggu proses sync kalender shift dimulai...',
                    processed_steps: 0,
                    total_steps: 1
                }
            });

            showKalenderShiftSyncCard();
            updateKalenderShiftSyncUI({
                status: 'queued',
                progress: 0,
                message: 'Menunggu proses sync kalender shift dimulai...',
                processed_steps: 0,
                total_steps: 1
            });

            if (kalenderShiftSyncTimer) {
                clearInterval(kalenderShiftSyncTimer);
            }

            pollKalenderShiftStatus();
            kalenderShiftSyncTimer = setInterval(pollKalenderShiftStatus, 2000);
        }

        function checkKalenderShiftSyncQueueTimeout() {
            if (!kalenderShiftSyncStartTime) return;

            const activeJob = readKalenderShiftSyncJob();
            if (!activeJob || !activeJob.last_payload) return;

            const status = String(activeJob.last_payload.status || '');
            if (status !== 'queued') return;

            const elapsed = Date.now() - kalenderShiftSyncStartTime;
            if (elapsed >= MASTER_SYNC_QUEUE_TIMEOUT) {
                clearKalenderShiftSyncJob();
                hideKalenderShiftSyncCard();
                kalenderShiftSyncStartTime = null;

                Swal.fire({
                    title: 'Gagal',
                    text: 'Sync kalender shift tidak merespon dalam 10 detik. Proses dihentikan.',
                    icon: 'error',
                    confirmButtonColor: '#028284'
                }).then(() => {
                    // optional: nothing
                });
            }
        }

        function readKalenderShiftSyncJob() {
            try {
                const raw = localStorage.getItem('kalenderShiftSyncJob');
                return raw ? JSON.parse(raw) : null;
            } catch (error) {
                return null;
            }
        }

        function writeKalenderShiftSyncJob(payload) {
            localStorage.setItem('kalenderShiftSyncJob', JSON.stringify(payload));
        }

        function restoreKalenderShiftSyncState() {
            const activeJob = readKalenderShiftSyncJob();
            if (!activeJob || !activeJob.job_key) {
                hideKalenderShiftSyncCard();
                return;
            }

            const lastStatus = String(activeJob.last_payload?.status || '');
            if (lastStatus === 'queued') {
                kalenderShiftSyncStartTime = Date.now();
            }

            showKalenderShiftSyncCard();

            if (activeJob.last_payload) {
                updateKalenderShiftSyncUI(activeJob.last_payload);
            }

            if (kalenderShiftSyncTimer) {
                clearInterval(kalenderShiftSyncTimer);
            }

            pollKalenderShiftStatus();
            kalenderShiftSyncTimer = setInterval(pollKalenderShiftStatus, 2000);
        }

        function syncKalenderNonShift(button) {
            Swal.fire({
                title: 'Sinkronisasi Kalender Non Shift FTM',
                text: 'Sync akan memperbarui data kalender non shift dari database FTM, lanjutkan?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya',
                cancelButtonText: 'Tidak',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (!result.isConfirmed) return;

                clearKalenderNonShiftSyncJob();
                showKalenderNonShiftSyncCard();
                updateKalenderNonShiftSyncUI({
                    status: 'queued',
                    progress: 0,
                    message: 'Menunggu proses sync kalender non shift dimulai...',
                    processed_steps: 0,
                    total_steps: 1
                });

                const original = button.innerHTML;
                button.disabled = true;
                button.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i><span class="font-weight-bold">Syncing...</span>';

                $.post('{{ route("system.sync.kalendernonshift.start") }}', {
                    _token: '{{ csrf_token() }}'
                }).done(function (response) {
                    if (response.job_key) {
                        startKalenderNonShiftSyncMonitor(response.job_key);
                    } else {
                        hideKalenderNonShiftSyncCard();
                        Swal.fire('Gagal', 'Tidak menerima job key dari server.', 'error');
                    }
                }).fail(function (xhr) {
                    hideKalenderNonShiftSyncCard();
                    Swal.fire('Gagal', xhr.responseJSON?.message || 'Sync kalender non shift gagal.', 'error');
                }).always(function () {
                    button.disabled = false;
                    button.innerHTML = original;
                });
            });
        }

        function clearKalenderNonShiftSyncJob() {
            localStorage.removeItem('kalenderNonShiftSyncJob');
            if (kalenderNonShiftSyncTimer) {
                clearInterval(kalenderNonShiftSyncTimer);
                kalenderNonShiftSyncTimer = null;
            }
        }

        function showKalenderNonShiftSyncCard() {
            document.getElementById('kalenderNonShiftSyncProgressCard')?.classList.remove('d-none');
        }

        function hideKalenderNonShiftSyncCard() {
            document.getElementById('kalenderNonShiftSyncProgressCard')?.classList.add('d-none');
        }

        function updateKalenderNonShiftSyncUI(data) {
            const progress = Math.max(0, Math.min(100, parseInt(data.progress || 0, 10)));
            const status = String(data.status || 'queued');
            const message = data.message || 'Memproses sync kalender non shift...';
            const processedSteps = data.processed_steps || 0;
            const totalSteps = data.total_steps || 0;

            const progressBar = document.getElementById('kalenderNonShiftSyncProgressBar');
            const statusBadge = document.getElementById('kalenderNonShiftSyncStatusBadge');

            if (!progressBar || !statusBadge) {
                return;
            }

            progressBar.style.width = `${progress}%`;
            progressBar.setAttribute('aria-valuenow', progress);
            progressBar.textContent = `${progress}%`;

            document.getElementById('kalenderNonShiftSyncProgressMessage').textContent = message;
            document.getElementById('kalenderNonShiftSyncProgressMeta').textContent = `Tahap ${processedSteps} / ${totalSteps}`;

            statusBadge.className = 'badge';

            if (status === 'completed') {
                statusBadge.classList.add('bg-gradient-success');
                statusBadge.textContent = 'Selesai';
                progressBar.classList.remove('progress-bar-animated');
            } else if (status === 'failed') {
                statusBadge.classList.add('bg-gradient-danger');
                statusBadge.textContent = 'Gagal';
                progressBar.classList.remove('progress-bar-animated');
                progressBar.classList.remove('bg-success');
                progressBar.classList.add('bg-danger');
            } else {
                statusBadge.classList.add('bg-gradient-info');
                statusBadge.textContent = status === 'queued' ? 'Menunggu' : 'Berjalan';
                progressBar.classList.add('progress-bar-animated');
                progressBar.classList.remove('bg-danger');
                progressBar.classList.add('bg-success');
            }
        }

        function finishKalenderNonShiftSync(data) {
            const status = String(data.status || 'completed');
            const message = data.message || (status === 'completed' ? 'Sync kalender non shift selesai.' : 'Sync kalender non shift gagal.');
            const title = status === 'completed' ? 'Sukses' : 'Gagal';
            const icon = status === 'completed' ? 'success' : 'error';

            clearKalenderNonShiftSyncJob();
            kalenderNonShiftSyncStartTime = null;
            updateKalenderNonShiftSyncUI(data);

            if (status === 'completed') {
                setTimeout(() => {
                    hideKalenderNonShiftSyncCard();
                    window.location.reload();
                }, 1200);
            }

            Swal.fire(title, message, icon);
        }

        function pollKalenderNonShiftStatus() {
            const activeJob = readKalenderNonShiftSyncJob();
            if (!activeJob || !activeJob.job_key) {
                clearKalenderNonShiftSyncJob();
                hideKalenderNonShiftSyncCard();
                kalenderNonShiftSyncStartTime = null;
                return;
            }

            $.get(`{{ url('/system/sync/kalender-non-shift/status') }}/${activeJob.job_key}`)
                .done(function(response) {
                    const data = response.data || {};

                    writeKalenderNonShiftSyncJob({
                        ...activeJob,
                        last_payload: data,
                        updated_at: new Date().toISOString()
                    });

                    showKalenderNonShiftSyncCard();
                    updateKalenderNonShiftSyncUI(data);

                    if (data.status === 'completed' || data.status === 'failed') {
                        kalenderNonShiftSyncStartTime = null;
                        finishKalenderNonShiftSync(data);
                    } else if (data.status === 'queued') {
                        checkKalenderNonShiftSyncQueueTimeout();
                    }
                })
                .fail(function(xhr) {
                    if (xhr.status === 404) {
                        kalenderNonShiftSyncStartTime = null;
                        finishKalenderNonShiftSync({
                            status: 'failed',
                            progress: 100,
                            message: 'Status sync kalender non shift tidak ditemukan atau sudah kedaluwarsa.'
                        });
                    }
                });
        }

        function startKalenderNonShiftSyncMonitor(jobKey) {
            kalenderNonShiftSyncStartTime = Date.now();

            writeKalenderNonShiftSyncJob({
                job_key: jobKey,
                started_at: new Date().toISOString(),
                last_payload: {
                    status: 'queued',
                    progress: 0,
                    message: 'Menunggu proses sync kalender non shift dimulai...',
                    processed_steps: 0,
                    total_steps: 1
                }
            });

            showKalenderNonShiftSyncCard();
            updateKalenderNonShiftSyncUI({
                status: 'queued',
                progress: 0,
                message: 'Menunggu proses sync kalender non shift dimulai...',
                processed_steps: 0,
                total_steps: 1
            });

            if (kalenderNonShiftSyncTimer) {
                clearInterval(kalenderNonShiftSyncTimer);
            }

            pollKalenderNonShiftStatus();
            kalenderNonShiftSyncTimer = setInterval(pollKalenderNonShiftStatus, 2000);
        }

        function checkKalenderNonShiftSyncQueueTimeout() {
            if (!kalenderNonShiftSyncStartTime) return;

            const activeJob = readKalenderNonShiftSyncJob();
            if (!activeJob || !activeJob.last_payload) return;

            const status = String(activeJob.last_payload.status || '');
            if (status !== 'queued') return;

            const elapsed = Date.now() - kalenderNonShiftSyncStartTime;
            if (elapsed >= MASTER_SYNC_QUEUE_TIMEOUT) {
                clearKalenderNonShiftSyncJob();
                hideKalenderNonShiftSyncCard();
                kalenderNonShiftSyncStartTime = null;

                Swal.fire({
                    title: 'Gagal',
                    text: 'Sync kalender non shift tidak merespon dalam 10 detik. Proses dihentikan.',
                    icon: 'error',
                    confirmButtonColor: '#028284'
                }).then(() => {
                    // optional: nothing
                });
            }
        }

        function readKalenderNonShiftSyncJob() {
            try {
                const raw = localStorage.getItem('kalenderNonShiftSyncJob');
                return raw ? JSON.parse(raw) : null;
            } catch (error) {
                return null;
            }
        }

        function writeKalenderNonShiftSyncJob(payload) {
            localStorage.setItem('kalenderNonShiftSyncJob', JSON.stringify(payload));
        }

        function restoreKalenderNonShiftSyncState() {
            const activeJob = readKalenderNonShiftSyncJob();
            if (!activeJob || !activeJob.job_key) {
                hideKalenderNonShiftSyncCard();
                return;
            }

            const lastStatus = String(activeJob.last_payload?.status || '');
            if (lastStatus === 'queued') {
                kalenderNonShiftSyncStartTime = Date.now();
            }

            showKalenderNonShiftSyncCard();

            if (activeJob.last_payload) {
                updateKalenderNonShiftSyncUI(activeJob.last_payload);
            }

            if (kalenderNonShiftSyncTimer) {
                clearInterval(kalenderNonShiftSyncTimer);
            }

            pollKalenderNonShiftStatus();
            kalenderNonShiftSyncTimer = setInterval(pollKalenderNonShiftStatus, 2000);
        }

        function syncShift(button) {
            Swal.fire({
                title: 'Sinkronisasi Jadwal Shift FTM',
                text: 'Sync akan memperbarui data jadwal shift dari database FTM, lanjutkan?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya',
                cancelButtonText: 'Tidak',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (!result.isConfirmed) return;

                clearShiftSyncJob();
                showShiftSyncCard();
                updateShiftSyncUI({
                    status: 'queued',
                    progress: 0,
                    message: 'Menunggu proses sync jadwal shift dimulai...',
                    processed_steps: 0,
                    total_steps: 1
                });

                const original = button.innerHTML;
                button.disabled = true;
                button.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i><span class="font-weight-bold">Syncing...</span>';

                $.post('{{ route("system.sync.shift.start") }}', {
                    _token: '{{ csrf_token() }}'
                }).done(function (response) {
                    if (response.job_key) {
                        startShiftSyncMonitor(response.job_key);
                    } else {
                        hideShiftSyncCard();
                        Swal.fire('Gagal', 'Tidak menerima job key dari server.', 'error');
                    }
                }).fail(function (xhr) {
                    hideShiftSyncCard();
                    Swal.fire('Gagal', xhr.responseJSON?.message || 'Sync jadwal shift gagal.', 'error');
                }).always(function () {
                    button.disabled = false;
                    button.innerHTML = original;
                });
            });
        }

        function clearShiftSyncJob() {
            localStorage.removeItem('shiftSyncJob');
            if (shiftSyncTimer) {
                clearInterval(shiftSyncTimer);
                shiftSyncTimer = null;
            }
        }

        function showShiftSyncCard() {
            document.getElementById('shiftSyncProgressCard')?.classList.remove('d-none');
        }

        function hideShiftSyncCard() {
            document.getElementById('shiftSyncProgressCard')?.classList.add('d-none');
        }

        function updateShiftSyncUI(data) {
            const progress = Math.max(0, Math.min(100, parseInt(data.progress || 0, 10)));
            const status = String(data.status || 'queued');
            const message = data.message || 'Memproses sync jadwal shift...';
            const processedSteps = data.processed_steps || 0;
            const totalSteps = data.total_steps || 0;

            const progressBar = document.getElementById('shiftSyncProgressBar');
            const statusBadge = document.getElementById('shiftSyncStatusBadge');

            if (!progressBar || !statusBadge) {
                return;
            }

            progressBar.style.width = `${progress}%`;
            progressBar.setAttribute('aria-valuenow', progress);
            progressBar.textContent = `${progress}%`;

            document.getElementById('shiftSyncProgressMessage').textContent = message;
            document.getElementById('shiftSyncProgressMeta').textContent = `Tahap ${processedSteps} / ${totalSteps}`;

            statusBadge.className = 'badge';

            if (status === 'completed') {
                statusBadge.classList.add('bg-gradient-success');
                statusBadge.textContent = 'Selesai';
                progressBar.classList.remove('progress-bar-animated');
            } else if (status === 'failed') {
                statusBadge.classList.add('bg-gradient-danger');
                statusBadge.textContent = 'Gagal';
                progressBar.classList.remove('progress-bar-animated');
                progressBar.classList.remove('bg-success');
                progressBar.classList.add('bg-danger');
            } else {
                statusBadge.classList.add('bg-gradient-info');
                statusBadge.textContent = status === 'queued' ? 'Menunggu' : 'Berjalan';
                progressBar.classList.add('progress-bar-animated');
                progressBar.classList.remove('bg-danger');
                progressBar.classList.add('bg-success');
            }
        }

        function finishShiftSync(data) {
            const status = String(data.status || 'completed');
            const message = data.message || (status === 'completed' ? 'Sync jadwal shift selesai.' : 'Sync jadwal shift gagal.');
            const title = status === 'completed' ? 'Sukses' : 'Gagal';
            const icon = status === 'completed' ? 'success' : 'error';

            clearShiftSyncJob();
            shiftSyncStartTime = null;
            updateShiftSyncUI(data);

            if (status === 'completed') {
                setTimeout(() => {
                    hideShiftSyncCard();
                    window.location.reload();
                }, 1200);
            }

            Swal.fire(title, message, icon);
        }

        function pollShiftStatus() {
            const activeJob = readShiftSyncJob();
            if (!activeJob || !activeJob.job_key) {
                clearShiftSyncJob();
                hideShiftSyncCard();
                shiftSyncStartTime = null;
                return;
            }

            $.get(`{{ url('/system/sync/shift/status') }}/${activeJob.job_key}`)
                .done(function(response) {
                    const data = response.data || {};

                    writeShiftSyncJob({
                        ...activeJob,
                        last_payload: data,
                        updated_at: new Date().toISOString()
                    });

                    showShiftSyncCard();
                    updateShiftSyncUI(data);

                    if (data.status === 'completed' || data.status === 'failed') {
                        shiftSyncStartTime = null;
                        finishShiftSync(data);
                    } else if (data.status === 'queued') {
                        checkShiftSyncQueueTimeout();
                    }
                })
                .fail(function(xhr) {
                    if (xhr.status === 404) {
                        shiftSyncStartTime = null;
                        finishShiftSync({
                            status: 'failed',
                            progress: 100,
                            message: 'Status sync jadwal shift tidak ditemukan atau sudah kedaluwarsa.'
                        });
                    }
                });
        }

        function startShiftSyncMonitor(jobKey) {
            shiftSyncStartTime = Date.now();

            writeShiftSyncJob({
                job_key: jobKey,
                started_at: new Date().toISOString(),
                last_payload: {
                    status: 'queued',
                    progress: 0,
                    message: 'Menunggu proses sync jadwal shift dimulai...',
                    processed_steps: 0,
                    total_steps: 1
                }
            });

            showShiftSyncCard();
            updateShiftSyncUI({
                status: 'queued',
                progress: 0,
                message: 'Menunggu proses sync jadwal shift dimulai...',
                processed_steps: 0,
                total_steps: 1
            });

            if (shiftSyncTimer) {
                clearInterval(shiftSyncTimer);
            }

            pollShiftStatus();
            shiftSyncTimer = setInterval(pollShiftStatus, 2000);
        }

        function checkShiftSyncQueueTimeout() {
            if (!shiftSyncStartTime) return;

            const activeJob = readShiftSyncJob();
            if (!activeJob || !activeJob.last_payload) return;

            const status = String(activeJob.last_payload.status || '');
            if (status !== 'queued') return;

            const elapsed = Date.now() - shiftSyncStartTime;
            if (elapsed >= MASTER_SYNC_QUEUE_TIMEOUT) {
                clearShiftSyncJob();
                hideShiftSyncCard();
                shiftSyncStartTime = null;

                Swal.fire({
                    title: 'Gagal',
                    text: 'Sync jadwal shift tidak merespon dalam 10 detik. Proses dihentikan.',
                    icon: 'error',
                    confirmButtonColor: '#028284'
                }).then(() => {
                    // optional: nothing
                });
            }
        }

        function readShiftSyncJob() {
            try {
                const raw = localStorage.getItem('shiftSyncJob');
                return raw ? JSON.parse(raw) : null;
            } catch (error) {
                return null;
            }
        }

        function writeShiftSyncJob(payload) {
            localStorage.setItem('shiftSyncJob', JSON.stringify(payload));
        }

        function restoreShiftSyncState() {
            const activeJob = readShiftSyncJob();
            if (!activeJob || !activeJob.job_key) {
                hideShiftSyncCard();
                return;
            }

            const lastStatus = String(activeJob.last_payload?.status || '');
            if (lastStatus === 'queued') {
                shiftSyncStartTime = Date.now();
            }

            showShiftSyncCard();

            if (activeJob.last_payload) {
                updateShiftSyncUI(activeJob.last_payload);
            }

            if (shiftSyncTimer) {
                clearInterval(shiftSyncTimer);
            }

            pollShiftStatus();
            shiftSyncTimer = setInterval(pollShiftStatus, 2000);
        }

        $(document).ready(function() {

            //check note
            if ($('*').hasClass('exp')) {
                $('#noted').html(`<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;"
                class="fas fa-circle"></i> {{ ($dmenu ?? '') === 'mstlpk' ? 'Data not synchronized' : (($dmenu ?? '') === 'mstjsh' ? 'Time crosses to the next day' : 'Data not active') }} ), ( <i aria-hidden="true"
                style="color: #ffe768;" class="fas fa-circle"></i> ` + $('#datenote').text() + ` )</code>`)
            }
            if ($('*').hasClass('stock')) {
                $('#noted').html(`<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;"
                class="fas fa-circle"></i> {{ ($dmenu ?? '') === 'mstlpk' ? 'Data not synchronized' : (($dmenu ?? '') === 'mstjsh' ? 'Time crosses to the next day' : 'Data not active') }} ), ( <i aria-hidden="true"
                style="color: #f93c3c;" class="fas fa-circle"></i> ` + $('#stocknote').text() + ` )</code>`)
            }
            if ($('*').hasClass('exp') && $('*').hasClass('stock')) {
                $('#noted').html(`<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;"
                class="fas fa-circle"></i> {{ ($dmenu ?? '') === 'mstlpk' ? 'Data not synchronized' : (($dmenu ?? '') === 'mstjsh' ? 'Time crosses to the next day' : 'Data not active') }} ), ( <i aria-hidden="true"
                style="color: #ffe768;" class="fas fa-circle"></i> ` + $('#datenote').text() + ` ), ( <i aria-hidden="true"
                style="color: #f93c3c;" class="fas fa-circle"></i> ` + $('#stocknote').text() + ` )</code>`)
            }
            //set table into datatables
            if ($.fn.DataTable.isDataTable('#list_{{ $dmenu }}')) {
                $('#list_{{ $dmenu }}').DataTable().destroy();
            }

            const listTable = $('#list_{{ $dmenu }}').DataTable({
                processing: true,
                serverSide: true,
                deferRender: true,
                searchDelay: 350,
                columns: [
                    {
                        data: 0,
                        defaultContent: '',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 1,
                        defaultContent: '',
                        orderable: false,
                        searchable: false
                    },
                    @foreach ($table_header as $header)
                        {
                            data: {{ $loop->index + 2 }},
                            defaultContent: '-'
                        }@if (! $loop->last),@endif
                    @endforeach
                ],
                @if (($dmenu ?? '') === 'mstlpk')
                order: [[2, 'asc']],
                @endif
                ajax: {
                    url: "{{ url($url_menu . '/ajax') }}",
                    type: 'GET',
                    data: function(d) {
                        @if (($dmenu ?? '') === 'mstlpk')
                            d.status_link = linkPinStatusFilter.length ? linkPinStatusFilter.val() : '{{ request('status_link', 'semua') }}';
                        @endif
                        @if (in_array($dmenu ?? '', ['mstkls', 'mstkns'], true))
                            d.filter_year = $('#calendarYearFilter').length ? $('#calendarYearFilter').val() : '{{ request('filter_year', '') }}';
                        @endif
                    }
                },
                createdRow: function(row) {
                    const isActive = $(row).find('.row-flag').data('isactive');
                    const statusLink = String($(row).find('.row-flag').data('status-link') || $(row).find('.row-link-status').data('status-link') || '');
                    if (String(isActive) === '0') {
                        $(row).addClass('not').css('background-color', '#ffe9ed');
                    } else if ("{{ $dmenu }}" === 'mstlpk' && statusLink === 'Pending') {
                        $(row).addClass('pending-link').css('background-color', '#ffe9ed');
                    }
                },
                drawCallback: function() {
                    $('#list_{{ $dmenu }} tbody tr').each(function() {
                        const isActive = $(this).find('.row-flag').data('isactive');
                        if (String(isActive) === '0') {
                            $(this).addClass('not').css('background-color', '#ffe9ed');
                        }
                    });

                    if ("{{ $dmenu }}" !== 'mstlpk') {
                        return;
                    }

                    $('#list_{{ $dmenu }} tbody tr').each(function() {
                        const statusLink = String($(this).find('.row-flag').data('status-link') || $(this).find('.row-link-status').data('status-link') || '');
                        if (statusLink === 'Pending') {
                            $(this).addClass('pending-link').css('background-color', '#ffe9ed');
                        }
                    });
                },
                paging: true,
                pagingType: 'simple_numbers',
                info: true,
                searching: true,
                responsive: true,
                language: {
                    zeroRecords: "Maaf - Data tidak ada"
                },
                dom: '<"row mb-2 align-items-center"<"col-lg-6 d-flex align-items-center gap-2 flex-wrap"B><"col-lg-6 d-flex justify-content-end align-items-center gap-2 flex-wrap"f>>rtip',
                buttons: [{
                        text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel</span>',
                        action: function() {
                            const statusLink = linkPinStatusFilter.length ? linkPinStatusFilter.val() : 'semua';
                            const yearFilter = $('#calendarYearFilter').length ? $('#calendarYearFilter').val() : '{{ request('filter_year', '') }}';
                            window.location.href = "{{ url($url_menu) }}?export=excel&search={{ request()->input('search') }}&status_link=" + encodeURIComponent(statusLink) + "&filter_year=" + encodeURIComponent(yearFilter);
                        }
                    },
                    {
                        text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF</span>',
                        action: function() {
                            const statusLink = linkPinStatusFilter.length ? linkPinStatusFilter.val() : 'semua';
                            const yearFilter = $('#calendarYearFilter').length ? $('#calendarYearFilter').val() : '{{ request('filter_year', '') }}';
                            window.location.href = "{{ url($url_menu) }}?export=pdf&status_link=" + encodeURIComponent(statusLink) + "&filter_year=" + encodeURIComponent(yearFilter);
                        }
                    },
                ],
                initComplete: function() {
                    $('.dataTables_filter label').contents().filter(function() {
                        return this.nodeType === 3;
                    }).replaceWith('Cari: ');
                    $('.dt-button').addClass('btn btn-secondary mb-0');
                    $('.dt-button').removeClass('dt-button');
                    $('.dt-buttons').addClass('d-flex align-items-center gap-2 flex-wrap mb-0');

                    <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjabsensi/resources/views/master/auto/list.blade.php</b> on line <b>1480</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/msjabsensi/resources/views/master/auto/list.blade.php</b> on line <b>1480</b><br />
                    <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjabsensi/resources/views/master/auto/list.blade.php</b> on line <b>1481</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/msjabsensi/resources/views/master/auto/list.blade.php</b> on line <b>1481</b><br />
                    <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjabsensi/resources/views/master/auto/list.blade.php</b> on line <b>1482</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/msjabsensi/resources/views/master/auto/list.blade.php</b> on line <b>1482</b><br />

                    @if (($dmenu ?? '') === 'mstlpk')
                        if (linkPinStatusFilter.length) {
                            $('#linkPinStatusFilterContainer').removeClass('d-none');
                            $('.dataTables_filter').addClass('d-flex align-items-center justify-content-end gap-2 flex-wrap mb-0');
                            $('.dataTables_filter').prepend($('#linkPinStatusFilterContainer').children());
                        }
                    @endif
                    @if (in_array($dmenu ?? '', ['mstkls', 'mstkns'], true))
                        if ($('#calendarYearFilter').length) {
                            $('#calendarYearFilterContainer').removeClass('d-none');
                            $('.dataTables_filter').addClass('d-flex align-items-center justify-content-end gap-2 flex-wrap mb-0');
                            $('.dataTables_filter').prepend($('#calendarYearFilterContainer').children());
                        }
                    @endif
                }
            });

            @if (($dmenu ?? '') === 'mstlpk')
                if (linkPinStatusFilter.length) {
                    linkPinStatusFilter.on('change', function() {
                        listTable.ajax.reload();
                    });
                }

                restoreMasterSyncState();
            @endif
            @if (($dmenu ?? '') === 'mstjsh')
                restoreShiftSyncState();
            @endif
            @if (($dmenu ?? '') === 'mstkls')
                restoreKalenderShiftSyncState();
            @endif
            @if (($dmenu ?? '') === 'mstkns')
                restoreKalenderNonShiftSyncState();
            @endif
            @if (in_array($dmenu ?? '', ['mstkls', 'mstkns'], true))
                if ($('#calendarYearFilter').length) {
                    $('#calendarYearFilter').on('change', function() {
                        listTable.ajax.reload();
                    });
                }
            @endif
        });

        //function delete
        function deleteData(event, name, msg) {
            event.preventDefault(); // Prevent default form submission
            Swal.fire({
                title: 'Konfirmasi',
                text: `Apakah Anda Yakin ${msg} Data ${name} ini?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: `Ya, ${msg}`,
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Find the closest form element and submit it manually
                    event.target.closest('form').submit();
                }
            });
        }

        function syncMasterLinkPin(button) {
            Swal.fire({
                title: 'Sinkronisasi Link Pin Karyawan',
                text: masterSyncStatusNama !== ''
                    ? `Sync hanya memperbarui data link pin karyawan dengan status ${masterSyncStatusNama}, lanjutkan?`
                    : 'Sync akan memperbarui data link pin karyawan, lanjutkan?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya',
                cancelButtonText: 'Tidak',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (!result.isConfirmed) return;

                clearMasterSyncJob();
                showMasterSyncCard();
                updateMasterSyncUI({
                    status: 'queued',
                    progress: 0,
                    message: 'Menunggu proses sync master dimulai...',
                    processed_steps: 0,
                    total_steps: 1
                });

                const original = button.innerHTML;
                button.disabled = true;
                button.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i><span class="font-weight-bold">Syncing...</span>';

                $.post('{{ route("system.sync.master.start") }}', {
                    _token: '{{ csrf_token() }}'
                }).done(function (response) {
                    if (response.job_key) {
                        startMasterSyncMonitor(response.job_key);
                    } else {
                        hideMasterSyncCard();
                        Swal.fire('Gagal', 'Tidak menerima job key dari server.', 'error');
                    }
                }).fail(function (xhr) {
                    hideMasterSyncCard();
                    Swal.fire('Gagal', xhr.responseJSON?.message || 'Sync master gagal.', 'error');
                }).always(function () {
                    button.disabled = false;
                    button.innerHTML = original;
                });
            });
        }

        function readMasterSyncJob() {
            try {
                const raw = localStorage.getItem(masterSyncStorageKey);
                return raw ? JSON.parse(raw) : null;
            } catch (error) {
                return null;
            }
        }

        function writeMasterSyncJob(payload) {
            localStorage.setItem(masterSyncStorageKey, JSON.stringify(payload));
        }

        function clearMasterSyncJob() {
            localStorage.removeItem(masterSyncStorageKey);
            if (masterSyncTimer) {
                clearInterval(masterSyncTimer);
                masterSyncTimer = null;
            }
        }

        function showMasterSyncCard() {
            document.getElementById('masterSyncProgressCard')?.classList.remove('d-none');
        }

        function hideMasterSyncCard() {
            document.getElementById('masterSyncProgressCard')?.classList.add('d-none');
        }

        function updateMasterSyncUI(data) {
            const progress = Math.max(0, Math.min(100, parseInt(data.progress || 0, 10)));
            const status = String(data.status || 'queued');
            const message = data.message || 'Memproses sync master...';
            const processedSteps = data.processed_steps || 0;
            const totalSteps = data.total_steps || 0;

            const progressBar = document.getElementById('masterSyncProgressBar');
            const statusBadge = document.getElementById('masterSyncStatusBadge');

            if (!progressBar || !statusBadge) {
                return;
            }

            progressBar.style.width = `${progress}%`;
            progressBar.setAttribute('aria-valuenow', progress);
            progressBar.textContent = `${progress}%`;

            document.getElementById('masterSyncProgressMessage').textContent = message;
            document.getElementById('masterSyncProgressMeta').textContent = `Tahap ${processedSteps} / ${totalSteps}`;

            statusBadge.className = 'badge';

            if (status === 'completed') {
                statusBadge.classList.add('bg-gradient-success');
                statusBadge.textContent = 'Selesai';
                progressBar.classList.remove('progress-bar-animated');
            } else if (status === 'failed') {
                statusBadge.classList.add('bg-gradient-danger');
                statusBadge.textContent = 'Gagal';
                progressBar.classList.remove('progress-bar-animated');
                progressBar.classList.remove('bg-success');
                progressBar.classList.add('bg-danger');
            } else {
                statusBadge.classList.add('bg-gradient-info');
                statusBadge.textContent = status === 'queued' ? 'Menunggu' : 'Berjalan';
                progressBar.classList.add('progress-bar-animated');
                progressBar.classList.remove('bg-danger');
                progressBar.classList.add('bg-success');
            }
        }

        function finishMasterSync(data) {
            const status = String(data.status || 'completed');
            const syncedCount = parseInt(data.synced_count || 0, 10) || 0;
            const statusNama = String(data.status_nama || masterSyncStatusNama || '').trim();
            let message = data.message || (status === 'completed' ? 'Sync master selesai.' : 'Sync master gagal.');

            // Pesan disesuaikan dengan jumlah karyawan yang disinkronkan sesuai status.
            if (status === 'completed' && syncedCount > 0) {
                message = `${syncedCount} karyawan${statusNama !== '' ? ' (status ' + statusNama + ')' : ''} berhasil disinkronkan.`;
            }

            const title = status === 'completed' ? 'Sukses' : 'Gagal';
            const icon = status === 'completed' ? 'success' : 'error';

            clearMasterSyncJob();
            masterSyncStartTime = null;
            updateMasterSyncUI(data);

            const candidates = Array.isArray(data.one_word_candidates) ? data.one_word_candidates : [];

            if (status === 'completed' && candidates.length > 0) {
                showOneWordConfirmations(data.job_key || '', candidates);
                return;
            }

            if (status === 'completed') {
                setTimeout(() => {
                    hideMasterSyncCard();
                    window.location.reload();
                }, 1200);
            }

            Swal.fire(title, message, icon);
        }

        function showOneWordConfirmations(jobKey, candidates) {
            let rowsHtml = '';
            candidates.forEach(function (c, idx) {
                rowsHtml += '<tr>' +
                    '<td class="text-center"><input type="checkbox" class="one-word-check" data-index="' + idx + '" checked></td>' +
                    '<td class="text-start"><div class="text-sm font-weight-bold">' + (c.nik_hris || '-') + '</div><div class="text-xs text-secondary">' + (c.nama_hris || '-') + '</div></td>' +
                    '<td class="text-start"><div class="text-sm font-weight-bold">' + (c.nik_ftm || '-') + ' / ' + (c.pin_ftm || '-') + '</div><div class="text-xs text-secondary">' + (c.nama_ftm || '-') + '</div></td>' +
                    '</tr>';
            });

            const tableHtml = '<div class="table-responsive" style="max-height:300px;overflow-y:auto;">' +
                '<table class="table table-sm table-bordered align-middle mb-0 text-sm">' +
                '<thead class="thead-light"><tr><th class="text-center" style="width:50px;"><input type="checkbox" id="one-word-check-all" checked></th><th>HRIS (NIK / Nama)</th><th>FTM (NIK / PIN / Nama)</th></tr></thead>' +
                '<tbody>' + rowsHtml + '</tbody></table></div>';

            Swal.fire({
                title: 'Konfirmasi Link Karyawan',
                html: '<p class="text-start text-sm mb-2">Ditemukan <strong>' + candidates.length + '</strong> karyawan dengan NIK HRIS cocok dengan NIK/PIN FTM ber-prefix "1" (1 kata nama sama). Centang yang ingin di-link. Yang tidak dicentang tetap Pending.</p>' + tableHtml,
                icon: 'question',
                width: 800,
                showCancelButton: true,
                confirmButtonText: 'Ya, Link yang Dipilih',
                cancelButtonText: 'Tidak / Lewati Semua',
                confirmButtonColor: '#028284',
                didOpen: function () {
                    var checkAll = document.getElementById('one-word-check-all');
                    var checkboxes = document.querySelectorAll('.one-word-check');
                    if (checkAll && checkboxes.length > 0) {
                        checkAll.addEventListener('change', function () {
                            checkboxes.forEach(function (cb) { cb.checked = checkAll.checked; });
                        });
                    }
                }
            }).then(function (result) {
                var selected = [];
                document.querySelectorAll('.one-word-check').forEach(function (cb) {
                    if (cb.checked) {
                        var idx = parseInt(cb.getAttribute('data-index'), 10);
                        var c = candidates[idx];
                        if (c) selected.push(c);
                    }
                });

                if (!result.isConfirmed || selected.length === 0) {
                    Swal.fire('Selesai', 'Tidak ada karyawan yang di-link. Status tetap Pending.', 'info').then(function () {
                        hideMasterSyncCard();
                        window.location.reload();
                    });
                    return;
                }

                $.post('{{ route("system.sync.master.apply_confirmations") }}', {
                    _token: '{{ csrf_token() }}',
                    job_key: jobKey,
                    selections: selected
                }).done(function (response) {
                    Swal.fire('Sukses', response.message || 'Berhasil meng-link karyawan terpilih.', 'success').then(function () {
                        hideMasterSyncCard();
                        window.location.reload();
                    });
                }).fail(function (xhr) {
                    Swal.fire('Gagal', xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Gagal menerapkan konfirmasi.', 'error');
                });
            });
        }

        function pollMasterSyncStatus() {
            const activeJob = readMasterSyncJob();
            if (!activeJob || !activeJob.job_key) {
                clearMasterSyncJob();
                hideMasterSyncCard();
                masterSyncStartTime = null;
                return;
            }

            $.get(`{{ url('/system/sync/master/status') }}/${activeJob.job_key}`)
                .done(function(response) {
                    const data = response.data || {};

                    writeMasterSyncJob({
                        ...activeJob,
                        last_payload: data,
                        updated_at: new Date().toISOString()
                    });

                    showMasterSyncCard();
                    updateMasterSyncUI(data);

                    if (data.status === 'completed' || data.status === 'failed') {
                        masterSyncStartTime = null;
                        finishMasterSync({ ...data, job_key: activeJob.job_key });
                    } else if (data.status === 'queued') {
                        checkMasterSyncQueueTimeout();
                    }
                })
                .fail(function(xhr) {
                    if (xhr.status === 404) {
                        masterSyncStartTime = null;
                        finishMasterSync({
                            status: 'failed',
                            progress: 100,
                            message: 'Status sync master tidak ditemukan atau sudah kedaluwarsa.'
                        });
                    }
                });
        }

        function startMasterSyncMonitor(jobKey) {
            masterSyncStartTime = Date.now();

            writeMasterSyncJob({
                job_key: jobKey,
                started_at: new Date().toISOString(),
                last_payload: {
                    status: 'queued',
                    progress: 0,
                    message: 'Menunggu proses sync master dimulai...',
                    processed_steps: 0,
                    total_steps: 1
                }
            });

            showMasterSyncCard();
            updateMasterSyncUI({
                status: 'queued',
                progress: 0,
                message: 'Menunggu proses sync master dimulai...',
                processed_steps: 0,
                total_steps: 1
            });

            if (masterSyncTimer) {
                clearInterval(masterSyncTimer);
            }

            pollMasterSyncStatus();
            masterSyncTimer = setInterval(pollMasterSyncStatus, 2000);
        }

        function checkMasterSyncQueueTimeout() {
            if (!masterSyncStartTime) return;

            const activeJob = readMasterSyncJob();
            if (!activeJob || !activeJob.last_payload) return;

            const status = String(activeJob.last_payload.status || '');
            if (status !== 'queued') return;

            const elapsed = Date.now() - masterSyncStartTime;
            if (elapsed >= MASTER_SYNC_QUEUE_TIMEOUT) {
                clearMasterSyncJob();
                hideMasterSyncCard();
                masterSyncStartTime = null;

                Swal.fire({
                    title: 'Gagal',
                    text: 'Sync master tidak merespon dalam 10 detik. Proses dihentikan.',
                    icon: 'error',
                    confirmButtonColor: '#028284'
                }).then(() => {
                    // optional: nothing
                });
            }
        }

        function restoreMasterSyncState() {
            const activeJob = readMasterSyncJob();
            if (!activeJob || !activeJob.job_key) {
                hideMasterSyncCard();
                return;
            }

            // Jika saat restore status masih queued, mulai timeout checker
            const lastStatus = String(activeJob.last_payload?.status || '');
            if (lastStatus === 'queued') {
                masterSyncStartTime = Date.now();
            }

            showMasterSyncCard();

            if (activeJob.last_payload) {
                updateMasterSyncUI(activeJob.last_payload);
            }

            if (masterSyncTimer) {
                clearInterval(masterSyncTimer);
            }

            pollMasterSyncStatus();
            masterSyncTimer = setInterval(pollMasterSyncStatus, 2000);
        }

        $(window).on('beforeunload', function() {
            clearMasterSyncJob();
        });
    </script>
@endpush