@extends('layout.app')

@section('content')
<div class="container-fluid">
    <div class="page-header">
        <h2 class="page-title">Sales Report</h2>
        <div class="text-muted">Track your business performance</div>
    </div>

    <div class="card mb-4">
        <div class="card-body">
           <form method="GET" class="row g-3 align-items-end">
    <div class="col-md-3">
        <label class="form-label">From Date</label>
        <input type="date" name="start_date" class="form-control" value="{{ request('start_date') }}">
    </div>
    <div class="col-md-3">
        <label class="form-label">To Date</label>
        <input type="date" name="end_date" class="form-control" value="{{ request('end_date') }}">
    </div>
    <div class="col-md-3">
        <label class="form-label">Quick Filter</label>
        <select name="filter" class="form-select">
            <option value="">Select</option>
            <option value="week" {{ request('filter') === 'week' ? 'selected' : '' }}>This Week</option>
            <option value="month" {{ request('filter') === 'month' ? 'selected' : '' }}>This Month</option>
            <option value="year" {{ request('filter') === 'year' ? 'selected' : '' }}>This Year</option>
        </select>
    </div>
    <div class="col-md-2">
        <button type="submit" class="btn btn-primary w-100">
            <i class="fas fa-search me-2"></i> Filter
        </button>
    </div>
</form>

        </div>
    </div>

    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card stat-card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="stat-title">Total Purchase</h6>
                            <h3 class="stat-value">${{ number_format($totalPurchase, 2) }}</h3>
                        </div>
                        <div class="stat-icon bg-primary-light">
                            <i class="fas fa-shopping-cart text-primary"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="stat-title">Total Sale</h6>
                            <h3 class="stat-value">${{ number_format($totalSale, 2) }}</h3>
                        </div>
                        <div class="stat-icon bg-success-light">
                            <i class="fas fa-cash-register text-success"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="stat-title">Profit</h6>
                            <h3 class="stat-value text-success">${{ number_format($profit, 2) }}</h3>
                        </div>
                        <div class="stat-icon bg-success-light">
                            <i class="fas fa-chart-line text-success"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="stat-title">Loss</h6>
                            <h3 class="stat-value text-danger">${{ number_format($loss, 2) }}</h3>
                        </div>
                        <div class="stat-icon bg-danger-light">
                            <i class="fas fa-chart-line text-danger"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Monthly Sales, Purchases & Profit/Loss</h3>
            <div class="card-options">
                {{-- <button class="btn btn-sm btn-outline-secondary">
                    <i class="fas fa-download me-1"></i> Export
                </button> --}}
            </div>
        </div>
        <div class="card-body">
            <div class="chart-container" style="height: 400px;">
                <canvas id="transactionChart"></canvas>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<!-- Add this in the <head> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">


<script>
  const salesData = Object.values(@json($monthlySales));
  const purchasesData = Object.values(@json($monthlyPurchases));
  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", 
                  "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

  const profitData = [];
  const lossData = [];
  const profitColors = [];
  const lossColors = [];

  for (let i = 0; i < months.length; i++) {
    const sale = salesData[i] || 0;
    const purchase = purchasesData[i] || 0;

    if (sale > purchase) {
      profitData.push(sale - purchase);
      lossData.push(null); // hide loss
      profitColors.push('rgba(40, 167, 69, 0.8)');
      lossColors.push(null);
    } else if (purchase > sale) {
      lossData.push(purchase - sale);
      profitData.push(null); // hide profit
      lossColors.push('rgba(220, 53, 69, 0.8)');
      profitColors.push(null);
    } else {
      // Equal (no profit/loss)
      profitData.push(null);
      lossData.push(null);
      profitColors.push(null);
      lossColors.push(null);
    }
  }

  const ctx = document.getElementById('transactionChart').getContext('2d');
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: months,
      datasets: [
        {
          label: 'Sales ($)',
          data: salesData,
          backgroundColor: 'rgba(13, 110, 253, 0.8)',
          borderColor: 'rgba(13, 110, 253, 1)',
          borderWidth: 1,
          borderRadius: 4
        },
        {
          label: 'Purchases ($)',
          data: purchasesData,
          backgroundColor: 'rgba(255, 193, 7, 0.8)',
          borderColor: 'rgba(255, 193, 7, 1)',
          borderWidth: 1,
          borderRadius: 4
        },
        {
          label: 'Profit ($)',
          data: profitData,
          backgroundColor: profitColors,
          borderColor: 'rgba(40, 167, 69, 1)',
          borderWidth: 1,
          borderRadius: 4
        },
        {
          label: 'Loss ($)',
          data: lossData,
          backgroundColor: lossColors,
          borderColor: 'rgba(220, 53, 69, 1)',
          borderWidth: 1,
          borderRadius: 4
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        x: {
          stacked: false,
          grid: {
            display: false
          },
          title: { 
            display: true, 
            text: 'Month',
            color: '#6c757d',
            font: {
              weight: 'bold'
            }
          }
        },
        y: {
          beginAtZero: true,
          stacked: false,
          title: { 
            display: true, 
            text: 'Amount ($)',
            color: '#6c757d',
            font: {
              weight: 'bold'
            }
          },
          ticks: {
            callback: value => '$' + value.toLocaleString()
          },
          grid: {
            color: 'rgba(0, 0, 0, 0.05)'
          }
        }
      },
      plugins: {
        legend: {
          position: 'top',
          labels: {
            usePointStyle: true,
            padding: 20
          }
        },
        tooltip: {
          callbacks: {
            label: function(context) {
              const value = context.formattedValue;
              if (value === 'null' || value === null) return null;
              return `${context.dataset.label}: $${parseFloat(value).toLocaleString()}`;
            }
          }
        },
        datalabels: {
          display: false
        }
      },
      interaction: {
        mode: 'index',
        intersect: false
      }
    }
  });
</script>

<style>
    .page-header {
        margin-bottom: 2rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #e5e9f2;
    }
    
    .page-title {
        font-weight: 600;
        color: #2e384d;
    }
    
    .stat-card {
        border-radius: 8px;
        border: none;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.03);
        transition: all 0.3s ease;
    }
    
    .stat-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
    }
    
    .stat-title {
        font-size: 0.875rem;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 0.5rem;
    }
    
    .stat-value {
        font-weight: 600;
        color: #2e384d;
        margin-bottom: 0;
    }
    
    .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
    }
    
    .bg-primary-light {
        background-color: rgba(13, 110, 253, 0.1);
    }
    
    .bg-success-light {
        background-color: rgba(25, 135, 84, 0.1);
    }
    
    .bg-danger-light {
        background-color: rgba(220, 53, 69, 0.1);
    }
    
    .card-header {
        background-color: white;
        border-bottom: 1px solid #e5e9f2;
        padding: 1.25rem 1.5rem;
    }
    
    .card-title {
        margin-bottom: 0;
        font-weight: 600;
    }
    
    .card-options {
        display: flex;
        gap: 0.5rem;
    }
</style>
@endsection