@extends('layout.app')
 @section('content')
 <!-- Main Content -->
 <div class="container">
     <div class="page-inner">
         <div class="d-flex align-items-left align-items-md-center flex-column flex-md-row pt-2 pb-4">
             <div>
                 <h3 class="fw-bold mb-3">Dashboard</h3>
             </div>
             <div class="ms-md-auto py-2 py-md-0">
                 <a href="#" class="btn btn-label-info btn-round me-2">Manage</a>
             </div>
         </div>

         <!-- Stats Cards -->
         <div class="row">
             <div class="col-sm-6 col-md-3">
                 <div class="card card-stats card-round">
                     <div class="card-body">
                         <div class="row align-items-center">
                             <div class="col-icon">
                                 <div class="icon-big text-center icon-primary bubble-shadow-small">
                                     <i class="fas fa-users"></i>
                                 </div>
                             </div>
                             <div class="col col-stats ms-3 ms-sm-0">
                                 <div class="numbers">
                                     <p class="card-category">Customers</p>
                                     <h4 class="card-title">{{ $saleCount }}</h4>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="col-sm-6 col-md-3">
                 <div class="card card-stats card-round">
                     <div class="card-body">
                         <div class="row align-items-center">
                             <div class="col-icon">
                                 <div class="icon-big text-center icon-info bubble-shadow-small">
                                     <i class="fas fa-user-check"></i>
                                 </div>
                             </div>
                            <div class="col col-stats ms-3 ms-sm-0">
                            <div class="numbers">
                                <p class="card-category">Venders</p>
                                <h4 class="card-title">{{ $vendorCount }}</h4>
                            </div>
                        </div>

                         </div>
                     </div>
                 </div>
             </div>
             <div class="col-sm-6 col-md-3">
                 <div class="card card-stats card-round">
                     <div class="card-body">
                         <div class="row align-items-center">
                             <div class="col-icon">
                                 <div class="icon-big text-center icon-success bubble-shadow-small">
                                     <i class="fas fa-luggage-cart"></i>
                                 </div>
                             </div>
                             <div class="col col-stats ms-3 ms-sm-0">
                                 <div class="numbers">
                                     <p class="card-category">Purchases</p>
                                     <h4 class="card-title">{{ $purchaseCount }}</h4>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="col-sm-6 col-md-3">
                 <div class="card card-stats card-round">
                     <div class="card-body">
                         <div class="row align-items-center">
                             <div class="col-icon">
                                 <div class="icon-big text-center icon-secondary bubble-shadow-small">
                                     <i class="far fa-check-circle"></i>
                                 </div>
                             </div>
                             <div class="col col-stats ms-3 ms-sm-0">
                                 <div class="numbers">
                                     <p class="card-category">Sales</p>
                                     <h4 class="card-title">{{ $saleCount }}</h4>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>

         <!-- Transaction History -->
         <div class="row">
             <div class="col-md-12">
                 <div class="card card-round">
                     <div class="card-header">
                         <div class="card-head-row card-tools-still-right">
                             <div style="color: red" class="card-title">New Transitions</div>
                             
                             <div class="card-tools">
                                 <div class="dropdown">
                                     <button class="btn btn-icon btn-clean me-0" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                         <i class="fas fa-ellipsis-h"></i>
                                     </button>
                                     <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                         <a class="dropdown-item" href="#">Action</a>
                                         <a class="dropdown-item" href="#">Another action</a>
                                         <a class="dropdown-item" href="#">Something else here</a>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                    <div class="card-body p-0">
    <div class="table-responsive">
        <table class="table align-items-center mb-0">
            <thead class="thead-light">
                <tr >
                    <th style="color: rgb(10,76,115);" scope="col">Customer No</th>
                    <th style="color: rgb(10,76,115);" scope="col">Serial Number</th>
                    <th style="color: rgb(10,76,115);" scope="col" class="text-start">Customer Name</th>
                    <th style="color: rgb(10,76,115);" scope="col" class="text-end">Amount</th>
                    <th style="color: rgb(10,76,115);" scope="col" class="text-end">Date & Time</th>
                    <th style="color: rgb(10,76,115);" scope="col" class="text-end">Status</th>
                </tr>
            </thead>
            <tbody>
                @foreach($sales->sortByDesc('id')->take(2) as $sa)
                <tr>
                   <td class="text-start">{{ $sa->Customer_No }}</td>
                    <td class="text-start">{{ $sa->stock->product_code }}</td>
                    <td class="text-start">{{ $sa->Customer_name }}</td>
                    <td class="text-end">${{ number_format($sa->sub_total, 2) }}</td>
                    <td class="text-end">{{ \Carbon\Carbon::parse($sa->created_at)->format('d M Y') }}</td>
                    <td class="text-end">
                        @if ($sa->payment_status === 'paid')
                            <span class="badge bg-success">{{ ucfirst($sa->payment_status) }}</span>
                        @elseif ($sa->payment_status === 'pending')
                            <span class="badge bg-warning text-dark">{{ ucfirst($sa->payment_status) }}</span>
                        @elseif ($sa->payment_status === 'unpaid')
                            <span class="badge bg-danger">{{ ucfirst($sa->payment_status) }}</span>
                        @else
                            <span class="badge bg-secondary">{{ ucfirst($sa->payment_status) }}</span>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
<div class="container">
  <div class="page-inner">
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header">
            <div class="card-title">Monthly Purchase And Sales</div>
          </div>
          <div class="card-body">
            <div class="chart-container" style="height: 200px;">
              <canvas id="transactionChart"></canvas>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
const monthlyData = @json($monthlyData);

// Extract data into arrays
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", 
                "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

const salesData = Object.values(monthlyData).map(item => item.sales);
const purchaseData = Object.values(monthlyData).map(item => item.purchase);

const ctx = document.getElementById('transactionChart').getContext('2d');
new Chart(ctx, {
  type: 'bar',
  data: {
    labels: months,
    datasets: [
      {
        label: 'Sales ($)',
        data: salesData,
        backgroundColor: 'rgba(54, 162, 235, 0.6)',
        borderColor: 'rgb(54, 162, 235)',
        borderWidth: 1
      },
      {
        label: 'Purchases ($)',
        data: purchaseData,
        backgroundColor: 'green',
        borderColor: 'green',
        borderWidth: 1
      }
    ]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      x: {
        title: {
          display: true,
          text: 'Month'
        }
      },
      y: {
        beginAtZero: true,
        title: {
          display: true,
          text: 'Amount ($)'
        },
        ticks: {
          callback: function(value) {
            return '$' + value;
          }
        }
      }
    },
    plugins: {
      tooltip: {
        callbacks: {
          label: function(context) {
            return context.dataset.label + ': $' + context.formattedValue;
          }
        }
      }
    }
  }
});
</script>

                 </div>
             </div>
         </div>
     </div>
 </div>
 </div>
 </div>
 </div>
 @endsection