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

@section('content')
    <style>
        /* Nav Tabs */
        .nav-tabs .nav-link {
            color: #6c757d;
            font-weight: 600;
            border: none;
            border-bottom: 3px solid transparent;
            padding: 10px 14px;
            transition: all 0.3s ease;
            font-size: 0.85rem;
        }

        .nav-tabs .nav-link:hover {
            color: #028284;
            border-color: transparent;
            background-color: #00b7bd1a;
            border-radius: 8px 8px 0 0;
        }

        .nav-tabs .nav-link.active {
            color: #028284;
            background-color: transparent;
            border-color: transparent;
            border-bottom: 3px solid #028284;
        }

        /* Custom Table Header */
        .table-custom-header th {
            background-color: #00b7bd4f !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            font-size: 0.8rem;
            letter-spacing: 0px;
        }

        /* Badges */
        .badge-status-active {
            background-color: #4e73df;
            color: #fff;
        }

        .badge-status-test {
            background-color: #36b9cc;
            color: #fff;
        }

        .badge-status-interview {
            background-color: #6f42c1;
            color: #fff;
        }

        .badge-status-accepted,
        .badge-status-passed {
            background-color: #1cc88a;
            color: #fff;
        }

        .badge-status-rejected,
        .badge-status-failed {
            background-color: #e74a3b;
            color: #fff;
        }

        .badge-status-pending {
            background-color: #f6c23e;
            color: #fff;
        }

        .badge-status-scheduled,
        .badge-status-psikotes {
            background-color: #028284;
            color: #fff;
        }

        .badge-status-expired {
            background-color: #858796;
            color: #fff;
        }

        .badge-status-completed {
            background-color: #6c757d;
            color: #fff;
        }

        /* ── Mobile Card Layout ── */
        .mobile-card-list {
            display: none;
        }

        @media (max-width: 767px) {

            /* Hide desktop table, show cards */
            .desktop-table {
                display: none;
            }

            .mobile-card-list {
                display: block;
            }

            /* Nav tabs: scrollable horizontal strip */
            .nav-tabs {
                flex-wrap: nowrap;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                border-bottom: 1px solid #dee2e6;
                scrollbar-width: none;
            }

            .nav-tabs::-webkit-scrollbar {
                display: none;
            }

            .nav-tabs .nav-link {
                white-space: nowrap;
                font-size: 0.78rem;
                padding: 8px 10px;
            }

            /* Application card */
            .app-card {
                background: #fff;
                border: 0.5px solid #dee2e6;
                border-radius: 10px;
                padding: 12px 14px;
                margin-bottom: 10px;
            }

            .app-card-header {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                margin-bottom: 8px;
            }

            .app-card-title {
                font-size: 0.875rem;
                font-weight: 600;
                color: #333;
                margin: 0;
            }

            .app-card-sub {
                font-size: 0.75rem;
                color: #888;
                margin-top: 2px;
            }

            .app-card-meta {
                font-size: 0.72rem;
                color: #aaa;
                margin-bottom: 8px;
            }

            .app-card-footer {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                padding-top: 8px;
                border-top: 0.5px solid #f0f0f0;
            }

            .app-card.unread {
                background-color: #f8f9fa;
            }

            .app-card.completed {
                opacity: 0.95;
                border-color: #e9ecef;
            }
        }
    </style>

    @include('layouts.navbars.auth.topnav', ['title' => 'Aktivitas Lamaran'])
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card mx-1">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Aktivitas Lamaran Anda</h5>
                    </div>
                    <div class="px-4">
                        @include('components.alert')
                    </div>

                    <div class="row px-3 px-md-4 py-2">
                        <div class="col-lg">
                            <div class="nav-wrapper">
                                @php
                                    $user = auth()->user();
                                    $notifStatus = 0;
                                    $notifTes = 0;
                                    $notifInterview = 0;

                                    foreach ($unreadNotifs as $n) {
                                        $pesan = strtolower($n->data['message'] ?? '');
                                        if (str_contains($pesan, 'tes') || str_contains($pesan, 'test')) {
                                            $notifTes++;
                                        } elseif (
                                            str_contains($pesan, 'interview') ||
                                            str_contains($pesan, 'wawancara')
                                        ) {
                                            $notifInterview++;
                                        } else {
                                            $notifStatus++;
                                        }
                                    }
                                @endphp

                                <ul class="nav nav-tabs" id="lamaranTab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active position-relative" id="status-tab"
                                            data-bs-toggle="tab" data-bs-target="#status" type="button" role="tab"
                                            aria-controls="status" aria-selected="true">
                                            <i class="fas fa-file-alt me-1"></i>Status Lamaran
                                            @if ($notifStatus > 0)
                                                <span class="badge bg-danger rounded-pill ms-1"
                                                    style="font-size: 0.6rem; padding: 0.25em 0.5em;">{{ $notifStatus }}</span>
                                            @endif
                                        </button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link position-relative" id="tes-tab" data-bs-toggle="tab"
                                            data-bs-target="#tes" type="button" role="tab" aria-controls="tes"
                                            aria-selected="false">
                                            <i class="fas fa-laptop-code me-1"></i>Undangan Tes
                                            @if ($notifTes > 0)
                                                <span class="badge bg-danger rounded-pill ms-1"
                                                    style="font-size: 0.6rem; padding: 0.25em 0.5em;">{{ $notifTes }}</span>
                                            @endif
                                        </button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link position-relative" id="interview-tab" data-bs-toggle="tab"
                                            data-bs-target="#interview" type="button" role="tab"
                                            aria-controls="interview" aria-selected="false">
                                            <i class="fas fa-user-tie me-1"></i>Undangan Interview
                                            @if ($notifInterview > 0)
                                                <span class="badge bg-danger rounded-pill ms-1"
                                                    style="font-size: 0.6rem; padding: 0.25em 0.5em;">{{ $notifInterview }}</span>
                                            @endif
                                        </button>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="row px-3 px-md-4 py-2">
                        <div class="tab-content" id="lamaranTabContent">

                            {{-- STATUS LAMARAN --}}
                            <div class="tab-pane fade show active" id="status" role="tabpanel"
                                aria-labelledby="status-tab">

                                {{-- Desktop Table --}}
                                <div class="table-responsive desktop-table">
                                    <table class="table display align-items-center mb-0 table-hover">
                                        <thead class="thead-light table-custom-header">
                                            <tr>
                                                <th class="w-5 text-center">No</th>
                                                <th class="text-start ps-2">Posisi Dilamar</th>
                                                <th class="text-start ps-2">Departemen</th>
                                                <th class="text-start ps-2">Tanggal Melamar</th>
                                                <th class="text-center">Status</th>
                                                <th class="text-center">Aksi</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($applications as $index => $app)
                                                @php
                                                    $appNotif = $unreadNotifs->first(
                                                        fn($n) => isset($n->data['dmenu']) &&
                                                            $n->data['dmenu'] === 'lamaran' &&
                                                            isset($n->data['posisi']) &&
                                                            $n->data['posisi'] === ($app->vacancy?->posisi ?? ''),
                                                    );
                                                    $notifId = $appNotif?->id ?? null;
                                                    $isUnread = !is_null($notifId);
                                                @endphp
                                                <tr style="{{ $isUnread ? 'background-color:#f8f9fa; cursor:pointer;' : '' }}"
                                                    class="{{ $isUnread ? 'table-row-hover' : '' }}"
                                                    onclick="{{ $isUnread ? "markAsRead('{$notifId}', this)" : '' }}">
                                                    <td class="text-center text-sm">{{ $index + 1 }}</td>
                                                    <td>
                                                        <h6
                                                            class="mb-0 text-sm {{ $isUnread ? 'text-unread font-weight-bold text-dark' : '' }}">
                                                            {{ $app->vacancy?->posisi ?? 'Posisi tidak tersedia' }}
                                                        </h6>
                                                    </td>
                                                    <td class="text-sm">
                                                        {{ $app->vacancy?->department?->nama ?? 'Departemen tidak tersedia' }}
                                                    </td>
                                                    <td class="text-sm">{{ $app->created_at->format('d M Y H:i:s') }}</td>
                                                    <td class="text-center">
                                                        <span
                                                            class="badge badge-status-{{ strtolower($app->status) }} badge-sm">
                                                            {{ ucfirst($app->status) }}
                                                        </span>
                                                    </td>
                                                    <td class="text-center">
                                                        <button type="button"
                                                            class="btn btn-sm btn-outline-info mb-0 btn-detail-lamaran"
                                                            data-posisi="{{ $app->vacancy?->posisi ?? 'Posisi tidak tersedia' }}"
                                                            data-departemen="{{ $app->vacancy?->department?->nama ?? 'Departemen tidak tersedia' }}"
                                                            data-tanggal="{{ $app->created_at->format('d M Y H:i:s') }}"
                                                            data-status-text="{{ ucfirst($app->status) }}"
                                                            data-status-code="{{ $app->status }}">
                                                            <i class="fas fa-eye"></i> Detail
                                                        </button>
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="6" class="text-center text-sm py-4">Belum ada riwayat
                                                        lamaran.</td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>

                                {{-- Mobile Cards --}}
                                <div class="mobile-card-list">
                                    @forelse($applications as $index => $app)
                                        @php
                                            $appNotif = $unreadNotifs->first(
                                                fn($n) => isset($n->data['dmenu']) &&
                                                    $n->data['dmenu'] === 'lamaran' &&
                                                    isset($n->data['posisi']) &&
                                                    $n->data['posisi'] === ($app->vacancy?->posisi ?? ''),
                                            );
                                            $notifId = $appNotif?->id ?? null;
                                            $isUnread = !is_null($notifId);
                                        @endphp
                                        <div class="app-card {{ $isUnread ? 'unread' : '' }}"
                                            onclick="{{ $isUnread ? "markAsRead('{$notifId}', this)" : '' }}"
                                            style="{{ $isUnread ? 'cursor:pointer;' : '' }}">
                                            <div class="app-card-header">
                                                <div>
                                                    <p class="app-card-title {{ $isUnread ? 'fw-bold' : '' }}">
                                                        {{ $app->vacancy?->posisi ?? 'Posisi tidak tersedia' }}
                                                    </p>
                                                    <p class="app-card-sub">
                                                        {{ $app->vacancy?->department?->nama ?? 'Departemen tidak tersedia' }}
                                                    </p>
                                                </div>
                                                <span
                                                    class="badge badge-status-{{ strtolower($app->status) }} badge-sm ms-2">
                                                    {{ ucfirst($app->status) }}
                                                </span>
                                            </div>
                                            <p class="app-card-meta"><i
                                                    class="fas fa-calendar-alt me-1"></i>{{ $app->created_at->format('d M Y H:i:s') }}
                                            </p>
                                            <div class="app-card-footer">
                                                @if ($app->status === 'psikotes')
                                                    <button class="btn btn-sm btn-warning mb-0 btn-psikotes"
                                                        data-posisi="{{ $app->vacancy?->posisi ?? 'Posisi tidak tersedia' }}">
                                                        <i class="fas fa-brain"></i> Mulai Psikotes
                                                    </button>
                                                @else
                                                    <button type="button"
                                                        class="btn btn-sm btn-outline-info mb-0 btn-detail-lamaran"
                                                        data-posisi="{{ $app->vacancy?->posisi ?? 'Posisi tidak tersedia' }}"
                                                        data-departemen="{{ $app->vacancy?->department?->nama ?? 'Departemen tidak tersedia' }}"
                                                        data-tanggal="{{ $app->created_at->format('d M Y H:i:s') }}"
                                                        data-status-text="{{ ucfirst($app->status) }}"
                                                        data-status-code="{{ $app->status }}">
                                                        <i class="fas fa-eye"></i> Detail
                                                    </button>
                                                @endif
                                            </div>
                                        </div>
                                    @empty
                                        <p class="text-center text-muted py-4 text-sm">Belum ada riwayat lamaran.</p>
                                    @endforelse
                                </div>

                            </div>

                            {{-- UNDANGAN TES --}}
                            <div class="tab-pane fade" id="tes" role="tabpanel" aria-labelledby="tes-tab">
                                @include('components.stslam.invitations-table', [
                                    'invitations' => $test_invitations,
                                    'tipe' => 'tes',
                                    'emptyMessage' => 'Belum ada jadwal tes yang tersedia.',
                                    'unreadNotifs' => $unreadNotifs,
                                ])
                            </div>

                            {{-- UNDANGAN INTERVIEW --}}
                            <div class="tab-pane fade" id="interview" role="tabpanel" aria-labelledby="interview-tab">
                                @include('components.stslam.invitations-table', [
                                    'invitations' => $interview_invitations,
                                    'tipe' => 'interview',
                                    'emptyMessage' => 'Belum ada jadwal wawancara yang tersedia.',
                                    'unreadNotifs' => $unreadNotifs,
                                ])
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- MODAL DETAIL LAMARAN --}}
    <div class="modal fade" id="detailLamaranModal" tabindex="-1" aria-labelledby="detailLamaranModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content border-0 shadow">
                <div class="modal-header border-bottom-0" style="background-color: #00b7bd1a;">
                    <h5 class="modal-title" id="detailLamaranModalLabel" style="color: #028284;">
                        <i class="fas fa-file-alt me-2"></i>Detail Lamaran
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body px-4 py-3">
                    <div class="table-responsive">
                        <table class="table table-borderless table-sm mb-0">
                            <tbody>
                                <tr>
                                    <th width="40%" class="text-sm text-secondary font-weight-bolder opacity-7">Posisi
                                        Dilamar</th>
                                    <td width="5%" class="text-sm">:</td>
                                    <td class="text-sm font-weight-bold text-dark" id="modal-posisi"></td>
                                </tr>
                                <tr>
                                    <th class="text-sm text-secondary font-weight-bolder opacity-7">Departemen</th>
                                    <td class="text-sm">:</td>
                                    <td class="text-sm text-dark" id="modal-departemen"></td>
                                </tr>
                                <tr>
                                    <th class="text-sm text-secondary font-weight-bolder opacity-7">Tanggal Melamar</th>
                                    <td class="text-sm">:</td>
                                    <td class="text-sm text-dark" id="modal-tanggal"></td>
                                </tr>
                                <tr>
                                    <th class="text-sm text-secondary font-weight-bolder opacity-7 align-middle">Status
                                        Saat Ini</th>
                                    <td class="text-sm align-middle">:</td>
                                    <td class="text-sm">
                                        <span class="badge badge-sm" id="modal-status"></span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer border-top-0">
                    <button type="button" class="btn btn-secondary btn-sm mb-0" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

    {{-- MODAL PREVIEW EMAIL USER --}}
    <div class="modal fade" id="emailPreviewModal" tabindex="-1" aria-labelledby="emailPreviewModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content border-0 shadow">
                <div class="modal-header border-bottom-0" style="background-color: #00b7bd1a;">
                    <h5 class="modal-title" id="emailPreviewModalLabel" style="color: #028284;">
                        <i class="fas fa-envelope-open-text me-2"></i>Pesan Undangan
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body p-0">
                    <iframe id="emailIframe" src=""
                        style="width:100%; height:65vh; border:none; display:block; border-radius: 0 0 0.5rem 0.5rem;"></iframe>
                </div>
            </div>
        </div>
    </div>

    {{-- MODAL MASUKKAN KODE TES --}}
    <div class="modal fade" id="testCodeModal" tabindex="-1" aria-labelledby="testCodeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content border-0 shadow">
                <div class="modal-header border-bottom-0" style="background-color: #00b7bd1a;">
                    <h5 class="modal-title" id="testCodeModalLabel" style="color: #028284;">
                        <i class="fas fa-key me-2"></i>Masukkan Kode Tes
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body px-4 py-3">
                    <p class="text-sm text-muted mb-3">
                        Anda akan melakukan psikotes awal untuk posisi <b id="modal-test-posisi"></b>.
                        Masukkan kode unik yang telah dikirimkan ke Email/WhatsApp Anda.
                    </p>
                    <div class="mb-3">
                        <label for="testCodeInput" class="form-label text-sm font-weight-bold">Kode Tes</label>
                        <input type="text" class="form-control" id="testCodeInput"
                            placeholder="Masukkan kode tes Anda" autocomplete="off">
                        <small class="form-text text-muted mt-1">Kode tes bersifat case-sensitive</small>
                    </div>
                </div>
                <div class="modal-footer border-top-0">
                    <button type="button" class="btn btn-secondary btn-sm mb-0" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-warning btn-sm mb-0" id="btnSubmitTestCode">
                        <i class="fas fa-check me-1"></i>Masukkan Kode & Mulai
                    </button>
                </div>
            </div>
        </div>
    </div>

    <form id="formKonfirmasi" method="POST" action="{{ url('stslam') }}" style="display: none;">
        @csrf
        <input type="hidden" name="custom_action" id="custom_action_input" value="">
        <input type="hidden" name="id_target" id="id_target" value="">
    </form>
@endsection

@push('js')
    <script>
        function markAsRead(id, rowElement) {
            if (!id || !rowElement) return;

            fetch(`{{ url('notifications') }}/${id}/mark-as-read`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                }
            }).finally(() => {
                $(rowElement)
                    .css({
                        'background-color': '',
                        'cursor': 'default'
                    })
                    .removeClass('table-row-hover unread')
                    .removeAttr('onclick');
                $(rowElement).find('.text-unread, .fw-bold')
                    .removeClass('text-unread font-weight-bold fw-bold text-dark')
                    .addClass('font-weight-normal text-muted');

                let $topnav = $('#topnav-badge');
                if ($topnav.length) {
                    let count = (parseInt($topnav.attr('data-count')) || 0) - 1;
                    count <= 0 ?
                        $topnav.fadeOut('fast') :
                        $topnav.attr('data-count', count).text(count > 9 ? '9+' : count);
                }
            });
        }

        document.addEventListener('DOMContentLoaded', function() {

            // Detail Lamaran
            document.querySelectorAll('.btn-detail-lamaran').forEach(button => {
                button.addEventListener('click', function() {
                    document.getElementById('modal-posisi').innerText = this.dataset.posisi;
                    document.getElementById('modal-departemen').innerText = this.dataset.departemen;
                    document.getElementById('modal-tanggal').innerText = this.dataset.tanggal;

                    let statusBadge = document.getElementById('modal-status');
                    statusBadge.innerText = this.dataset.statusText;
                    statusBadge.className =
                        `badge badge-status-${this.dataset.statusCode.toLowerCase()} badge-sm`;

                    let modalEl = document.getElementById('detailLamaranModal');
                    let modal = bootstrap.Modal.getInstance(modalEl) || new bootstrap.Modal(
                        modalEl);
                    modal.show();
                });
            });

            // Handler Mulai Psikotes
            document.querySelectorAll('.btn-mulai-psikotes').forEach(button => {
                button.addEventListener('click', function() {
                    let posisi = this.dataset.posisi;
                    let invitationId = this.dataset.invitationId;

                    document.getElementById('btnSubmitTestCode').dataset.invitationId =
                    invitationId;
                    document.getElementById('modal-test-posisi').innerText = posisi;
                    document.getElementById('testCodeInput').value = '';

                    // Show modal
                    let modalEl = document.getElementById('testCodeModal');
                    let modal = bootstrap.Modal.getInstance(modalEl) || new bootstrap.Modal(
                    modalEl);
                    modal.show();

                    // Focus on input field
                    document.getElementById('testCodeInput').focus();
                });
            });

            // Handler Submit Test Code
            document.getElementById('btnSubmitTestCode').addEventListener('click', function() {
                let testCode = document.getElementById('testCodeInput').value.trim();
                let invitationId = this.dataset.invitationId;

                if (!testCode) {
                    alert('Harap masukkan kode tes terlebih dahulu');
                    return;
                }

                // Create and submit form
                let form = document.createElement('form');
                form.method = 'POST';
                form.action = '{{ url('stslam') }}';

                let csrf = document.createElement('input');
                csrf.type = 'hidden';
                csrf.name = '_token';
                csrf.value = '{{ csrf_token() }}';
                form.appendChild(csrf);

                let customActionInput = document.createElement('input');
                customActionInput.type = 'hidden';
                customActionInput.name = 'custom_action';
                customActionInput.value = 'accessTest';
                form.appendChild(customActionInput);

                let invitationIdInput = document.createElement('input');
                invitationIdInput.type = 'hidden';
                invitationIdInput.name = 'invitation_id';
                invitationIdInput.value = invitationId;
                form.appendChild(invitationIdInput);

                let testCodeInput = document.createElement('input');
                testCodeInput.type = 'hidden';
                testCodeInput.name = 'test_code';
                testCodeInput.value = testCode;
                form.appendChild(testCodeInput);

                document.body.appendChild(form);
                form.submit();
            });

            // Handler Lanjutkan Psikotes
            document.querySelectorAll('.btn-lanjut-psikotes').forEach(button => {
                button.addEventListener('click', function() {
                    let invitationId = this.dataset.invitationId;

                    let form = document.createElement('form');
                    form.method = 'POST';
                    form.action = '{{ url('stslam') }}';

                    let csrf = document.createElement('input');
                    csrf.type = 'hidden';
                    csrf.name = '_token';
                    csrf.value = '{{ csrf_token() }}';
                    form.appendChild(csrf);

                    let customActionInput = document.createElement('input');
                    customActionInput.type = 'hidden';
                    customActionInput.name = 'custom_action';
                    customActionInput.value = 'accessTest';
                    form.appendChild(customActionInput);

                    let invitationIdInput = document.createElement('input');
                    invitationIdInput.type = 'hidden';
                    invitationIdInput.name = 'invitation_id';
                    invitationIdInput.value = invitationId;
                    form.appendChild(invitationIdInput);

                    document.body.appendChild(form);
                    form.submit();
                });
            });

            document.querySelectorAll('.btn-konfirmasi').forEach(button => {
                button.addEventListener('click', function() {
                    let idTarget = this.dataset.id;
                    let posisi = this.dataset.posisi;
                    let type = this.dataset.type;

                    let textConfirm = type === 'application' ?
                        `Apakah Anda siap untuk memulai tahapan psikotes untuk posisi ${posisi}?` :
                        `Apakah Anda bersedia hadir pada jadwal tes/wawancara untuk posisi ${posisi}?`;

                    Swal.fire({
                        title: 'Konfirmasi',
                        text: textConfirm,
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonText: 'Ya, Saya Bersedia',
                        cancelButtonText: 'Nanti Saja / Berhalangan',
                        confirmButtonColor: '#028284',
                        cancelButtonColor: '#e74a3b',
                        reverseButtons: true
                    }).then((result) => {
                        if (result.isConfirmed) {
                            document.getElementById('id_target').value = idTarget;
                            document.getElementById('custom_action_input').value = type ===
                                'application' ? 'confirmApplication' : 'confirmInvitation';
                            document.getElementById('formKonfirmasi').submit();
                        } else if (result.dismiss === Swal.DismissReason.cancel) {
                            let textCancel = type === 'application' ?
                                'Konfirmasi dibatalkan.' :
                                'Silakan hubungi HRD jika Anda ingin menjadwalkan ulang.';
                            Swal.fire({
                                title: 'Dibatalkan',
                                text: textCancel,
                                icon: 'warning',
                                confirmButtonColor: '#028284'
                            });
                        }
                    });
                });
            });

            // Lihat Email Undangan
            document.querySelectorAll('.btn-lihat-email').forEach(button => {
                button.addEventListener('click', function(e) {
                    e.stopPropagation();

                    let id = this.dataset.id;
                    let iframe = document.getElementById('emailIframe');

                    iframe.src = `{{ url('stslam/api/viewEmail') }}?id=${id}`;

                    let modalElement = document.getElementById('emailPreviewModal');
                    let modalInstance = bootstrap.Modal.getInstance(modalElement) || new bootstrap
                        .Modal(modalElement);
                    modalInstance.show();
                });
            });

            let emailModal = document.getElementById('emailPreviewModal');
            if (emailModal) {
                emailModal.addEventListener('hidden.bs.modal', function() {
                    document.getElementById('emailIframe').src = '';
                });
            }
        });
    </script>
@endpush