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

@section('content')
@include('layouts.navbars.auth.topnav', ['title' => ''])


<style>
    .kpi-card {
        transition: transform 0.2s;
    }

    .kpi-card:hover {
        transform: translateY(-5px);
    }

    .status-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    .missing-field {
        display: inline-block;
        background-color: #f8d7da;
        color: #721c24;
        padding: 2px 6px;
        border-radius: 3px;
        font-size: 0.7rem;
        margin-right: 4px;
    }

    .amount-debit {
        color: #e74c3c;
    }

    .amount-credit {
        color: #27ae60;
    }

    .master-alert-card{
    border: 1px solid #dc3545;
    border-radius: 12px;
    overflow: hidden;
}

.master-alert-header{
    background: linear-gradient(135deg,#dc3545,#c82333);
    color:#fff;
    padding:14px 18px;
}

.master-alert-header h6{
    margin:0;
    font-size:1rem;
    font-weight:700;
}

.master-alert-subtitle{
    font-size:.75rem;
    opacity:.9;
}

.master-section{
    border:1px solid #f1c2c7;
    border-radius:10px;
    background:#fff5f5;
    margin-bottom:12px;
}

.master-section summary{
    cursor:pointer;
    list-style:none;
    padding:10px 14px;
    font-size:.90rem;
    font-weight:700;
    color:#b42318;
}

.master-section summary::-webkit-details-marker{
    display:none;
}

.master-item{
    padding:6px 10px;
    border-left:3px solid #dc3545;
    background:#fff;
    border-radius:6px;
    margin-bottom:6px;
}

.master-info{
    font-size:.72rem;
    color:#212529;
    line-height:1.5;
}

.master-name{
    font-weight:600;
}

.master-count{
    background:#dc3545;
    color:#fff;
    font-size:.65rem;
    padding:3px 8px;
    border-radius:20px;
}

.missing-badge{
    background:#f8f9fa;
    color:#343a40;
    border:1px solid #dee2e6;
    font-size:.65rem;
    font-weight:500;
    margin-left:4px;
}

.dp-body {
    overflow-y: auto;
}

.dp-item {
    min-height: 170px; 
}

.dp-body {
    max-height: calc(170px * 2);
}

.over-budget-body {
    overflow-y: auto;
    max-height: calc(170px * 2);
}

.over-budget-item {
    min-height: 170px;
}
</style>


<div class="container-fluid py-4">
    {{-- KPI Cards --}}
    <div class="row">
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
            <div class="card kpi-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">Total Budget</p>
                                <h5 class="font-weight-bolder mb-0">
                                    Rp {{ number_format($kpi['total_budget'], 2, ',', '.') }}
                                </h5>
                                <p class="mb-0 text-xs">
                                    <span class="text-muted">Semua Project Aktif</span>
                                </p>
                            </div>
                        </div>
                        <div class="col-4 text-end">
                            <div class="icon icon-shape bg-gradient-primary shadow-primary text-center rounded-circle">
                                <i class="fas fa-wallet text-lg opacity-10" aria-hidden="true"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        

        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
            <div class="card kpi-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">Total Actual</p>
                                <h5 class="font-weight-bolder mb-0">
                                    Rp {{ number_format($kpi['total_actual'], 2, ',', '.') }}
                                </h5>
                                <p class="mb-0 text-xs">
                                    <span class="text-muted">Realisasi Mutasi</span>
                                </p>
                            </div>
                        </div>
                        <div class="col-4 text-end">
                            <div class="icon icon-shape bg-gradient-info shadow-info text-center rounded-circle">
                                <i class="fas fa-exchange-alt text-lg opacity-10" aria-hidden="true"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
            <div class="card kpi-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">Remaining</p>
                                <h5
                                    class="font-weight-bolder mb-0 {{ $kpi['remaining'] < 0 ? 'text-danger' : 'text-success' }}">
                                    Rp {{ number_format($kpi['remaining'], 2, ',', '.') }}
                                </h5>
                                <p class="mb-0 text-xs">
                                    @if($kpi['remaining'] < 0) <span class="text-danger font-weight-bold">
                                        <i class="fas fa-exclamation-triangle"></i> Over Budget!
                                        </span>
                                        @else
                                        <span class="text-success">Sisa Anggaran</span>
                                        @endif
                                </p>
                            </div>
                        </div>
                        <div class="col-4 text-end">
                            <div
                                class="icon icon-shape {{ $kpi['remaining'] < 0 ? 'bg-gradient-danger' : 'bg-gradient-success' }} shadow-{{ $kpi['remaining'] < 0 ? 'danger' : 'success' }} text-center rounded-circle">
                                <i class="fas fa-{{ $kpi['remaining'] < 0 ? 'arrow-down' : 'arrow-up' }} text-lg opacity-10"
                                    aria-hidden="true"></i>
                            </div>
                        </div>
                            </div>
                        </div>
                    </div>
                </div>

        <div class="col-xl-3 col-sm-6">
            <div class="card kpi-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">% Realisasi</p>
                                <h5 class="font-weight-bolder mb-0">
                                    {{ number_format($kpi['percentage'], 2) }}%
                                </h5>
                                <p class="mb-0 text-xs">
                                    @if($kpi['percentage'] > 100)
                                    <span class="text-danger font-weight-bold">Melebihi Budget</span>
                                    @elseif($kpi['percentage'] >= 80)
                                    <span class="text-warning font-weight-bold">Mendekati Limit</span>
                                    @else
                                    <span class="text-success">Masih Aman</span>
                                    @endif
                                </p>
                            </div>
                        </div>
                        <div class="col-4 text-end">
                            <div class="icon icon-shape bg-gradient-warning shadow-warning text-center rounded-circle">
                                <i class="fas fa-chart-pie text-lg opacity-10" aria-hidden="true"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if($masterIncomplete->count() > 0 || $anomaliMutasiBank->count() > 0 || $dataDoubleProject->count() > 0 || $dataPoNonProject->count() > 0)
    @php
        $totalMaster = $masterIncomplete->sum(fn($x) => count($x));
        $totalAnomali = $anomaliMutasiBank->count() + $dataDoubleProject->count() + $dataPoNonProject->count();
    @endphp
        <div class="row mt-4">
            <div class="col-12">
                <div class="card border-danger shadow-sm mt-4">
                    <div class="card-header text-white" style="background: linear-gradient(135deg, #DC2626, #165b81); padding: 8px 16px;">
                        <h6 class="mb-0 text-white">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            Data Perlu Ditindaklanjuti
                        </h6>
                        <div class="master-alert-subtitle">
                            {{ $totalMaster }} data master belum lengkap | {{ $totalAnomali }} transaksi anomali
                        </div>
                    </div>

                    <div class="card-body">

                        @foreach($masterIncomplete as $master => $items)

                        <details class="mb-3">
                            <summary>
                                Master {{ $master }}
                                <span class="master-count">
                                    {{ count($items) }}
                                </span>
                            </summary>

                            <div class="row mt-2">

                                @foreach($items as $item)
                                @php
                                $encryptedId = encrypt($item['id']);
                                @endphp

                                <div class="col-md-6">

                                    <a href="{{ url($item['menu'].'/edit/'.$encryptedId) }}"
                                    class="text-decoration-none text-dark">
                                        <div class="master-item">
                                            <div class="master-info">

                                                <span class="master-name">
                                                    Nomor {{ $item['id'] }}
                                                </span>

                                                @if(!empty($item['nama']))
                                                    - {{ Str::limit($item['nama'], 25) }}
                                                @endif

                                                :

                                                @foreach($item['missing'] as $field)
                                                    <span class="badge missing-badge">
                                                        {{ $field }}
                                                    </span>
                                                @endforeach

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

                                </div>

                                @endforeach

                            </div>
                        </details>

                        @endforeach

                        @if($anomaliMutasiBank->count() > 0)
                        <details class="mb-3">
                            <summary>
                                Transaksi Mutasi Bank
                                <span class="master-count">
                                    {{ $anomaliMutasiBank->count() }}
                                </span>
                            </summary>

                            <div class="row mt-2">
                                @foreach($anomaliMutasiBank as $item)
                                @php
                                $encryptedId = encrypt($item->id);
                                @endphp

                                <div class="col-md-6">
                                    <a href="{{ url('/trsmts/edit/'.$encryptedId) }}"
                                    class="text-decoration-none text-dark">
                                        <div class="master-item">
                                            <div class="master-info">
                                                <span class="master-name">
                                                    {{ $item->nomor_bukti ?? 'No. '.$item->id }}
                                                </span>
                                                - {{ \Carbon\Carbon::parse($item->date)->format('d/m/Y') }}
                                                - {{ $item->rekening_nama ?? '-' }}
                                                :
                                                @foreach($item->anomali as $anomali)

            <span class="badge missing-badge">

                {{ $anomali['nama'] }}

                

                @if(!is_null($anomali['nominal']))
                    : Rp {{ number_format($anomali['nominal'],0,',','.') }}
                @endif
                @if(!is_null($anomali['rate']))
                     ({{ number_format($anomali['rate'],2) }}%)
                @endif

            </span>

        @endforeach
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                @endforeach
                            </div>
                        </details>
                        @endif

                        @if($dataDoubleProject->count() > 0)
                        <details class="mb-3">
                            <summary>
                                Transaksi Project Tidak Sama Antara Mutasi dan PO
                                <span class="master-count">
                                    {{ $dataDoubleProject->count() }}
                                </span>
                            </summary>

                            <div class="row mt-2">
                                @foreach($dataDoubleProject as $item)
                                @php
                                $encryptedId = encrypt($item['id']);
                                @endphp

                                <div class="col-md-6">
                                    <a href="{{ url('/trsmts/edit/'.$encryptedId) }}"
                                    class="text-decoration-none text-dark">
                                        <div class="master-item">
                                            <div class="master-info">
                                                <span class="master-name">
                                                    {{ $item['nomor_bukti'] }}
                                                </span>
                                                - {{ date('d/m/Y', strtotime($item['date'])) }}
                                                :
                                                <span class="badge missing-badge">
                                                    Mutasi: {{ $item['project_header'] }}
                                                </span>
                                                <span class="badge missing-badge">
                                                    PO: {{ $item['project_po'] }}
                                                </span>
                                                <span class="badge missing-badge">
                                                    PO# {{ $item['po_number'] }}
                                                </span>
                                            </div>
                                            <div class="master-info">
                                                Total : Rp {{ number_format($item['total'], 0, ',', '.') }}
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                @endforeach
                            </div>
                        </details>
                        @endif

                        @if($dataPoNonProject->count() > 0)
                        <details class="mb-3">
                            <summary>
                                Transaksi PO Non Project Dibebankan ke Project
                                <span class="master-count">
                                    {{ $dataPoNonProject->count() }}
                                </span>
                            </summary>

                            <div class="row mt-2">
                                @foreach($dataPoNonProject as $item)
                                @php
                                $encryptedId = encrypt($item['id']);
                                @endphp

                                <div class="col-md-6">
                                    <a href="{{ url('/trsmts/edit/'.$encryptedId) }}"
                                    class="text-decoration-none text-dark">
                                        <div class="master-item">
                                            <div class="master-info">
                                                <span class="master-name">
                                                    {{ $item['nomor_bukti'] }}
                                                </span>
                                                - {{ date('d/m/Y', strtotime($item['date'])) }}
                                                :
                                                <span class="badge missing-badge">
                                                    Beban: {{ $item['project_mutasi'] }}
                                                </span>
                                                <span class="badge missing-badge">
                                                    PO Non Project: {{ $item['po_number'] }}
                                                </span>
                                            </div>
                                            <div class="master-info">
                                                Total : Rp {{ number_format($item['total'], 0, ',', '.') }}
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                @endforeach
                            </div>
                        </details>
                        @endif

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

    
   
        

    <div class="row mt-4">  
        <div class="col-lg-4 mb-4">
            {{-- Over Budget Projects --}}
            <div class="card h-100">
                <div class="card-header pb-0 p-3"
                    style="background: linear-gradient(135deg, #DC2626, #165b81);">
                    <h6 class="mb-0 text-white">
                        <i class="fas fa-exclamation-triangle mr-2"></i>
                        Over Budget Projects
                    </h6>
                </div>

                <div class="card-body p-0 over-budget-body">

                    @forelse($overBudget as $item)
                    <div class="over-budget-item px-3 py-3 border-bottom">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <div>
                                <h6 class="mb-1 font-weight-bold text-dark">
                                    {{ $item['project'] }}
                                </h6>
                            </div>

                            <span class="badge bg-danger text-white">
                                {{ number_format($item['percentage'], 2) }}%
                            </span>
                        </div>

                        <div class="d-flex justify-content-between text-sm mb-1">
                            <span class="text-muted">Budget :</span>
                            <span class="font-weight-bold text-end">
                                Rp {{ number_format($item['budget'], 2, ',', '.') }}
                            </span>
                        </div>

                        <div class="d-flex justify-content-between text-sm mb-1">
                            <span class="text-muted">Actual :</span>
                            <span class="font-weight-bold text-end">
                                Rp {{ number_format($item['actual'], 2, ',', '.') }}
                            </span>
                        </div>

                        <div class="d-flex justify-content-between text-sm">
                            <span class="text-muted">Over Budget :</span>
                            <span class="font-weight-bold text-danger text-end">
                                Rp {{ number_format($item['over_amount'], 2, ',', '.') }}
                            </span>
                        </div>
                    </div>
                    @empty
                    <div class="text-center py-5">
                        <i class="fas fa-check-circle text-success fa-2x mb-2"></i>
                        <p class="text-muted mb-0">
                            Tidak ada project over budget
                        </p>
                    </div>
                    @endforelse

                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-4">
        {{-- Total PPh per Bulan --}}
            <div class="card h-100">
            <div class="card-header pb-0 p-3"
                style="background: linear-gradient(135deg, #ff9800, #165b81);">
                <h6 class="mb-0 text-white">
                    <i class="fas fa-money-bill-wave me-2"></i>
                    Total PPh per Bulan
                </h6>
            </div>

                <div class="card-body p-3">
                    <form id="formFilterPph">
                        <div class="d-flex gap-2 mb-0">

                            <input type="month"
                                name="periode"
                                id="periode"
                                class="form-control"
                                style="height: 40px;"
                                value="{{ $selectedYear }}-{{ $selectedMonth }}"
                                min="{{ date('Y-m', strtotime('-5 years')) }}"
                                max="{{ date('Y-m') }}">

                            <button type="submit"
                                class="btn btn-primary px-4"
                                style="height: 40px;">
                                <i class="fas fa-search"></i>
                            </button>

                        </div>
                    </form>
                    <div class="numbers">
                        <p class="text-sm mb-0 text-uppercase font-weight-bold text-muted">
                            Total PPh
                        </p>

                        <h4 id="totalPphDisplay" class="font-weight-bolder mb-1 text-danger">
                            Rp {{ number_format($totalPphPerBulan, 2, ',', '.') }}
                        </h4>

                        <p id="periodeLabel" class="mb-0 text-sm text-muted">
                            {{ date('F', mktime(0,0,0,$selectedMonth,1)) }} {{ $selectedYear }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-4">
            {{-- Unpaid DP per PO --}}
            <div class="card h-100">
                <div class="card-header pb-0 p-3"
                    style="background: linear-gradient(135deg, #ff9800, #165b81);">
                    <h6 class="mb-0 text-white">
                        <i class="fas fa-file-invoice-dollar me-2"></i>
                        DP Belum Lunas ({{ $unpaidDP->count() }})
                    </h6>
                </div>

                <div class="card-body p-0 dp-body">
                    @if($unpaidDP->count() > 0)
                        @foreach($unpaidDP as $item)
                        <div class="dp-item px-3 py-3 border-bottom">
                            <div class="row">
                                <div class="col-12">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <div>
                                            <h6 class="mb-1 font-weight-bold text-dark">
                                                {{ $item['po_number'] }}
                                            </h6>
                                            <p class="text-sm text-muted mb-0">
                                                {{ $item['project_name'] }}
                                            </p>
                                            <p class="text-sm text-muted mb-0">
                                                {{ $item['supplier_name'] }}
                                            </p>
                                        </div>
                                        <span class="badge bg-danger text-white">
                                            {{ number_format($item['percentage'], 2) }}%
                                        </span>
                                    </div>

                                    <div class="d-flex justify-content-between text-sm mb-1">
                                        <span class="text-muted">Total DP:</span>
                                        <span class="font-weight-bold">Rp {{ number_format($item['total_dp'], 2, ',', '.') }}</span>
                                    </div>
                                    <div class="d-flex justify-content-between text-sm mb-1">
                                        <span class="text-muted">Dibayar:</span>
                                        <span class="font-weight-bold text-success">Rp {{ number_format($item['total_dibayar'], 2, ',', '.') }}</span>
                                    </div>
                                    <div class="d-flex justify-content-between text-sm">
                                        <span class="text-muted">Sisa:</span>
                                        <span class="font-weight-bold text-danger">Rp {{ number_format($item['sisa'], 2, ',', '.') }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-check-circle text-success fa-2x mb-2"></i>
                            <p class="text-muted mb-0">
                                Tidak ada DP yang belum lunas
                            </p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div> 
    <div class="row ">
        {{-- Project Health Table --}}
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header pb-0 p-3">
                    <div class="d-flex justify-content-between">
                        <h6 class="mb-0"><i class="fas fa-heartbeat me-2"></i>Project Health</h6>
                    </div>
                </div>
                <div class="card-body p-3">
                    <div class="table-responsive">
                        <table class="table table-hover align-items-center mb-0" id="tableProjectHealth">
                            <thead  class="thead-light">
                                <tr>
                                    <th class="text-center">
                                        Project</th>
                                    <th
                                        class="text-center">
                                        Budget</th>
                                    <th
                                        class="text-center">
                                        Actual</th>
                                    <th
                                        class="text-center">
                                        Remaining</th>
                                    <th
                                        class="text-center">
                                        % Realisasi</th>
                                    <th
                                        class="text-center">
                                        Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($projectHealth as $project)
                                <tr>
                                    <td class="text-sm font-weight-bold">{{ $project['project'] }}</td>
                                    <td class="text-sm font-weight-normal text-end">Rp {{ number_format($project['budget'], 2, ',', '.') }}
                                    </td>
                                    <td class="text-sm font-weight-normal text-end">Rp {{ number_format($project['actual'], 2, ',', '.') }}
                                    </td>
                                    <td class="text-sm font-weight-normal text-end {{ $project['remaining'] < 0 ? 'text-danger' : '' }}">
                                        Rp {{ number_format($project['remaining'], 2, ',', '.') }}
                                    </td>
                                    <td class="text-sm font-weight-normal text-center">{{ number_format($project['percentage'], 2) }}%</td>
                                    <td class="text-sm font-weight-normal text-center">
                                        @if($project['status'] == 'over')
                                        <span class="badge badge-sm bg-gradient-danger status-badge">OVER</span>
                                        @elseif($project['status'] == 'warning')
                                        <span class="badge badge-sm bg-gradient-warning status-badge">WASPADA</span>
                                        @elseif($project['status'] == 'no_budget')
                                        <span class="badge badge-sm bg-gradient-secondary status-badge">NO BUDGET</span>
                                        @elseif($project['status'] == 'no_actual')
                                        <span class="badge badge-sm bg-gradient-info status-badge">NO ACTUAL</span>
                                        @else
                                        <span class="badge badge-sm bg-gradient-success status-badge">AMAN</span>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    

    {{-- Data Missing Table --}}
    {{-- <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header pb-0 p-3 bg-gradient-warning">
                    <h6 class="mb-0 text-white"><i class="fas fa-database me-2"></i>Data Missing - Transaksi Tidak
                        Lengkap ({{ $dataMissing->count() }})</h6>
                </div>
                <div class="card-body p-3">
                    @if($dataMissing->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-hover align-items-center mb-0" id="tableDataMissing">
                            <thead>
                                <tr>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        Tanggal</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        Rekening</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        Keterangan</th>
                                    <th
                                        class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end">
                                        Amount</th>
                                    <th
                                        class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">
                                        Missing Fields</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($dataMissing as $item)
                                <tr>
                                    <td class="text-xs">{{ date('d/m/Y', strtotime($item->date)) }}</td>
                                    <td class="text-xs">{{ $item->rekening }}</td>
                                    <td class="text-xs">{{ substr($item->keterangan, 0, 50) }}{{
                                        strlen($item->keterangan) > 50 ? '...' : '' }}</td>
                                    <td class="text-xs text-end">{{ number_format($item->amount, 0, ',', '.') }}</td>
                                    <td class="text-center">
                                        @if($item->missing_project)
                                        <span class="missing-field">Project</span>
                                        @endif
                                        @if($item->missing_kategori)
                                        <span class="missing-field">Kategori</span>
                                        @endif
                                        @if($item->missing_vendor)
                                        <span class="missing-field">Vendor</span>
                                        @endif
                                        @if($item->missing_kode)
                                        <span class="missing-field">Kode</span>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @else
                    <p class="text-xs text-center text-muted py-3">Semua data sudah lengkap</p>
                    @endif
                </div>
            </div>
        </div>
    </div> --}}

    {{-- Recent Mutasi --}}
    <!-- <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header pb-0 p-3">
                    <h6 class="mb-0"><i class="fas fa-history me-2"></i>Mutasi Terbaru (10 Terakhir)</h6>
                </div>
                <div class="card-body p-3">
                    <div class="table-responsive">
                        <table class="table table-hover align-items-center mb-0" id="tableRecentMutasi">
                            <thead  class="thead-light">
                                <tr>
                                    <th class="text-center">
                                        Tanggal</th>
                                    <th class="text-center">
                                        Rekening</th>
                                    <th class="text-center">Kode
                                    </th>
                                    <th class="text-center">
                                        Project</th>
                                    <th class="text-center">
                                        Detail Kategori</th>
                                    <th class="text-center">
                                        Vendor</th>
                                    <th class="text-center">
                                        Keterangan</th>
                                    <th
                                        class="text-center">
                                        Amount</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($recentMutasi as $mutasi)
                                <tr>
                                    <td class="text-sm font-weight-normal">{{ \Carbon\Carbon::parse($mutasi->date)->format('j-M-Y h:i A')}}</td>
                                    <td class="text-sm font-weight-normal">{{ $mutasi->rekening ?? '-' }}</td>
                                    <td class="text-sm font-weight-normal">{{ $mutasi->kode_mutasi ?? '-' }}</td>
                                    <td class="text-sm font-weight-normal">{{ $mutasi->project ?? '-' }}</td>
                                    <td class="text-sm font-weight-normal">{{ $mutasi->detail_kategori ?? '-' }}</td>
                                    <td class="text-sm font-weight-normal">{{ $mutasi->supplier_name ?? '-' }}</td>
                                    <td class="text-sm font-weight-normal">{{ substr($mutasi->description ?? '', 0, 40) }}{{
                                        strlen($mutasi->description ?? '') > 40 ? '...' : '' }}</td>
                                    <td
                                        class="text-sm font-weight-normal text-end {{ $mutasi->is_credit ? 'amount-credit' : 'amount-debit' }}">
                                        <i class="fas fa-{{ $mutasi->is_credit ? 'arrow-up' : 'arrow-down' }} me-1"></i>
                                        Rp {{ number_format($mutasi->amount, 2, ',', '.') }}
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div> -->
</div>
@endsection

@push('js')
<script>
    $(document).ready(function() {
        // Initialize DataTable for Project Health
        $('#tableProjectHealth').DataTable({
            language: {
                url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/id.json'
            },
            pageLength: 10,
            order: [[5, 'asc']], // Order by status (most critical first)
            columnDefs: [
                { orderable: true, targets: '_all' }
            ],
            dom: 'frtip',
            searching: false,
            paging: true,
            info: false
        });

        // Initialize DataTable for Data Missing
        $('#tableDataMissing').DataTable({
            language: {
                url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/id.json'
            },
            pageLength: 10,
            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, 'Semua']],
            order: [[0, 'desc']], // Order by date descending
            columnDefs: [
                { orderable: true, targets: [0, 1, 3] },
                { orderable: false, targets: [2, 4] }
            ],
            dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>rtip',
            searching: true,
            paging: true,
            info: true
        });

        // Initialize DataTable for Recent Mutasi
        $('#tableRecentMutasi').DataTable({
            language: {
                url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/id.json'
            },
            pageLength: 10,
            order: [[0, 'desc']], // Order by date descending
            columnDefs: [
                { orderable: true, targets: [0, 1, 2, 7] },
                { orderable: false, targets: [3, 4, 5, 6] }
            ],
            dom: 'frtip',
            searching: true,
            paging: false,
            info: false
        });

        // AJAX filter for Total PPh per Bulan
        $('#formFilterPph').on('submit', function (e) {
    e.preventDefault();

    let periode = $('#periode').val();

    if (!periode) {
        return;
    }

    $.ajax({
        url: '{{ route("dashboard.pph-per-bulan") }}',
        type: 'GET',
        data: {
            periode: periode
        },

        beforeSend: function () {
            $('#totalPphDisplay').html(
                '<i class="fas fa-spinner fa-spin"></i>  Loading...'
            );
        },

        success: function (response) {

            if (response.success) {

                $('#totalPphDisplay').text(
                    'Rp ' + Number(response.totalPph).toLocaleString(
                        'id-ID',
                        {
                            minimumFractionDigits: 2,
                            maximumFractionDigits: 2
                        }
                    )
                );

                $('#periodeLabel').text(response.label);
            }

        },

        error: function (xhr) {
            console.log(xhr.responseText);
            alert('Gagal mengambil data PPh.');
        }

    });

});
    });
</script>
@endpush