@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">Add Daily Activity</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) }}" id="dailya-form"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <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"
                                                    placeholder="--" 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="{{ date('Y-m-d') }}" 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)" required>
                                            </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" required></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"
                                                    required>
                                                <input type="hidden" id="ddetkat" name="ddetkat" class="form-control"
                                                    required>

                                                <div class="flex flex-col mb-2 input-group">
                                                    <input id="ddetkatname" name="ddetkatname" class="form-control" required
                                                        readonly required>
                                                    <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="{{ $mentor->mentor_username }}"
                                                        required>
                                                    <input type="hidden" id="dapprove" name="dapprove"
                                                        class="form-control" value="0">


                                                    <div class="flex flex-col mb-2 input-group">
                                                        <input id="dreqbyname" name="dreqbyname" class="form-control"
                                                            value="{{ $mentor->mentor_firstname }}" 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">
                                                <input type="hidden" class="form-control" id="ddept"
                                                    name="ddept">
                                                <div class="flex flex-col mb-2 input-group">
                                                    <input id="dusername" name="dusername" class="form-control" required
                                                        readonly required>
                                                    <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>User</th>
                                                                            <th>Departemen</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="text" class="form-control" id="ddeptname"
                                                    name="ddeptname" disabled> --}}
                                            {{-- </div> --}}
                                        </div>
                                    </div>

                            </div>

                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            @if ($userinfo->lastname == 'IN')
                                                <div class="d-flex align-items-center">
                                                    <label for="dticket_id" class="form-label me-2"
                                                        style="min-width: 150px;">ID Ticket</label>
                                                    <div class="input-group">
                                                        <select class="form-select ticket-select2" id="dticket_id"
                                                            name="dticket_id">
                                                            <option value="">Pilih ID Ticket</option>
                                                            @foreach ($tickets as $ticket)
                                                                <option value="{{ $ticket->id }}"
                                                                    @selected(old('dticket_id') == $ticket->id)>
                                                                    {{ $ticket->id }} | {{ $ticket->problem }} | PIC :
                                                                    {{ $ticket->firstname }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        <span class="input-group-text d-none" id="ticket_loading">
                                                            <span class="spinner-border spinner-border-sm text-primary"
                                                                role="status" aria-label="Loading ticket"></span>
                                                        </span>
                                                    </div>
                                                </div>
                                                <p></p>
                                            @endif
                                            <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" required>
                                                    <option value=""></option>
                                                    @foreach ($urgency as $u)
                                                        <option value="{{ $u->value }}">
                                                            {{ $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" required>
                                                    <!-- Opsi default, tampil jika $typeform kosong atau tidak cocok dengan value di $types -->
                                                    <option value=""></option>
                                                    @foreach ($urgency as $u)
                                                        <option value="{{ $u->value }}">
                                                            {{ $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: cuma pilih jam, name kosong supaya tidak ikut POST --}}
                                                    <input type="time" class="form-control" id="start">
                                                    {{-- hidden: yang beneran dikirim ke server --}}
                                                    <input type="hidden" id="start_full" name="start">
                                                @else
                                                    <input type="datetime-local" class="form-control" id="start"
                                                        name="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">
                                                    <input type="hidden" id="finish_full" name="finish">
                                                @else
                                                    <input type="datetime-local" class="form-control" id="finish"
                                                        name="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" required>
                                                    <!-- Opsi default, tampil jika $typeform kosong atau tidak cocok dengan value di $types -->
                                                    <option value=""></option>
                                                    @foreach ($status as $s)
                                                        <option value="{{ $s->value }}">
                                                            {{ $s->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <p></p>
                                            <p></p>
                                            <div class="d-flex align-items-center">
                                                <!-- Tambahkan Popover pada Icon -->
                                                <!-- Popover Trigger (Icon Info) -->
                                                <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="" readonly>
                                            </div>
                                            <p></p>
                                            <div class="d-flex align-items-center mb-2">
                                                <label for="dimage" class="form-label me-2"
                                                    style="min-width: 150px;">Upload Lampiran</label>
                                                <input class="form-control" type="file" id="dimage" name="dimage"
                                                    accept=".jpg,.jpeg,.png">
                                            </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>
                        <br>
                        <h6>Note : (<code>*</code>) Wajib diisi.</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        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, {
                    trigger: 'focus', // Popover akan tertutup jika klik di luar
                    html: true // Aktifkan HTML dalam popover
                });
            });
        });

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

        // 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() {
            const ticketInput = document.getElementById('dticket_id');
            if (ticketInput) {
                $('#dticket_id').select2({
                    width: '100%',
                    placeholder: 'Pilih ID Ticket',
                    allowClear: true
                }).on('change', loadTicketDetail);
                ticketInput.addEventListener('keydown', function(event) {
                    if (event.key === 'Enter') {
                        event.preventDefault();
                        loadTicketDetail();
                    }
                });
            }

            // 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);
            });
            let tableReqby = $('#tableReqby').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
            $('#modalReqby').on('shown.bs.modal', function() {
                setTimeout(function() {
                    $('#modalReqby .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": true,
                responsive: true,
            });

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

        async function loadTicketDetail() {
            const ticketInput = document.getElementById('dticket_id');
            const loadingIcon = document.getElementById('ticket_loading');
            const ticketId = ticketInput ? ticketInput.value.trim() : '';
            if (!ticketId) return;

            ticketInput.setCustomValidity('');
            ticketInput.readOnly = true;
            loadingIcon?.classList.remove('d-none');
            document.getElementById('dreqby').value = '';
            document.getElementById('dreqbyname').value = '';
            try {
                const ticketUrl = @json(url('/dailya/ticket'));
                const response = await fetch(`${ticketUrl}/${encodeURIComponent(ticketId)}`, {
                    headers: {
                        'Accept': 'application/json'
                    }
                });
                const result = await response.json();
                if (!response.ok) throw new Error(result.message || 'Data ticket gagal dimuat.');

                const ticket = result.data;
                document.getElementById('dket').value = ticket.keterangan || '';
                document.getElementById('dkategori').value = ticket.kategori || '';
                document.getElementById('ddetkat').value = ticket.detkat || '';
                document.getElementById('ddetkatname').value = [ticket.kategori_name, ticket.detkat_name]
                    .filter(Boolean).join(' - ');
                document.getElementById('duser').value = ticket.user || '';
                document.getElementById('ddept').value = ticket.dept || '';
                document.getElementById('dusername').value = [ticket.user_name, ticket.dept_name]
                    .filter(Boolean).join(' - ');
                document.getElementById('ddampak').value = ticket.dampak || '';
                document.getElementById('durgency').value = ticket.urgency || '';
                document.getElementById('dreqby').value = ticket.reqby || '';
                document.getElementById('dreqbyname').value = ticket.reqby_name || '';
            } catch (error) {
                ticketInput.setCustomValidity(error.message);
                Swal.fire({
                    icon: 'error',
                    title: 'Ticket tidak dapat digunakan',
                    text: error.message
                });
                ticketInput.focus();
            } finally {
                ticketInput.readOnly = false;
                loadingIcon?.classList.add('d-none');
            }
        }


        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_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');
        }

        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 (Defined) - ini baru perencanaan
                // Start dan finish dikosongkan dan tidak otomatis terisi
                startInput.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);

        //     // 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;
        //     }

        //     // 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;
        // }


        // Poin lama
        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);

                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;
        }

        // //Poin Baru
        // 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
        //     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;
        //     }

        //     let totalWorkHours = 0;

        //     let currentDate = new Date(startDate);

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

        //         if (dayOfWeek !== 0 && dayOfWeek !== 6) {
        //             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 totalWorkMinutes = totalWorkHours * 60; // Ubah jam ke menit
        //     let point;
        //     if (totalWorkMinutes < 15) {
        //         point = '0.1';
        //     } else if (totalWorkMinutes >= 15 && totalWorkMinutes <= 30) {
        //         point = '0.2';
        //     } else if (totalWorkMinutes >= 30 && totalWorkMinutes <= 60) {
        //         point = '0.5';
        //     } else if (totalWorkMinutes >= 60 && totalWorkMinutes <= 120) {
        //         point = '1';
        //     } else if (totalWorkMinutes > 120 && totalWorkMinutes <= 240) {
        //         point = '2';
        //     } else if (totalWorkMinutes > 240 && totalWorkMinutes <= 480) {
        //         point = '3';
        //     } else if (totalWorkMinutes > 480 && totalWorkMinutes <= 960) {
        //         point = '5';
        //     } else if (totalWorkMinutes > 960 && totalWorkMinutes <= 1920) {
        //         point = '8';
        //     } else if (totalWorkMinutes > 1920 && totalWorkMinutes <= 3840) {
        //         point = '13';
        //     } else {
        //         point = '21';
        //     }

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

        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 reqby = document.getElementById("dreqby").value;



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

                const userinfo = document.getElementById("userinfo").value;
                if (status === "C" && detailPengerjaan === "") {
                    event.preventDefault();
                    Swal.fire({
                        icon: 'warning',
                        title: 'Perhatian!',
                        text: 'Detail Pengerjaan wajib diisi sebelum menyimpan!',
                        confirmButtonColor: '#3085d6'
                    });
                    return false;
                }

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

                if (userinfo === 'IN' && reqby === "") {
                    event.preventDefault();
                    Swal.fire({
                        icon: 'warning',
                        title: 'Perhatian!',
                        text: 'Harap isi semua kolom!',
                        confirmButtonColor: '#3085d6'
                    });
                    return false;
                }

                // Role IN: isi hidden input (name="start" / name="finish") dengan
                // gabungan ddate + jam sebelum form dikirim ke server
                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) :
                        '';
                }

                document.getElementById("dailya-form").submit();
            });
        });

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

            if (startFull) {
                const startDate = new Date(startFull);

                if (userRole === 'IN') {
                    const today = new Date();
                    const todayEnd = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59);

                    // 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 {
                    finishEl.min = startFull;
                    finishEl.removeAttribute('max');
                }
            }

            calculatePoints();
        });

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

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

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

            if (userRole === 'IN') {
                const today = new Date();
                const hours = String(today.getHours()).padStart(2, '0');
                const minutes = String(today.getMinutes()).padStart(2, '0');

                startInput.min = '00:00';
                startInput.max = '23:59';
                if (!startInput.value) {
                    startInput.value = `${hours}:${minutes}`;
                }

                finishInput.min = startInput.value;
                finishInput.max = '23:59';
            }
        });

        // 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