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

@section('content')
    @include('layouts.navbars.auth.topnav')
    
    <div class="container-fluid pt-0 pb-2">
        {{-- TABS NAVIGATION --}}
        <ul class="nav nav-tabs mb-0" id="tukarJadwalTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="history-tab" data-bs-toggle="tab" data-bs-target="#history" 
                        type="button" role="tab">
                    <i class="fas fa-history me-2"></i>History Tukar Jadwal
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="form-tab" data-bs-toggle="tab" data-bs-target="#form" 
                        type="button" role="tab">
                    <i class="fas fa-plus-circle me-2"></i>Pengajuan Baru
                </button>
            </li>
        </ul>

        {{-- TAB CONTENT --}}
        <div class="tab-content" id="tukarJadwalTabContent">
            
            {{-- HISTORY TAB --}}
            <div class="tab-pane fade show active" id="history" role="tabpanel">
                <div class="card shadow-sm mb-2">
                    <div class="card-body p-3">
                        <div class="mb-1">
                            <h6 class="mb-0 text-dark font-weight-bold">History Tukar Jadwal</h6>
                        </div>
                        <div class="row g-3 align-items-end mt-0">
                            <div class="col-md-4">
                                <label for="historyTanggalFilter" class="form-label text-sm font-weight-bold">Tanggal</label>
                                <input type="date" class="form-control" id="historyTanggalFilter">
                            </div>
                            <div class="col-md-4">
                                <label for="historyKaryawanFilter" class="form-label text-sm font-weight-bold">Nama Karyawan</label>
                                <input type="text" class="form-control" id="historyKaryawanFilter" placeholder="Cari NIK / nama karyawan...">
                            </div>
                            <div class="col-md-4 d-flex align-items-end">
                                <button class="btn btn-primary w-100 d-block btn-filter-align" type="button" onclick="applyHistoryFilter()">
                                    <i class="fas fa-search me-1"></i>Terapkan
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card shadow-sm">
                    <div class="card-body p-3">
                        <div class="history-content-wrap">
                            <div class="d-flex justify-content-start mb-2 history-top-actions">
                                <button class="btn btn-primary" type="button" onclick="startNewTukarJadwal()">
                                    <i class="fas fa-plus me-1"></i>Tambah
                                </button>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-hover align-items-center mb-0" id="historyTable">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th class="col-action">Action</th>
                                            <th class="col-no">No</th>
                                            <th>Tanggal Pengajuan</th>
                                            <th>Karyawan Pengaju</th>
                                            <th>Departemen</th>
                                            <th>Shift Asal</th>
                                            <th>Grup Asal</th>
                                            <th>Karyawan Ditukar</th>
                                            <th>Departemen</th>
                                            <th>Shift Tujuan</th>
                                            <th>Grup Tujuan</th>
                                            <th>Tanggal Tukar</th>
                                        </tr>
                                    </thead>
                                    <tbody id="historyTableBody">
                                        <tr>
                                            <td colspan="12" class="text-center py-5">
                                                <div class="spinner-border text-primary" role="status">
                                                    <span class="visually-hidden">Loading...</span>
                                                </div>
                                                <p class="text-sm text-secondary mt-3">Memuat history...</p>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- FORM TAB --}}
            <div class="tab-pane fade" id="form" role="tabpanel">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <div class="mb-2">
                            <h6 class="mb-0 text-dark font-weight-bold">Tukar Jadwal</h6>
                            <p class="text-sm mb-0 text-secondary">Perubahan langsung diproses dan tampil di history</p>
                        </div>
                        <form id="tukarJadwalForm" onsubmit="submitTukarJadwal(event)">
                            <input type="hidden" id="tukar_jadwal_id" value="">
                            <div class="row mb-4">
                                <div class="col-md-6">
                                    <label for="tanggal_tukar" class="form-label text-sm font-weight-bold">
                                        Tanggal Tukar Jadwal <span class="text-danger">*</span>
                                    </label>
                                    <input type="date" class="form-control" id="tanggal_tukar" name="tanggal_tukar" required>
                                </div>
                            </div>

                            <div class="row">
                                {{-- KARYAWAN PENGAJU --}}
                                <div class="col-md-5">
                                    <div class="mb-3 position-relative">
                                        <label for="karyawan_pengaju" class="form-label text-sm font-weight-bold">
                                            Karyawan Pengaju <span class="text-danger">*</span>
                                        </label>
                                        <input type="hidden" id="nik_pengaju" name="nik_pengaju">
                                        <div class="input-group karyawan-picker-group">
                                            <input type="text" class="form-control" id="karyawan_pengaju"
                                                   placeholder="Pilih Karyawan Pemohon" readonly required>
                                            <button class="btn btn-primary search-btn" type="button"
                                                onclick="openKaryawanModal('pengaju')">
                                                <i class="fas fa-search"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label text-sm font-weight-bold">Shift Saat Ini</label>
                                        <input type="text" class="form-control bg-light" id="shift_pengaju" readonly 
                                               placeholder="Pilih karyawan terlebih dahulu">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label text-sm font-weight-bold">Grup Saat Ini</label>
                                        <input type="text" class="form-control bg-light" id="grub_pengaju" readonly 
                                               placeholder="Pilih karyawan terlebih dahulu">
                                    </div>
                                </div>

                                {{-- ICON TUKAR --}}
                                <div class="col-md-2 d-flex align-items-center justify-content-center">
                                    <div class="text-center" style="margin-top: 20px;">
                                        <i class="fas fa-exchange-alt fa-3x text-primary"></i>
                                    </div>
                                </div>

                                {{-- KARYAWAN DITUKAR --}}
                                <div class="col-md-5">
                                    <div class="mb-3 position-relative">
                                        <label for="karyawan_ditukar" class="form-label text-sm font-weight-bold">
                                            Karyawan Ditukar <span class="text-danger">*</span>
                                        </label>
                                        <input type="hidden" id="nik_ditukar" name="nik_ditukar">
                                        <div class="input-group karyawan-picker-group">
                                            <input type="text" class="form-control" id="karyawan_ditukar"
                                                   placeholder="Pilih Karyawan Pengganti" readonly required>
                                            <button class="btn btn-primary search-btn" type="button"
                                                onclick="openKaryawanModal('ditukar')">
                                                <i class="fas fa-search"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label text-sm font-weight-bold">Shift Tujuan</label>
                                        <input type="text" class="form-control bg-light" id="shift_ditukar" readonly 
                                               placeholder="Pilih karyawan terlebih dahulu">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label text-sm font-weight-bold">Grup Saat Ini</label>
                                        <input type="text" class="form-control bg-light" id="grub_ditukar" readonly 
                                               placeholder="Pilih karyawan terlebih dahulu">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="alasan" class="form-label text-sm font-weight-bold">
                                            Alasan Tukar Jadwal <span class="text-danger">*</span>
                                        </label>
                                        <textarea class="form-control" id="alasan" name="alasan" rows="3" 
                                                  placeholder="Ada keperluan keluarga mendadak" required></textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="catatan_admin" class="form-label text-sm font-weight-bold">
                                            Catatan (Opsional)
                                        </label>
                                        <textarea class="form-control" id="catatan_admin" name="catatan_admin" rows="2" 
                                                  placeholder="Tambah catatan jika diperlukan..."></textarea>
                                        <small class="text-muted"></small>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="d-flex gap-2 justify-content-end">
                                        <button type="button" class="btn btn-secondary" onclick="backToHistoryTab()">
                                            <i class="fas fa-arrow-left me-2"></i>Kembali
                                        </button>
                                        <button type="button" class="btn btn-outline-secondary d-none" id="cancelEditBtn" onclick="cancelEditMode()">
                                            <i class="fas fa-times me-2"></i>Batal Edit
                                        </button>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-paper-plane me-2"></i><span id="submitFormLabel">Simpan Pengajuan</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>

    {{-- MODAL PICKER KARYAWAN --}}
    <div class="modal fade" id="karyawanPickerModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="d-flex justify-content-between align-items-center w-100">
                        <h5 class="modal-title mb-0">List Data Karyawan</h5>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex justify-content-end mb-3">
                        <div class="input-group picker-search-wrap">
                            <input type="text" class="form-control" id="karyawanPickerSearch"
                                placeholder="Cari..." oninput="filterKaryawanPicker()">
                            <button class="btn btn-primary picker-search-btn" type="button" onclick="filterKaryawanPicker()">
                                <i class="fas fa-search me-1"></i>Cari
                            </button>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-hover align-items-center mb-0" id="karyawanPickerTable">
                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                <tr>
                                    <th style="width: 80px;">Action</th>
                                    <th>Nik</th>
                                    <th>Nama</th>
                                    <th>Departemen</th>
                                    <th>Shift Saat Ini</th>
                                    <th>Grup Saat Ini</th>
                                </tr>
                            </thead>
                            <tbody id="karyawanPickerBody"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- JAVASCRIPT --}}
    @push('js')
    <style>
        .autocomplete-dropdown {
            position: absolute;
            background: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            max-height: 200px;
            overflow-y: auto;
            width: 100%;
            z-index: 1000;
            display: none;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .autocomplete-item {
            padding: 8px 12px;
            cursor: pointer;
            font-size: 0.875rem;
            border-bottom: 1px solid #f0f0f0;
        }
        .autocomplete-item:last-child {
            border-bottom: none;
        }
        .autocomplete-item:hover {
            background: #f8f9fa;
        }
        .autocomplete-item strong {
            color: #5e72e4;
        }
        .autocomplete-item small {
            color: #8898aa;
        }
        .karyawan-picker-group {
            flex-wrap: nowrap;
            align-items: stretch;
        }
        .karyawan-picker-group .form-control {
            height: 48px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
        .search-btn {
            width: 82px;
            min-width: 82px;
            height: 48px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            padding: 0;
        }
        .search-btn i {
            font-size: 1.35rem;
        }
        .picker-search-wrap {
            max-width: 360px;
            width: 100%;
            flex-wrap: nowrap;
            align-items: stretch;
        }
        .picker-search-wrap .form-control {
            height: 42px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
        .picker-search-wrap .picker-search-btn {
            min-width: 100px;
            height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
        .nav-tabs .nav-link {
            color: #8898aa;
        }
        .nav-tabs .nav-link.active {
            color: #5e72e4;
            font-weight: 600;
        }
        #tukarJadwalTabs {
            margin-bottom: -14px !important;
        }
        #tukarJadwalTabContent {
            margin-top: 0;
        }
        #history {
            margin-top: 0;
        }
        .history-content-wrap {
            max-width: 99%;
            margin: 0 auto;
        }
        #historyTable_wrapper {
            max-width: 100%;
            margin: 0;
        }
        #historyTable_wrapper .dt-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 10px;
            margin-top: 0;
            padding-left: 0;
            justify-content: flex-start;
        }
        #historyTable_wrapper .dataTables_info {
            padding-left: 6px;
        }
        .history-top-actions {
            margin-left: 0;
            padding-left: 0;
        }
        .table-wrap-centered {
            max-width: 99%;
            margin: 0 auto;
        }
        #historyTable th,
        #historyTable td {
            text-align: left;
            vertical-align: middle;
            padding: 7px;
            white-space: nowrap;
        }
        #historyTable th.col-no,
        #historyTable td.col-no,
        #historyTable th.col-action,
        #historyTable td.col-action {
            padding-left: 8px;
            padding-right: 8px;
            white-space: nowrap;
        }
        #historyTable th.col-no,
        #historyTable td.col-no {
            width: 36px;
        }
        #historyTable th.col-action,
        #historyTable td.col-action {
            width: 80px;
        }
        .btn-filter-align {
            height: 40px;
            margin-bottom: 1px;
        }
        .dataTables_wrapper .dataTables_filter,
        .dataTables_wrapper .dataTables_length {
            display: none;
        }
        #historyTable .btn-group {
            display: inline-flex;
            align-items: center;
        }
        #historyTable .btn-group .btn {
            white-space: nowrap;
        }
        #historyTable .dropdown-menu {
            min-width: 160px;
            padding: 0.35rem 0;
        }
        #historyTable .dropdown-menu .btn {
            width: calc(100% - 1rem);
            margin: 0.15rem 0.5rem;
            text-align: left;
            display: inline-flex;
            align-items: center;
            justify-content: flex-start;
        }
        #historyTable .dropdown-menu .dropdown-divider {
            margin: 0.25rem 0;
        }
    </style>
    <script>
        let historyTable = null;
        let karyawanPickerTable = null;
        let karyawanList = [];
        let karyawanPickerData = [];
        let activePickerTarget = null;
        let editModeId = null;

        $(document).ready(function() {
            loadHistory();
            document.getElementById('tanggal_tukar').valueAsDate = new Date();
            document.getElementById('tanggal_tukar').addEventListener('change', function() {
                refreshSelectedKaryawanByDate();
            });
        });

        function styleMsjButtons() {
            $('.dt-button').addClass('btn btn-secondary');
            $('.dt-button').removeClass('dt-button');
        }

        function loadKaryawanPickerData(callback = null) {
            $.ajax({
                url: '{{ url("/trstuk/getkaryawan") }}',
                method: 'GET',
                data: {
                    query: '',
                    tanggal_tukar: document.getElementById('tanggal_tukar').value
                },
                success: function(response) {
                    if (response.success) {
                        karyawanList = response.data || [];
                        if (karyawanPickerTable) {
                            karyawanPickerTable.destroy();
                            karyawanPickerTable = null;
                        }
                        renderKaryawanPickerRows(karyawanList);
                        initKaryawanPickerTable();
                        if (typeof callback === 'function') {
                            callback(karyawanList);
                        }
                    }
                },
                error: function() {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Gagal memuat data karyawan.',
                        confirmButtonColor: '#028284'
                    });
                }
            });
        }

        function openKaryawanModal(target) {
            activePickerTarget = target;
            document.getElementById('karyawanPickerSearch').value = '';
            loadKaryawanPickerData();
            new bootstrap.Modal(document.getElementById('karyawanPickerModal')).show();
        }

        function filterKaryawanPicker() {
            const keyword = document.getElementById('karyawanPickerSearch').value.trim();
            if (karyawanPickerTable) {
                karyawanPickerTable.search(keyword).draw();
            }
        }

        function initKaryawanPickerTable() {
            if (karyawanPickerTable) {
                karyawanPickerTable.destroy();
                karyawanPickerTable = null;
            }

            karyawanPickerTable = $('#karyawanPickerTable').DataTable({
                language: {
                    zeroRecords: 'Maaf - Data tidak ada',
                    info: 'Showing _START_ to _END_ of _TOTAL_ entries',
                    infoEmpty: 'Showing 0 to 0 of 0 entries',
                    infoFiltered: '(filtered from _MAX_ total entries)',
                    paginate: {
                        previous: '<i class="fas fa-angle-left"></i>',
                        next: '<i class="fas fa-angle-right"></i>'
                    }
                },
                pageLength: 10,
                lengthChange: false,
                searching: true,
                ordering: true,
                order: [[1, 'asc']],
                responsive: true,
                pagingType: 'simple_numbers',
                dom: 'tip'
            });
        }

        function renderKaryawanPickerRows(data) {
            const tbody = document.getElementById('karyawanPickerBody');
            karyawanPickerData = data;

            if (!data || data.length === 0) {
                tbody.innerHTML = `
                    <tr>
                        <td colspan="6" class="text-center py-4 text-muted">
                            Tidak ada data karyawan.
                        </td>
                    </tr>
                `;
                return;
            }

            let html = '';
            data.forEach((k, idx) => {
                html += `
                    <tr>
                        <td>
                            <button type="button" class="btn btn-primary btn-sm px-3"
                                onclick="selectKaryawanFromModal(${idx})">Select</button>
                        </td>
                        <td>${k.nik || '-'}</td>
                        <td>${k.nama || '-'}</td>
                        <td>${k.departemen || '-'}</td>
                        <td>${k.shift_desc || '-'}</td>
                        <td>${k.grub_desc || '-'}</td>
                    </tr>
                `;
            });

            tbody.innerHTML = html;
        }

        function selectKaryawanFromModal(index) {
            const karyawan = karyawanPickerData[index];
            if (!karyawan) {
                return;
            }

            applyKaryawanSelection(activePickerTarget === 'pengaju' ? 'pengaju' : 'ditukar', karyawan);

            const modal = bootstrap.Modal.getInstance(document.getElementById('karyawanPickerModal'));
            if (modal) {
                modal.hide();
            }
        }

        function resetKaryawanSelections() {
            document.getElementById('nik_pengaju').value = '';
            document.getElementById('karyawan_pengaju').value = '';
            document.getElementById('shift_pengaju').value = '';
            document.getElementById('grub_pengaju').value = '';
            document.getElementById('nik_ditukar').value = '';
            document.getElementById('karyawan_ditukar').value = '';
            document.getElementById('shift_ditukar').value = '';
            document.getElementById('grub_ditukar').value = '';
        }

        function applyKaryawanSelection(target, karyawan) {
            if (!karyawan) {
                if (target === 'pengaju') {
                    document.getElementById('nik_pengaju').value = '';
                    document.getElementById('karyawan_pengaju').value = '';
                    document.getElementById('shift_pengaju').value = '';
                    document.getElementById('grub_pengaju').value = '';
                } else {
                    document.getElementById('nik_ditukar').value = '';
                    document.getElementById('karyawan_ditukar').value = '';
                    document.getElementById('shift_ditukar').value = '';
                    document.getElementById('grub_ditukar').value = '';
                }
                return;
            }

            if (target === 'pengaju') {
                document.getElementById('nik_pengaju').value = karyawan.nik || '';
                document.getElementById('karyawan_pengaju').value = `${karyawan.nik || ''} - ${karyawan.nama || ''}`.trim();
                document.getElementById('shift_pengaju').value = karyawan.shift_desc || '-';
                document.getElementById('grub_pengaju').value = karyawan.grub_desc || '-';
            } else {
                document.getElementById('nik_ditukar').value = karyawan.nik || '';
                document.getElementById('karyawan_ditukar').value = `${karyawan.nik || ''} - ${karyawan.nama || ''}`.trim();
                document.getElementById('shift_ditukar').value = karyawan.shift_desc || '-';
                document.getElementById('grub_ditukar').value = karyawan.grub_desc || '-';
            }
        }

        function refreshSelectedKaryawanByDate() {
            const currentPengajuNik = document.getElementById('nik_pengaju').value;
            const currentDitukarNik = document.getElementById('nik_ditukar').value;

            if (!currentPengajuNik && !currentDitukarNik) {
                resetKaryawanSelections();
                return;
            }

            loadKaryawanPickerData(function(rows) {
                const pengaju = rows.find((item) => String(item.nik || '') === String(currentPengajuNik || ''));
                const ditukar = rows.find((item) => String(item.nik || '') === String(currentDitukarNik || ''));

                applyKaryawanSelection('pengaju', pengaju || null);
                applyKaryawanSelection('ditukar', ditukar || null);
            });
        }

        function loadHistory() {
            $.ajax({
                url: '{{ url("/trstuk/ajax") }}',
                method: 'GET',
                data: {
                    all: 1,
                    tanggal: document.getElementById('historyTanggalFilter').value,
                    search_karyawan: document.getElementById('historyKaryawanFilter').value.trim()
                },
                success: function(response) {
                    if (response.success) {
                        renderHistoryTable(response.data);
                    }
                },
                error: function() {
                    document.getElementById('historyTableBody').innerHTML = `
                        <tr>
                            <td colspan="12" class="text-center py-5 text-danger">
                                <i class="fas fa-exclamation-triangle fa-2x mb-3 d-block"></i>
                                <p>Error loading data</p>
                            </td>
                        </tr>
                    `;
                }
            });
        }

        function renderHistoryTable(data) {
            if (historyTable) {
                historyTable.destroy();
            }

            if (data.length === 0) {
                document.getElementById('historyTableBody').innerHTML = `
                    <tr>
                        <td colspan="12" class="text-center py-5">
                            <i class="fas fa-inbox fa-3x text-secondary mb-3 d-block"></i>
                            <p class="text-sm text-secondary">Tidak ada history tukar jadwal</p>
                        </td>
                    </tr>
                `;
                return;
            }

            let html = '';
            data.forEach((row, index) => {
                html += `
                    <tr>
                        <td class="col-action">
                            <div class="btn-group">
                                <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                        title="View Data"
                                        onclick="goToDetail(${row.id})">
                                    <i class="fas fa-eye"></i><span class="font-weight-bold"> View</span>
                                </button>
                                <button type="button"
                                        class="btn btn-sm btn-primary mb-0 px-3 dropdown-toggle dropdown-toggle-split"
                                        data-bs-toggle="dropdown" aria-expanded="false">
                                    <span class="visually-hidden">Toggle Dropdown</span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li>
                                        <button type="button"
                                                class="btn btn-sm btn-warning"
                                                title="Edit Data"
                                                data-row="${encodeURIComponent(JSON.stringify(row))}"
                                                onclick="editTukarJadwal(this)">
                                            <i class="fas fa-edit me-1"></i><span class="font-weight-bold"> Edit</span>
                                        </button>
                                    </li>
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                    <li>
                                        <button type="button"
                                                class="btn btn-sm btn-danger"
                                                title="Hapus Data"
                                                onclick='deleteTukarJadwal(${row.id})'>
                                            <i class="fas fa-trash me-1"></i><span class="font-weight-bold"> Hapus</span>
                                        </button>
                                    </li>
                                </ul>
                            </div>
                        </td>
                        <td class="col-no">${index + 1}</td>
                        <td>${formatDate(row.tanggal_pengajuan)}</td>
                        <td>${row.nik_pengaju}<br><small>${row.nama_pengaju}</small></td>
                        <td>${row.departemen_pengaju}</td>
                        <td>${row.shift_asal_desc}</td>
                        <td>${row.grub_asal_desc || '-'}</td>
                        <td>${row.nik_ditukar}<br><small>${row.nama_ditukar}</small></td>
                        <td>${row.departemen_ditukar}</td>
                        <td>${row.shift_tujuan_desc}</td>
                        <td>${row.grub_tujuan_desc || '-'}</td>
                        <td>${formatDate(row.tanggal_tukar)}</td>
                    </tr>
                `;
            });
            document.getElementById('historyTableBody').innerHTML = html;

            historyTable = $('#historyTable').DataTable({
                language: {
                    lengthMenu: 'Tampilkan _MENU_ baris',
                    zeroRecords: 'Maaf - Data tidak ada',
                    info: 'Data _START_ - _END_ dari _TOTAL_',
                    infoEmpty: 'Tidak ada data',
                    infoFiltered: '(pencarian dari _MAX_ data)'
                },
                searching: false,
                responsive: true,
                order: [[2, 'desc']],
                dom: 'Brtip',
                buttons: [
                    {
                        extend: 'excelHtml5',
                        text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel',
                        autoFilter: true,
                        sheetName: 'History Tukar Jadwal',
                        exportOptions: { columns: ':visible' }
                    },
                    {
                        extend: 'pdfHtml5',
                        text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF',
                        orientation: 'landscape',
                        pageSize: 'A4',
                        exportOptions: { columns: ':visible' }
                    },
                    {
                        extend: 'print',
                        text: '<i class="fas fa-print me-1 text-lg text-info"></i><span class="font-weight-bold"> Print',
                        exportOptions: { columns: ':visible' }
                    }
                ]
            });

            styleMsjButtons();
        }

        function applyHistoryFilter() {
            loadHistory();
        }

        function goToDetail(id) {
            window.location.href = `{{ url('/trstuk/show') }}/${id}`;
        }

        function editTukarJadwal(button) {
            const row = JSON.parse(decodeURIComponent(button.dataset.row || '{}'));
            if (!row || !row.id) {
                return;
            }

            editModeId = row.id;
            document.getElementById('tukar_jadwal_id').value = row.id || '';
            document.getElementById('tanggal_tukar').value = (row.tanggal_tukar || '').slice(0, 10);
            document.getElementById('nik_pengaju').value = row.nik_pengaju || '';
            document.getElementById('karyawan_pengaju').value = `${row.nik_pengaju || ''} - ${row.nama_pengaju || ''}`.trim();
            document.getElementById('shift_pengaju').value = row.shift_asal_desc || '';
            document.getElementById('grub_pengaju').value = row.grub_asal_desc || '-';
            document.getElementById('nik_ditukar').value = row.nik_ditukar || '';
            document.getElementById('karyawan_ditukar').value = `${row.nik_ditukar || ''} - ${row.nama_ditukar || ''}`.trim();
            document.getElementById('shift_ditukar').value = row.shift_tujuan_desc || '';
            document.getElementById('grub_ditukar').value = row.grub_tujuan_desc || '-';
            document.getElementById('alasan').value = row.alasan || '';
            document.getElementById('catatan_admin').value = row.catatan_admin || '';
            document.getElementById('submitFormLabel').textContent = 'Update Pengajuan';
            document.getElementById('cancelEditBtn').classList.remove('d-none');
            refreshSelectedKaryawanByDate();
            showFormTab();
        }

        function cancelEditMode() {
            editModeId = null;
            document.getElementById('tukar_jadwal_id').value = '';
            document.getElementById('submitFormLabel').textContent = 'Simpan Pengajuan';
            document.getElementById('cancelEditBtn').classList.add('d-none');
            resetForm();
        }

        function deleteTukarJadwal(id) {
            Swal.fire({
                title: 'Hapus data ini?',
                text: 'Data tukar jadwal akan dihapus permanen.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, hapus',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#d33',
                cancelButtonColor: '#6c757d'
            }).then((result) => {
                if (!result.isConfirmed) {
                    return;
                }

                $.ajax({
                    url: '{{ url("/trstuk/delete") }}',
                    method: 'POST',
                    data: {
                        id: id,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Berhasil',
                                text: response.message,
                                confirmButtonColor: '#5e72e4'
                            }).then(() => loadHistory());
                        }
                    },
                    error: function(xhr) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: xhr.responseJSON?.message || 'Gagal menghapus data.',
                            confirmButtonColor: '#5e72e4'
                        });
                    }
                });
            });
        }

        function submitTukarJadwal(event) {
            event.preventDefault();

            const formData = {
                id: document.getElementById('tukar_jadwal_id').value,
                tanggal_tukar: document.getElementById('tanggal_tukar').value,
                nik_pengaju: document.getElementById('nik_pengaju').value,
                nik_ditukar: document.getElementById('nik_ditukar').value,
                alasan: document.getElementById('alasan').value,
                catatan_admin: document.getElementById('catatan_admin').value,
                _token: '{{ csrf_token() }}'
            };

            if (!formData.nik_pengaju || !formData.nik_ditukar) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Peringatan',
                    text: 'Silakan pilih karyawan pengaju dan karyawan ditukar',
                    confirmButtonColor: '#5e72e4'
                });
                return;
            }

            if (formData.nik_pengaju === formData.nik_ditukar) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Peringatan',
                    text: 'Karyawan pengaju dan ditukar tidak boleh sama',
                    confirmButtonColor: '#5e72e4'
                });
                return;
            }

            const isEdit = !!formData.id;

            $.ajax({
                url: isEdit ? '{{ url("/trstuk/update") }}' : '{{ url("/trstuk/store") }}',
                method: 'POST',
                data: formData,
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil!',
                            text: response.message,
                            confirmButtonColor: '#5e72e4'
                        }).then(() => {
                            cancelEditMode();
                            const historyTab = document.getElementById('history-tab');
                            const historyTabPane = new bootstrap.Tab(historyTab);
                            historyTabPane.show();
                            loadHistory();
                        });
                    }
                },
                error: function() {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Gagal menyimpan pengajuan. Silakan coba lagi.',
                        confirmButtonColor: '#5e72e4'
                    });
                }
            });
        }

        function resetForm() {
            document.getElementById('tukarJadwalForm').reset();
            document.getElementById('nik_pengaju').value = '';
            document.getElementById('nik_ditukar').value = '';
            document.getElementById('shift_pengaju').value = '';
            document.getElementById('shift_ditukar').value = '';
            document.getElementById('grub_pengaju').value = '';
            document.getElementById('grub_ditukar').value = '';
            document.getElementById('shift_pengaju').placeholder = 'Pilih karyawan terlebih dahulu';
            document.getElementById('shift_ditukar').placeholder = 'Pilih karyawan terlebih dahulu';
            document.getElementById('grub_pengaju').placeholder = 'Pilih karyawan terlebih dahulu';
            document.getElementById('grub_ditukar').placeholder = 'Pilih karyawan terlebih dahulu';
            document.getElementById('tanggal_tukar').valueAsDate = new Date();
        }

        function formatDate(dateStr) {
            if (!dateStr) return '-';
            const months = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'];

            if (/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) {
                const [year, month, day] = dateStr.split('-');
                const monthIndex = Math.max(0, parseInt(month, 10) - 1);
                return `${day} ${months[monthIndex] || '-'} ${year}`;
            }

            const date = new Date(dateStr);
            if (Number.isNaN(date.getTime())) {
                return dateStr;
            }

            const day = String(date.getDate()).padStart(2, '0');
            const month = months[date.getMonth()] || '-';
            const year = date.getFullYear();
            return `${day} ${month} ${year}`;
        }

        function showFormTab() {
            const formTab = document.getElementById('form-tab');
            const formTabPane = new bootstrap.Tab(formTab);
            formTabPane.show();
        }

        function startNewTukarJadwal() {
            cancelEditMode();
            showFormTab();
        }

        function backToHistoryTab() {
            const historyTab = document.getElementById('history-tab');
            const historyTabPane = new bootstrap.Tab(historyTab);
            historyTabPane.show();
        }
    </script>
    @endpush
@endsection