@extends('layouts.app')

@section('title')
    Dashboard
@endsection

@section('admin-content')
    <style>
        /* Style Awal Anda */
        #outstandingCard {
            cursor: pointer;
        }
        #outstandingCard.active {
            box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.35);
        }
        
        /* Style Baru: Mini Status Cards */
        .status-card { 
            cursor: pointer; 
            transition: all 0.2s ease-in-out; 
            border: 1px solid rgba(0,0,0,0.08);
            border-radius: 6px;
            background-color: #fff;
        }
        .status-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
        .status-card.active-filter { 
            border: 2px solid #343a40; 
            box-shadow: 0 2px 10px rgba(0,0,0,0.15);
        }
        .mini-stat-box {
            padding: 6px 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 45px;
        }
        .mini-stat-box h6 { margin: 0; font-weight: 800; font-size: 0.95rem; color: #333; }
        .mini-stat-box p { margin: 0; font-size: 0.65rem; text-transform: uppercase; color: #777; font-weight: 600; }
        
        /* Border kiri mini untuk indikator warna */
        .status-card[data-status="On Progress"] { border-left: 3px solid #ffc107; }
        .status-card[data-status="Approved 1"] { border-left: 3px solid #17a2b8; }
        .status-card[data-status="Approved 2"] { border-left: 3px solid #007bff; }
        .status-card[data-status="Final Approved"] { border-left: 3px solid #28a745; }
        .status-card[data-status="Rejected"] { border-left: 3px solid #dc3545; }
        .status-card[data-status="Closed"] { border-left: 3px solid #6c757d; }
    </style>

    @php
        $outstandingIdCollection = collect($outstandingIds ?? []);

        // ==========================================
        // FILTER PERIODE BERJALAN KHUSUS UNTUK MINI CARDS
        // (Agar Angka sinkron dengan tabel filter JS di bawah)
        // ==========================================
        $startDayIndex = (int) env('STARTING_DATE', 11);
        $closingDayIndex = (int) env('CLOSING_DATE', 13);
        $nowIndex = \Carbon\Carbon::now();

        if ($nowIndex->day >= $startDayIndex) {
            $startPeriodIndex = \Carbon\Carbon::create($nowIndex->year, $nowIndex->month, $startDayIndex)->startOfDay();
            $endPeriodIndex = \Carbon\Carbon::create($nowIndex->copy()->addMonth()->year, $nowIndex->copy()->addMonth()->month, $closingDayIndex)->endOfDay();
        } else {
            $startPeriodIndex = \Carbon\Carbon::create($nowIndex->copy()->subMonth()->year, $nowIndex->copy()->subMonth()->month, $startDayIndex)->startOfDay();
            $endPeriodIndex = \Carbon\Carbon::create($nowIndex->year, $nowIndex->month, $closingDayIndex)->endOfDay();
        }

        // Penampung data pengajuan MURNI HANYA DI PERIODE BERJALAN SAAT INI
        $currentPeriodForms = $forms->filter(function($form) use ($startPeriodIndex, $endPeriodIndex) {
            $tanggalForm = \Carbon\Carbon::parse($form->tanggal);
            return $tanggalForm->between($startPeriodIndex, $endPeriodIndex);
        });
    @endphp

    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Forms Vehicle Running Cost</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard.index') }}">Dashboard</a></li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row row-cols-1 row-cols-md-2 row-cols-xl-5 g-3">
                <div class="col d-flex">
                    <div class="small-box bg-info flex-fill">
                        <div class="inner">
                            <h3>Rp {{ number_format($forms->sum('total'), 0, ',', '.') }}</h3>
                            <p>Total Expense</p>
                        </div>
                        <div class="icon"><i class="fas fa-wallet"></i></div>
                    </div>
                </div>
                <div class="col d-flex">
                    <div class="small-box bg-success flex-fill">
                        <div class="inner">
                            <h3>Rp {{ number_format($forms->whereIn('status', ['Approved', 'Closed', 'Final Approved'])->sum('approved_total'), 0, ',', '.') }}</h3>
                            <p>Approved Expenses</p>
                        </div>
                        <div class="icon"><i class="fas fa-check-circle"></i></div>
                    </div>
                </div>
                <div class="col d-flex">
                    <div class="small-box bg-warning flex-fill">
                        <div class="inner">
                            <h3 class="text-white">Rp {{ number_format($forms->where('status', 'On Progress')->sum('total'), 0, ',', '.') }}</h3>
                            <p class="text-white">Pending Expenses</p>
                        </div>
                        <div class="icon"><i class="fas fa-hourglass-half"></i></div>
                    </div>
                </div>
                <div class="col d-flex">
                    <div class="small-box bg-danger flex-fill" id="outstandingCard">
                        <div class="inner">
                            <h3>{{ $outstandingCount }}</h3>
                            <p>Outstanding Expenses</p>
                            <p class="mb-0"><small>Total Rp {{ number_format($outstandingTotal, 0, ',', '.') }}</small></p>
                            <p class="mb-0 filter-hint"><small>Klik untuk menampilkan detail</small></p>
                        </div>
                        <div class="icon"><i class="fas fa-exclamation-triangle"></i></div>
                    </div>
                </div>
                @if($availableBudget > 0)
                    <div class="col d-flex">
                        <div class="small-box bg-purple flex-fill">
                            <div class="inner">
                                <h3 class="text-white">Rp {{ number_format($availableBudget, 0, ',', '.') }}</h3>
                                <p class="text-white">Available Budget</p>
                            </div>
                            <div class="icon"><i class="fas fa-money-bill"></i></div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </section>

    <section class="content mt-2">
        <div class="container-fluid">
            <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-xl-7 g-2 mb-3">
                <div class="col">
                    <div class="status-card active-filter" data-status="all">
                        <div class="mini-stat-box">
                            <div><p>Semua</p><h6>{{ $currentPeriodForms->count() }}</h6></div>
                            <i class="fas fa-list-ul text-muted"></i>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="status-card" data-status="On Progress">
                        <div class="mini-stat-box">
                            <div><p>Progress</p><h6>{{ $currentPeriodForms->where('status', 'On Progress')->count() }}</h6></div>
                            <i class="fas fa-sync text-warning fa-xs"></i>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="status-card" data-status="Approved 1">
                        <div class="mini-stat-box">
                            <div><p>App 1</p><h6>{{ $currentPeriodForms->where('status', 'Approved 1')->count() }}</h6></div>
                            <i class="fas fa-user-check text-info fa-xs"></i>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="status-card" data-status="Approved 2">
                        <div class="mini-stat-box">
                            <div><p>App 2</p><h6>{{ $currentPeriodForms->where('status', 'Approved 2')->count() }}</h6></div>
                            <i class="fas fa-users text-primary fa-xs"></i>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="status-card" data-status="Final Approved">
                        <div class="mini-stat-box">
                            <div><p>Final</p><h6>{{ $currentPeriodForms->where('status', 'Final Approved')->count() }}</h6></div>
                            <i class="fas fa-check-double text-success fa-xs"></i>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="status-card" data-status="Rejected">
                        <div class="mini-stat-box">
                            <div><p>Reject</p><h6>{{ $currentPeriodForms->where('status', 'Rejected')->count() }}</h6></div>
                            <i class="fas fa-ban text-danger fa-xs"></i>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="status-card" data-status="Closed">
                        <div class="mini-stat-box">
                            <div><p>Closed</p><h6>{{ $currentPeriodForms->where('status', 'Closed')->count() }}</h6></div>
                            <i class="fas fa-lock text-secondary fa-xs"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="card card-primary card-outline">
                <div class="card-body">
                    <h4 class="header-title float-left">List Data Forms Vehicle Running Cost Anda</h4>
                    <p class="float-right mb-2">
                        @if (auth()->user()->can('forms.vehicle.create'))
                            <a class="btn btn-primary text-white" href="{{ route('forms.vehicle.create') }}">
                                Add New Expense Vehicle Running Cost
                            </a>
                        @endif
                    </p>
                    <div class="clearfix"></div>
                    <div class="dataTables_wrapper dt-bootstrap4 mt-2">
                        @include('backend.layouts.partials.messages')
                        <div class="table-responsive">
                            <table id="dataTable" class="table table-bordered table-striped table-head-fixed dataTable dtr-inline" style="width:100%">
                                <thead class="bg-light text-capitalize">
                                    <tr>
                                        <th>#</th>
                                        <th>No Expense</th>
                                        <th>Nama</th>
                                        <th>Cabang</th>
                                        <th>Tanggal</th>
                                        <th>Type</th>
                                        <th>Liter</th>
                                        <th>Keterangan</th>
                                        <th>Total</th>
                                        <th>Total Approved</th>
                                        <th>Km (Odometer)</th>
                                        <th>Tipe Bensin</th>
                                        <th>Nomor Polisi</th>
                                        <th>Bukti</th>
                                        <th>Account Number</th>
                                        <th>Status</th>
                                        @if (auth()->user()->can('approval.view')) <th>Approval 1</th> @endif
                                        @if (auth()->user()->can('approval2.view')) <th>Approval 2</th> @endif
                                        @if (auth()->user()->can('final_approval.view')) <th>Final Approval</th> @endif
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        use App\Helpers\NextCloudHelper;
                                        $role = auth()->user()->getRoleNames()[0];
                                    @endphp
                                    @foreach ($forms as $item)
                                        <tr data-id="{{ $item->id }}" data-status="{{ $item->status }}" data-date="{{ \Carbon\Carbon::parse($item->tanggal)->format('Y-m-d') }}" data-outstanding="{{ $outstandingIdCollection->contains($item->id) ? '1' : '0' }}">
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ $item->expense_number }}</td>
                                            <td>{{ $item->user->name }}</td>
                                            <td>{{ $item->user->cabang->cabang->name }}</td>
                                            <td>{{ \Carbon\Carbon::parse($item->tanggal)->locale('id')->isoFormat('dddd, D MMMM Y HH:mm:ss') }}</td>
                                            <td>
                                                @if ($item->type == 'gasoline')
                                                    <span class="badge badge-info">Gasoline</span>
                                                @elseif ($item->type == 'parking_toll')
                                                    <span class="badge badge-warning text-white">Parking / Toll</span>
                                                @else
                                                    <span class="badge badge-secondary">Unknown</span>
                                                @endif
                                            </td>
                                            <td>{{ $item->liter }}</td>
                                            <td>{{ $item->keterangan }}</td>
                                            <td>{{ number_format($item->total, 0, ',', '.') }}</td>
                                            <td>{{ number_format($item->approved_total, 0, ',', '.') }}</td>
                                            <td>{{ $item->jarak }} km</td>
                                            <td>{{ $item->tipe_bensin }}</td>
                                            <td>{{ $item->nopol }}</td>
                                            <td>
                                                @if ($item->bukti_total)
                                                    <a href="{{ NextCloudHelper::getFileUrl($item->bukti_total) }}" target="_blank">Download</a>
                                                @else
                                                    -
                                                @endif
                                            </td>
                                            <td>{{ $item->account_number }}</td>
                                            <td>
                                                @if ($item->status == 'On Progress')
                                                    <span class="badge badge-warning text-white">{{ $item->status }}</span>
                                                @elseif ($item->status == 'Approved 1' || $item->status == 'Approved 2' || $item->status == 'Final Approved')
                                                    <span class="badge badge-success text-white">{{ $item->status }}</span>
                                                @else
                                                    <span class="badge badge-danger text-white">{{ $item->status }}</span>
                                                @endif
                                            </td>
                                            
                                            {{-- SELEKTIF MENYEMBUNYIKAN TOMBOL APPROVE/REJECT DIRECT DI INDEX TANPA MENGHAPUS LOGIKA KODE --}}
                                            @if (auth()->user()->can('approval.view'))
                                                <td>
                                                    <div class="d-none">
                                                        @if (auth()->user()->can('approval.approve') && $item->status == 'On Progress')
                                                            <form action="javascript:void(0);" class="d-inline">
                                                                <button type="button" class="btn btn-success btn-sm final-approve-modal" data-id="{{ route('forms.vehicle.approve', $item->id) }}">Approve 1</button>
                                                            </form>
                                                            <button type="button" class="btn btn-danger btn-sm open-reject-modal" data-action="{{ route('forms.vehicle.reject', $item->id) }}">Reject</button>
                                                        @endif
                                                    </div>
                                                    @if ($item->approved_at) {{ \Carbon\Carbon::parse($item->approved_at)->locale('id')->isoFormat('D MMMM Y HH:mm') }} @endif
                                                </td>
                                            @endif
                                            @if (auth()->user()->can('approval2.view'))
                                                <td>
                                                    <div class="d-none">
                                                        @if (auth()->user()->can('approval2.approve') && $item->status == 'Approved 1' && $item->approved_at)
                                                            <form action="javascript:void(0);" class="d-inline">
                                                                <button type="button" class="btn btn-success btn-sm open-approve-modal" data-id="{{ route('forms.vehicle.approve2', $item->id) }}">Approve 2</button>
                                                            </form>
                                                            <button type="button" class="btn btn-danger btn-sm open-reject-modal" data-action="{{ route('forms.vehicle.reject', $item->id) }}">Reject</button>
                                                        @endif
                                                    </div>
                                                    @if ($item->approved2_at) {{ \Carbon\Carbon::parse($item->approved2_at)->locale('id')->isoFormat('D MMMM Y HH:mm') }} @endif
                                                </td>
                                            @endif
                                            @if(auth()->user()->can('final_approval.view'))
                                                <td>
                                                    <div class="d-none">
                                                        @if(auth()->user()->can('final_approval.approve'))
                                                            @if ($item->status == 'Approved 2' && $item->approved2_at && !$item->final_approved_at)
                                                                <form action="javascript:void(0);" class="d-inline">
                                                                    <button type="button" class="btn btn-success btn-sm open-approve-modal" data-id="{{ route('forms.vehicle.final-approve', $item->id) }}">Final Approve</button>
                                                                </form>
                                                                <button type="button" class="btn btn-danger btn-sm open-reject-modal" data-action="{{ route('forms.vehicle.reject', $item->id) }}">Reject</button>
                                                            @elseif ($item->final_approved_at && auth()->user()->can('final_approval.open'))
                                                                <form action="{{ route('forms.vehicle.open', $item->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to open this item?');">
                                                                    @csrf @method('PUT')
                                                                    <button type="submit" class="btn btn-success btn-sm">Open</button>
                                                                </form>
                                                            @endif
                                                        @endif
                                                    </div>
                                                    @if ($item->final_approved_at) {{ \Carbon\Carbon::parse($item->final_approved_at)->locale('id')->isoFormat('D MMMM Y HH:mm') }} @endif
                                                </td>
                                            @endif
                                            
                                            <td>
                                                @if (auth()->user()->can('forms.vehicle.view'))
                                                    <a href="{{ route('forms.vehicle.view', $item->id) }}" class="btn btn-primary btn-sm"><i class="fas fa-eye text-white"></i></a>
                                                @endif
                                                @php
                                                    $canEdit = auth()->user()->can('forms.vehicle.edit') && (!in_array($role, ['Medical Representatif', 'Area Manager Cabang']) || $item->status == 'On Progress');
                                                @endphp
                                                @if ($canEdit)
                                                    <a href="{{ route('forms.vehicle.edit', $item->id) }}" class="btn btn-warning btn-sm"><i class="fas fa-edit text-white"></i></a>
                                                @endif
                                                @if (($role != 'Medical Representatif' && auth()->user()->can('forms.vehicle.delete')) || ($role == 'Medical Representatif' && $item->status == 'On Progress'))
                                                    <form action="{{ route('forms.vehicle.destroy', $item->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this item?');">
                                                        @csrf @method('DELETE')
                                                        <button type="submit" class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></button>
                                                    </form>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- MODAL CONTAINER DI BAWAH (TETAP UTUH UNTUK KEBUTUHAN ROUTING AJAX) --}}
    <div class="modal fade" id="approveModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <form id="approveForm" method="POST" action="">
                    @csrf @method('PUT')
                    <div class="modal-header">
                        <h5 class="modal-title" id="approveModalLabel">Approve Item</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <div id="loadingSpinner" class="d-flex justify-content-center align-items-center" style="height: 200px;"><div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div></div>
                        <div id="modalContent" class="d-none">
                            <p>Please review the details below:</p>
                            <ul class="list-group">
                                <li class="list-group-item"><strong>Expense Number:</strong> <span id="expense_number"></span></li>
                                <li class="list-group-item"><strong>User:</strong> <span id="user"></span></li>
                                <li class="list-group-item"><strong>Tipe:</strong> <span id="type"></span></li>
                                <li class="list-group-item"><strong>Tanggal & Waktu:</strong> <span id="tanggal"></span></li>
                                <li class="list-group-item"><strong>Jarak:</strong> <span id="jarak"></span> km</li>
                                <li class="list-group-item"><strong>Total Liter Bensin:</strong> <span id="liter"></span> liter</li>
                                <li class="list-group-item"><strong>No Polisi:</strong> <span id="nopol"></span></li>
                                <li class="list-group-item"><strong>Tipe Bensin:</strong> <span id="tipe_bensin"></span></li>
                                <li class="list-group-item"><strong>Bukti Total:</strong> <span id="bukti_total"></span></li>
                                <li class="list-group-item"><strong>Nominal Total:</strong> <span id="total_value"></span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button><button type="submit" class="btn btn-primary">Approve</button></div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="finalApproveModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <form id="finalApproveForm" method="POST" action="">
                    @csrf @method('PUT')
                    <div class="modal-header">
                        <h5 class="modal-title" id="finalApproveModalLabel">Approve Item</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <div id="finalLoadingSpinner" class="d-flex justify-content-center align-items-center" style="height: 200px;"><div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div></div>
                        <div id="finalModalContent" class="d-none">
                            <p>Please review the details below:</p>
                            <ul class="list-group">
                                <li class="list-group-item"><strong>Expense Number:</strong> <span id="final_expense_number"></span></li>
                                <li class="list-group-item"><strong>User:</strong> <span id="final_user"></span></li>
                                <li class="list-group-item"><strong>Tipe:</strong> <span id="final_type"></span></li>
                                <li class="list-group-item"><strong>Tanggal & Waktu:</strong> <span id="final_tanggal"></span></li>
                                <li class="list-group-item"><strong>Jarak:</strong> <span id="final_jarak"></span> km</li>
                                <li class="list-group-item"><strong>Total Liter Bensin:</strong> <span id="final_liter"></span> liter</li>
                                <li class="list-group-item"><strong>No Polisi:</strong> <span id="final_nopol"></span></li>
                                <li class="list-group-item"><strong>Tipe Bensin:</strong> <span id="final_tipe_bensin"></span></li>
                                <li class="list-group-item"><strong>Bukti Total:</strong> <span id="final_bukti_total"></span></li>
                            </ul>
                            <p class="mt-2">Please select the items you want to approve:</p>
                            <ul class="list-group list-unstyled">
                                <li>
                                    <div class="form-group">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="final_total" name="total" required>
                                            <label class="custom-control-label" for="final_total">Total (<span id="final_total_value"></span>)</label>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="form-group">
                                        <label for="total">Total</label>
                                        <input type="text" class="form-control" id="total" name="total" value="0" readonly>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button><button type="submit" class="btn btn-primary">Approve</button></div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="rejectModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form id="rejectForm" method="POST" action="">
                    @csrf @method('PUT')
                    <div class="modal-header">
                        <h5 class="modal-title" id="rejectModalLabel">Reject Expense</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group"><label for="rejectRemarks">Remarks <span class="text-danger">*</span></label><textarea class="form-control" name="remarks" id="rejectRemarks" rows="3" required></textarea></div>
                        <p class="mb-0 text-muted small">Pengajuan akan ditolak setelah Anda mengirimkan catatan ini.</p>
                    </div>
                    <div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button><button type="submit" class="btn btn-danger">Reject</button></div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
    $(document).ready(function () {
        // Uncheck all checkboxes on page refresh
        $('.custom-control-input').prop('checked', false);

        if ($('#dataTable').length) {
            let outstandingFilterActive = false;
            let statusFilterActive = 'all';

            // Custom Search DataTables (Filter Sinkron: Status + Outstanding + Siklus Periode Berjalan 11 - 13)
            $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
                const row = $(settings.aoData[dataIndex].nTr);
                const rowStatus = row.attr('data-status');
                const isOutstanding = row.attr('data-outstanding') === '1' || row.attr('data-outstanding') === 1;
                const rowDateStr = row.attr('data-date'); // Format: YYYY-MM-DD

                // 1. Prioritas Pertama: Outstanding Filter Murni
                if (outstandingFilterActive) {
                    return isOutstanding; 
                }

                // 2. Prioritas Kedua: Aturan Jendela Waktu (Cut-off) Berlaku MUTLAK Untuk Semua Mini Card
                if (rowDateStr) {
                    const dateParts = rowDateStr.split('-');
                    const rowDate = new Date(dateParts[0], dateParts[1] - 1, dateParts[2], 12, 0, 0); 
                    
                    const now = new Date();
                    let startPeriod, endPeriod;
                    const startDay = 11;
                    const closingDay = 13;

                    if (now.getDate() >= startDay) {
                        startPeriod = new Date(now.getFullYear(), now.getMonth(), startDay, 0, 0, 0);
                        endPeriod = new Date(now.getFullYear(), now.getMonth() + 1, closingDay, 23, 59, 59);
                    } else {
                        startPeriod = new Date(now.getFullYear(), now.getMonth() - 1, startDay, 0, 0, 0);
                        endPeriod = new Date(now.getFullYear(), now.getMonth(), closingDay, 23, 59, 59);
                    }

                    // TENGGELAMKAN ROW jika tidak berada di dalam siklus berjalan
                    if (rowDate < startPeriod || rowDate > endPeriod) {
                        return false; 
                    }
                }

                // 3. Prioritas Ketiga: Filter Status Setelah Melewati Karantina Tanggal
                if (statusFilterActive !== 'all' && rowStatus !== statusFilterActive) {
                    return false;
                }

                return true;
            });

            const table = $('#dataTable').DataTable({
                responsive: false,
                dom: 'Blfrtip',
                lengthMenu: [ [10, 50, 100, -1], [10, 50, 100, "All"] ],
                buttons: [
                    { extend: 'excel', text: 'Excel' },
                    { extend: 'pdf', text: 'PDF', orientation: 'landscape', pageSize: 'A4', exportOptions: { columns: ':visible' } },
                    { extend: 'print', text: 'Print', orientation: 'landscape', exportOptions: { columns: ':visible' } },
                    'colvis'
                ]
            });

            // Klik Status Card
            $('.status-card').on('click', function() {
                outstandingFilterActive = false;
                $('#outstandingCard').removeClass('active');
                $('#outstandingCard').find('.filter-hint small').text('Klik untuk detail');

                $('.status-card').removeClass('active-filter');
                $(this).addClass('active-filter');
                statusFilterActive = $(this).data('status');
                table.draw();
            });

            // Klik Outstanding Card
            const $outstandingCard = $('#outstandingCard');
            $outstandingCard.on('click', function () {
                outstandingFilterActive = !outstandingFilterActive;
                $(this).toggleClass('active', outstandingFilterActive);
                
                if(outstandingFilterActive) {
                    $('.status-card').removeClass('active-filter');
                    $('.status-card[data-status="all"]').addClass('active-filter');
                    statusFilterActive = 'all';
                }

                table.draw();
                $(this).find('.filter-hint small').text(outstandingFilterActive ? 'Klik untuk menampilkan semua data' : 'Klik untuk menampilkan detail');
            });
        }

        // Handle Reject Button Click
        $(document).on('click', '.open-reject-modal', function () {
            $('#rejectForm').attr('action', $(this).data('action'));
            $('#rejectRemarks').val('');
            $('#rejectModal').modal('show');
        });

        $('#rejectModal').on('shown.bs.modal', function () { $('#rejectRemarks').trigger('focus'); });
        $('#rejectModal').on('hidden.bs.modal', function () { $('#rejectForm').attr('action', ''); $('#rejectRemarks').val(''); });

        // Handle Approve Button Click
        $(document).on('click', '.open-approve-modal', function() {
            const approveUrl = $(this).data('id');
            $('#loadingSpinner').show(); $('#modalContent').addClass('d-none');
            $('#approveForm').attr('action', approveUrl); $('#approveModal').modal('show');

            $.get(approveUrl.replace(/approve2|final-approve/g, 'detail'), function (data) {
                const formatter = new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 });
                $('#total_value').text(formatter.format(data.total));
                $('#user').text(data.user.name); $('#expense_number').text(data.expense_number);
                $('#tanggal').text(new Date(data.created_at).toLocaleDateString('id-ID', { year: 'numeric', month: 'long', day: 'numeric' }));
                $('#type').html(data.type.split('_').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' '));
                $('#jarak').text(data.jarak > 0 ? data.jarak : '-');
                $('#liter').text(data.liter > 0 ? data.liter : '-');
                $('#tipe_bensin').text(data.tipe_bensin); $('#nopol').text(data.nopol);
                $('#bukti_total').html(data.bukti_total ? '<a href="' + data.bukti_total + '" target="_blank">Download</a>' : '-');
                $('#loadingSpinner').hide(); $('#modalContent').removeClass('d-none');
                $('#total').val(0);
            });
        });

        // Handle Final Approve Modal
        $(document).on('click', '.final-approve-modal', function() {
            const approveUrl = $(this).data('id');
            $('#finalLoadingSpinner').show(); $('#finalModalContent').addClass('d-none');
            $('#finalApproveForm').attr('action', approveUrl); $('#finalApproveModal').modal('show');

            $.get(approveUrl.replace('approve', 'detail'), function (data) {
                const formatter = new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 });
                $('#final_total_value').text(formatter.format(data.total));
                $('#final_total').data('value', data.total);
                $('#final_user').text(data.user.name); $('#final_expense_number').text(data.expense_number);
                $('#final_tanggal').text(new Date(data.created_at).toLocaleDateString('id-ID', { year: 'numeric', month: 'long', day: 'numeric' }));
                $('#final_type').html(data.type.split('_').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' '));
                $('#final_jarak').text(data.jarak > 0 ? data.jarak : '-');
                $('#final_liter').text(data.liter > 0 ? data.liter : '-');
                $('#final_tipe_bensin').text(data.tipe_bensin); $('#final_nopol').text(data.nopol);
                $('#final_bukti_total').html(data.bukti_total ? '<a href="' + data.bukti_total + '" target="_blank">Download</a>' : '-');
                $('#finalLoadingSpinner').hide(); $('#finalModalContent').removeClass('d-none');
                $('#total').val(0);
            });
        });

        // Update total dynamically
        $('.custom-control-input').on('change', function () {
            let total = 0;
            $('.custom-control-input:checked').each(function () { total += parseFloat($(this).data('value') || 0); });
            const formatter = new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 });
            $('#total').val(formatter.format(total));
        });

        $('#finalApproveModal').on('hidden.bs.modal', function () {
            $('.custom-control-input').prop('checked', false); $('#total').val('0');
        });
    });
</script>
@endsection