@extends('layouts.app')
@section('title','Expenditure Report')
@section('page-title','Expenditure Report')
@section('content')

<style>
@media print {
  .no-print { display:none!important; }
  .card { box-shadow:none!important; border:1px solid #ddd!important; }
  body { background:#fff!important; }
  .main-content { margin-left:0!important; }
  .sidebar,.topbar { display:none!important; }
}
.chart-wrap { position:relative; height:280px; }
</style>

{{-- Filter Bar --}}
<div class="card stat-card mb-3 no-print">
  <div class="card-body py-2 px-3">
    <form class="row g-2 align-items-end" method="GET">
      <div class="col-md-2">
        <label class="form-label small mb-1">Project</label>
        <select name="project_id" class="form-select form-select-sm">
          <option value="">All Projects</option>
          @foreach($projects as $p)<option value="{{ $p->id }}" {{ request('project_id')==$p->id?'selected':'' }}>{{ $p->name }}</option>@endforeach
        </select>
      </div>
      <div class="col-md-2">
        <label class="form-label small mb-1">Category</label>
        <select name="category_id" class="form-select form-select-sm">
          <option value="">All Categories</option>
          @foreach($categories as $c)<option value="{{ $c->id }}" {{ request('category_id')==$c->id?'selected':'' }}>{{ $c->name }}</option>@endforeach
        </select>
      </div>
      <div class="col-md-2">
        <label class="form-label small mb-1">Date From</label>
        <input name="date_from" type="date" class="form-control form-control-sm" value="{{ request('date_from') }}">
      </div>
      <div class="col-md-2">
        <label class="form-label small mb-1">Date To</label>
        <input name="date_to" type="date" class="form-control form-control-sm" value="{{ request('date_to') }}">
      </div>
      <div class="col-md-2">
        <label class="form-label small mb-1">Payment Status</label>
        <select name="is_paid" class="form-select form-select-sm">
          <option value="">All</option>
          <option value="1" {{ request('is_paid')==='1'?'selected':'' }}>Paid</option>
          <option value="0" {{ request('is_paid')==='0'?'selected':'' }}>Pending</option>
        </select>
      </div>
      <div class="col-md-2 d-flex gap-1">
        <button class="btn btn-primary btn-sm flex-fill"><i class="bi bi-search me-1"></i>Generate</button>
        <a href="{{ route('reports.expenditure') }}" class="btn btn-outline-secondary btn-sm"><i class="bi bi-x"></i></a>
      </div>
    </form>
  </div>
</div>

{{-- Report Header (for print) --}}
<div class="d-none d-print-block mb-3 text-center">
  <h4 class="fw-bold">Hillside Real Estates — Expenditure Report</h4>
  <p class="text-muted small">Generated: {{ now()->format('d M Y H:i') }}</p>
</div>

{{-- Summary Cards --}}
@php
  $grandTotal  = $expenditures->sum('amount');
  $paidTotal   = $expenditures->where('is_paid',true)->sum('amount');
  $pendingTotal = $expenditures->where('is_paid',false)->sum('amount');
  $recordCount = $expenditures->count();
@endphp
<div class="row g-3 mb-3">
  <div class="col-6 col-md-3">
    <div class="card stat-card p-3 text-center border-start border-4 border-danger">
      <div class="small text-muted mb-1">Total Expenditure</div>
      <div class="fs-5 fw-bold text-danger">GH₵ {{ number_format($grandTotal,2) }}</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="card stat-card p-3 text-center border-start border-4 border-success">
      <div class="small text-muted mb-1">Amount Paid</div>
      <div class="fs-5 fw-bold text-success">GH₵ {{ number_format($paidTotal,2) }}</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="card stat-card p-3 text-center border-start border-4 border-warning">
      <div class="small text-muted mb-1">Outstanding</div>
      <div class="fs-5 fw-bold text-warning">GH₵ {{ number_format($pendingTotal,2) }}</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="card stat-card p-3 text-center border-start border-4 border-info">
      <div class="small text-muted mb-1">Line Items</div>
      <div class="fs-5 fw-bold text-info">{{ $recordCount }}</div>
    </div>
  </div>
</div>

<div class="row g-3 mb-3">
  {{-- Pie Chart --}}
  <div class="col-md-5">
    <div class="card stat-card p-3 h-100">
      <div class="fw-semibold mb-3"><i class="bi bi-pie-chart me-2 text-primary"></i>Spend by Category</div>
      <div class="chart-wrap"><canvas id="catChart"></canvas></div>
    </div>
  </div>

  {{-- Category Breakdown Table --}}
  <div class="col-md-7">
    <div class="card stat-card h-100">
      <div class="card-header bg-white border-0 fw-semibold pt-3 px-3 d-flex justify-content-between align-items-center">
        <span><i class="bi bi-table me-2 text-primary"></i>Category Breakdown</span>
        <button onclick="window.print()" class="btn btn-sm btn-outline-secondary no-print"><i class="bi bi-printer me-1"></i>Print</button>
      </div>
      <div class="table-responsive">
        <table class="table table-sm table-hover mb-0">
          <thead><tr><th>Category</th><th class="text-end">Amount (GH₵)</th><th class="text-end">%</th><th class="text-center">Items</th></tr></thead>
          <tbody>
            @php $sorted = $byCategory->sortByDesc('total'); @endphp
            @foreach($sorted as $cat)
            <tr>
              <td class="small fw-semibold">{{ $cat['name'] }}</td>
              <td class="text-end small">{{ number_format($cat['total'],2) }}</td>
              <td class="text-end small">
                <span class="badge bg-light text-dark border">{{ $grandTotal>0 ? round(($cat['total']/$grandTotal)*100,1) : 0 }}%</span>
              </td>
              <td class="text-center small">{{ $cat['count'] }}</td>
            </tr>
            @endforeach
          </tbody>
          <tfoot class="table-light">
            <tr class="fw-bold">
              <td>TOTAL</td>
              <td class="text-end">{{ number_format($grandTotal,2) }}</td>
              <td class="text-end">100%</td>
              <td class="text-center">{{ $recordCount }}</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>
</div>

{{-- All Transactions Table --}}
<div class="card stat-card">
  <div class="card-header bg-white border-0 fw-semibold pt-3 px-3 d-flex justify-content-between align-items-center">
    <span><i class="bi bi-list-ul me-2 text-primary"></i>All Transactions ({{ $recordCount }})</span>
    <div class="d-flex gap-2 no-print">
      <button onclick="window.print()" class="btn btn-sm btn-outline-secondary"><i class="bi bi-printer me-1"></i>Print / PDF</button>
    </div>
  </div>
  <div class="table-responsive">
    <table class="table table-sm table-hover mb-0" id="transTable">
      <thead>
        <tr>
          <th>#</th>
          <th>Date</th>
          <th>Description</th>
          <th>Category</th>
          <th>Project</th>
          <th>Paid By</th>
          <th>Mode</th>
          <th class="text-end">Amount (GH₵)</th>
          <th class="text-center">Status</th>
        </tr>
      </thead>
      <tbody>
        @forelse($expenditures as $i => $e)
        <tr>
          <td class="small text-muted">{{ $i+1 }}</td>
          <td class="small">{{ $e->date instanceof \Carbon\Carbon ? $e->date->format('d/m/Y') : \Carbon\Carbon::parse($e->date)->format('d/m/Y') }}</td>
          <td class="small">{{ Str::limit($e->description, 45) }}</td>
          <td class="small"><span class="badge bg-secondary" style="background:{{ $e->category->color ?? '#6c757d' }}!important">{{ $e->category->code ?? '-' }}</span></td>
          <td class="small">{{ $e->project->name ?? '-' }}</td>
          <td class="small">{{ $e->paid_by ?? '-' }}</td>
          <td class="small text-capitalize">{{ str_replace('_',' ',$e->payment_mode ?? '-') }}</td>
          <td class="text-end small fw-semibold">{{ number_format($e->amount,2) }}</td>
          <td class="text-center"><span class="badge bg-{{ $e->is_paid ? 'success' : 'warning text-dark' }}">{{ $e->is_paid ? 'Paid' : 'Pending' }}</span></td>
        </tr>
        @empty
        <tr><td colspan="9" class="text-center py-5 text-muted">
          <i class="bi bi-inbox fs-3 d-block mb-2"></i>
          No expenditure records found for the selected filters.
          <br><a href="{{ route('reports.expenditure') }}" class="btn btn-sm btn-outline-primary mt-2">Clear Filters</a>
        </td></tr>
        @endforelse
      </tbody>
      @if($expenditures->count() > 0)
      <tfoot class="table-light">
        <tr class="fw-bold">
          <td colspan="7">TOTAL</td>
          <td class="text-end">GH₵ {{ number_format($grandTotal,2) }}</td>
          <td></td>
        </tr>
      </tfoot>
      @endif
    </table>
  </div>
</div>

@endsection
@push('scripts')
<script>
// Build pie chart from category data
const catData = {
  labels: [
    @foreach($byCategory->sortByDesc('total') as $cat)
    "{{ addslashes($cat['name']) }}",
    @endforeach
  ],
  data: [
    @foreach($byCategory->sortByDesc('total') as $cat)
    {{ $cat['total'] }},
    @endforeach
  ]
};

const palette = [
  '#1a5276','#2e86c1','#148f77','#1e8449','#7d3c98','#c0392b','#e67e22',
  '#f39c12','#16a085','#8e44ad','#2980b9','#27ae60','#e74c3c','#f1c40f',
  '#95a5a6','#34495e','#d35400','#c0392b','#7f8c8d','#2ecc71','#3498db',
  '#9b59b6','#e91e63','#ff5722','#607d8b','#795548','#ff9800','#4caf50',
  '#00bcd4','#673ab7','#f44336','#009688','#ff6f00','#37474f','#bf360c'
];

if (catData.labels.length > 0) {
  const ctx = document.getElementById('catChart').getContext('2d');
  new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: catData.labels,
      datasets: [{
        data: catData.data,
        backgroundColor: palette.slice(0, catData.labels.length),
        borderWidth: 2,
        borderColor: '#fff'
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: { position:'right', labels:{ font:{size:10}, boxWidth:12, padding:8 }},
        tooltip: {
          callbacks: {
            label: ctx => ' GH₵ ' + ctx.parsed.toLocaleString('en-GH', {minimumFractionDigits:2}) +
                          ' (' + Math.round(ctx.parsed / catData.data.reduce((a,b)=>a+b,0)*100) + '%)'
          }
        }
      }
    }
  });
}
</script>
@endpush