@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>
                            <input type="hidden" id="jabatan" name="jabatan" value="{{ $userinfo->lastname }}">
                        {{-- check authorize add --}}
                        @if ($daily->it_name == $username)
                            @if (($authorize->edit == '1' && $daily->status == 'D') || $daily->status == 'P')
                                <button type="button" class="btn btn-warning mb-0" id="daily-complete"
                                    onclick="editDA('{{ encrypt($daily->id) }}')">
                                    <i class="fas fa-pen-to-square"></i> Edit
                                </button>
                            @endif


                            @if ($daily->status == 'D')
                                <button type="button" class="btn btn-primary mb-0" id="daily-define"
                                    onclick="prosesDA('{{ $daily->id }}', '{{ $daily->start }}')">
                                    <i class="fas fa-check-circle"></i> Process
                                </button>
                            @elseif($daily->status == 'P')
                                {{-- <button type="button" class="btn btn-primary mb-0" id="daily-complete"
                                    nclick="completeDA('{{ $daily->id }}', '{{ $daily->start }}', '{{ $daily->finish }}', '{{ $daily->poin }}', '{!! json_encode($daily->pengerjaan) !!}')"
                                    style="cursor: pointer;">
                                    <i class="fas fa-flag-checkered"></i> complete
                                </button> --}}
                                <button type="button" class="btn btn-primary mb-0" data-id="{{ $daily->id }}"
                                    data-start="{{ $daily->start }}" data-finish="{{ $daily->finish }}"
                                    data-poin="{{ $daily->poin }}" data-pengerjaan="{!! htmlspecialchars($daily->pengerjaan, ENT_QUOTES) !!}"
                                    onclick="handleCompleteDA(this)" style="cursor: pointer;">
                                    <i class="fas fa-flag-checkered"></i> complete
                                </button>
                            @elseif($daily->status == 'C')
                                @php
                                    // Normalisasi dulu
                                    $jabatan = strtoupper(trim($userinfo->lastname ?? ''));
                                    $idroles = strtolower(trim($userinfo->idroles ?? ''));

                                    $allRoles = ['it.mis', 'admins', 'admhrw', 'admmis', 'inship'];

                                    $showUncomplete = false;

                                    if (in_array($idroles, $allRoles, true)) {
                                        if ($jabatan === 'IN') {
                                            // IN: UnComplete muncul hanya kalau approve = 0
                                            if ($daily->approve == '0') {
                                                $showUncomplete = true;
                                            }
                                        } else {
                                            // Selain IN: selalu boleh UnComplete (approve 0 / 1)
                                            $showUncomplete = true;
                                        }
                                    }
                                @endphp

                                @if ($showUncomplete)
                                    <button type="button" class="btn btn-warning mb-0" id="daily-uncomplete"
                                        onclick="uncompleteDA('{{ $daily->id }}')">
                                        <i class="fas fa-undo-alt"></i> UnComplete
                                    </button>
                                @endif

                                @if ($daily->kategori == 'SAPX')
                                    <button type="button" class="btn btn-primary mb-0" data-id="{{ $daily->id }}"
                                        data-ket="{{ $daily->ket }}" data-pengerjaan="{!! htmlspecialchars($daily->pengerjaan, ENT_QUOTES) !!}"
                                        onclick="handlepagptDA(this)" style="cursor: pointer;">
                                        <i class="fa fa-magic"></i> API GPT
                                    </button>
                                @endif
                            @endif




                            @if ($authorize->delete == '1' && $daily->status == 'D')
                                <button type="button" class="btn btn-danger mb-0" id="daily-delete"
                                    onclick="deleteDA('{{ $daily->id }}')">
                                    <i class="fas fa-trash"></i> Delete
                                </button>
                            @endif
                        @elseif($daily->reqby == $username && $userinfo->lastname != 'IN')
                            @if ($daily->status == 'C')
                                @if ($authorize->approval == '1')
                                    @if ($daily->approve === '0')
                                        <button type="button" class="btn mb-0 text-white"
                                            style="background:#6366F1;border-color:#6366F1" id="daily-complete"
                                            onclick="approveDA('{{ $daily->id }}')">
                                            <i class="fas fa-check-circle me-1"></i> Approve
                                        </button>
                                        <button type="button" class="btn mb-0 text-white"
                                            style="background:#ff4161;border-color:#ff0223" id="daily-complete"
                                            onclick="rejectDA('{{ $daily->id }}')">
                                            <i class="fas fa-times-circle me-1"></i> Reject
                                        </button>
                                    @elseif($daily->approve === '1')
                                        <button type="button" class="btn mb-0 text-white"
                                            style="background:#F43F5E;border-color:#F43F5E" id="daily-complete"
                                            onclick="unapproveDA('{{ $daily->id }}')">
                                            <i class="fas fa-rotate-left me-1"></i> unApprove
                                        </button>
                                    @endif
                                @endif
                            @endif
                        @endif


                    </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">Daily Activity - {{ $daily->itname }} @if ($daily->approve == '1' && $userinfo->lastname === 'IN')
                                <span class="badge bg-success d-inline-flex align-items-center">
                                    <i class="fas fa-check-circle me-1"></i> Approved
                                </span>
                            @endif
                        </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"
                                                    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</label>
                                                <input type="text" class="form-control" id="dket" name="dket"
                                                    value="{{ $daily->ket }}" readonly>

                                            </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" readonly>{{ $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</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"
                                                        value="{{ $daily->katname }} - {{ $daily->detkatname }}"
                                                        readonly>
                                                    <span class="input-group-text bg-primary text-light"
                                                        style="border-color:#d2d6da; border-left:3px solid #d2d6da; cursor: pointer;">
                                                        <i class="fas fa-search"></i>
                                                    </span>
                                                </div>
                                            </div>

                                            <p></p>
                                            @if ($userinfo->lastname === 'IN' || ($daily->reqby == $username && $userinfo->lastname != 'IN'))
                                                <div class="d-flex align-items-center">
                                                    <label for="inputCust" class="form-label me-2"
                                                        style="min-width: 150px;">Request By</label>
                                                    <input type="hidden" id="duser" name="duser"
                                                        class="form-control">
                                                    <div class="flex flex-col mb-2 input-group">
                                                        <input id="dusername" name="dusername" class="form-control"
                                                            value="{{ $daily->reqname }}" readonly>
                                                        <span class="input-group-text bg-primary text-light"
                                                            style="border-color:#d2d6da; border-left:3px solid #d2d6da; cursor: pointer;">
                                                            <i class="fas fa-search"></i>
                                                        </span>

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

                                                <p></p>
                                            @endif
                                            <div class="d-flex align-items-center">
                                                <label for="inputCust" class="form-label me-2"
                                                    style="min-width: 150px;">User - Dept</label>
                                                <input type="hidden" id="duser" name="duser"
                                                    class="form-control">
                                                <div class="flex flex-col mb-2 input-group">
                                                    <input id="dusername" name="dusername" class="form-control"
                                                        value="{{ $daily->username }} - {{ $daily->deptname }}" readonly>
                                                    <span class="input-group-text bg-primary text-light"
                                                        style="border-color:#d2d6da; border-left:3px solid #d2d6da; cursor: pointer;">
                                                        <i class="fas fa-search"></i>
                                                    </span>

                                                    </span>
                                                </div>
                                            </div>
                                            @if (!empty($daily->alasan_reject))
                                                <div class="d-flex align-items-start mt-3 p-3 rounded-2"
                                                    style="border: 1px solid #e74c3c; background: #fdecea; color: #c0392b; font-size: 0.875rem;">
                                                    <i class="fas fa-exclamation-triangle me-2 mt-1"></i>
                                                    <div>
                                                        <strong>Alasan reject:</strong>
                                                        <div class="mt-1">
                                                            {{ $daily->alasan_reject }}
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif


                                            {{-- <p></p> --}}

                                            {{-- <div class="d-flex align-items-center">
                                                <label for="inputdate" class="form-label me-2"
                                                    style="min-width: 150px;">Departemen</label>
                                                <small class="form-text text-muted"></small>
                                                <input type="hidden" class="form-control" id="ddept"
                                                    name="ddept">
                                                <input type="text" class="form-control" id="ddeptname"
                                                    name="ddeptname" value=" {{ $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</label>
                                                <small class="form-text text-muted"></small>


                                                <select class="form-select" id="ddampak" name="ddampak" disabled>
                                                    <option value="" selected>{{ $daily->dampakname }}
                                                    </option>

                                                </select>
                                            </div>

                                            <p></p>

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


                                                <select class="form-select" id="durgency" name="durgency" disabled>
                                                    <!-- Opsi default, tampil jika $typeform kosong atau tidak cocok dengan value di $types -->
                                                    <option value="">{{ $daily->urgencyname }}</option>

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


                                                <select class="form-select" id="dstatus" name="dstatus"
                                                    onchange="change_status" disabled>
                                                    <!-- Opsi default, tampil jika $typeform kosong atau tidak cocok dengan value di $types -->
                                                    <option value="">{{ $daily->statusname }}</option>

                                                </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>
                                                <input type="datetime-local" class="form-control" id="start"
                                                    name="start" value="{{ $daily->start }}" readonly>
                                            </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>
                                                <input type="datetime-local" class="form-control" id="finish"
                                                    name="finish" value="{{ $daily->finish }}" readonly>
                                            </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="{{ $daily->poin }}" 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;">Lampiran</label>

                                                @if ($daily->dokumentasi)
                                                    <span class="h-12 w-12 rounded overflow-hidden bg-gray-100">
                                                        <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;"
                                                            data-bs-toggle="modal" data-bs-target="#imageModal">
                                                    </span>
                                                @endif
                                            </div>


                                        </div>
                                    </div>


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

    <!-- Modal -->
    <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imageModalLabel">
                        Preview Image
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <img src="{{ asset('/storage' . '/' . $daily->dokumentasi) }}" alt="image"
                        class="w-100 border-radius-lg shadow-sm">
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>
    @if ($daily->kategori == 'SAPX')
        <div class="container-fluid py-4" id="previewArea">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <h2>Hasil Generate</h2>
                            <button id="printDoc"
                                style="background-color: #4CAF50; color: white; border: none; padding: 10px 18px; font-size: 16px; border-radius: 5px; cursor: pointer; margin-right: 10px;">
                                <i class="fas fa-print"></i> Print Document
                            </button>
                            <button id="saveDoc"
                                style="background-color: #2196F3; color: white; border: none; padding: 10px 18px; font-size: 16px; border-radius: 5px; cursor: pointer;">
                                <i class="fas fa-save"></i> Save Document
                            </button>
                            <div id="docArea"
                                style="border:1px solid #ccc; padding:20px; margin-top:20px; max-height: 700px; overflow-y: auto;">
                                <!-- Cover Page -->
                                @if ($daily->apigpt === null)
                                    <div class="cover-page" id="coverPage">
                                        <h1 id="judulCover">{{ $daily->ket }}</h1>

                                        <hr>
                                    </div>
                                @endif
                                <!-- HTML Content dari AI -->
                                <div class="document-content" id="htmlResult">
                                    {!! $daily->apigpt ?: '<p>Belum ada hasil generate</p>' !!}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <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 handleCompleteDA(element) {
            const id = element.getAttribute('data-id');
            const start = element.getAttribute('data-start');
            const finish = element.getAttribute('data-finish');
            const poin = element.getAttribute('data-poin');
            const pengerjaan = element.getAttribute('data-pengerjaan');

            completeDA(id, start, finish, poin, pengerjaan);
        }

        function prosesDA(id, start) {
            var idDa = id;
            
            // Cek role user dari input hidden
            const userRole = document.getElementById('jabatan').value;
            const isInternship = userRole === 'IN';

            // 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 today = `${year}-${month}-${day}T${hours}:${minutes}`;

            // Cek apakah start sudah terisi atau belum
            let isStartFilled = start && start.trim() !== '' && start !== 'null';
            let dateValue, timeValue;

            if (isStartFilled) {
                // Jika start sudah terisi, ambil tanggal dan jam dari start yang ada
                const startDate = new Date(start);
                dateValue = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}-${String(startDate.getDate()).padStart(2, '0')}`;
                timeValue = `${String(startDate.getHours()).padStart(2, '0')}:${String(startDate.getMinutes()).padStart(2, '0')}`;
            } else {
                // Jika belum terisi, gunakan tanggal hari ini
                dateValue = `${year}-${month}-${day}`;
                timeValue = `${hours}:${minutes}`;
            }

            // Tentukan atribut readonly dan style berdasarkan role
            const dateReadonly = isInternship ? 'readonly' : '';
            const dateStyle = isInternship ? 'background-color: #f0f0f0; cursor: not-allowed;' : '';
            const dateHelpText = isInternship 
                ? (isStartFilled ? 'Tanggal sudah terisi dan tidak dapat diubah' : 'Tanggal diset ke hari ini dan tidak dapat diubah')
                : 'Tanggal dapat diubah sesuai kebutuhan';

            // Tampilkan modal untuk mengedit start
            Swal.fire({
                title: `Proses Data - ${idDa}`,
                html: `
                        <div style="margin-bottom: 15px;">
                            <label for="date-input" style="display: block; text-align: left; margin-bottom: 5px;">Tanggal</label>
                            <input id="date-input" type="date" class="swal2-input" value="${dateValue}" ${dateReadonly} style="${dateStyle}">
                            <small style="color: #666; display: block; margin-top: 5px;">${dateHelpText}</small>
                        </div>
                        <div style="margin-bottom: 15px;">
                            <label for="time-input" style="display: block; text-align: left; margin-bottom: 5px;">Jam</label>
                            <input id="time-input" type="time" class="swal2-input" value="${timeValue}">
                            <small style="color: #666; display: block; margin-top: 5px;">Jam dapat diubah sesuai kebutuhan</small>
                        </div>
                    `,
                showCancelButton: true,
                confirmButtonText: 'Proses',
                cancelButtonText: 'Batal',
                didOpen: () => {
                    const dateInput = document.getElementById('date-input');
                    const timeInput = document.getElementById('time-input');
                },
                preConfirm: () => {
                    const dateInputValue = document.getElementById('date-input').value;
                    const timeInputValue = document.getElementById('time-input').value;

                    if (!dateInputValue || !timeInputValue) {
                        Swal.showValidationMessage('Tanggal dan Jam wajib diisi!');
                        return false;
                    }

                    // Gabungkan tanggal dan jam
                    const combinedDateTime = `${dateInputValue}T${timeInputValue}`;

                    return {
                        start: combinedDateTime
                    };
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    const updatedStart = result.value.start;

                    // Ajax untuk memproses data ke database
                    $.ajax({
                        url: '{{ URL::to('/') }}/dailya/proses/' + idDa,
                        type: "POST",
                        dataType: "JSON",
                        data: {
                            start: updatedStart
                        },
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(data) {
                            Swal.fire({
                                title: 'Berhasil!',
                                text: `Data ${idDa} berhasil diproses!`,
                                icon: 'success',
                                confirmButtonColor: '#3085d6'
                            }).then(() => {
                                window.location.replace("{{ URL::to('/') }}/dailya/");
                            });
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            Swal.fire({
                                title: 'Oops!',
                                text: `Data ${idDa} tidak dapat diproses!`,
                                icon: 'error',
                                confirmButtonColor: '#3085d6'
                            });
                        }
                    });
                }
            });
        }

        //function edit
        function editDA(id) {
            var idDa = id;

            if (idDa) {
                window.location.href = "{{ url($url_menu . '/edit' . '/') }}/" + (idDa);
            } else {
                Swal.fire({
                    title: 'Oops!',
                    text: 'Pilih ID DA terlebih dahulu!',
                    icon: 'warning',
                    confirmButtonText: 'OK'
                });
            }
        }

        function completeDA(id, start, finish, poin, pengerjaan) {
            var idDa = id;
            
            // Cek role user dari input hidden
            const userRole = document.getElementById('jabatan').value;
            const isInternship = userRole === 'IN';

            // 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 today = `${year}-${month}-${day}T${hours}:${minutes}`;

            // Ambil tanggal dan jam dari start
            const startDate = new Date(start);
            const startDateOnly = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}-${String(startDate.getDate()).padStart(2, '0')}`;
            const finishTimeOnly = `${hours}:${minutes}`;

            // Tentukan atribut untuk finish date berdasarkan role
            const finishDateReadonly = isInternship ? 'readonly' : '';
            const finishDateStyle = isInternship ? 'background-color: #f0f0f0; cursor: not-allowed;' : '';
            const finishDateHelpText = isInternship 
                ? 'Tanggal finish sama dengan tanggal start dan tidak dapat diubah'
                : 'Tanggal finish dapat diubah sesuai kebutuhan';

            // Fungsi untuk menghitung poin
            function calculatePoints(start, finish) {
                if (!start || !finish) return '0';

                const startDate = new Date(start);
                const finishDate = new Date(finish);

                if (finishDate <= startDate) {
                    return '0';
                }

                let totalDuration = finishDate - startDate;
                // 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
                    let dayOfWeek = currentDate.getDay(); // 0: Minggu, 6: Sabtu

                    // Hanya hitung hari kerja (Senin-Jumat), skip weekend
                    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
                }

                if (useNewPoints) {
                    let totalMinutes = totalWorkHours * 60;
                    if (totalMinutes < 15) return '0.1';
                    if (totalMinutes >= 15 && totalMinutes <= 30) return '0.2';
                    if (totalMinutes > 30 && totalMinutes <= 60) return '0.5';
                    if (totalMinutes > 60 && totalMinutes <= 120) return '1';
                    if (totalMinutes > 120 && totalMinutes <= 240) return '2';
                    if (totalMinutes > 240 && totalMinutes <= 480) return '3';
                    if (totalMinutes > 480 && totalMinutes <= 960) return '5';
                    if (totalMinutes > 960 && totalMinutes <= 1920) return '8';
                    if (totalMinutes > 1920 && totalMinutes <= 3840) return '13';
                    if (totalMinutes > 3840) return '21';

                } else {

                    if (totalWorkHours < 1) return '0.2';
                    if (totalWorkHours >= 1 && totalWorkHours <= 2) return '1';
                    if (totalWorkHours > 2 && totalWorkHours <= 4) return '2';
                    if (totalWorkHours > 4 && totalWorkHours <= 8) return '3';
                    if (totalWorkHours > 8 && totalWorkHours <= 16) return '5';
                    if (totalWorkHours > 16 && totalWorkHours <= 32) return '8';
                    if (totalWorkHours > 32) return '13';
                }
            }

            // Tampilkan modal untuk mengedit start dan finish
            Swal.fire({
                title: `Complete Data - ${idDa}`,
                html: `
                    <div style="display: flex; flex-direction: column; gap: 8px; font-size: 14px; max-width: 300px; margin: auto;">
                        <label for="start-input" style="font-weight: 500;">Start</label>
                        <input id="start-input" type="datetime-local" class="swal2-input" value="${start}" readonly style="padding: 5px; font-size: 13px; background-color: #f0f0f0; cursor: not-allowed;">

                        <label for="finish-date-input" style="font-weight: 500;">Tanggal Finish</label>
                        <input id="finish-date-input" type="date" class="swal2-input" value="${startDateOnly}" ${finishDateReadonly} style="padding: 5px; font-size: 13px; ${finishDateStyle}">
                        <small style="color: #666; font-size: 11px;">${finishDateHelpText}</small>

                        <label for="finish-time-input" style="font-weight: 500;">Jam Finish</label>
                        <input id="finish-time-input" type="time" class="swal2-input" value="${finishTimeOnly}" style="padding: 5px; font-size: 13px;">
                        <small style="color: #666; font-size: 11px;">Jam dapat diubah sesuai kebutuhan</small>

                        <label for="poin-input" style="font-weight:  500;">Poin</label>
                        <input id="poin-input" type="text" class="swal2-input" value="${calculatePoints(start, today)}" readonly style="padding: 5px; font-size: 13px; background-color: #f0f0f0;">

                        <label for="detail-input" style="font-weight: 500;">Detail Pengerjaan</label>
                    <textarea id="detail-input" name="dpengerjaan" class="swal2-textarea" 
                        placeholder="Masukkan detail pengerjaan..." 
                        style="height: 80px; padding: 5px; font-size: 13px; resize: none;">${pengerjaan}</textarea>
                    </div>
                `,
                showCancelButton: true,
                confirmButtonText: 'Complete',
                cancelButtonText: 'Batal',
                didOpen: () => {
                    const finishTimeInput = document.getElementById('finish-time-input');
                    const finishDateInput = document.getElementById('finish-date-input');
                    const startValue = document.getElementById('start-input').value;

                    // Update poin secara dinamis saat jam atau tanggal finish diubah
                    function updatePoin() {
                        const finishDate = finishDateInput.value;
                        const finishTime = finishTimeInput.value;
                        const combinedFinish = `${finishDate}T${finishTime}`;
                        
                        const updatedPoin = calculatePoints(startValue, combinedFinish);
                        document.getElementById('poin-input').value = updatedPoin;

                        // Visual feedback jika finish <= start
                        const startDate = new Date(startValue);
                        const finishDateTime = new Date(combinedFinish);

                        if (finishDateTime <= startDate) {
                            finishTimeInput.style.border = '2px solid #d33';
                            document.getElementById('poin-input').style.color = '#d33';
                        } else {
                            finishTimeInput.style.border = '1px solid #d1d5db';
                            document.getElementById('poin-input').style.color = '#000';
                        }
                    }

                    finishTimeInput.addEventListener('input', updatePoin);
                    finishDateInput.addEventListener('input', updatePoin);
                },
                preConfirm: () => {
                    const startValue = document.getElementById('start-input').value;
                    const finishDate = document.getElementById('finish-date-input').value;
                    const finishTime = document.getElementById('finish-time-input').value;
                    const pengerjaanValue = document.getElementById('detail-input').value.trim();

                    // Validasi jam finish wajib diisi
                    if (!finishTime) {
                        Swal.showValidationMessage('Jam Finish wajib diisi!');
                        return false;
                    }

                    // Gabungkan tanggal dan jam
                    const finishValue = `${finishDate}T${finishTime}`;

                    // Validasi finish harus lebih besar dari start
                    const startDate = new Date(startValue);
                    const finishDateTime = new Date(finishValue);

                    if (finishDateTime <= startDate) {
                        Swal.showValidationMessage('Waktu selesai harus setelah waktu mulai!');
                        return false;
                    }

                    // Validasi detail pengerjaan wajib diisi
                    if (!pengerjaanValue) {
                        Swal.showValidationMessage('Detail Pengerjaan wajib diisi!');
                        return false;
                    }

                    return {
                        finish: finishValue,
                        poin: document.getElementById('poin-input').value,
                        pengerjaan: pengerjaanValue
                    };
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    const updatedFinish = result.value.finish;
                    const updatedPoin = result.value.poin;
                    const pengerjaan = result.value.pengerjaan;

                    // AJAX untuk memproses data ke database
                    $.ajax({
                        url: '{{ URL::to('/') }}/dailya/complete/' + idDa,
                        type: "POST",
                        dataType: "JSON",
                        data: {
                            start: start,
                            finish: updatedFinish,
                            poin: updatedPoin,
                            pengerjaan: pengerjaan
                        },
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(data) {
                            Swal.fire({
                                title: 'Berhasil! ',
                                text: `Data ${idDa} berhasil diselesaikan! `,
                                icon: 'success',
                                confirmButtonColor: '#3085d6'
                            }).then(() => {
                                window.location.replace("{{ URL::to('/') }}/dailya/");
                            });
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            Swal.fire({
                                title: 'Oops!',
                                text: `Data ${idDa} tidak dapat diselesaikan!`,
                                icon: 'error',
                                confirmButtonColor: '#3085d6'
                            });
                        }
                    });
                }
            });
        }


        //function process
        function unprosesDA(id) {
            var idDa = id;

            Swal.fire({
                title: `Data ${idDa} akan diproses`, // Perbaikan pada format string
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, unProses'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Ajax untuk memproses data ke database
                    $.ajax({
                        url: '{{ URL::to('/') }}/dailya/unproses/' + idDa,
                        type: "POST",
                        dataType: "JSON",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(data) {
                            // Redirect ke halaman tpuror setelah sukses
                            Swal.fire({
                                title: 'Berhasil!',
                                text: `Data ${idDa} berhasil di unProses!`,
                                icon: 'success',
                                confirmButtonColor: '#3085d6'
                            }).then(() => {
                                window.location.replace("{{ URL::to('/') }}/dailya/");
                            });
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            Swal.fire({
                                title: 'Oops!',
                                text: `Data ${idDa} tidak dapat di unproses!`,
                                icon: 'error',
                                confirmButtonColor: '#3085d6'
                            });
                        }

                    });
                }
            });
        }

        //function uncomplete
        function uncompleteDA(id) {
            var idDa = id;

            Swal.fire({
                title: `Data ${idDa} akan di unComplete`, // Perbaikan pada format string
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, unComplete'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Ajax untuk memproses data ke database
                    $.ajax({
                        url: '{{ URL::to('/') }}/dailya/uncomplete/' + idDa,
                        type: "POST",
                        dataType: "JSON",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(data) {
                            // Redirect ke halaman tpuror setelah sukses
                            Swal.fire({
                                title: 'Berhasil!',
                                text: `Data ${idDa} berhasil di unComplete!`,
                                icon: 'success',
                                confirmButtonColor: '#3085d6'
                            }).then(() => {
                                window.location.replace("{{ URL::to('/') }}/dailya/");
                            });
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            Swal.fire({
                                title: 'Oops!',
                                text: `Data ${idDa} tidak dapat di uncomplete!`,
                                icon: 'error',
                                confirmButtonColor: '#3085d6'
                            });
                        }

                    });
                }
            });
        }

        //function process
        function deleteDA(id) {
            var idDa = id;

            Swal.fire({
                title: `Data ${idDa} akan dihapus`, // Perbaikan pada format string
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, unProses'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Ajax untuk memproses data ke database
                    $.ajax({
                        url: '{{ URL::to('/') }}/dailya/delete/' + idDa,
                        type: "POST",
                        dataType: "JSON",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(data) {
                            // Redirect ke halaman tpuror setelah sukses
                            Swal.fire({
                                title: 'Berhasil!',
                                text: `Data ${idDa} berhasil dihapus!`,
                                icon: 'success',
                                confirmButtonColor: '#3085d6'
                            }).then(() => {
                                window.location.replace("{{ URL::to('/') }}/dailya/");
                            });
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            Swal.fire({
                                title: 'Oops!',
                                text: `Data ${idDa} tidak dapat dihapus!`,
                                icon: 'error',
                                confirmButtonColor: '#3085d6'
                            });
                        }

                    });
                }
            });
        }

        function handlepagptDA(element) {
            const id = element.getAttribute('data-id');
            const ket = element.getAttribute('data-ket');
            const pengerjaan = element.getAttribute('data-pengerjaan');

            pagptDA(id, ket, pengerjaan);
        }


        function pagptDA(id, ket, peng) {
            Swal.fire({
                title: `Data ${id} akan di generate oleh AI`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, generate'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Tunggu sebentar...',
                        html: 'AI sedang memproses data...<br>',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }

                    });

                    $.ajax({
                        url: '{{ URL::to('/') }}/dailya/generate/' + id,
                        type: "POST",
                        dataType: "JSON",
                        timeout: 30010, // 30 detik batas waktu
                        data: {
                            ket: ket,
                            peng: peng
                        },
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(data) {
                            if (data.success) {

                                // Bersihkan text ```html
                            var cleanHtml = data.html.replace(/```html/g, '').replace(/```/g, '');

                            // Ganti isi #htmlResult dengan hasil terbaru
                            $('#htmlResult').html(cleanHtml);

                            // (Optional) tampilkan notifikasi
                            Swal.fire('Berhasil digenerate!', '', 'success');
                        }
                    },
                    error: function(xhr, textStatus, errorThrown) {
                        let message = 'Data tidak dapat di-generate!';
                        if (textStatus === 'timeout') {
                            message =
                                'Permintaan ke server melebihi batas waktu. Silakan coba lagi.';
                        }

                        Swal.fire({
                            title: 'Oops!',
                            text: message,
                            icon: 'error',
                            confirmButtonColor: '#3085d6'
                        });
                    }
                });
            }
        });
    }

    // $('#printDoc').click(function() {
    //     var printContents = document.getElementById('docArea').innerHTML;
    //     var originalContents = document.body.innerHTML;
    //     document.body.innerHTML = printContents;
    //     window.print();
    //     document.body.innerHTML = originalContents;
    //     location.reload();
    // });
    $(document).on('click', '#printDoc', function() {
        const printContents = document.getElementById('docArea').innerHTML;
        const originalContents = document.body.innerHTML;

        document.body.innerHTML = printContents;
        window.print();

        setTimeout(() => {
            document.body.innerHTML = originalContents;
            location.reload(); // reload halaman agar semua listener dan layout kembali
        }, 500);
    });

    $(document).on('click', '#saveDoc', function() {
        const content = document.getElementById('docArea').innerHTML;
        const id = document.getElementById('did')?.value ?? '';

        $.ajax({
            url: '{{ URL::to('/') }}/dailya/apigpt/' + id,
            type: 'POST',
            data: {
                content: content,
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: function(data) {
                Swal.fire({
                    title: 'Success!',
                    text: 'Data berhasil disimpan!',
                    icon: 'success',
                    confirmButtonColor: '#3085d6'
                });
            },
            error: function(xhr, status, error) {
                Swal.fire({
                    title: 'Oops!',
                    text: 'Terjadi kesalahan saat menyimpan data!',
                    icon: 'error',
                    confirmButtonColor: '#3085d6'
                });
            }
        });
    });

    function approveDA(id) {
        var idDa = id;

        Swal.fire({
            title: `Data ${idDa} akan diapprove`, // Perbaikan pada format string
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Ya, Approve'
        }).then((result) => {
            if (result.isConfirmed) {
                // Ajax untuk memproses data ke database
                $.ajax({
                    url: '{{ URL::to('/') }}/dailya/approve/' + idDa,
                    type: "POST",
                    dataType: "JSON",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(data) {
                        // Redirect ke halaman tpuror setelah sukses
                        Swal.fire({
                            title: 'Berhasil!',
                            text: `Data ${idDa} berhasil diapprove!`,
                            icon: 'success',
                            confirmButtonColor: '#3085d6'
                        }).then(() => {
                            window.location.replace("{{ URL::to('/') }}/dailya/");
                        });
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        Swal.fire({
                            title: 'Oops!',
                            text: `Data ${idDa} tidak dapat diapprove!`,
                            icon: 'error',
                            confirmButtonColor: '#3085d6'
                        });
                    }

                });
            }
        });
    }

    function rejectDA(idDa) {
        Swal.fire({
            title: `Reject Daily Activity ${idDa}?`,
            text: 'Silakan isi alasan reject di bawah ini.',
            icon: 'warning',
            input: 'textarea',
            inputPlaceholder: 'Tulis alasan reject...',
            inputAttributes: {
                'aria-label': 'Tulis alasan reject...'
            },
            showCancelButton: true,
            confirmButtonColor: '#F43F5E',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Ya, Reject',
            inputValidator: (value) => {
                if (!value || !value.trim()) {
                    return 'Alasan reject :';
                }
                return null;
            }
        }).then((result) => {
            if (result.isConfirmed) {
                const reason = result.value.trim();

                $.ajax({
                    url: '{{ URL::to('/') }}/dailya/reject/' + idDa,
                    type: 'POST',
                    dataType: 'JSON',
                    data: {
                        reason: reason
                    },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(data) {
                        Swal.fire({
                            title: 'Berhasil!',
                            text: `Data ${idDa} berhasil direject!`,
                            icon: 'success',
                            confirmButtonColor: '#3085d6'
                        }).then(() => {
                            window.location.replace("{{ URL::to('/') }}/dailya/");
                        });
                    },
                    error: function() {
                        Swal.fire({
                            title: 'Oops!',
                            text: `Data ${idDa} tidak dapat direject!`,
                            icon: 'error',
                            confirmButtonColor: '#3085d6'
                        });
                    }
                });
            }
        });
    }


    function unapproveDA(id) {
        var idDa = id;

        Swal.fire({
            title: `Data ${idDa} akan diapprove`, // Perbaikan pada format string
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Ya, unApprove'
        }).then((result) => {
            if (result.isConfirmed) {
                // Ajax untuk memproses data ke database
                $.ajax({
                    url: '{{ URL::to('/') }}/dailya/unapprove/' + idDa,
                    type: "POST",
                    dataType: "JSON",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(data) {
                        // Redirect ke halaman tpuror setelah sukses
                        Swal.fire({
                            title: 'Berhasil!',
                            text: `Data ${idDa} berhasil diunapprove!`,
                            icon: 'success',
                            confirmButtonColor: '#3085d6'
                        }).then(() => {
                            window.location.replace("{{ URL::to('/') }}/dailya/");
                        });
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        Swal.fire({
                            title: 'Oops!',
                            text: `Data ${idDa} tidak dapat diunapprove!`,
                            icon: 'error',
                            confirmButtonColor: '#3085d6'
                        });
                    }

                });
            }
        });
    }


    // $('#saveDoc').click(function() {
    //     const content = document.getElementById('docArea').innerHTML;
    //     var id = document.getElementById('did').value;
    //     $.ajax({
    //         url: '{{ URL::to('/') }}/dailya/apigpt/' + id,
    //         type: 'POST',
    //         dataType: 'json',
    //         data: {
    //             content: content,
    //             _token: $('meta[name="csrf-token"]').attr('content') // CSRF token
    //         },
    //         success: function(data) {
    //             if (data.success) {
    //                 alert('Berhasil disimpan!');
    //             } else {
    //                 alert('Gagal menyimpan!');
    //             }
    //         },
    //         error: function(xhr, status, error) {
    //             alert('Terjadi kesalahan: ' + error);
    //         }
    //     });
    // });
    // $('#saveDoc').click(function() {
    //     const content = document.getElementById('docArea').innerHTML;
    //     const id = document.getElementById('did').value;

    //     const formData = new FormData();
    //     formData.append('content', content);
    //     formData.append('_token', $('meta[name="csrf-token"]').attr('content'));

    //     $.ajax({
    //         url: `/dailya/apigpt/${id}`,
        //             type: 'POST',
        //             data: formData,
        //             processData: false,
        //             contentType: false,
        //             success: function(data) {
        //                 alert('✅ Berhasil disimpan!');
        //             },
        //             error: function(xhr, status, error) {
        //                 alert('❌ Terjadi kesalahan: ' + error);
        //             }
        //         });
        //     });
    </script>
@endsection