import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpErrorResponse } from '@angular/common/http';
import { environment } from 'src/environments/environment';
// import { ChartType, ChartOptions,ChartConfiguration,ChartData } from 'chart.js';
// import {
//   ApexAxisChartSeries,
//   ApexChart,
//   ApexXAxis,
//   ApexDataLabels,
//   ApexTooltip,
//   ApexStroke,
//   ApexYAxis,
//   ApexFill,
//   ApexGrid,
// } from 'ng-apexcharts';

// const DATA = [
//   {
//     date: '01-05-23',
//     src: './assets/img/ecommerce/products/13.png',
//     product: 'Niker College Bag',
//     id: '#1734-9743',
//     transactionid: '#14008268610',
//     amount:'10',
//     status: 'Available',
//     class:"success",
//     borrow: '2009 '
//   },
//   {
//     date: '02-05-23',
//     src: './assets/img/ecommerce/products/17.png',
//     product: 'Dslr Camera (50mm f/1.9 HRM Lens)',
//     id: '#1234-4567',
//     transactionid: '#31408224782',
//     amount:'10',
//     status: 'Not Available',
//     class:"danger",
//     borrow: '12,435',
//     type1:'ชิ้น',
//     type2:'กล่อง',
//   },
//   {
//     date: '03-05-23',
//     src: './assets/img/ecommerce/products/14.png',
//     product: 'Outdoor Bomber Jacket',
//     id: '#1902-9883',
//     transactionid: '#92065567861',
//     amount:'10',
//     status: 'Not Available',
//     class:"danger",
//     borrow: '5,143',
//     type1:'ชิ้น',
//     type2:'กล่อง',
//   },
//   {
//     date: '04-05-23',
//     src: './assets/img/ecommerce/products/15.png',
//     product: 'Light Blue Teddy',
//     id: '#8745-1232',
//     transactionid: '#31652851650',
//     amount:'10',
//     status: 'Pending',
//     class:"warning",
//     borrow: '7,183',
//     type1:'ชิ้น',
//     type2:'กล่อง',
//   },
//   {
//     date: '05-05-23',
//     src: './assets/img/ecommerce/products/16.png',
//     product: 'Orange Smart Watch (24mm)',
//     id: '#1962-9033',
//     transactionid: '#23518898764',
//     amount:'10',
//     status: 'Shipping',
//     class: "info",
//     borrow: '10,287',
//     },
// ];

// export type ChartOptions1 = {
//   series: ApexAxisChartSeries;
//   chart: ApexChart;
//   xaxis: ApexXAxis;
//   stroke: ApexStroke;
//   tooltip: ApexTooltip;
//   dataLabels: ApexDataLabels;
//   yaxis: ApexYAxis;
//   fill: ApexFill;
//   grid: ApexGrid;
// };
@Component({
  selector: 'app-home-admin',
  templateUrl: './home-admin.component.html',
  styleUrls: ['./home-admin.component.scss']
})
export class HomeAdminComponent {
  // chartOptions: any;
   transaction: any[] = [];

  constructor() {}
  ngOnInit(): void {
    this.transaction = [
      {
        borrow_date: '2025-03-10',
        borrow_name: 'John Doe',
        product_id: 'P101',
        borrow_id: 'B202301',
        borrow_amount: 2,
        class: 'success',
        borrow_status: 'Approved',
        borrow: 'Completed'
      },
      {
        borrow_date: '2025-03-11',
        borrow_name: 'Jane Smith',
        product_id: 'P102',
        borrow_id: 'B202302',
        borrow_amount: 5,
        class: 'warning',
        borrow_status: 'Pending',
        borrow: 'In Progress'
      },
      {
        borrow_date: '2025-03-12',
        borrow_name: 'Alice Johnson',
        product_id: 'P103',
        borrow_id: 'B202303',
        borrow_amount: 1,
        class: 'danger',
        borrow_status: 'Rejected',
        borrow: 'Cancelled'
      }
    ];

}
}
//
  //   disabled = '';
  //   active: any;
  //  constructor(private http: HttpClient) {
  //  }}

  //   this.chartOptions = {
  //     series: [
  //       {
  //         name: 'Order',
  //         type: 'column',
  //         data: [23, 45, 22, 30, 15, 22, 34, 21, 30, 22, 30],
  //       },

  //     ],
  //     colors: ['#1cc961	', '#cdd5e9'],
  //     chart: {
  //       height: 310,
  //       type: 'line',
  //       stacked: false,
  //     },
  //     responsive: [
  //       {
  //         breakpoint: 480,
  //         options: {
  //           chart: {
  //             width: 250,
  //           },
  //           legend: {
  //             position: 'bottom',
  //           },
  //         },
  //       },
  //     ],

  //     legend: {
  //       position: 'top',
  //       show: true,
  //       labels: {
  //         colors: ['#330033	', '#cbd5e1'], // Set colors for the legend labels
  //       },
  //     },
  //     stroke: {
  //       width: [0, 2, 5],
  //       curve: 'smooth',
  //       colors: ['#dfd7d74a'],
  //     },
  //     plotOptions: {
  //       bar: {
  //         columnWidth: '40%',
  //         borderRadius: 4,
  //       },
  //     },

  //     fill: {
  //       opacity: [0.85, 0.25, 1],
  //       colors: ['#3a5892'],
  //     },
  //     labels: [
  //       '01/01/2003',
  //       '02/01/2003',
  //       '03/01/2003',
  //       '04/01/2003',
  //       '05/01/2003',
  //       '06/01/2003',
  //       '07/01/2003',
  //       '08/01/2003',
  //       '09/01/2003',
  //       '10/01/2003',
  //       '11/01/2003',
  //     ],

  //     markers: {
  //       size: 0,
  //     },
  //     xaxis: {
  //       type: 'datetime',
  //     },
  //     yaxis: {
  //       min: 0,
  //     },

  //     tooltip: {
  //       shared: true,
  //       intersect: false,
  //       y: {
  //         formatter: function (y: number) {
  //           if (typeof y !== 'undefined') {
  //             return y.toFixed(0);
  //           }
  //           return y;
  //         },
  //       },
  //     },
  //   };
  // }
  // ngOnInit(): void {
  //   this.getBorrowTransactions();
  //   }
  //   getBorrowTransactions(): void{
  //   this.http.get(environment.api + "/borrow_transaction").subscribe((result:any) => {
  //       console.log(result);
  //       this.transaction = result;
  //     }, (error: HttpErrorResponse) => {
  //       alert(error.message);
  //     });
  // }

//   public scatterChartLabels: string[] = [
//     'Eating',
//     'Drinking',
//     'Sleeping',
//     'Designing',
//     'Coding',
//     'Cycling',
//     'Running',
//   ];
//  public scatterChartOptions: ChartConfiguration['options'] = {
//       scales: {
//         x: {
//           grid: {
//             display: true,
//             color: 'rgba(171, 167, 167,0.2)',
//           },
//         },
//         y: {
//           grid: {
//             display: true,
//             color: 'rgba(171, 167, 167,0.2)',
//           },
//         },
//       },
//     };

//     public scatterChartData: ChartData<'scatter'> = {
//       labels: this.scatterChartLabels,
//       datasets: [
//         {
//           data: [
//             { x: 1, y: 1 },
//             { x: 2, y: 3 },
//             { x: 3, y: -2 },

//           ],
//           label: 'Series A',
//           pointRadius: 10,
//           backgroundColor: '#6366f1',
//         },
//       ],
//     };
//     public scatterChartType: ChartType = 'scatter';
//     public bubbleChartOptions: ChartConfiguration['options'] = {
//       scales: {
//         x: {
//           min: 0,
//           max: 30,
//           ticks: {},
//           grid: {
//             display: true,
//             color: 'rgba(171, 167, 167,0.2)',
//           },
//         },
//         y: {
//           min: 0,
//           max: 30,
//           ticks: {},
//           grid: {
//             display: true,
//             color: 'rgba(171, 167, 167,0.2)',
//           },
//         },
//       },
//     };
//     public bubbleChartType: ChartType = 'bubble';
//     public bubbleChartLegend = true;

//     public bubbleChartData: ChartData<'bubble'> = {
//       labels: [],
//       datasets: [
//         {
//           data: [
//             { x: 1, y: 10, r: 10 },
//             { x: 13, y: 5, r: 15 },
//           ],
//           label: 'First Dataset',
//           backgroundColor: ['#6366f1'],
//           borderColor: 'blue',
//           hoverBackgroundColor: 'purple',
//           hoverBorderColor: '#6366f1',
//         },
//       ],
//     };

//   // Pie
//     public pieChartOptions: ChartOptions<'pie'> = {
//       responsive: true,
//     };
//     public pieChartLabels = ['Priamry', 'Success', 'Warning'];
//     public pieChartDatasets = [
//       {
//         data: [300, 500, 100],
//         backgroundColor: [
//           'rgba(99, 102, 241, 1)', // Primary color
//           'rgba(94, 166, 142, 1)', // Success color
//           'rgba(166, 142, 94, 1)', // Warning color
//         ],
//       },
//     ];
//     public pieChartLegend = true;
//     public pieChartPlugins = [];

//   public generateData(count: number, yrange: { max: number; min: number; }) {
//     let i = 0;
//     const series = [];
//     while (i < count) {
//       const x = 'w' + (i + 1).toString();
//       const y =
//         Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

//       series.push({
//         x: x,
//         y: y,
//       });
//       i++;
//     }
//     return series;
//   }

//   click = (id: string) => {
//     const data = this.Itemdata.filter((x: { id: string }) => {
//       return x.id != id;
//     });
//     this.Itemdata = data;
//   };

//   Itemdata = DATA;
