@extends('layouts/layoutMaster')

@section('title', 'Laporan Arus Kas')

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

@section('vendor-script')
@vite([
  'resources/assets/vendor/libs/apex-charts/apexcharts.js',
  'resources/assets/vendor/libs/moment/moment.js'
])
@endsection

@section('page-script')
@vite('Modules/Akuntansi/resources/assets/js/cashflow-report.js')
@endsection

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  <!-- Header & Summary Cards Row -->
  <div class="row">
    <div class="col-12">
      <div class="card mb-4">
        <div class="card-header d-flex align-items-center justify-content-between">
          <div>
            <h5 class="card-title mb-0">Laporan Arus Kas</h5>
            <small class="text-muted">Periode: {{ \Carbon\Carbon::parse($startDate)->format('d/m/Y') }} - {{ \Carbon\Carbon::parse($endDate)->format('d/m/Y') }}</small>
          </div>
          <div class="d-flex gap-2">
            <button type="button" class="btn btn-primary" onclick="window.print()">
              <i class="ri-printer-line me-1"></i> Cetak
            </button>
            <button type="button" class="btn btn-primary" onclick="exportToExcel()">
              <i class="ri-file-excel-2-line me-1"></i> Ekspor Excel
            </button>
          </div>
        </div>

        <!-- Filter Form -->
        <div class="card-body border-bottom">
          <form id="filterForm" method="GET" action="{{ route('cashflowtransactions.report') }}" class="row g-3">
            <div class="col-md-4">
              <div class="form-floating form-floating-outline">
                <input type="date" class="form-control" id="start_date" name="start_date" value="{{ $startDate }}">
                <label for="start_date">Tanggal Mulai</label>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-floating form-floating-outline">
                <input type="date" class="form-control" id="end_date" name="end_date" value="{{ $endDate }}">
                <label for="end_date">Tanggal Akhir</label>
              </div>
            </div>
            <div class="col-md-4 d-flex align-items-end">
              <button type="submit" class="btn btn-primary me-2">
                <i class="ri-filter-line me-1"></i> Terapkan Filter
              </button>
              <button type="button" id="clearFilter" class="btn btn-outline-secondary">
                <i class="ri-refresh-line me-1"></i> Reset
              </button>
            </div>
          </form>
        </div>

        <!-- Summary Cards -->
        <div class="card-body">
          <div class="row g-4">
            <!-- Operasional Card -->
            <div class="col-md-4">
              <div class="card shadow-none bg-label-primary h-100">
                <div class="card-body">
                  <div class="d-flex align-items-start">
                    <div class="avatar rounded p-1 bg-primary bg-opacity-10 me-3">
                      <i class="ri-exchange-funds-line text-primary"></i>
                    </div>
                    <div>
                      <h6 class="mb-0">Arus Kas Operasional</h6>
                      <h4 class="mt-1 mb-0">{{ rupiah_format($totalOperatingCashFlow, 0) }}</h4>
                      <small class="text-muted">Dari aktivitas bisnis utama</small>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Investasi Card -->
            <div class="col-md-4">
              <div class="card shadow-none bg-label-warning h-100">
                <div class="card-body">
                  <div class="d-flex align-items-start">
                    <div class="avatar rounded p-1 bg-warning bg-opacity-10 me-3">
                      <i class="ri-building-line text-warning"></i>
                    </div>
                    <div>
                      <h6 class="mb-0">Arus Kas Investasi</h6>
                      <h4 class="mt-1 mb-0">{{ rupiah_format($totalInvestingCashFlow, 0) }}</h4>
                      <small class="text-muted">Dari pembelian/penjualan aset</small>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Pendanaan Card -->
            <div class="col-md-4">
              <div class="card shadow-none bg-label-info h-100">
                <div class="card-body">
                  <div class="d-flex align-items-start">
                    <div class="avatar rounded p-1 bg-info bg-opacity-10 me-3">
                      <i class="ri-bank-line text-info"></i>
                    </div>
                    <div>
                      <h6 class="mb-0">Arus Kas Pendanaan</h6>
                      <h4 class="mt-1 mb-0">{{ rupiah_format($totalFinancingCashFlow, 0) }}</h4>
                      <small class="text-muted">Dari ekuitas dan pinjaman</small>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Chart Row -->
  <div class="row mb-4">
    <div class="col-md-8">
      <div class="card">
        <div class="card-header">
          <h5 class="card-title mb-0">Tren Arus Kas</h5>
        </div>
        <div class="card-body">
          <div id="cashflowChart" style="height: 360px;"></div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card h-100">
        <div class="card-header">
          <h5 class="card-title mb-0">Komposisi Arus Kas</h5>
        </div>
        <div class="card-body d-flex justify-content-center align-items-center">
          <div id="cashflowPieChart" style="height: 300px; width: 100%;"></div>
        </div>
      </div>
    </div>
  </div>

  <!-- Arus Kas Dari Aktivitas Operasional -->
  <div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h5 class="card-title mb-0">
        <i class="ri-exchange-funds-line me-2 text-primary"></i>
        Arus Kas dari Aktivitas Operasional
      </h5>
      <span class="badge bg-primary rounded-pill">{{ rupiah_format($totalOperatingCashFlow, 0) }}</span>
    </div>
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-hover table-striped border-top" id="operatingTable">
          <thead class="table-light">
            <tr>
              <th>Tanggal</th>
              <th>Kode</th>
              <th>Deskripsi</th>
              <th>Tipe</th>
              <th class="text-end">Jumlah</th>
            </tr>
          </thead>
          <tbody>
            @php
              $operatingInflow = 0;
              $operatingOutflow = 0;
            @endphp

            @foreach ($operatingCashFlow as $transaction)
              @php
                if ($transaction->transaction_type == 'penjualan') {
                  $operatingInflow += $transaction->amount;
                  $badgeClass = 'bg-success';
                  $icon = 'ri-arrow-up-line';
                  $type = 'Penerimaan';
                } else {
                  $operatingOutflow += $transaction->amount;
                  $badgeClass = 'bg-danger';
                  $icon = 'ri-arrow-down-line';
                  $type = $transaction->transaction_type == 'pembelian' ? 'Pembelian' : 'Pengeluaran';
                }
              @endphp
              <tr>
                <td>{{ \Carbon\Carbon::parse($transaction->transaction_date)->format('d/m/Y') }}</td>
                <td>{{ $transaction->transaction_code }}</td>
                <td>
                  <div class="d-flex flex-column">
                    <span class="fw-medium">{{ $transaction->transaction_name }}</span>
                    <small class="text-muted">{{ $transaction->description }}</small>
                  </div>
                </td>
                <td>
                  <span class="badge {{ $badgeClass }} rounded-pill">
                    <i class="{{ $icon }} me-1"></i> {{ $type }}
                  </span>
                </td>
                <td class="text-end fw-medium">{{ rupiah_format($transaction->amount, 0) }}</td>
              </tr>
            @endforeach
          </tbody>
          <tfoot class="table-border-bottom-0">
            <tr class="table-active">
              <td colspan="3" class="fw-bold text-end">Total Penerimaan:</td>
              <td colspan="2" class="fw-bold text-end text-success">{{ rupiah_format($operatingInflow, 0) }}</td>
            </tr>
            <tr class="table-active">
              <td colspan="3" class="fw-bold text-end">Total Pengeluaran:</td>
              <td colspan="2" class="fw-bold text-end text-danger">{{ rupiah_format($operatingOutflow, 0) }}</td>
            </tr>
            <tr class="border-top">
              <td colspan="3" class="fw-bold text-end">Arus Kas Bersih dari Aktivitas Operasional:</td>
              <td colspan="2" class="fw-bold text-end {{ $totalOperatingCashFlow >= 0 ? 'text-success' : 'text-danger' }}">
                {{ rupiah_format($totalOperatingCashFlow, 0) }}
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>

  <!-- Arus Kas Dari Aktivitas Investasi -->
  <div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h5 class="card-title mb-0">
        <i class="ri-building-line me-2 text-warning"></i>
        Arus Kas dari Aktivitas Investasi
      </h5>
      <span class="badge bg-warning rounded-pill">{{ rupiah_format($totalInvestingCashFlow, 0) }}</span>
    </div>
    <div class="card-body">
      @if($investingCashFlow->count() > 0)
      <div class="table-responsive">
        <table class="table table-hover table-striped border-top" id="investingTable">
          <thead class="table-light">
            <tr>
              <th>Tanggal</th>
              <th>Kode</th>
              <th>Deskripsi</th>
              <th>Tipe</th>
              <th class="text-end">Jumlah</th>
            </tr>
          </thead>
          <tbody>
            @php
              $investingInflow = 0;
              $investingOutflow = 0;
            @endphp

            @foreach ($investingCashFlow as $transaction)
              @php
                if ($transaction->amount > 0) {
                  $investingInflow += $transaction->amount;
                  $badgeClass = 'bg-success';
                  $icon = 'ri-arrow-up-line';
                  $type = 'Penerimaan';
                } else {
                  $investingOutflow += abs($transaction->amount);
                  $badgeClass = 'bg-danger';
                  $icon = 'ri-arrow-down-line';
                  $type = 'Pengeluaran';
                }
              @endphp
              <tr>
                <td>{{ \Carbon\Carbon::parse($transaction->transaction_date)->format('d/m/Y') }}</td>
                <td>{{ $transaction->transaction_code }}</td>
                <td>
                  <div class="d-flex flex-column">
                    <span class="fw-medium">{{ $transaction->transaction_name }}</span>
                    <small class="text-muted">{{ $transaction->description }}</small>
                  </div>
                </td>
                <td>
                  <span class="badge {{ $badgeClass }} rounded-pill">
                    <i class="{{ $icon }} me-1"></i> {{ $type }}
                  </span>
                </td>
                <td class="text-end fw-medium">{{ rupiah_format(abs($transaction->amount), 0) }}</td>
              </tr>
            @endforeach
          </tbody>
          <tfoot class="table-border-bottom-0">
            <tr class="table-active">
              <td colspan="3" class="fw-bold text-end">Total Penerimaan:</td>
              <td colspan="2" class="fw-bold text-end text-success">{{ rupiah_format($investingInflow, 0) }}</td>
            </tr>
            <tr class="table-active">
              <td colspan="3" class="fw-bold text-end">Total Pengeluaran:</td>
              <td colspan="2" class="fw-bold text-end text-danger">{{ rupiah_format($investingOutflow, 0) }}</td>
            </tr>
            <tr class="border-top">
              <td colspan="3" class="fw-bold text-end">Arus Kas Bersih dari Aktivitas Investasi:</td>
              <td colspan="2" class="fw-bold text-end {{ $totalInvestingCashFlow >= 0 ? 'text-success' : 'text-danger' }}">
                {{ rupiah_format($totalInvestingCashFlow, 0) }}
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
      @else
      <div class="text-center py-5">
        <div class="avatar avatar-lg mb-3">
          <div class="avatar-initial rounded-circle bg-label-warning">
            <i class="ri-building-line"></i>
          </div>
        </div>
        <h6>Tidak ada transaksi investasi untuk periode ini</h6>
        <p class="text-muted">Belum ada pembelian atau penjualan aset tercatat</p>
      </div>
      @endif
    </div>
  </div>

  <!-- Arus Kas Dari Aktivitas Pendanaan -->
  <div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h5 class="card-title mb-0">
        <i class="ri-bank-line me-2 text-info"></i>
        Arus Kas dari Aktivitas Pendanaan
      </h5>
      <span class="badge bg-info rounded-pill">{{ rupiah_format($totalFinancingCashFlow, 0) }}</span>
    </div>
    <div class="card-body">
      @if($financingCashFlow->count() > 0)
      <div class="table-responsive">
        <table class="table table-hover table-striped border-top" id="financingTable">
          <thead class="table-light">
            <tr>
              <th>Tanggal</th>
              <th>Kode</th>
              <th>Deskripsi</th>
              <th>Tipe</th>
              <th class="text-end">Jumlah</th>
            </tr>
          </thead>
          <tbody>
            @php
              $financingInflow = 0;
              $financingOutflow = 0;
            @endphp

            @foreach ($financingCashFlow as $transaction)
              @php
                if ($transaction->amount > 0) {
                  $financingInflow += $transaction->amount;
                  $badgeClass = 'bg-success';
                  $icon = 'ri-arrow-up-line';
                  $type = 'Penerimaan';
                } else {
                  $financingOutflow += abs($transaction->amount);
                  $badgeClass = 'bg-danger';
                  $icon = 'ri-arrow-down-line';
                  $type = 'Pengeluaran';
                }
              @endphp
              <tr>
                <td>{{ \Carbon\Carbon::parse($transaction->transaction_date)->format('d/m/Y') }}</td>
                <td>{{ $transaction->transaction_code }}</td>
                <td>
                  <div class="d-flex flex-column">
                    <span class="fw-medium">{{ $transaction->transaction_name }}</span>
                    <small class="text-muted">{{ $transaction->description }}</small>
                  </div>
                </td>
                <td>
                  <span class="badge {{ $badgeClass }} rounded-pill">
                    <i class="{{ $icon }} me-1"></i> {{ $type }}
                  </span>
                </td>
                <td class="text-end fw-medium">{{ rupiah_format(abs($transaction->amount), 0) }}</td>
              </tr>
            @endforeach
          </tbody>
          <tfoot class="table-border-bottom-0">
            <tr class="table-active">
              <td colspan="3" class="fw-bold text-end">Total Penerimaan:</td>
              <td colspan="2" class="fw-bold text-end text-success">{{ rupiah_format($financingInflow, 0) }}</td>
            </tr>
            <tr class="table-active">
              <td colspan="3" class="fw-bold text-end">Total Pengeluaran:</td>
              <td colspan="2" class="fw-bold text-end text-danger">{{ rupiah_format($financingOutflow, 0) }}</td>
            </tr>
            <tr class="border-top">
              <td colspan="3" class="fw-bold text-end">Arus Kas Bersih dari Aktivitas Pendanaan:</td>
              <td colspan="2" class="fw-bold text-end {{ $totalFinancingCashFlow >= 0 ? 'text-success' : 'text-danger' }}">
                {{ rupiah_format($totalFinancingCashFlow, 0) }}
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
      @else
      <div class="text-center py-5">
        <div class="avatar avatar-lg mb-3">
          <div class="avatar-initial rounded-circle bg-label-info">
            <i class="ri-bank-line"></i>
          </div>
        </div>
        <h6>Tidak ada transaksi pendanaan untuk periode ini</h6>
        <p class="text-muted">Belum ada transaksi ekuitas atau pinjaman tercatat</p>
      </div>
      @endif
    </div>
  </div>

  <!-- Total Arus Kas -->
  <div class="card mb-4">
    <div class="card-body">
      <div class="row">
        <div class="col-12">
          <div class="d-flex justify-content-between mb-3">
            <h6>Arus Kas dari Aktivitas Operasional</h6>
            <h6 class="{{ $totalOperatingCashFlow >= 0 ? 'text-success' : 'text-danger' }}">
              {{ rupiah_format($totalOperatingCashFlow, 0) }}
            </h6>
          </div>
          <div class="d-flex justify-content-between mb-3">
            <h6>Arus Kas dari Aktivitas Investasi</h6>
            <h6 class="{{ $totalInvestingCashFlow >= 0 ? 'text-success' : 'text-danger' }}">
              {{ rupiah_format($totalInvestingCashFlow, 0) }}
            </h6>
          </div>
          <div class="d-flex justify-content-between mb-3">
            <h6>Arus Kas dari Aktivitas Pendanaan</h6>
            <h6 class="{{ $totalFinancingCashFlow >= 0 ? 'text-success' : 'text-danger' }}">
              {{ rupiah_format($totalFinancingCashFlow, 0) }}
            </h6>
          </div>
          <hr>
          <div class="d-flex justify-content-between">
            <h5>Total Arus Kas Bersih</h5>
            <h5 class="{{ $netCashFlow >= 0 ? 'text-success' : 'text-danger' }}">
              {{ rupiah_format($netCashFlow, 0) }}
            </h5>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  @media print {
    body {
      background-color: white;
    }

    .card {
      box-shadow: none !important;
      border: 1px solid #ddd;
    }

    .no-print {
      display: none !important;
    }

    .container-xxl {
      max-width: 100% !important;
      padding: 0 !important;
    }

    .footer {
      display: none;
    }

    .bg-menu-theme, .app-brand, .menu, .navbar {
      display: none !important;
    }

    #cashflowChart, #cashflowPieChart {
      break-inside: avoid;
    }
  }
</style>
@endsection