@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@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 back --}}
                        <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</button>
                        {{-- check authorize add --}}
                        @if ($authorize->add == '1')
                            {{-- button save --}}
                            <button class="btn btn-primary mb-0 input" data-shortcut="save confirm"><i
                                    class="fas fa-floppy-disk me-1"> </i><span class="font-weight-bold">Simpan</button>
                        @endif
                        <input type="hidden" value="{{ $userinfo->lastname }}" name="userinfo" id="userinfo">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>

    {{-- form filter --}}
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <p class="text-uppercase text-sm">Edit Daily Activity - {{ $daily->itname }}</p>
                        <hr class="horizontal dark mt-0">
                        <div class="row">
                            <div class="col-md-6">
                                <form role="form" method="POST" action="{{ URL::to($url_menu . '/' . $idencrypt) }}"
                                    id="dailya-form" enctype="multipart/form-data">
                                    @csrf
                                    @method('PUT')
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="d-flex align-items-center">
                                                <label for="inputdate" class="form-label me-2"
                                                    style="min-width: 150px;">ID</label>
                                                <small class="form-text text-muted"></small>
                                                <input type="text" class="form-control" id="did" name="did"
                                                    value="{{ $daily->id }}" disabled>
                                            </div>
                                            <p></p>
                                            <div class="d-flex align-items-center">
                                                <label for="inputdate" class="form-label me-2"
                                                    style="min-width: 150px;">Date</label>
                                                <small class="form-text text-muted"></small>
                                                <input type="date" class="form-control" id="ddate" name="ddate"
                                                    value="{{ $daily->date }}" readonly>
                                            </div>
                                            <p></p>
                                            <div class="d-flex align-items-center">
                                                <label for="inputdate" class="form-label me-2"
                                                    style="min-width: 150px;">Keterangan <code> *</code></label>
                                                <input type="text" class="form-control" id="dket" name="dket"
                                                    maxlength="50" required oninput="countChars(this)" value="{{ old('ket', $daily->ket) }}">

                                            </div>
                                            <p></p>
                                            <div class="d-flex align-items-center">
                                                <label for="inputdate" class="form-label me-2"
                                                    style="min-width: 150px;">Detail Pengerjaan</label>
                                                <textarea class="form-control" id="dpengerjaan" name="dpengerjaan">{{ old('pengerjaan', $daily->pengerjaan) }}</textarea>
                                            </div>
                                            <p></p>



                                            <div class="d-flex align-items-center">
                                                <label for="inputCust" class="form-label me-2"
                                                    style="min-width: 150px;">Kategori <code> *</code></label>
                                                <input type="hidden" id="dkategori" name="dkategori" class="form-control"
                                                    value="{{ old('kategori', $daily->kategori) }}" required>
                                                <input type="hidden" id="ddetkat" name="ddetkat" class="form-control"
                                                    value="{{ old('detkat', $daily->detkat) }}" required>

                                                <div class="flex flex-col mb-2 input-group">
                                                    <input id="ddetkatname" name="ddetkatname" class="form-control"
                                                        value="{{ old('detkat', $daily->katname) }} - {{ old('detkat', $daily->detkatname) }}"
                                                        required readonly>

                                                    <span class="input-group-text bg-primary text-light"
                                                        style="border-color:#d2d6da; border-left:3px solid #d2d6da; cursor: pointer;"
                                                        data-bs-toggle="modal" data-bs-target="#modalKategori">
                                                        <i class="fas fa-search"></i>
                                                    </span>
                                                </div>
                                            </div>

                                            {{-- Modal Kategori --}}
                                            <div class="modal fade bd-example-modal-lg" id="modalKategori" tabindex="-1"
                                                aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                <div class="modal-dialog modal-dialog-centered modal-lg">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="exampleModalLabel">List Kategori
                                                            </h5>
                                                            <button type="button" class="btn-close"
                                                                data-bs-dismiss="modal" aria-label="Close"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div id="tableModalWrapper" class="table-responsive">
                                                                <h5 class="font-weight-bolder"></h5>
                                                                <table id="tableKategori"
                                                                    class="table table-bordered table-striped">
                                                                    <thead style="background-color: #daecff;">
                                                                        <tr>
                                                                            <th>Action</th>
                                                                            <th>Id</th>
                                                                            <th>Kategori</th>
                                                                            <th>Detail Kategori</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody id="kategori-list">
                                                                        @foreach ($kategori as $kat)
                                                                            <!-- Baris customer dengan data kategori -->
                                                                            <tr>
                                                                                <td>
                                                                                    <!-- Tombol untuk memilih customer -->
                                                                                    <span class="btn badge bg-primary"
                                                                                        onclick="select_kategori('{{ $kat->id }}', '{{ $kat->detail }}', '{{ $kat->kategoriname }}', '{{ $kat->kategori }}')">
                                                                                        <i
                                                                                            class="bi bi-check-circle me-1"></i>
                                                                                        Select
                                                                                    </span>
                                                                                </td>
                                                                                <td>{{ $kat->id }}</td>
                                                                                <td>{{ $kat->kategoriname }}</td>

                                                                                <td>{{ $kat->detail }}</td>
                                                                            </tr>
                                                                        @endforeach
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-secondary"
                                                                data-bs-dismiss="modal">Close</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <p></p>

                                            {{-- Req By (HANYA DI ROLES INTERNSHIP) --}}
                                            @if ($userinfo->lastname == 'IN')
                                                <div class="d-flex align-items-center">
                                                    <label for="inputCust" class="form-label me-2"
                                                        style="min-width: 150px;">Request By<code> *</code></label>
                                                    <input type="hidden" id="dreqby" name="dreqby"
                                                        class="form-control" value="{{ old('reqby', $daily->reqby) }}"
                                                        required>

                                                    <div class="flex flex-col mb-2 input-group">
                                                        <input id="dreqbyname" name="dreqbyname" class="form-control"
                                                            value="{{ $daily->reqname }}" required readonly>
                                                        <span class="input-group-text bg-primary text-light"
                                                            style="border-color:#d2d6da; border-left:3px solid #d2d6da; cursor: pointer;"
                                                            data-bs-toggle="modal" data-bs-target="#modalReqby">
                                                            <i class="fas fa-search"></i>
                                                        </span>
                                                    </div>
                                                </div>

                                                {{-- Modal User MIS --}}
                                                <div class="modal fade bd-example-modal-lg" id="modalReqby"
                                                    tabindex="-1" aria-labelledby="exampleModalLabel"
                                                    aria-hidden="true">
                                                    <div class="modal-dialog modal-dialog-centered modal-lg">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h5 class="modal-title" id="exampleModalLabel">List User
                                                                    MIS
                                                                </h5>
                                                                <button type="button" class="btn-close"
                                                                    data-bs-dismiss="modal" aria-label="Close"></button>
                                                            </div>
                                                            <div class="modal-body">
                                                                <div id="tableModalWrapper" class="table-responsive">
                                                                    <h5 class="font-weight-bolder"></h5>
                                                                    <table id="tableReqby"
                                                                        class="table table-bordered table-striped">
                                                                        <thead style="background-color: #daecff;">
                                                                            <tr>
                                                                                <th>Action</th>
                                                                                <th>NIK</th>
                                                                                <th>Username</th>
                                                                                <th>Nama</th>

                                                                            </tr>
                                                                        </thead>
                                                                        <tbody id="kategori-list">
                                                                            @foreach ($reqby as $req)
                                                                                <!-- Baris customer dengan data kategori -->
                                                                                <tr>
                                                                                    <td>
                                                                                        <!-- Tombol untuk memilih customer -->
                                                                                        <span class="btn badge bg-primary"
                                                                                            onclick="select_reqby('{{ $req->nik }}', '{{ $req->nama }}', '{{ $req->uname }}')">
                                                                                            <i
                                                                                                class="bi bi-check-circle me-1"></i>
                                                                                            Select
                                                                                        </span>
                                                                                    </td>
                                                                                    <td>{{ $req->nik }}</td>
                                                                                    <td>{{ $req->uname }}</td>

                                                                                    <td>{{ $req->nama }}</td>


                                                                                </tr>
                                                                            @endforeach
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-secondary"
                                                                    data-bs-dismiss="modal">Close</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @else
                                                {{-- selain inship: biarkan kosong (hidden opsional) --}}
                                                <input type="hidden" name="dreqby" id="dreqby" value="">
                                                <input type="hidden" name="dapprove" id="dapprove" value="1">
                                            @endif
                                            <p></p>

                                            <div class="d-flex align-items-center">
                                                <label for="inputCust" class="form-label me-2"
                                                    style="min-width: 150px;">User - Dept<code> *</code></label>
                                                <input type="hidden" id="duser" name="duser" class="form-control"
                                                    value="{{ old('user', $daily->user) }}">
                                                <input type="hidden" class="form-control" id="ddept" name="ddept"
                                                    value="{{ old('dept', $daily->dept) }}">
                                                <div class="flex flex-col mb-2 input-group">
                                                    <input id="dusername" name="dusername" class="form-control"
                                                        value="{{ old('user', $daily->username) }} - {{ old('dept', $daily->deptname) }}"
                                                        required readonly>
                                                    <span class="input-group-text bg-primary text-light"
                                                        style="border-color:#d2d6da; border-left:3px solid #d2d6da; cursor: pointer;"
                                                        data-bs-toggle="modal" data-bs-target="#modalUser">
                                                        <i class="fas fa-search"></i>
                                                    </span>

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

                                            {{-- Modal User --}}
                                            <div class="modal fade bd-example-modal-lg" id="modalUser" tabindex="-1"
                                                aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                <div class="modal-dialog modal-dialog-centered modal-lg">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="exampleModalLabel">List user
                                                            </h5>
                                                            <button type="button" class="btn-close"
                                                                data-bs-dismiss="modal" aria-label="Close"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div id="tableModalWrapper" class="table-responsive">
                                                                <h5 class="font-weight-bolder"></h5>
                                                                <table id="tableUser"
                                                                    class="table table-bordered table-striped">
                                                                    <thead style="background-color: #daecff;">
                                                                        <tr>
                                                                            <th>Action</th>
                                                                            <th>Id</th>
                                                                            <th>Kategori</th>
                                                                            <th>Detail Kategori</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody id="kategori-list">
                                                                        @foreach ($users as $user)
                                                                            <!-- Baris customer dengan data kategori -->
                                                                            <tr>
                                                                                <td>
                                                                                    @if ($user->isactive == '1')
                                                                                        <!-- Tombol untuk memilih customer -->
                                                                                        <span class="btn badge bg-primary"
                                                                                            onclick="select_user('{{ $user->nik }}', '{{ $user->nama }}' , '{{ $user->id_departemen }}', '{{ $user->namedept }}')">
                                                                                            <i
                                                                                                class="bi bi-check-circle me-1"></i>
                                                                                            Select
                                                                                        </span>
                                                                                    @else
                                                                                        <span class="btn badge bg-danger">
                                                                                            <i
                                                                                                class="bi bi-check-circle me-1"></i>
                                                                                            Not Active
                                                                                        </span>
                                                                                    @endif
                                                                                </td>
                                                                                <td>{{ $user->nik }}</td>
                                                                                <td>{{ $user->nama }}</td>
                                                                                <td>{{ $user->namedept }}</td>
                                                                            </tr>
                                                                        @endforeach
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-secondary"
                                                                data-bs-dismiss="modal">Close</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            {{-- <p></p> --}}

                                            {{-- <div class="d-flex align-items-center">
                                                <label for="inputdate" class="form-label me-2"
                                                    style="min-width: 150px;">Departemen <code> *</code></label>
                                                <small class="form-text text-muted"></small>
                                                <input type="hidden" class="form-control" id="ddept" name="ddept"
                                                    value="{{ old('dept', $daily->dept) }}">
                                                <input type="text" class="form-control" id="ddeptname"
                                                    name="ddeptname" value="{{ old('dept', $daily->deptname) }}"
                                                    disabled>
                                            </div> --}}
                                        </div>
                                    </div>

                            </div>

                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <div class="d-flex align-items-center">
                                                <label for="inputdate" class="form-label me-2"
                                                    style="min-width: 150px;">Dampak <code> *</code></label>
                                                <small class="form-text text-muted"></small>


                                                <select class="form-select" id="ddampak" name="ddampak">

                                                    @foreach ($urgency as $u)
                                                        <option value="{{ $u->value }}"
                                                            {{ $daily->dampak == $u->value ? 'selected' : '' }}>
                                                            {{ $u->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <p></p>

                                            <div class="d-flex align-items-center">
                                                <label for="inputdate" class="form-label me-2"
                                                    style="min-width: 150px;">Urgency <code> *</code></label>
                                                <small class="form-text text-muted"></small>


                                                <select class="form-select" id="durgency" name="durgency">
                                                    <!-- Opsi default, tampil jika $typeform kosong atau tidak cocok dengan value di $types -->
                                                    <option value=""></option>
                                                    @foreach ($urgency as $u)
                                                        <option value="{{ $u->value }}"
                                                            {{ $daily->urgency == $u->value ? 'selected' : '' }}>
                                                            {{ $u->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <p></p>
                                            <div class="d-flex align-items-center">
                                                <label for="inputdate" class="form-label me-2"
                                                    style="min-width: 150px;">Start Pengerjaan</label>
                                                <small class="form-text text-muted"></small>
                                                @if ($userinfo->lastname == 'IN')
                                                    {{-- visible: pilih jam saja, name kosong supaya tidak ikut POST --}}
                                                    <input type="time" class="form-control" id="start"
                                                        value="{{ old('start') ? date('H:i', strtotime(old('start'))) : ($daily->start ? date('H:i', strtotime($daily->start)) : '') }}">
                                                    {{-- hidden: yang dikirim ke server --}}
                                                    <input type="hidden" id="start_full" name="start"
                                                        value="{{ old('start', $daily->start) }}">
                                                @else
                                                    <input type="datetime-local" class="form-control" id="start"
                                                        name="start" value="{{ old('start', $daily->start) }}">
                                                @endif
                                            </div>
                                            <p></p>
                                            <div class="d-flex align-items-center">
                                                <label for="inputdate" class="form-label me-2"
                                                    style="min-width: 150px;">Finish Pengerjaan</label>
                                                <small class="form-text text-muted"></small>
                                                @if ($userinfo->lastname == 'IN')
                                                    <input type="time" class="form-control" id="finish"
                                                        value="{{ old('finish') ? date('H:i', strtotime(old('finish'))) : ($daily->finish ? date('H:i', strtotime($daily->finish)) : '') }}">
                                                    <input type="hidden" id="finish_full" name="finish"
                                                        value="{{ old('finish', $daily->finish) }}">
                                                @else
                                                    <input type="datetime-local" class="form-control" id="finish"
                                                        name="finish" value="{{ old('finish', $daily->finish) }}">
                                                @endif
                                            </div>
                                            <p></p>
                                            <div class="d-flex align-items-center">
                                                <label for="inputdate" class="form-label me-2"
                                                    style="min-width: 150px;">Status <code> *</code></label>
                                                <small class="form-text text-muted"></small>


                                                <select class="form-select" id="dstatus" name="dstatus"
                                                    onchange="change_status">
                                                    <!-- Opsi default, tampil jika $typeform kosong atau tidak cocok dengan value di $types -->
                                                    <option value=""></option>
                                                    @foreach ($status as $s)
                                                        <option value="{{ $s->value }}"
                                                            {{ $daily->status == $s->value ? 'selected' : '' }}>
                                                            {{ $s->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <p></p>

                                            <p></p>
                                            <div class="d-flex align-items-center">
                                                <label for="inputdate" class="form-label me-2" style="min-width: 150px;">
                                                    Poin
                                                    <i class="fa fa-circle-info" tabindex="0" role="button"
                                                        data-bs-toggle="popover" data-bs-trigger="focus"
                                                        data-bs-html="true" data-bs-placement="right"
                                                        data-bs-title="Kategori Poin"
                                                        data-bs-content="
                                                        <div style='text-align: justify; max-width: 250px;'>
                                                           <ul style='padding-left: 20px; list-style-type: disc;'>
                                                                <li>&lt; 15 Menit Jam Kerja   : 0.1 poin</li>
                                                                <li>15 - 30 Menit Jam Kerja   : 0.2 poin</li>
                                                                <li>31 menit - 1 Jam Kerja    : 0.5 poin</li>
                                                                <li>>1 - 2 Jam Kerja           : 1 poin</li>
                                                                <li>>2 - 4 Jam Kerja           : 2 poin</li>
                                                                <li>>4 - 8 Jam Kerja           : 3 poin</li>
                                                                <li>>1 - 2 Hari Kerja          : 5 poin</li>
                                                                <li>>2 - 4 Hari Kerja          : 8 poin</li>
                                                                <li>>4 - 8 Hari Kerja          : 13 poin</li>
                                                                <li>&gt; 8 Hari Kerja    : 21 poin</li>
                                                            </ul>
                                                        </div>"
                                                        style="cursor: pointer; color: #3498db;">
                                                    </i>
                                                </label>
                                                <small class="form-text text-muted"></small>
                                                <input type="text" class="form-control" id="dpoin" name="dpoin"
                                                    value="{{ old('poin', $daily->poin) }}" readonly>
                                            </div>
                                            <p></p>

                                            <div class="d-flex align-items-center mb-2 position-relative"
                                                style="width: 300px;">
                                                <label class="form-label me-2" style="min-width: 150px;">Upload
                                                    Lampiran</label>

                                                <div class="position-relative" style="width: 300px;">
                                                    @if ($daily->dokumentasi)
                                                        <!-- Gambar Preview -->
                                                        <img src="{{ asset('storage/' . $daily->dokumentasi) }}"
                                                            id="previewImage" alt="Lampiran"
                                                            class="border-radius-lg shadow-sm"
                                                            style="width: 300px; aspect-ratio: 4 / 3; object-fit: cover;">

                                                        <!-- Tombol Edit (Pensil) -->
                                                        <label for="dimage"
                                                            class="btn btn-sm btn-primary position-absolute"
                                                            style="bottom: 10px; right: 10px; border-radius: 50%; padding: 6px 9px; cursor: pointer;">
                                                            <i class="fas fa-pen"></i>
                                                        </label>
                                                    @endif

                                                    <!-- Input File -->
                                                    <input type="file" id="dimage" name="dimage"
                                                        accept=".jpg,.jpeg,.png"
                                                        class="{{ $daily->dokumentasi ? 'd-none' : 'form-control' }}"
                                                        onchange="previewSelectedImage(this)">
                                                </div>

                                            </div>
                                            <div class="ms-160 mt-n2" style="margin-left: 165px;">
                                                <div class="form-text text-muted">
                                                    <span class="text-primary"> Maksimal Size: <b>3 MB</b> | Format
                                                        File:
                                                        <b>JPG, JPEG, PNG</b></span>
                                                </div>
                                            </div>

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


                            </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        function previewSelectedImage(input) {
            const file = input.files[0];
            if (!file) return;

            const maxSize = 3 * 1024 * 1024; // 3MB
            const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg'];

            if (!allowedTypes.includes(file.type)) {
                Swal.fire({
                    icon: 'error',
                    title: 'Format tidak didukung',
                    text: 'Gunakan file JPG, JPEG, atau PNG.',
                }).then(() => {
                    input.value = '';
                });
                return;
            }

            if (file.size > maxSize) {
                Swal.fire({
                    icon: 'error',
                    title: 'Ukuran File Terlalu Besar',
                    text: 'Ukuran maksimal adalah 3MB.',
                }).then(() => {
                    input.value = ''; // reset agar tidak disimpan
                });
                return;
            }

            // ✅ Preview hanya jika lolos validasi
            const reader = new FileReader();
            reader.onload = function(e) {
                const img = document.getElementById('previewImage');
                if (img) {
                    img.src = e.target.result;
                    img.classList.remove('d-none');
                }
            };
            reader.readAsDataURL(file);
        }
        document.addEventListener("DOMContentLoaded", function() {
            var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
            var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
                return new bootstrap.Popover(popoverTriggerEl);
            });
        });

        function countChars(obj) {
            let maxLength = 50;
            let currentLength = obj.value.length;

            if (currentLength >= maxLength) {
                obj.setAttribute("title", "Max 50 karakter!");
                obj.style.borderColor = "red";

                // Cek apakah tooltip sudah pernah dibuat
                if (!obj._tooltipInstance) {
                    obj._tooltipInstance = new bootstrap.Tooltip(obj);
                }
                obj._tooltipInstance.show();
            } else {
                obj.removeAttribute("title");
                obj.style.borderColor = "";

                // Hide tooltip jika ada
                if (obj._tooltipInstance) {
                    obj._tooltipInstance.hide();
                }
            }
        }
        // Helper format tanggal LOKAL (hindari geser timezone)
        function fmtLocalYmd(dateObj) {
            return dateObj.getFullYear() + '-' +
                String(dateObj.getMonth() + 1).padStart(2, '0') + '-' +
                String(dateObj.getDate()).padStart(2, '0');
        }

        $(document).ready(function() {
            // Inisialisasi DataTables untuk tableKategori
            let tableKategori = $('#tableKategori').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                "destroy": true,
                "ordering": false,
                responsive: true,
            });

            // Fokus ke kolom search saat modalKategori dibuka
            $('#modalKategori').on('shown.bs.modal', function() {
                setTimeout(function() {
                    $('#modalKategori .dataTables_filter input').focus();
                }, 300);
            });

            // Inisialisasi DataTables untuk tableUser
            let tableUser = $('#tableUser').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                "destroy": true,
                "ordering": false,
                responsive: true,
            });

            // Fokus ke kolom search saat modalUser dibuka
            $('#modalUser').on('shown.bs.modal', function() {
                setTimeout(function() {
                    $('#modalUser .dataTables_filter input').focus();
                }, 300);
            });
        });

        var holiday = @json($holiday);
        const HOLIDAY_MAP = Array.isArray(holiday)
            // jika holiday = [{date:'2025-05-01', name:'Hari Buruh'}, ...]
            ?
            Object.fromEntries(holiday.map(h => [(h.date || '').toString().slice(0, 10), h.name || 'Libur Nasional']))
            // jika holiday = { "2025-05-01": "Hari Buruh", ... } sudah ok
            :
            holiday;

        // Buat background events untuk pewarnaan merah (tanpa DOM inject)
        const HOLIDAY_BG_EVENTS = Object.entries(HOLIDAY_MAP).map(([date, name]) => ({
            // title: name,
            start: date,
            allDay: true,
            display: 'background',
            color: '#ffe1e1' // merah muda stabil
        }));


        function select_kategori(id, detail, kategori, idkat) {
            // Set the selected code to the material input
            document.getElementById('dkategori').value = idkat;
            document.getElementById('ddetkat').value = id;

            document.getElementById('ddetkatname').value = kategori + " - " + detail;

            // Close the modal after selection
            const modal = bootstrap.Modal.getInstance(document.getElementById('modalKategori'));
            $('#modalKategori').modal('hide');
        }

        function select_user(nik, nama, iddept, dept) {
            // Set the selected code to the material input
            document.getElementById('duser').value = nik;
            document.getElementById('dusername').value = nama + ' - ' + dept;
            // Mengisi nilai ke elemen input
            document.getElementById('ddept').value = iddept; // Mengisi ID ke input hidden
            // document.getElementById('ddeptname').value = dept; // Mengisi nama ke input text

            // Close the modal after selection
            const modal = bootstrap.Modal.getInstance(document.getElementById('modalUser'));
            $('#modalUser').modal('hide');
        }

        // Helper: kembalikan datetime lengkap untuk perhitungan.
        // IN  → gabung ddate + jam dari input#start/#finish  → "YYYY-MM-DDTHH:MM"
        // Lain → langsung return value datetime-local
        function getFullDatetime(inputId) {
            const val = document.getElementById(inputId).value;
            if (!val) return '';
            const userRole = document.getElementById('userinfo').value;
            if (userRole === 'IN') {
                return document.getElementById('ddate').value + 'T' + val;
            }
            return val;
        }

        function change_status() {
            // Ambil nilai status dari select
            const status = document.getElementById('dstatus').value;

            // Ambil elemen start dan finish
            const startInput = document.getElementById('start');
            const finishInput = document.getElementById('finish');

            // Mendapatkan waktu saat ini dalam format datetime-local
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');

            const userRole = document.getElementById('userinfo').value;
            const today = userRole === 'IN'
                ? `${hours}:${minutes}`                          // IN: cuma jam
                : `${year}-${month}-${day}T${hours}:${minutes}`; // lain: full datetime

            // Reset validasi wajib input
            startInput.required = false;
            finishInput.required = false;

            // Atur nilai default berdasarkan status
            if (status === 'D') {
                // Jika status D, start dan finish kosong
                if (!startInput.value) startInput.value = '';
                if (!finishInput.value) finishInput.value = '';
            } else if (status === 'P') {
                // Jika status P, start default nilai today, finish kosong
                if (!startInput.value) startInput.value = today;
                if (!finishInput.value) finishInput.value = '';
                startInput.required = true; // Start wajib diisi jika ada nilai default
            } else if (status === 'C') {
                // Jika status C, start dan finish default nilai today
                if (!startInput.value) startInput.value = today;
                if (!finishInput.value) finishInput.value = today;
                startInput.required = true; // Start wajib diisi jika ada nilai default
                finishInput.required = true; // Finish wajib diisi jika ada nilai default
            }

            calculatePoints();
        }

        // Event listener untuk perubahan pada select status
        document.getElementById('dstatus').addEventListener('change', change_status);

        // function calculatePoints() {
        //     // Ambil nilai dari inputan start dan finish
        //     const startInput = document.getElementById('start').value;
        //     const finishInput = document.getElementById('finish').value;

        //     // Pastikan kedua input memiliki nilai
        //     if (!startInput || !finishInput) {
        //         document.getElementById('dpoin').value = '0';
        //         return;
        //     }
        //     // Konversi nilai input ke objek Date
        //     const startDate = new Date(startInput);
        //     const finishDate = new Date(finishInput);

        //     if (finishDate <= startDate) {
        //         Swal.fire({
        //             icon: 'warning',
        //             title: 'Perhatian!',
        //             text: 'Waktu selesai harus setelah waktu mulai!'
        //         });
        //         document.getElementById('dpoin').value = '0';
        //         return;
        //     }

        //     // Hitung total durasi dalam milidetik
        //     let totalDuration = finishDate - startDate;

        //     // Tambahkan logika untuk mengurangi waktu istirahat (12:00 - 13:00)
        //     const lunchStart = new Date(startDate);
        //     lunchStart.setHours(12, 0, 0, 0); // Set ke jam 12:00
        //     const lunchEnd = new Date(startDate);
        //     lunchEnd.setHours(13, 0, 0, 0); // Set ke jam 13:00

        //     if (startDate < lunchEnd && finishDate > lunchStart) {
        //         // Kurangi waktu istirahat dari total durasi
        //         const overlapStart = startDate < lunchStart ? lunchStart : startDate;
        //         const overlapEnd = finishDate > lunchEnd ? lunchEnd : finishDate;
        //         totalDuration -= overlapEnd - overlapStart;
        //     }

        //     // Konversi durasi dari milidetik ke jam dan hari
        //     const hours = totalDuration / (1000 * 60 * 60); // Total jam
        //     const days = totalDuration / (1000 * 60 * 60 * 24); // Total hari

        //     // Tentukan nilai poin berdasarkan aturan
        //     let point;
        //     if (hours < 1) {
        //         point = '0.2';
        //     } else if (hours >= 1 && hours <= 2) {
        //         point = '1';
        //     } else if (hours > 2 && hours <= 4) {
        //         point = '2';
        //     } else if (hours > 4 && hours <= 8) {
        //         point = '3';
        //     } else if (hours > 8 && hours <= 24) {
        //         point = '5';
        //     } else if (days > 1 && days <= 2) {
        //         point = '5';
        //     } else if (days > 2 && days <= 4) {
        //         point = '8';
        //     } else if (days > 4) {
        //         point = '13';
        //     }

        //     // Tampilkan hasil di input poin
        //     document.getElementById('dpoin').value = point;
        // }

        function calculatePoints() {
            // Ambil nilai lengkap (gabung tanggal+jam untuk role IN)
            const startInput = getFullDatetime('start');
            const finishInput = getFullDatetime('finish');

            // Pastikan kedua input memiliki nilai
            if (!startInput || !finishInput) {
                document.getElementById('dpoin').value = '0';
                return;
            }

            // Konversi nilai input ke objek Date
            let startDate = new Date(startInput);
            let finishDate = new Date(finishInput);

            // Pastikan waktu finish lebih besar dari waktu start
            if (finishDate <= startDate) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Perhatian!',
                    text: 'Waktu selesai harus setelah waktu mulai!'
                });
                document.getElementById('dpoin').value = '0';
                return;
            }
            // Cek apakah pakai poin baru (mulai Mei 2025 ke atas)
            const thresholdDate = new Date('2025-05-01'); // 1 Mei 2025
            const useNewPoints = startDate >= thresholdDate;

            let totalWorkHours = 0;
            let currentDate = new Date(startDate);

            while (currentDate <= finishDate) {
                currentDate.setHours(0, 0, 0, 0); // normalisasi
                const cd = fmtLocalYmd(currentDate);
                let dayOfWeek = currentDate.getDay(); // 0: Minggu, 6: Sabtu
                let currentDateString = currentDate.toISOString().split('T')[0]; // Format YYYY-MM-DD

                const isHoliday = Object.prototype.hasOwnProperty.call(HOLIDAY_MAP, cd);
                console.log('Loop', cd, 'weekend?', (dayOfWeek === 0 || dayOfWeek === 6), 'holiday?', isHoliday);

                if (dayOfWeek !== 0 && dayOfWeek !== 6 && !isHoliday) {
                    let workStart = new Date(currentDate);
                    workStart.setHours(8, 0, 0, 0);
                    let workEnd = new Date(currentDate);
                    workEnd.setHours(17, 0, 0, 0);
                    let lunchStart = new Date(currentDate);
                    lunchStart.setHours(12, 0, 0, 0);
                    let lunchEnd = new Date(currentDate);
                    lunchEnd.setHours(13, 0, 0, 0);

                    let dayStart = startDate > workStart ? startDate : workStart;
                    let dayEnd = finishDate < workEnd ? finishDate : workEnd;

                    // **Pastikan waktu kerja hanya dalam jam 08:00 - 17:00**
                    if (dayEnd > dayStart) {
                        let workHours = (dayEnd - dayStart) / (1000 * 60 * 60);

                        // **Kurangi jam istirahat jika terkena**
                        if (dayStart < lunchEnd && dayEnd > lunchStart) {
                            workHours -= 1;
                        }

                        totalWorkHours += workHours;
                    }
                }


                // Lanjutkan ke hari berikutnya
                currentDate.setDate(currentDate.getDate() + 1);
                currentDate.setHours(8, 0, 0, 0); // Reset ke awal jam kerja
            }

            // Tentukan nilai poin berdasarkan aturan
            let point;
            if (useNewPoints) {
                // Poin Baru (pakai menit)
                let totalMinutes = totalWorkHours * 60;
                if (totalMinutes < 15) {
                    point = '0.1';
                } else if (totalMinutes >= 15 && totalMinutes <= 30) {
                    point = '0.2';
                } else if (totalMinutes >= 30 && totalMinutes <= 60) {
                    point = '0.5';
                } else if (totalMinutes >= 60 && totalMinutes <= 120) {
                    point = '1';
                } else if (totalMinutes >= 120 && totalMinutes <= 240) {
                    point = '2';
                } else if (totalMinutes >= 240 && totalMinutes <= 480) {
                    point = '3';
                } else if (totalMinutes >= 480 && totalMinutes <= 960) {
                    point = '5';
                } else if (totalMinutes >= 960 && totalMinutes <= 1920) {
                    point = '8';
                } else if (totalMinutes >= 1920 && totalMinutes <= 3840) {
                    point = '13';
                } else {
                    point = '21';
                }
            } else {
                // Poin Lama (pakai jam)
                if (totalWorkHours < 1) {
                    point = '0.2';
                } else if (totalWorkHours >= 1 && totalWorkHours <= 2) {
                    point = '1';
                } else if (totalWorkHours > 2 && totalWorkHours <= 4) {
                    point = '2';
                } else if (totalWorkHours > 4 && totalWorkHours <= 8) {
                    point = '3';
                } else if (totalWorkHours > 8 && totalWorkHours <= 16) {
                    point = '5';
                } else if (totalWorkHours > 16 && totalWorkHours <= 32) {
                    point = '8';
                } else {
                    point = '13';
                }
            }

            // Tampilkan hasil di input poin
            document.getElementById('dpoin').value = point;
        }

        function select_reqby(nik, name, uname) {
            // Set the selected code to the material input
            document.getElementById('dreqby').value = uname;
            document.getElementById('dreqbyname').value = name;

            // Close the modal after selection
            const modal = bootstrap.Modal.getInstance(document.getElementById('modalReqby'));
            $('#modalReqby').modal('hide');
        }

        document.addEventListener("DOMContentLoaded", function() {
            var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
            var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
                return new bootstrap.Popover(popoverTriggerEl);
            });
        });

        document.addEventListener("DOMContentLoaded", function() {
            document.querySelector(".btn-primary.input").addEventListener("click", function(event) {

                const ket = document.getElementById("dket").value;
                const kategori = document.getElementById("ddetkat").value;
                const user = document.getElementById("duser").value;
                const dept = document.getElementById("ddept").value;
                const dampak = document.getElementById("ddampak").value;
                const urgency = document.getElementById("durgency").value;

                const status = document.getElementById("dstatus").value;
                const detailPengerjaan = document.getElementById("dpengerjaan").value.trim();

                // Cek jika status adalah 'C' dan Detail Pengerjaan kosong
                if (status === "C" && detailPengerjaan === "") {
                    event.preventDefault(); // Mencegah form disubmit
                    Swal.fire({
                        icon: 'warning',
                        title: 'Perhatian!',
                        text: 'Detail Pengerjaan wajib diisi sebelum menyimpan!',
                        confirmButtonColor: '#3085d6'
                    });
                    return false; // Hentikan eksekusi lebih lanjut
                }

                if (ket === "" || kategori === "" || user === "" || dept === "" || dampak === "" ||
                    urgency === "" || status === "") {
                    event.preventDefault(); // Mencegah form disubmit
                    Swal.fire({
                        icon: 'warning',
                        title: 'Perhatian!',
                        text: 'Harap isi semua kolom!',
                        confirmButtonColor: '#3085d6'
                    });
                    return false; // Hentikan eksekusi lebih lanjut
                }

                // Role IN: isi hidden input (name="start" / name="finish") dengan
                // gabungan ddate + jam sebelum form dikirim ke server
                const userinfo = document.getElementById('userinfo').value;
                if (userinfo === 'IN') {
                    const dateVal   = document.getElementById('ddate').value;    // YYYY-MM-DD
                    const startVal  = document.getElementById('start').value;    // HH:MM
                    const finishVal = document.getElementById('finish').value;   // HH:MM
                    document.getElementById('start_full').value  = startVal  ? (dateVal + ' ' + startVal)  : '';
                    document.getElementById('finish_full').value = finishVal ? (dateVal + ' ' + finishVal) : '';
                }

                // Jika validasi lolos, jalankan submit form secara eksplisit
                document.getElementById("dailya-form").submit();
            });
        });

        // Event listener untuk membatasi start dan finish untuk internship
        document.getElementById('start').addEventListener('change', function() {
            const userRole  = document.getElementById('userinfo').value;
            const finishEl  = document.getElementById('finish');

            if (this.value && userRole === 'IN') {
                // Finish: min = jam start, max = 23:59
                finishEl.min = this.value;
                finishEl.max = '23:59';

                // Kalau finish sudah terisi tapi <= start, kosongkan
                if (finishEl.value && finishEl.value <= this.value) {
                    finishEl.value = '';
                }
            } else if (this.value && userRole !== 'IN') {
                // Non-IN: min finish = full datetime start
                finishEl.min = this.value;
                finishEl.removeAttribute('max');
            }

            calculatePoints();
        });

        document.getElementById('finish').addEventListener('change', function() {
            const finishFull = getFullDatetime('finish');
            const startFull  = getFullDatetime('start');

            if (startFull && finishFull) {
                const startDate  = new Date(startFull);
                const finishDate = new Date(finishFull);

                if (finishDate <= startDate) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Perhatian!',
                        text: 'Waktu selesai harus setelah waktu mulai!',
                        confirmButtonColor: '#3085d6'
                    });
                    this.value = '';
                    document.getElementById('dpoin').value = '0';
                    return;
                }
            }

            calculatePoints();
        });

        // Inisialisasi saat halaman dimuat
        document.addEventListener('DOMContentLoaded', function() {
            const userRole    = document.getElementById('userinfo').value;
            const startInput  = document.getElementById('start');
            const finishInput = document.getElementById('finish');

            if (userRole === 'IN') {
                startInput.min  = '00:00';
                startInput.max  = '23:59';
                finishInput.max = '23:59';

                // Kalau start sudah ada nilai, finish min = jam start
                if (startInput.value) {
                    finishInput.min = startInput.value;
                }

                // Hitung poin dari data yang sudah ada
                calculatePoints();
            }
        });

        // Event listener untuk perubahan pada input start dan finish
        document.getElementById('start').addEventListener('change', calculatePoints);
        document.getElementById('finish').addEventListener('change', calculatePoints);

        // Proteksi field date dari inspect element
        document.addEventListener('DOMContentLoaded', function() {
            const dateField = document.getElementById('ddate');
            if (!dateField) return;

            const originalDate = dateField.value;
            dateField.setAttribute('data-original', originalDate);
            dateField.setAttribute('readonly', true);

            let isRestoring = false;

            const restoreValue = () => {
                if (isRestoring) return;
                isRestoring = true;
                dateField.value = originalDate;
                isRestoring = false;
            };

            dateField.addEventListener('input', restoreValue);
            dateField.addEventListener('paste', e => e.preventDefault());

            const observer = new MutationObserver(mutations => {
                if (isRestoring) return;

                mutations.forEach(mutation => {
                    if (mutation.type === 'attributes' &&
                        (mutation.attributeName === 'readonly' || mutation.attributeName ===
                            'value')) {

                        isRestoring = true;
                        dateField.setAttribute('readonly', true);
                        dateField.value = originalDate;
                        isRestoring = false;
                    }
                });
            });

            observer.observe(dateField, {
                attributes: true,
                attributeFilter: ['readonly', 'value']
            });
        });
    </script>
@endsection