@extends('layouts.layoutMaster')

@section('title', 'Detail Buku Besar')

@section('vendor-style')
@vite([
  'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
  'resources/assets/vendor/libs/select2/select2.scss',
  //'resources/assets/vendor/fonts/boxicons.scss'
])
@endsection

@section('page-style')
<style>
.card-header-tab {
    border-bottom: 0;
    display: flex;
    gap: 0.5rem;
}
.nav-tabs-custom {
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 1rem;
}
.nav-tabs-custom .nav-item .nav-link {
    border: none;
    padding: 0.75rem 1.25rem;
    color: #697a8d;
    position: relative;
}
.nav-tabs-custom .nav-item .nav-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
}
.nav-tabs-custom .nav-item .nav-link.active {
    color: #556ee6;
    background: transparent;
}
.nav-tabs-custom .nav-item .nav-link.active::after {
    background: #556ee6;
}
.balance-positive {
    color: #28c76f;
}
.balance-negative {
    color: #ea5455;
}
.balance-neutral {
    color: #697a8d;
}
.badge-account-type {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 0.25rem;
}
.transaction-table th {
    position: sticky;
    top: 0;
    z-index: 2;
}
.detail-table-container {
    max-height: 600px;
    overflow-y: auto;
}
.summary-card {
    transition: all 0.3s;
}
.summary-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.sub-account-tabs .nav-link {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
}
</style>
@endsection

@section('vendor-script')
@vite([
  'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
  'resources/assets/vendor/libs/select2/select2.js'
])
@endsection

@section('content')

<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="fw-bold">
        <i class="bx bx-book-open me-2 text-primary"></i>Detail Buku Besar
    </h4>
    <a href="{{ route('reports.ledger.index', ['account_id' => $account->id, 'sub_account_id' => $subAccount?->id, 'list_sub_account_id' => $listSubAccount?->id, 'start_date' => $startDate->format('Y-m-d'), 'end_date' => $endDate->format('Y-m-d')]) }}" class="btn btn-outline-secondary">
        <i class="bx bx-arrow-back me-1"></i>Kembali
    </a>
</div>

<div class="card mb-4">
    <div class="card-body">
        <!-- Form Filter -->
        <form id="filterForm" method="GET">
            <div class="row g-3">
                <div class="col-md-5">
                    <label for="start_date">Rentang Tanggal Awal:</label>
                    <input type="date" name="start_date" id="start_date" class="form-control" value="{{ $startDate->format('Y-m-d') }}">
                </div>
                <div class="col-md-5">
                    <label for="end_date">Rentang Tanggal Akhir:</label>
                    <input type="date" name="end_date" id="end_date" class="form-control" value="{{ $endDate->format('Y-m-d') }}">
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary w-100">Filter</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Account Hierarchy Path -->
<nav aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('reports.ledger.index') }}">Buku Besar</a></li>
        <li class="breadcrumb-item">
            <a href="{{ route('reports.ledger.detail', ['accountId' => $account->id]) }}">
                {{ $account->account_code }} - {{ $account->account_name }}
            </a>
        </li>
        @if($subAccount)
        <li class="breadcrumb-item">
            <a href="{{ route('reports.ledger.detail', ['accountId' => $account->id, 'subAccountId' => $subAccount->id]) }}">
                {{ $subAccount->sub_account_code }} - {{ $subAccount->name }}
            </a>
        </li>
        @endif
        @if($listSubAccount)
        <li class="breadcrumb-item active">{{ $listSubAccount->name }}</li>
        @endif
    </ol>
</nav>

<!-- Account Information Card -->
<div class="card bg-light mb-4">
    <div class="card-body">
        <div class="row">
            <div class="col-md-8">
                <h5 class="text-primary mb-3">
                    <span class="badge bg-primary me-2">{{ ucfirst($account->account_type) }}</span>
                    {{ $account->account_code }} - {{ $account->account_name }}
                    @if($subAccount)
                    <i class="bx bx-chevron-right mx-1"></i> {{ $subAccount->sub_account_code }} - {{ $subAccount->name }}
                    @endif
                    @if($listSubAccount)
                    <i class="bx bx-chevron-right mx-1"></i> {{ $listSubAccount->name }}
                    @endif
                </h5>
                <div class="d-flex flex-wrap gap-3">
                    <div>
                        <span class="text-muted fw-light">Periode:</span>
                        <span class="fw-semibold">{{ $startDate->format('d M Y') }} - {{ $endDate->format('d M Y') }}</span>
                    </div>
                    <div>
                        <span class="text-muted fw-light">Jumlah Transaksi:</span>
                        <span class="fw-semibold">{{ $entries->count() }}</span>
                    </div>
                </div>
            </div>
            <div class="col-md-4 d-flex justify-content-md-end align-items-center">
                @php
                    $finalBalance = $entries->last() ? $entries->last()->balance : 0;
                    $balanceClass = $finalBalance > 0 ? 'balance-positive' : ($finalBalance < 0 ? 'balance-negative' : 'balance-neutral');
                @endphp
                <div class="text-end">
                    <span class="d-block text-muted fs-6">Saldo Akhir</span>
                    <h3 class="mb-0 {{ $balanceClass }}">{{ rupiah_format(abs($finalBalance), 0, ',', '.') }}</h3>
                </div>
            </div>
        </div>
    </div>
</div>

@if(!$listSubAccount && $subAccount)
<!-- Sub Account Navigation Tabs -->
<div class="card mb-4">
    <div class="card-header card-header-tab">
        <ul class="nav nav-tabs nav-tabs-custom sub-account-tabs" id="subAccountTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview-tab-pane" type="button" role="tab" aria-controls="overview-tab-pane" aria-selected="true">
                    <i class="bx bx-bar-chart-alt-2 me-1"></i>Ringkasan
                </button>
            </li>
            @if($subAccount->listSubAccounts->count() > 0)
                @foreach($subAccount->listSubAccounts as $index => $listSub)
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="sub-tab-{{ $listSub->id }}" data-bs-toggle="tab" data-bs-target="#sub-tab-pane-{{ $listSub->id }}" type="button" role="tab" aria-controls="sub-tab-pane-{{ $listSub->id }}" aria-selected="false">
                        {{ $listSub->name }}
                    </button>
                </li>
                @endforeach
            @endif
        </ul>
    </div>
    <div class="card-body">
        <div class="tab-content" id="subAccountTabsContent">
            <div class="tab-pane fade show active" id="overview-tab-pane" role="tabpanel" aria-labelledby="overview-tab" tabindex="0">
                <!-- Summary of all list sub accounts -->
                <div class="row">
                    @if($subAccount->listSubAccounts->count() > 0)
                    <div class="col-12 mb-4">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead class="table-light">
                                    <tr>
                                        <th>Nama Detail</th>
                                        <th class="text-end">Debit (Rp)</th>
                                        <th class="text-end">Kredit (Rp)</th>
                                        <th class="text-end">Saldo (Rp)</th>
                                        <th class="text-center">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($subAccount->listSubAccounts as $listSub)
                                    @php
                                        $listDebit = $listSub->debit_total ?? 0;
                                        $listCredit = $listSub->credit_total ?? 0;
                                        $listBalance = in_array($account->account_type, ['asset', 'expense'])
                                            ? $listDebit - $listCredit
                                            : $listCredit - $listDebit;
                                        $listBalanceClass = $listBalance > 0 ? 'balance-positive' : ($listBalance < 0 ? 'balance-negative' : 'balance-neutral');
                                    @endphp
                                    <tr>
                                        <td>{{ $listSub->name }}</td>
                                        <td class="text-end">{{ rupiah_format($listDebit, 0, ',', '.') }}</td>
                                        <td class="text-end">{{ rupiah_format($listCredit, 0, ',', '.') }}</td>
                                        <td class="text-end {{ $listBalanceClass }}">{{ rupiah_format(abs($listBalance), 0, ',', '.') }}</td>
                                        <td class="text-center">
                                            <a href="{{ route('reports.ledger.detail', ['accountId' => $account->id, 'subAccountId' => $subAccount->id, 'listSubAccountId' => $listSub->id, 'start_date' => $startDate->format('Y-m-d'), 'end_date' => $endDate->format('Y-m-d')]) }}" class="btn btn-sm btn-primary">
                                                <i class="bx bx-show me-1"></i>Detail
                                            </a>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                                <tfoot class="table-dark">
                                    <tr>
                                        <th>Total</th>
                                        <th class="text-end">{{ rupiah_format($subAccount->debit_total, 0, ',', '.') }}</th>
                                        <th class="text-end">{{ rupiah_format($subAccount->credit_total, 0, ',', '.') }}</th>
                                        <th class="text-end">
                                            @php
                                                $totalBalance = in_array($account->account_type, ['asset', 'expense'])
                                                    ? $subAccount->debit_total - $subAccount->credit_total
                                                    : $subAccount->credit_total - $subAccount->debit_total;
                                            @endphp
                                            {{ rupiah_format(abs($totalBalance), 0, ',', '.') }}
                                        </th>
                                        <th></th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                    @endif
                </div>
            </div>

            @if($subAccount->listSubAccounts->count() > 0)
                @foreach($subAccount->listSubAccounts as $index => $listSub)
                <div class="tab-pane fade" id="sub-tab-pane-{{ $listSub->id }}" role="tabpanel" aria-labelledby="sub-tab-{{ $listSub->id }}" tabindex="0">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="mb-0">{{ $listSub->name }}</h5>
                        <a href="{{ route('reports.ledger.detail', ['accountId' => $account->id, 'subAccountId' => $subAccount->id, 'listSubAccountId' => $listSub->id, 'start_date' => $startDate->format('Y-m-d'), 'end_date' => $endDate->format('Y-m-d')]) }}" class="btn btn-sm btn-primary">
                            <i class="bx bx-show me-1"></i>Lihat Detail Lengkap
                        </a>
                    </div>
                    @php
                        // Get entries for this list sub account
                        $listSubEntries = \Modules\Akuntansi\Models\JournalEntry::where('account_id', $account->id)
                            ->where('sub_account_id', $subAccount->id)
                            ->where('list_sub_account_id', $listSub->id)
                            ->whereHas('journal', function ($q) use ($startDate, $endDate) {
                                $q->whereBetween('transaction_date', [$startDate, $endDate]);
                            })
                            ->with('journal')
                            ->orderBy('created_at', 'desc')
                            ->limit(5)
                            ->get();
                    @endphp

                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Tanggal</th>
                                    <th>Referensi</th>
                                    <th>Deskripsi</th>
                                    <th class="text-end">Debit (Rp)</th>
                                    <th class="text-end">Kredit (Rp)</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if($listSubEntries->count() > 0)
                                    @foreach($listSubEntries as $entry)
                                    <tr>
                                        <td>{{ \Carbon\Carbon::parse($entry->journal->transaction_date)->format('d-m-Y') }}</td>
                                        <td>{{ $entry->journal->reference }}</td>
                                        <td>{{ $entry->journal->description }}</td>
                                        <td class="text-end">{{ $entry->entry_type == 'debit' ? rupiah_format($entry->amount, 0, ',', '.') : '-' }}</td>
                                        <td class="text-end">{{ $entry->entry_type == 'credit' ? rupiah_format($entry->amount, 0, ',', '.') : '-' }}</td>
                                    </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td colspan="5" class="text-center">Tidak ada transaksi dalam periode ini</td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                    @if($listSubEntries->count() > 0)
                    <div class="text-center mt-3">
                        <a href="{{ route('reports.ledger.detail', ['accountId' => $account->id, 'subAccountId' => $subAccount->id, 'listSubAccountId' => $listSub->id, 'start_date' => $startDate->format('Y-m-d'), 'end_date' => $endDate->format('Y-m-d')]) }}" class="btn btn-sm btn-outline-primary">
                            Lihat Semua Transaksi
                        </a>
                    </div>
                    @endif
                </div>
                @endforeach
            @endif
        </div>
    </div>
</div>
@endif

<!-- Financial Summary Cards -->
<div class="row mb-4">
    <div class="col-xl-4 col-md-6 mb-4">
        <div class="card summary-card h-100 bg-danger bg-opacity-10 border-0">
            <div class="card-body">
                <div class="d-flex align-items-center mb-2">
                    <div class="avatar avatar-sm me-2 bg-primary">
                        <i class="bx bx-trending-up"></i>
                    </div>
                    <h5 class="card-title mb-0">Total Debit</h5>
                </div>
                <h3 class="fw-bold text-primary mb-1">{{ rupiah_format($entries->where('entry_type', 'debit')->sum('amount'), 0, ',', '.') }}</h3>
                <p class="card-text text-muted small">
                    <span class="fw-semibold">{{ $entries->where('entry_type', 'debit')->count() }}</span> transaksi debit
                </p>
            </div>
        </div>
    </div>
    <div class="col-xl-4 col-md-6 mb-4">
        <div class="card summary-card h-100 bg-info bg-opacity-10 border-0">
            <div class="card-body">
                <div class="d-flex align-items-center mb-2">
                    <div class="avatar avatar-sm me-2 bg-info">
                        <i class="bx bx-trending-down"></i>
                    </div>
                    <h5 class="card-title mb-0">Total Kredit</h5>
                </div>
                <h3 class="fw-bold text-info mb-1">{{ rupiah_format($entries->where('entry_type', 'credit')->sum('amount'), 0, ',', '.') }}</h3>
                <p class="card-text text-muted small">
                    <span class="fw-semibold">{{ $entries->where('entry_type', 'credit')->count() }}</span> transaksi kredit
                </p>
            </div>
        </div>
    </div>
    <div class="col-xl-4 col-md-6 mb-4">
        <div class="card summary-card h-100 bg-success bg-opacity-10 border-0">
            <div class="card-body">
                <div class="d-flex align-items-center mb-2">
                    <div class="avatar avatar-sm me-2 bg-success">
                        <i class="bx bx-wallet"></i>
                    </div>
                    <h5 class="card-title mb-0">Saldo Akhir</h5>
                </div>
                @php
                    $finalBalance = $entries->last() ? $entries->last()->balance : 0;
                    $balanceClass = $finalBalance > 0 ? 'text-success' : ($finalBalance < 0 ? 'text-danger' : 'text-muted');
                @endphp
                <h3 class="fw-bold {{ $balanceClass }} mb-1">{{ rupiah_format(abs($finalBalance), 0, ',', '.') }}</h3>
                <p class="card-text text-muted small">
                    Per tanggal {{ $endDate->format('d M Y') }}
                </p>
            </div>
        </div>
    </div>
</div>

<!-- Transaction History Card -->
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="card-title mb-0">
            <i class="bx bx-transfer-alt me-2"></i>Riwayat Transaksi
        </h5>
        <div class="btn-group">
            <button type="button" class="btn btn-outline-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="bx bx-export me-1"></i>Ekspor
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#" id="exportExcel"><i class="bx bx-file me-2"></i>Excel</a></li>
                <li><a class="dropdown-item" href="#" id="exportPdf"><i class="bx bx-file-pdf me-2"></i>PDF</a></li>
                <li><a class="dropdown-item" href="#" id="exportCsv"><i class="bx bx-spreadsheet me-2"></i>CSV</a></li>
                <li><a class="dropdown-item" href="#" id="printLedger"><i class="bx bx-printer me-2"></i>Print</a></li>
            </ul>
        </div>
    </div>
    <div class="card-body">
        <div class="detail-table-container">
            <table class="table table-bordered table-hover transaction-table datatables-ledger">
                <thead class="table-dark">
                    <tr>
                        <th style="width: 60px">No</th>
                        <th style="width: 120px">Tanggal</th>
                        <th style="width: 150px">Referensi</th>
                        <th>Deskripsi</th>
                        <th style="width: 150px" class="text-end">Debit (Rp)</th>
                        <th style="width: 150px" class="text-end">Kredit (Rp)</th>
                        <th style="width: 150px" class="text-end">Saldo (Rp)</th>
                    </tr>
                </thead>
                <tbody>
                    @php $no = 1; @endphp
                    @foreach($entries as $entry)
                        @php
                            $balanceClass = $entry->balance > 0 ? 'balance-positive' : ($entry->balance < 0 ? 'balance-negative' : 'balance-neutral');
                        @endphp
                        <tr>
                            <td class="text-center">{{ $no++ }}</td>
                            <td>{{ \Carbon\Carbon::parse($entry->transaction_date)->format('d-m-Y') }}</td>
                            <td>
                                <span class="badge bg-label-primary">{{ $entry->reference }}</span>
                            </td>
                            <td>{{ $entry->description }}</td>
                            <td class="text-end fw-semibold">{{ $entry->entry_type == 'debit' ? rupiah_format($entry->amount, 0, ',', '.') : '-' }}</td>
                            <td class="text-end fw-semibold">{{ $entry->entry_type == 'credit' ? rupiah_format($entry->amount, 0, ',', '.') : '-' }}</td>
                            <td class="text-end fw-bold {{ $balanceClass }}">{{ rupiah_format(abs($entry->balance), 0, ',', '.') }}</td>
                        </tr>
                    @endforeach
                </tbody>
                <tfoot class="table-dark">
                    <tr>
                        <th colspan="4" class="text-end">Total:</th>
                        <th class="text-end">{{ rupiah_format($entries->where('entry_type', 'debit')->sum('amount'), 0, ',', '.') }}</th>
                        <th class="text-end">{{ rupiah_format($entries->where('entry_type', 'credit')->sum('amount'), 0, ',', '.') }}</th>
                        <th class="text-end">{{ $entries->last() ? rupiah_format(abs($entries->last()->balance), 0, ',', '.') : '0' }}</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>

@if($entries->count() > 0)
<!-- Transaction Analysis Graphs -->
<div class="row mt-4">
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-header">
                <h5 class="card-title mb-0">Tren Transaksi Debit dan Kredit</h5>
            </div>
            <div class="card-body">
                <div id="debitCreditChart" style="height: 300px;"></div>
            </div>
        </div>
    </div>
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-header">
                <h5 class="card-title mb-0">Perbandingan Debit vs Kredit</h5>
            </div>
            <div class="card-body d-flex align-items-center justify-content-center">
                <div id="pieChart" style="height: 300px; width: 100%;"></div>
            </div>
        </div>
    </div>
</div>
@endif

@endsection

@section('page-script')
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize DataTable
    const ledgerTable = $('.datatables-ledger').DataTable({
        responsive: true,
        dom: '<"row mb-3"' +
            '<"col-md-2 d-flex align-items-center justify-content-md-start justify-content-center"<"dt-action-buttons mt-5 mt-md-0"B>>' +
            '<"col-md-10"<"d-flex align-items-center justify-content-md-end justify-content-center"<"me-4"f><"add-new">>>' +
            '>t' +
            '<"row mt-3"' +
            '<"col-sm-12 col-md-6"i>' +
            '<"col-sm-12 col-md-6"p>' +
            '>',
        buttons: [
            {
                extend: 'collection',
                className: 'btn btn-outline-secondary dropdown-toggle waves-effect waves-light d-none',
                text: '<span class="d-flex align-items-center"><i class="ri-upload-2-line ri-16px me-2"></i> <span class="d-none d-sm-inline-block">Ekspor</span></span>',
                buttons: [
                    {
                        extend: 'print',
                        text: '<i class="ri-printer-line me-1"></i>Print',
                        className: 'dropdown-item'
                    },
                    {
                        extend: 'csv',
                        text: '<i class="ri-file-text-line me-1"></i>Csv',
                        className: 'dropdown-item'
                    },
                    {
                        extend: 'excel',
                        text: '<i class="ri-file-excel-line me-1"></i>Excel',
                        className: 'dropdown-item'
                    },
                    {
                        extend: 'pdf',
                        text: '<i class="ri-file-pdf-line me-1"></i>Pdf',
                        className: 'dropdown-item'
                    }
                ]
            }
        ],
        language: {
            sLengthMenu: 'Tampilkan _MENU_ entri',
            search: '',
            searchPlaceholder: 'Cari transaksi...',
            paginate: {
                next: '<i class="ri-arrow-right-s-line"></i>',
                previous: '<i class="ri-arrow-left-s-line"></i>'
            },
            emptyTable: 'Tidak ada data yang tersedia',
            zeroRecords: 'Tidak ada data yang cocok ditemukan'
        }
    });

    // Handle export buttons
    document.getElementById('exportExcel')?.addEventListener('click', function(e) {
        e.preventDefault();

        // Get current URL parameters
        const startDate = document.getElementById('start_date').value;
        const endDate = document.getElementById('end_date').value;

        // Build the export URL with parameters
        let exportUrl = '{{ route("reports.ledger.export.detail", [
            "accountId" => $account->id,
            "subAccountId" => $subAccount ? $subAccount->id : null,
            "listSubAccountId" => $listSubAccount ? $listSubAccount->id : null
        ]) }}?';

        if (startDate) {
            exportUrl += `start_date=${startDate}&`;
        }
        if (endDate) {
            exportUrl += `end_date=${endDate}`;
        }

        // Navigate to the export URL
        window.location.href = exportUrl;
    });

    document.getElementById('exportPdf').addEventListener('click', function() {
        ledgerTable.button('.buttons-pdf').trigger();
    });

    document.getElementById('exportCsv').addEventListener('click', function() {
        ledgerTable.button('.buttons-csv').trigger();
    });

    document.getElementById('printLedger').addEventListener('click', function() {
        ledgerTable.button('.buttons-print').trigger();
    });

    @if($entries->count() > 0)
    // Generate chart data
    const chartData = prepareChartData();

    // Initialize debit/credit trend chart
    const debitCreditOptions = {
        series: [{
            name: 'Debit',
            data: chartData.debitByDate.map(item => item.amount)
        }, {
            name: 'Kredit',
            data: chartData.creditByDate.map(item => item.amount)
        }],
        chart: {
            type: 'line',
            height: 300,
            zoom: {
                enabled: true
            },
            toolbar: {
                show: false
            }
        },
        colors: ['#28c76f', '#ea5455'],
        dataLabels: {
            enabled: false
        },
        stroke: {
            curve: 'smooth',
            width: 3
        },
        grid: {
            borderColor: '#e0e0e0',
            row: {
                colors: ['#f8f9fa', 'transparent'],
                opacity: 0.5
            }
        },
        markers: {
            size: 6
        },
        xaxis: {
            categories: chartData.debitByDate.map(item => item.date),
            title: {
                text: 'Tanggal'
            }
        },
        yaxis: {
            title: {
                text: 'Jumlah (Rp)'
            },
            labels: {
                formatter: function(val) {
                    return formatCurrency(val);
                }
            }
        },
        tooltip: {
            shared: true,
            intersect: false,
            y: {
                formatter: function(val) {
                    return formatCurrency(val);
                }
            }
        },
        legend: {
            position: 'top',
            horizontalAlign: 'center'
        }
    };

    // Initialize pie chart for debit vs credit distribution
    const pieOptions = {
        series: [
            chartData.totalDebit,
            chartData.totalCredit
        ],
        chart: {
            type: 'donut',
            height: 300,
            toolbar: {
                show: false
            }
        },
        labels: ['Total Debit', 'Total Kredit'],
        colors: ['#28c76f', '#ea5455'],
        legend: {
            position: 'bottom'
        },
        dataLabels: {
            formatter: function(val, opts) {
                return opts.w.config.series[opts.seriesIndex].toLocaleString() + ' (' + val.toFixed(1) + '%)';
            }
        },
        plotOptions: {
            pie: {
                donut: {
                    labels: {
                        show: true,
                        name: {
                            show: true
                        },
                        value: {
                            show: true,
                            formatter: function(val) {
                                return formatCurrency(val);
                            }
                        },
                        total: {
                            show: true,
                            showAlways: true,
                            label: 'Total',
                            formatter: function(w) {
                                const total = w.globals.seriesTotals.reduce((a, b) => a + b, 0);
                                return formatCurrency(total);
                            }
                        }
                    }
                }
            }
        },
        responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                    height: 280
                },
                legend: {
                    position: 'bottom'
                }
            }
        }]
    };

    // Initialize charts if elements exist
    if (document.getElementById('debitCreditChart')) {
        const debitCreditChart = new ApexCharts(
            document.getElementById('debitCreditChart'),
            debitCreditOptions
        );
        debitCreditChart.render();
    }

    if (document.getElementById('pieChart')) {
        const pieChart = new ApexCharts(
            document.getElementById('pieChart'),
            pieOptions
        );
        pieChart.render();
    }

    // Helper function to prepare chart data from entries
    function prepareChartData() {
        // Get entries from PHP
        const entries = @json($entries);

        // Format date and group entries by date
        const debitByDate = [];
        const creditByDate = [];

        // Group entries by date
        const dateGroups = {};

        entries.forEach(entry => {
            const date = entry.transaction_date.substring(0, 10);

            if (!dateGroups[date]) {
                dateGroups[date] = {
                    debit: 0,
                    credit: 0
                };
            }

            if (entry.entry_type === 'debit') {
                dateGroups[date].debit += parseFloat(entry.amount);
            } else {
                dateGroups[date].credit += parseFloat(entry.amount);
            }
        });

        // Convert to arrays for charts
        Object.keys(dateGroups).sort().forEach(date => {
            const formattedDate = new Date(date).toLocaleDateString('id-ID', {
                day: '2-digit',
                month: 'short'
            });

            debitByDate.push({
                date: formattedDate,
                amount: dateGroups[date].debit
            });

            creditByDate.push({
                date: formattedDate,
                amount: dateGroups[date].credit
            });
        });

        // Calculate totals
        const totalDebit = entries
            .filter(entry => entry.entry_type === 'debit')
            .reduce((sum, entry) => sum + parseFloat(entry.amount), 0);

        const totalCredit = entries
            .filter(entry => entry.entry_type === 'credit')
            .reduce((sum, entry) => sum + parseFloat(entry.amount), 0);

        return {
            debitByDate,
            creditByDate,
            totalDebit,
            totalCredit
        };
    }
    @endif

    // Helper function to format currency
    function formatCurrency(value) {
        return new Intl.NumberFormat('id-ID', {
            maximumFractionDigits: 0
        }).format(value);
    }
});
</script>
@endsection