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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <button class="btn btn-secondary mb-0" onclick="history.back()"><i
                                class="fas fa-circle-left me-1"></i><span class="font-weight-bold">Kembali</span></button>
                        @if ($authorize->edit == '1')
                            <button class="btn btn-primary mb-0" onclick="saveData()" id="{{ $dmenu }}-form">
                                <i class="fas fa-floppy-disk me-1"></i><span class="font-weight-bold">Simpan</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <form role="form" method="POST" id="{{ $dmenu }}-form">
                        @csrf
                        @method('POST')
                        <div class="card-body">
                            <P class="text-uppercase text-sm">EDIT KURIR</P>
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="row mb-2">
                                        <div class="col-3 mt-1">
                                            <label class="form-label" style="font-size: 14px;">ID</label>
                                        </div>
                                        <div class="col-9">
                                            <input type="text" class="form-control" name="id_trs_pengiriman"
                                                value="{{ $trs_pengiriman->id }}" readonly>
                                        </div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="col-3 mt-1">
                                            <label class="form-label" style="font-size: 14px;">Nama</label>
                                        </div>
                                        <div class="col-9">
                                            <input type="text" class="form-control" name="nama_kurir"
                                                value="{{ $trs_pengiriman->nama_kurir ?? 'Tidak Ada Data' }}" readonly>
                                        </div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="col-3 mt-1">
                                            <label class="form-label" style="font-size: 14px;">Hari</label>
                                        </div>
                                        <div class="col-9">
                                            <input type="text" class="form-control" name="hari"
                                                value="{{ \Carbon\Carbon::parse($trs_pengiriman->tanggal)->translatedFormat('l') }}"
                                                readonly>
                                        </div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="col-3 mt-1">
                                            <label class="form-label" style="font-size: 14px;">Tanggal</label>
                                        </div>
                                        <div class="col-9">
                                            <input type="text" class="form-control" name="tanggal"
                                                value="{{ \Carbon\Carbon::parse($trs_pengiriman->tanggal)->translatedFormat('d F Y') }}"
                                                readonly>
                                        </div>
                                    </div>
                                    <!-- Ganti input no_plat dengan select -->
                                    <div class="row mb-2">
                                        <div class="col-3 mt-1">
                                            <label class="form-label" style="font-size: 14px;">NOPOL</label>
                                        </div>
                                        @php
                                            $isManualValid = isset($trs_pengiriman->idkendaraan) && $trs_pengiriman->idkendaraan == 999;
                                            $manualNomor = $isManualValid ? $trs_pengiriman->nomor_kendaraan_manual : '';
                                        @endphp

                                        <div class="col-9">
                                            <select class="form-control select2" name="no_plat" id="selectNoPlat">
                                                <option value="">-- Pilih Kendaraan --</option>

                                                
                                                @foreach($kendaraan as $k)
                                                    @php
                                                        // Jika kendaraan ini adalah kendaraan manual dan valid manual, ambil nomor manual
                                                        $isSelected = ($isManualValid && $k->idkendaraan == 999) || 
                                                                    (!$isManualValid && $trs_pengiriman->no_plat == $k->nomorkendaraan);

                                                        $labelNomor = ($k->idkendaraan == 999 && $isManualValid)
                                                                        ? $trs_pengiriman->nomor_kendaraan_manual
                                                                        : $k->nomorkendaraan;

                                                        $labelNama = ($k->idkendaraan == 999 && $isManualValid)
                                                                        ? optional($kendaraan->firstWhere('idkendaraan', $trs_pengiriman->idkendaraan))->namakendaraan
                                                                        : $k->namakendaraan;
                                                    @endphp

                                                    <option value="{{ $k->idkendaraan }}" 
                                                        data-nomor="{{ $labelNomor }}" 
                                                        data-nama="{{ $labelNama }}"
                                                        data-status="{{ $k->status }}"
                                                        {{ $isSelected ? 'selected' : '' }}>
                                                        {{ $labelNomor }} - {{ $labelNama }} ({{ $k->status }})
                                                    </option>
                                                @endforeach
                                            </select>

                                            <!-- Input manual, disembunyikan saat awal -->
                                            <input type="text" 
                                                class="form-control mt-2 d-none" 
                                                name="nomor_kendaraan_manual" 
                                                id="inputManualNoPlat" 
                                                placeholder="Masukkan nomor kendaraan manual"
                                                value="{{ $manualNomor }}"
                                                style="text-transform: uppercase;">
                                        </div>

                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="row mb-2">
                                        <div class="col-3 mt-1">
                                            <label class="form-label" style="font-size: 14px;">KELUAR</label>
                                        </div>
                                        <div class="col-4">
                                            <input type="time" class="form-control" name="keluar_pukul" id="keluar_pukul"
                                                value="{{ $trs_pengiriman->keluar_pukul }}"
                                                {{ $trs_pengiriman->keluar_pukul ? 'readonly' : '' }}>
                                        </div>
                                        <div class="col-5">
                                            <input type="number" class="form-control" name="odometer_keluar"
                                                id="odometer_keluar" value="{{ $trs_pengiriman->spidometer_out }}"
                                                placeholder="Kilometer"
                                                {{ $trs_pengiriman->spidometer_out ? 'readonly' : '' }}>
                                        </div>
                                    </div>

                                    <div class="row mb-2">
                                        <div class="col-3 mt-1">
                                            <label class="form-label" style="font-size: 14px;">MASUK</label>
                                        </div>
                                        <div class="col-4">
                                            <input type="time" class="form-control" name="masuk_pukul" id="masuk_pukul"
                                                value="{{ $trs_pengiriman->masuk_pukul }}"
                                                @if (!$trs_pengiriman->spidometer_out || !$trs_pengiriman->keluar_pukul) disabled title="Isi data KELUAR dan selesaikan semua tugas terlebih dahulu" @endif>
                                        </div>
                                        <div class="col-5">
                                            <input type="number" class="form-control" name="odometer_masuk"
                                                id="odometer_masuk" value="{{ $trs_pengiriman->odometer_masuk }}"
                                                placeholder="Kilometer"
                                                @if (!$trs_pengiriman->spidometer_out || !$trs_pengiriman->keluar_pukul) disabled title="Isi data KELUAR dan selesaikan semua tugas terlebih dahulu" @endif>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-1 mt-1 ms-2 me-2">
                            <div class="col-md-12">
                                <button type="button" id="addTujuanBtn" class="btn btn-primary" data-bs-toggle="modal"
                                    data-bs-target="#modalTambahTujuan">
                                    <i class="fa fa-plus me-2" aria-hidden="true"></i>
                                    Add tujuan dan jenis tugas
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <!-- Modal Medium -->
                <div class="modal fade" id="modalTambahTujuan" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Tambah Tujuan dan Jenis Tugas</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>

                            <div class="modal-body">
                                <div class="row mb-2">
                                    <div class="col-3 mt-1">
                                        <label class="form-label" style="font-size: 14px;">Tujuan</label>
                                    </div>
                                    <div class="col-9">

                                        <!-- Mode INPUT -->
                                        <input list="list_lokasi" class="form-control mt-2" name="idlokasi_input"
                                            id="inputLokasi" placeholder="-- Ketik --"
                                            style="text-transform: capitalize;">
                                        <datalist id="list_lokasi">
                                            @foreach ($lokasi as $l)
                                                <option value="{{ $l->namalokasi }}">
                                            @endforeach
                                        </datalist>
                                    </div>
                                </div>

                                <div class="row mb-2">
                                    <div class="col-3 mt-1">
                                        <label class="form-label" style="font-size: 14px;">Jenis Tugas</label>
                                    </div>
                                    <div class="col-9">
                                        <!-- Mode INPUT -->
                                        <input list="list_jenistugas" class="form-control mt-2"
                                            name="idkategoritugas_input" id="inputTugas" placeholder="-- Ketik --"
                                            style="text-transform: capitalize;">
                                        <datalist id="list_jenistugas">
                                            @foreach ($jenis_tugas as $j)
                                                <option value="{{ $j->nama }}">
                                            @endforeach
                                        </datalist>
                                    </div>
                                </div>

                                <div class="row mb-2">
                                    <div class="col-3 mt-1">
                                        <label class="form-label" style="font-size: 14px;">Detail Tugas</label>
                                    </div>
                                    <div class="col-9">
                                        <input type="text" class="form-control" name="dt_tugas" id="dt_tugas"
                                            placeholder="Masukkan detail tugas">
                                    </div>
                                </div>


                                <button type="button" class="btn btn-primary mb-3" id="btnAddlokasi">
                                    <i class="fa fa-plus"></i> Tambahkan
                                </button>

                                <!-- Tabel Dinamis -->
                                <table class="table table-bordered table-sm align-middle text-center" id="tableTujuan">
                                    <thead style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th style="border: 1px solid #adb5bd; text-align: center;">No</th>
                                            <th style="border: 1px solid #adb5bd; text-align: center;">Tujuan</th>
                                            <th style="border: 1px solid #adb5bd; text-align: center;">Jenis Tugas</th>
                                            <th style="border: 1px solid #adb5bd; text-align: center;">Detail Tugas</th>
                                            <th style="border: 1px solid #adb5bd; text-align: center;">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableBodyTujuan">
                                        <!-- baris akan ditambahkan lewat JavaScript -->
                                    </tbody>
                                </table>
                            </div>

                            <!-- Modal Footer -->
                            <div class="modal-footer">
                                <button type="button" class="btn btn-waring" data-bs-dismiss="modal">Batal</button>
                                <button type="button" class="btn btn-primary" id="btnSimpanTugas">Simpan</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid mt-2">
        <div class="card">
            <div class="card-body px-3 py-4"> <!-- Tambah padding -->
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <p class="text-sm mb-0">Detail Penjadwalan KURIR</p>
                    <button type="submit" id="hapus-button" class="btn btn-danger btn-sm" style="display:none;">
                        Batalkan Tugas
                    </button>
                </div>
                <div class="dropdown mt-2">
                    <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownTugas"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        Filter Tugas
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownTugas">
                        <li><a class="dropdown-item" href="#" onclick="filterTugas('selesai')">Tugas Selesai</a>
                        </li>
                        <li><a class="dropdown-item" href="#" onclick="filterTugas('belum')">Tugas Belum
                                Selesai</a></li>
                        <li><a class="dropdown-item" href="#" onclick="filterTugas('tertunda')">Tugas Tertunda</a>
                        </li>
                        <li><a class="dropdown-item" href="#" onclick="filterTugas('batal')">Tugas Dibatalkan</a>
                        </li>
                        <li><a class="dropdown-item" href="#" onclick="filterTugas('semua')">Tampilkan Semua</a>
                        </li>
                    </ul>
                </div>

                <!-- Tabel untuk layar lebih dari 578px -->
                <div class="dekstop-table d-none d-sm-block">
                    <table id="trs_detail_pengiriman" class="table table-bordered table-striped table-sm">
                        <thead>
                            <tr style="background: #B0E9EB; text-align:center; font-size: 14px;">
                                <th style="border: 1px solid #d3d3d3;"><input type="checkbox" id="select-all-checkbox">
                                </th>
                                <th style="border: 1px solid #d3d3d3;">No</th>
                                <th style="border: 1px solid #d3d3d3; display: none;"></th>
                                <th style="border: 1px solid #d3d3d3; display: none;"></th>
                                <th style="border: 1px solid #d3d3d3;">Tujuan</th>
                                <th style="border: 1px solid #d3d3d3;">Jenis Tugas</th>
                                <th style="border: 1px solid #d3d3d3;">Detail Tugas</th>
                                <th style="border: 1px solid #d3d3d3;">PIC</th>
                                <th style="border: 1px solid #d3d3d3;">Masuk</th>
                                <th style="border: 1px solid #d3d3d3;">Keluar</th>
                                <th style="border: 1px solid #d3d3d3;">Yang Ditemui</th>
                                <th style="border: 1px solid #d3d3d3;">Keterangan</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $sorted_trs_detail_pengiriman = $trs_detail_pengiriman->sortByDesc('isactive');
                                $urut = 1;
                            @endphp
                            @foreach ($sorted_trs_detail_pengiriman as $detail)
                                @php
                                    $isFilled =
                                        $detail->narahubung &&
                                        $detail->masuk &&
                                        $detail->keluar &&
                                        $detail->dt_tugas &&
                                        $detail->pic &&
                                        $detail->keterangan;

                                    if ($detail->isactive == '0') {
                                        $status = 'tugas-batal';
                                    } elseif ($detail->isactive == '1' && $isFilled) {
                                        $status = 'tugas-selesai';
                                    } else {
                                        $status = 'tugas-belum';
                                    }
                                @endphp
                                <tr class="{{ $status }}" id="row-{{ $detail->id_dt_trs_pengiriman }}"
                                    style="{{ $detail->isactive === '0' ? 'background-color: rgba(255, 0, 0, 0.3);' : '' }}">
                                    <td style="border: 1px solid #d3d3d3;" class="text-center">
                                        @if ($detail->isactive === '0' || $detail->keterangan === 'selesai')
                                        @else
                                            <input type="checkbox" class="hapus-checkbox" name="hapus_baris[]"
                                                data-id="{{ $detail->id_dt_trs_pengiriman }}">
                                        @endif
                                    </td>
                                    <td style="border: 1px solid #d3d3d3;" class="text-center nomor-urut">
                                        {{ $urut++ }}</td>
                                    <td style="border: 1px solid #d3d3d3;" hidden>
                                        <input type="hidden" name="id_dt_trs_pengiriman[]"
                                            value="{{ $detail->id_dt_trs_pengiriman }}">
                                    </td>
                                    <td style="border: 1px solid #d3d3d3;" hidden>
                                        <input type="hidden" name="isactive[]" value="{{ $detail->isactive }}">
                                    </td>
                                    <td style="border: 1px solid #d3d3d3;">{{ $detail->tujuan }}</td>
                                    <td style="border: 1px solid #d3d3d3;">{{ $detail->jenis_tugas }}</td>
                                    <td style="border: 1px solid #d3d3d3;"><input type="text" name="dt_tugas[]"
                                            class="form-control form-control-sm" value="{{ $detail->dt_tugas }}"
                                            {{ $detail->isactive === '0' ? 'disabled' : '' }}
                                            onchange="checkInputs('{{ $detail->id_dt_trs_pengiriman }}')"
                                            {{ $detail->keterangan === 'selesai' ? 'disabled' : '' }}></td>
                                    <td style="border: 1px solid #d3d3d3;"><input type="text" name="pic[]"
                                            class="form-control form-control-sm" value="{{ $detail->pic }}"
                                            {{ $detail->isactive === '0' ? 'disabled' : '' }}
                                            onchange="checkInputs('{{ $detail->id_dt_trs_pengiriman }}')"
                                            {{ $detail->keterangan === 'selesai' ? 'disabled' : '' }}></td>
                                    <td style="border: 1px solid #d3d3d3;"><input type="time" name="masuk[]"
                                            class="form-control form-control-sm" value="{{ $detail->masuk }}"
                                            {{ $detail->isactive === '0' ? 'disabled' : '' }}
                                            onchange="checkInputs('{{ $detail->id_dt_trs_pengiriman }}')"
                                            id="masuk-{{ $detail->id_dt_trs_pengiriman }}"
                                            {{ $detail->keterangan === 'selesai' ? 'disabled' : '' }}>
                                    </td>
                                    <td style="border: 1px solid #d3d3d3;"><input type="time" name="keluar[]"
                                            class="form-control form-control-sm" value="{{ $detail->keluar }}"
                                            {{ $detail->isactive === '0' ? 'disabled' : '' }}
                                            onchange="checkInputs('{{ $detail->id_dt_trs_pengiriman }}')"
                                            id="keluar-{{ $detail->id_dt_trs_pengiriman }}"
                                            {{ $detail->keterangan === 'selesai' ? 'disabled' : '' }}>
                                    </td>
                                    <td style="border: 1px solid #d3d3d3;"><input type="text" name="narahubung[]"
                                            class="form-control form-control-sm" value="{{ $detail->narahubung }}"
                                            {{ $detail->isactive === '0' ? 'disabled' : '' }}
                                            onchange="checkInputs('{{ $detail->id_dt_trs_pengiriman }}')"
                                            {{ $detail->keterangan === 'selesai' ? 'disabled' : '' }}></td>
                                    <td style="border: 1px solid #d3d3d3;">
                                        <select class="form-select form-select-sm mb-1"
                                            onchange="updateKeteranganText(this, '{{ $detail->id_dt_trs_pengiriman }}')"
                                            {{ $detail->isactive === '0' ? 'disabled' : '' }}
                                            style="{{ Str::startsWith($detail->keterangan, 'dibatalkan') || Str::startsWith($detail->keterangan, 'selesai') ? 'display: none;' : '' }}">
                                            <option value="">-- Pilih status --</option>
                                            <option value="selesai"
                                                {{ Str::startsWith($detail->keterangan, 'selesai') ? 'selected' : '' }}>
                                                Selesai</option>
                                            <option value="tertunda"
                                                {{ Str::startsWith($detail->keterangan, 'tertunda') ? 'selected' : '' }}>
                                                Tertunda</option>
                                            <option value="dibatalkan"
                                                {{ Str::startsWith($detail->keterangan, 'dibatalkan') ? 'selected' : '' }}
                                                style="display: none;">
                                                Dibatalkan
                                            </option>
                                        </select>

                                        <!-- Tampilkan input keterangan jika status 'dibatalkan' -->
                                        <input type="text" name="keterangan[]"
                                            id="keterangan-text-{{ $detail->id_dt_trs_pengiriman }}"
                                            class="form-control form-control-sm" value="{{ $detail->keterangan }}"
                                            style="{{ Str::startsWith($detail->keterangan, 'selesai') || Str::startsWith($detail->keterangan, 'tertunda') || Str::startsWith($detail->keterangan, 'dibatalkan') ? '' : 'display: none;' }}"
                                            {{ $detail->isactive === '0' ? 'disabled' : '' }}
                                            {{ $detail->keterangan === 'selesai' ? 'disabled' : '' }}>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <div id="no-data-message-table" style="display: none; text-align: center;">
                        <p>Tidak ada data ditemukan</p>
                    </div>
                </div>


                {{-- Tampilan mobile (< 576px) --}}
                <div class="mobile-table d-sm-none" id="trs_detail_pengiriman">
                    <div class="row">
                        @php
                            $putih = [];
                            $hijau = [];
                            $kuning = [];
                            $merah = [];

                            foreach ($sorted_trs_detail_pengiriman as $detail) {
                                $isFilled =
                                    $detail->narahubung &&
                                    $detail->masuk &&
                                    $detail->keluar &&
                                    $detail->dt_tugas &&
                                    $detail->pic &&
                                    $detail->keterangan;

                                $isTertunda = Str::startsWith($detail->keterangan, 'tertunda');

                                if ($detail->isactive === '0') {
                                    $merah[] = $detail;
                                } elseif ($isTertunda) {
                                    $kuning[] = $detail;
                                } elseif ($detail->isactive === '1' && $isFilled) {
                                    $hijau[] = $detail;
                                } else {
                                    $putih[] = $detail;
                                }
                            }

                            $orderedDetails = array_merge($putih, $hijau, $kuning, $merah);
                        @endphp

                        @foreach ($orderedDetails as $detail)
                            @php
                                $isTertunda = Str::startsWith($detail->keterangan, 'tertunda');
                                $alasan = $isTertunda ? trim(Str::after($detail->keterangan, 'tertunda -')) : '';

                                $isFilled =
                                    $detail->narahubung &&
                                    $detail->masuk &&
                                    $detail->keluar &&
                                    $detail->dt_tugas &&
                                    $detail->pic &&
                                    $detail->keterangan;

                                $bgColor = 'white'; // default putih

                                if ($detail->isactive === '0') {
                                    $bgColor = '#f8d7da'; // merah
                                } elseif ($isTertunda) {
                                    $bgColor = 'rgba(255, 255, 0, 0.3)'; // kuning
                                } elseif ($isFilled && $detail->isactive === '1') {
                                    $bgColor = '#d4edda'; // hijau
                                }
                            @endphp
                            <div class="card mb-3 card-tugas time-card {{ $detail->isactive === '0' ? 'tugas-batal' : ($isFilled ? 'tugas-selesai' : 'tugas-belum') }}"
                                style="background-color: {{ $bgColor }};"
                                data-id="{{ $detail->id_dt_trs_pengiriman }}">
                                <div class="card-body">
                                    {{-- Header dengan "Lihat Detail" dan ikon --}}
                                    <div class="card-title d-flex justify-content-between align-items-center"
                                        data-bs-toggle="collapse"
                                        data-bs-target="#collapseDetail{{ $detail->id_dt_trs_pengiriman }}"
                                        aria-expanded="false"
                                        aria-controls="collapseDetail{{ $detail->id_dt_trs_pengiriman }}">
                                        <span>Lihat Detail Penjadwalan</span>
                                        <i class="fa fa-sort-desc"></i> <!-- Ikon chevron untuk collapse -->
                                    </div>

                                    {{-- Tujuan dan Jenis Tugas tetap tampil --}}
                                    <div class="card-text">
                                        <div class="row">
                                            <div class="col-4">
                                                <label>Tujuan</label>
                                            </div>
                                            <div class="col-8">
                                                <p>: {{ $detail->tujuan }}</p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card-text">
                                        <div class="row">
                                            <div class="col-4">
                                                <label>Jenis Tugas</label>
                                            </div>
                                            <div class="col-8">
                                                <p>: {{ $detail->jenis_tugas }}</p>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- Collapse Content (yang disembunyikan) --}}
                                    <div class="collapse" id="collapseDetail{{ $detail->id_dt_trs_pengiriman }}">
                                        {{-- Hidden Inputs --}}
                                        <input type="hidden" name="id_dt_trs_pengiriman[]"
                                            value="{{ $detail->id_dt_trs_pengiriman }}">
                                        <input type="hidden" name="isactive[]" value="{{ $detail->isactive }}">

                                        {{-- Tugas, jenis tugas, dan checkbox --}}
                                        <div class="mb-2">
                                            <label class="form-label"><strong>Detail Tugas :</strong></label>
                                            <input type="text" name="dt_tugas[]" class="form-control form-control-sm"
                                                value="{{ $detail->dt_tugas }}"
                                                {{ $detail->isactive === '0' ? 'disabled' : '' }}
                                                {{ $detail->keterangan === 'selesai' ? 'disabled' : '' }}>
                                        </div>

                                        <div class="mb-2">
                                            <label class="form-label"><strong>PIC :</strong></label>
                                            <input type="text" name="pic[]" class="form-control form-control-sm"
                                                value="{{ $detail->pic }}"
                                                {{ $detail->isactive === '0' ? 'disabled' : '' }}
                                                {{ $detail->keterangan === 'selesai' ? 'disabled' : '' }}>
                                        </div>

                                        <div class="mb-2">
                                            <label class="form-label"><strong>Masuk :</strong></label>
                                            <input type="time" name="masuk[]" class="form-control form-control-sm"
                                                value="{{ $detail->masuk }}"
                                                {{ $detail->isactive === '0' ? 'disabled' : '' }}
                                                id="masuk-{{ $detail->id_dt_trs_pengiriman }}"
                                                {{ $detail->keterangan === 'selesai' ? 'disabled' : '' }}>
                                        </div>

                                        <div class="mb-2">
                                            <label class="form-label"><strong>Keluar :</strong></label>
                                            <input type="time" name="keluar[]" class="form-control form-control-sm"
                                                value="{{ $detail->keluar }}"
                                                {{ $detail->isactive === '0' ? 'disabled' : '' }}
                                                id="keluar-{{ $detail->id_dt_trs_pengiriman }}"
                                                {{ $detail->keterangan === 'selesai' ? 'disabled' : '' }}>
                                        </div>

                                        <div class="mb-2">
                                            <label class="form-label"><strong>Yang Ditemui :</strong></label>
                                            <input type="text" name="narahubung[]"
                                                class="form-control form-control-sm" value="{{ $detail->narahubung }}"
                                                {{ $detail->isactive === '0' ? 'disabled' : '' }}
                                                {{ $detail->keterangan === 'selesai' ? 'disabled' : '' }}>
                                        </div>

                                        @php
                                            $isTertunda = Str::startsWith($detail->keterangan, 'tertunda');
                                            $isDibatalkan = Str::startsWith($detail->keterangan, 'dibatalkan');
                                            $isSelesai = $detail->keterangan === 'selesai';

                                            $alasan = $isTertunda
                                                ? trim(Str::after($detail->keterangan, 'tertunda -'))
                                                : ($isDibatalkan
                                                    ? trim(Str::after($detail->keterangan, 'dibatalkan -'))
                                                    : ($isSelesai
                                                        ? 'selesai'
                                                        : ''));
                                        @endphp


                                        <div class="mb-2">
                                            <label class="form-label"><strong>Keterangan :</strong></label>
                                            <select class="form-select form-control-sm" id="status"
                                                {{ $detail->isactive === '0' ? 'disabled' : '' }} name="keterangan[]"
                                                onchange="toggleKeterangan(this); cekSebelumSelesai(this)"
                                                style="{{ Str::startsWith($detail->keterangan, 'dibatalkan') || Str::startsWith($detail->keterangan, 'selesai') ? 'display: none;' : '' }}">
                                                <option value="">-- Pilih status --</option>
                                                <option value="selesai" {{ $isSelesai === 'selesai' ? 'selected' : '' }}>
                                                    Selesai
                                                </option>
                                                <option value="tertunda" {{ $isTertunda ? 'selected' : '' }}>Tertunda
                                                </option>
                                                <option value="dibatalkan"
                                                    {{ Str::startsWith($detail->keterangan, 'dibatalkan') ? 'selected' : '' }}
                                                    style="display: none;">Dibatalkan</option>
                                            </select>
                                        </div>

                                        <div class="mb-2" id="keteranganDiv"
                                            style="{{ $isTertunda || $isSelesai || $isDibatalkan ? 'display: block;' : 'display: none;' }}">
                                            <input type="text" name="keterangan[]"
                                                class="form-control form-control-sm" value="{{ $detail->keterangan }}"
                                                {{ $detail->isactive === '0' ? 'disabled' : '' }}
                                                {{ $detail->keterangan === 'selesai' ? 'disabled' : '' }}>
                                        </div>

                                    </div>
                                    @if (!($detail->isactive === '0' || $detail->keterangan === 'selesai'))
                                        <div class="form-check ps-4.5">
                                            <input type="checkbox" class="form-check-input hapus-checkbox"
                                                name="hapus_baris[]" data-id="{{ $detail->id_dt_trs_pengiriman }}">
                                            <p class="form-check-label">Pilih untuk membatalkan tugas</p>
                                        </div>
                                    @endif

                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div id="no-data-message-cards" style="display: none; text-align: center;">
                        <p>Tidak ada data ditemukan</p>
                    </div>
                </div>
                <!-- Legenda Warna Status Tugas -->
                <div class="row mt-3" id="legenda-warna">
                    <div class="col-6 col-md-3 d-flex align-items-center gap-2">
                        <div class="rounded-circle"
                            style="width: 15px; height: 15px; background-color: rgba(255, 0, 0, 0.3); border: 1px solid black;">
                        </div>
                        <span>Dibatalkan</span>
                    </div>
                    <div class="col-6 col-md-3 d-flex align-items-center gap-2">
                        <div class="rounded-circle"
                            style="width: 15px; height: 15px; background-color: rgba(255, 255, 0, 0.3); border: 1px solid black;">
                        </div>
                        <span>Tertunda</span>
                    </div>
                    <div class="col-6 col-md-3 d-flex align-items-center gap-2">
                        <div class="rounded-circle"
                            style="width: 15px; height: 15px; background-color: rgba(0, 255, 0, 0.2); border: 1px solid black;">
                        </div>
                        <span>Selesai</span>
                    </div>
                    <div class="col-6 col-md-3 d-flex align-items-center gap-2">
                        <div class="rounded-circle"
                            style="width: 15px; height: 15px; background-color: white; border: 1px solid black;">
                        </div>
                        <span>Belum selesai</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Card untuk menampilkan tugas yang dibatalkan -->
        <div id="card-tugas-dibatalkan" class="card mt-4" style="display: none;">
            <div class="card-body">
                <p>Tugas yang Dibatalkan</p>
                <div class="table-responsive">
                    <table id="cancelled_tasks" class="table table-bordered">
                        <thead>
                            <tr style="background: #B0E9EB; text-align: center; font-size: 14px;">
                                <th style="border: 1px solid #d3d3d3;"></th>
                                <th style="border: 1px solid #d3d3d3;">No</th>
                                <th style="border: 1px solid #d3d3d3;">Tujuan</th>
                                <th style="border: 1px solid #d3d3d3;">Jenis Tugas</th>
                                <th style="border: 1px solid #d3d3d3;">Detail Tugas</th>
                                <th style="border: 1px solid #d3d3d3;">PIC</th>
                                <th style="border: 1px solid #d3d3d3;">Masuk</th>
                                <th style="border: 1px solid #d3d3d3;">Keluar</th>
                                <th style="border: 1px solid #d3d3d3;">Yang Ditemui</th>
                                <th style="border: 1px solid #d3d3d3;">Keterangan</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Baris yang dibatalkan akan dipindahkan ke sini -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="container-fluid mt-4 px-1">
            <div id="card-tugas-dibatalkan-mobile" class="card mobile-table d-sm-none" style="display:none;">
                <div class="card-body">
                    <p>Tugas yang Dibatalkan</p>
                    <div class="row" id="cancelled_tasks_mobile">
                        <!-- Card hasil pembatalan akan masuk ke sini -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="card">
            <div class="card-body">
                <p class="text-sm mb-0">Dokumentasi Penjadwalan</p>
                <div class="row">
                    <!-- Kolom kiri: Tabel Gambar -->
                    <div class="col-12 col-md-6">
                        <button class="btn btn-primary btn-sm mt-3" id="btnTambahGambar"
                            onclick="document.getElementById('imageInput').click();">
                            <i class="fa fa-plus me-2"></i> Tambahkan Gambar
                        </button>
                        <input type="file" id="imageInput" accept="image/*" class="d-none"
                            onchange="addImage(event)">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead style="background: #B0E9EB;">
                                    <tr style="text-align: center;">
                                        <th style="width: 10%; border: 1px solid #adb5bd;">No.</th>
                                        <th style="border: 1px solid #adb5bd;">Gambar</th>
                                        <th style="width: 15%; border: 1px solid #adb5bd;">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody id="imageTableBody" style="text-align: center;">
                                    @forelse($dokumentasi as $img)
                                        <tr>
                                            <td style="border: 1px solid #adb5bd;">{{ $loop->iteration }}</td>
                                            <td style="border: 1px solid #adb5bd;">
                                                <img src="{{ asset('storage/' . $img->gambar) }}"
                                                    alt="Gambar {{ $loop->iteration }}" style="max-height: 80px;">
                                            </td>
                                            <td style="border: 1px solid #adb5bd;">
                                                <button class="btn btn-danger btn-sm"
                                                    onclick="markImageToDelete({{ $img->id }}, this)">Batalkan</button>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr id="noImageRow">
                                            <td colspan="3" style="font-style: italic;">-- Belum ada gambar --</td>
                                        </tr>
                                    @endforelse

                                </tbody>
                            </table>
                            <p class="text-muted" style="font-size: 13px; margin-top: 5px;">
                                * Maksimal ukuran file upload adalah 2MB.
                            </p>
                        </div>

                        <!-- Mobile Cards -->
                        <div class="d-block d-md-none mt-3" id="mobileCardsContainer">
                            @forelse($dokumentasi as $img)
                                <div class="card mb-3">
                                    <div class="card-body text-center">
                                        <p class="card-text">Gambar {{ $loop->iteration }}</p>
                                    </div>
                                    <img src="{{ asset('storage/' . $img->gambar) }}" class="card-img-top"
                                        alt="Gambar {{ $loop->iteration }}">
                                    <div class="card-body text-center">
                                        <button class="btn btn-danger btn-sm"
                                            onclick="markImageToDelete({{ $img->id }}, this)">Batalkan</button>
                                    </div>
                                </div>
                            @empty
                                <p class="text-center fst-italic">-- Belum ada gambar --</p>
                            @endforelse
                        </div>
                    </div>


                    <!-- Kolom kanan: Form Keterangan -->
                    <div class="col-md-6">
                        <form>
                            <div class="mt-3">
                                <label for="deskripsi" class="form-label">Keterangan</label>
                                <textarea class="form-control" id="description" name="description" rows="4" placeholder="Masukkan deskripsi">{{ $trs_pengiriman->description }}</textarea>
                            </div>
                            <!-- Tambah inputan lain jika diperlukan -->
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <style>
        @media (max-width: 577px) {
            .mobile-table .card-body {
                padding: 1rem;
            }

            .table-responsive {
                display: none;
            }
        }

        @media (min-width: 578px) {
            .mobile-table {
                display: none;
            }
        }

        @media (max-width: 576px) {

            #tableTujuan td,
            #tableTujuan th {
                font-size: 12px;
                padding: 4px;
            }

            .btnRemoveRow {
                padding: 0.25rem 0.4rem;
                font-size: 0.75rem;
                width: 30px;
                height: 30px;
            }

            .btnRemoveRow i {
                font-size: 0.8rem;
            }
        }
    </style>
    <script>
        const imageTableBody = document.getElementById('imageTableBody');
        const mobileCardsContainer = document.getElementById('mobileCardsContainer');
        const noImageRow = document.getElementById('noImageRow');
        const noImageMobileText = document.getElementById('noImageMobileText');

        function addImage(event) {
            const file = event.target.files[0];
            if (!file || !(file instanceof Blob)) return;

            // Cek ukuran file maksimal 2MB (2 * 1024 * 1024 bytes)
            if (file.size > 2 * 1024 * 1024) {
                Swal.fire({
                    icon: 'error',
                    title: 'File terlalu besar!',
                    text: 'Ukuran file maksimal adalah 2 MB. Silakan pilih file yang lebih kecil.',
                    confirmButtonColor: '#d33',
                });
                event.target.value = ""; // reset input supaya bisa coba upload lagi
                return;
            }

            // Buat URL gambar sementara untuk preview
            const url = URL.createObjectURL(file);
            const id = Date.now();

            images.push({
                id,
                url,
                file
            });

            renderImages();

            // reset input biar bisa upload file yang sama lagi kalau mau
            event.target.value = "";
        }

        let images = [
            @foreach ($dokumentasi as $img)
                {
                    id: {{ $img->id }},
                    url: "{{ asset('storage/' . $img->gambar) }}",
                    file: null
                },
            @endforeach
        ];

        let imagesToDelete = [];

        function markImageToDelete(imageId, buttonElem) {
            Swal.fire({
                title: "Yakin menghapus gambar ini?",
                text: "Gambar yang dipilih akan dihapus. Apakah Anda yakin?",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#d33",
                cancelButtonColor: "#3085d6",
                confirmButtonText: "Ya, hapus",
                cancelButtonText: "Batal",
            }).then(result => {
                if (result.isConfirmed) {
                    // Masukkan ID gambar ke list penghapusan
                    if (!imagesToDelete.includes(imageId)) {
                        imagesToDelete.push(imageId);
                    }

                    // Hapus gambar dari array images
                    images = images.filter(img => img.id !== imageId);

                    // Render ulang UI
                    renderImages();
                }
            });
        }

        function renderImages() {
            const imageTableBody = document.getElementById('imageTableBody');
            const mobileCardsContainer = document.getElementById('mobileCardsContainer');

            if (!imageTableBody || !mobileCardsContainer) return;

            if (images.length === 0) {
                imageTableBody.innerHTML =
                    `<tr id="noImageRow"><td colspan="3" style="font-style: italic;">-- Belum ada gambar --</td></tr>`;
                mobileCardsContainer.innerHTML =
                    `<p class="text-center fst-italic" id="noImageMobileText">-- Belum ada gambar --</p>`;
            } else {
                imageTableBody.innerHTML = images.map((img, i) => `
                    <tr>
                        <td style="border: 1px solid #adb5bd;">${i + 1}</td>
                        <td style="border: 1px solid #adb5bd;"><img src="${img.url}" alt="Gambar ${i + 1}" class="img-fluid" style="max-height:80px;"></td>
                        <td style="border: 1px solid #adb5bd;"><button class="btn btn-danger btn-sm" onclick="markImageToDelete(${img.id}, this)">Batalkan</button></td>
                    </tr>
                `).join('');
                mobileCardsContainer.innerHTML = images.map((img, i) => `
                    <div class="card mb-3">
                        <div class="card-body text-center">
                            <p class="card-text">Gambar ${i + 1}</p>
                        </div>
                        <img src="${img.url}" class="card-img-top" alt="Gambar ${i + 1}">
                        <div class="card-body text-center">
                            <button class="btn btn-danger btn-sm" onclick="markImageToDelete(${img.id}, this)">Batalkan</button>
                        </div>
                    </div>
                `).join('');
            }
        }

        // $(document).ready(function() {
        //     var table = $('#trs_detail_pengiriman').DataTable({
        //         responsive: false,
        //         paging: true,
        //         fixedColumns: true,
        //         autoWidth: false,
        //         columnDefs: [{
        //             targets: '_all',
        //             className: 'text-nowrap'
        //         }],
        //         language: {
        //             search: "Cari:",
        //             lengthMenu: "Tampilkan _MENU_ entri",
        //             info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ entri",
        //             paginate: {
        //                 first: "Awal",
        //                 last: "Akhir",
        //                 next: "Berikutnya",
        //                 previous: "Sebelumnya"
        //             },
        //             zeroRecords: "Tidak ada data ditemukan",
        //         }
        //     });

        //     // ⬇️ Trigger resize agar header sinkron setelah render
        //     setTimeout(() => {
        //         $(window).trigger('resize');
        //     }, 500);
        // });

        // -------------------------------------- Mobile ---------------------------------------
        document.addEventListener('DOMContentLoaded', () => {
            const keluarPukul = document.getElementById('keluar_pukul');
            const odometerKeluar = document.getElementById('odometer_keluar');
            const dropdownTugas = document.getElementById('dropdownTugas');
            const btnTambahGambar = document.getElementById('btnTambahGambar');
            const description = document.getElementById('description');

            function updateButtonState() {
                // Tombol enabled hanya kalau kedua input sudah diisi (tidak kosong)
                dropdownTugas.disabled = !(keluarPukul.value && odometerKeluar.value);
                btnTambahGambar.disabled = !(keluarPukul.value && odometerKeluar.value);
            }

            function checkEnableDescription() {
                if (odometerKeluar.value.trim() !== '' && keluarPukul.value.trim() !== '') {
                    description.removeAttribute('disabled');
                } else {
                    description.setAttribute('disabled', true);
                }
            }

            keluarPukul.addEventListener('input', () => {
                updateButtonState();
                checkEnableDescription();
            });

            odometerKeluar.addEventListener('input', () => {
                updateButtonState();
                checkEnableDescription();
            });

            // Inisialisasi status tombol saat halaman pertama load
            updateButtonState();
            // Jalankan saat halaman dimuat
            checkEnableDescription();
        });

        document.addEventListener('DOMContentLoaded', function() {
            const keluarPukulInput = document.getElementById('keluar_pukul');
            const odometerKeluarInput = document.getElementById('odometer_keluar');
            const table = document.getElementById('trs_detail_pengiriman');
            const cardTugas = document.querySelector('.card-tugas');

            function toggleFormAccessibility() {
                const keluarPukul = keluarPukulInput.value;
                const odometerKeluar = odometerKeluarInput.value;

                const enable = keluarPukul && odometerKeluar;

                // Toggle di table trs_detail_pengiriman
                if (table) {
                    const inputs = table.querySelectorAll('input:not([type=hidden])');
                    const selects = table.querySelectorAll('select');

                    inputs.forEach(input => {
                        if (input.type === 'checkbox') {
                            input.disabled = !enable;
                        } else {
                            input.readOnly = !enable;
                        }
                        input.title = enable ? '' : 'Isi waktu keluar dan odometer terlebih dahulu';
                    });

                    selects.forEach(select => {
                        select.disabled = !enable;
                        select.title = enable ? '' : 'Isi waktu keluar dan odometer terlebih dahulu';
                    });
                }

                // Toggle di card dengan class card-tugas
                if (cardTugas) {
                    const inputsCard = cardTugas.querySelectorAll('input:not([type=hidden])');
                    const selectsCard = cardTugas.querySelectorAll('select');

                    inputsCard.forEach(input => {
                        if (input.type === 'checkbox') {
                            input.disabled = !enable;
                        } else {
                            input.readOnly = !enable;
                        }
                        input.title = enable ? '' : 'Isi waktu keluar dan odometer terlebih dahulu';
                    });

                    selectsCard.forEach(select => {
                        select.disabled = !enable;
                        select.title = enable ? '' : 'Isi waktu keluar dan odometer terlebih dahulu';
                    });
                }
            }

            // Jalankan saat halaman dimuat
            toggleFormAccessibility();

            // Pantau perubahan input
            keluarPukulInput.addEventListener('input', toggleFormAccessibility);
            odometerKeluarInput.addEventListener('input', toggleFormAccessibility);
        });

        document.addEventListener('DOMContentLoaded', function () {
            const select = document.getElementById('selectNoPlat');
            const inputManual = document.getElementById('inputManualNoPlat');

            let hasUserInteracted = false;

            function toggleManualInput(force = false) {
                const selectedValue = select.value;

                // hanya tampilkan field manual jika user benar-benar memilih manual
                if (selectedValue === '999' && (hasUserInteracted || force)) {
                    inputManual.classList.remove('d-none');
                } else {
                    inputManual.classList.add('d-none');
                    if (hasUserInteracted) inputManual.value = '';
                }
            }

            // Deteksi perubahan sebagai interaksi user
            select.addEventListener('change', function () {
                hasUserInteracted = true;
                toggleManualInput();
            });

            // Jangan jalankan saat load awal, kecuali untuk preview paksa
            // toggleManualInput(); // Dihilangkan atau hanya aktif jika kamu mau preview
        });

        document.addEventListener('DOMContentLoaded', () => {
            const masukPukul = document.getElementById('masuk_pukul');
            const odometerMasuk = document.getElementById('odometer_masuk');
            const btnSimpanTugas = document.getElementById('btnSimpanTugas');

            function cekTugasBelum() {
                let adaTugasKosong = false;

                document.querySelectorAll('#trs_detail_pengiriman tbody tr').forEach((row) => {
                    const keteranganInput = row.querySelector('input[name="keterangan[]"]');
                    const keterangan = keteranganInput?.value.trim();

                    if (!keterangan) {
                        adaTugasKosong = true;
                    }
                });

                if (adaTugasKosong) {
                    masukPukul.disabled = true;
                    odometerMasuk.disabled = true;
                    masukPukul.title = "Isi semua keterangan terlebih dahulu";
                    odometerMasuk.title = "Isi semua keterangan terlebih dahulu";
                } else {
                    masukPukul.disabled = false;
                    odometerMasuk.disabled = false;
                    masukPukul.title = "";
                    odometerMasuk.title = "";
                }
            }

            // Jalankan saat halaman dimuat
            cekTugasBelum();

            // Jalankan saat input keterangan berubah
            document.querySelectorAll('input[name="keterangan[]"]').forEach(input => {
                input.addEventListener('input', cekTugasBelum);
            });

            // Klik tombol simpan tugas
            if (btnSimpanTugas) {
                btnSimpanTugas.addEventListener('click', () => {
                    masukPukul.disabled = true;
                    odometerMasuk.disabled = true;
                    masukPukul.title = "Isi semua keterangan terlebih dahulu";
                    odometerMasuk.title = "Isi semua keterangan terlebih dahulu";
                });
            }
        });

        document.addEventListener('DOMContentLoaded', function() {
            function timeToMinutes(timeStr) {
                const [hours, minutes] = timeStr.split(':').map(Number);
                return hours * 60 + minutes;
            }

            // Fungsi validasi untuk pasangan input masuk dan keluar
            function validateTimeInputs(inputMasuk, inputKeluar) {
                inputKeluar.addEventListener('change', function() {
                    const masukValue = inputMasuk.value;
                    const keluarValue = inputKeluar.value;

                    if (!masukValue) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Waktu Masuk Belum Diisi',
                            text: 'Silakan isi waktu masuk terlebih dahulu sebelum mengisi waktu keluar.',
                        });
                        inputKeluar.value = '';
                        return;
                    }

                    const masukMinutes = timeToMinutes(masukValue);
                    const keluarMinutes = timeToMinutes(keluarValue);

                    if (keluarMinutes < masukMinutes) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Waktu Tidak Valid',
                            text: 'Waktu keluar tidak boleh kurang dari waktu masuk.',
                        });
                        inputKeluar.value = '';
                    }
                });
            }

            // 1. Validasi di tabel (tr)
            const table = document.getElementById('trs_detail_pengiriman');
            if (table) {
                const rows = table.querySelectorAll('tbody tr');
                rows.forEach(row => {
                    const id = row.id.replace('row-', '');
                    const inputMasuk = document.querySelector(`#masuk-${id}`);
                    const inputKeluar = document.querySelector(`#keluar-${id}`);

                    if (inputMasuk && inputKeluar) {
                        validateTimeInputs(inputMasuk, inputKeluar);
                    }
                });
            }

            // 2. Validasi di card
            // Misal card punya class 'time-card' dan di dalamnya ada input masuk dan keluar
            const cards = document.querySelectorAll('.time-card');
            cards.forEach(card => {
                // Ambil id dari atribut data-id misal
                const id = card.getAttribute('data-id');
                if (!id) return;

                const inputMasuk = card.querySelector(`#masuk-${id}`);
                const inputKeluar = card.querySelector(`#keluar-${id}`);

                if (inputMasuk && inputKeluar) {
                    validateTimeInputs(inputMasuk, inputKeluar);
                }
            });
        });

        function isiWaktuMasuk(input) {
            if (!input.value) { // Hanya set waktu jika input kosong
                const now = new Date();
                const jam = now.getHours().toString().padStart(2, '0');
                const menit = now.getMinutes().toString().padStart(2, '0');
                input.value = `${jam}:${menit}`;
            }
        }

        function isiWaktuKeluar(input) {
            if (!input.value) { // Hanya set waktu jika input kosong
                const now = new Date();
                const jam = now.getHours().toString().padStart(2, '0');
                const menit = now.getMinutes().toString().padStart(2, '0');
                input.value = `${jam}:${menit}`;
            }
        }

        // Fungsi untuk mengacak elemen-elemen di dalam kontainer
        function shuffleElements() {
            var container = document.getElementById('legenda-warna');
            var elements = Array.from(container.children);

            // Mengacak urutan elemen
            for (let i = elements.length - 1; i > 0; i--) {
                let j = Math.floor(Math.random() * (i + 1));
                container.appendChild(elements[j]);
            }
        }

        // Jalankan fungsi untuk mengacak elemen-elemen setelah halaman dimuat
        window.onload = shuffleElements;

        $(document).on('change', 'select[name="keterangan[]"]', function() {
            const container = $(this).closest('.collapse');
            const extraInput = container.find('.keterangan-input');

            if ($(this).val() === 'tertunda') {
                extraInput.show();
            } else {
                extraInput.hide();
            }
        });
        // -------------------------------------- Dekstop --------------------------------------

        function updateKeteranganText(selectElement, id) {
            const textInput = document.getElementById('keterangan-text-' + id);
            const selectedValue = selectElement.value;
            let row;
            if (id) {
                row = document.getElementById('row-' + id);
            } else {
                row = selectElement.closest('tr');
            }

            // ✅ Tambahkan tanda kutip di sini
            const dtTugas = row.querySelector("input[name='dt_tugas[]']")?.value.trim();
            const pic = row.querySelector("input[name='pic[]']")?.value.trim();
            const masuk = row.querySelector("input[name='masuk[]']")?.value.trim();
            const keluar = row.querySelector("input[name='keluar[]']")?.value.trim();
            const narahubung = row.querySelector("input[name='narahubung[]']")?.value.trim();

            if (selectedValue === 'tertunda') {
                if (!masuk || !keluar) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Waktu Belum Diisi!',
                        text: 'Harap lengkapi waktu masuk dan keluar sebelum memilih "Tertunda".',
                        confirmButtonColor: '#3085d6',
                    });
                    // Kosongkan pilihan kembali
                    selectElement.value = '';
                    textInput.style.display = 'none';
                    return;
                }
                textInput.style.display = 'block'; // Tampilkan input
                textInput.value = ''; // Biarkan kosong jika belum ada nilai
                row.style.backgroundColor = 'rgba(255, 255, 0, 0.3)'; // Warna kuning transparan
            } else if (selectedValue === 'selesai') {
                // Cek apakah semua input masih kosong
                if (!pic || !masuk || !keluar || !narahubung) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Data Belum Diisi!',
                        text: 'Harap lengkapi pengisian sebelum memilih "Selesai".',
                        confirmButtonColor: '#3085d6',
                    });
                    selectElement.value = '';
                    return;
                }
                textInput.style.display = 'none'; // Sembunyikan input
                textInput.value = ''; // Kosongkan input
                checkInputs(id); // Gunakan fungsi normal untuk atur warna jika selesai
            } else {
                textInput.style.display = 'none';
                textInput.value = '';
                row.style.backgroundColor = 'white';
            }
        }

        function toggleKeterangan(selectElement) {
            const container = selectElement.closest('.card-body');
            const keteranganDiv = container.querySelector('#keteranganDiv');

            if (!keteranganDiv) return;

            if (selectElement.value === 'tertunda' || selectElement.value === 'dibatalkan') {
                keteranganDiv.style.display = 'block';
            } else {
                keteranganDiv.style.display = 'none';
            }
        }

        function cekSebelumSelesai(selectElement) {
            const container = selectElement.closest('.card-body');

            if (selectElement.value === 'selesai') {
                const inputs = container.querySelectorAll(
                    'input[name="dt_tugas[]"],input[name="pic[]"], input[name="masuk[]"], input[name="keluar[]"], input[name="narahubung[]"]'
                );

                let isValid = true;

                inputs.forEach(function(input) {
                    if (input.value.trim() === '') {
                        isValid = false;
                    }
                });

                if (!isValid) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Data Belum Lengkap!',
                        text: 'Harap lengkapi pengisian sebelum memilih "Selesai".',
                    });

                    // Reset kembali ke default
                    selectElement.value = '';
                    toggleKeterangan(selectElement);
                    return;
                }
            }

            if (selectElement.value === 'tertunda') {
                const masukInputs = container.querySelectorAll('input[name="masuk[]"]');
                const keluarInputs = container.querySelectorAll('input[name="keluar[]"]');

                let isValidTertunda = true;

                masukInputs.forEach(function(input) {
                    if (input.value.trim() === '') {
                        isValidTertunda = false;
                    }
                });

                keluarInputs.forEach(function(input) {
                    if (input.value.trim() === '') {
                        isValidTertunda = false;
                    }
                });

                if (!isValidTertunda) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Waktu Masuk dan Keluar Belum Lengkap!',
                        text: 'Harap isi waktu Masuk dan Keluar sebelum memilih "Tertunda".',
                    });

                    // Reset kembali ke default
                    selectElement.value = '';
                    toggleKeterangan(selectElement);
                    return;
                } else {
                    // Kalau sudah valid, tampilkan keteranganDiv
                    toggleKeterangan(selectElement);
                }
            } else {
                // Untuk status selain tertunda dan selesai, update tampilan keteranganDiv
                toggleKeterangan(selectElement);
            }
        }


        function cekSebelumSelesai(selectElement) {
            const container = selectElement.closest('.card-body');

            if (selectElement.value === 'selesai') {
                const inputs = container.querySelectorAll(
                    'input[name="dt_tugas[]"],input[name="pic[]"], input[name="masuk[]"], input[name="keluar[]"], input[name="narahubung[]"]'
                );

                let isValid = true;

                inputs.forEach(function(input) {
                    if (input.value.trim() === '') {
                        isValid = false;
                    }
                });

                if (!isValid) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Data Belum Lengkap!',
                        text: 'Harap lengkapi pengisian sebelum memilih "Selesai".',
                    });

                    // Reset kembali ke default
                    selectElement.value = '';
                    toggleKeterangan(selectElement);
                    return;
                }
            }

            if (selectElement.value === 'tertunda') {
                const masukInputs = container.querySelectorAll('input[name="masuk[]"]');
                const keluarInputs = container.querySelectorAll('input[name="keluar[]"]');

                let isValidTertunda = true;

                masukInputs.forEach(function(input) {
                    if (input.value.trim() === '') {
                        isValidTertunda = false;
                    }
                });

                keluarInputs.forEach(function(input) {
                    if (input.value.trim() === '') {
                        isValidTertunda = false;
                    }
                });

                if (!isValidTertunda) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Waktu Masuk dan Keluar Belum Lengkap!',
                        text: 'Harap isi waktu Masuk dan Keluar sebelum memilih "Tertunda".',
                    });

                    // Reset kembali ke default
                    selectElement.value = '';
                    toggleKeterangan(selectElement);
                    return;
                } else {
                    // Kalau sudah valid, tampilkan keteranganDiv
                    toggleKeterangan(selectElement);
                }
            } else {
                // Untuk status selain tertunda dan selesai, update tampilan keteranganDiv
                toggleKeterangan(selectElement);
            }
        }

        function filterTugas(status) {
            const rows = document.querySelectorAll('tbody tr');
            const cards = document.querySelectorAll('.card-tugas');
            const noDataMessageTable = document.getElementById('no-data-message-table');
            const noDataMessageCards = document.getElementById(
                'no-data-message-cards'); // ID untuk elemen pesan tidak ada data

            // Sembunyikan semua
            rows.forEach(row => row.style.display = 'none');
            cards.forEach(card => card.style.display = 'none');

            let filteredRows;
            let filteredCards;

            // Filter berdasarkan status
            if (status === 'semua') {
                filteredRows = [...rows];
                filteredCards = [...cards];
            } else if (status === 'tertunda') {
                // Filter untuk yang berwarna kuning (tertunda)
                filteredRows = Array.from(rows).filter(row => row.style.backgroundColor === 'rgba(255, 255, 0, 0.3)');
                filteredCards = Array.from(cards).filter(card => card.style.backgroundColor === 'rgba(255, 255, 0, 0.3)');
            } else if (status === 'belum') {
                // Filter untuk 'belum selesai' yang berwarna putih (untuk yang belum selesai)
                filteredRows = Array.from(rows).filter(row =>
                    row.style.backgroundColor === 'white'
                );
                filteredCards = Array.from(cards).filter(card =>
                    card.style.backgroundColor === 'white'
                );
            } else if (status === 'selesai') {
                // Cek rgb dari hex #d4edda adalah rgb(212, 237, 218)
                filteredRows = Array.from(rows).filter(row =>
                    row.style.backgroundColor === 'rgba(0, 255, 0, 0.2)' || row.style.backgroundColor ===
                    'rgb(212, 237, 218)');
                filteredCards = Array.from(cards).filter(card =>
                    card.style.backgroundColor === 'rgba(0, 255, 0, 0.2)' || card.style.backgroundColor ===
                    'rgb(212, 237, 218)');
            } else if (status === 'nonaktif') {
                // Filter untuk yang berwarna merah (nonaktif)
                filteredRows = Array.from(rows).filter(row => row.style.backgroundColor === 'rgba(255, 0, 0, 0.3)');
                filteredCards = Array.from(cards).filter(card => card.style.backgroundColor === 'rgba(255, 0, 0, 0.3)');
            } else {
                filteredRows = document.querySelectorAll('tr.tugas-' + status);
                filteredCards = document.querySelectorAll('.card-tugas.tugas-' + status);
            }

            // Tampilkan hasil filter
            filteredRows.forEach(row => row.style.display = '');
            filteredCards.forEach(card => card.style.display = '');

            // Atur ulang nomor urut
            let urut = 1;
            filteredRows.forEach(row => {
                const noUrutTd = row.querySelector('.nomor-urut');
                if (noUrutTd) {
                    noUrutTd.textContent = urut++;
                }
            });

            // Tentukan apakah tampilan mobile atau desktop
            const isMobile = window.innerWidth <= 768; // contoh breakpoint mobile

            // Reset dulu tampilan pesan
            noDataMessageTable.style.display = 'none';
            noDataMessageCards.style.display = 'none';

            // Jika tidak ada data
            if (filteredRows.length === 0 && filteredCards.length === 0) {
                if (isMobile) {
                    noDataMessageCards.style.display = 'block'; // tampilkan pesan kartu (mobile)
                } else {
                    noDataMessageTable.style.display = 'block'; // tampilkan pesan tabel (desktop)
                }
            }
            renderImages();
        }

        document.addEventListener('DOMContentLoaded', function() {
            let rows = document.querySelectorAll('tr[id^="row-"]');
            rows.forEach(row => {
                let rowId = row.id.replace('row-', '');
                checkInputs(rowId); // Panggil fungsi checkInputs untuk setiap baris
            });
            // Urutkan ulang baris berdasarkan status
            sortRows();
        });

        // Fungsi untuk memeriksa input dan mengubah warna latar belakang
        function checkInputs(rowId) {
            let row = document.getElementById('row-' + rowId);
            let inputs = row.querySelectorAll('input[type="text"], input[type="time"]');
            let allFilled = true;

            inputs.forEach(input => {
                if (input.style.display !== 'none' && input.value.trim() === '') {
                    allFilled = false;
                }
            });

            let isActive = row.querySelector('input[name="isactive[]"]').value;
            let selectValue = row.querySelector('select').value;

            if (selectValue === 'tertunda') {
                row.style.backgroundColor = 'rgba(255, 255, 0, 0.3)'; // Tetap kuning untuk tertunda
            } else if (isActive === '0') {
                row.style.backgroundColor = 'rgba(255, 0, 0, 0.3)'; // Merah untuk nonaktif
            } else if (selectValue === 'selesai' && allFilled) {
                row.style.backgroundColor = 'rgba(0, 255, 0, 0.2)'; // Hijau untuk selesai
            } else {
                row.style.backgroundColor = 'white';
            }


        }

        function sortRows() {
            let tableBody = document.querySelector('#trs_detail_pengiriman tbody');
            let rows = Array.from(tableBody.querySelectorAll('tr'));

            rows.sort((a, b) => {
                // Urutan prioritas warna: putih (0), hijau (1), kuning (2), merah (3)
                const getColorRank = (color) => {
                    switch (color) {
                        case 'white':
                        case '':
                            return 0;
                        case 'rgba(0, 255, 0, 0.2)':
                            return 1;
                        case 'rgba(255, 255, 0, 0.3)':
                            return 2;
                        case 'rgba(255, 0, 0, 0.3)':
                            return 3;
                        default:
                            return 99; // jika warnanya tak dikenal
                    }
                };

                return getColorRank(a.style.backgroundColor) - getColorRank(b.style.backgroundColor);
            });

            rows.forEach(row => {
                tableBody.appendChild(row); // Pindahkan baris ke urutan baru
            });

            updateNomorUrut(); // Perbarui nomor urut jika ada
        }


        // Fungsi untuk memeriksa apakah ada checkbox yang dicentang
        function checkCheckboxes() {
            const checkboxes = document.querySelectorAll('.hapus-checkbox');
            const isAnyChecked = Array.from(checkboxes).some(checkbox => checkbox.checked);
            const deleteButton = document.getElementById('hapus-button');

            // Tampilkan atau sembunyikan tombol hapus
            deleteButton.style.display = isAnyChecked ? 'inline-block' : 'none';
        }

        // Setelah proses penghapusan selesai
        function resetCheckboxesAndButton() {
            const checkboxes = document.querySelectorAll('.hapus-checkbox');
            checkboxes.forEach(checkbox => {
                checkbox.checked = false;
            });

            // Sembunyikan tombol hapus
            const deleteButton = document.getElementById('hapus-button');
            if (deleteButton) {
                deleteButton.style.display = 'none';
            }

            // Reset juga checkbox select-all jika ada
            const selectAll = document.getElementById('select-all-checkbox');
            if (selectAll) {
                selectAll.checked = false;
            }
        }


        document.addEventListener('change', function(e) {
            if (e.target.classList.contains('hapus-checkbox')) {
                checkCheckboxes();
            }
        });

        // Event listener untuk memonitor perubahan checkbox
        document.querySelectorAll('.hapus-checkbox').forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                const container = $(this).closest('.card').length > 0 ?
                    $(this).closest('.card') :
                    $(this).closest('tr');

                const isactiveInput = container.find('input[name="isactive[]"]');
                isactiveInput.val(this.checked ? '0' : '1');

                checkCheckboxes();
            });
        });

        // Event listener untuk Pilih Semua checkbox
        document.addEventListener('DOMContentLoaded', function() {
            const selectAllCheckbox = document.getElementById('select-all-checkbox');
            if (!selectAllCheckbox) return;

            selectAllCheckbox.addEventListener('change', function() {
                const checkboxes = Array.from(document.querySelectorAll('.hapus-checkbox'))
                    .filter(cb => !cb.disabled && cb.offsetParent !== null);

                // ✅ Jika tidak ada checkbox sama sekali
                if (checkboxes.length === 0) {
                    Swal.fire({
                        icon: 'info',
                        title: 'Informasi',
                        text: 'Tidak ada tugas yang bisa dihapus'
                    });
                    this.checked = false;
                    return;
                }

                checkboxes.forEach(cb => {
                    cb.checked = this.checked;

                    const row = cb.closest('tr');
                    if (row) {
                        const isactiveInput = row.querySelector('input[name="isactive[]"]');
                        if (isactiveInput) {
                            isactiveInput.value = cb.checked ? '0' : '1';
                        }
                    }
                });

                checkCheckboxes();
            });
        });

        $(document).ready(function() {
            // Tampilkan atau sembunyikan tombol jika ada yang dicentang
            function toggleDeleteButton() {
                const isChecked = $('.hapus-checkbox:checked').length > 0;
                $('#hapus-button').toggle(isChecked); // Tampilkan/hide tombol
            }

            // Cek setiap perubahan pada checkbox
            $('.hapus-checkbox, #select-all-checkbox').on('change', function() {
                if ($(this).is('#select-all-checkbox')) {
                    $('.hapus-checkbox').prop('checked', this.checked);
                }
                toggleDeleteButton(); // Periksa status tombol hapus
            });

            // Ketika tombol "Batalkan Tugas" diklik
            $('#hapus-button').click(function(event) {
                event.preventDefault(); // Jangan langsung submit dulu

                const allCheckboxes = $('.hapus-checkbox');
                const selectedCheckboxes = $('.hapus-checkbox:checked');

                const selectedIds = $('.hapus-checkbox:checked').map(function() {
                    return $(this).data('id');
                }).get();

                const hasDisabledSelected = selectedCheckboxes.filter(function() {
                    return $(this).is(':disabled');
                }).length > 0;

                if (selectedIds.length === 0) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Tidak ada tugas dipilih',
                        text: 'Silakan pilih minimal satu tugas untuk dibatalkan!'
                    });
                    return;
                }

                if (hasDisabledSelected) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Perhatian',
                        text: 'Hanya tugas belum selesai dan tugas tertunda yang dapat dibatalkan!'
                    });
                    return;
                }

                Swal.fire({
                    title: "Yakin membatalkan tugas?",
                    text: "Tugas yang dipilih akan dipindahkan ke tabel dibatalkan. Silakan isi alasan kenapa tugas tersebut dibatalkan.",
                    icon: "warning",
                    input: "text",
                    inputValue: "",
                    inputPlaceholder: "Tulis alasan tambahan di sini...",
                    showCancelButton: true,
                    confirmButtonColor: "#d33",
                    cancelButtonColor: "#3085d6",
                    confirmButtonText: "Ya, batalkan",
                    cancelButtonText: "Batal",
                    inputValidator: (value) => {
                        if (!value) {
                            return "Silakan isi alasan pembatalan!";
                        }
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        const alasan = result.value;

                        // Memproses baris yang dibatalkan
                        $('.hapus-checkbox:checked').each(function() {
                            const row = $(this).closest('tr');
                            const $checkbox = $(this);
                            const $cardContainer = $checkbox.closest('.card');
                            const isMobile = window.innerWidth <
                                576; // Deteksi tampilan mobile

                            const originalIdInput = row.find(
                                'input[name="id_dt_trs_pengiriman[]"]');
                            const id = originalIdInput.length > 0 ? originalIdInput.val() :
                                '';


                            if (isMobile) {
                                // === Penanganan untuk MOBILE (CARD) ===
                                const clonedCard = $cardContainer.clone();

                                // Ambil ID dari input di dalam card
                                const id = $cardContainer.find(
                                    'input[name="id_dt_trs_pengiriman[]"]').val() || '';

                                // Tambahkan hidden input ID + isactive=0
                                clonedCard.append(`
                                        <input type="hidden" name="id_dt_trs_pengiriman[]" value="${id}">
                                        <input type="hidden" name="isactive[]" value="0">
                                    `);

                                // Set semua input readonly dan stylingnya
                                clonedCard.find('input').prop('readonly', true).css({
                                    'background-color': '#f2f2f2',
                                    'border': '1px solid #ccc',
                                    'color': '#555'
                                });

                                // Ganti checkbox menjadi tanda #
                                clonedCard.find('.form-check').html(
                                    '<span style="font-weight:bold;">#</span>'
                                );

                                // Isi alasan ke input keterangan[]
                                const inputKeterangan = clonedCard.find(
                                    'input[name="keterangan[]"]').first();
                                inputKeterangan.val(alasan);
                                inputKeterangan.prop('readonly', true).css({
                                    'background-color': '#f2f2f2',
                                    'border': '1px solid #ccc',
                                    'color': '#555',
                                    'display': 'block'
                                });

                                // Set value select menjadi "dibatalkan"
                                const selectElem = clonedCard.find('select');

                                // Pastikan opsi "dibatalkan" ada di dalam <select> dan langsung di-hide
                                if (selectElem.length > 0) {
                                    // Pastikan opsi "dibatalkan" ada di dalam <select> dan langsung di-hide
                                    if (!selectElem.find('option[value="dibatalkan"]')
                                        .length) {
                                        selectElem.append(
                                            '<option value="dibatalkan" style="display: none;">Dibatalkan</option>'
                                        );
                                    }

                                    // Set value menjadi "dibatalkan" dan disabled
                                    selectElem.val('dibatalkan').prop('disabled', true)
                                        .css({
                                            'background-color': '#f2f2f2',
                                            'color': '#555'
                                        });
                                } else {
                                    console.error(
                                        "Element <select> tidak ditemukan di dalam card."
                                    );
                                }

                                // Set value menjadi "dibatalkan" dan disabled
                                selectElem.val('dibatalkan').prop('disabled', true).css({
                                    'background-color': '#f2f2f2',
                                    'color': '#555'
                                }).hide();

                                // Pindahkan ke card mobile
                                $('#cancelled_tasks_mobile').append(clonedCard);

                                // HAPUS CARD ASLI AGAR TIDAK DUPLIKAT
                                $cardContainer.remove();
                            } else {
                                // === Penanganan untuk DESKTOP (ROW) ===
                                const clonedRow = row.clone();

                                // Ambil ID dari input di dalam baris tabel
                                const id = clonedRow.find(
                                    'input[name="id_dt_trs_pengiriman[]"]').val() || '';

                                // Tambahkan hidden input di dalam row
                                clonedRow.append(`
                                        <input type="hidden" name="id_dt_trs_pengiriman[]" value="${id}">
                                        <input type="hidden" name="isactive[]" value="0">
                                    `);

                                // Set input readonly dan stylingnya
                                clonedRow.find('input').prop('readonly', true).css({
                                    'background-color': '#f2f2f2',
                                    'border': '1px solid #ccc',
                                    'color': '#555'
                                });

                                // Ganti kolom pertama dengan #
                                clonedRow.find('td:first-child').html(
                                    '<span style="display:block; text-align:center;">#</span>'
                                );

                                // Ganti warna baris
                                clonedRow.css('background-color', '#D5D5D5');

                                // Isi alasan ke input keterangan[]
                                const inputKeterangan = clonedRow.find(
                                    'input[name="keterangan[]"]').first();
                                inputKeterangan.val(alasan);
                                inputKeterangan.prop('readonly', true).css({
                                    'background-color': '#f2f2f2',
                                    'border': '1px solid #ccc',
                                    'color': '#555',
                                    'display': 'block'
                                });
                                // Set value select menjadi "dibatalkan"
                                const selectElem = clonedRow.find('select');

                                // Pastikan opsi "dibatalkan" ada di dalam <select>
                                if (!selectElem.find('option[value="dibatalkan"]').length) {
                                    selectElem.append(
                                        '<option value="dibatalkan">Dibatalkan</option>'
                                    );
                                }

                                // Set value menjadi "dibatalkan" dan disabled
                                selectElem.val('dibatalkan').prop('disabled', true).css({
                                    'background-color': '#f2f2f2',
                                    'color': '#555'
                                }).hide();

                                // Pindahkan baris ke tabel cancelled
                                $('#cancelled_tasks tbody').append(clonedRow);
                                $('#card-tugas-dibatalkan').show();
                            }

                            // Hapus dari tabel utama
                            row.remove();
                        });


                        // Update nomor urut di tabel dibatalkan
                        $('#cancelled_tasks tbody tr').each(function(index) {
                            $(this).find('td:eq(1)').text(index +
                                1); // Kolom ke-2 = nomor urut
                        });
                        // Tampilkan card dibatalkan sesuai mode
                        if (window.innerWidth < 576) {
                            $('#card-tugas-dibatalkan-mobile').show();
                            $('#card-tugas-dibatalkan').hide();
                        } else {
                            $('#card-tugas-dibatalkan').show();
                            $('#card-tugas-dibatalkan-mobile').hide();
                        }

                        // Reset semua checkbox dan tombol setelah pembatalan
                        $('#select-all-checkbox').prop('checked', false);
                        resetCheckboxesAndButton();
                        checkCheckboxes();
                    }
                });
            });
        });

        function collectCancelTableData() {
            const rows = document.querySelectorAll('#cancelled_tasks tbody tr');
            const data = [];

            console.log("Total baris yang ditemukan:", rows.length);

            rows.forEach((row, index) => {
                const idInput = row.querySelector('input[name="id_dt_trs_pengiriman[]"]');
                const id = idInput ? idInput.value : null;
                const isActiveInput = row.querySelector('input[name="isactive[]"]');
                const isactive = isActiveInput ? isActiveInput.value : '1';

                console.log(`Baris ke-${index + 1}:`, id); // Log ID untuk setiap baris

                const tujuanInput = row.querySelector('input[name="tujuan[]"]');
                const tujuan = tujuanInput ? tujuanInput.value : row.querySelector('td:nth-child(3)').textContent
                    .trim();
                // const tujuan = row.querySelector('td:nth-child(3)').textContent.trim();
                const jenisTugasInput = row.querySelector('input[name="jenis_tugas[]"]');
                const jenisTugas = jenisTugasInput ? jenisTugasInput.value : row.querySelector('td:nth-child(4)')
                    .textContent.trim();
                // const jenisTugas = row.querySelector('td:nth-child(4)').textContent.trim();

                const dtTugasInput = row.querySelector('input[name^="dt_tugas"]');
                const dt_tugas = dtTugasInput ? dtTugasInput.value : '';

                const narahubung = row.querySelector('input[name^="narahubung"]')?.value || '';
                const masuk = row.querySelector('input[name^="masuk"]')?.value || '';
                const keluar = row.querySelector('input[name^="keluar"]')?.value || '';
                const pic = row.querySelector('input[name^="pic"]')?.value || '';
                // Ambil type (input tersembunyi)
                const type = row.querySelector('input[name="type[]"]') ? row.querySelector('input[name="type[]"]')
                    .value : 'reguler';
                const selectEl = row.querySelector('select');
                const inputEl = row.querySelector('input[name^="keterangan"]');
                let keterangan = '';
                if (selectEl.value === 'selesai') {
                    keterangan = 'selesai';
                } else if (selectEl.value === 'dibatalkan') {
                    const inputValue = inputEl?.value?.trim() || '';
                    if (/^dibatalkan\s*-\s*/i.test(inputValue)) {
                        keterangan = inputValue;
                    } else {
                        keterangan = 'dibatalkan' + (inputValue ? ' - ' + inputValue : '');
                    }

                } else if (selectEl.value !== '') {
                    keterangan = selectEl.value;
                    if (inputEl && inputEl.value.trim() !== '') {
                        keterangan += ' - ' + inputEl.value.trim();
                    }
                } else if (inputEl && inputEl.value.trim() !== '') {
                    keterangan = inputEl.value.trim();
                }

                data.push({
                    id_dt_trs_pengiriman: id,
                    tujuan: tujuan,
                    jenisTugas: jenisTugas,
                    narahubung: narahubung,
                    masuk: masuk,
                    keluar: keluar,
                    pic: pic,
                    dt_tugas: dt_tugas,
                    keterangan: keterangan,
                    isactive: isactive // Flag bahwa ini dibatalkan
                });
            });

            return data;
        }

        function cleanCanceledPrefix(text) {
            // Hapus semua awalan "dibatalkan" dengan berbagai variasi penulisan
            return text.replace(/^(dibatalkan\s*[-]\s*)+/gi, '').trim();
        }

        // Fungsi collect data cancel untuk mobile
        function collectCancelTableDataMobile() {
            const cards = document.querySelectorAll('#cancelled_tasks_mobile .card');
            const data = [];

            cards.forEach((card) => {
                const idInput = card.querySelector('input[name="id_dt_trs_pengiriman[]"]');
                const id = idInput ? idInput.value : null;
                const isActiveInput = card.querySelector('input[name="isactive[]"]');
                const isactive = isActiveInput ? isActiveInput.value : '1';

                const tujuanInput = card.querySelector('input[name="tujuan[]"]');
                const tujuan = tujuanInput ? tujuanInput.value : '';

                const jenisTugasInput = card.querySelector('input[name="jenis_tugas[]"]');
                const jenisTugas = jenisTugasInput ? jenisTugasInput.value : '';

                const dtTugasInput = card.querySelector('input[name^="dt_tugas"]');
                const dt_tugas = dtTugasInput ? dtTugasInput.value : '';

                const narahubung = card.querySelector('input[name^="narahubung"]')?.value || '';
                const masuk = card.querySelector('input[name^="masuk"]')?.value || '';
                const keluar = card.querySelector('input[name^="keluar"]')?.value || '';
                const pic = card.querySelector('input[name^="pic"]')?.value || '';
                // Ambil type (input tersembunyi)
                const type = card.querySelector('input[name="type[]"]') ? card.querySelector('input[name="type[]"]')
                    .value : 'reguler';

                const selectEl = card.querySelector(
                    'select[name="keterangan[]"]'); // Anggap ada select dengan name "status[]"
                const inputEl = card.querySelector('input[name^="keterangan"]');
                let keterangan = '';

                if (selectEl.value === 'selesai') {
                    keterangan = 'selesai';
                } else if (selectEl.value === 'dibatalkan') {
                    const inputValue = inputEl?.value?.trim() || '';
                    if (/^dibatalkan\s*-\s*/i.test(inputValue)) {
                        keterangan = inputValue;
                    } else {
                        keterangan = 'dibatalkan' + (inputValue ? ' - ' + inputValue : '');
                    }
                } else if (selectEl.value !== '') {
                    keterangan = selectEl.value;
                    if (inputEl && inputEl.value.trim() !== '') {
                        keterangan += ' - ' + inputEl.value.trim();
                    }
                } else if (inputEl && inputEl.value.trim() !== '') {
                    keterangan = inputEl.value.trim();
                }


                data.push({
                    id_dt_trs_pengiriman: id,
                    tujuan: tujuan,
                    jenisTugas: jenisTugas,
                    narahubung: narahubung,
                    masuk: masuk,
                    keluar: keluar,
                    pic: pic,
                    dt_tugas: dt_tugas,
                    type: type,
                    keterangan: keterangan,
                    isactive: isactive
                });
            });

            return data;
        }

        let dataTable; // Variabel global untuk menyimpan DataTable

        $(document).ready(function() {
            // $('#modalTambahTujuan .select2').select2({
            //     dropdownParent: $('#modalTambahTujuan'), // WAJIB saat di dalam modal
            //     placeholder: "-- Pilih --",
            //     allowClear: true,
            //     width: '100%'
            // });

            // Reset dropdown saat modal dibuka
            $('#modalTambahTujuan').on('show.bs.modal', function() {
                $(this).find('select[name="idlokasi[]"]').val(null).trigger('change');
                $(this).find('select[name="idkategoritugas[]"]').val(null).trigger('change');
                $(this).find('input[name="dt_tugas"]').val('');

                // Reset dataTable jadi kosong
                if (dataTable) {
                    dataTable.clear().draw();
                }
            });
            // Inisialisasi DataTable
            dataTable = $('#tableTujuan').DataTable({
                paging: true,
                searching: true,
                ordering: false,
                info: true,
                columnDefs: [{
                    orderable: false,
                    targets: [4]
                }]
            });

            $('input[name="mode_lokasi"]').on('change', function() {
                if (this.value === 'select') {
                    $('#selectLokasi').removeClass('d-none');
                    $('#inputLokasi').addClass('d-none');
                } else {
                    $('#selectLokasi').addClass('d-none');
                    $('#inputLokasi').removeClass('d-none');
                }
            });

            $('input[name="mode_tugas"]').on('change', function() {
                if (this.value === 'select') {
                    $('#selectTugas').removeClass('d-none');
                    $('#inputTugas').addClass('d-none');
                } else {
                    $('#selectTugas').addClass('d-none');
                    $('#inputTugas').removeClass('d-none');
                }
            });

            // Event tombol tambah baris
            document.getElementById('btnAddlokasi').addEventListener('click', function () {
                const idTrsPengiriman = document.querySelector('input[name="id_trs_pengiriman"]')?.value || '';
                const dtTugasInput = document.getElementById('dt_tugas');
                const dtTugas = dtTugasInput.value.trim();

                // Ambil dari input datalist lokasi
                const lokasiInput = document.getElementById('inputLokasi');
                const idlokasi = lokasiInput.value.trim(); // dianggap sebagai nama
                const namalokasi = idlokasi;

                // Ambil dari input datalist jenis tugas
                const tugasInput = document.getElementById('inputTugas');
                const idkategoritugas = tugasInput.value.trim(); // dianggap sebagai nama
                const namaTugas = idkategoritugas;

                if (!idlokasi || !idkategoritugas || !dtTugas) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Perhatian',
                        text: 'Silakan lengkapi pengisian Tujuan, Jenis Tugas dan Detail Tugas terlebih dahulu!',
                        confirmButtonColor: '#3085d6',
                        confirmButtonText: 'OK'
                    });
                    return;
                }

                // Cek duplikasi di dalam DataTable
                let isDuplicate = false;
                dataTable.rows().every(function () {
                    const rowNode = this.node();
                    const existingIdLokasi = $(rowNode).find('input[name="idlokasi[]"]').val();
                    const existingIdKategori = $(rowNode).find('input[name="idkategoritugas[]"]').val();

                    if (existingIdLokasi === idlokasi && existingIdKategori === idkategoritugas) {
                        isDuplicate = true;
                        return false;
                    }
                });

                if (isDuplicate) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Tidak Boleh Sama',
                        text: 'Pengisian Tujuan, Jenis Tugas dan Detail Tugas ini sudah pernah ditambahkan.',
                        confirmButtonColor: '#3085d6',
                        confirmButtonText: 'OK'
                    });
                    return;
                }

                // Buat baris baru
                const rowNode = $(`
                    <tr style="text-align:center; font-size: 14px;">
                        <td style="border: 1px solid #adb5bd;">#</td>
                        <td style="border: 1px solid #adb5bd;">
                            ${namalokasi}
                            <input type="hidden" name="idlokasi[]" value="${idlokasi}">
                            <input type="hidden" name="id_trs_pengiriman[]" value="${idTrsPengiriman}">
                        </td>
                        <td style="border: 1px solid #adb5bd;">
                            ${namaTugas}
                            <input type="hidden" name="idkategoritugas[]" value="${idkategoritugas}">
                        </td>
                        <td style="border: 1px solid #adb5bd;">
                            ${dtTugas}
                            <input type="hidden" name="dt_tugas[]" value="${dtTugas}">
                        </td>
                        <td style="border: 1px solid #adb5bd;">
                            <button type="button" class="btn btn-danger btn-sm btnRemoveRow">
                                <i class="fa fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                `);

                // Tambahkan ke DataTable dan refresh
                dataTable.row.add(rowNode).draw();

                // Reset input
                $('#inputLokasi').val('');
                $('#inputTugas').val('');
                $('#dt_tugas').val('');

                updateNomorUrut();
            });


            // Event delegation untuk hapus baris
            $('#tableTujuan tbody').on('click', '.btnRemoveRow', function() {
                dataTable.row($(this).closest('tr')).remove().draw();
                updateNomorUrut();
            });

            // Fungsi update nomor urut
            function updateNomorUrut() {
                dataTable.rows().every(function(index) {
                    const rowNode = this.node();
                    $(rowNode).find('td:first').text(index + 1);
                });
            }
        });


        // Hapus baris jika tombol hapus diklik
        document.addEventListener('click', function(e) {
            if (e.target.closest('.btnRemoveRow')) {
                e.target.closest('tr').remove();
                updateNomorUrut();
            }
        });

        document.getElementById('btnSimpanTugas').addEventListener('click', function() {
            let isValid = true;
            const rows = document.querySelectorAll('#tableBodyTujuan tr');
            const idTrsPengiriman = document.querySelector('input[name="id_trs_pengiriman"]').value;
            const keluarPukul = document.getElementById('keluar_pukul').value.trim();
            const odometerKeluar = document.getElementById('odometer_keluar').value.trim();

            const isDisabled = !(keluarPukul && odometerKeluar);

            if (!idTrsPengiriman || idTrsPengiriman.trim() === '') {
                alert('ID Transaksi Pengiriman tidak ditemukan.');
                return;
            }

            // Cek dulu apakah ada baris sama sekali
            if (rows.length === 0) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Data Kosong',
                    text: 'Belum ada data Tujuan, Jenis Tugas dan Detail Tugas yang ditambahkan!',
                    confirmButtonColor: '#3085d6'
                });
                return; // hentikan proses simpan
            }

            rows.forEach((row, index) => {
                const idlokasiInput = row.querySelector('input[name="idlokasi[]"]');
                const idkategoritugasInput = row.querySelector('input[name="idkategoritugas[]"]');
                const dtTugasInput = row.querySelector('input[name="dt_tugas[]"]');
                const tdLokasi = row.querySelector('td:nth-child(2)');
                const tdTugas = row.querySelector('td:nth-child(3)');

                const idlokasi = idlokasiInput ? idlokasiInput.value.trim() : '';
                const idkategoritugas = idkategoritugasInput ? idkategoritugasInput.value.trim() : '';
                const namalokasi = tdLokasi ? tdLokasi.textContent.trim() : '';
                const namaTugas = tdTugas ? tdTugas.textContent.trim() : '';
                const dtTugas = dtTugasInput ? dtTugasInput.value.trim() : '';
                const readonlyAttr = isDisabled ? 'readonly' : '';
                const disabledAttr = isDisabled ? 'disabled' : '';

                if (!idlokasi || !idkategoritugas || !namalokasi || !namaTugas || !dtTugas) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Data Belum Lengkap',
                        text: `Mohon lengkapi isian Tujuan, Jenis Tugas dan Detail Tugas terlebih dahulu!`,
                        confirmButtonColor: '#3085d6'
                    });
                    isValid = false;
                    return; // hentikan perulangan ini (tapi forEach tetap lanjut)
                }

                if (!isValid) {
                    // Kalau validasi gagal, jangan lanjut simpan
                    return;
                }


                const idDtTrsPengiriman = '';
                const isactive = '1'; // Default isactive value
                const type = 'n'; // Default type

                const newRow = `
                        <tr style="background-color: white;">
                            <td style="border: 1px solid #d3d3d3;" class="text-center">
                                <input type="checkbox" class="hapus-checkbox" name="hapus_baris[]" data-id="${idDtTrsPengiriman}" ${disabledAttr}>
                            </td>
                            <td style="border: 1px solid #d3d3d3;" class="text-center nomor-urut">${index + 1}</td>
                            <td hidden class="id-trs">
                                <input type="hidden" name="id[]">
                                <input type="hidden" name="id_trs_pengiriman[]" value="${idTrsPengiriman}">
                                <input type="hidden" name="id_dt_trs_pengiriman[]" value="">
                                <input type="hidden" name="isactive[]" value="${isactive}">
                            </td>
                            <td style="border: 1px solid #d3d3d3;">${namalokasi}<input type="hidden" name="tujuan[]" value="${namalokasi}"></td>
                            <td style="border: 1px solid #d3d3d3;">${namaTugas}<input type="hidden" name="jenis_tugas[]" value="${namaTugas}"></td>
                            <td style="border: 1px solid #d3d3d3;"><input type="text" name="dt_tugas[]" class="form-control" value="${dtTugas}" ${readonlyAttr}></td>
                            <td style="border: 1px solid #d3d3d3;"><input type="text" name="pic[]" class="form-control" value="" ${readonlyAttr}></td>
                            <td style="border: 1px solid #d3d3d3;"><input type="time" name="masuk[]" class="form-control" value="" ${readonlyAttr}></td>
                            <td style="border: 1px solid #d3d3d3;"><input type="time" name="keluar[]" class="form-control" value=""  ${readonlyAttr}></td>
                            <td style="border: 1px solid #d3d3d3;"><input type="text" name="narahubung[]" class="form-control" value=""  ${readonlyAttr}></td>
                            <td style="border: 1px solid #d3d3d3;">
                               <div class="d-flex flex-column">
                                    <select class="form-select form-select-sm mb-1" onchange="toggleKeteranganText(this); updateKeteranganText(this)" ${disabledAttr}>
                                        <option value="">-- Pilih status --</option>
                                        <option value="selesai">Selesai</option>
                                        <option value="tertunda">Tertunda</option>
                                    </select>
                                    <input type="text" name="keterangan[]" class="form-control form-control-sm keterangan-input" style="display: none;" ${readonlyAttr}>
                                </div>
                            </td>
                            <td>
                                <input type="hidden" name="type[]" value="${type}">  <!-- 'n' sebagai default -->
                            </td>
                        </tr>
                    `;

                // Struktur Card Mobile
                const newCard = `
                        <div class="col-12 col-md-6">
                        <div class="card mb-3 card-tugas" style="background-color: white;">
                            <div class="card-body">
                                <div class="card-title d-flex justify-content-between align-items-center" data-bs-toggle="collapse"
                                    data-bs-target="#collapseDetail${idTrsPengiriman}" aria-expanded="false" aria-controls="collapseDetail${idTrsPengiriman}">
                                    <span>Lihat Detail Penjadwalan</span>
                                    <i class="fa fa-sort-desc"></i>
                                </div>

                                <div class="card-text">
                                    <div class="row">
                                        <div class="col-4">
                                            <label>Tujuan:</label>
                                        </div>
                                        <div class="col-8">
                                            <p>: ${namalokasi}<input type="hidden" name="tujuan[]" value="${namalokasi}"></p>
                                        </div>
                                    </div>
                                </div>

                                <div class="card-text">
                                    <div class="row">
                                        <div class="col-4">
                                            <label>Jenis Tugas:</label>
                                        </div>
                                        <div class="col-8">
                                            <p>: ${namaTugas}<input type="hidden" name="jenis_tugas[]" value="${namaTugas}"></p>
                                        </div>
                                    </div>
                                </div>

                                <input type="hidden" name="id[]">
                                <input type="hidden" name="id_trs_pengiriman[]" value="${idTrsPengiriman}">
                                <input type="hidden" name="id_dt_trs_pengiriman[]" value="">

                                <div class="collapse" id="collapseDetail${idTrsPengiriman}">

                                    <div class="mb-2">
                                        <label class="form-label"><strong>Detail Tugas :</strong></label>
                                        <input type="text" name="dt_tugas[]" class="form-control form-control-sm" value="${dtTugas}">
                                    </div>

                                    <div class="mb-2">
                                        <label class="form-label"><strong>PIC :</strong></label>
                                        <input type="text" name="pic[]" class="form-control form-control-sm" value="">
                                    </div>

                                    <div class="mb-2">
                                        <label class="form-label"><strong>Masuk :</strong></label>
                                        <input type="time" name="masuk[]" class="form-control form-control-sm" value="">
                                    </div>

                                    <div class="mb-2">
                                        <label class="form-label"><strong>Keluar :</strong></label>
                                        <input type="time" name="keluar[]" class="form-control form-control-sm" value="">
                                    </div>

                                    <div class="mb-2">
                                        <label class="form-label"><strong>Yang Ditemui :</strong></label>
                                        <input type="text" name="narahubung[]" class="form-control form-control-sm" value="">
                                    </div>

                                    <div class="mb-2">
                                        <label class="form-label"><strong>Keterangan :</strong></label>
                                        <select class="form-select form-control-sm" name="keterangan[]" onchange="toggleKeteranganDynamic(this); cekSebelumSelesai(this)">
                                            <option value="">-- Pilih status --</option>
                                            <option value="selesai">Selesai</option>
                                            <option value="tertunda">Tertunda</option>
                                        </select>
                                    </div>

                                    <div class="mb-2 keterangan-input" style="display: none;">
                                        <input type="text" name="keterangan[]" class="form-control form-control-sm" placeholder="Alasan tertunda">
                                    </div>
                                </div>
                                <input type="hidden" name="type[]" value="${type}">

                                <div class="form-check ps-4.5">
                                    <input type="checkbox" class="form-check-input hapus-checkbox" name="hapus_baris[]"
                                        data-id="${idTrsPengiriman}">
                                    <label class="form-check-label">Pilih untuk membatalkan tugas</label>
                                </div>
                            </div>
                        </div>
                    </div>
                `;

                console.log('isDisabled:', isDisabled);

                console.log('Data tabel', newRow);
                document.querySelector('#trs_detail_pengiriman tbody').insertAdjacentHTML('beforeend',
                    newRow);
                // Ambil elemen baris terakhir (yang baru ditambahkan)
                const lastRow = document.querySelector('#trs_detail_pengiriman tbody tr:last-child');
                // Pasang validasi waktu untuk baris baru
                attachTimeValidation(lastRow);

                // Insert card mobile
                const cardContainer = document.querySelector('#trs_detail_pengiriman .row');
                cardContainer.insertAdjacentHTML('beforeend', newCard);
                // Ambil elemen baris terakhir (yang baru ditambahkan)
                const lastCard = cardContainer.lastElementChild;
                // Pasang validasi waktu untuk baris baru
                attachTimeValidationCard(lastCard);
            });

            // Kosongkan isi modal dan tutup
            document.getElementById('tableBodyTujuan').innerHTML = '';
            $('#modalTambahTujuan').modal('hide');

            updateNomorUrut();
            // Panggil fungsi untuk memeriksa baris tabel
            checkTableRows();

            updateDisableState();
        });

        function updateDisableState() {
            const keluarPukul = document.getElementById('keluar_pukul').value.trim();
            const odometerKeluar = document.getElementById('odometer_keluar').value.trim();
            const isDisabled = !(keluarPukul && odometerKeluar);

            // Lakukan hal serupa untuk card mobile jika perlu
            document.querySelectorAll('#trs_detail_pengiriman .row').forEach(card => {
                card.querySelectorAll('input, select').forEach(el => {
                    if (isDisabled) {
                        if (el.tagName === 'SELECT' || el.type === 'checkbox') {
                            el.setAttribute('disabled', 'disabled');
                        } else {
                            el.setAttribute('readonly', 'readonly');
                        }
                    } else {
                        if (el.tagName === 'SELECT' || el.type === 'checkbox') {
                            el.removeAttribute('disabled');
                        } else {
                            el.removeAttribute('readonly');
                        }
                    }
                });

            });
        }

        // Pasang event listener untuk update setiap kali input keluar_pukul atau odometer_keluar berubah
        document.getElementById('keluar_pukul').addEventListener('input', updateDisableState);
        document.getElementById('odometer_keluar').addEventListener('input', updateDisableState);

        // Panggil sekali waktu load
        updateDisableState();


        function attachTimeValidation(row) {
            const inputMasuk = row.querySelector('input[name="masuk[]"]');
            const inputKeluar = row.querySelector('input[name="keluar[]"]');

            if (inputMasuk && inputKeluar) {
                inputKeluar.addEventListener('change', function() {
                    const masukValue = inputMasuk.value;
                    const keluarValue = inputKeluar.value;

                    if (!masukValue) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Waktu Masuk Belum Diisi',
                            text: 'Silakan isi waktu masuk terlebih dahulu sebelum mengisi waktu keluar.',
                        });
                        inputKeluar.value = '';
                        return;
                    }

                    if (keluarValue < masukValue) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Waktu Tidak Valid',
                            text: 'Waktu keluar tidak boleh kurang dari waktu masuk.',
                        });
                        inputKeluar.value = '';
                    }
                });
            }
        }

        function attachTimeValidationCard(card) {
            const inputMasuk = card.querySelector('input[name="masuk[]"]');
            const inputKeluar = card.querySelector('input[name="keluar[]"]');

            if (inputMasuk && inputKeluar) {
                inputKeluar.addEventListener('change', function() {
                    const masukValue = inputMasuk.value;
                    const keluarValue = inputKeluar.value;

                    if (!masukValue) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Waktu Masuk Belum Diisi',
                            text: 'Silakan isi waktu masuk terlebih dahulu sebelum mengisi waktu keluar.',
                        });
                        inputKeluar.value = '';
                        return;
                    }

                    if (keluarValue < masukValue) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Waktu Tidak Valid',
                            text: 'Waktu keluar tidak boleh kurang dari waktu masuk.',
                        });
                        inputKeluar.value = '';
                    }
                });
            }
        }

        function checkTableRows() {
            const rows = document.querySelectorAll('#trs_detail_pengiriman tbody tr');
            rows.forEach((row, index) => {
                const idTrsPengirimanInput = row.querySelector('input[name^="id_trs_pengiriman"]');
                if (idTrsPengirimanInput) {
                    console.log(`Baris ${index + 1}: ID Transaksi Pengiriman = ${idTrsPengirimanInput.value}`);
                } else {
                    console.warn(`Baris ${index + 1}: ID Transaksi Pengiriman TIDAK DITEMUKAN!`);
                }
            });
        }

        function toggleKeteranganText(selectEl) {
            const row = selectEl.closest('tr');
            const inputEl = row.querySelector('.keterangan-input');
            const masuk = row.querySelector("input[name='masuk[]']")?.value.trim();
            const keluar = row.querySelector("input[name='keluar[]']")?.value.trim();

            if (selectEl.value === 'tertunda') {
                if (!masuk || !keluar) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Waktu Belum Diisi!',
                        text: 'Harap lengkapi waktu masuk dan keluar sebelum memilih "Tertunda".',
                        confirmButtonColor: '#3085d6',
                    });

                    // Reset pilihan dan sembunyikan input
                    selectEl.value = '';
                    inputEl.style.display = 'none';
                    inputEl.value = '';
                    return;
                }

                inputEl.style.display = 'block';
            } else {
                inputEl.style.display = 'none';
                inputEl.value = ''; // kosongkan saat pilih "selesai" atau tidak pilih
            }
        }

        function toggleKeteranganDynamic(selectElement) {
            const container = selectElement.closest('.collapse');
            const keteranganDiv = container.querySelector('.keterangan-input');
            const keteranganInput = keteranganDiv.querySelector("input[name='keterangan[]']");
            const masuk = container.querySelector("input[name='masuk[]']")?.value.trim();
            const keluar = container.querySelector("input[name='keluar[]']")?.value.trim();

            if (selectElement.value === 'tertunda') {
                if (!masuk || !keluar) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Waktu Belum Diisi!',
                        text: 'Harap lengkapi waktu masuk dan keluar sebelum memilih "Tertunda".',
                        confirmButtonColor: '#3085d6',
                    });

                    // Reset pilihan dan sembunyikan input
                    selectElement.value = '';
                    keteranganDiv.style.display = 'none';
                    keteranganInput.value = '';
                    return;
                }

                // Kalau sudah lengkap waktu, tampilkan input keterangan
                keteranganDiv.style.display = 'block';
            } else {
                // Kalau pilihan selain "tertunda", sembunyikan dan kosongkan input keterangan
                keteranganDiv.style.display = 'none';
                keteranganInput.value = '';
            }
        }


        // Fungsi untuk mengumpulkan data dari tabel
        function collectTableData() {
            const rows = document.querySelectorAll('#trs_detail_pengiriman tbody tr');
            const data = [];

            rows.forEach((row) => {
                const idInput = row.querySelector('input[name="id_dt_trs_pengiriman[]"]');
                const id = idInput ? idInput.value : null;

                const isactiveInput = row.querySelector('input[name="isactive[]"]');
                const isactive = isactiveInput ? isactiveInput.value : '1';

                const dtTugasInput = row.querySelector('input[name^="dt_tugas"]');
                const dt_tugas = dtTugasInput ? dtTugasInput.value : '';

                const tujuan = row.querySelector('td:nth-child(3)').textContent.trim();
                const jenisTugas = row.querySelector('td:nth-child(4)').textContent.trim();
                const narahubung = row.querySelector('input[name^="narahubung"]').value;
                const masuk = row.querySelector('input[name^="masuk"]').value;
                const keluar = row.querySelector('input[name^="keluar"]').value;
                const pic = row.querySelector('input[name^="pic"]').value;
                const selectEl = row.querySelector('select');
                const inputEl = row.querySelector('input[name^="keterangan"]');
                let keterangan = '';
                let inputValue = inputEl ? inputEl.value.trim() : '';

                // Hapus status awalan jika sudah ada di dalam input
                inputValue = inputValue.replace(/^(dibatalkan|tertunda|selesai)\s*-\s*/i, '');

                if (statusValue === 'selesai') {
                    keterangan = 'selesai';
                } else {
                    keterangan = statusValue + (inputValue ? ' - ' + inputValue : '');
                }

                data.push({
                    id_dt_trs_pengiriman: id,
                    isactive: isactive,
                    tujuan: tujuan,
                    jenisTugas: jenisTugas,
                    narahubung: narahubung,
                    masuk: masuk,
                    keluar: keluar,
                    pic: pic,
                    dt_tugas: dt_tugas,
                    keterangan: keterangan
                });
            });

            return data;
        }

        function getNamaLokasi(id) {
            const select = document.querySelector('select[name="idlokasi[]"]');
            const option = select.querySelector(`option[value="${id}"]`);
            return option ? option.textContent : "Tidak diketahui";
        }

        function getNamaJenisTugas(id) {
            const select = document.querySelector('select[name="idkategoritugas[]"]');
            const option = select.querySelector(`option[value="${id}"]`);
            return option ? option.textContent : "Tidak diketahui";
        }

        // Update nomor urut
        function updateNomorUrut() {
            const rows = document.querySelectorAll('#trs_detail_pengiriman tbody tr');
            rows.forEach((row, index) => {
                const nomorUrutCell = row.querySelector('.nomor-urut');
                if (nomorUrutCell) {
                    nomorUrutCell.textContent = index + 1;
                }
            });
        }

        function updateIdDtTrsPengiriman() {
            const inputs = document.querySelectorAll('input[name="id_dt_trs_pengiriman[]"]');
            inputs.forEach((input, index) => {
                input.value = index + 1;
            });
        }

        $('#selectNoPlat').on('change', function () {
            if ($(this).val() === 'manual') {
                $('#inputManualNoPlat').removeClass('d-none');
            } else {
                $('#inputManualNoPlat').addClass('d-none');
                $('#inputManualNoPlat').val(''); // Optional: reset input manual
            }
        });


        function collectHeaderData() {
            const idTrsPengiriman = $('input[name="id_trs_pengiriman"]').val();
            const namakurir = $('input[name="nama_kurir"]').val();
            const hari = $('input[name="hari"]').val();
            const tanggal = $('input[name="tanggal"]').val();
            const keluarPukul = $('input[name="keluar_pukul"]').val();
            const odometerKeluar = $('input[name="odometer_keluar"]').val();
            const masukPukul = $('input[name="masuk_pukul"]').val();
            const odometerMasuk = $('input[name="odometer_masuk"]').val();
            const description = $('#description').val();

            const selectedOption = $('#selectNoPlat option:selected');
            const selectedValue = selectedOption.val();

            let idKendaraan = null;
            let nomorKendaraan = '';

            if (selectedValue === '999') {
                idKendaraan = 999;
                nomorKendaraan = $('#inputManualNoPlat').val();
            } else {
                idKendaraan = selectedValue;
                nomorKendaraan = selectedOption.data('nomor');
            }

            return {
                id_trs_pengiriman: idTrsPengiriman,
                nama_kurir: namakurir,
                hari: hari,
                tanggal: tanggal,
                id_kendaraan: idKendaraan,
                no_pol: nomorKendaraan,
                keluar_pukul: keluarPukul,
                odometer_keluar: odometerKeluar,
                masuk_pukul: masukPukul,
                odometer_masuk: odometerMasuk,
                description: description,
            };
        }


        function cleanTertundaPrefix(text) {
            return text.replace(/^tertunda\s*(-\s*)?/i, '').trim();
        }

        function collectTableData() {
            const rows = document.querySelectorAll('#trs_detail_pengiriman tbody tr');
            const data = [];

            rows.forEach((row) => {
                const idInput = row.querySelector('input[name="id_dt_trs_pengiriman[]"]');
                const id = idInput ? idInput.value : null;

                const tujuanInput = row.querySelector('input[name="tujuan[]"]');
                const tujuan = tujuanInput ? tujuanInput.value : row.querySelector('td:nth-child(3)').textContent
                    .trim();

                const jenisTugasInput = row.querySelector('input[name="jenis_tugas[]"]');
                const jenisTugas = jenisTugasInput ? jenisTugasInput.value : row.querySelector('td:nth-child(4)')
                    .textContent.trim();

                const dtTugasInput = row.querySelector('input[name^="dt_tugas"]');
                const dt_tugas = dtTugasInput ? dtTugasInput.value : '';

                const narahubung = row.querySelector('input[name^="narahubung"]').value;
                const masuk = row.querySelector('input[name^="masuk"]').value;
                const keluar = row.querySelector('input[name^="keluar"]').value;
                const pic = row.querySelector('input[name^="pic"]').value;
                // Ambil type (input tersembunyi)
                const type = row.querySelector('input[name="type[]"]') ? row.querySelector('input[name="type[]"]')
                    .value : 'reguler';
                const selectEl = row.querySelector('select');
                const inputEl = row.querySelector('input[name^="keterangan"]');
                const inputVal = inputEl?.value.trim() || '';
                let keterangan = '';
                if (selectEl && selectEl.value !== '') {
                    if (selectEl.value === 'selesai') {
                        keterangan = 'selesai';
                    } else if (selectEl.value === 'tertunda') {
                        const cleaned = cleanTertundaPrefix(inputVal); // bersihkan "tertunda - " dulu
                        keterangan = cleaned ? `tertunda - ${cleaned}` : 'tertunda';
                    } else if (inputVal) {
                        // untuk selain selesai/tertunda yang masih bisa isi manual
                        keterangan = inputVal;
                    }
                } else if (inputEl && inputEl.value.trim() !== '') {
                    keterangan = inputEl.value.trim(); // jika select kosong tapi input ada
                }

                const isactiveInput = row.querySelector('input[name="isactive[]"]');
                const isactive = isactiveInput ? isactiveInput.value : '1';

                data.push({
                    id_dt_trs_pengiriman: id,
                    tujuan: tujuan,
                    jenisTugas: jenisTugas,
                    narahubung: narahubung,
                    masuk: masuk,
                    keluar: keluar,
                    pic: pic,
                    dt_tugas: dt_tugas,
                    keterangan: keterangan,
                    type: type,
                    isactive: isactive
                });
            });

            console.log(`Data baris ke-:`, data);

            return data;
        }

        function collectTableDataMobile() {
            const cards = document.querySelectorAll('#trs_detail_pengiriman .card');
            const data = [];

            cards.forEach((card) => {
                const idInput = card.querySelector('input[name="id_dt_trs_pengiriman[]"]');
                const id = idInput ? idInput.value : null;

                const tujuanInput = card.querySelector('input[name="tujuan[]"]');
                const tujuan = tujuanInput ? tujuanInput.value : '';

                const jenisTugasInput = card.querySelector('input[name="jenis_tugas[]"]');
                const jenisTugas = jenisTugasInput ? jenisTugasInput.value : '';

                const narahubungInput = card.querySelector('input[name^="narahubung"]');
                const narahubung = narahubungInput ? narahubungInput.value : '';

                const masukInput = card.querySelector('input[name^="masuk"]');
                const masuk = masukInput ? masukInput.value : '';

                const keluarInput = card.querySelector('input[name^="keluar"]');
                const keluar = keluarInput ? keluarInput.value : '';

                const picInput = card.querySelector('input[name^="pic"]');
                const pic = picInput ? picInput.value : '';

                const dtTugasInput = card.querySelector('input[name^="dt_tugas"]');
                const dt_tugas = dtTugasInput ? dtTugasInput.value : '';

                // Ambil type (input tersembunyi)
                const type = card.querySelector('input[name="type[]"]') ? card.querySelector('input[name="type[]"]')
                    .value : 'reguler';


                const selectEl = card.querySelector(
                    'select[name="keterangan[]"]'); // Anggap ada select dengan name "status[]"
                const inputEl = card.querySelector('input[name^="keterangan"]');
                const inputVal = inputEl?.value.trim() || '';
                let keterangan = '';

                if (selectEl && selectEl.value !== '') {
                    if (selectEl.value === 'selesai') {
                        keterangan = 'selesai';
                    } else if (selectEl.value === 'tertunda') {
                        const cleaned = cleanTertundaPrefix(inputVal); // bersihkan "tertunda - " dulu
                        keterangan = cleaned ? `tertunda - ${cleaned}` : 'tertunda';
                    } else if (inputVal) {
                        // untuk selain selesai/tertunda yang masih bisa isi manual
                        keterangan = inputVal;
                    }
                } else if (inputEl && inputEl.value.trim() !== '') {
                    keterangan = inputEl.value.trim(); // jika select kosong tapi input ada
                }

                const isactiveInput = card.querySelector('input[name="isactive[]"]');
                const isactive = isactiveInput ? isactiveInput.value : '1'

                data.push({
                    id_dt_trs_pengiriman: id,
                    tujuan: tujuan,
                    jenisTugas: jenisTugas,
                    narahubung: narahubung,
                    masuk: masuk,
                    keluar: keluar,
                    pic: pic,
                    dt_tugas: dt_tugas,
                    type: type,
                    keterangan: keterangan,
                    isactive: isactive
                });
            });

            console.log(`Data baris mobile ke-:`, data);

            return data;
        }

        function getBase64(file) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.onload = () => resolve(reader.result);
                reader.onerror = error => reject(error);
                reader.readAsDataURL(file);
            });
        }

        function collectImages() {
            const files = images.map(img => img.file);
            console.log("Files selected:", files);

            const promises = [];

            for (let i = 0; i < files.length; i++) {
                if (files[i] instanceof Blob) { // pastikan ini file/blobs
                    promises.push(getBase64(files[i]));
                } else {
                    console.warn("Item ke-" + i + " bukan file:", files[i]);
                }
            }

            return Promise.all(promises);
        }


        function saveData() {
            // Disable the save button
            const saveButton = document.getElementById('{{ $dmenu }}-form');
            saveButton.disabled = true;
            
            // Show loading SweetAlert
            Swal.fire({
                title: 'Menyimpan Data',
                html: 'Sedang memproses data, harap tunggu...',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });
            collectImages().then(imagesBase64 => {
                // Setelah imagesBase64 selesai didapat, lanjut proses simpan
                const header = collectHeaderData();

                let details, cancelledDetails;
                if (window.innerWidth < 576) {
                    details = collectTableDataMobile();
                    cancelledDetails = collectCancelTableDataMobile();
                } else {
                    details = collectTableData();
                    cancelledDetails = collectCancelTableData();
                }

                $.ajax({
                    url: "{{ URL::to('/') }}/trkrr/update-data",
                    type: 'POST',
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    },
                    data: {
                        header: header,
                        details: details,
                        cancelledDetails: cancelledDetails,
                        imagesBase64: imagesBase64,
                        imagesToDelete: imagesToDelete, // Kirim base64 images ke backend
                    },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Berhasil',
                                text: 'Data berhasil disimpan.',
                            }).then(() => {
                                window.location.href = "{{ URL::to('/') }}/trkrr";
                            });
                        } else {
                            // Re-enable the save button on error
                            saveButton.disabled = false;
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: response.message || 'Gagal menyimpan data.',
                            });
                        }
                    },
                    error: function(error) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Terjadi kesalahan saat menyimpan data.',
                        });
                    }
                });
            }).catch(err => {
                console.error('Error mengkonversi gambar ke base64:', err);
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Gagal memproses gambar.',
                });
            });
        }
    </script>
@endsection