@extends('admin.layouts.app')

@section('title', 'Earning Growth Report')

@push('styles')
<style>
.chart-card {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 20px;
  margin-top: 20px;
}
</style>
@endpush

@section('content')
<h4 class="font-weight-bold py-3 mb-0">Earning Growth Report</h4>

<form method="POST" action="{{ route('admin.reports.earning-growth') }}" class="row gy-2">
  @csrf
  <div class="col-md-4">
    <label>From Date</label>
    <input type="date" name="FromDate" class="form-control" value="{{ $from }}">
  </div>
  <div class="col-md-4">
    <label>To Date</label>
    <input type="date" name="ToDate" class="form-control" value="{{ $to }}">
  </div>
  <div class="col-md-2 d-flex align-items-end">
    <button class="btn btn-primary w-100">Filter</button>
  </div>
</form>

<div class="chart-card">
  <h5 class="text-center mb-4">Monthly Income vs Expense Report ({{ $currentYear }})</h5>
  <div style="position: relative; height: 450px; width: 100%;">
    <canvas id="incomeExpenseChart"></canvas>
  </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1"></script>
<script>
const ctx = document.getElementById('incomeExpenseChart').getContext('2d');

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: @json($months),
    datasets: [
      {
        label: 'Earnings (Credit)',
        data: @json($earnings),
        backgroundColor: 'rgba(40,167,69,0.9)',
        borderColor: 'rgba(40,167,69,1)',
        borderWidth: 1.5,
        borderRadius: 6,
        maxBarThickness: 45
      },
      {
        label: 'Expenses (Debit)',
        data: @json($expenses),
        backgroundColor: 'rgba(220,53,69,0.9)',
        borderColor: 'rgba(200,35,51,1)',
        borderWidth: 1.5,
        borderRadius: 6,
        maxBarThickness: 45
      },
      {
        label: 'Profit (Earnings - Expenses)',
        data: @json($profit),
        backgroundColor: function(ctx) {
          const val = ctx.raw;
          if (val > 0) return 'rgba(0,123,255,0.9)';
          if (val < 0) return 'rgba(255,99,71,0.9)';
          return 'rgba(128,128,128,0.7)';
        },
        borderWidth: 1.5,
        borderRadius: 6,
        maxBarThickness: 45
      }
    ]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    interaction: { mode: 'index', intersect: false },
    plugins: {
      title: {
        display: true,
        text: 'Income, Expense & Profit Overview',
        font: { size: 20, weight: 'bold' },
        color: '#333'
      },
      legend: {
        position: 'bottom',
        labels: { font: { size: 14, weight: '600' }, color: '#333' }
      },
      tooltip: {
        callbacks: {
          title: (items) => items[0].label,
          label: (item) => `${item.dataset.label}: ₹${item.formattedValue}`
        }
      }
    },
    scales: {
      x: {
        grid: { display: false },
        title: { display: true, text: 'Months', font: { weight: 'bold', size: 14 }, color: '#333' }
      },
      y: {
        title: { display: true, text: 'Amount (₹)', font: { weight: 'bold', size: 14 }, color: '#333' },
        ticks: {
          callback: function(value) {
            return '₹' + value;
          }
        },
        grid: { color: 'rgba(200,200,200,0.2)' }
      }
    }
  }
});
</script>
@endpush