@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">APP MSJ ATK</h6>
                        <p class="text-sm"></p>
                    </div>
                </div>
            </div>
        </div>
        @php
            $roles = preg_split('/\s*,\s*/', strtolower((string) $user_login->idroles), -1, PREG_SPLIT_NO_EMPTY);
            $superRoles = ['admins', 'admnga', 'super', 'root', '*', 'all'];
            $isAllAccess = !empty(array_intersect($roles, $superRoles));
            $canAny = function (...$needles) use ($roles, $isAllAccess) {
                return $isAllAccess || !empty(array_intersect($roles, $needles));
            };
        @endphp
        @if (in_array('headss', $roles))
            {{-- @if ($canAny('headss')) --}}
            <div class="row">
                <div class="col-xl-6 col-sm-7 mb-xl-0 mb-4 mt-1">
                    <div class="card">
                        <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">
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#exampleModal9">Order
                                                Belum Disetujui</a>
                                        </p>
                                        <h5 class="font-weight-bolder">
                                            {{ $totalBelumDisetujuiByDepartment }}
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div
                                        class="icon icon-shape bg-gradient-danger shadow-danger text-center rounded-circle">
                                        <i class="ni ni-books text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade bd-example-modal-lg" id="exampleModal9" tabindex="-1"
                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Jumlah Order Dengan Status Belum Disetujui:
                                    {{ $totalBelumDisetujuiByDepartment }}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div id="tableModalWrapper" class="table-responsive">
                                    <table id="tableModal9" class="table table-bordered table-striped">
                                        <thead style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th>Kode Transaksi</th>
                                                <th>Tanggal</th>
                                                <th>Nama</th>
                                                <th>Departemen</th>
                                                <th>Status</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($permintaanBelumDisetujui as $permintaan)
                                                <tr>
                                                    <td>{{ $permintaan->kode }}</td>
                                                    <td>{{ $permintaan->tgl }}</td>
                                                    <td>{{ $permintaan->nama }}</td>
                                                    <td>{{ $permintaan->dpt }}</td>
                                                    <td class="text-center">
                                                        @if ($permintaan->status == 'telah_direvisi')
                                                            <span
                                                                class="badge bg-secondary">{{ str_replace('_', ' ', $permintaan->status) }}</span>
                                                        @elseif($permintaan->status == 'belum_disetujui')
                                                            <span
                                                                class="badge bg-secondary">{{ str_replace('_', ' ', $permintaan->status) }}</span>
                                                        @else
                                                            <span
                                                                class="badge bg-dark">{{ str_replace('_', ' ', $permintaan->status) }}</span>
                                                            <!-- Default color for other statuses -->
                                                        @endif
                                                    </td>
                                                    <td>
                                                        <a href="{{ route('head.show', encrypt($permintaan->kode)) }}"
                                                            class="btn btn-success"><i class="fas fa-eye me-1"></i>View</a>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6 col-sm-7 mb-xl-0 mb-4 mt-1">
                    <div class="card">
                        <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">
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#exampleModal16">Order
                                                Revisi</a>
                                        </p>
                                        <h5 class="font-weight-bolder">
                                            {{ $totalRevisiByDepartment }}
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div
                                        class="icon icon-shape bg-gradient-danger shadow-danger text-center rounded-circle">
                                        <i class="ni ni-books text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade bd-example-modal-lg" id="exampleModal16" tabindex="-1"
                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Jumlah Order Dengan Status Revisi
                                    {{ $totalRevisiByDepartment }}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="card-body">
                                <div id="tableModalWrapper" class="table-responsive">
                                    <div class="modal-body">
                                        <h5 class="font-weight-bolder"></h5>
                                        <table id="tableModal16" class="table table-bordered table-striped">
                                            <thead style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th>Kode Transaksi</th>
                                                    <th>Tanggal</th>
                                                    <th>Nama</th>
                                                    <th>Departemen</th>
                                                    <th>Status</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($permintaanRevisi as $permintaan)
                                                    <tr>
                                                        <td>{{ $permintaan->kode }}</td>
                                                        <td>{{ $permintaan->tgl }}</td>
                                                        <td>{{ $permintaan->nama }}</td>
                                                        <td>{{ $permintaan->dpt }}</td>
                                                        <td class="text-center">
                                                            <span
                                                                class="badge bg-info">{{ str_replace('_', ' ', $permintaan->status) }}</span>
                                                        </td>
                                                        <td>
                                                            <a href="{{ route('head.show', encrypt($permintaan->kode)) }}"
                                                                class="btn btn-success"><i
                                                                    class="fas fa-eye me-1"></i>View</a>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6 col-sm-7 mb-xl-0 mb-4 mt-1">
                    <div class="card">
                        <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">
                                            <a href="#" data-bs-toggle="modal"
                                                data-bs-target="#exampleModal3">Order Posting</a>
                                        </p>
                                        <h5 class="font-weight-bolder">
                                            {{ $totalPostingByDepartment }}
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div
                                        class="icon icon-shape bg-gradient-danger shadow-danger text-center rounded-circle">
                                        <i class="ni ni-books text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade bd-example-modal-lg" id="exampleModal3" tabindex="-1"
                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Jumlah Order Dengan Status Posting
                                    {{ $totalPostingByDepartment }}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="card-body">
                                <div id="tableModalWrapper" class="table-responsive">
                                    <div class="modal-body">
                                        <h5 class="font-weight-bolder"></h5>
                                        <table id="tableModal3" class="table table-bordered table-striped">
                                            <thead style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th>Kode Transaksi</th>
                                                    <th>Tanggal</th>
                                                    <th>Nama</th>
                                                    <th>Departemen</th>
                                                    <th>Status</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($permintaanPosting as $permintaan)
                                                    <tr>
                                                        <td>{{ $permintaan->kode }}</td>
                                                        <td>{{ $permintaan->tgl }}</td>
                                                        <td>{{ $permintaan->nama }}</td>
                                                        <td>{{ $permintaan->dpt }}</td>
                                                        <td class="text-center">
                                                            <span
                                                                class="badge bg-secondary">{{ str_replace('_', ' ', $permintaan->status) }}</span>
                                                        </td>
                                                        <td>
                                                            <a href="{{ route('head.show', encrypt($permintaan->kode)) }}"
                                                                class="btn btn-success"><i
                                                                    class="fas fa-eye me-1"></i>View</a>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6 col-sm-7 mb-xl-0 mb-4 mt-1">
                    <div class="card">
                        <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">
                                            <a href="#" data-bs-toggle="modal"
                                                data-bs-target="#exampleModal4">Order Diproses</a>
                                        </p>
                                        <h5 class="font-weight-bolder">
                                            {{ $totalProsesByDepartment }}
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div
                                        class="icon icon-shape bg-gradient-danger shadow-danger text-center rounded-circle">
                                        <i class="ni ni-books text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade bd-example-modal-lg" id="exampleModal4" tabindex="-1"
                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Jumlah Order Dengan Status Proses
                                    {{ $totalProsesByDepartment }}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="card-body">
                                <div id="tableModalWrapper" class="table-responsive">
                                    <div class="modal-body">
                                        <h5 class="font-weight-bolder"></h5>
                                        <table id="tableModal4" class="table table-bordered table-striped">
                                            <thead style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th>Kode Transaksi</th>
                                                    <th>Tanggal</th>
                                                    <th>Nama</th>
                                                    <th>Departemen</th>
                                                    <th>Status</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($permintaanProses as $permintaan)
                                                    <tr>
                                                        <td>{{ $permintaan->kode }}</td>
                                                        <td>{{ $permintaan->tgl }}</td>
                                                        <td>{{ $permintaan->nama }}</td>
                                                        <td>{{ $permintaan->dpt }}</td>
                                                        <td class="text-center">
                                                            <span
                                                                class="badge bg-info">{{ str_replace('_', ' ', $permintaan->status) }}</span>
                                                        </td>
                                                        <td>
                                                            <a href="{{ route('head.show', encrypt($permintaan->kode)) }}"
                                                                class="btn btn-success"><i
                                                                    class="fas fa-eye me-1"></i>View</a>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @if ($mst_hari_libur->isNotEmpty())
                <div class="container-fluid py-4">
                    <div class="row">
                        <div class="col-md-6" style="margin-left:-20px">
                            <div class="card mb-3 p-2 shadow-sm rounded">
                                <div class="card-header pb-0 p-3">
                                    <h6 class="mb-1" style="text-align:center">JADWAL LIBUR ATK</h6>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="table-responsive bg-white shadow-sm p-3 rounded mb-3">
                                            <table class="table table-bordered mb-0">
                                                <thead class="thead-light">
                                                    <tr>
                                                        <th style="text-align:center">Hari</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($mst_hari_libur as $libur)
                                                        <tr>
                                                            <td style="color:red; border: 1px solid #dee2e6;">
                                                                {{ $libur->nama }}
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="bg-white shadow-sm p-3 rounded">
                                            <p class="mb-3">
                                                Pada hari-hari yang ditetapkan sebagai hari libur ATK, permintaan
                                                approval dan
                                                posting tidak dapat dilakukan.
                                                Namun, admin tetap memiliki akses untuk input permintaan barang pada
                                                program
                                                ini.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        @endif
        @if (in_array('userss', $roles))
            {{-- @if ($canAny('userss')) --}}
            <div class="row">
                <div class="col-xl-4 col-lg-6 col-md-6 mb-3">
                    <div class="card">
                        <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">
                                            <a id="stokModalLink1" href="#">Order Entry</a>
                                        </p>
                                        <h5 class="font-weight-bolder">
                                            {{ $totalEntryByDepartment }}
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div class="icon icon-shape bg-gradient-info shadow-danger text-center rounded-circle">
                                        <i class="ni ni-books text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade bd-example-modal-lg" id="exampleModal1" tabindex="-1"
                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Jumlah Order Dengan Status Entry Ada
                                    {{ $totalEntryByDepartment }}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="card-body">
                                <div id="tableModalWrapper" class="table-responsive">
                                    <div class="modal-body">
                                        <h5 class="font-weight-bolder"></h5>
                                        <table id="tableModal1" class="table table-bordered table-striped">
                                            <thead style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th>Kode Transaksi</th>
                                                    <th>Tanggal</th>
                                                    <th>Nama</th>
                                                    <th>Departemen</th>
                                                    <th>Status</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($permintaanEntry as $permintaan)
                                                    @if ($permintaan->status == 'entry')
                                                        <tr>
                                                            <td>{{ $permintaan->kode }}</td>
                                                            <td>{{ $permintaan->tgl }}</td>
                                                            <td>{{ $permintaan->nama }}</td>
                                                            <td>{{ $permintaan->dpt }}</td>
                                                            <td class="text-center">
                                                                <span class="badge"
                                                                    style="background-color: #fd7e15   ;">{{ $permintaan->status }}</span>
                                                            </td>
                                                            <td>
                                                                <a href="{{ route('permintaan.show', encrypt($permintaan->kode)) }}"
                                                                    class="btn btn-success"><i
                                                                        class="fas fa-eye me-1"></i>View</a>
                                                            </td>
                                                        </tr>
                                                    @endif
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-6 col-md-6 mb-3">
                    <div class="card">
                        <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">
                                            <a href="#" data-bs-toggle="modal"
                                                data-bs-target="#exampleModal16">Order
                                                Revisi</a>
                                        </p>
                                        <h5 class="font-weight-bolder">
                                            {{ $totalRevisiByDepartment }}
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div
                                        class="icon icon-shape bg-gradient-danger shadow-danger text-center rounded-circle">
                                        <i class="ni ni-books text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade bd-example-modal-lg" id="exampleModal16" tabindex="-1"
                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Jumlah Order Dengan Status Revisi
                                    {{ $totalRevisiByDepartment }}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="card-body">
                                <div id="tableModalWrapper" class="table-responsive">
                                    <div class="modal-body">
                                        <h5 class="font-weight-bolder"></h5>
                                        <table id="tableModal16" class="table table-bordered table-striped">
                                            <thead style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th>Kode Transaksi</th>
                                                    <th>Tanggal</th>
                                                    <th>Nama</th>
                                                    <th>Departemen</th>
                                                    <th>Status</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($permintaanRevisi as $permintaan)
                                                    <tr>
                                                        <td>{{ $permintaan->kode }}</td>
                                                        <td>{{ $permintaan->tgl }}</td>
                                                        <td>{{ $permintaan->nama }}</td>
                                                        <td>{{ $permintaan->dpt }}</td>
                                                        <td class="text-center">
                                                            <span
                                                                class="badge bg-info">{{ str_replace('_', ' ', $permintaan->status) }}</span>
                                                        </td>
                                                        <td>
                                                            <a href="{{ route('permintaan.show', encrypt($permintaan->kode)) }}"
                                                                class="btn btn-success"><i
                                                                    class="fas fa-eye me-1"></i>View</a>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-6 col-md-6 mb-3">
                    <div class="card">
                        <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">
                                            <a href="#" data-bs-toggle="modal"
                                                data-bs-target="#exampleModal9">Order
                                                Belum Disetujui</a>
                                        </p>
                                        <h5 class="font-weight-bolder">
                                            {{ $totalBelumDisetujuiByDepartment }}
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div
                                        class="icon icon-shape bg-gradient-danger shadow-danger text-center rounded-circle">
                                        <i class="ni ni-books text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade bd-example-modal-lg" id="exampleModal9" tabindex="-1"
                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Jumlah Order Dengan Status Belum Disetujui:
                                    {{ $totalBelumDisetujuiByDepartment }}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="card-body">
                                <div id="tableModalWrapper" class="table-responsive">
                                    <div class="modal-body">
                                        <h5 class="font-weight-bolder"></h5>
                                        <table id="tableModal9" class="table table-bordered table-striped">
                                            <thead style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th>Kode Transaksi</th>
                                                    <th>Tanggal</th>
                                                    <th>Nama</th>
                                                    <th>Departemen</th>
                                                    <th>Status</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($permintaanBelumDisetujui as $permintaan)
                                                    <tr>
                                                        <td>{{ $permintaan->kode }}</td>
                                                        <td>{{ $permintaan->tgl }}</td>
                                                        <td>{{ $permintaan->nama }}</td>
                                                        <td>{{ $permintaan->dpt }}</td>
                                                        <td class="text-center">
                                                            @if ($permintaan->status == 'telah_direvisi')
                                                                <span
                                                                    class="badge bg-secondary">{{ str_replace('_', ' ', $permintaan->status) }}</span>
                                                            @elseif($permintaan->status == 'belum_disetujui')
                                                                <span
                                                                    class="badge bg-secondary">{{ str_replace('_', ' ', $permintaan->status) }}</span>
                                                            @else
                                                                <span
                                                                    class="badge bg-dark">{{ str_replace('_', ' ', $permintaan->status) }}</span>
                                                                <!-- Default color for other statuses -->
                                                            @endif
                                                        </td>
                                                        <td>
                                                            <a href="{{ route('permintaan.show', encrypt($permintaan->kode)) }}"
                                                                class="btn btn-success"><i
                                                                    class="fas fa-eye me-1"></i>View</a>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-6 col-md-6 mb-3">
                    <div class="card">
                        <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">
                                            <a href="#" data-bs-toggle="modal"
                                                data-bs-target="#exampleModal3">Order
                                                Posting</a>
                                        </p>
                                        <h5 class="font-weight-bolder">
                                            {{ $totalPostingByDepartment }}
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div
                                        class="icon icon-shape bg-gradient-danger shadow-danger text-center rounded-circle">
                                        <i class="ni ni-books text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade bd-example-modal-lg" id="exampleModal3" tabindex="-1"
                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Jumlah Order Dengan Status Posting
                                    {{ $totalPostingByDepartment }}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="card-body">
                                <div id="tableModalWrapper" class="table-responsive">
                                    <div class="modal-body">
                                        <h5 class="font-weight-bolder"></h5>
                                        <table id="tableModal3" class="table table-bordered table-striped">
                                            <thead style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th>Kode Transaksi</th>
                                                    <th>Tanggal</th>
                                                    <th>Nama</th>
                                                    <th>Departemen</th>
                                                    <th>Status</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($permintaanPosting as $permintaan)
                                                    <tr>
                                                        <td>{{ $permintaan->kode }}</td>
                                                        <td>{{ $permintaan->tgl }}</td>
                                                        <td>{{ $permintaan->nama }}</td>
                                                        <td>{{ $permintaan->dpt }}</td>
                                                        <td class="text-center">
                                                            <span
                                                                class="badge bg-secondary">{{ str_replace('_', ' ', $permintaan->status) }}</span>
                                                        </td>
                                                        <td>
                                                            <a href="{{ route('permintaan.show', encrypt($permintaan->kode)) }}"
                                                                class="btn btn-success"><i
                                                                    class="fas fa-eye me-1"></i>View</a>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-6 col-md-6 mb-3">
                    <div class="card">
                        <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">
                                            <a href="#" data-bs-toggle="modal"
                                                data-bs-target="#exampleModal4">Order
                                                Diproses</a>
                                        </p>
                                        <h5 class="font-weight-bolder">
                                            {{ $totalProsesByDepartment }}
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div
                                        class="icon icon-shape bg-gradient-danger shadow-danger text-center rounded-circle">
                                        <i class="ni ni-books text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade bd-example-modal-lg" id="exampleModal4" tabindex="-1"
                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Jumlah Order Dengan Status Proses
                                    {{ $totalProsesByDepartment }}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="card-body">
                                <div id="tableModalWrapper" class="table-responsive">
                                    <div class="modal-body">
                                        <h5 class="font-weight-bolder"></h5>
                                        <table id="tableModal4" class="table table-bordered table-striped">
                                            <thead style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th>Kode Transaksi</th>
                                                    <th>Tanggal</th>
                                                    <th>Nama</th>
                                                    <th>Departemen</th>
                                                    <th>Status</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($permintaanProses as $permintaan)
                                                    <tr>
                                                        <td>{{ $permintaan->kode }}</td>
                                                        <td>{{ $permintaan->tgl }}</td>
                                                        <td>{{ $permintaan->nama }}</td>
                                                        <td>{{ $permintaan->dpt }}</td>
                                                        <td class="text-center">
                                                            <span
                                                                class="badge bg-info">{{ str_replace('_', ' ', $permintaan->status) }}</span>
                                                        </td>
                                                        <td>
                                                            <a href="{{ route('permintaan.show', encrypt($permintaan->kode)) }}"
                                                                class="btn btn-success"><i
                                                                    class="fas fa-eye me-1"></i>View</a>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-6 col-md-6 mb-3">
                    <div class="card">
                        <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">
                                            <a href="#" data-bs-toggle="modal"
                                                data-bs-target="#exampleModal13">Order
                                                Selesai</a>
                                        </p>
                                        <h5 class="font-weight-bolder">
                                            {{ $totalselesaiByDepartment }}
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div
                                        class="icon icon-shape bg-gradient-danger shadow-danger text-center rounded-circle">
                                        <i class="ni ni-books text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade bd-example-modal-lg" id="exampleModal13" tabindex="-1"
                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Jumlah Order Dengan Status Selesai
                                    {{ $totalselesaiByDepartment }}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="card-body">
                                <div id="tableModalWrapper" class="table-responsive">
                                    <div class="modal-body">
                                        <h5 class="font-weight-bolder"></h5>
                                        <table id="tableModal13" class="table table-bordered table-striped">
                                            <thead style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th>Kode Transaksi</th>
                                                    <th>Tanggal</th>
                                                    <th>Nama</th>
                                                    <th>Departemen</th>
                                                    <th>Status</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($permintaanSelesai as $permintaan)
                                                    <tr>
                                                        <td>{{ $permintaan->kode }}</td>
                                                        <td>{{ $permintaan->tgl }}</td>
                                                        <td>{{ $permintaan->nama }}</td>
                                                        <td>{{ $permintaan->dpt }}</td>
                                                        <td class="text-center">
                                                            <span
                                                                class="badge bg-dark">{{ str_replace('_', ' ', $permintaan->status) }}</span>
                                                        </td>
                                                        <td>
                                                            <a href="{{ route('permintaan.show', encrypt($permintaan->kode)) }}"
                                                                class="btn btn-success"><i
                                                                    class="fas fa-eye me-1"></i>View</a>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                @if ($mst_hari_libur->isNotEmpty())
                    <div class="col-md-6">
                        <div class="card mb-3 p-2 shadow-sm rounded">
                            <div class="card-header pb-0 p-3">
                                <h6 class="mb-1" style="text-align:center">JADWAL LIBUR ATK</h6>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="table-responsive bg-white shadow-sm p-3 rounded mb-3">
                                        <table class="table table-bordered mb-0">
                                            <thead class="thead-light">
                                                <tr>
                                                    <th style="text-align:center">Hari</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse ($mst_hari_libur as $libur)
                                                    <tr>
                                                        <td style="color:red; border: 1px solid #dee2e6;">
                                                            {{ $libur->nama }}
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td class="text-center text-muted">Tidak ada hari libur untuk MSJ
                                                            ATK</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="bg-white shadow-sm p-3 rounded">
                                        <p class="mb-3">
                                            Pada hari-hari yang ditetapkan sebagai hari libur ATK, permintaan approval dan
                                            posting tidak dapat dilakukan.
                                            Namun, admin tetap memiliki akses untuk input permintaan barang pada program
                                            ini.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
                <div class="col-md-6">
                    <div class="card mb-0">
                        <div class="card-header pb-0 p-3">
                            <h6 class="mb-1" style="text-align:center">JADWAL PENGAMBILAN ATK</h6>
                            <p class="text-sm"></p>
                        </div>
                        <div class="table-responsive bg-white shadow-sm p-3 rounded ">
                            <table class="table table-bordered mb-0">
                                <thead class="thead-light">
                                    <tr>
                                        <th style="text-align:center">Kode Transaksi</th>
                                        <th style="text-align:center">Jadwal Pengambilan</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($permintaanProses as $proses)
                                        <tr>
                                            <td>{{ $proses->kode }}</td>
                                            <td>{{ \Carbon\Carbon::parse($proses->jadwal_pengambilan)->format('d/m/Y H:i') }}
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td class="text-center text-muted" colspan="2">Tidak ada jadwal pengambilan
                                                ATK</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        @endif
        @if (in_array('admins', $roles ?? []) || in_array('admnga', $roles ?? []))
            {{-- @if ($canAny('admins', 'admnga')) --}}
            <div class="row">
                <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
                    <div class="card">
                        <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">
                                            <a href="{{ url('/msbrng') }}">Total Barang ATK</a>
                                        </p>
                                        <h5 class="font-weight-bolder">
                                            {{ $totalAtk }}
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div class="icon icon-shape bg-gradient-info shadow-danger text-center rounded-circle">
                                        <i class="ni ni-books text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
                    <div class="card">
                        <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">
                                            <a href="{{ url('/sysuser') }}">Total User</a>
                                        </p>
                                        <h5 class="font-weight-bolder">
                                            {{ $totalUser }}
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div
                                        class="icon icon-shape bg-gradient-success shadow-danger text-center rounded-circle">
                                        <i class="ni ni-single-02 text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
                    <div class="card">
                        <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">
                                            <a href="{{ url('/msdprt') }}">Total Departemen</a>
                                        </p>
                                        <h5 class="font-weight-bolder">
                                            {{ $totalDpt }}
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div
                                        class="icon icon-shape bg-gradient-secondary shadow-success text-center rounded-circle">
                                        <i class="ni ni-paper-diploma text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6 col-sm-6 mt-2">
                    <div class="card">
                        <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">
                                            <a id="stokModalLink10" href="#">Total Order Posting</a>
                                        </p>
                                        <h5 class="font-weight-bolder">
                                            {{ $totalPosting }}
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div
                                        class="icon icon-shape bg-gradient-danger shadow-success text-center rounded-circle">
                                        <i class="ni ni-paper-diploma text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade bd-example-modal-lg" id="exampleModal10" tabindex="-1"
                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Jumlah Order yang belum di proses ada
                                    {{ $totalPosting }}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="card-body">
                                <div id="tableModalWrapper" class="table-responsive">
                                    <div class="modal-body">
                                        <h5 class="font-weight-bolder"></h5>
                                        <table id="tableModal10" class="table table-bordered table-striped">
                                            <thead style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th>Kode Transaksi</th>
                                                    <th>Tanggal</th>
                                                    <th>Nama</th>
                                                    <th>Departemen</th>
                                                    <th>Status</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($tr_permintaan_h as $permintaan)
                                                    @if ($permintaan->status == 'posting')
                                                        <tr>
                                                            <td>{{ $permintaan->kode }}</td>
                                                            <td>{{ $permintaan->tgl }}</td>
                                                            <td>{{ $permintaan->nama }}</td>
                                                            <td>{{ $permintaan->dpt }}</td>
                                                            <td class="text-center">
                                                                <span
                                                                    class="badge bg-secondary">{{ $permintaan->status }}</span>
                                                            </td>
                                                            <td>
                                                                <a href="{{ route('transaksi.show', encrypt($permintaan->kode)) }}"
                                                                    class="btn btn-success"><i
                                                                        class="fas fa-eye me-1"></i>View</a>
                                                            </td>
                                                        </tr>
                                                    @endif
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6 col-sm-6 mt-2">
                    <div class="card">
                        <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">
                                            {{-- <a id="stokModalLink11" href="#">Total Stok Tidak Sesuai</a> --}}
                                            <a href="{{ url('/rppyst') }}">Total Stok Tidak Sesuai</a>
                                        </p>
                                        <h5 class="font-weight-bolder text-danger blink-soft">
                                            {{ $stokTidakSesuai }}
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div
                                        class="icon icon-shape bg-gradient-danger shadow-success text-center rounded-circle">
                                        <i class="ni ni-paper-diploma text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade bd-example-modal-lg" id="exampleModal11" tabindex="-1"
                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Jumlah Stok yang tidak sesuai ada
                                    {{ $stokTidakSesuai }}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="card-body">
                                <div id="tableModalWrapper" class="table-responsive">
                                    <div class="modal-body">
                                        <h5 class="font-weight-bolder"></h5>
                                        <table id="tabelmodall11" class="table table-bordered table-striped">
                                            <thead style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th>Idatk</th>
                                                    <th>Nama Barang</th>
                                                    <th>Jumlah Stok</th>
                                                    <th>(TT-TM-TK)</th>
                                                    <th>View</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($stok as $permintaan)
                                                    <tr>
                                                        <td>{{ $permintaan->idatk }}</td>
                                                        <td>{{ $permintaan->nama_barang }}</td>
                                                        <td>{{ $permintaan->jumlah_stok }}</td>
                                                        <td>{{ $permintaan->selisih }}</td>
                                                        <td>
                                                            <a href="{{ url('/rppyst') }}"
                                                                class="btn btn-success mb-0"><i
                                                                    class="fas fa-eye me-1"></i>View
                                                            </a>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container-fluid py-4">
                <div class="row">
                    <div class="col-md-6" style="margin-left:-20px">
                        <div class="card mb-3 p-2 shadow-sm rounded">
                            <div class="card-header pb-0 p-3">
                                <h6 class="mb-1" style="text-align:center">JADWAL LIBUR ATK</h6>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="table-responsive bg-white shadow-sm p-3 rounded mb-3">
                                        <table class="table table-bordered mb-0">
                                            <thead class="thead-light">
                                                <tr>
                                                    <th style="text-align:center">Hari</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse ($mst_hari_libur as $libur)
                                                    <tr>
                                                        <td style="color:red; border: 1px solid #dee2e6;">
                                                            {{ $libur->nama }}
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td class="text-center text-muted">Tidak ada hari libur untuk MSJ
                                                            ATK</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="bg-white shadow-sm p-3 rounded">
                                        <p class="mb-3">
                                            Pada hari-hari yang ditetapkan sebagai hari libur ATK, permintaan approval dan
                                            posting tidak dapat dilakukan.
                                            Namun, admin tetap memiliki akses untuk input permintaan barang pada program
                                            ini.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card mb-0" style="margin-right:-40px">
                            <div class="card-header pb-0 p-3">
                                <h6 class="mb-1" style="text-align:center">JADWAL PENGAMBILAN ATK</h6>
                                <p class="text-sm"></p>
                            </div>
                            <div class="table-responsive bg-white shadow-sm p-3 rounded ">
                                <table class="table table-bordered mb-0">
                                    <thead class="thead-light">
                                        <tr>
                                            <th style="text-align:center">Kode Transaksi</th>
                                            <th style="text-align:center">Departemen</th>
                                            <th style="text-align:center">Jadwal Pengambilan</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($semuaproses as $proses)
                                            <tr>
                                                <td>{{ $proses->kode }}</td>
                                                <td>{{ $proses->dpt }}</td>
                                                <td>{{ \Carbon\Carbon::parse($proses->jadwal_pengambilan)->format('d/m/Y H:i') }}
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td class="text-center text-muted" colspan="2">Tidak ada jadwal
                                                    pengambilan
                                                    ATK</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
        @if (in_array('rpuphr', $roles))
            {{-- @if ($canAny('rpuphr')) --}}
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="row mx-1">
                            <div class="card">
                                <div class="row px-4 py-2 gx-3">
                                    <div class="row g-2 align-items-end mb-3" id="filterForm">
                                        <div class="col-6 col-md-3">
                                            <label for="bulan" class="form-label">Bulan</label>
                                            <select name="bulan" id="bulan" class="form-select">
                                                @foreach ($months as $num => $name)
                                                    <option value="{{ $num }}" @selected((int) $bulan === (int) $num)>
                                                        {{ $name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-6 col-md-3">
                                            <label for="tahun" class="form-label">Tahun</label>
                                            <select name="tahun" id="tahun" class="form-select">
                                                @foreach ($years as $y)
                                                    <option value="{{ $y }}" @selected((int) $tahun === (int) $y)>
                                                        {{ $y }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-12 col-md-2 d-flex align-items-end">
                                            <button id="btnApply" type="button"
                                                class="btn btn-primary w-60 d-flex align-items-center justify-content-center mt-auto mb-0"
                                                style="height: calc(2.5rem + 2px);">
                                                Terapkan
                                            </button>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12 col-lg-5 mb-4">
                                            <div class="table-responsive">
                                                <table class="table display" id="aa">
                                                    <thead class="thead-light" style="background-color:#00b7bd4f;">
                                                        <tr>
                                                            <th>No</th>
                                                            <th>Departemen</th>
                                                            <th class="text-end">Total Distribusi</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="aa-body">
                                                        <tr>
                                                            <td colspan="3">Memuat…</td>
                                                        </tr>
                                                    </tbody>
                                                    <tfoot>
                                                        <tr>
                                                            <th colspan="2" class="text-end">Total</th>
                                                            <th class="text-end" id="aa-total">Rp 0</th>
                                                        </tr>
                                                    </tfoot>
                                                </table>
                                            </div>
                                        </div>
                                        <div class="col-12 col-lg-7 mb-4">
                                            <div class="card h-100">
                                                <div class="card-header">
                                                    <h6 class="mb-0" id="title-chart">Distribusi Pengeluaran per
                                                        Departemen</h6>
                                                </div>
                                                <div class="card-body">
                                                    <div id="chart-pengeluaran-pie" style="height:420px;"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-lg-12 mb-4">
                                        <div class="card h-100">
                                            <div class="card-header">
                                                <h6 class="mb-0">Distribusi Pengeluaran 12 Bulan Terakhir</h6>
                                            </div>
                                            <div class="card-body">
                                                <div id="chartPengeluaranTotal" style="height:420px;"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>

    <div class="modal fade" id="detailHargaModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header py-2">
                    <h5 class="modal-title">Detail Barang</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-sm" id="bb">
                            <thead style="background:#00b7bd4f">
                                <tr>
                                    <th style="width:56px">No</th>
                                    <th>Nama Barang</th>
                                    <th class="text-end">Qty Total</th>
                                    <th class="text-end">Harga</th>
                                    <th class="text-end">Subtotal</th>
                                </tr>
                            </thead>
                            <tbody id="bb-body">
                                <tr>
                                    <td colspan="7">Memuat…</td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th colspan="4" class="text-end">Total</th>
                                    <th class="text-end" id="bb-total">Rp 0</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    {{-- <script>
        (function() {
            const selBulan = document.getElementById('bulan');
            const selTahun = document.getElementById('tahun');
            const btnApply = document.getElementById('btnApply');

            const tbody = document.getElementById('aa-body');
            const totalCell = document.getElementById('aa-total');
            const elChart = document.getElementById('chart-pengeluaran-pie');
            const titleEl = document.getElementById('title-chart');

            if (!elChart || !window.echarts) return;
            if (!elChart.style.height) elChart.style.height = '380px';
            const chart = echarts.init(elChart);

            const API_URL = `{{ route('laporan.pengeluaran-dept.data') }}`;
            const fmtIDR = new Intl.NumberFormat('id-ID', {
                style: 'currency',
                currency: 'IDR',
                maximumFractionDigits: 0
            });

            let dt = null;

            function initDT() {
                if (!window.jQuery || !$.fn.DataTable) return;
                if ($.fn.DataTable.isDataTable('#aa')) $('#aa').DataTable().clear().destroy();
                dt = $('#aa').DataTable({
                    paging: true,
                    pageLength: 10,
                    lengthMenu: [
                        [5, 10, 25, 50, -1],
                        [5, 10, 25, 50, 'All']
                    ],
                    searching: true,
                    info: true,
                    ordering: true,
                    order: [
                        [2, 'desc']
                    ],
                    columnDefs: [{
                        targets: 0,
                        orderable: false,
                        searchable: false
                    }],
                    responsive: true,
                    autoWidth: false,
                    drawCallback: function() {
                        const api = this.api();
                        api.column(0, {
                            search: 'applied',
                            order: 'applied'
                        }).nodes().each((cell, i) => cell.textContent = i + 1);
                    }
                });
            }

            function aggregateByDept(tableRows = [], pieRows = []) {
                const base = [];
                if (Array.isArray(tableRows) && tableRows.length) {
                    for (const r of tableRows) {
                        base.push({
                            name: (r.Departemen ?? '-'),
                            value: Number(r.total_pengeluaran ?? 0) || 0
                        });
                    }
                } else if (Array.isArray(pieRows) && pieRows.length) {
                    for (const r of pieRows) {
                        base.push({
                            name: (r.name ?? '-'),
                            value: Number(r.value ?? 0) || 0
                        });
                    }
                }
                const map = new Map();
                for (const it of base) {
                    const key = String(it.name ?? '-').trim().toUpperCase();
                    const label = String(it.name ?? '-').trim() || '-';
                    const val = Number(it.value || 0);
                    if (map.has(key)) {
                        map.get(key).value += val;
                    } else {
                        map.set(key, {
                            key,
                            name: label,
                            value: val
                        });
                    }
                }
                return Array.from(map.values());
            }

            async function loadData() {
                const qs = new URLSearchParams();
                if (selBulan && selBulan.value) qs.set('bulan', selBulan.value);
                if (selTahun && selTahun.value) qs.set('tahun', selTahun.value);
                const url = `${API_URL}${qs.toString() ? ('?' + qs.toString()) : ''}`;

                if (dt) {
                    dt.clear().destroy();
                    dt = null;
                }
                if (tbody) tbody.innerHTML = `<tr><td colspan="3">Memuat…</td></tr>`;
                if (totalCell) totalCell.textContent = 'Memuat…';

                try {
                    const res = await fetch(url, {
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        credentials: 'same-origin'
                    });
                    const text = await res.text();
                    if (!res.ok) throw new Error(text || `HTTP ${res.status}`);
                    let data;
                    try {
                        data = JSON.parse(text);
                    } catch {
                        throw new Error('Respon bukan JSON');
                    }

                    const agg = aggregateByDept(data.table, data.pieData);
                    agg.sort((a, b) => (b.value || 0) - (a.value || 0));

                    if (!agg.length) {
                        if (tbody) tbody.innerHTML =
                            `<tr><td colspan="3" class="text-center">Tidak ada data</td></tr>`;
                        if (totalCell) totalCell.textContent = fmtIDR.format(0);
                    } else {
                        let total = 0;
                        const rowsHtml = agg.map((row) => {
                            const val = Number(row.value || 0);
                            total += val;
                            return `<tr>
                            <td></td>
                            <td>${row.name}</td>
                            <td class="text-end price-cell"
                            data-value="${val}"
                            data-name="${String(row.name).replace(/"/g,'&quot;')}"
                            role="button" tabindex="0">
                            ${fmtIDR.format(val)}
                        </td>
                        </tr>`;
                        }).join('');
                        if (tbody) tbody.innerHTML = rowsHtml;
                        if (totalCell) totalCell.textContent = fmtIDR.format(total);
                        initDT();
                    }

                    // PIE
                    const namesSorted = agg.map(d => d.name);
                    const legendSelected = {};
                    namesSorted.forEach((n, i) => legendSelected[n] = i < 10);
                    const totalValue = agg.reduce((s, d) => s + (d.value || 0), 0);
                    const legendFormatter = (name) => name;

                    if (titleEl && data.subtitle) {
                        titleEl.textContent = `Distribusi Pengeluaran per Departemen — ${data.subtitle}`;
                    }

                    chart.clear();
                    chart.setOption({
                        title: {
                            text: data.subtitle || '',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: (p) =>
                                `${p.marker} ${p.name}<br/>${fmtIDR.format(p.value)} (${p.percent}%)`
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {
                                    title: 'Unduh PNG'
                                },
                                dataView: {
                                    readOnly: true,
                                    title: 'Lihat Data'
                                },
                                restore: {}
                            }
                        },
                        legend: {
                            type: 'scroll',
                            orient: 'horizontal',
                            bottom: 0,
                            left: 'center',
                            data: namesSorted,
                            selected: legendSelected,
                            formatter: legendFormatter
                        },
                        series: [{
                            name: 'Pengeluaran',
                            type: 'pie',
                            radius: '65%',
                            center: ['50%', '45%'],
                            avoidLabelOverlap: true,
                            label: {
                                show: true,
                                formatter: '{b}: {d}%'
                            },
                            data: agg
                        }]
                    }, true);

                    const cur = new URL(location.href);
                    selBulan && selBulan.value ? cur.searchParams.set('bulan', selBulan.value) : cur.searchParams
                        .delete('bulan');
                    selTahun && selTahun.value ? cur.searchParams.set('tahun', selTahun.value) : cur.searchParams
                        .delete('tahun');
                    history.replaceState(null, '', cur.toString());

                } catch (e) {
                    console.error('[LOAD FAIL]', e);
                    if (tbody) tbody.innerHTML =
                        `<tr><td colspan="3" class="text-danger">Gagal memuat data</td></tr>`;
                    if (totalCell) totalCell.textContent = fmtIDR.format(0);
                }
            }

            btnApply && btnApply.addEventListener('click', loadData);
            const filterForm = document.getElementById('filterForm');
            filterForm && filterForm.addEventListener('submit', (e) => e.preventDefault());
            window.addEventListener('resize', () => chart.resize());

            loadData();
        })();
    </script> --}}

    {{-- <script>
        (function() {
            const selBulan = document.getElementById('bulan');
            const selTahun = document.getElementById('tahun');
            const btnApply = document.getElementById('btnApply');

            const tbody = document.getElementById('aa-body');
            const totalCell = document.getElementById('aa-total');
            const elChart = document.getElementById('chart-pengeluaran-pie');
            const titleEl = document.getElementById('title-chart');

            // Chart opsional: kalau echarts/nggak ada elemen, tabel tetap jalan
            const canChart = !!(elChart && window.echarts);
            const chart = canChart ? echarts.init(elChart) : null;
            if (canChart && !elChart.style.height) elChart.style.height = '380px';

            // Pakai URL relatif (tanpa host) supaya cookie ikut otomatis
            const API_URL = @json(route('laporan.pengeluaran-dept.data', [], false));
            const DETAIL_URL = @json(route('laporan.pengeluaran-dept.detail', [], false));

            const fmtIDR = new Intl.NumberFormat('id-ID', {
                style: 'currency',
                currency: 'IDR',
                maximumFractionDigits: 0
            });

            const esc = s => String(s ?? '')
                .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;').replace(/'/g, '&#39;');

            let dt = null;

            function initDT() {
                if (!window.jQuery || !$.fn.DataTable) return;
                if ($.fn.DataTable.isDataTable('#aa')) $('#aa').DataTable().clear().destroy();
                dt = $('#aa').DataTable({
                    paging: true,
                    pageLength: 10,
                    lengthMenu: [
                        [5, 10, 25, 50, -1],
                        [5, 10, 25, 50, 'All']
                    ],
                    searching: true,
                    info: true,
                    ordering: true,
                    order: [
                        [2, 'desc']
                    ],
                    columnDefs: [{
                        targets: 0,
                        orderable: false,
                        searchable: false
                    }],
                    responsive: true,
                    autoWidth: false,
                    drawCallback: function() {
                        const api = this.api();
                        api.column(0, {
                                search: 'applied',
                                order: 'applied'
                            })
                            .nodes().each((cell, i) => cell.textContent = i + 1);
                    }
                });
            }

            function aggregateByDept(tableRows = [], pieRows = []) {
                const base = [];
                if (Array.isArray(tableRows) && tableRows.length) {
                    for (const r of tableRows) {
                        base.push({
                            name: (r.Departemen ?? '-'),
                            value: Number(r.total_pengeluaran ?? 0) || 0
                        });
                    }
                } else if (Array.isArray(pieRows) && pieRows.length) {
                    for (const r of pieRows) {
                        base.push({
                            name: (r.name ?? '-'),
                            value: Number(r.value ?? 0) || 0
                        });
                    }
                }
                const map = new Map();
                for (const it of base) {
                    const key = String(it.name ?? '-').trim().toUpperCase();
                    const label = String(it.name ?? '-').trim() || '-';
                    const val = Number(it.value || 0);
                    if (map.has(key)) map.get(key).value += val;
                    else map.set(key, {
                        key,
                        name: label,
                        value: val
                    });
                }
                return Array.from(map.values());
            }

            // ====== Modal Detail ======
            function renderDetailToModal(items, fallbackName = '', fallbackValue = 0) {
                const tb = document.getElementById('bb-body');
                const tt = document.getElementById('bb-total');
                if (!tb) return;

                if (!Array.isArray(items) || !items.length) {
                    items = [{
                        name: fallbackName,
                        total: Number(fallbackValue) || 0
                    }];
                }

                let grand = 0;
                tb.innerHTML = items.map((it, i) => {
                    const t = Number(it.total || 0);
                    grand += t;
                    return `
                    <tr>
                    <td>${i+1}</td>
                    <td>${esc(it.name)}</td>
                    <td>${esc(it.qty_total)}</td>
                    <td>${esc(it.harga)}</td>
                    <td class="text-end">${fmtIDR.format(t)}</td>
                    </tr>`;
                }).join('');
                if (tt) tt.textContent = fmtIDR.format(grand);
            }

            // Klik kolom harga → ambil detail & tampilkan modal
            document.addEventListener('click', async (e) => {
                const cell = e.target.closest('.price-cell');
                if (!cell) return;

                const tr = cell.closest('tr');
                const dept = cell.dataset.name || tr?.children?.[1]?.textContent?.trim() || '';
                const val = Number(cell.dataset.value || 0);
                const bulan = selBulan?.value || '';
                const tahun = selTahun?.value || '';

                // buka modal dulu (placeholder)
                const modalEl = document.getElementById('detailHargaModal');
                const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
                document.getElementById('bb-body').innerHTML = `<tr><td colspan="3">Memuat…</td></tr>`;
                document.getElementById('bb-total').textContent = fmtIDR.format(0);
                modal.show();

                // helper error
                const showErr = (msg) => {
                    document.getElementById('bb-body').innerHTML =
                        `<tr><td colspan="3" class="text-danger">${esc(msg)}</td></tr>`;
                    document.getElementById('bb-total').textContent = fmtIDR.format(0);
                };

                try {
                    const url = new URL(DETAIL_URL, window.location.origin);
                    url.searchParams.set('dept', dept);
                    if (bulan) url.searchParams.set('bulan', bulan);
                    if (tahun) url.searchParams.set('tahun', tahun);

                    const res = await fetch(url.toString(), {
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        credentials: 'same-origin'
                    });
                    const text = await res.text();
                    if (!res.ok) {
                        showErr(`Gagal memuat detail (HTTP ${res.status}).`);
                        console.error('DETAIL non-OK:', text);
                        return;
                    }
                    const ct = res.headers.get('content-type') || '';
                    if (!ct.includes('application/json')) {
                        showErr('Respon bukan JSON.');
                        console.warn('DETAIL bukan JSON:', text.slice(0, 300));
                        return;
                    }
                    const items = JSON.parse(text); // ekspektasi: [{name, total}, ...]
                    renderDetailToModal(items, dept, val);
                } catch (err) {
                    console.error('DETAIL fetch error:', err);
                    showErr('Gagal memuat detail.');
                }
            });

            // Akses keyboard (Enter/Space) untuk sel harga
            document.addEventListener('keydown', (e) => {
                const cell = e.target.closest?.('.price-cell');
                if (!cell) return;
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    cell.click();
                }
            });

            // ====== Load Data Tabel + Pie ======
            async function loadData() {
                const qs = new URLSearchParams();
                if (selBulan?.value) qs.set('bulan', selBulan.value);
                if (selTahun?.value) qs.set('tahun', selTahun.value);
                const url = `${API_URL}${qs.toString() ? ('?' + qs.toString()) : ''}`;

                if (dt) {
                    dt.clear().destroy();
                    dt = null;
                }
                tbody.innerHTML = `<tr><td colspan="3">Memuat…</td></tr>`;
                totalCell.textContent = 'Memuat…';

                const showLoadError = (msg) => {
                    console.error('[LOAD FAIL]', msg);
                    tbody.innerHTML = `<tr><td colspan="3" class="text-danger">${esc(msg)}</td></tr>`;
                    totalCell.textContent = fmtIDR.format(0);
                };

                try {
                    const res = await fetch(url, {
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        credentials: 'same-origin'
                    });
                    const text = await res.text();
                    const ct = res.headers.get('content-type') || '';

                    if (!res.ok) return showLoadError(`HTTP ${res.status}. ${text.slice(0, 300)}`);
                    if (!ct.includes('application/json')) return showLoadError(
                        `Respon bukan JSON. Potongan: ${text.slice(0, 300)}`);

                    let data;
                    try {
                        data = JSON.parse(text);
                    } catch {
                        return showLoadError('JSON parse error.');
                    }

                    const agg = aggregateByDept(data.table, data.pieData).sort((a, b) => (b.value || 0) - (a
                        .value || 0));

                    if (!agg.length) {
                        tbody.innerHTML = `<tr><td colspan="3" class="text-center">Tidak ada data</td></tr>`;
                        totalCell.textContent = fmtIDR.format(0);
                    } else {
                        let total = 0;
                        const rowsHtml = agg.map((row) => {
                            const val = Number(row.value || 0);
                            total += val;
                            return `<tr>
                            <td></td>
                            <td>${esc(row.name)}</td>
                            <td class="text-end price-cell"
                                data-value="${val}"
                                data-name="${esc(row.name)}"
                                role="button" tabindex="0">
                            ${fmtIDR.format(val)}
                            </td>
                        </tr>`;
                        }).join('');
                        tbody.innerHTML = rowsHtml;
                        totalCell.textContent = fmtIDR.format(total);
                        initDT();
                    }

                    // PIE (jika echarts tersedia)
                    if (canChart) {
                        const namesSorted = agg.map(d => d.name);
                        const legendSelected = {};
                        namesSorted.forEach((n, i) => legendSelected[n] = i < 10);
                        if (titleEl && data.subtitle) {
                            titleEl.textContent = `Distribusi Pengeluaran per Departemen — ${data.subtitle}`;
                        }
                        chart.clear();
                        chart.setOption({
                            title: {
                                text: data.subtitle || '',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: (p) =>
                                    `${p.marker} ${p.name}<br/>${fmtIDR.format(p.value)} (${p.percent}%)`
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {
                                        title: 'Unduh PNG'
                                    },
                                    dataView: {
                                        readOnly: true,
                                        title: 'Lihat Data'
                                    },
                                    restore: {}
                                }
                            },
                            legend: {
                                type: 'scroll',
                                orient: 'horizontal',
                                bottom: 0,
                                left: 'center',
                                data: namesSorted,
                                selected: legendSelected,
                                formatter: (name) => name
                            },
                            series: [{
                                name: 'Pengeluaran',
                                type: 'pie',
                                radius: '65%',
                                center: ['50%', '45%'],
                                avoidLabelOverlap: true,
                                label: {
                                    show: true,
                                    formatter: '{b}: {d}%'
                                },
                                data: agg
                            }]
                        }, true);
                    }

                    // sinkron querystring
                    const cur = new URL(location.href);
                    selBulan?.value ? cur.searchParams.set('bulan', selBulan.value) : cur.searchParams.delete(
                        'bulan');
                    selTahun?.value ? cur.searchParams.set('tahun', selTahun.value) : cur.searchParams.delete(
                        'tahun');
                    history.replaceState(null, '', cur.toString());

                } catch (e) {
                    showLoadError(e.message || e);
                }
            }

            btnApply && btnApply.addEventListener('click', loadData);
            const filterForm = document.getElementById('filterForm');
            filterForm && filterForm.addEventListener('submit', (e) => e.preventDefault());
            canChart && window.addEventListener('resize', () => chart.resize());

            loadData();
        })();
    </script> --}}

    <script>
        (function() {
            const selBulan = document.getElementById('bulan');
            const selTahun = document.getElementById('tahun');
            const btnApply = document.getElementById('btnApply');

            const tbody = document.getElementById('aa-body');
            const totalCell = document.getElementById('aa-total');
            const elChart = document.getElementById('chart-pengeluaran-pie');
            const titleEl = document.getElementById('title-chart');

            // Chart opsional
            const canChart = !!(elChart && window.echarts);
            const chart = canChart ? echarts.init(elChart) : null;
            if (canChart && !elChart.style.height) elChart.style.height = '380px';

            // URL relatif (cookie ikut)
            const API_URL = `{{ route('laporan.pengeluaran-dept.data') }}`;
            const DETAIL_URL = `{{ route('laporan.pengeluaran-dept.detail') }}`;

            const fmtIDR = new Intl.NumberFormat('id-ID', {
                style: 'currency',
                currency: 'IDR',
                maximumFractionDigits: 0
            });
            const fmtINT = new Intl.NumberFormat('id-ID', {
                maximumFractionDigits: 0
            });

            const esc = s => String(s ?? '')
                .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;').replace(/'/g, '&#39;');

            // ==== Pisahkan instance DataTables ====
            let dtMain = null; // #aa
            let dtDetail = null; // #bb

            function initDT() {
                if (!window.jQuery || !$.fn.DataTable) return;
                if ($.fn.DataTable.isDataTable('#aa')) $('#aa').DataTable().clear().destroy();
                dtMain = $('#aa').DataTable({
                    paging: true,
                    pageLength: 10,
                    lengthMenu: [
                        [5, 10, 25, 50, -1],
                        [5, 10, 25, 50, 'All']
                    ],
                    searching: true,
                    info: true,
                    ordering: true,
                    order: [
                        [2, 'desc']
                    ],
                    columnDefs: [{
                        targets: 0,
                        orderable: false,
                        searchable: false
                    }],
                    responsive: true,
                    autoWidth: false,
                    drawCallback: function() {
                        const api = this.api();
                        api.column(0, {
                                search: 'applied',
                                order: 'applied'
                            })
                            .nodes().each((cell, i) => cell.textContent = i + 1);
                    }
                });
            }

            function initDM() {
                if (!window.jQuery || !$.fn.DataTable) return;

                dtDetail = $('#bb').DataTable({
                    paging: true,
                    pageLength: 10,
                    lengthMenu: [
                        [5, 10, 25, 50, -1],
                        [5, 10, 25, 50, 'All']
                    ],
                    searching: true,
                    info: true,
                    ordering: true,
                    order: [
                        [4, 'desc']
                    ], // Subtotal
                    columnDefs: [{
                        targets: 0,
                        orderable: false,
                        searchable: false
                    }],
                    responsive: true,
                    autoWidth: false,
                    drawCallback: function() {
                        const api = this.api();
                        api.column(0, {
                                search: 'applied',
                                order: 'applied'
                            })
                            .nodes().each((cell, i) => cell.textContent = i + 1);
                    }
                });

                // adjust segera setelah init
                setTimeout(() => {
                    if ($.fn.DataTable.isDataTable('#bb')) $('#bb').DataTable().columns.adjust();
                }, 0);
            }

            // sekali saja di-attach secara global (bukan di initDM), tanpa 'once'
            document.getElementById('detailHargaModal')?.addEventListener('shown.bs.modal', () => {
                if ($.fn.DataTable && $.fn.DataTable.isDataTable('#bb')) {
                    $('#bb').DataTable().columns.adjust();
                }
            });


            function aggregateByDept(tableRows = [], pieRows = []) {
                const base = [];
                if (Array.isArray(tableRows) && tableRows.length) {
                    for (const r of tableRows) {
                        base.push({
                            name: (r.Departemen ?? '-'),
                            value: Number(r.total_pengeluaran ?? 0) || 0
                        });
                    }
                } else if (Array.isArray(pieRows) && pieRows.length) {
                    for (const r of pieRows) {
                        base.push({
                            name: (r.name ?? '-'),
                            value: Number(r.value ?? 0) || 0
                        });
                    }
                }
                const map = new Map();
                for (const it of base) {
                    const key = String(it.name ?? '-').trim().toUpperCase();
                    const label = String(it.name ?? '-').trim() || '-';
                    const val = Number(it.value || 0);
                    if (map.has(key)) map.get(key).value += val;
                    else map.set(key, {
                        key,
                        name: label,
                        value: val
                    });
                }
                return Array.from(map.values());
            }

            // ====== Render modal detail ======

            function renderDetailToModal(items, fallbackName = '', fallbackValue = 0) {
                const tb = document.getElementById('bb-body');
                const tt = document.getElementById('bb-total');
                if (!tb) return;

                // destroy lama (aman)
                if ($.fn.DataTable && $.fn.DataTable.isDataTable('#bb')) {
                    $('#bb').DataTable().clear().destroy();
                }

                // fallback jika kosong
                if (!Array.isArray(items) || !items.length) {
                    items = [{
                        name: fallbackName,
                        harga: 0,
                        qty_total: 0,
                        total: Number(fallbackValue) || 0
                    }];
                }

                let grand = 0;
                const rows = items.map((it, i) => {
                    const qtyPerm = Number(it.qty_perm ?? 0);
                    const qtyPeng = Number(it.qty_peng ?? 0);
                    const qtyTotal = Number(it.qty_total ?? (qtyPerm + qtyPeng)); // pakai qty_total atau hitung
                    const harga = Number(it.harga ?? 0);
                    const subtotal = Number(it.total ?? (qtyTotal * harga));

                    grand += subtotal;

                    return `
                   <tr>
                    <td>${i+1}</td>
                    <td>${esc(it.name)}</td>
                    <td class="text-end" data-order="${qtyTotal}">${fmtINT.format(qtyTotal)}</td>
                    <td class="text-end" data-order="${harga}">${fmtIDR.format(harga)}</td>
                    <td class="text-end" data-order="${subtotal}">${fmtIDR.format(subtotal)}</td>
                    </tr>`;
                }).join('');

                tb.innerHTML = rows;
                if (tt) tt.textContent = fmtIDR.format(grand);

                initDM();
                if ($.fn.DataTable && $.fn.DataTable.isDataTable('#bb')) {
                    setTimeout(() => $('#bb').DataTable().columns.adjust(), 0);
                }
            }

            // ===== Klik pada sel total di tabel utama (class .price-cell)
            document.addEventListener('click', async (e) => {
                const cell = e.target.closest('.price-cell');
                if (!cell) return;

                const tr = cell.closest('tr');
                const dept = cell.dataset.name || tr?.children?.[1]?.textContent?.trim() || '';
                const val = Number(cell.dataset.value || 0);
                const bulan = selBulan?.value || '';
                const tahun = selTahun?.value || '';

                // tampilkan modal + placeholder
                const modalEl = document.getElementById('detailHargaModal');
                const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
                document.getElementById('bb-body').innerHTML = `<tr><td colspan="5">Memuat…</td></tr>`;
                document.getElementById('bb-total').textContent = fmtIDR.format(0);
                modal.show();

                const showErr = (msg) => {
                    document.getElementById('bb-body').innerHTML =
                        `<tr><td colspan="5" class="text-danger">${esc(msg)}</td></tr>`;
                    document.getElementById('bb-total').textContent = fmtIDR.format(0);
                };

                try {
                    const url = new URL(DETAIL_URL, window.location.origin);
                    url.searchParams.set('dept', dept);
                    if (bulan) url.searchParams.set('bulan', bulan);
                    if (tahun) url.searchParams.set('tahun', tahun);

                    const res = await fetch(url.toString(), {
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        credentials: 'same-origin'
                    });
                    const text = await res.text();
                    const ct = res.headers.get('content-type') || '';

                    if (!res.ok) return showErr(`Gagal memuat detail (HTTP ${res.status}).`);
                    if (!ct.includes('json')) return showErr('Respon bukan JSON.');

                    const items = JSON.parse(
                        text); // ekspektasi: [{name, harga, qty_total?, qty_perm?, qty_peng?, total?}, ...]
                    renderDetailToModal(items, dept, val);
                } catch (err) {
                    console.error('DETAIL fetch error:', err);
                    showErr('Gagal memuat detail.');
                }
            });


            // ====== Load data utama ======
            async function loadData() {
                const qs = new URLSearchParams();
                if (selBulan?.value) qs.set('bulan', selBulan.value);
                if (selTahun?.value) qs.set('tahun', selTahun.value);
                const url = `${API_URL}${qs.toString() ? ('?' + qs.toString()) : ''}`;

                if (dtMain) {
                    dtMain.clear().destroy();
                    dtMain = null;
                }
                tbody.innerHTML = `<tr><td colspan="3">Memuat…</td></tr>`;
                totalCell.textContent = 'Memuat…';

                const showLoadError = (msg) => {
                    console.error('[LOAD FAIL]', msg);
                    tbody.innerHTML = `<tr><td colspan="3" class="text-danger">${esc(msg)}</td></tr>`;
                    totalCell.textContent = fmtIDR.format(0);
                };

                try {
                    const res = await fetch(url, {
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        credentials: 'same-origin'
                    });
                    const text = await res.text();
                    const ct = res.headers.get('content-type') || '';

                    if (!res.ok) return showLoadError(`HTTP ${res.status}. ${text.slice(0,300)}`);
                    if (!ct.includes('json')) return showLoadError(
                        `Respon bukan JSON. Potongan: ${text.slice(0,300)}`);

                    let data;
                    try {
                        data = JSON.parse(text);
                    } catch {
                        return showLoadError('JSON parse error.');
                    }

                    const agg = aggregateByDept(data.table, data.pieData)
                        .sort((a, b) => (b.value || 0) - (a.value || 0));

                    if (!agg.length) {
                        tbody.innerHTML = `<tr><td colspan="3" class="text-center">Tidak ada data</td></tr>`;
                        totalCell.textContent = fmtIDR.format(0);
                    } else {
                        let total = 0;
                        const rowsHtml = agg.map((row) => {
                            const val = Number(row.value || 0);
                            total += val;
                            return `<tr>
                            <td></td>
                            <td>${esc(row.name)}</td>
                            <td class="text-end price-cell"
                                data-value="${val}"
                                data-name="${esc(row.name)}" data-order="${val}" 
                                role="button" tabindex="0">
                            ${fmtIDR.format(val)}
                            </td>
                        </tr>`;
                        }).join('');
                        tbody.innerHTML = rowsHtml;
                        totalCell.textContent = fmtIDR.format(total);
                        initDT();
                    }

                    if (canChart) {
                        const namesSorted = agg.map(d => d.name);
                        const legendSelected = {};
                        namesSorted.forEach((n, i) => legendSelected[n] = i < 10);
                        if (titleEl && data.subtitle) {
                            titleEl.textContent = `Distribusi Pengeluaran per Departemen — ${data.subtitle}`;
                        }
                        chart.clear();
                        chart.setOption({
                            title: {
                                text: data.subtitle || '',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: (p) =>
                                    `${p.marker} ${p.name}<br/>${fmtIDR.format(p.value)} (${p.percent}%)`
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {
                                        title: 'Unduh PNG'
                                    },
                                    dataView: {
                                        readOnly: true,
                                        title: 'Lihat Data'
                                    },
                                    restore: {}
                                }
                            },
                            legend: {
                                type: 'scroll',
                                orient: 'horizontal',
                                bottom: 0,
                                left: 'center',
                                data: namesSorted,
                                selected: legendSelected,
                                formatter: (name) => name
                            },
                            series: [{
                                name: 'Pengeluaran',
                                type: 'pie',
                                radius: '65%',
                                center: ['50%', '45%'],
                                avoidLabelOverlap: true,
                                label: {
                                    show: true,
                                    formatter: '{b}: {d}%'
                                },
                                data: agg
                            }]
                        }, true);
                    }

                    const cur = new URL(location.href);
                    selBulan?.value ? cur.searchParams.set('bulan', selBulan.value) : cur.searchParams.delete(
                        'bulan');
                    selTahun?.value ? cur.searchParams.set('tahun', selTahun.value) : cur.searchParams.delete(
                        'tahun');
                    history.replaceState(null, '', cur.toString());

                } catch (e) {
                    showLoadError(e.message || e);
                }
            }

            btnApply && btnApply.addEventListener('click', loadData);
            const filterForm = document.getElementById('filterForm');
            filterForm && filterForm.addEventListener('submit', (e) => e.preventDefault());
            canChart && window.addEventListener('resize', () => chart.resize());

            loadData();
        })();
    </script>

    <script>
        (() => {
            const el = document.getElementById('chartPengeluaranTotal');
            const chart = echarts.init(el);

            const monthsLabels = @json($months_labels);
            const totalsOut = @json($totals_out); // pengeluaran
            const totalsIn = @json($totals_in); // penerimaan

            function toIDR(x) {
                try {
                    return new Intl.NumberFormat('id-ID', {
                        style: 'currency',
                        currency: 'IDR',
                        maximumFractionDigits: 0
                    }).format(x || 0);
                } catch {
                    return 'Rp ' + ((x || 0).toLocaleString('id-ID'));
                }
            }

            chart.setOption({
                tooltip: {
                    trigger: 'axis',
                    valueFormatter: v => toIDR(v)
                },
                legend: {
                    data: ['Total Pengeluaran', 'Total Penerimaan'],
                    top: 0
                },
                grid: {
                    left: 50,
                    right: 24,
                    bottom: 50,
                    top: 40
                },
                toolbox: {
                    feature: {
                        saveAsImage: {
                            title: 'Unduh PNG'
                        },
                        dataView: {
                            readOnly: true,
                            title: 'Lihat Data'
                        },
                        magicType: {
                            type: ['line', 'bar']
                        },
                        restore: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    data: monthsLabels
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: v =>
                            v >= 1e9 ? (v / 1e9).toFixed(0) + 'M' : // M ~ Milyar
                            v >= 1e6 ? (v / 1e6).toFixed(0) + 'Jt' : v >= 1e3 ? (v / 1e3).toFixed(0) + 'Rb' : v
                    }
                },
                series: [{
                        name: 'Total Pengeluaran',
                        type: 'line',
                        smooth: true,
                        areaStyle: {
                            opacity: 0.15
                        },
                        data: totalsOut
                    },
                    {
                        name: 'Total Penerimaan',
                        type: 'line',
                        smooth: true,
                        areaStyle: {
                            opacity: 0.10
                        },
                        data: totalsIn
                    }
                ]
            });

            window.addEventListener('resize', () => chart.resize());
        })();
    </script>

    <script>
        $('#tableModal1').DataTable({
            "order": [
                [1, 'asc']
            ],
            "responsive": true,
            "language": {
                "sEmptyTable": "Tidak ada data yang tersedia pada tabel ini",
                "sProcessing": "Sedang memproses...",
                "sLengthMenu": "Tampilkan _MENU_ Data",
                "sZeroRecords": "Tidak ditemukan data yang sesuai",
                "sInfo": "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                "sInfoEmpty": "Menampilkan 0 sampai 0 dari 0 data",
                "sInfoFiltered": "(disaring dari _MAX_ total data)",
                "sInfoPostFix": "",
                "sSearch": "Cari:",
                "sUrl": "",
                "oPaginate": {
                    "sFirst": "Pertama",
                    "sPrevious": "Sebelumnya",
                    "sNext": "Selanjutnya",
                    "sLast": "Terakhir"
                },
                "oAria": {
                    "sSortAscending": ": aktifkan untuk mengurutkan kolom secara ascending",
                    "sSortDescending": ": aktifkan untuk mengurutkan kolom secara descending"
                }
            }
        });

        document.getElementById('stokModalLink1').addEventListener('click', function(event) {
            event.preventDefault();
            $('#exampleModal1').modal('show');
        });

        $('#tableModal4').DataTable({
            "order": [
                [1, 'asc']
            ],
            "responsive": true, // Membuat tabel responsif
            "language": {
                "sEmptyTable": "Tidak ada data yang tersedia pada tabel ini",
                "sProcessing": "Sedang memproses...",
                "sLengthMenu": "Tampilkan _MENU_ Data",
                "sZeroRecords": "Tidak ditemukan data yang sesuai",
                "sInfo": "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                "sInfoEmpty": "Menampilkan 0 sampai 0 dari 0 data",
                "sInfoFiltered": "(disaring dari _MAX_ total data)",
                "sInfoPostFix": "",
                "sSearch": "Cari:",
                "sUrl": "",
                "oPaginate": {
                    "sFirst": "Pertama",
                    "sPrevious": "Sebelumnya",
                    "sNext": "Selanjutnya",
                    "sLast": "Terakhir"
                },
                "oAria": {
                    "sSortAscending": ": aktifkan untuk mengurutkan kolom secara ascending",
                    "sSortDescending": ": aktifkan untuk mengurutkan kolom secara descending"
                }
            }
        });
        document.getElementById('stokModalLink4').addEventListener('click', function(event) {
            event.preventDefault();
            $('#exampleModal4').modal('show'); // Menampilkan modal
        });
    </script>
    <script>
        $('#tableModal3').DataTable({
            "order": [
                [1, 'asc']
            ],
            "responsive": true, // Membuat tabel responsif
            "language": {
                "sEmptyTable": "Tidak ada data yang tersedia pada tabel ini",
                "sProcessing": "Sedang memproses...",
                "sLengthMenu": "Tampilkan _MENU_ Data",
                "sZeroRecords": "Tidak ditemukan data yang sesuai",
                "sInfo": "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                "sInfoEmpty": "Menampilkan 0 sampai 0 dari 0 data",
                "sInfoFiltered": "(disaring dari _MAX_ total data)",
                "sInfoPostFix": "",
                "sSearch": "Cari:",
                "sUrl": "",
                "oPaginate": {
                    "sFirst": "Pertama",
                    "sPrevious": "Sebelumnya",
                    "sNext": "Selanjutnya",
                    "sLast": "Terakhir"
                },
                "oAria": {
                    "sSortAscending": ": aktifkan untuk mengurutkan kolom secara ascending",
                    "sSortDescending": ": aktifkan untuk mengurutkan kolom secara descending"
                }
            }
        });
        document.getElementById('stokModalLink3').addEventListener('click', function(event) {
            event.preventDefault();
            $('#exampleModal3').modal('show');
        });
    </script>
    <script>
        $('#tableModal13').DataTable({
            "order": [
                [1, 'asc']
            ],
            "responsive": true, // Membuat tabel responsif
            "language": {
                "sEmptyTable": "Tidak ada data yang tersedia pada tabel ini",
                "sProcessing": "Sedang memproses...",
                "sLengthMenu": "Tampilkan _MENU_ Data",
                "sZeroRecords": "Tidak ditemukan data yang sesuai",
                "sInfo": "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                "sInfoEmpty": "Menampilkan 0 sampai 0 dari 0 data",
                "sInfoFiltered": "(disaring dari _MAX_ total data)",
                "sInfoPostFix": "",
                "sSearch": "Cari:",
                "sUrl": "",
                "oPaginate": {
                    "sFirst": "Pertama",
                    "sPrevious": "Sebelumnya",
                    "sNext": "Selanjutnya",
                    "sLast": "Terakhir"
                },
                "oAria": {
                    "sSortAscending": ": aktifkan untuk mengurutkan kolom secara ascending",
                    "sSortDescending": ": aktifkan untuk mengurutkan kolom secara descending"
                }
            }
        });
        document.getElementById('stokModalLink13').addEventListener('click', function(event) {
            event.preventDefault();
            $('#exampleModal13').modal('show');
        });
    </script>
    <script>
        $('#tableModal16').DataTable({
            "order": [
                [1, 'asc']
            ],
            "responsive": true, // Membuat tabel responsif
            "language": {
                "sEmptyTable": "Tidak ada data yang tersedia pada tabel ini",
                "sProcessing": "Sedang memproses...",
                "sLengthMenu": "Tampilkan _MENU_ Data",
                "sZeroRecords": "Tidak ditemukan data yang sesuai",
                "sInfo": "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                "sInfoEmpty": "Menampilkan 0 sampai 0 dari 0 data",
                "sInfoFiltered": "(disaring dari _MAX_ total data)",
                "sInfoPostFix": "",
                "sSearch": "Cari:",
                "sUrl": "",
                "oPaginate": {
                    "sFirst": "Pertama",
                    "sPrevious": "Sebelumnya",
                    "sNext": "Selanjutnya",
                    "sLast": "Terakhir"
                },
                "oAria": {
                    "sSortAscending": ": aktifkan untuk mengurutkan kolom secara ascending",
                    "sSortDescending": ": aktifkan untuk mengurutkan kolom secara descending"
                }
            }
        });
        document.getElementById('stokModalLink16').addEventListener('click', function(event) {
            event.preventDefault();
            $('#exampleModal16').modal('show');
        });
    </script>
    <script>
        $('#tableModal9').DataTable({
            "order": [
                [1, 'asc']
            ],
            "responsive": true, // Membuat tabel responsif
            "language": {
                "sEmptyTable": "Tidak ada data yang tersedia pada tabel ini",
                "sProcessing": "Sedang memproses...",
                "sLengthMenu": "Tampilkan _MENU_ Data",
                "sZeroRecords": "Tidak ditemukan data yang sesuai",
                "sInfo": "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                "sInfoEmpty": "Menampilkan 0 sampai 0 dari 0 data",
                "sInfoFiltered": "(disaring dari _MAX_ total data)",
                "sInfoPostFix": "",
                "sSearch": "Cari:",
                "sUrl": "",
                "oPaginate": {
                    "sFirst": "Pertama",
                    "sPrevious": "Sebelumnya",
                    "sNext": "Selanjutnya",
                    "sLast": "Terakhir"
                },
                "oAria": {
                    "sSortAscending": ": aktifkan untuk mengurutkan kolom secara ascending",
                    "sSortDescending": ": aktifkan untuk mengurutkan kolom secara descending"
                }
            }
        });
        document.getElementById('stokModalLink9').addEventListener('click', function(event) {
            event.preventDefault();
            $('#exampleModal9').modal('show');
        });
    </script>
    <script>
        $('#tableModal19').DataTable({
            "order": [
                [1, 'asc']
            ],
            "responsive": true, // Membuat tabel responsif
            "language": {
                "sEmptyTable": "Tidak ada data yang tersedia pada tabel ini",
                "sProcessing": "Sedang memproses...",
                "sLengthMenu": "Tampilkan _MENU_ Data",
                "sZeroRecords": "Tidak ditemukan data yang sesuai",
                "sInfo": "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                "sInfoEmpty": "Menampilkan 0 sampai 0 dari 0 data",
                "sInfoFiltered": "(disaring dari _MAX_ total data)",
                "sInfoPostFix": "",
                "sSearch": "Cari:",
                "sUrl": "",
                "oPaginate": {
                    "sFirst": "Pertama",
                    "sPrevious": "Sebelumnya",
                    "sNext": "Selanjutnya",
                    "sLast": "Terakhir"
                },
                "oAria": {
                    "sSortAscending": ": aktifkan untuk mengurutkan kolom secara ascending",
                    "sSortDescending": ": aktifkan untuk mengurutkan kolom secara descending"
                }
            }
        });
        document.getElementById('stokModalLink19').addEventListener('click', function(event) {
            event.preventDefault();
            $('#exampleModal19').modal('show');
        });
    </script>
    <script>
        $('#tableModal10').DataTable({
            "order": [
                [1, 'asc']
            ],
            "responsive": true, // Membuat tabel responsif
            "language": {
                "sEmptyTable": "Tidak ada data yang tersedia pada tabel ini",
                "sProcessing": "Sedang memproses...",
                "sLengthMenu": "Tampilkan _MENU_ Data",
                "sZeroRecords": "Tidak ditemukan data yang sesuai",
                "sInfo": "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                "sInfoEmpty": "Menampilkan 0 sampai 0 dari 0 data",
                "sInfoFiltered": "(disaring dari _MAX_ total data)",
                "sInfoPostFix": "",
                "sSearch": "Cari:",
                "sUrl": "",
                "oPaginate": {
                    "sFirst": "Pertama",
                    "sPrevious": "Sebelumnya",
                    "sNext": "Selanjutnya",
                    "sLast": "Terakhir"
                },
                "oAria": {
                    "sSortAscending": ": aktifkan untuk mengurutkan kolom secara ascending",
                    "sSortDescending": ": aktifkan untuk mengurutkan kolom secara descending"
                }
            }
        });
        document.getElementById('stokModalLink10').addEventListener('click', function(event) {
            event.preventDefault();
            $('#exampleModal10').modal('show');
        });
    </script>
    <script>
        $('#tabelmodall11').DataTable({
            "order": [
                [1, 'asc']
            ],
            "responsive": true, // Membuat tabel responsif
            "language": {
                "sEmptyTable": "Tidak ada data yang tersedia pada tabel ini",
                "sProcessing": "Sedang memproses...",
                "sLengthMenu": "Tampilkan _MENU_ Data",
                "sZeroRecords": "Tidak ditemukan data yang sesuai",
                "sInfo": "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                "sInfoEmpty": "Menampilkan 0 sampai 0 dari 0 data",
                "sInfoFiltered": "(disaring dari _MAX_ total data)",
                "sInfoPostFix": "",
                "sSearch": "Cari:",
                "sUrl": "",
                "oPaginate": {
                    "sFirst": "Pertama",
                    "sPrevious": "Sebelumnya",
                    "sNext": "Selanjutnya",
                    "sLast": "Terakhir"
                },
                "oAria": {
                    "sSortAscending": ": aktifkan untuk mengurutkan kolom secara ascending",
                    "sSortDescending": ": aktifkan untuk mengurutkan kolom secara descending"
                }
            }
        });
        document.getElementById('stokModalLink11').addEventListener('click', function(event) {
            event.preventDefault();
            $('#exampleModal11').modal('show');
        });
    </script>
    <style>
        .blink-soft {
            animation: softBlink 1.2s ease-in-out infinite;
        }

        @keyframes softBlink {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 0.4;
            }

            100% {
                opacity: 1;
            }
        }
    </style>
@endpush