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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0 p-3">
                        <h6 class="mb-1">MIS APP</h6>
                        <p class="text-sm">MSJ - MIS APP</p>
                    </div>
                </div>
            </div>
        </div>
        @if (
            $user_login->idroles == 'admins' ||
                $user_login->idroles == 'admmis' ||
                $user_login->idroles == 'admhrw' ||
                $user_login->idroles == 'it.mis')
            <br>
            <div class="row">
                <style>
                    * {
                        box-sizing: border-box;
                    }

                    .mini-card {
                        background-color: #fff;
                        padding: 10px;
                        border-radius: 12px;
                        width: 100%;
                        max-width: 525px;
                        margin: auto;
                    }

                    .mini-title {
                        font-size: 14px;
                        font-weight: bold;
                        margin-bottom: 8px;
                        color: #333;
                        text-align: center;
                    }

                    .mini-subtitle {
                        font-size: 11px;
                        color: #6c757d;
                        text-align: center;
                        margin-bottom: 10px;
                    }

                    .status-grid {
                        display: grid;
                        grid-template-columns: repeat(7, 1fr);
                        gap: 6px;
                        justify-items: center;
                    }

                    .circle-container {
                        position: relative;
                        display: inline-block;
                    }

                    .status-circle {
                        width: 45px;
                        height: 45px;
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 12px;
                        color: white;
                        font-weight: bold;
                        cursor: pointer;
                    }

                    .success {
                        background-color: #28a745;
                    }

                    .failed {
                        background-color: #dc3545;
                    }

                    .tooltip {
                        visibility: hidden;
                        position: absolute;
                        background-color: #333;
                        color: #fff;
                        text-align: left;
                        border-radius: 6px;
                        padding: 6px 10px;
                        font-size: 11px;
                        width: 160px;
                        bottom: 40px;
                        left: 50%;
                        transform: translateX(-50%);
                        opacity: 0;
                        transition: opacity 0.3s ease;
                        white-space: normal;
                        z-index: 10;
                        pointer-events: none;
                    }

                    .circle-container:hover .tooltip {
                        visibility: visible;
                        opacity: 1;
                    }

                    .circle-container:first-child .tooltip {
                        left: 0;
                        transform: translateX(0);
                    }

                    .circle-container:last-child .tooltip {
                        left: auto;
                        right: 0;
                        transform: translateX(0);
                    }

                    .day-label {
                        font-size: 10px;
                        text-align: center;
                        margin-top: 2px;
                    }

                    .status-grid {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 1rem;
                        justify-content: center;
                    }

                    .status-grid .mini-card {
                        flex: 1 1 180px;
                        /* lebar minimal 180px, tapi fleksibel */
                        max-width: 220px;
                        padding: 0.5rem;
                        text-align: center;
                        border-radius: 0.5rem;
                        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
                    }

                    .status-grid .mini-card i {
                        font-size: 1.5rem;
                        /* kecilkan ikon */
                    }

                    .status-grid .mini-card h3 {
                        font-size: 1.2rem;
                        /* kecilkan angka */
                        margin-top: 0.3rem;
                    }



                    .po-approval-card {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        padding: 1rem;
                        height: 100%;
                        /* samakan tinggi dengan card lain */
                    }

                    .po-approval-card .sub-card {
                        border: 1px solid #ddd;
                        border-radius: 6px;
                        padding: .5rem;
                        background-color: #fff;
                        height: 100%;
                    }

                    .btn-periode.periode-active {
                        background-color: #028284 !important;
                        border-color: #028284 !important;
                        color: #fff !important;
                    }

                    /* Responsif: kalau layar kecil, DIR & PURCH jadi 2 baris */
                    @media (max-width: 576px) {
                        .po-approval-card .row>.col-6 {
                            flex: 0 0 100%;
                            max-width: 100%;
                        }
                    }
                </style>

                <div class="row">

                    <div class="col-xl-4 col-sm-4 mb-xl-0 mb-4">
                        <div class="card" style="height: 100%">
                            {{-- <a href="{{ url('tsbkup') }}" class="card-link"> --}}
                            <div class="card-body p-3">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="numbers">
                                            <p class="text-sm mb-0 text-uppercase font-weight-bold"
                                                style="text-align: center">
                                                Status Backup Database</p>
                                            <div class="mini-subtitle">Last 7 Day</div>
                                            <hr class="horizontal dark mt-0">
                                            <div class="mini-card">
                                                <div class="status-grid">
                                                    @foreach ($statusList as $s)
                                                        @php
                                                            $tanggal = \Carbon\Carbon::parse($s['tanggal']);
                                                        @endphp
                                                        <div class="circle-container">
                                                            <div class="status-circle {{ $s['status'] }}"
                                                                data-tanggal="{{ $s['tanggal'] }}" style="cursor: pointer;">
                                                                {{ $tanggal->format('d') }}
                                                            </div>
                                                            <div class="tooltip">
                                                                📅
                                                                {{ \Carbon\Carbon::parse($s['tanggal'])->translatedFormat('d F Y') }}<br>
                                                                {!! $s['status'] === 'success' ? '✅' : '❌' !!} Status:
                                                                {{ ucfirst($s['status']) }}<br><br>
                                                                📄 Log:<br>{{ $s['log'] }}<br><br>
                                                            </div>

                                                            <div class="day-label">{{ $s['hari'] }}</div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            {{-- </a> --}}
                        </div>
                    </div>

                    <div class="col-xl-8 col-sm-8 mb-xl-0 mb-4">
                        <div class="card" style="width: 100%">
                            <div class="card-body p-3">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="numbers text-center">
                                            <p class="text-sm mb-1 text-uppercase font-weight-bold">Status PO</p>

                                            <div class="status-grid">
                                                <!-- PR Waiting Approval -->
                                                <div class="mini-card" style="cursor: pointer;" data-bs-toggle="modal"
                                                    data-bs-target="#detailModalPRW">
                                                    <i class="fas fa-file-signature fa-2x text-primary mb-2"></i>
                                                    <h6 class="fw-bold">PR</h6>
                                                    <small class="text-muted">Waiting Approval</small>
                                                    <h3 class="text-primary mt-2" id="countPRW">
                                                        <span class="spinner-border spinner-border-sm" role="status"
                                                            aria-label="Memuat"></span>
                                                    </h3>


                                                </div>

                                                <div class="modal fade" id="detailModalPRW" tabindex="-1"
                                                    aria-hidden="true">
                                                    <div class="modal-dialog modal-lg modal-dialog-centered">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h5 class="modal-title">PR Waiting Approval</h5>
                                                                <button type="button" class="btn-close"
                                                                    data-bs-dismiss="modal"></button>
                                                            </div>
                                                            <div class="modal-body" style="overflow-x: auto;">
                                                                <table class="table table-hover" id="prwTable">
                                                                    <thead style="background-color: #00b7bd4f;">
                                                                        <tr>
                                                                            <th>No PR</th>
                                                                            <th>Detail</th>
                                                                            <th>Qty</th>
                                                                            <th>Requisitor</th>
                                                                            <th>Date</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody id="bodyPRW">
                                                                        @foreach ($recPRW as $prw)
                                                                            <tr>
                                                                                <td style="text-align: left">
                                                                                    {{ $prw['BANFN'] ?? '' }}</td>
                                                                                <td style="text-align: left">
                                                                                    {{ $prw['TXZ01'] ?? '' }}</td>
                                                                                <td>{{ $prw['MENGE'] ?? '' }}</td>
                                                                                <td style="text-align: left">
                                                                                    {{ $prw['AFNAM'] ?? '' }}</td>
                                                                                <td style="text-align: left">
                                                                                    {{ $prw['ERDAT'] ?? '' }}</td>
                                                                            </tr>
                                                                        @endforeach

                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- Outstanding PR -->
                                                <div class="mini-card" style="cursor: pointer;" data-bs-toggle="modal"
                                                    data-bs-target="#detailModalPRO">
                                                    <i class="fas fa-hourglass-half fa-2x text-warning mb-2"></i>
                                                    <h6 class="fw-bold">PR</h6>
                                                    <small class="text-muted">Outstanding</small>
                                                    <h3 class="text-warning mt-2" id="countPRO">
                                                        <span class="spinner-border spinner-border-sm" role="status"
                                                            aria-label="Memuat"></span>
                                                    </h3>
                                                </div>


                                                <div class="modal fade" id="detailModalPRO" tabindex="-1"
                                                    aria-hidden="true">
                                                    <div class="modal-dialog modal-lg modal-dialog-centered">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h5 class="modal-title">PR Outstanding</h5>
                                                                <button type="button" class="btn-close"
                                                                    data-bs-dismiss="modal"></button>
                                                            </div>
                                                            <div class="modal-body" style="overflow-x: auto;">
                                                                <table class="table table-hover" id="proTable">
                                                                    <thead style="background-color: #00b7bd4f;">
                                                                        <tr>
                                                                            <th>No PR</th>
                                                                            <th>Detail</th>
                                                                            <th>Qty</th>
                                                                            <th>Requisitor</th>
                                                                            <th>Date</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody id="bodyPRO">
                                                                        @forelse ($recPRO as $pro)
                                                                            <tr>
                                                                                <td style="text-align: left">
                                                                                    {{ $pro['BANFN'] ?? '' }}</td>
                                                                                <td style="text-align: left">
                                                                                    {{ $pro['TXZ01'] ?? '' }}</td>
                                                                                <td>{{ $pro['MENGE'] ?? '' }}</td>
                                                                                <td style="text-align: left">
                                                                                    {{ $pro['AFNAM'] ?? '' }}</td>
                                                                                <td style="text-align: left">
                                                                                    {{ $pro['ERDAT'] ?? '' }}</td>

                                                                            </tr>

                                                                        @endforeach
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>


                                                </div>

                                                <div class="mini-card po-approval-card text-center">
                                                    <i class="fas fa-user-check fa-2x text-info mb-2"></i>
                                                    <h6 class="fw-bold">Approval PO</h6>

                                                    <div class="row g-2">
                                                        <!-- DIR -->
                                                        <div class="col-6" style="cursor: pointer;"
                                                            data-bs-toggle="modal" data-bs-target="#detailModalAPOD">
                                                            <div class="sub-card">
                                                                <span class="fw-bold d-block">DIR</span>
                                                                <h3 class="text-danger mb-0" id="countAPOD">
                                                                    <span class="spinner-border spinner-border-sm"
                                                                        role="status" aria-label="Memuat"></span>
                                                                </h3>
                                                            </div>
                                                        </div>
                                                        <!-- PURCH -->
                                                        <div class="col-6" style="cursor: pointer;"
                                                            data-bs-toggle="modal" data-bs-target="#detailModalAPOP">
                                                            <div class="sub-card">
                                                                <span class="fw-bold d-block">PURCH</span>
                                                                <h3 class="text-info mb-0" id="countAPOP">
                                                                    <span class="spinner-border spinner-border-sm"
                                                                        role="status" aria-label="Memuat"></span>
                                                                </h3>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                {{-- Approf Purchasing --}}
                                                <div class="modal fade" style="cursor: pointer;" id="detailModalAPOP"
                                                    tabindex="-1" aria-hidden="true">
                                                    <div class="modal-dialog modal-lg modal-dialog-centered">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h5 class="modal-title">Waiting Approval Purchasing
                                                                </h5>
                                                                <button type="button" class="btn-close"
                                                                    data-bs-dismiss="modal"></button>
                                                            </div>
                                                            <div class="modal-body" style="overflow-x: auto;">
                                                                <table class="table table-hover" id="APOPTable">
                                                                    <thead style="background-color: #00b7bd4f;">
                                                                        <tr>
                                                                            <th>No PR</th>
                                                                            <th>Detail</th>
                                                                            <th>Qty</th>
                                                                            <th>Requisitor</th>
                                                                            <th>Created On</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody id="bodyAPOP">
                                                                        @forelse ($recAPOP as $apop)
                                                                            <tr>
                                                                                <td style="text-align: left">
                                                                                    {{ $apop['BANFN'] ?? '' }}</td>
                                                                                <td style="text-align: left">
                                                                                    {{ $apop['TXZ01'] ?? '' }}</td>
                                                                                <td>{{ $apop['MENGE'] ?? '' }}</td>
                                                                                <td style="text-align: left">
                                                                                    {{ $apop['AFNAM'] ?? '' }}</td>
                                                                                <td style="text-align: left">
                                                                                    {{ $apop['AEDAT'] ?? '' }}</td>
                                                                            </tr>

                                                                        @endforeach
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>


                                                </div>

                                                {{-- Approf Director --}}
                                                <div class="modal fade" style="cursor: pointer;" id="detailModalAPOD"
                                                    tabindex="-1" aria-hidden="true">
                                                    <div class="modal-dialog modal-lg modal-dialog-centered">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h5 class="modal-title">Waiting Approval Director</h5>
                                                                <button type="button" class="btn-close"
                                                                    data-bs-dismiss="modal"></button>
                                                            </div>
                                                            <div class="modal-body" style="overflow-x: auto;">
                                                                <table class="table table-hover" id="APODTable">
                                                                    <thead style="background-color: #00b7bd4f;">
                                                                        <tr>
                                                                            <th>No PR</th>
                                                                            <th>Detail</th>
                                                                            <th>Qty</th>
                                                                            <th>Requisitor</th>
                                                                            <th>Created On</th>


                                                                        </tr>
                                                                    </thead>
                                                                    <tbody id="bodyAPOD">
                                                                        @foreach ($recAPOD as $apod)
                                                                            <tr>
                                                                                <td style="text-align: left">
                                                                                    {{ $apod['BANFN'] ?? '' }}</td>
                                                                                <td style="text-align: left">
                                                                                    {{ $apod['TXZ01'] ?? '' }}</td>
                                                                                <td>{{ $apod['MENGE'] ?? '' }}</td>
                                                                                <td style="text-align: left">
                                                                                    {{ $apod['AFNAM'] ?? '' }}</td>
                                                                                <td style="text-align: left">
                                                                                    {{ $apod['AEDAT'] ?? '' }}</td>

                                                                            </tr>
                                                                        @endforeach
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>


                                                </div>


                                                <!-- Outstanding PO -->
                                                <div class="mini-card" style="cursor: pointer;" data-bs-toggle="modal"
                                                    data-bs-target="#detailModalPOO">
                                                    <i class="fas fa-box-open fa-2x text-success mb-2"></i>
                                                    <h6 class="fw-bold">PO</h6>
                                                    <small class="text-muted">Outstanding</small>
                                                    <h3 class="text-success mt-2" id="countPOO">
                                                        <span class="spinner-border spinner-border-sm" role="status"
                                                            aria-label="Memuat"></span>
                                                    </h3>
                                                </div>

                                                {{-- Approf Director --}}
                                                <div class="modal fade" id="detailModalPOO" tabindex="-1"
                                                    aria-hidden="true">
                                                    <div class="modal-dialog modal-lg modal-dialog-centered">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h5 class="modal-title">Outstanding PO</h5>
                                                                <button type="button" class="btn-close"
                                                                    data-bs-dismiss="modal"></button>
                                                            </div>
                                                            <div class="modal-body" style="overflow-x: auto;">
                                                                <table class="table table-hover" id="POOTable">
                                                                    <thead style="background-color: #00b7bd4f;">
                                                                        <tr>
                                                                            <th>No PO</th>
                                                                            <th>Detail</th>
                                                                            <th>Qty</th>
                                                                            <th>Requisitor</th>
                                                                            <th>Created On</th>


                                                                        </tr>
                                                                    </thead>
                                                                    <tbody id="bodyPOO">
                                                                        @foreach ($recPOO as $poo)
                                                                            <tr>
                                                                                <td style="text-align: left">
                                                                                    {{ $poo['EBELN'] ?? '' }}</td>
                                                                                <td style="text-align: left">
                                                                                    {{ $poo['TXZ01'] ?? '' }}</td>
                                                                                <td>{{ $poo['MENGE'] ?? '' }}</td>
                                                                                <td style="text-align: left">
                                                                                    {{ $poo['AFNAM'] ?? '' }}</td>
                                                                                <td style="text-align: left">
                                                                                    {{ $poo['BEDAT'] ?? '' }}</td>

                                                                            </tr>
                                                                        @endforeach
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>


                                                </div>

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

            </div>
        @endif
        <br>
        @if ($user_login->idroles == 'admins' || $user_login->idroles == 'admmis' || $user_login->idroles == 'admhrw')
            @if ($user_login->idroles == 'admins')
                <!-- Card: Total CPU/Mini PC/Notebook -->
                <div class="row">
                    <div class="col-xl-8 col-sm-12 mb-xl-0 mb-4">
                        <div class="card h-100">
                            <div class="card-header py-2 d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="fw-semibold">Summary GR</div>

                                </div>
                                <div class="d-flex flex-wrap gap-2">.


                                    <span class="badge bg-light border text-dark">
                                        Total: <strong id="kpiTotal">Rp 0</strong>
                                    </span>


                                    <a id="badgeUndefined" href="{{ url('/trbigr') }}"
                                        class="badge border text-danger text-decoration-none"
                                        style="background:#ffe7e7; cursor:pointer;">
                                        Undefined: <strong id="kpiUndefined">Rp 0</strong>
                                    </a>

                                    <a id="badgeUndefined" href="{{ url('/trbigr') }}"
                                        class="badge border text-decoration-none"
                                        style="background:#03a6a8; cursor:pointer;">
                                        <i class="fas fa-bolt me-1"></i>Get Data GR</strong>
                                    </a>


                                </div>
                            </div>

                            <div class="card-body pt-2">
                                <div id="grChart" style="height: 375px;"></div>
                            </div>

                            <div class="card-footer py-2 d-flex justify-content-between align-items-center">
                                <div>
                                    <span class="badge border text-dark" style="background:#e6ffc9; cursor:pointer;">
                                        Last Date: <strong>{{ $lastDateIndo }}</strong>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="col-xl-4 col-sm-12 mb-xl-0 mb-4">
                        <div class="card" style="height: 515px;">
                            <div class="card-body">
                                <h6 class="text-uppercase font-weight-bold">Project</h6>
                                <div id="projectChart" style="height: 375px;">
                                    <!-- Grafik (misal Pie Chart) -->
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
                <p></p>
            @endif
            <!-- Card: Total Maintenance -->
            <div class="row">
                <div class="col-xl-4 col-sm-4 mb-xl-0 mb-4">
                    <a href="{{ url('/rpsmtn') }}" class="text-decoration-none d-block">
                        <div class="card" style="height: 450px;">
                            <div class="card-body">
                                <h6 class="text-uppercase font-weight-bold">Total CPU</h6>
                                <div id="chart-bar-cpu" style="height: 375px;">
                                    <!-- Grafik (misal Bar Chart) -->
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-xl-8 col-sm-8 mb-xl-0 mb-4">
                    <a href="{{ url('/rpsmtn') }}" class="text-decoration-none d-block">
                        <div class="card" style="height: 450px;">
                            <div class="card-body">
                                <h6 class="text-uppercase font-weight-bold">Total Maintenance</h6>
                                <div id="chart-bar-maintenance" style="height: 375px;">

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

            <p></p>
            <div class="row">
                <!-- Card: Total CPU/Mini PC/Notebook -->
                <div class="col-xl-4 col-sm-6">
                    <div class="card">
                        <a href="{{ url('mstswt') }}" class="card-link">
                            <div class="card-body p-3">
                                <div class="row">
                                    <div class="col-8">
                                        <div class="numbers">
                                            <p class="text-sm mb-0 text-uppercase font-weight-bold">Total Switch</p>
                                            <h5 class="font-weight-bolder">{{ $switch }}</h5>
                                            <p class="mb-0">
                                                <span class="text-success text-sm font-weight-bolder">+{{ $switchadd }}
                                                    pcs</span>
                                                this week
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col-4 text-end">
                                        <div
                                            class="icon icon-shape bg-gradient-warning shadow-warning text-center rounded-circle">
                                            <i class="fa fa-diagram-project" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>


                <!-- Card: Total Monitor -->
                <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
                    <div class="card">
                        <a href="{{ url('msmntr') }}" class="card-link">
                            <div class="card-body p-3">
                                <div class="row">
                                    <div class="col-8">
                                        <div class="numbers">
                                            <p class="text-sm mb-0 text-uppercase font-weight-bold">Total Monitor</p>
                                            <h5 class="font-weight-bolder">{{ $monitor }}</h5>
                                            <p class="mb-0">
                                                <span class="text-success text-sm font-weight-bolder">+{{ $monitoradd }}
                                                    pcs</span>
                                                this week
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col-4 text-end">
                                        <div
                                            class="icon icon-shape bg-gradient-danger shadow-danger text-center rounded-circle">
                                            <i class="fa fa-desktop" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>

                <!-- Card: Total Printer -->
                <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
                    <div class="card">
                        <a href="{{ url('msprin') }}" class="card-link">
                            <div class="card-body p-3">
                                <div class="row">
                                    <div class="col-8">
                                        <div class="numbers">
                                            <p class="text-sm mb-0 text-uppercase font-weight-bold">Total Printer</p>
                                            <h5 class="font-weight-bolder">{{ $printer }}</h5>
                                            <p class="mb-0">
                                                <span class="text-success text-sm font-weight-bolder">+{{ $printeradd }}
                                                    pcs</span>
                                                this week
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col-4 text-end">
                                        <div
                                            class="icon icon-shape bg-gradient-success shadow-success text-center rounded-circle">
                                            <i class="fa fa-print" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <p></p>

            <div class="row">
                <!-- Card: Total Scanner -->
                <div class="col-xl-4 col-sm-6">
                    <div class="card">
                        <a href="{{ url('msscan') }}" class="card-link">
                            <div class="card-body p-3">
                                <div class="row">
                                    <div class="col-8">
                                        <div class="numbers">
                                            <p class="text-sm mb-0 text-uppercase font-weight-bold">Total Scanner</p>
                                            <h5 class="font-weight-bolder">{{ $scanner }}</h5>
                                            <p class="mb-0">
                                                <span class="text-success text-sm font-weight-bolder">+{{ $scanneradd }}
                                                    pcs</span>
                                                this week
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col-4 text-end">
                                        <div
                                            class="icon icon-shape bg-gradient-warning shadow-warning text-center rounded-circle">
                                            <i class="fa fa-qrcode" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>

                <!-- Card: Total Form PP -->
                <div class="col-xl-4 col-sm-6">
                    <div class="card">
                        <a href="{{ url('trsfpp') }}" class="card-link">
                            <div class="card-body p-3">
                                <div class="row">
                                    <div class="col-8">
                                        <div class="numbers">
                                            <p class="text-sm mb-0 text-uppercase font-weight-bold">Total Form PP</p>
                                            <h5 class="font-weight-bolder">{{ $formpp }}</h5>
                                            <p class="mb-0">
                                                <span class="text-success text-sm font-weight-bolder">+{{ $formppadd }}
                                                    pcs</span>
                                                this week
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col-4 text-end">
                                        <div
                                            class="icon icon-shape bg-gradient-info shadow-info text-center rounded-circle">
                                            <i class="fa fa-file-alt" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>

                <!-- Card: Total User -->
                <div class="col-xl-4 col-sm-6">
                    <div class="card">
                        <a href="{{ url('stuser') }}" class="card-link">
                            <div class="card-body p-3">
                                <div class="row">
                                    <div class="col-8">
                                        <div class="numbers">
                                            <p class="text-sm mb-0 text-uppercase font-weight-bold">Total User</p>
                                            <h5 class="font-weight-bolder">{{ $totalUsers }}</h5>
                                            <p class="mb-0">
                                                <span class="text-success text-sm font-weight-bolder">+{{ $useradd }}
                                                    user</span>
                                                this week
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col-4 text-end">
                                        <div
                                            class="icon icon-shape bg-gradient-warning shadow-warning text-center rounded-circle">
                                            <i class="fa fa-users" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <p></p>
            <div class="row">
                @php
                    $total = collect($count_kode_sap)->firstWhere('source_table', 'TOTAL');
                    $totalAll = ($total->sudah_terisi ?? 0) + ($total->belum_terisi ?? 0);
                @endphp

                <div class="col-xl-12 col-sm-12 mb-xl-0 mb-12">
                    <div class="card">
                        <div class="card-body text-center">
                            <h5 class="card-title text-uppercase mb-3">Ringkasan Kode Asset SAP</h5>

                            {{-- Total Keseluruhan --}}
                            <div class="fw-bold" style="font-size: 2rem; color: #0d6efd;">
                                {{ $totalAll }}
                            </div>
                            <small class="text-muted d-block mb-3">Total Asset IT</small>

                            {{-- Breakdown Sudah & Belum --}}
                            <div class="d-flex justify-content-around">
                                <div>
                                    <div class="text-success fw-bold" style="font-size: 1.3rem;">
                                        {{ $total->sudah_terisi }}
                                    </div>
                                    <small class="text-muted">Sudah Terisi Kode SAP</small>
                                </div>

                                <div>
                                    <div class="text-danger fw-bold" style="font-size: 1.3rem;">
                                        {{ $total->belum_terisi }}
                                    </div>
                                    <small class="text-muted">Belum Terisi Kode SAP</small>
                                </div>
                            </div>

                            {{-- Keterangan --}}
                            <div class="mt-3">
                                <small class="text-secondary">
                                    Data diambil dari seluruh perangkat (CPU, Monitor, Printer, Scanner, dan Switch)
                                </small>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        @endif
        <p></p>
        @if ($user_login->idroles == 'it.mis')
            <div class="row">
                <div class="col-xl-12 col-sm-12 mb-xl-0 mb-12">
                    <div class="card">
                        <div class="card-body">
                            <h6 class="text-uppercase font-weight-bold">Project</h6>
                            <div id="projectChart" style="height: 375px;">
                                <!-- Grafik (misal Pie Chart) -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
        <p></p>
        @if (
            $jabatan == 'FM' ||
                (($user_login->idroles == 'admins' && $jabatan == 'SV') || $jabatan == 'HD' || $jabatan == 'DL'))
            <div class="row">
                <div class="col-xl-12 col-sm-12 mb-xl-0 mb-12">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="text-uppercase font-weight-bold" style="text-align: center">Report All IT
                            </h5>
                            <hr class="horizontal dark mt-0">
                            <form id="bulanForm" method="GET" class="mb-3">
                                <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
                                    <label for="selectBulan" class="mb-0 fw-bold">Filter :</label>

                                    <select name="bulan" id="selectBulan" class="form-select w-10">
                                        @for ($i = 1; $i <= 12; $i++)
                                            <option value="{{ $i }}"
                                                {{ $bulanSekarang == $i ? 'selected' : '' }}>
                                                {{ \Carbon\Carbon::create()->month($i)->translatedFormat('F') }}
                                            </option>
                                        @endfor
                                    </select>

                                    <select name="tahun" id="selectTahun" class="form-select w-8">
                                        @foreach ($years as $year)
                                            <option value="{{ $year }}"
                                                {{ $selectedYear == $year ? 'selected' : '' }}>
                                                {{ $year }}
                                            </option>
                                        @endforeach
                                    </select>

                                    <select name="tipe_intern" id="selectTipeIntern" class="form-select w-8">
                                        <option value="all"
                                            {{ request()->get('tipe_intern', 'all') == 'all' ? 'selected' : '' }}>
                                            Semua
                                        </option>
                                        <option value="intern_it"
                                            {{ request()->get('tipe_intern') == 'intern_it' ? 'selected' : '' }}>
                                            Intern IT
                                        </option>
                                        <option value="internship"
                                            {{ request()->get('tipe_intern') == 'internship' ? 'selected' : '' }}>
                                            Internship
                                        </option>
                                        <option value="intern_univ"
                                            {{ request()->get('tipe_intern') == 'intern_univ' ? 'selected' : '' }}>
                                            Intern Univ
                                        </option>
                                    </select>

                                </div>


                            </form>
                            <hr class="horizontal dark mt-0">

                            <p></p>
                            {{-- Hanya bagian ini yang akan terganti --}}
                            <div class="reportit">
                                @include('pages.dashboard.partials.reportit-content')
                            </div>
                            <div class="nav-wrapper" id="noted"><code>Note : <i aria-hidden="true"
                                        style="color: #ffc2cd;" class="fas fa-circle"></i> <i aria-hidden="true"
                                        style="color: #f5365c;" class="fas fa-circle"></i> user belum menambahkan Daily
                                    Activity pada hari ini.</code>
                            </div>

                        </div>
                        <div class="col-12 col-md-1"></div>
                    </div>
                </div>
            </div>

            <style>
                .bar-container {
                    display: flex;
                    gap: 6px;
                    margin-left: 10px;
                }

                .bar {
                    width: 30px;
                    height: 16px;
                    background-color: #ddd;
                    border-radius: 4px;
                    position: relative;
                    overflow: hidden;
                }

                /* background kosong merah lembut saat danger */
                .bar.danger {
                    background-color: #f8d7da;
                    border: 1px solid #f1aeb5;
                }

                .bar-fill {
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 100%;
                }

                .bar-fill.ok {
                    background-color: #28a745;
                }

                /* hijau normal */
                .bar-fill.danger {
                    background-color: #dc3545;
                }

                /* merah saat belum start */
            </style>
        @endif


        <p></p>
        @if (
            $user_login->idroles == 'it.mis' ||
                $user_login->idroles == 'admins' ||
                $user_login->idroles == 'inship' ||
                $user_login->idroles == 'admhrw' ||
                $user_login->idroles == 'admmis')
            <div class="row">
                <div class="col-xl-12 col-sm-12 mb-xl-0 mb-12">
                    <!-- Kolom 8 (col-xl-8 col-sm-12) -->
                    {{-- <div class="col-xl-6 col-sm-12 mb-xl-0 mb-4"> --}}
                    <div class="card">
                        <div class="card-body">
                            <h5 id="judul-it" class="text-uppercase font-weight-bold text-center">
                                Sum of Poin Daily Activity - {{ $it->firstname }}
                            </h5>
                            <hr class="horizontal dark mt-0">
                            <form id="selectIT" method="GET" class="mb-3">
                                <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
                                    @if ($user_login->idroles != 'inship')
                                        <label for="selectUser" class="mb-0 fw-bold">Filter :</label>

                                        <select name="it" id="itname" class="form-select w-10">
                                            @if ($user_login->idroles == 'admins')
                                                <option value="all" {{ $thisuser == 'all' ? 'selected' : '' }}>
                                                    Semua
                                                </option>
                                            @endif
                                            @foreach ($itname as $it)
                                                <option value="{{ $it }}"
                                                    {{ $thisuser == $it ? 'selected' : '' }}>
                                                    {{ $it }}
                                                </option>
                                            @endforeach
                                        </select>
                                    @else
                                        <input type="hidden" name="it" id="itname"
                                            value="{{ session('username') }}">
                                    @endif

                                    {{-- hidden periode, default "now" --}}
                                    <input type="hidden" id="periode" name="periode" value="now">

                                    {{-- Toggle periode di sebelah kanan --}}
                                    <div class="ms-auto btn-group">
                                        <button type="button" class="btn btn-sm btn-periode btn-outline-primary"
                                            data-periode="now" onclick="setPeriode('now')">
                                            Periode sekarang
                                        </button>
                                        <button type="button" class="btn btn-sm btn-periode btn-outline-primary"
                                            data-periode="prev" onclick="setPeriode('prev')">
                                            Sebelumnya
                                        </button>
                                    </div>

                                </div>
                            </form>

                            @if ($user_login->idroles != 'inship')
                                <hr class="horizontal dark mt-0">

                                {{-- Chart Line Source: Asset, Ticketing, Magang --}}
                                <div id="chart-line-source" style="height: 375px;"></div>
                                <div id="chart-source-empty" style="height: 375px;"
                                    class="text-center text-muted py-4 d-none">
                                    <strong>Maaf</strong> - Data tidak ditemukan!
                                </div>
                            @endif

                            <hr class="horizontal dark mt-0">

                            <div id="chart-bar-sop" style="height: 375px;">
                            </div>
                            <div id="chart-sop-empty" style="height: 375px;" class="text-center text-muted py-4 d-none">
                                <strong>Maaf</strong> - Data tidak ditemukan!
                            </div>

                            <hr class="horizontal dark mt-0">
                            <div id="chart-bar-kategori" style="height: 375px;">
                            </div>
                            <div id="chart-kategori-empty" style="height: 375px;"
                                class="text-center text-muted py-4 d-none">
                                <strong>Maaf</strong> - Data tidak ditemukan!
                            </div>
                        </div>
                    </div>
                    {{-- </div> --}}

                </div>
            </div>
        @endif
        <p></p>


        {{-- Total Asset --}}
        @if ($user_login->idroles == 'guest')
            <div class="row">
                <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
                    <div class="card">
                        <a href="{{ url('scpusx') }}" class="card-link">
                            <div class="card-body p-3">
                                <div class="row">
                                    <div class="col-8">
                                        <div class="numbers">
                                            <p class="text-sm mb-0 text-uppercase font-weight-bold">Total CPU/Mini
                                                PC/Notebook</p>
                                            <h5 class="font-weight-bolder">
                                                {{ $cpu }}
                                            </h5>
                                            <p class="mb-0">
                                                <span
                                                    class="text-success text-sm font-weight-bolder">+{{ $cpuadd }}pcs</span>
                                                this week
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col-4 text-end">
                                        <div
                                            class="icon icon-shape bg-gradient-primary shadow-primary text-center rounded-circle">
                                            <i class="fa fa-server"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
                    <div class="card">
                        <a href="{{ url('smntor') }}" class="card-link">
                            <div class="card-body p-3">
                                <div class="row">
                                    <div class="col-8">
                                        <div class="numbers">
                                            <p class="text-sm mb-0 text-uppercase font-weight-bold">Total Monitor</p>
                                            <h5 class="font-weight-bolder">
                                                {{ $monitor }}
                                            </h5>
                                            <p class="mb-0">
                                                <span class="text-success text-sm font-weight-bolder">+{{ $monitoradd }}
                                                    pcs</span>
                                                this week
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col-4 text-end">
                                        <div
                                            class="icon icon-shape bg-gradient-danger shadow-danger text-center rounded-circle">
                                            <i class="fa fa-desktop" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
                    <div class="card">
                        <a href="{{ url('sprint') }}" class="card-link">
                            <div class="card-body p-3">
                                <div class="row">
                                    <div class="col-8">
                                        <div class="numbers">
                                            <p class="text-sm mb-0 text-uppercase font-weight-bold">Total Printer</p>
                                            <h5 class="font-weight-bolder">
                                                {{ $printer }}
                                            </h5>
                                            <p class="mb-0">
                                                <span class="text-success text-sm font-weight-bolder">+{{ $printeradd }}
                                                    pcs </span>
                                                this week
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col-4 text-end">
                                        <div
                                            class="icon icon-shape bg-gradient-success shadow-success text-center rounded-circle">
                                            <i class="fa fa-print" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <br>

            <div class="row">
                <div class="col-xl-4 col-sm-6">
                    <div class="card">
                        <a href="{{ url('sswtch') }}" class="card-link">
                            <div class="card-body p-3">
                                <div class="row">
                                    <div class="col-8">
                                        <div class="numbers">
                                            <p class="text-sm mb-0 text-uppercase font-weight-bold">Total Switch</p>
                                            <h5 class="font-weight-bolder">
                                                {{ $switch }}
                                            </h5>
                                            <p class="mb-0">
                                                <span
                                                    class="text-success text-sm font-weight-bolder">+{{ $switchadd }}pcs</span>
                                                this week
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col-4 text-end">
                                        <div
                                            class="icon icon-shape bg-gradient-warning shadow-warning text-center rounded-circle">
                                            <i class="fa fa-diagram-project" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-xl-4 col-sm-6">
                    <div class="card">
                        <a href="{{ url('sscanr') }}" class="card-link">
                            <div class="card-body p-3">
                                <div class="row">
                                    <div class="col-8">
                                        <div class="numbers">
                                            <p class="text-sm mb-0 text-uppercase font-weight-bold">Total Scanner</p>
                                            <h5 class="font-weight-bolder">
                                                {{ $scanner }}
                                            </h5>
                                            <p class="mb-0">
                                                <span class="text-success text-sm font-weight-bolder">+{{ $scanneradd }}
                                                    pcs</span> this week
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col-4 text-end">
                                        <div
                                            class="icon icon-shape bg-gradient-warning shadow-warning text-center rounded-circle">
                                            <i class="fa fa-qrcode" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-xl-4 col-sm-6">
                    <div class="card">
                        <a href="{{ url('sswtch') }}" class="card-link">
                            <div class="card-body p-3">
                                <div class="row">
                                    <div class="col-8">
                                        <div class="numbers">
                                            <p class="text-sm mb-0 text-uppercase font-weight-bold">Total Others</p>
                                            <h5 class="font-weight-bolder">
                                                {{ $others }}
                                            </h5>
                                            <p class="mb-0">
                                                <span
                                                    class="text-success text-sm font-weight-bolder">+{{ $switchadd }}pcs</span>
                                                this week
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col-4 text-end">
                                        <div
                                            class="icon icon-shape bg-gradient-warning shadow-warning text-center rounded-circle">
                                            <i class="fa fa-diagram-project" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        @endif


        <br>
        {{-- Notification --}}
        <div class="row mt-4">
            @if ($user_login->idroles == 'admins')
                <div class="col-lg-6 mb-lg-0 mb-4 notification-container" style="max-height: 700px; overflow-y: auto;">
                    <div class="card z-index-2" style="background-color: #008080">

                        <div class="card-header pb-0 pt-3 bg-transparent">
                            <h6 class="text-capitalize" style="color: white">Notification - License</h6>
                            @forelse($licenses as $license)
                                @php
                                    $daysUntilExpiry = today()->diffInDays(Carbon\Carbon::parse($license->date));
                                    $isExpired = today() >= Carbon\Carbon::parse($license->date);
                                @endphp

                                @if ($daysUntilExpiry <= 30 && !$isExpired && $license->lifetime == 0)
                                    <div class="card">
                                        <a href="{{ url('licens' . '/show' . '/' . encrypt($license->id)) }}">
                                            <div class="card-body">
                                                <strong class="card-title text-center" style="color: #FF0000;">YOUR
                                                    LICENSE IS GOING EXPIRED!</strong>
                                                <br>
                                                <strong>{{ $license->desc }}</strong> expires on
                                                <strong>{{ \Carbon\Carbon::parse($license->date)->format('d F Y') }}</strong>.
                                                <br>
                                                You should check your license before it expires!
                                            </div>
                                        </a>
                                    </div>
                                @elseif($isExpired && $license->lifetime == 0)
                                    <div class="card">
                                        <a href="{{ url('licens' . '/show' . '/' . encrypt($license->id)) }}">
                                            <div class="card-body">
                                                <strong class="card-title text-center" style="color: #FF0000;">YOUR
                                                    LICENSE HAS EXPIRED!</strong>
                                                <br>
                                                <strong>{{ $license->desc }}</strong> expired on
                                                <strong>{{ \Carbon\Carbon::parse($license->date)->format('d F Y') }}</strong>.
                                                <br>
                                                You should renew your license immediately!
                                            </div>
                                        </a>
                                    </div>
                                    <br>
                                @endif
                            @empty
                                <div class="card">
                                    <div class="card-body">
                                        <strong class="card-title text-center" style="color: #0921f8;">Tidak ada
                                            Notifikasi untuk License !</strong>
                                    </div>

                                </div>
                            @endforelse

                            <br>
                        </div>

                    </div>
                </div>
            @endif

            @if ($user_login->idroles == 'admins' || $user_login->idroles == 'admmis' || $user_login->idroles == 'admhrw')
                <div class="col-lg-6 mb-lg-0 mb-4 notification-container" style="max-height: 700px; overflow-y: auto;">
                    <div class="card z-index-2" style="background-color: #008080">
                        <div class="card-header pb-0 pt-3 bg-transparent">
                            <h6 class="text-capitalize" style="color: white">Notification - Maintenance</h6>
                            @forelse($maintenancesGrouped as $cpuId => $maintenance)
                                @php
                                    $requiresAttention =
                                        $maintenance['cpu_usage'] >= 60 || $maintenance['ram_free'] <= 1;
                                    $diskRequiresAttention = collect($maintenance['disks'])->some(function ($disk) {
                                        return ($disk['flag_disk'] == 0 &&
                                            $disk['name_disk'] !== 'C' &&
                                            $disk['disk_free'] <= 5) || // Kondisi 1
                                            ($disk['flag_disk'] == 1 &&
                                                $disk['name_disk'] === 'C' &&
                                                $disk['disk_free'] <= 5); // Kondisi 2
                                    });
                                @endphp

                                @if ($requiresAttention || $diskRequiresAttention)
                                    <div class="card">
                                        <div class="card-body">
                                            <a
                                                href="{{ url('maintc' . '/show' . '/' . encrypt($maintenance['idtrans'])) }}">
                                                <strong style="color: #FF0000;">URGENT: {{ $maintenance['code_cpu'] }} /
                                                    ({{ $maintenance['dept'] }} - {{ $maintenance['user'] }}) PC
                                                    requires
                                                    immediate attention!</strong>

                                                <p class="card-text" style="font-size: 15px">
                                                    @if ($maintenance['cpu_usage'] >= 60)
                                                        <span style="color: #FF0000;">CPU Usage:
                                                            {{ $maintenance['cpu_usage'] }}%</span>
                                                    @else
                                                        CPU Usage: {{ $maintenance['cpu_usage'] }}%
                                                    @endif
                                                    ||
                                                    @if ($maintenance['ram_free'] <= 1)
                                                        <span style="color: #FF0000;"> RAM Free:
                                                            {{ number_format($maintenance['ram_free'], 2) }}GB</span>
                                                    @else
                                                        RAM Free: {{ $maintenance['ram_free'] }}GB
                                                    @endif

                                                    <br>

                                                    Storage Free:
                                                    @foreach ($maintenance['disks'] as $disk)
                                                        @if (
                                                            ($disk['name_disk'] !== 'C' && $disk['flag_disk'] == 0 && $disk['disk_free'] <= 5) ||
                                                                ($disk['name_disk'] == 'C' && $disk['disk_free'] <= 5))
                                                            {{-- @if (($disk['disk_free'] <= 5 && ($disk['flag_disk'] == 0 && $disk['name_disk'] !== 'C')) || $disk['disk_free'] <= 5) --}}
                                                            <span style="color: #FF0000;">Disk {{ $disk['name_disk'] }}:
                                                                {{ $disk['disk_free'] }} GB</span>
                                                        @else
                                                            Disk {{ $disk['name_disk'] }}: {{ $disk['disk_free'] }} GB
                                                        @endif
                                                    @endforeach

                                                    <br>
                                                    Regular maintenance needed for PC <strong>{{ $maintenance['dept'] }} -
                                                        {{ $maintenance['user'] }}</strong>'s performance!
                                                </p>
                                            </a>
                                        </div>
                                    </div>
                                    <br>
                                @endif
                            @empty
                                <div class="card">
                                    <div class="card-body">
                                        <strong class="card-title text-center" style="color: #0921f8;">Tidak ada
                                            Notifikasi untuk Maintenance !</strong>
                                    </div>
                                </div>
                            @endforelse
                            <br>
                        </div>
                    </div>
                </div>
            @endif
        </div>

        <input type="hidden" id="roles" name="roles" value="{{ $authorize->idroles }}">

        <!-- Modal -->
        <div class="modal fade" id="projectModal" tabindex="-1" aria-labelledby="projectModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="projectModalLabel">Detail Project</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body" style="overflow-x: auto;">
                        <table class="table table-hover" id="projectTable">
                            <thead style="background-color: #00b7bd4f;">
                                <tr>
                                    <th>No. </th>
                                    <th>Project Name</th>
                                    <th style="min-width: 250px; width: 0px;">
                                        PIC</th>
                                    <th>Progress</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody id="projectTableBody">
                                <!-- Data will be dynamically inserted here -->
                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Modal Backup Data --}}
        <div class="modal fade" id="backupModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Detail Backup: <span id="modalTanggal"></span></h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                    </div>
                    <div class="modal-body" style="overflow-x: auto;">

                        <div id="DBStatus" style="display: none;">
                            <table class="table table-hover" id="tableDBStatus">
                                <thead style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th>Server</th>
                                        <th>DB Name</th>
                                        <th>DB File</th>
                                        <th>Schedule Time</th>
                                        <th>Status</th>

                                    </tr>
                                </thead>
                                <tbody id="tbodyDBList"></tbody>
                            </table>
                        </div>


                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Modal Detail Daily --}}
        {{-- <div class="modal fade" id="detailDaily" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <!-- Header dinamis -->
                        <h5 class="modal-title">
                            Detail Daily Activity: <span id="md-title-extra"></span>
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup">X</button>

                    </div>

                    <div class="modal-body" style="overflow-x: auto;">
                        <h7 class="modal-title">
                            <span id="md-pj-mentor"></span>
                        </h7>
                        <hr class="horizontal dark mt-0">
                        <div id="detailDailyWrap">
                            <table class="table table-hover" id="tabledetailDaily" style="width:100%;">
                                <thead style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th>IT Name</th>
                                        <th>Pengerjaan</th>
                                        <th>Start</th>
                                        <th>Finish</th>
                                        <th>Poin</th>
                                    </tr>
                                </thead>
                                <tbody id="tbodyDD"></tbody>
                            </table>
                        </div>
                    </div>

                    <div class="modal-footer d-flex justify-content-between align-items-center">
                        <!-- Footer dinamis -->
                        <small class="text-muted" id="md-laststart">Last Start Date: -</small>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    </div>
                </div>
            </div>
        </div> --}}

        <div class="modal fade" id="detailDaily" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <!-- Header dinamis -->
                        <h5 class="modal-title">
                            Detail Daily Activity: <span id="md-title-extra"></span>
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup">X</button>

                    </div>

                    <div class="modal-body" style="overflow-x: auto;">
                        <p class="text-muted mb-1" id="md-pj-mentor"></p>
                        <hr class="horizontal dark mt-0">

                        {{-- Tab Navigation --}}
                        <ul class="nav nav-tabs mb-0" id="detailDailyTabs" role="tablist">
                            <li class="nav-item" role="presentation" id="tabItemInternIT">
                                <button class="nav-link active" id="tab-dd-it" data-bs-toggle="tab"
                                    data-bs-target="#pane-dd-it" type="button" role="tab">
                                    Detail
                                    <span class="badge bg-primary ms-1" id="badge-count-it">0</span>
                                </button>
                            </li>
                            <li class="nav-item" role="presentation" id="tabItemInt">
                                <button class="nav-link" id="tab-dd-int" data-bs-toggle="tab"
                                    data-bs-target="#pane-dd-int" type="button" role="tab">
                                    Internship
                                    <span class="badge bg-warning ms-1" id="badge-count-int">0</span>
                                </button>
                            </li>
                            <li class="nav-item" role="presentation" id="tabItemIntUniv">
                                <button class="nav-link" id="tab-dd-intuniv" data-bs-toggle="tab"
                                    data-bs-target="#pane-dd-intuniv" type="button" role="tab">
                                    Internship Univ
                                    <span class="badge bg-purple ms-1" id="badge-count-intuniv"
                                        style="background-color:#028284;">0</span>
                                </button>
                            </li>
                        </ul>

                        {{-- Tab Content --}}
                        <div class="tab-content border border-top-0 rounded-bottom p-3" id="detailDailyTabsContent">

                            {{-- Pane 1: Detail (Intern IT) --}}
                            <div class="tab-pane fade show active" id="pane-dd-it" role="tabpanel">
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <small class="text-muted">Username</small>
                                    <span class="badge bg-secondary" id="summary-it">Total Poin: 0 | Jumlah: 0</span>
                                </div>
                                <div class="table-responsive">
                                    <table class="table table-hover" id="tabledetailDaily" style="width:100%;">
                                        <thead style="background-color:#00b7bd4f;">
                                            <tr>
                                                <th>IT Name</th>
                                                <th>Pengerjaan</th>
                                                <th>Start</th>
                                                <th>Finish</th>
                                                <th>Status</th>
                                                <th>Approve</th>
                                                <th>Poin</th>
                                            </tr>
                                        </thead>
                                        <tbody id="tbodyDD"></tbody>
                                    </table>
                                </div>
                            </div>

                            {{-- Pane 2: Detail Internship --}}
                            <div class="tab-pane fade" id="pane-dd-int" role="tabpanel">
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <small class="text-muted">&nbsp;</small>
                                    <span class="badge bg-secondary" id="summary-int">Total Poin: 0 | Jumlah: 0</span>
                                </div>
                                <div class="table-responsive">
                                    <table class="table table-hover" id="tabledetailDailyInt" style="width:100%;">
                                        <thead style="background-color:#ffd54f3d;">
                                            <tr>
                                                <th>IT Name</th>
                                                <th>Pengerjaan</th>
                                                <th>Reqby</th>
                                                <th>Start</th>
                                                <th>Finish</th>
                                                <th>Status</th>
                                                <th>Approve</th>
                                                <th>Poin</th>
                                            </tr>
                                        </thead>
                                        <tbody id="tbodyDDInt"></tbody>
                                    </table>
                                </div>
                            </div>

                            {{-- Pane 3: Detail Internship Universitas --}}
                            <div class="tab-pane fade" id="pane-dd-intuniv" role="tabpanel">
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <small class="text-muted">&nbsp;</small>
                                    <span class="badge bg-secondary" id="summary-intuniv">Total Poin: 0 | Jumlah: 0</span>
                                </div>
                                <div class="table-responsive">
                                    <table class="table table-hover" id="tabledetailDailyIntUniv" style="width:100%;">
                                        <thead style="background-color:#7e57c233;">
                                            <tr>
                                                <th>IT Name</th>
                                                <th>Pengerjaan</th>
                                                <th>Start</th>
                                                <th>Finish</th>
                                                <th>Status</th>
                                                <th>Approve</th>
                                                <th>Poin</th>
                                            </tr>
                                        </thead>
                                        <tbody id="tbodyDDIntUniv"></tbody>
                                    </table>
                                </div>
                            </div>

                        </div>{{-- end tab-content --}}
                    </div>

                    <div class="modal-footer d-flex justify-content-between align-items-center">
                        <!-- Footer dinamis -->
                        <small class="text-muted" id="md-laststart">Last Start Date: -</small>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    </div>
                </div>
            </div>
        </div>



    </div>
    <script>
        // console.log('echarts', window.echarts);
        window.chartSopInstance = null;
        window.chartKategoriInstance = null;

        var roles = document.getElementById('roles').value;
        $(document).ready(function() {
            $('#prwTable').DataTable({
                language: {
                    search: "Cari :",
                    lengthMenu: "Tampilkan _MENU_ baris",
                    zeroRecords: "Maaf - Data tidak ada",
                    info: "Data _START_ - _END_ dari _TOTAL_",
                    infoEmpty: "Tidak ada data",
                    infoFiltered: "(pencarian dari _MAX_ data)"
                },
                responsive: true,
                ordering: true,
                columnDefs: [{
                    targets: [0, 1, 3, 4],
                    className: 'text-start'
                }, {
                    targets: 2,
                    className: 'text-center'
                }]
            });

            $('#proTable').DataTable({
                language: {
                    search: "Cari :",
                    lengthMenu: "Tampilkan _MENU_ baris",
                    zeroRecords: "Maaf - Data tidak ada",
                    info: "Data _START_ - _END_ dari _TOTAL_",
                    infoEmpty: "Tidak ada data",
                    infoFiltered: "(pencarian dari _MAX_ data)"
                },
                responsive: true,
                ordering: true,
                columnDefs: [{
                    targets: [0, 1, 3, 4],
                    className: 'text-start'
                }, {
                    targets: 2,
                    className: 'text-center'
                }]
            });

            $('#APOPTable').DataTable({
                language: {
                    search: "Cari :",
                    lengthMenu: "Tampilkan _MENU_ baris",
                    zeroRecords: "Maaf - Data tidak ada",
                    info: "Data _START_ - _END_ dari _TOTAL_",
                    infoEmpty: "Tidak ada data",
                    infoFiltered: "(pencarian dari _MAX_ data)"
                },
                responsive: true,
                ordering: true,
                columnDefs: [{
                    targets: [0, 1, 3, 4],
                    className: 'text-start'
                }, {
                    targets: 2,
                    className: 'text-center'
                }]
            });

            $('#APODTable').DataTable({
                language: {
                    search: "Cari :",
                    lengthMenu: "Tampilkan _MENU_ baris",
                    zeroRecords: "Maaf - Data tidak ada",
                    info: "Data _START_ - _END_ dari _TOTAL_",
                    infoEmpty: "Tidak ada data",
                    infoFiltered: "(pencarian dari _MAX_ data)"
                },
                responsive: true,
                ordering: true,
                columnDefs: [{
                    targets: [0, 1, 3, 4],
                    className: 'text-start'
                }, {
                    targets: 2,
                    className: 'text-center'
                }]
            });

            $('#POOTable').DataTable({
                language: {
                    search: "Cari :",
                    lengthMenu: "Tampilkan _MENU_ baris",
                    zeroRecords: "Maaf - Data tidak ada",
                    info: "Data _START_ - _END_ dari _TOTAL_",
                    infoEmpty: "Tidak ada data",
                    infoFiltered: "(pencarian dari _MAX_ data)"
                },
                responsive: true,
                ordering: true,
                columnDefs: [{
                    targets: [0, 1, 3, 4],
                    className: 'text-start'
                }, {
                    targets: 2,
                    className: 'text-center'
                }]
            });

            const escapeFioriValue = value => $('<div>').text(value ?? '').html();
            const fioriTables = {
                prw: {
                    count: '#countPRW',
                    table: '#prwTable',
                    fields: ['BANFN', 'TXZ01', 'MENGE', 'AFNAM', 'ERDAT']
                },
                pro: {
                    count: '#countPRO',
                    table: '#proTable',
                    fields: ['BANFN', 'TXZ01', 'MENGE', 'AFNAM', 'ERDAT']
                },
                apop: {
                    count: '#countAPOP',
                    table: '#APOPTable',
                    fields: ['BANFN', 'TXZ01', 'MENGE', 'AFNAM', 'AEDAT']
                },
                apod: {
                    count: '#countAPOD',
                    table: '#APODTable',
                    fields: ['BANFN', 'TXZ01', 'MENGE', 'AFNAM', 'AEDAT']
                },
                poo: {
                    count: '#countPOO',
                    table: '#POOTable',
                    fields: ['EBELN', 'TXZ01', 'MENGE', 'AFNAM', 'BEDAT']
                }
            };

            fetch(@json(route('dashboard.fiori-status')), {
                    headers: {
                        Accept: 'application/json'
                    }
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Fiori response tidak tersedia');
                    }

                    return response.json();
                })
                .then(data => {
                    Object.entries(fioriTables).forEach(([key, config]) => {
                        const payload = data[key] ?? {
                            records: [],
                            count: 0,
                            available: false
                        };
                        const countElement = document.querySelector(config.count);
                        countElement.textContent = payload.count ?? 0;

                        if (!payload.available) {
                            countElement.title = 'Data Fiori tidak tersedia';
                        }

                        const table = $(config.table).DataTable();
                        const rows = (payload.records ?? []).map(record =>
                            config.fields.map(field => escapeFioriValue(record[field]))
                        );
                        table.clear().rows.add(rows).draw();
                    });
                })
                .catch(() => {
                    Object.values(fioriTables).forEach(config => {
                        const countElement = document.querySelector(config.count);
                        countElement.textContent = '-';
                        countElement.title = 'Data Fiori gagal dimuat';
                    });
                });

            var cpureal = @json($cpureal);
            // console.log('cpureal', cpureal);
            var project = @json($project ?? []);
            const statusData = @json($statusList ?? []);

            // console.log('statusData', statusData);

            if (roles === 'admins' || roles === 'admhrw' || roles === 'admmis') {

                if (document.getElementById('chart-bar-cpu')) {
                    renderChart(cpureal);
                }

                if (document.getElementById('chart-bar-maintenance')) {
                    chartMaintenance(cpureal);
                }
            }

            if (roles === 'admins' || roles === 'it.mis' || roles === 'inship' || roles === 'admhrw' || roles ===
                'admmis') {


                if (document.getElementById('chart-bar-sop')) {
                    chartSop();
                }

                if (document.getElementById('chart-bar-kategori')) {
                    chartKategori();
                }

                $('#selectBulan').on('change', function() {
                    let bulan = $(this).val();
                    let tahun = document.getElementById('selectTahun').value;
                    let tipeIntern = document.getElementById('selectTipeIntern').value;

                    $('.reportit').html(
                        '<div class="text-center py-3">Memuat data... <div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>'
                    );
                    $.ajax({
                        url: '{{ route('report.it') }}',
                        type: 'GET',
                        data: {
                            bulan: bulan,
                            tahun: tahun,
                            tipe_intern: tipeIntern
                        },
                        success: function(data) {
                            // Ganti isi div yang menampilkan report
                            $('.reportit').html(data);
                        },
                        error: function() {
                            alert('Gagal memuat data.');
                        }
                    });
                });

                $('#selectTahun').on('change', function() {
                    let bulan = document.getElementById('selectBulan').value;
                    let tahun = document.getElementById('selectTahun').value;
                    let tipeIntern = document.getElementById('selectTipeIntern').value;

                    $('.reportit').html(
                        '<div class="text-center py-3">Memuat data... <div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>'
                    );
                    $.ajax({
                        url: '{{ route('report.it') }}',
                        type: 'GET',
                        data: {
                            bulan: bulan,
                            tahun: tahun,
                            tipe_intern: tipeIntern
                        },
                        success: function(data) {
                            // Ganti isi div yang menampilkan report
                            $('.reportit').html(data);
                        },
                        error: function() {
                            alert('Gagal memuat data.');
                        }
                    });
                });

                $('#selectTipeIntern').on('change', function() {
                    let bulan = document.getElementById('selectBulan').value;
                    let tahun = document.getElementById('selectTahun').value;
                    let tipeIntern = $(this).val();

                    $('.reportit').html(
                        '<div class="text-center py-3">Memuat data... <div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>'
                    );
                    $.ajax({
                        url: '{{ route('report.it') }}',
                        type: 'GET',
                        data: {
                            bulan: bulan,
                            tahun: tahun,
                            tipe_intern: tipeIntern
                        },
                        success: function(data) {
                            // Ganti isi div yang menampilkan report
                            $('.reportit').html(data);
                        },
                        error: function() {
                            alert('Gagal memuat data.');
                        }
                    });
                });

                $('#selectIT').on('change', function() {
                    let it = document.getElementById('itname').value;
                    let periode = document.getElementById('periode').value || 'now';

                    $('#chart-line-source').addClass('position-relative').append(
                        '<div class="loading-overlay text-center"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>'
                    );
                    $('#chart-bar-sop').addClass('position-relative').append(
                        '<div class="loading-overlay text-center"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>'
                    );
                    $('#chart-bar-kategori').addClass('position-relative').append(
                        '<div class="loading-overlay text-center"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>'
                    );


                    $.ajax({
                        url: '{{ route('chart.it') }}',
                        type: 'GET',
                        data: {
                            it: it,
                            periode: periode,
                        },
                        success: function(data) {

                            try {
                                // Hapus overlay loading
                                $('#chart-line-source .loading-overlay, #chart-bar-sop .loading-overlay, #chart-bar-kategori .loading-overlay')
                                    .remove();

                                // Tampilkan chart dan sembunyikan pesan kosong
                                $('#chart-source-empty, #chart-sop-empty, #chart-kategori-empty')
                                    .addClass('d-none');
                                $('#chart-line-source, #chart-bar-sop, #chart-bar-kategori')
                                    .removeClass('d-none');


                                // Dispose chart jika sudah ada
                                if (window.chartSourceInstance) {
                                    window.chartSourceInstance.dispose();
                                }
                                if (window.chartSopInstance) {
                                    window.chartSopInstance.dispose();
                                }
                                if (window.chartKategoriInstance) {
                                    window.chartKategoriInstance.dispose();
                                }

                                console.log(data);

                                // Render chart source line (paling atas)
                                window.chartSourceInstance = chartSourceLine(data.sum_source);

                                // Render chart dengan data baru
                                window.chartSopInstance = chartSop(data.sum_month);
                                window.chartKategoriInstance = chartKategori(data
                                    .sop_kat_echarts, data.kategori_labels);

                                // Update judul jika data IT tersedia
                                if (data.it && data.it.firstname) {
                                    $('#judul-it').text('Sum of Poin Daily Activity - ' + data
                                        .it.firstname);
                                }
                            } catch (err) {
                                console.error('Error saat render chart:', err);
                            }
                        },
                        error: function() {
                            $('#chart-line-source .loading-overlay, #chart-bar-sop .loading-overlay, #chart-bar-kategori .loading-overlay')
                                .remove();

                            // Tampilkan chart, sembunyikan pesan kosong
                            $('#chart-line-source, #chart-bar-sop, #chart-bar-kategori')
                                .addClass('d-none');
                            $('#chart-source-empty, #chart-sop-empty, #chart-kategori-empty')
                                .removeClass('d-none');
                        }
                    });
                });

                const currentPeriode = $('#periode').val() || 'now';
                updatePeriodeButtons(currentPeriode); // biar UI awalnya bener
                $('#selectIT').trigger('change');

            }

            if (roles === 'admins' || roles === 'it.mis' || roles === 'inship' || roles === 'admmis' || roles !=
                'guest') {

                if (document.getElementById('projectChart')) {
                    chartProject(project);
                }

            }
        });

        function updatePeriodeButtons(value) {
            // reset semua tombol ke outline
            // $('.btn-periode')
            //     .removeClass('btn-primary')
            //     .addClass('btn-outline-primary');

            // // aktifkan tombol yang sesuai value
            // $('.btn-periode[data-periode="' + value + '"]')
            //     .removeClass('btn-outline-primary')
            //     .addClass('btn-primary');
            $('.btn-periode').each(function() {
                const btnValue = $(this).data('periode'); // "now" / "prev"

                if (btnValue === value) {
                    $(this).addClass('periode-active');
                } else {
                    $(this).removeClass('periode-active');
                }
            });
        }



        function setPeriode(value) {
            // set value hidden input
            $('#periode').val(value);
            updatePeriodeButtons(value);
            // trigger change supaya pakai AJAX yg sama
            $('#selectIT').trigger('change');
        }

        // opsional: auto-submit kalau IT diganti
        // document.getElementById('itname')?.addEventListener('change', function() {
        //     document.getElementById('selectIT').submit();
        // });
        if (roles === 'admins' || roles === 'it.mis' || roles === 'admhrw' || roles === 'inship' || roles === 'admmis') {
            //tampil per kategori

            function chartKategori(sop_kat_echarts, kategori_labels) {
                // Gunakan data yang diterima
                const rawData = sop_kat_echarts ?? [];
                const kategoriLabelMap = kategori_labels ?? {};

                // Warna custom kategori (user-defined)
                const warnaKategori = {
                    'APK': '#1E90FF',
                    'TSIX': '#87CEFA',
                    'WEBX': '#FF69B4',
                    'SNS': '#40E0D0',
                    'SERV': '#FFB6C1',
                    'SAPX': '#32CD32',
                    'OTHE': '#FFD700',
                    'JAVA': '#FF6347',
                    'APPL': '#00CED1',
                    'CCTV': '#FFA500',
                    'HARD': '#7FFFD4',
                    'MAGA': '#00FA9A',
                    'NETW': '#ADD8E6',
                    'SOFT': '#F08080',
                    'VIRUS': '#FF8C69',
                    'WINDOWS': '#00BFFF',
                    'INT': '#1E90FF',
                    'INV': '#00CED1',
                    'GEN': '#32CD32'
                };

                // Ambil kategori dan bulan unik
                const kategoriSet = new Set(rawData.map(row => row.kategori));
                const bulanSet = new Set(rawData.map(row => row.bulan));
                const kategoriList = Array.from(kategoriSet).sort();
                const bulanList = Array.from(bulanSet).sort();

                // Buat series per kategori
                const series = kategoriList.map(kat => {
                    const label = kategoriLabelMap[kat] || kat;
                    const warna = warnaKategori[kat] || undefined;
                    const data = bulanList.map(bulan => {
                        const item = rawData.find(row => row.bulan === bulan && row.kategori === kat);
                        return item ? parseFloat(item.poin.toFixed(2)) : 0;
                    });

                    return {
                        name: label,
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 6,
                        itemStyle: {
                            color: warna
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: data
                    };
                });

                // Urutkan berdasarkan total poin tertinggi
                series.sort((a, b) => {
                    const totalA = a.data.reduce((sum, val) => sum + val, 0);
                    const totalB = b.data.reduce((sum, val) => sum + val, 0);
                    return totalB - totalA;
                });

                // Ambil legend sesuai urutan series
                const legendData = series.map(s => s.name);

                // Render chart
                const chartDom = document.getElementById('chart-bar-kategori');
                if (!chartDom) return;

                const myChart = echarts.getInstanceByDom(chartDom) || echarts.init(chartDom);
                const option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    legend: {
                        data: legendData,
                        type: 'scroll',
                        orient: 'horizontal',
                        top: 0, // Letakkan legend di atas
                        left: 'center',
                        padding: [10, 0, 0, 0], // Tambahkan padding agar tidak terlalu dekat dengan atas
                        textStyle: {
                            fontSize: 12
                        }
                    },
                    grid: {
                        top: 60, // Sesuaikan jarak grid dengan legend
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: bulanList
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: series
                };

                myChart.setOption(option);
                window.addEventListener('resize', () => myChart.resize());
                return myChart;
            }

            //tampil total poin
            function chartSop(sum_month) {

                // const sopRaw = Object.values(@json($sum_month ?? []));
                const sopRaw = sum_month ?? [];


                const sop_months = sopRaw.map(item => item.month);
                const sop_C = sopRaw.map(item => parseFloat(item.C).toFixed(1));



                var chartDom = document.getElementById('chart-bar-sop');
                var myChart = echarts.init(chartDom);

                var option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function(params) {
                            let total = 0;
                            let tooltip = params[0].axisValue + '<br/>';
                            params.forEach(p => {
                                total += p.value;
                            });
                            params.forEach(p => {
                                tooltip +=
                                    `${p.marker} ${p.seriesName}: ${p.value} <br/>`;
                            });
                            return tooltip;
                        }
                    },
                    legend: {
                        data: ['Complete']
                    },
                    xAxis: {
                        type: 'category',
                        data: sop_months
                    },
                    yAxis: {
                        type: 'value',
                        max: function(value) {
                            return Math.ceil(value.max * 1.1); // kasih ruang 10%
                        }
                    },
                    series: [{
                            name: 'Complete',
                            type: 'bar',
                            stack: 'total',
                            data: sop_C,
                            itemStyle: {
                                color: '#2ecc71'
                            },
                            label: {
                                show: true,
                                position: 'inside'
                            }
                        }

                    ]
                };

                myChart.setOption(option);
            }

            //Sum of Poin per Source (Asset, Ticketing, Magang)
            function chartSourceLine(sum_source) {
                const raw = Array.isArray(sum_source) ? sum_source : [];

                const chartDom = document.getElementById('chart-line-source');
                if (!chartDom) return;

                const monthMap = {};
                raw.forEach(r => {
                    const key = r.year + '-' + String(r.month_num).padStart(2, '0');
                    if (!monthMap[key]) monthMap[key] = r.month + ' ' + r.year;
                });
                const sortedKeys = Object.keys(monthMap).sort();
                const xLabels = sortedKeys.map(k => monthMap[k]);

                const sources = [{
                        key: 'ticketing',
                        label: 'Ticketing',
                        color: '#1E90FF'
                    },
                    {
                        key: 'asset',
                        label: 'Asset',
                        color: '#FF6347'
                    },
                    {
                        key: 'magang',
                        label: 'Magang',
                        color: '#32CD32'
                    },
                    {
                        key: 'upmaster',
                        label: 'Uploaded',
                        color: '#FF8C00'
                    },
                    {
                        key: 'maintenance',
                        label: 'Maintenance',
                        color: '#008080'
                    },
                    {
                        key: 'maintenance_tsi',
                        label: 'Maintenance TSI',
                        color: '#4682B4'
                    }
                ];

                const series = sources.map(src => {
                    const data = sortedKeys.map(key => {
                        const [yr, mn] = key.split('-');
                        const item = raw.find(r =>
                            r.source_group === src.key &&
                            String(r.year) === yr &&
                            String(r.month_num).padStart(2, '0') === mn
                        );
                        return item ? parseFloat(parseFloat(item.total_poin).toFixed(2)) : 0;
                    });
                    return {
                        name: src.label,
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 7,
                        itemStyle: {
                            color: src.color
                        },
                        lineStyle: {
                            color: src.color,
                            width: 2
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: data
                    };
                });

                const myChart = echarts.getInstanceByDom(chartDom) || echarts.init(chartDom);
                const option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    legend: {
                        data: sources.map(s => s.label),
                        type: 'scroll',
                        orient: 'horizontal',
                        top: 0,
                        left: 'center',
                        padding: [10, 0, 0, 0],
                        textStyle: {
                            fontSize: 12
                        }
                    },
                    grid: {
                        top: 60,
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: xLabels
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: series
                };

                myChart.setOption(option);
                window.addEventListener('resize', () => myChart.resize());
                return myChart;
            }

            document.addEventListener('DOMContentLoaded', () => {
                const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
                tooltipTriggerList.forEach(el => new bootstrap.Tooltip(el));
            });

            function bulanNama(id) {
                // id = "1".."12" (string/number) -> nama bulan Indonesia
                const idx = parseInt(id, 10) - 1;
                const nama = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli',
                    'Agustus', 'September', 'Oktober', 'November', 'Desember'
                ];
                return (idx >= 0 && idx < 12) ? nama[idx] : id;
            }


            function showDetail(btn) {
                const nik = btn.getAttribute('data-nik') || '';
                const username = btn.getAttribute('data-name') || '';
                const poin = btn.getAttribute('data-poin') || '0';
                const lastStart = btn.getAttribute('data-laststart') || '-';
                const nameIt = btn.getAttribute('data-nameit') || '-';
                const rawpj = btn.getAttribute('data-pjname') || '';
                const rawmen = btn.getAttribute('data-mentorname') || '';
                const source = btn.getAttribute('data-source') || ''; // Tambah deteksi source

                var month = $('select[name="bulan"]').val();
                var year = $('select[name="tahun"]').val();

                const clean = (val) => {
                    if (!val) return '';
                    val = val.replace(/\s+/g, ' ').trim(); // buang spasi berlebih & newline
                    if (val.toLowerCase() === 'null' || val.toLowerCase() === 'undefined') return '';
                    return val;
                };
                const pjname = clean(rawpj);
                const mentorname = clean(rawmen);
                let textpjmentor = '';

                if (pjname && mentorname) {
                    textpjmentor = `Penanggung Jawab : ${pjname} – Mentor : ${mentorname}`;
                } else if (pjname) {
                    textpjmentor = `Penanggung Jawab : ${pjname}`;
                } else if (mentorname) {
                    textpjmentor = `Mentor : ${mentorname}`;
                } else {
                    textpjmentor = ''; // tidak tampil
                }

                console.log('pjname',
                    pjname);
                console.log('mentorname',
                    mentorname);


                // Header & footer modal
                document.getElementById('md-title-extra').textContent = `${nameIt} – ${bulanNama(month)} ${year}`;
                document.getElementById('md-pj-mentor').textContent = textpjmentor;
                document.getElementById('md-laststart').textContent = `Last Start Date: ${lastStart}`;

                // tampilkan modal dulu, baru init/adjust datatable
                const $modal = $('#detailDaily');

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });


                $.ajax({
                    url: '{{ route('detdaily') }}',
                    type: 'GET',
                    data: {
                        month: month,
                        year: year,
                        username: username,
                        nik: nik,
                    },
                    success: function(response) {
                        // Cek apakah user adalah Internship
                        const isInternship = response?.is_internship || false;
                        // Cek apakah source adalah magang (Intern Univ)
                        const isInternUniv = source === 'magang';

                        // Show/hide tab berdasarkan role dan source
                        const tabItemInternIT = document.getElementById('tabItemInternIT');
                        const tabItemInt = document.getElementById('tabItemInt');
                        const tabItemIntUniv = document.getElementById('tabItemIntUniv');

                        if (isInternUniv) {
                            // Intern Univ: hanya tab 3
                            if (tabItemInternIT) tabItemInternIT.style.display = 'none';
                            if (tabItemInt) tabItemInt.style.display = 'none';
                            if (tabItemIntUniv) tabItemIntUniv.style.display = '';
                            // aktifkan tab 3
                            new bootstrap.Tab(document.getElementById('tab-dd-intuniv')).show();
                        } else if (isInternship) {
                            // Internship: tab 2 & 3, sembunyikan tab 1
                            if (tabItemInternIT) tabItemInternIT.style.display = 'none';
                            if (tabItemInt) tabItemInt.style.display = '';
                            if (tabItemIntUniv) tabItemIntUniv.style.display = '';
                            // aktifkan tab 2
                            new bootstrap.Tab(document.getElementById('tab-dd-int')).show();
                        } else {
                            // Intern IT: semua tab tampil, aktifkan tab 1
                            if (tabItemInternIT) tabItemInternIT.style.display = '';
                            if (tabItemInt) tabItemInt.style.display = '';
                            if (tabItemIntUniv) tabItemIntUniv.style.display = '';
                            new bootstrap.Tab(document.getElementById('tab-dd-it')).show();
                        }

                        // Helper function untuk format status badge berdasarkan status daily
                        function getStatusBadge(status) {
                            // status: 'D' = Draft, 'P' = In Progress, 'C' = Completed
                            switch (status) {
                                case 'C':
                                    return '<span class="badge bg-success">Completed</span>';
                                case 'P':
                                    return '<span class="badge bg-info">In Progress</span>';
                                case 'D':
                                    return '<span class="badge bg-warning">Draft</span>';
                                default:
                                    return '<span class="badge bg-secondary">Unknown</span>';
                            }
                        }

                        // Helper function untuk format approve badge
                        function getApproveBadge(approve) {
                            if (approve == '1' || approve === 1) {
                                return '<span class="badge bg-success"><i class="fas fa-check"></i> Approved</span>';
                            } else {
                                return '<span class="badge bg-warning"><i class="fas fa-clock"></i> Pending</span>';
                            }
                        }

                        // ========== TABEL 1: Detail (untuk Intern IT) ==========
                        const rows = Array.isArray(response?.detail) ? response.detail : [];
                        const listDetail = rows.map(r => ({
                            NAMA: r.it_name ?? username ?? nameIt ?? '-',
                            PENGERJAAN: r.ket ?? r.pengerjaan ?? '-',
                            START: r.start ?? '-',
                            FINISH: r.finish ?? '-',
                            STATUS_CODE: r.status,
                            APPROVE_CODE: r.approve,
                            STATUS: getStatusBadge(r.status),
                            APPROVE: getApproveBadge(r.approve),
                            POIN: r.poin ?? poin
                        }));
                        console.log('listDetail len:', listDetail.length, listDetail);

                        // ========== TABEL 2: Detail INT (untuk Internship) ==========
                        const rowsInt = Array.isArray(response?.detail_int) ? response.detail_int : [];
                        const listDetailInt = rowsInt.map(r => ({
                            NAMA: r.it_name ?? username ?? nameIt ?? '-',
                            PENGERJAAN: r.ket ?? r.pengerjaan ?? '-',
                            REQBY: r.reqby ?? '-',
                            START: r.start ?? '-',
                            FINISH: r.finish ?? '-',
                            STATUS_CODE: r.status,
                            APPROVE_CODE: r.approve,
                            STATUS: getStatusBadge(r.status),
                            APPROVE: getApproveBadge(r.approve),
                            POIN: r.poin ?? '0'
                        }));
                        console.log('listDetailInt len:', listDetailInt.length, listDetailInt);

                        // ========== TABEL 3: Detail INT Univ ==========
                        const rowsIntUniv = Array.isArray(response?.detail_intuniv) ? response.detail_intuniv :
                            [];
                        const listDetailIntUniv = rowsIntUniv.map(r => ({
                            NAMA: r.name ?? username ?? nameIt ?? '-',
                            PENGERJAAN: r.ket ?? r.pengerjaan ?? '-',
                            START: r.start ?? '-',
                            FINISH: r.finish ?? '-',
                            STATUS_CODE: r.status,
                            APPROVE_CODE: r.approve,
                            STATUS: getStatusBadge(r.status),
                            APPROVE: getApproveBadge(r.approve),
                            POIN: r.poin ?? '0'
                        }));
                        console.log('listDetailIntUniv len:', listDetailIntUniv.length, listDetailIntUniv);

                        // ===== Update badge jumlah & summary total poin =====
                        const sumPoin = (list) => list.reduce((acc, r) => acc + (parseFloat(r.POIN) || 0), 0);
                        const sumPoinStatus = (list, status) => list.reduce(
                            (acc, r) => acc + (r.STATUS_CODE === status ? (parseFloat(r.POIN) || 0) : 0),
                            0
                        );
                        const formatPoin = (value) => Number(value.toFixed(2)).toLocaleString('id-ID');
                        const sumPoinReport = (list) => list.reduce(
                            (acc, r) => acc + (
                                r.STATUS_CODE === 'C' &&
                                (r.APPROVE_CODE == '1' || r.APPROVE_CODE === 1) ?
                                (parseFloat(r.POIN) || 0) : 0
                            ),
                            0
                        );
                        const summaryStatus = (list) =>
                            `Completed: ${formatPoin(sumPoinStatus(list, 'C'))} | ` +
                            `In Progress: ${formatPoin(sumPoinStatus(list, 'P'))} | ` +
                            `Draft: ${formatPoin(sumPoinStatus(list, 'D'))} | ` +
                            `Total: ${formatPoin(sumPoin(list))} | Jumlah: ${list.length}`;

                        const countIT = listDetail.length;
                        const countInt = listDetailInt.length;
                        const countUniv = listDetailIntUniv.length;

                        const el = (id) => document.getElementById(id);
                        if (el('badge-count-it')) el('badge-count-it').textContent = countIT;
                        if (el('badge-count-int')) el('badge-count-int').textContent = countInt;
                        if (el('badge-count-intuniv')) el('badge-count-intuniv').textContent = countUniv;

                        if (el('summary-it')) el('summary-it').textContent = summaryStatus(listDetail);
                        if (el('summary-int')) el('summary-int').textContent = summaryStatus(listDetailInt);
                        if (el('summary-intuniv')) el('summary-intuniv').textContent =
                            summaryStatus(listDetailIntUniv);

                        // helper: init/update DataTable untuk tabel 1
                        function initOrUpdateDT() {
                            // Skip jika user adalah Internship
                            if (isInternship) return;

                            // opsional: render plain rows dulu biar kelihatan walau tanpa DataTables
                            const tbody = document.getElementById('tbodyDD');
                            if (tbody) {
                                tbody.innerHTML = listDetail.length ?
                                    listDetail.map(r =>
                                        `<tr><td>${r.NAMA}</td><td>${r.PENGERJAAN}</td><td>${r.START}</td><td>${r.FINISH}</td><td>${r.STATUS}</td><td>${r.APPROVE}</td><td>${r.POIN}</td></tr>`
                                    )
                                    .join('') :
                                    `<tr><td colspan="7" class="text-center text-muted">Tidak ada data</td></tr>`;
                            }

                            if ($.fn.DataTable.isDataTable('#tabledetailDaily')) {
                                const dt = $('#tabledetailDaily').DataTable();
                                dt.clear().rows.add(listDetail).draw(false);
                                dt.columns.adjust().draw(false);
                            } else {
                                $('#tabledetailDaily').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)"
                                    },
                                    autoWidth: false,
                                    responsive: false,
                                    data: listDetail,
                                    columns: [{
                                            data: 'NAMA'
                                        },
                                        {
                                            data: 'PENGERJAAN'
                                        },
                                        {
                                            data: 'START'
                                        },
                                        {
                                            data: 'FINISH'
                                        },
                                        {
                                            data: 'STATUS',
                                            orderable: false
                                        },
                                        {
                                            data: 'APPROVE',
                                            orderable: false
                                        },
                                        {
                                            data: 'POIN'
                                        }
                                    ]
                                });
                                setTimeout(() => $('#tabledetailDaily').DataTable().columns.adjust().draw(
                                    false), 0);
                            }
                        }

                        // helper: init/update DataTable untuk tabel 2 (Detail INT)
                        function initOrUpdateDTInt() {
                            const tbodyInt = document.getElementById('tbodyDDInt');
                            if (tbodyInt) {
                                tbodyInt.innerHTML = listDetailInt.length ?
                                    listDetailInt.map(r =>
                                        `<tr><td>${r.NAMA}</td><td>${r.PENGERJAAN}</td><td>${r.REQBY}</td><td>${r.START}</td><td>${r.FINISH}</td><td>${r.STATUS}</td><td>${r.APPROVE}</td><td>${r.POIN}</td></tr>`
                                    )
                                    .join('') :
                                    `<tr><td colspan="8" class="text-center text-muted">Tidak ada data</td></tr>`;
                            }

                            if ($.fn.DataTable.isDataTable('#tabledetailDailyInt')) {
                                const dtInt = $('#tabledetailDailyInt').DataTable();
                                dtInt.clear().rows.add(listDetailInt).draw(false);
                                dtInt.columns.adjust().draw(false);
                            } else {
                                $('#tabledetailDailyInt').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)"
                                    },
                                    autoWidth: false,
                                    responsive: false,
                                    data: listDetailInt,
                                    columns: [{
                                            data: 'NAMA'
                                        },
                                        {
                                            data: 'PENGERJAAN'
                                        },
                                        {
                                            data: 'REQBY'
                                        },
                                        {
                                            data: 'START'
                                        },
                                        {
                                            data: 'FINISH'
                                        },
                                        {
                                            data: 'STATUS',
                                            orderable: false
                                        },
                                        {
                                            data: 'APPROVE',
                                            orderable: false
                                        },
                                        {
                                            data: 'POIN'
                                        }
                                    ]
                                });
                                setTimeout(() => $('#tabledetailDailyInt').DataTable().columns.adjust().draw(
                                    false), 0);
                            }
                        }

                        // helper: init/update DataTable untuk tabel 3 (Detail INT Univ)
                        function initOrUpdateDTIntUniv() {
                            const tbodyIntUniv = document.getElementById('tbodyDDIntUniv');
                            if (tbodyIntUniv) {
                                tbodyIntUniv.innerHTML = listDetailIntUniv.length ?
                                    listDetailIntUniv.map(r =>
                                        `<tr><td>${r.NAMA}</td><td>${r.PENGERJAAN}</td><td>${r.START}</td><td>${r.FINISH}</td><td>${r.STATUS}</td><td>${r.APPROVE}</td><td>${r.POIN}</td></tr>`
                                    )
                                    .join('') :
                                    `<tr><td colspan="7" class="text-center text-muted">Tidak ada data</td></tr>`;
                            }

                            if ($.fn.DataTable.isDataTable('#tabledetailDailyIntUniv')) {
                                const dtIntUniv = $('#tabledetailDailyIntUniv').DataTable();
                                dtIntUniv.clear().rows.add(listDetailIntUniv).draw(false);
                                dtIntUniv.columns.adjust().draw(false);
                            } else {
                                $('#tabledetailDailyIntUniv').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)"
                                    },
                                    autoWidth: false,
                                    responsive: false,
                                    data: listDetailIntUniv,
                                    columns: [{
                                            data: 'NAMA'
                                        },
                                        {
                                            data: 'PENGERJAAN'
                                        },
                                        {
                                            data: 'START'
                                        },
                                        {
                                            data: 'FINISH'
                                        },
                                        {
                                            data: 'STATUS',
                                            orderable: false
                                        },
                                        {
                                            data: 'APPROVE',
                                            orderable: false
                                        },
                                        {
                                            data: 'POIN'
                                        }
                                    ]
                                });
                                setTimeout(() => $('#tabledetailDailyIntUniv').DataTable().columns.adjust()
                                    .draw(false), 0);
                            }
                        }

                        // Adjust DataTable columns saat tab di-switch (karena tab tersembunyi tidak dirender)
                        document.querySelectorAll('#detailDailyTabs button[data-bs-toggle="tab"]').forEach(
                            tabBtn => {
                                tabBtn.addEventListener('shown.bs.tab', function() {
                                    if ($.fn.DataTable.isDataTable('#tabledetailDaily')) $(
                                        '#tabledetailDaily').DataTable().columns.adjust().draw(
                                        false);
                                    if ($.fn.DataTable.isDataTable('#tabledetailDailyInt')) $(
                                            '#tabledetailDailyInt').DataTable().columns.adjust()
                                        .draw(false);
                                    if ($.fn.DataTable.isDataTable('#tabledetailDailyIntUniv')) $(
                                            '#tabledetailDailyIntUniv').DataTable().columns.adjust()
                                        .draw(false);
                                });
                            });

                        // jika modal sudah tampil, langsung init; kalau belum, tunggu 'shown'
                        if ($modal.hasClass('show')) {
                            initOrUpdateDT();
                            initOrUpdateDTInt();
                            initOrUpdateDTIntUniv();
                        } else {
                            $modal.one('shown.bs.modal.dtfix', function() {
                                initOrUpdateDT();
                                initOrUpdateDTInt();
                                initOrUpdateDTIntUniv();
                            }).modal('show');
                        }
                    },
                    error: function(xhr) {
                        console.error('AJAX request error:', xhr.responseText);

                        Swal.fire({
                            title: 'Warning!',
                            text: 'Data tidak ditemukan.',
                            icon: 'warning',
                            confirmButtonText: 'OK'
                        });
                    }
                });

            }
        }


        if (roles === 'admins' || roles === 'admhrw' || roles === 'admmis') {
            function renderChart(data) {
                // Mendapatkan tahun sekarang
                const currentYear = new Date().getFullYear();

                // Membuat array berisi tahun sekarang dan dua tahun sebelumnya
                const pastYears = [];
                for (let i = 0; i < 3; i++) {
                    pastYears.push(currentYear - i);
                }

                var listcpu = [];
                var idx = data.length - 3;
                for (var i = data.length - 1; i >= idx; i--) {
                    var obj = {};
                    obj['tahun'] = data[i].tahun;
                    obj['cpu'] = data[i].cpu;
                    obj['laptop'] = data[i].laptop;
                    obj['minipc'] = data[i].minipc;
                    obj['rusak'] = data[i].rusak;
                    obj['baru'] = data[i].baru;
                    obj['aktif'] = data[i].aktif;
                    listcpu.push(obj);
                }


                const chart = echarts.init(document.getElementById('chart-bar-cpu'));

                const option = {
                    baseOption: {
                        timeline: {
                            axisType: 'category',
                            data: pastYears,
                            autoPlay: false,
                            playInterval: 3000,
                            bottom: 20
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        series: []
                    },
                    options: [{
                            title: {
                                text: listcpu[0].tahun + ' (' + listcpu[0].aktif + ')',
                                left: 'center'
                            },
                            legend: {
                                bottom: 0,
                                left: 'center'
                            },
                            series: [{
                                type: 'pie',
                                radius: '50%',
                                center: ['50%', '45%'],
                                label: {
                                    show: true, // Menampilkan label
                                    formatter: '{b}: {c}', // Nama kategori, nilai, dan persentase
                                },
                                data: [{
                                        value: listcpu[0].cpu,
                                        name: 'CPU'
                                    },
                                    {
                                        value: listcpu[0].laptop,
                                        name: 'Notebook'
                                    },
                                    {
                                        value: listcpu[0].minipc,
                                        name: 'Mini PC'
                                    },
                                ],
                            }]
                        },
                        {
                            title: {
                                text: listcpu[1].tahun + ' (' + listcpu[1].aktif + ')',
                                left: 'center'
                            },
                            series: [{
                                type: 'pie',
                                radius: '50%',
                                label: {
                                    show: true, // Menampilkan label
                                    formatter: '{b}: {c}', // Nama kategori, nilai, dan persentase
                                },
                                data: [{
                                        value: listcpu[1].cpu,
                                        name: 'CPU'
                                    },
                                    {
                                        value: listcpu[1].laptop,
                                        name: 'Notebook'
                                    },
                                    {
                                        value: listcpu[1].minipc,
                                        name: 'Mini PC'
                                    },
                                ],
                            }]
                        },
                        {
                            title: {
                                text: listcpu[2].tahun + ' (' + listcpu[2].aktif + ')',
                                left: 'center'
                            },
                            series: [{
                                type: 'pie',
                                radius: '50%',
                                label: {
                                    show: true, // Menampilkan label
                                    formatter: '{b}: {c}', // Nama kategori, nilai, dan persentase
                                },
                                data: [{
                                        value: listcpu[2].cpu,
                                        name: 'CPU'
                                    },
                                    {
                                        value: listcpu[2].laptop,
                                        name: 'Notebook'
                                    },
                                    {
                                        value: listcpu[2].minipc,
                                        name: 'Mini PC'
                                    },
                                ],
                            }]
                        },


                    ],

                };

                chart.setOption(option);
            }

            function chartMaintenance(data) {
                // Mendapatkan tahun sekarang
                const currentYear = new Date().getFullYear();

                // Membuat array berisi tahun sekarang dan dua tahun sebelumnya
                const pastYears = [];
                for (let i = 0; i < 3; i++) {
                    pastYears.push(currentYear - i);
                }

                var listcpu = [];
                var idx = data.length - 3;
                for (var i = data.length - 1; i >= idx; i--) {
                    var obj = {};
                    obj['tahun'] = data[i].tahun;
                    obj['cpu'] = data[i].cpu;
                    obj['laptop'] = data[i].laptop;
                    obj['minipc'] = data[i].minipc;
                    obj['rusak'] = data[i].rusak;
                    obj['baru'] = data[i].baru;
                    obj['aktif'] = data[i].aktif;
                    obj['total'] = data[i].total_maintenance || 0;
                    obj['maintenance'] = data[i].maintenance || 0;
                    obj['sisa_maintenance'] = obj['total'] - obj['maintenance']; // Maintenance yang belum dikerjakan
                    obj['percent_done'] = obj['total'] > 0 ? ((obj['maintenance'] / obj['total']) * 100).toFixed(2) :
                        0; // Persentase pekerjaan

                    obj['ringan'] = data[i].ringan || 0;
                    obj['medium'] = data[i].medium || 0;
                    obj['berat'] = data[i].berat || 0;

                    obj['no'] = data[i].no || 0;
                    obj['terisi'] = data[i].ringan + data[i].medium + data[i].no + data[i].berat;

                    obj['undefined'] = data[i].aktif - obj['terisi'];

                    listcpu.push(obj);
                }

                console.log(listcpu); // Debug untuk memastikan data

                const chart = echarts.init(document.getElementById('chart-bar-maintenance'));

                const option = {
                    baseOption: {
                        timeline: {
                            axisType: 'category',
                            data: pastYears,
                            autoPlay: false,
                            playInterval: 3000,
                            bottom: 20, // Memberikan ruang ekstra untuk timeline di bawah
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        series: []
                    },
                    options: listcpu.map((item) => ({
                        title: {
                            text: `${item.tahun} (${item.aktif})`,
                            left: 'center',
                            textStyle: {
                                fontSize: 18,
                                fontWeight: 'bold',
                            }
                        },
                        grid: {
                            top: '20%',
                            bottom: '10%',
                            left: '5%',
                            right: '5%'
                        },
                        legend: {
                            bottom: 0,
                            left: 'center',
                        },
                        series: [
                            // PIE CHART 1: Kategori Maintenance (Ringan, Medium, Not Maintained)
                            {
                                name: 'Maintenance Categories',
                                type: 'pie',
                                radius: ['25%', '50%'],
                                center: ['25%', '45%'],
                                label: {
                                    show: true,
                                    formatter: '{b}: {c} ({d}%)'
                                },
                                data: [{
                                        value: item.ringan,
                                        name: 'Ringan',
                                        itemStyle: {
                                            color: '#3498db'
                                        }
                                    },
                                    {
                                        value: item.medium,
                                        name: 'Medium',
                                        itemStyle: {
                                            color: '#f39c12'
                                        }
                                    },
                                    {
                                        value: item.berat,
                                        name: 'Berat',
                                        itemStyle: {
                                            color: '#E9967A'
                                        }
                                    },
                                    {
                                        value: item.no,
                                        name: 'Not Maintained',
                                        itemStyle: {
                                            color: '#8e44ad'
                                        }
                                    },
                                    {
                                        value: item.undefined,
                                        name: 'Undefined',
                                        itemStyle: {
                                            color: '#f1c40f'
                                        }
                                    },
                                ]
                            },
                            // PIE CHART 2: Maintenance Progress (Dikerjakan vs. Belum Dikerjakan)
                            {
                                name: 'Maintenance Progress',
                                type: 'pie',
                                radius: ['30%', '50%'],
                                center: ['75%', '45%'],
                                label: {
                                    show: true,
                                    formatter: '{b}: {c} ({d}%)'
                                },
                                data: [{
                                        value: item.maintenance,
                                        name: 'Dikerjakan',
                                        itemStyle: {
                                            color: '#2ecc71'
                                        }
                                    },
                                    {
                                        value: item.sisa_maintenance,
                                        name: 'Belum Dikerjakan',
                                        itemStyle: {
                                            color: '#e74c3c'
                                        }
                                    },
                                ]
                            }
                        ]
                    }))
                };

                chart.setOption(option);
            }
        }

        if (roles === 'admins' || roles === 'it.mis') {


            function chartProject(data) {

                var chartDom = document.getElementById('projectChart');
                var myChart = echarts.init(chartDom);

                const pending = data.P ?? 0;
                const inProgress = data.I ?? 0;
                const finished = data.F ?? 0;
                const totalOutstanding = pending + inProgress;

                var option = {
                    title: {
                        text: `Outstanding Project (${totalOutstanding})`,
                        left: 'center'
                    },
                    color: ['#028284', '#11cdef', '#2dce89'],
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        bottom: '0%',
                        left: 'center'
                    },
                    series: [{
                        name: 'Projects',
                        type: 'pie',
                        label: {
                            formatter: '{b}: {c}' // b = name, c = value
                        },

                        radius: '50%',

                        data: [{
                                value: data.P ?? 0,
                                name: 'Pending'
                            },
                            {
                                value: data.I ?? 0,
                                name: 'In Progress'
                            },
                            {
                                value: data.F ?? 0,
                                name: 'Finished'
                            }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                };

                myChart.setOption(option);

                // Event listener untuk klik
                myChart.on('click', function(params) {
                    // Update modal title
                    document.getElementById('projectModalLabel').textContent = params.name + ' Projects';

                    // Fetch project data based on status (simulasi data)
                    let projects = [];
                    if (params.name === 'Pending') {
                        projects = data.projectsPending;
                    } else if (params.name === 'In Progress') {
                        projects = data.projectsInProgress;
                    } else if (params.name === 'Finished') {
                        projects = data.projectsFinished;
                    }

                    if ($.fn.DataTable.isDataTable('#projectTable')) {
                        $('#projectTable').DataTable().clear().destroy();
                    }
                    // Populate table body
                    const tableBody = document.getElementById('projectTableBody');
                    tableBody.innerHTML = ''; // Clear previous data


                    projects.forEach((project, index) => {
                        let status = '';
                        switch (project.status) {
                            case 'P':
                                status =
                                    '<span class="badge bg-primary">Pending</span>';
                                break;
                            case 'I':
                                status =
                                    '<span class="badge bg-info">In Progress</span>';
                                break;
                            case 'F':
                                status = '<span class="badge bg-success">Finished</span>';
                                break;
                            default:
                                status = '<span class="badge bg-secondary">Unknown</span>';
                        }


                        const row = `
                            <tr>    
                                <td>${index + 1}</td>
                                <td>${project.project}</td>
                                <td style="min-width: 250px; white-space: normal; word-wrap: break-word; word-break: break-word;">${project.pic_name}</td>
                                <td>${project.progress} %</td>
                                <td>${status}</td>
                            </tr>
                        `;
                        tableBody.insertAdjacentHTML('beforeend', row);
                    });



                    // Show modal
                    var modal = new bootstrap.Modal(document.getElementById('projectModal'));
                    modal.show();
                    $('#projectTable').DataTable({
                        language: {
                            search: "Cari :",
                            lengthMenu: "Tampilkan _MENU_ baris",
                            zeroRecords: "Maaf - Data tidak ada",
                            info: "Data _START_ - _END_ dari _TOTAL_",
                            infoFiltered: "(pencarian dari _MAX_ data)"
                        },
                        ordering: true,
                        responsive: true
                    });
                });

            }
            const statusData = @json($statusList ?? []);

            document.querySelectorAll('.status-circle').forEach(circle => {
                circle.addEventListener('click', function() {
                    const tanggal = this.dataset.tanggal;
                    const entry = statusData.find(e => e.tanggal === tanggal);

                    document.getElementById('modalTanggal').innerText = tanggal;

                    const sectionList = document.getElementById('DBStatus');
                    const tbody = document.getElementById('tbodyDBList');

                    // Kosongkan tbody
                    tbody.innerHTML = '';

                    // Sembunyikan jika tidak ada data
                    sectionList.style.display = entry?.list?.length ? 'block' : 'none';

                    // Destroy DataTable jika sudah ada
                    if ($.fn.DataTable.isDataTable('#tableDBStatus')) {
                        $('#tableDBStatus').DataTable().clear().destroy();
                    }


                    // Tambahkan baris data
                    entry.list.forEach(item => {
                        let status = '';
                        switch (item.status) {
                            case 'success':
                                status =
                                    '<span class="badge bg-success">Success</span>';
                                break;
                            case 'Failed':
                                status =
                                    '<span class="badge bg-danger">Failed</span>';
                                break;
                            default:
                                status = '<span class="badge bg-secondary">Unknown</span>';
                        }
                        const row = `
                <tr>    
                    <td>${item.server_lok}</td>
                    <td>${item.db_name}</td>
                    <td>${item.db_file}</td>
                    <td>${item.schedule_time}</td>
                    <td>${status}</td>

                </tr>`;
                        tbody.insertAdjacentHTML('beforeend', row);
                    });

                    // Aktifkan DataTable
                    $('#tableDBStatus').DataTable({
                        responsive: true,
                        ordering: true,
                        language: {
                            search: "Cari:",
                            lengthMenu: "Tampilkan _MENU_ data",
                            zeroRecords: "Tidak ada data",
                            info: "Menampilkan _START_ - _END_ dari _TOTAL_",
                            infoFiltered: "(disaring dari _MAX_ total)"
                        }
                    });

                    // Tampilkan modal
                    const modal = new bootstrap.Modal(document.getElementById('backupModal'));
                    modal.show();
                });
            });


            document.addEventListener('DOMContentLoaded', function() {
                const fmt = new Intl.NumberFormat('id-ID');
                const total = Number({{ $grandTotal ?? 0 }});
                const jmlKat = Number({{ $totalKategori ?? 0 }});
                const undef = Number({{ $undefinedTotal ?? 0 }});

                document.getElementById('kpiTotal').textContent = 'Rp ' + fmt.format(total);


                if (undef > 0) {
                    document.getElementById('kpiUndefined').textContent = 'Rp ' + fmt.format(undef);
                } else {
                    document.getElementById('badgeUndefined').classList.add('d-none');
                }


                // Data dari controller: [{ name: 'LABEL NAME', value: 123.45 }, ...]
                const SOFT_DANGER = '#ffc2cd';
                const pieData = @json($chartPie ?? []);
                const fmtIDR = new Intl.NumberFormat('id-ID');

                const dom = document.getElementById('grChart');
                const chart = echarts.init(dom);

                const pieDataColored = pieData.map(d => {
                    const isUndef = (d.name || '').toLowerCase() === 'undefined';
                    return isUndef ? {
                        ...d,
                        itemStyle: {
                            color: SOFT_DANGER
                        }
                    } : d;
                });
                const option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: (p) => `${p.name}<br/>Rp ${fmtIDR.format(p.value)} (${p.percent}%)`
                    },
                    legend: {
                        type: 'scroll',
                        bottom: 0,
                        // tampilkan label-name di legend
                        data: pieData.map(d => d.name)
                    },
                    series: [{
                        type: 'pie',
                        radius: ['45%', '72%'], // donut
                        center: ['50%', '45%'],
                        label: {
                            show: true,
                            formatter: '{b}'
                        }, // tampilkan nama label di slice
                        emphasis: {
                            scale: true
                        },
                        data: pieDataColored
                    }],
                    // teks tengah untuk total (ringkas)
                    title: [{
                        left: '50%',
                        top: '45%',
                        textAlign: 'center',
                        textVerticalAlign: 'middle',
                        text: 'Rp ' + fmtIDR.format(total),
                        textStyle: {
                            fontSize: 14,
                            fontWeight: 'bold'
                        }
                    }, {
                        left: '50%',
                        top: '60%',
                        textAlign: 'center',
                        textVerticalAlign: 'middle',
                        text: 'Total',
                        textStyle: {
                            fontSize: 12,
                            color: '#888'
                        }
                    }]
                };

                chart.setOption(option);
                window.addEventListener('resize', () => chart.resize());

            });


        }
    </script>

@endsection