@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    @php
        $hasActivePeriodeCuti = collect($periode ?? [])->contains(function ($prd) {
            return (string) ($prd->isactive ?? '0') === '1';
        });
    @endphp
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                {{-- Mencari data secara async --}}
                <div class="card mb-4">
                    <div class="card-header col-md-auto"> {{-- Menyelaraskan judul --}}
                        <h5 class="mb-0">Pencarian</h5>
                    </div>
                    <div class="col">
                        {{-- alert --}}
                        @include('components.alert')
                    </div>
                    <hr class="horizontal dark mt-0">
                    <div class="card-body">
                        <div class="row">
                            <!-- Sampai Tanggal -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="tanggal_mulai">Dari Tanggal</label>
                                    <input type="text" id="tanggal_mulai" class="form-control"
                                        placeholder="Pilih rentan tanggal">
                                    <input type="hidden" name="tanggal_mulai" id="tanggal_mulai_hidden">
                                </div>
                            </div>

                            <!-- Dari Tanggal -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="tanggal_berakhir">Sampai Tanggal</label>
                                    <input type="text" id="tanggal_berakhir" class="form-control"
                                        placeholder="Pilih rentan tanggal">
                                    <input type="hidden" name="tanggal_berakhir" id="tanggal_berakhir_hidden">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="kategori_perizinan_id">Kategori Izin/Tugas</label>
                                    <select name="kategori_perizinan_id" id="kategori_perizinan_id" class="form-control">
                                        <option value="">Perlihatkan Semua</option>
                                        @foreach ($kategori_perizinan as $kategori)
                                            <option value="{{ $kategori->id }}">{{ $kategori->nama }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="jenis_izin_id">Jenis Izin</label>
                                    <select name="jenis_izin_id" id="jenis_izin_id" class="form-control">
                                        <option value="">Perlihatkan Semua</option>
                                        @foreach ($jenis_izin as $jenis)
                                            <option value="{{ $jenis->id }}">{{ $jenis->nama }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="periode">Periode</label>
                                    <select name="periode" id="periode" class="form-control">
                                        <option value="">Perlihatkan Semua</option>
                                        @foreach ($periode as $prd)
                                            <option value="{{ $prd->id }}"
                                                {{ isset($set_periode) && $set_periode == $prd->id ? 'selected' : '' }}>
                                                {{ $prd->nama }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="assignedfor">Diajukan Untuk</label>
                                    <select name="assignedfor" id="assignedfor" class="form-control">
                                        <option value="">Perlihatkan Semua</option>
                                        <option value="diri_sendiri"
                                            {{ isset($set_assignedfor) && $set_assignedfor == 'diri_sendiri' ? 'selected' : '' }}>
                                            Diri Sendiri</option>
                                        <option value="orang_lain"
                                            {{ isset($set_assignedfor) && $set_assignedfor == 'orang_lain' ? 'selected' : '' }}>
                                            Orang Lain</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            {{-- Add pencarian bebas --}}
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="search">Pencarian Bebas</label>
                                    <input type="text" class="form-control" id="search" name="search"
                                        placeholder="Pencarian Bebas">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <button class="btn btn-primary" id="btn_cari">
                                    Cari
                                    <!-- Spinner (hidden by default) -->
                                    <div id="loading-spinner" class="spinner-border spinner-border-sm text-light"
                                        role="status" style="display: none; margin-left: 10px;">
                                        <span class="sr-only">Loading...</span>
                                    </div>
                                </button>
                                <script>
                                    $(document).ready(function() {
                                        $('#search').on('keypress', function(e) {
                                            if (e.which == 13) { // Enter key pressed
                                                $('#btn_cari').click(); // Trigger the button click event
                                            }
                                        });
                                    });
                                </script>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card mb-4"> {{-- Menambahkan margin bawah untuk jarak antar card --}}
                    <div class="card-header col-md-auto"> {{-- Menyelarankan judul --}}
                        <h5 class="mb-0">List {{ $title_menu }}</h5>
                    </div>
                    <hr class="horizontal dark mt-0">
                    {{-- Batch forms (non-AJAX) --}}
                    @if ($authorize->approval == '1')
                        <form id="batchApproveForm" action="{{ url($url_menu . '/batch-approve') }}" method="POST"
                            style="display:none;">
                            @csrf
                        </form>
                        <form id="batchRejectForm" action="{{ url($url_menu . '/batch-reject') }}" method="POST"
                            style="display:none;">
                            @csrf
                            <input type="hidden" name="note" value="">
                        </form>
                    @endif
                    <div class="card-header col-md-auto">
                        <div class="col-md-12">
                            <p class="text-muted mb-0">Anda dapat memantau status check-in dan check-out dari satpam pada
                                tabel dibawah.
                            </p>
                        </div>
                    </div>
                    <div class="row px-4 py-2">
                        <div class="col-lg">
                            <div class="nav-wrapper d-flex flex-column flex-lg-row gap-2">
                                @if ($authorize->approval == '1')
                                    <button id="batchDecisionBtn" class="btn btn-success mb-0 w-100 w-lg-auto" disabled>
                                        <i class="fas fa-check-double me-1"></i><span class="font-weight-bold">Beri
                                            Keputusan untuk Data Terpilih</span>
                                    </button>
                                @endif
                                {{-- check authorize add --}}
                                @if ($authorize->add == '1')
                                    {{-- button add --}}
                                    <button class="btn btn-primary mb-0 w-100 w-lg-auto"
                                        onclick="handleTambahClick('{{ URL::to($url_menu . '/add') }}')"><i
                                            class="fas fa-plus me-1"> </i><span class="font-weight-bold">Tambah</span></button>
                                    <button class="btn btn-info mb-0 w-100 w-lg-auto"
                                        type="button" data-bs-toggle="modal"
                                        data-bs-target="#modalKirimEmailPerizinan">
                                        <i class="fas fa-envelope me-1"></i><span class="font-weight-bold">Kirim Email Form Perizinan</span>
                                    </button>
                                @endif

                            </div>
                        </div>
                    </div>
                    <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>
                                        @if ($authorize->approval == '1')
                                            <th><input type="checkbox" id="select_all"></th>
                                        @endif
                                        <th>No</th>
                                        <th>Action</th>
                                        {{-- retrieve table header --}}
                                        @foreach ($table_header as $header)
                                            <th>{{ $header->alias }}</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody>
                                    {{-- retrieve table detail --}}
                                    @foreach ($table_detail as $key => $detail)
                                        @php
                                            $primary = '';
                                            foreach ($table_primary as $p) {
                                                $primary == ''
                                                    ? ($primary = $detail->{$p->field})
                                                    : ($primary = $primary . ':' . $detail->{$p->field});
                                            }
                                            $vcount = $table_detail->firstItem() + $loop->index;
                                        @endphp
                                        <tr
                                           @if (property_exists($detail, 'status_persetujuan_atasan') && $detail->status_persetujuan_atasan == 'belum memutuskan')
                                                style="background-color:#e6d8ff;"
                                            @elseif ($detail->status == 'menyetujui')
                                                style="background-color:#c5ffbc;"
                                            @endif
                                        >
                                            @if ($authorize->approval == '1')
                                                <td>
                                                    {{-- @if ($detail->kategori_perizinan_id == 1) --}}
                                                    @if ($detail->kategori_perizinan_id == 1 && in_array($detail->status, ['menunggu', 'disetujui-atasan']))
                                                        <input type="checkbox" class="row-select"
                                                            value="{{ encrypt($primary) }}"
                                                            data-ktgrprzn="{{ $detail->kategori_perizinan_id ?? '' }}">
                                                    @endif
                                                </td>
                                            @endif
                                            <td>{{ $vcount }}</td>
                                            <td class="text-sm font-weight-normal">
                                                <div class="btn-group">
                                                    {{-- button view --}}
                                                    <button type="button" class="btn btn-sm btn-primary mb-0"
                                                        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>

                                                    <!-- Dropdown toggle -->
                                                    <button
                                                        class="btn btn-sm btn-primary dropdown-toggle dropdown-toggle-split mb-0"
                                                        data-bs-toggle="dropdown" aria-expanded="false"></button>

                                                    {{-- Dropdown menu --}}
                                                    <ul class="dropdown-menu">
                                                        @if ($authorize->approval == '1')
                                                            {{-- Lock and Unlock Button --}}
                                                            <li>
                                                                <form
                                                                    action="{{ url('lock-unlock/perizinan/personalia/' . encrypt($primary) . ($detail->edit_terkunci == '1' ? '/0' : '/1')) }}"
                                                                    method="POST"
                                                                    data-terkunci="{{ $detail->edit_terkunci }}"
                                                                    onsubmit="confirmLockUnlock(event, this)"
                                                                    style="display:inline;">
                                                                    @csrf
                                                                    <button type="submit"
                                                                        class="dropdown-item {{ $detail->edit_terkunci == 1 ? 'text-success' : 'text-danger' }} mb-0"
                                                                        title="Lock/Unlock Data">
                                                                        <i class="fas fa-lock"></i>
                                                                        {{ $detail->edit_terkunci == 1 ? 'Unlock Akses Edit' : 'Lock Akses Edit' }}
                                                                    </button>
                                                                </form>
                                                            </li>

                                                            {{-- Approval and Rejection Buttons --}}
                                                            @if ($detail->status == 'menyetujui')
                                                                <li>
                                                                    <button type="submit"
                                                                        class="dropdown-item text-secondary"
                                                                        onclick="showSwal('Anda telah menyetujui')"
                                                                        title="Telah disetujui">
                                                                        <i class="fas fa-circle"></i> Anda telah menyetujui
                                                                    </button>
                                                                </li>
                                                            @elseif ($detail->status == 'menolak')
                                                                <li>
                                                                    <button type="submit"
                                                                        class="dropdown-item text-secondary"
                                                                        onclick="showSwal('Anda telah menolak')"
                                                                        title="Telah ditolak">
                                                                        <i class="fas fa-ban"></i> Anda telah menolak
                                                                    </button>
                                                                </li>
                                                            @else
                                                                <li>
                                                                    <button type="submit"
                                                                        class="dropdown-item text-primary"
                                                                        onclick="openModal('{{ encrypt($primary) }}', $detail->kategori_perizinan_id)"
                                                                        title="Setujui Data">
                                                                        <i class="fas fa-check"></i> Beri Keputusan
                                                                    </button>
                                                                </li>
                                                            @endif
                                                        @endif

                                                        @if ($authorize->edit == '1')
                                                            <li>
                                                                <button class="dropdown-item text-warning"
                                                                    title="Edit Data"
                                                                    onclick="window.location='{{ url($url_menu . '/edit' . '/' . encrypt($primary)) }}'">
                                                                    <i class="fas fa-edit"></i> Edit
                                                                </button>
                                                            </li>
                                                        @endif
                                                    </ul>
                                                </div>
                                            </td>
                                            @foreach ($table_header as $field)
                                                @php
                                                    $string = $field->field;
                                                @endphp
                                                {{-- field type enum --}}
                                                @if ($field->type == 'enum')
                                                    {{-- Khusus kolom user_id (Nama Karyawan) pada acara khusus: tampilkan semua nama karyawan --}}
                                                    @if ($field->field == 'user_id' && $detail->jenis_izin_id == 4 && !empty($detail->nama_karyawan_list))
                                                        <td class="text-sm font-weight-normal align-top">
                                                            @include('pitk12.partials._nama_karyawan_list', [
                                                                'namaKaryawanList' => $detail->nama_karyawan_list,
                                                                'vcount' => $vcount,
                                                            ])
                                                        </td>
                                                    @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)) }}">
                                                                @if ($field->query != '')
                                                                    @php
                                                                        $data_query = DB::select($field->query);
                                                                    @endphp
                                                                    @foreach ($data_query as $q)
                                                                        <br />
<b>Warning</b>:  Undefined variable $q in <b>/opt/lampp/htdocs/msjhris/resources/views/pitkk1/pitkkb/list.blade.php</b> on line <b>333</b><br />
                                                                        {{ $detail->$string == $sAsArray[0] ? $sAsArray[1] : '' }}
                                                                    @endforeach
                                                                @endif
                                                                &nbsp;&nbsp;
                                                                <i aria-hidden="true" class="fas fa-external-link-alt">
                                                                </i>
                                                            </a>
                                                        @else
                                                            @if ($field->query != '')
                                                                @php
                                                                    $data_query = DB::select($field->query);
                                                                @endphp
                                                                @foreach ($data_query as $q)
                                                                    <br />
<b>Warning</b>:  Undefined variable $q in <b>/opt/lampp/htdocs/msjhris/resources/views/pitkk1/pitkkb/list.blade.php</b> on line <b>347</b><br />
                                                                    {{ $detail->$string == $sAsArray[0] ? $sAsArray[1] : '' }}
                                                                @endforeach
                                                            @endif
                                                        @endif
                                                    </td>
                                                    @endif
                                                    {{-- 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="{{ 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' }}">
                                                        @if ($field->query != '')
                                                            @php
                                                                $query = $field->query . "'" . $detail->$string . "'";
                                                                $data_query = DB::select($query);
                                                            @endphp
                                                            @foreach ($data_query as $q)
                                                                <br />
<b>Warning</b>:  Undefined variable $q in <b>/opt/lampp/htdocs/msjhris/resources/views/pitkk1/pitkkb/list.blade.php</b> on line <b>418</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
                                                        @endif
                                                    </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')
                                                    @php
                                                        if ($detail->$string != '') {
                                                            $dateValue = $detail->$string;
                                                            // Check if $dateValue is a valid date string and parse it accordingly
                                                            $formattedDate = \Carbon\Carbon::parse($dateValue)->format(
                                                                'd-m-Y H:i',
                                                            );
                                                        } else {
                                                            $formattedDate = '';
                                                        }
                                                    @endphp
                                                    <td
                                                        class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }} {{ $field->class == 'check-date' ? $detail->$string : '' }} text-end">
                                                        {{ $formattedDate }}
                                                    </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' }} text-end">
                                                        {{ $detail->$string }}
                                                    </td>
                                                @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 id="pagination-container" class="d-flex justify-content-between mt-4"
                            style="overflow-x: auto;">
                            @include('pitkk1.pitkkb.partials.pagination')
                        </div>
                    </div>
                    <div class="row px-4 py-2">
                        <div class="col-lg">
                            @if (in_array('shr123', $currentUserRoles))
                            <div class="nav-wrapper" id="noted">
                            <code>Note : <i
                                            style="color: #e6d8ff;" class="fas fa-circle"></i> Data belum disetujui atasan</code>
                            </div>
                            @endif

                        </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
    {{-- Js untuk fitur memberi keputusan --}}
    <script>
        const HAS_ACTIVE_PERIODE_CUTI = @json($hasActivePeriodeCuti);

        function handleTambahClick(addUrl) {
            if (!HAS_ACTIVE_PERIODE_CUTI) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Periode Izin/Tugas Tidak Aktif',
                    text: 'Tidak ada periode izin/tugas yang aktif saat ini. Silakan ajukan permohonan izin/tugas di lain waktu atau hubungi personalia.',
                    confirmButtonColor: '#028284'
                });
                return;
            }

            window.location = addUrl;
        }

        // Global variables for batch mode
        window.isBatchMode = false;
        window.batchIds = [];
        window.batchKtgrPrzn = null;

      function openModal(primary, ktgrPrzn) {
            window.currentPrimary = primary;
            window.isBatchMode = false;

            let extraHtml = '';

            // Jika kategori izin/tugas = 2 → tampilkan radio satpam
            if (ktgrPrzn == 2) {
                extraHtml = `
                    <hr>
                    <label class="form-label">Adakan Check In/Out Satpam?</label>
                    <div style="text-align:left">
                        <label>
                            <input type="radio" name="checkSatpam" value="1" checked> Ya
                        </label><br>
                        <label>
                            <input type="radio" name="checkSatpam" value="0"> Tidak
                        </label>
                    </div>
                    <small class="text-muted d-block mt-2">
                        Check in/out diperlukan jika perjalanan dinas dalam kota & satu hari.
                    </small>
                `;
            }

            Swal.fire({
                title: 'Konfirmasi Keputusan',
                html: `
                    <div style="text-align:left;">
                        <label for="swalNote" style="font-weight:600; margin-bottom:6px; display:block;">
                            Catatan (Bisa dikosongkan jika menyetujui):
                        </label>
                        <textarea id="swalNote" placeholder="Masukkan catatan..." style="width:100%; max-width:100%; box-sizing:border-box; min-height:120px; font-size:14px;"></textarea>
                    </div>
                    ${extraHtml}
                `,
                showCancelButton: true,
                showDenyButton: true,
                confirmButtonText: 'Setujui',
                denyButtonText: 'Tolak',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284',
                denyButtonColor: '#dc3545',
                preConfirm: () => {
                    return {
                        note: document.getElementById('swalNote').value,
                        isSecurityCheck: document.querySelector('input[name="checkSatpam"]:checked')?.value ?? null
                    };
                },
                preDeny: () => {
                    return {
                        note: document.getElementById('swalNote').value.trim(),
                        isSecurityCheck: document.querySelector('input[name="checkSatpam"]:checked')?.value ?? null
                    };
                }
            }).then((result) => {

                if (result.isConfirmed) {
                    submitFormSweet('approve', result.value);
                }

                if (result.isDenied) {
                    if (!result.value.note) {
                        Swal.fire('Alasan wajib diisi', '', 'warning');
                        return;
                    }
                    submitFormSweet('reject', result.value);
                }
            });
        }

        const baseUrlApprove = "{{ URL::to('/approve/perizinan/personalia') }}";
        const baseUrlReject = "{{ URL::to('/reject/perizinan/personalia') }}";
        function submitFormSweet(type, data) {

            const url = type === 'approve'
                ? `${baseUrlApprove}/${window.currentPrimary}`
                : `${baseUrlReject}/${window.currentPrimary}`;

            const requestBody = {
                note: data.note
            };

            if (data.isSecurityCheck !== null) {
                requestBody.isSecurityCheck = data.isSecurityCheck;
            }

            Swal.fire({
                title: 'Memproses...',
                allowOutsideClick: false,
                didOpen: () => Swal.showLoading()
            });

            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify(requestBody)
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    Swal.fire('Berhasil!', data.message, 'success')
                    .then(() => {
                        let currentPage = $('#pagination-container .page-item.active span')
                            .text().trim() || 1;
                        fetchPage(currentPage);
                    });
                } else {
                    Swal.fire('Gagal!', data.message, 'error');
                }
            })
            .catch(() => {
                Swal.fire('Error', 'Terjadi kesalahan sistem', 'error');
            });
        }


</script>
    {{-- Script untuk batch decision --}}
    <script>
        // Toggle select all
        $(document).on('change', '#select_all', function() {
            const checked = $(this).is(':checked');
            $('.row-select').prop('checked', checked);
            updateBatchButtons();
        });

        // Update buttons when any row checkbox changes
        $(document).on('change', '.row-select', function() {
            const allChecked = ($('.row-select').length === $('.row-select:checked').length);
            $('#select_all').prop('checked', allChecked);
            updateBatchButtons();
        });

        function updateBatchButtons() {
            const count = $('.row-select:checked').length;
            if (count > 0) {
                $('#batchDecisionBtn').prop('disabled', false);
            } else {
                $('#batchDecisionBtn').prop('disabled', true);
            }
        }

        // Batch Decision Button Handler
        $(document).on('click', '#batchDecisionBtn', function () {

            const ids = $('.row-select:checked').map(function () {
                return $(this).val();
            }).get();

            if (ids.length === 0) {
                Swal.fire('Perhatian', 'Silakan pilih data terlebih dahulu', 'warning');
                return;
            }

            const firstChecked = $('.row-select:checked').first();
            const ktgrPrzn = firstChecked.data('ktgrprzn');

            // Set batch mode
            window.isBatchMode = true;
            window.batchIds = ids;
            window.batchKtgrPrzn = ktgrPrzn;

            let extraHtml = '';

            if (ktgrPrzn == 2) {
                extraHtml = `
                    <hr>
                    <label class="form-label">Adakan Check In/Out Satpam?</label>
                    <div style="text-align:left">
                        <label>
                            <input type="radio" name="checkSatpam" value="1" checked> Ya
                        </label><br>
                        <label>
                            <input type="radio" name="checkSatpam" value="0"> Tidak
                        </label>
                    </div>
                    <small class="text-muted d-block mt-2">
                        Check In/Out Satpam hanya berlaku untuk kategori Tugas (Dinas).
                    </small>
                `;
            }

            Swal.fire({
                title: `Konfirmasi Keputusan (${ids.length} Data)`,
                html: ` <div style="text-align:left;">
    <label for="swalNote" style="font-weight:600; margin-bottom:6px; display:block;">
        Catatan (Bisa dikosongkan jika menyetujui):
    </label>
    <textarea
        id="swalNote"
        placeholder="Masukkan catatan..."
        style="width:100%; max-width:100%; box-sizing:border-box; min-height:120px; font-size:14px;"></textarea>
</div>
                    ${extraHtml}
                `,
                showCancelButton: true,
                showDenyButton: true,
                confirmButtonText: 'Setujui',
                denyButtonText: 'Tolak',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#28a745',
                denyButtonColor: '#dc3545',
                preConfirm: () => {
                    return {
                        note: document.getElementById('swalNote').value,
                        isSecurityCheck:
                            document.querySelector('input[name="checkSatpam"]:checked')?.value ?? null
                    };
                }
            }).then((result) => {

                if (result.isConfirmed) {
                    submitBatchSweet('approve', result.value);
                }

                if (result.isDenied) {
                    if (!result.value.note) {
                        Swal.fire('Alasan penolakan wajib diisi', '', 'warning');
                        return;
                    }
                    submitBatchSweet('reject', result.value);
                }
            });
        });
        function submitBatchSweet(type, data) {

            const formId = type === 'approve'
                ? '#batchApproveForm'
                : '#batchRejectForm';

            const form = document.querySelector(formId);
            if (!form) return;

            // Bersihkan input lama
            form.querySelectorAll('input[name="ids[]"], input[name="note"], input[name="isSecurityCheck"]')
                .forEach(el => el.remove());

            window.batchIds.forEach(id => {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'ids[]';
                input.value = id;
                form.appendChild(input);
            });

            const noteInput = document.createElement('input');
            noteInput.type = 'hidden';
            noteInput.name = 'note';
            noteInput.value = data.note;
            form.appendChild(noteInput);

            if (data.isSecurityCheck !== null) {
                const secInput = document.createElement('input');
                secInput.type = 'hidden';
                secInput.name = 'isSecurityCheck';
                secInput.value = data.isSecurityCheck;
                form.appendChild(secInput);
            }

            Swal.fire({
                title: 'Memproses...',
                allowOutsideClick: false,
                didOpen: () => Swal.showLoading()
            });

            form.submit();
        }

        // Reset batch mode saat modal ditutup

    </script>

    {{-- Script untuk batch decision --}}
    <script>
        // Toggle select all
        $(document).on('change', '#select_all', function() {
            const checked = $(this).is(':checked');
            $('.row-select').prop('checked', checked);
            updateBatchButtons();
        });

        // Update buttons when any row checkbox changes
        $(document).on('change', '.row-select', function() {
            const allChecked = ($('.row-select').length === $('.row-select:checked').length);
            $('#select_all').prop('checked', allChecked);
            updateBatchButtons();
        });

        function updateBatchButtons() {
            const count = $('.row-select:checked').length;
            if (count > 0) {
                $('#batchDecisionBtn').prop('disabled', false);
            } else {
                $('#batchDecisionBtn').prop('disabled', true);
            }
        }

    </script>

    {{-- Flatpicker for "tanggal_mulai" and "tanggal_berakhir" filters --}}
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Datepicker untuk Tanggal Mulai
            flatpickr("#tanggal_mulai", {
                dateFormat: "Y-m-d", // Format yang disimpan
                altInput: true,
                altFormat: "d/m/Y", // Format yang ditampilkan
                onChange: function(selectedDates, dateStr, instance) {
                    // Menggunakan instance.dateStr untuk mendapatkan nilai dengan format dateFormat
                    document.getElementById("tanggal_mulai_hidden").value = dateStr;
                    tanggalBerakhir.set("minDate", dateStr) // Set batas minDate untuk tanggal berakhir
                }
            });

            // Datepicker untuk Tanggal Berakhir
            let tanggalBerakhir = flatpickr("#tanggal_berakhir", {
                dateFormat: "Y-m-d", // Format yang disimpan
                altInput: true,
                altFormat: "d/m/Y", // Format yang ditampilkan
                onChange: function(selectedDates, dateStr, instance) {
                    // Menggunakan instance.dateStr untuk mendapatkan nilai dengan format dateFormat
                    document.getElementById("tanggal_berakhir_hidden").value = dateStr;
                }
            });

            // For page first load
            fetchPage();
        });
    </script>

    {{-- Mencari data berdasarkan filter search AJAX --}}
    <script>
        $(document).on('click', '#btn_cari', function(event) {
            event.preventDefault();

            // Get current page
            let page = $('#pagination-container #pagination-links li.page-item.active span.page-link').text()
                .trim();

            // Fetch the data
            fetchPage(page);
        });

        $(document).on('click', '#pagination-links .pagination a', function(event) {
            event.preventDefault();

            // Get clicked page
            let url = $(this).attr('href'); // Ambil URL dari tombol yang diklik
            let page = new URL(url).searchParams.get('page'); // Ambil nilai page dari URL

            // Fetch the data
            fetchPage(page);
        });

        function fetchPage(page) {
            let tbody = "";

            // Tampilkan spinner dan disable button ketika tombol "Cari" diklik
            $('#loading-spinner').show();
            $('#btn_cari').prop('disabled', true); // Menonaktifkan tombol

            // Pagination make pagination none
            $('#pagination-links').css('display', 'none'); // Menyembunyikan pagination
            $('#pagination-loading').css('display', 'block'); // Menampilkan loading

            // Ambil data dari form
            const periode_id = $('#periode').val();
            const kategori_perizinan_id = $('#kategori_perizinan_id').val();
            const jenis_izin_id = $('#jenis_izin_id').val();
            const tanggal_mulai = $('#tanggal_mulai_hidden').val();
            const tanggal_berakhir = $('#tanggal_berakhir_hidden').val();
            const assignedfor = $('#assignedfor').val();
            const search = $('#search').val();

            // Get baseurl
            const baseurl = "{{ url('/') }}";

            // Mengirimkan ajax request
            $.ajax({
                url: "{{ url($url_menu) . '/ajax/filter' }}?page=" + page,
                method: 'GET',
                data: {
                    periode_id: periode_id,
                    kategori_perizinan_id: kategori_perizinan_id,
                    jenis_izin_id: jenis_izin_id,
                    tanggal_mulai: tanggal_mulai,
                    tanggal_berakhir: tanggal_berakhir,
                    assignedfor: assignedfor,
                    search: search
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    // Merge response.data.table_detail.data dengan response.data.ids
                    response.data.table_detail.data = response.data.table_detail.data.map((item, index) => {
                        item.ids = response.data.ids[index]; // Menambahkan ids
                        return item;
                    });

                    // Ambil data dmenu
                    const dmenui = @json($dmenu);

                    // Helper: render cell "Nama Karyawan" untuk acara khusus (multi nama + lihat lainnya)
                    function buildNamaKaryawanCell(row, rowNum) {
                        if (row.jenis_izin_id == 4 && row.nama_karyawan_list) {
                            const names = String(row.nama_karyawan_list).split('||').filter(n => n.trim() !== '');
                            if (names.length > 0) {
                                const maxPreview = 5;
                                const isExpandable = names.length > maxPreview;
                                const previewNames = isExpandable ? names.slice(0, maxPreview) : names;
                                const remaining = isExpandable ? (names.length - maxPreview) : 0;
                                const toggleId = 'karyawanToggle_' + rowNum + '_' + Math.floor(Math.random() * 10000);

                                let html = '<div class="d-flex flex-column gap-1 py-1">';
                                html += '<div id="' + toggleId + '_preview">';
                                previewNames.forEach(function(nama) {
                                    html += '<div class="text-sm">' + escapeHtml(nama) + '</div>';
                                });
                                html += '</div>';

                                if (isExpandable) {
                                    html += '<div id="' + toggleId + '_rest" style="display: none;">';
                                    names.slice(maxPreview).forEach(function(nama) {
                                        html += '<div class="text-sm">' + escapeHtml(nama) + '</div>';
                                    });
                                    html += '</div>';
                                    html += '<a href="javascript:void(0)" class="text-sm text-primary text-decoration-underline fw-bold mt-1 toggle-karyawan-btn" data-toggle-id="' + toggleId + '" data-remaining="' + remaining + '">';
                                    html += '<i class="fas fa-chevron-down me-1"></i><span class="toggle-text">Lihat ' + remaining + ' lainnya</span>';
                                    html += '</a>';
                                }

                                html += '</div>';
                                return html;
                            }
                        }
                        return '<span class="text-sm">' + escapeHtml(row.nama ?? '') + '</span>';
                    }

                    // Helper: escape HTML agar nama karyawan tidak inject HTML
                    function escapeHtml(str) {
                        const div = document.createElement('div');
                        div.textContent = str ?? '';
                        return div.innerHTML;
                    }

                    // Inisiasi ulang dataTable
                    let columnAbjad = '';
                    const startNumber = response.data.table_detail.from ?? 1;
                    if (response.data.table_detail.data.length === 0) {
                        tbody = `
                            <tr>
                                <td colspan="16" class="text-center text-muted py-3">
                                    Maaf - Data tidak ada.
                                </td>
                            </tr>`;
                    } else {
                    $.each(response.data.table_detail.data, function(index, row) {
                        // Generate Lock/Unlock button if user has approval authorization
                        let lockUnlockButton = '';
                        @if ($authorize->approval == '1')
                            const lockStatus = row.edit_terkunci || 0;
                            const lockAction = lockStatus == 1 ? '0' : '1';
                            const lockText = lockStatus == 1 ? 'Unlock Akses Edit' : 'Lock Akses Edit';
                            const lockClass = lockStatus == 1 ? 'text-success' : 'text-danger';

                            lockUnlockButton = `
                            <li>
                                <form action="${baseurl}/lock-unlock/perizinan/personalia/${row.ids}/${lockAction}"
                                      method="POST" data-terkunci="${lockStatus}"
                                      onsubmit="confirmLockUnlock(event, this)"
                                      style="display:inline;">
                                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                    <button type="submit" class="dropdown-item ${lockClass} mb-0" title="Lock/Unlock Data">
                                        <i class="fas fa-lock"></i> ${lockText}
                                    </button>
                                </form>
                            </li>
                        `;
                        @endif

                        // Generate Approval button if user has approval authorization
                        let approvalButton = '';
                        @if ($authorize->approval == '1')
                            if (row.status === 'menyetujui') {
                                approvalButton = `
                                <li>
                                    <button type="submit" class="dropdown-item text-secondary"
                                            onclick="showSwal('Anda telah menyetujui')" title="Telah disetujui">
                                        <i class="fas fa-circle"></i> Anda telah menyetujui
                                    </button>
                                </li>
                            `;
                            } else if (row.status === 'menolak') {
                                approvalButton = `
                                <li>
                                    <button type="submit" class="dropdown-item text-secondary"
                                            onclick="showSwal('Anda telah menolak')" title="Telah ditolak">
                                        <i class="fas fa-ban"></i> Anda telah menolak
                                    </button>
                                </li>
                            `;
                            } else {
                                approvalButton = `
                                <li>
                                    <button type="button" class="dropdown-item text-primary"
                                        onclick="openModal('${row.ids}', ${row.kategori_perizinan_id})"
                                        title="Setujui Data">
                                        <i class="fas fa-check"></i> Beri Keputusan
                                    </button>
                                </li>`;
                            }
                        @endif

                        // Generate Edit button if user has edit authorization
                        let editButton = '';
                        @if ($authorize->edit == '1')
                            editButton = `
                            <li>
                                <button class="dropdown-item text-warning" title="Edit Data"
                                        onclick="window.location='${baseurl}/pitkkb/edit/${row.ids}'">
                                    <i class="fas fa-edit"></i> Edit
                                </button>
                            </li>
                        `;
                        @endif

                        // Generate checkbox column if user has approval authorization
                        let checkboxCol = '';
                        @if ($authorize->approval == '1')
                            // if (row.status === 'menunggu' && row.kategori_perizinan_id == 1) {
                            if ((row.status === 'menunggu' || row.status === 'disetujui-atasan') && row.kategori_perizinan_id == 1) {
                                checkboxCol = `
                                <td>
                                    <input type="checkbox" class="row-select"
                                           value="${row.ids}"
                                           data-ktgrprzn="${row.kategori_perizinan_id ?? ''}">
                                </td>`;
                            } else {
                                checkboxCol = '<td></td>';
                            }
                        @endif

                        let rowStyle = '';
                        if (row.status === 'menyetujui') {
                            rowStyle = 'style="background-color:#c5ffbc;"'; // hijau
                        } else if (row.status_persetujuan_atasan?.toLowerCase() === 'belum memutuskan') {
                            rowStyle = 'style="background-color:#e6d8ff;"'; // ungu
                        }

                        tbody += `<tr ${rowStyle}>
                        ${checkboxCol}
                        <td class="text-sm font-weight-normal">${startNumber + index}</td>
                        <td class="text-sm font-weight-normal">
                            <div class="btn-group">
                                <button type="button" class="btn btn-sm btn-primary mb-0" title="View Data"
                                    onclick="window.location='${baseurl}/pitkkb/show/${row.ids}'">
                                    <i class="fas fa-eye"></i> <span class="font-weight-bold">View</span>
                                </button>
                                <button class="btn btn-sm btn-primary dropdown-toggle dropdown-toggle-split mb-0"
                                    data-bs-toggle="dropdown" aria-expanded="false"></button>
                                <ul class="dropdown-menu">
                                    ${lockUnlockButton}
                                    ${approvalButton}
                                    ${editButton}
                                </ul>
                            </div>
                        </td>
                        <td class="text-sm font-weight-normal">${row.idperizinan ?? ''}</td>
                        <td class="text-sm font-weight-normal align-top">${buildNamaKaryawanCell(row, startNumber + index)}</td>
                        <td class="text-sm font-weight-normal">${row.departemen ?? ''}</td>
                        <td class="text-sm font-weight-normal">${row.kategori_perizinan ?? ''}</td>
                        <td class="text-sm font-weight-normal">${row.jenis_izin ?? ''}</td>
                        <td class="text-sm font-weight-normal">${row.alasan ?? ''}</td>
                        <td class="text-sm font-weight-normal text-end">${row.jam_keluar ?? ''}</td>
                        <td class="text-sm font-weight-normal text-end">${row.jam_masuk ?? ''}</td>
                        <td class="text-sm font-weight-normal text-end">${row.check_out ?? ''}</td>
                        <td class="text-sm font-weight-normal text-end">${row.check_in ?? ''}</td>
                        <td class="text-sm font-weight-normal">${row.durasi ?? ''}</td>
                        <td class="text-sm font-weight-normal">
                            <span class="${row.status === 'ditolak' ? 'text-danger' : row.status === 'disetujui' ? 'text-success' : ''} font-weight-bold">
                                ${row.status ?? ''}
                            </span>
                        </td>
                    </tr>`;
                    });
                    }
                    // Ganti konten tabel dengan data baru
                    $('#list_' + dmenui + ' tbody').html(tbody);

                    // Change the pagination links
                    $('#pagination-container').html(response.pagination);
                },
                complete: function() {
                    // Sembunyikan spinner setelah menerima respons dan nyalakan button lagi
                    $('#loading-spinner').hide();
                    $('#btn_cari').prop('disabled', false); // Menonaktifkan tombol

                    // Pagination make pagination block
                    $('#pagination-links').css('display', 'block'); // Menyembunyikan pagination
                    $('#pagination-loading').css('display', 'none'); // Menampilkan loading
                },
                error: function(xhr, status, error) {
                    console.log('Error status: ' + status);
                    console.log('Error responseText: ' + xhr.responseText);
                    console.log('Error message: ' + error);

                    // Sembunyikan spinner setelah menerima respons dan nyalakan button lagi
                    $('#loading-spinner').hide();
                    $('#btn_cari').prop('disabled', false); // Menonaktifkan tombol

                    // Pagination make pagination block
                    $('#pagination-links').css('display', 'block'); // Menyembunyikan pagination
                    $('#pagination-loading').css('display', 'none'); // Menampilkan loading

                    // Display error message
                    Swal.fire({
                        title: 'Error',
                        text: 'Terjadi kesalahan: ' + error,
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                }
            });
        }
    </script>
    </div>
    </div>
    </div>


@endsection
@push('js')
    <script>
        // ========== KIRIM EMAIL FORM PERIZINAN ==========
        let selectedKaryawanPerizinan = [];

        // Load daftar karyawan saat modal dibuka
        $(document).on('show.bs.modal', '#modalKirimEmailPerizinan', function () {
            console.log('Modal email perizinan opened');
            $('#kirimEmailMessageContainerPerizinan').html('');
            loadActiveEmailTokensPerizinan();
            // Employee list is loaded via Cari button, not auto-fetched
        });

        // Load active email tokens
        let activeTokensDataTablePerizinan;

        function loadActiveEmailTokensPerizinan() {
            console.log('loadActiveEmailTokensPerizinan function called');

            if ($.fn.DataTable.isDataTable('#list_active_tokens_perizinan')) {
                $('#list_active_tokens_perizinan').DataTable().clear().destroy();
            }

            $('#activeTokensTableBodyPerizinan').empty();

            $.ajax({
                url: '{{ route("pitkkb.active-email-tokens") }}',
                type: 'GET',
                cache: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (response) {
                    console.log('AJAX success, response:', response);
                    let tbody = '';

                    if (response.success && response.data.length > 0) {
                        $.each(response.data, function (index, row) {
                            tbody += `<tr>
                                <td class="text-sm">${index + 1}</td>
                                <td class="text-sm">${row.nik}</td>
                                <td class="text-sm">${row.nama}</td>
                                <td class="text-sm">${row.departemen || '-'}</td>
                                <td class="text-sm">${row.tanggal_pengiriman}</td>
                                <td class="text-sm">
                                    <button class="btn btn-sm btn-danger deactivate-token-perizinan-btn" data-id="${row.id}" title="Nonaktifkan">
                                        <i class="fas fa-ban"></i>
                                    </button>
                                </td>
                            </tr>`;
                        });
                    } else {
                        tbody = '';
                    }

                    $('#activeTokensTableBodyPerizinan').html(tbody);

                    activeTokensDataTablePerizinan = $('#list_active_tokens_perizinan').DataTable({
                        searching: true,
                        paging: true,
                        responsive: true,
                        ordering: false,
                        info: true,
                        lengthChange: false,
                        dom: '<"datatable-top d-flex justify-content-between"i>t<"datatable-bottom d-flex justify-content-between"p>',
                        language: {
                            search: 'Cari :',
                            zeroRecords: 'Maaf - Data tidak ada',
                            info: 'Menampilkan _START_ sampai _END_ dari _TOTAL_ data',
                            paginate: {
                                previous: 'Sebelumnya',
                                next: 'Berikutnya'
                            }
                        }
                    });
                },
                error: function (xhr) {
                    console.error('Error loading active tokens:', xhr);
                    console.log('Error status:', xhr.status, 'Response:', xhr.responseText);
                    $('#activeTokensTableBodyPerizinan').html('<tr><td colspan="6" class="text-center text-danger py-3">Gagal memuat data token</td></tr>');
                }
            });
        }

        // Deactivate token
        $(document).on('click', '.deactivate-token-perizinan-btn', function () {
            const tokenId = $(this).data('id');
            const btn = $(this);

            Swal.fire({
                title: 'Konfirmasi',
                text: 'Apakah Anda yakin ingin menonaktifkan token email ini?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Nonaktifkan',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#dc3545'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: `{{ route('pitkkb.deactivate-email-token', ['id' => ':id']) }}`.replace(':id', tokenId),
                        type: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function (response) {
                            if (response.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Berhasil',
                                    text: response.message,
                                    confirmButtonText: 'OK'
                                }).then(() => {
                                    loadActiveEmailTokensPerizinan();
                                });
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Gagal',
                                    text: response.message,
                                    confirmButtonText: 'OK'
                                });
                            }
                        },
                        error: function (xhr) {
                            const message = xhr.responseJSON?.message || 'Terjadi kesalahan saat menonaktifkan token.';
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: message,
                                confirmButtonText: 'OK'
                            });
                        }
                    });
                }
            });
        });

        function fetchEmailKaryawanPerizinanPage(page) {
            const search = $('#search_input_kirim_email_perizinan').val() || '';
            const tbody = $('#karyawanPerizinanTableBody');

            const loadingSpinner = document.getElementById('loading-spinner_kirim_email_perizinan');
            const paginationLoading = document.getElementById('pagination-loading_kirim_email_perizinan');
            const searchButton = document.getElementById('search_button_kirim_email_perizinan');
            const paginationLinks = document.getElementById('pagination-links_kirim_email_perizinan');
            const paginationInfo = document.getElementById('pagination-info_kirim_email_perizinan');

            if (loadingSpinner) loadingSpinner.style.display = 'block';
            if (paginationLoading) paginationLoading.style.display = 'block';
            if (searchButton) searchButton.disabled = true;
            if (paginationLinks) paginationLinks.style.display = 'none';
            if (paginationInfo) paginationInfo.style.display = 'none';

            $.ajax({
                url: "{{ url($url_menu) . '/ajax/filter' }}?page=" + page,
                method: 'GET',
                data: {
                    search: search,
                    idmodal: 'kirim_email_perizinan'
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (response) {
                    let html = '';
                    if (response.data.table_result.data && response.data.table_result.data.length > 0) {
                        $.each(response.data.table_result.data, function (index, row) {
                            const isSelected = selectedKaryawanPerizinan.find(k => k.nik === row.nik);
                            const btnClass = isSelected ? 'bg-success' : 'bg-primary';
                            const btnText = isSelected ? 'Terpilih' : 'Select';

                            html += `<tr>
                                    <td width="20px">
                                        <span class="btn badge ${btnClass} badge-lg select-karyawan-przn-btn"
                                            data-nik="${row.nik}"
                                            data-nama="${row.nama}"
                                            data-email="${row.email || ''}"
                                            data-departemen="${row.departemen || '-'}">
                                            <i class="bi bi-check-circle me-1"></i> ${btnText}
                                        </span>
                                    </td>
                                    <td class="text-sm font-weight-normal">${row.nik}</td>
                                    <td class="text-sm font-weight-normal">${row.nama}</td>
                                    <td class="text-sm font-weight-normal">${row.departemen || '-'}</td>
                                    <td class="text-sm font-weight-normal">${row.email || '-'}</td>
                                </tr>`;
                        });
                        tbody.html(html);
                    } else {
                        tbody.html('<tr><td colspan="5" class="text-center text-muted">Tidak ada data karyawan</td></tr>');
                    }

                    $('#pagination-container_kirim_email_perizinan').html(response.pagination);

                    if (loadingSpinner) loadingSpinner.style.display = 'none';
                    if (paginationLoading) paginationLoading.style.display = 'none';
                    if (searchButton) searchButton.disabled = false;
                    if (paginationLinks) paginationLinks.style.display = 'block';
                    if (paginationInfo) paginationInfo.style.display = 'block';

                    updateSelectedListPerizinan();
                },
                error: function (xhr) {
                    console.error('Error:', xhr);
                    tbody.html('<tr><td colspan="5" class="text-center text-danger">Gagal memuat data. Silakan coba lagi.</td></tr>');
                    if (loadingSpinner) loadingSpinner.style.display = 'none';
                    if (paginationLoading) paginationLoading.style.display = 'none';
                    if (searchButton) searchButton.disabled = false;
                }
            });
        }

        $(document).on('click', '#search_button_kirim_email_perizinan', function (event) {
            event.preventDefault();
            fetchEmailKaryawanPerizinanPage(1);
        });

        $(document).on('click', '#pagination-links_kirim_email_perizinan .pagination a', function (event) {
            event.preventDefault();
            let url = $(this).attr('href');
            let page = new URL(url).searchParams.get('page');
            fetchEmailKaryawanPerizinanPage(page);
        });

        $('#search_input_kirim_email_perizinan').on('keypress', function (e) {
            if (e.which === 13) {
                e.preventDefault();
                fetchEmailKaryawanPerizinanPage(1);
            }
        });

        $(document).on('click', '.select-karyawan-przn-btn', function () {
            const nik = $(this).data('nik');
            const nama = $(this).data('nama');
            const email = $(this).data('email');
            const departemen = $(this).data('departemen') || '-';

            if (!email) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Perhatian',
                    text: `Karyawan ${nama} tidak memiliki email terdaftar.`,
                    confirmButtonColor: '#028284'
                });
                return;
            }

            const existingIndex = selectedKaryawanPerizinan.findIndex(k => k.nik === nik);
            if (existingIndex === -1) {
                selectedKaryawanPerizinan.push({ nik: nik, nama: nama, email: email, departemen: departemen });
                $(this).removeClass('bg-primary').addClass('bg-success').html('<i class="bi bi-check-circle me-1"></i> Terpilih');
            } else {
                selectedKaryawanPerizinan.splice(existingIndex, 1);
                $(this).removeClass('bg-success').addClass('bg-primary').html('<i class="bi bi-check-circle me-1"></i> Select');
            }
            updateSelectedListPerizinan();
        });

        $(document).on('click', '.remove-selected-perizinan', function () {
            const nik = $(this).data('nik');
            selectedKaryawanPerizinan = selectedKaryawanPerizinan.filter(k => k.nik !== nik);
            updateSelectedListPerizinan();
            $(`.select-karyawan-przn-btn[data-nik="${nik}"]`).removeClass('bg-success').addClass('bg-primary').html('<i class="bi bi-check-circle me-1"></i> Select');
        });

        function updateSelectedListPerizinan() {
            const container = $('#selectedKaryawanListPerizinan');
            const count = selectedKaryawanPerizinan.length;
            $('#selectedCountPerizinan').text(count);

            if (count > 0) {
                $('#btnKirimEmailPerizinan').prop('disabled', false).removeAttr('disabled');
            } else {
                $('#btnKirimEmailPerizinan').prop('disabled', true);
            }

            if (count > 0) {
                const grouped = {};
                selectedKaryawanPerizinan.forEach(function (k) {
                    const dept = k.departemen || '-';
                    if (!grouped[dept]) grouped[dept] = [];
                    grouped[dept].push(k);
                });

                let html = '';
                const sortedDepts = Object.keys(grouped).sort();
                sortedDepts.forEach(function (dept) {
                    html += `<div class="mb-2">`;
                    html += `<div class="fw-bold text-primary" style="font-size: 0.75rem; margin-bottom: 4px;"><i class="fas fa-building me-1"></i>${dept} (${grouped[dept].length})</div>`;
                    html += `<div class="ps-2">`;
                    grouped[dept].forEach(function (k) {
                        html += `
                            <span class="badge bg-info me-1 mb-1" style="font-size: 0.8rem;">
                                ${k.nama}
                                <i class="fas fa-times ms-1 remove-selected-perizinan" data-nik="${k.nik}" style="cursor: pointer;"></i>
                            </span>
                        `;
                    });
                    html += `</div></div>`;
                });
                container.html(html);
            } else {
                container.html('<span class="text-muted">Belum ada karyawan yang dipilih</span>');
            }
        }

        $(document).on('click', '#btnKirimEmailPerizinan', function (e) {
            e.preventDefault();
            e.stopPropagation();

            if (selectedKaryawanPerizinan.length === 0) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Peringatan',
                    text: 'Pilih minimal 1 karyawan untuk dikirim email.',
                    confirmButtonText: 'OK'
                });
                return;
            }

            sendPerizinanFormEmail();
        });


        function sendPerizinanFormEmail() {
            $('#btnKirimEmailPerizinan').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i> Mengirim...');
            const nikList = selectedKaryawanPerizinan.map(k => k.nik);

            $.ajax({
                url: '{{ route("pitkkb.send-perizinan-form-email") }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    karyawan_list: nikList
                },
                success: function (response) {
                    $('#btnKirimEmailPerizinan').prop('disabled', false).html('<i class="fas fa-paper-plane me-1"></i> Kirim Email');
                    if (response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil!',
                            text: response.message,
                            confirmButtonColor: '#028284',
                            confirmButtonText: 'OK'
                        }).then(() => {
                            selectedKaryawanPerizinan = [];
                            updateSelectedListPerizinan();
                            $('#modalKirimEmailPerizinan').modal('hide');
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal!',
                            text: response.message,
                            confirmButtonColor: '#028284',
                            confirmButtonText: 'OK'
                        });
                    }
                },
                error: function (xhr) {
                    $('#btnKirimEmailPerizinan').prop('disabled', false).html('<i class="fas fa-paper-plane me-1"></i> Kirim Email');
                    const message = xhr.responseJSON?.message || 'Terjadi kesalahan saat mengirim email.';
                    Swal.fire({
                        icon: 'error',
                        title: 'Terjadi Kesalahan!',
                        text: message,
                        confirmButtonColor: '#028284',
                        confirmButtonText: 'OK'
                    });
                }
            });
        }
    </script>

    {{-- Modal Kirim Email Form Perizinan --}}
    <div class="modal fade" id="modalKirimEmailPerizinan" tabindex="-1" aria-labelledby="modalKirimEmailPerizinanLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalKirimEmailPerizinanLabel">
                        List Data
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                {{-- Table Email Aktif yang Belum Digunakan --}}
                <div class="px-3 pt-3">
                    <hr>
                    <h6 class="mb-3 fw-bold">Token Email Aktif yang Belum Digunakan</h6>
                    <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
                        <table class="table table-sm table-bordered" id="list_active_tokens_perizinan">
                            <thead class="thead-light" style="background-color: #fff3cd;">
                                <tr>
                                    <th width="30px">No</th>
                                    <th>NIK</th>
                                    <th>Nama</th>
                                    <th>Departemen</th>
                                    <th>Tanggal Pengiriman</th>
                                    <th width="80px">Action</th>
                                </tr>
                            </thead>
                            <tbody id="activeTokensTableBodyPerizinan"></tbody>
                        </table>
                    </div>
                </div>

                <div class="px-3 pt-3">
                    <div id="kirimEmailMessageContainerPerizinan"></div>
                    <div class="info-note mb-2" style="background-color: #e8f4f8; border-left: 4px solid #028284; padding: 12px 15px; border-radius: 5px;">
                        <i class="fas fa-info-circle me-2" style="color: #028284;"></i>
                        <span style="color: #333;">Pilih karyawan yang akan dikirim email berisi link form pengajuan perizinan.</span>
                    </div>
                    <label class="form-label fw-bold">Karyawan Terpilih (<span id="selectedCountPerizinan">0</span>):</label>
                    <div id="selectedKaryawanListPerizinan" class="p-2 border rounded mb-2"
                        style="min-height: 40px; max-height: 180px; overflow-y: auto; background-color: #f8f9fa;">
                        <span class="text-muted">Belum ada karyawan yang dipilih</span>
                    </div>
                </div>

                <div class="search-group d-flex justify-content-end align-items-center px-3">
                    <input type="text" id="search_input_kirim_email_perizinan" class="form-control me-3 mb-2 mt-2"
                        style="width: 200px;" placeholder="Cari...">
                    <button class="btn btn-primary me-3 mb-2 mt-2 d-flex align-items-center"
                        id="search_button_kirim_email_perizinan">
                        <i class="fas fa-search me-1"></i>
                        <span class="font-weight-bold">Cari</span>
                        <div id="loading-spinner_kirim_email_perizinan" class="spinner-border spinner-border-sm text-light ms-2"
                            role="status" style="display: none;">
                            <span class="sr-only">Loading...</span>
                        </div>
                    </button>
                </div>

                <div class="modal-body table-responsive">
                    <table class="table display table-bordered table-striped" id="list_kirim_email_perizinan">
                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                            <tr>
                                <th width="20px">Action</th>
                                <th>NIK</th>
                                <th>Nama</th>
                                <th>Departemen</th>
                                <th>Email</th>
                            </tr>
                        </thead>
                        <tbody id="karyawanPerizinanTableBody">
                            <tr>
                                <td colspan="5" class="text-center text-muted">Klik tombol Cari untuk memuat data...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="modal-footer d-flex justify-content-between">
                    <div id="pagination-container_kirim_email_perizinan" class="d-flex justify-content-between"
                        style="overflow-x: auto;">
                        <div>
                            <span id="pagination-info_kirim_email_perizinan" class="text-muted"></span>
                        </div>
                        <div>
                            <div id="pagination-loading_kirim_email_perizinan" style="display: none; text-align: center;">
                                <span class="spinner-border spinner-border-sm text-primary"></span> Memuat...
                            </div>
                            <div id="pagination-links_kirim_email_perizinan"></div>
                        </div>
                    </div>
                    <div>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            <i class="fas fa-times me-1"></i>Batal
                        </button>
                        <button type="button" class="btn btn-info text-white" id="btnKirimEmailPerizinan" disabled>
                            <i class="fas fa-paper-plane me-1"></i>Kirim Email
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- Flatpickr --}}
    <script src="{{ asset('/') }}assets/js/flatpickr.min.js"></script>
    <script>
        flatpickr(".datepicker"); // Flatpicker initinalization
    </script>

    <script>
        let columnAbjad = '';
        $(document).ready(function() {
            let numColumns = $('#list_{{ $dmenu }}').DataTable().columns().count();
            let columnNames = '';
            for (let index = 0; index < numColumns; index++) {
                columnNames = $('#list_{{ $dmenu }}').DataTable().columns(index).header()[0].textContent;
                if (columnNames == 'Status' || columnNames == 'status') {
                    columnAbjad = String.fromCharCode(65 + index);
                }
            }
            //check class exp
            if ($('*').hasClass('exp')) {
                $('#noted').html(`<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;"
                class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true"
                style="color: #ffe768;" class="fas fa-circle"></i> ` + $('#datenote').text() + ` )</code>`)
            }
        });
        //set table into datatables
        $('#list_{{ $dmenu }}').DataTable({
            "language": {
                "search": "Cari :",
                "lengthMenu": "Tampilkan _MENU_ baris",
                "zeroRecords": "Maaf - Data tidak ada",
                "info": "Data _START_ - _END_ dari _TOTAL_",
                "infoFiltered": "(pencarian dari _MAX_ data)"
            },
            searching: false,
            paging: false,
            responsive: true,
            ordering: false,
            dom: 'frtip',
            // buttons: [{
            //         extend: 'excelHtml5',
            //         text: '<i class="fas fa-file-excel me-1 text-lg text-success"> </i><span class="font-weight-bold"> Excel',
            //         autoFilter: true,
            //         sheetName: 'Exported data',
            //         // title: 'Nama File Excel',
            //         customize: function(xlsx) {
            //             var sheet = xlsx.xl.worksheets['sheet1.xml'];
            //             // Loop over the cells in column
            //             sheet.querySelectorAll('row c[r^="' + columnAbjad + '"]').forEach((row) => {
            //                 // Get the value
            //                 let cell = row.querySelector('is t');
            //                 if (cell && cell.textContent === 'Not Active') {
            //                     row.setAttribute('s', '10'); //red background
            //                 }
            //             });
            //         },
            //         exportOptions: {
            //             columns: ':visible:not(:last-child)'
            //         },
            //     },
            //     {
            //         extend: 'pdfHtml5',
            //         text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"> </i><span class="font-weight-bold"> PDF',
            //         exportOptions: {
            //             columns: ':visible:not(:last-child)'
            //         },
            //     },
            //     {
            //         extend: 'print',
            //         text: '<i class="fas fa-print me-1 text-lg text-info"> </i><span class="font-weight-bold"> Print',
            //         exportOptions: {
            //             columns: ':visible:not(:last-child)'
            //         },
            //     },
            // ]
        });
        // //set color button datatables
        // $('.dt-button').addClass('btn btn-secondary');
        // $('.dt-button').removeClass('dt-button');
        // //check authorize button datatables
        // <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjhris/resources/views/pitkk1/pitkkb/list.blade.php</b> on line <b>1797</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/msjhris/resources/views/pitkk1/pitkkb/list.blade.php</b> on line <b>1797</b><br />
        // <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjhris/resources/views/pitkk1/pitkkb/list.blade.php</b> on line <b>1798</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/msjhris/resources/views/pitkk1/pitkkb/list.blade.php</b> on line <b>1798</b><br />
        // <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjhris/resources/views/pitkk1/pitkkb/list.blade.php</b> on line <b>1799</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/msjhris/resources/views/pitkk1/pitkkb/list.blade.php</b> on line <b>1799</b><br />
        // lock unlock
        function confirmLockUnlock(event, form) {
            event.preventDefault(); // Mencegah form submit langsung

            // Ambil nilai terkunci dari atribut data
            let editTerkunci = form.getAttribute('data-terkunci');

            // Menampilkan SweetAlert konfirmasi
            Swal.fire({
                title: 'Konfirmasi',
                html: `Apakah Anda yakin <b>${editTerkunci == 1 ? 'Unlock Akses Edit' : 'Lock Akses Edit'}</b> oleh <b>Pemohon</b> pada permohonan ini?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: `Ya, ${editTerkunci == 1 ? 'Unlock Akses Edit' : 'Lock Akses Edit'}`,
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Show loading
                    Swal.fire({
                        title: 'Memproses...',
                        text: 'Silakan tunggu',
                        allowOutsideClick: false,
                        showConfirmButton: false,
                        willOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    // Send AJAX request
                    fetch(form.action, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                'Accept': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                // Show success message
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Berhasil!',
                                    text: data.message,
                                    confirmButtonColor: '#028284',
                                    confirmButtonText: 'OK'
                                }).then(() => {
                                    // Refresh the current page of data
                                    let currentPage = $(
                                        '#pagination-container #pagination-links li.page-item.active span.page-link'
                                    ).text().trim() || 1;
                                    fetchPage(currentPage);
                                });
                            } else {
                                // Show error message
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Gagal!',
                                    text: data.message,
                                    confirmButtonColor: '#028284',
                                    confirmButtonText: 'OK'
                                });
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            Swal.fire({
                                icon: 'error',
                                title: 'Terjadi Kesalahan!',
                                text: 'Silakan coba lagi.',
                                confirmButtonColor: '#028284',
                                confirmButtonText: 'OK'
                            });
                        });
                }
            });
        }
        // Untuk ketika user sudah menyetujui/menolak
        function showSwal(message) {
            Swal.fire({
                title: 'Status',
                text: message,
                icon: 'info', // You can use 'success', 'error', or 'info'
                confirmButtonText: 'Ya',
                confirmButtonColor: '#028284'
            });
        }
        //function delete
        function deleteData(event, name, msg) {
            event.preventDefault(); // Prevent default form submission
            Swal.fire({
                title: 'Konfirmasi',
                text: `Apakah Anda Yakin Ingin Menghapus Permohonan ${name} Ini?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: `Ya, Hapus`,
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Find the closest form element and submit it manually
                    event.target.closest('form').submit();
                }
            });
        }
    </script>
@endpush