@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
    @if (session('message-unique'))
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal!',
                    text: '{{ session('message-unique') }}',
                    confirmButtonColor: '#028284',
                    confirmButtonText: 'OK'
                });
            });
        </script>
    @endif
    <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="periode">Periode</label>
                                    <select name="periode" id="periode" class="form-control">
                                        <option value="">Perlihatkan Semua</option>
                                        @foreach ($periode as $prd)
                                            <option value="{{ $prd->id }}">{{ $prd->nama }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group" id="jenis_cuti_id_group">
                                    <label for="tahun">Jenis Cuti</label>
                                    <select name="jenis_cuti_id" id="jenis_cuti_id" class="form-control">
                                        <option value="">Perlihatkan Semua</option>
                                        @foreach ($jenis_cuti as $jc)
                                            <option value="{{ $jc->id }}">{{ $jc->nama }}</option>
                                        @endforeach
                                    </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"> {{-- Menyelaraskan judul --}}
                        <h5 class="mb-0">List {{ $title_menu }}</h5>
                    </div>
                    <hr class="horizontal dark mt-0">
                    <div class="row px-4 py-2">
                        <div class="col-lg">
                            <div class="nav-wrapper d-flex gap-2">
                                {{-- check authorize add --}}
                                @if ($authorize->add == '1')
                                    {{-- button add --}}
                                    <button class="btn btn-primary mb-0"
                                        onclick="handleTambahClick('{{ URL::to($url_menu . '/add') }}')"><i
                                            class="fas fa-plus me-1"> </i><span class="font-weight-bold">Tambah</button>
                                @endif
                                {{-- button kirim email (hanya untuk personalia yang bisa add) --}}
                                @if ($authorize->add == '1')
                                    <button class="btn btn-info mb-0" data-bs-toggle="modal"
                                        data-bs-target="#modalKirimEmailCuti">
                                        <i class="fas fa-envelope me-1"></i><span class="font-weight-bold">Kirim Email Form
                                            Cuti</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>
                                        <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 = $loop->iteration;
                                        @endphp
                                        <tr {{ $detail->status == 'menyetujui' ? 'style=background-color:#c5ffbc;' : '' }}>
                                            <td>{{ $vcount }}</td>
                                            <td class="text-sm font-weight-normal">
                                                {{-- button view --}}
                                                <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/cuti/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) }}')"
                                                                        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

                                                        @if ($authorize->delete == '1' && $primary != 'msjit')
                                                            <li>
                                                                <form action="{{ url($url_menu . '/' . encrypt($primary)) }}"
                                                                    method="POST">
                                                                    @csrf
                                                                    @method('DELETE')
                                                                    <button type="submit"
                                                                        class="dropdown-item text-{{ $detail->isactive == '0' ? 'success' : 'danger' }}"
                                                                        title="Hapus Data"
                                                                        onclick="return deleteData(event, '{{ $detail->idcuti }}','Batalkan')">
                                                                        <i class="fas fa-trash"></i> Batalkan Permohonan
                                                                    </button>
                                                                </form>
                                                            </li>
                                                        @endif
                                                    </ul>
                                                </div>
                                            </td>
                                            @foreach ($table_header as $field)
                                                @php
                                                    $string = $field->field;
                                                @endphp
                                                {{-- field type enum --}}
                                                @if ($field->type == 'enum')
                                                    <td
                                                        class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                                        @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/pck123/pckbr1/list.blade.php</b> on line <b>275</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/pck123/pckbr1/list.blade.php</b> on line <b>289</b><br />
                                                                    {{ $detail->$string == $sAsArray[0] ? $sAsArray[1] : '' }}
                                                                @endforeach
                                                            @endif
                                                        @endif
                                                    </td>
                                                    {{-- field type file --}}
                                                @elseif ($field->type == 'file')
                                                    <td
                                                        class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                                        @if ($detail->$string)
                                                            <a target="_blank" class="btn btn-sm btn-outline-success mb-0 py-1 px-2"
                                                                href="{{ asset('/storage' . '/' . $detail->$string) }}">
                                                                <i aria-hidden="true" class="fas fa-file-lines text-lg">
                                                                </i>
                                                                {{ $field->alias }}</a>
                                                        @endif
                                                    </td>
                                                    {{-- field type image --}}
                                                @elseif($field->type == 'image')
                                                    <td
                                                        class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                                        <span class="my-2 text-xs">
                                                            <img src="{{ 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/pck123/pckbr1/list.blade.php</b> on line <b>354</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')
                                                    <td
                                                        class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }} {{ $field->class == 'check-date' ? $detail->$string : '' }} text-end">
                                                        {{ \Carbon\Carbon::parse($detail->$string)->format('d/m/Y') }}
                                                    </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('pck123.pckbr1.partials.pagination')
                        </div>
                    </div>
                    <div class="row px-4 py-2">
                        <div class="col-lg">
                            {{-- <div class="nav-wrapper" id="noted">
                                <code>Note : <i aria-hidden="true"
                                                                                style="color: #c5ffbc;" class="fas fa-circle"></i> Data telah disetujui</code>
                            </div> --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    </div>
    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif

    {{-- 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 Cuti Tidak Aktif',
                    text: 'Tidak ada periode cuti yang aktif saat ini. Silakan ajukan permohonan cuti di lain waktu atau hubungi personalia.',
                    confirmButtonColor: '#028284'
                });
                return;
            }

            window.location = addUrl;
        }

        function openModal(primary) {
            window.currentPrimary = primary;

            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>
                                                `,
                showCancelButton: true,
                showDenyButton: true,
                confirmButtonText: 'Setujui',
                denyButtonText: 'Tolak',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284',
                denyButtonColor: '#dc3545',
                preConfirm: () => {
                    return {
                        note: document.getElementById('swalNote').value
                    };
                },
                preDeny: () => {
                    return {
                        note: document.getElementById('swalNote').value.trim()
                    };
                }
            }).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/cuti/personalia') }}";
        const baseUrlReject = "{{ URL::to('/reject/cuti/personalia') }}";

        function submitFormSweet(type, data) {
            const url = type === 'approve'
                ? `${baseUrlApprove}/${window.currentPrimary}`
                : `${baseUrlReject}/${window.currentPrimary}`;

            const requestBody = {
                note: data.note
            };

            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 #pagination-links li.page-item.active span.page-link')
                                    .text().trim() || 1;
                                fetchPage(currentPage);
                            });
                    } else {
                        Swal.fire('Gagal!', data.message, 'error');
                    }
                })
                .catch(() => {
                    Swal.fire('Error', 'Terjadi kesalahan sistem', 'error');
                });
        }
    </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 jenis_cuti_id = $('#jenis_cuti_id').val();
            const tanggal_mulai = $('#tanggal_mulai_hidden').val();
            const tanggal_berakhir = $('#tanggal_berakhir_hidden').val();
            const search = $('#search').val();

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

            // Mengirimkan ajax request
            $.ajax({
                url: "{{ url($url_menu) . '/ajax2/filter' }}?page=" + page,
                method: 'GET',
                data: {
                    periode_id: periode_id,
                    jenis_cuti_id: jenis_cuti_id,
                    tanggal_mulai: tanggal_mulai,
                    tanggal_berakhir: tanggal_berakhir,
                    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];
                        return item;
                    });

                    const dmenui = @json($dmenu);
                    const authorize = response.data.authorize;
                    let tbody = ''; // <— ini penting

                    if (response.data.table_detail.data.length === 0) {
                        tbody = `
                                                                <tr>
                                                                    <td colspan="11" class="text-center text-muted py-3">
                                                                        Maaf - Data tidak ada.
                                                                    </td>
                                                                </tr>`;
                    } else {
                        $.each(response.data.table_detail.data, function (index, row) {
                            let approvalButtons = '';
                            if (authorize.approval == '1') {
                                // Lock/Unlock button
                                approvalButtons += `
                                                                        <li>
                                                                            <form action="${baseurl}/lock-unlock/cuti/personalia/${row.ids}/${row.edit_terkunci == '1' ? '0' : '1'}"
                                                                                method="POST" data-terkunci="${row.edit_terkunci}"
                                                                                onsubmit="confirmLockUnlock(event, this)" style="display:inline;">
                                                                                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                                                                <button type="submit"
                                                                                    class="dropdown-item ${row.edit_terkunci == 1 ? 'text-success' : 'text-danger'} mb-0"
                                                                                    title="Lock/Unlock Data">
                                                                                    <i class="fas fa-lock"></i>
                                                                                    ${row.edit_terkunci == 1 ? 'Unlock Akses Edit' : 'Lock Akses Edit'}
                                                                                </button>
                                                                            </form>
                                                                        </li>`;

                                // Approval state
                                if (row.status == 'menyetujui') {
                                    approvalButtons += `
                                                                            <li>
                                                                                <button type="button" 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') {
                                    approvalButtons += `
                                                                            <li>
                                                                                <button type="button" 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 {
                                    approvalButtons += `
                                                                            <li>
                                                                                <button type="button" class="dropdown-item text-primary"
                                                                                    onclick="openModal('${row.ids}')" title="Setujui Data">
                                                                                    <i class="fas fa-check"></i> Beri Keputusan
                                                                                </button>
                                                                            </li>`;
                                }
                            }

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

                            let deleteButton = '';
                            if (authorize.delete == '1' && row.ids != 'msjit') {
                                deleteButton = `
                                                                        <li>
                                                                            <form action="${baseurl}/pckbr1/${row.ids}" method="POST">
                                                                                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                                                                <input type="hidden" name="_method" value="DELETE">
                                                                                <button type="submit"
                                                                                    class="dropdown-item text-${row.isactive == '0' ? 'success' : 'danger'}"
                                                                                    title="Hapus Data"
                                                                                    onclick="return deleteData(event, '${row.idcuti}','Batalkan')">
                                                                                    <i class="fas fa-trash"></i> Batalkan Permohonan
                                                                                </button>
                                                                            </form>
                                                                        </li>`;
                            }

                            tbody += `
                                                                    <tr ${row.status == 'menyetujui' ? 'style="background-color:#c5ffbc;"' : ''}>
                                                                        <td class="text-sm font-weight-normal">${row.row_num}</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}/pckbr1/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">
                                                                                    ${approvalButtons}
                                                                                    ${editButton}
                                                                                    ${deleteButton}
                                                                                </ul>
                                                                            </div>
                                                                        </td>
                                                                        <td class="text-sm font-weight-normal">${row.idcuti}</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.jenis_cuti}</td>
                                                                        <td class="text-sm font-weight-normal text-end">${row.tanggal_mulai}</td>
                                                                        <td class="text-sm font-weight-normal text-end">${row.tanggal_berakhir}</td>
                                                                        <td class="text-sm font-weight-normal text-end">${row.total_hari}</td>
                                                                        <td class="text-sm font-weight-normal">${row.alamat}</td>
                                                                        <td class="text-sm font-weight-normal">${row.nomor_telepon}</td>
                                                                        <td class="text-sm font-weight-normal text-end">${row.jumlah_cuti_minus_yang_dipakai}</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>`;
                        }); // tutup $.each
                    }

                    // Update tabel dan pagination
                    $('#list_' + dmenui + ' tbody').html(tbody);
                    $('#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>
@endsection
@push('js')
    {{-- 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",
                "infoFiltered": "(pencarian dari _MAX_ data)"
            },
            searching: false,
            paging: false,
            responsive: true,
            dom: 'frtip'
        });

        // 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 ${msg} Data ${name} ini?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: `Ya, ${msg}`,
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Find the closest form element and submit it manually
                    event.target.closest('form').submit();
                }
            });
        }

        // ========== KIRIM EMAIL FORM CUTI ==========
        let selectedKaryawan = [];

        console.log('modal email cuti script loaded');
        if (typeof $.fn.modal === 'undefined') {
            console.warn('Bootstrap modal plugin is not available');
        }

        // Load daftar karyawan saat modal dibuka
        $(document).on('show.bs.modal', '#modalKirimEmailCuti', function () {
            console.log('Modal show event triggered');
            $(this).attr('aria-hidden', 'false');
            // Clear previous messages
            $('#kirimEmailMessageContainer').html('');
            // Load active tokens only; employee list is loaded via Cari button
            loadActiveEmailTokens();
            console.log('Modal opened, fetching active tokens');
        });

        $(document).on('hidden.bs.modal', '#modalKirimEmailCuti', function () {
            $(this).attr('aria-hidden', 'true');
        });

        // Fungsi fetch data karyawan menggunakan endpoint ajax/filter (sama seperti pilih karyawan pemohon)
        function fetchEmailKaryawanPage(page) {
            const search = $('#search_input_kirim_email_cuti').val() || '';
            const tbody = $('#karyawanTableBody');

            // Show loading
            const loadingSpinner = document.getElementById('loading-spinner_kirim_email_cuti');
            const paginationLoading = document.getElementById('pagination-loading_kirim_email_cuti');
            const searchButton = document.getElementById('search_button_kirim_email_cuti');
            const paginationLinks = document.getElementById('pagination-links_kirim_email_cuti');
            const paginationInfo = document.getElementById('pagination-info_kirim_email_cuti');

            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_cuti'
                },
                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 = selectedKaryawan.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-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>');
                    }

                    // Update pagination using server-rendered view
                    $('#pagination-container_kirim_email_cuti').html(response.pagination);

                    // Hide loading
                    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';

                    updateSelectedList();
                },
                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;
                }
            });
        }

        // Handle search button click
        $(document).on('click', '#search_button_kirim_email_cuti', function (event) {
            event.preventDefault();
            fetchEmailKaryawanPage(1);
        });

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

        // Handle enter key on search input
        $('#search_input_kirim_email_cuti').on('keypress', function (e) {
            if (e.which === 13) {
                e.preventDefault();
                fetchEmailKaryawanPage(1);
            }
        });

        // Handle select karyawan button
        $(document).on('click', '.select-karyawan-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;
            }

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

        // Remove from selected list
        $(document).on('click', '.remove-selected', function () {
            const nik = $(this).data('nik');
            selectedKaryawan = selectedKaryawan.filter(k => k.nik !== nik);
            updateSelectedList();

            // Reset button state if visible
            $(`.select-karyawan-btn[data-nik="${nik}"]`).removeClass('bg-success').addClass('bg-primary').html('<i class="bi bi-check-circle me-1"></i> Select');
        });

        // Update selected list display
        function updateSelectedList() {
            const container = $('#selectedKaryawanList');
            const count = selectedKaryawan.length;
            $('#selectedCount').text(count);

            // Enable/disable button
            if (count > 0) {
                $('#btnKirimEmail').prop('disabled', false).removeAttr('disabled');
            } else {
                $('#btnKirimEmail').prop('disabled', true);
            }

            console.log('updateSelectedList - count:', count, 'button disabled:', $('#btnKirimEmail').prop('disabled'));

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

                let html = '';
                // Sort departemen alphabetically
                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" 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>');
            }
        }

        // Kirim email - menggunakan event delegation agar berfungsi di modal
        $(document).on('click', '#btnKirimEmail', function (e) {
            e.preventDefault();
            e.stopPropagation();

            console.log('Kirim Email clicked, selectedKaryawan:', selectedKaryawan);

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

            // Langsung kirim tanpa konfirmasi popup
            sendLeaveFormEmail();
        });

        // Proses kirim email
        function sendLeaveFormEmail() {
            // Show loading inline
            $('#btnKirimEmail').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i> Mengirim...');

            // Extract NIK list from selectedKaryawan objects
            const nikList = selectedKaryawan.map(k => k.nik);

            $.ajax({
                url: '{{ route("pckbr1.send-leave-form-email") }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    karyawan_list: nikList
                },
                success: function (response) {
                    $('#btnKirimEmail').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,
                            confirmButtonText: 'OK'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                // Reset selection
                                selectedKaryawan = [];
                                updateSelectedList();
                                // Close modal
                                $('#modalKirimEmailCuti').modal('hide');
                            }
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: response.message,
                            confirmButtonText: 'OK'
                        });
                    }
                },
                error: function (xhr) {
                    $('#btnKirimEmail').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: 'Error',
                        text: message,
                        confirmButtonText: 'OK'
                    });
                }
            });
        }

        // Load active email tokens
        let activeTokensDataTable;

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

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

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

            $.ajax({
                url: '{{ route("pckbr1.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-btn" data-id="${row.id}" title="Nonaktifkan">
                                        <i class="fas fa-ban"></i>
                                    </button>
                                </td>
                            </tr>`;
                        });
                    } else {
                        tbody = '';
                    }

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

                    activeTokensDataTable = $('#list_active_tokens').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);
                    $('#activeTokensTableBody').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-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('pckbr1.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(() => {
                                    loadActiveEmailTokens();
                                });
                            } 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'
                            });
                        }
                    });
                }
            });
        });
    </script>

    {{-- Modal Kirim Email Form Cuti --}}
    <div class="modal fade" id="modalKirimEmailCuti" tabindex="-1" aria-labelledby="modalKirimEmailCutiLabel"
        aria-hidden="true" aria-modal="true" role="dialog">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalKirimEmailCutiLabel">
                        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">
                            <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="activeTokensTableBody"></tbody>
                        </table>
                    </div>
                </div>

                {{-- Selected Karyawan List --}}
                <div class="px-3 pt-3">
                    {{-- Container untuk inline messages --}}
                    <div id="kirimEmailMessageContainer"></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 cuti.</span>
                    </div>
                    <label class="form-label fw-bold">Karyawan Terpilih (<span id="selectedCount">0</span>):</label>
                    <div id="selectedKaryawanList" 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>

                {{-- Search --}}
                <div class="search-group d-flex justify-content-end align-items-center px-3">
                    <input type="text" id="search_input_kirim_email_cuti" 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_cuti">
                        <i class="fas fa-search me-1"></i>
                        <span class="font-weight-bold">Cari</span>
                        <div id="loading-spinner_kirim_email_cuti" class="spinner-border spinner-border-sm text-light ms-2"
                            role="status" style="display: none;">
                            <span class="sr-only">Loading...</span>
                        </div>
                    </button>
                </div>

                {{-- Table karyawan --}}
                <div class="modal-body table-responsive">
                    <table class="table display table-bordered table-striped" id="list_kirim_email_cuti">
                        <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="karyawanTableBody">
                            <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_cuti" class="d-flex justify-content-between"
                        style="overflow-x: auto;">
                        <div>
                            <span id="pagination-info_kirim_email_cuti" class="text-muted"></span>
                        </div>
                        <div>
                            <div id="pagination-loading_kirim_email_cuti" style="display: none; text-align: center;">
                                <span class="spinner-border spinner-border-sm text-primary"></span> Memuat...
                            </div>
                            <div id="pagination-links_kirim_email_cuti"></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="btnKirimEmail" disabled>
                            <i class="fas fa-paper-plane me-1"></i>Kirim Email
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endpush