import { Component } from '@angular/core';
import {MatTableDataSource, MatTableModule} from '@angular/material/table';
import {MatInputModule} from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field';


export interface PElement {
  nfacture: number;
  nom: string;
  prenom: string;
  contact: string;
  service: string;
  email: string;
  montant: number;
  modePaiement: string;
  status: string;
  dateTransaction: string;
  
}

const ELEMENT_DATA: PElement[] = [
  {nfacture: 1, nom: 'zaho',   prenom:'zadi',contact:'0101010101', service:'mtn',email:'mrtest@mail.com', montant: 25000, modePaiement:'wave', status:'valide', dateTransaction:'10-04-2024'},
  {nfacture: 2, nom: 'kablan',    prenom:'fatou',contact:'0101010101', service:'mtn',email:'mrtet@mail.com', montant: 25000, modePaiement:'wave', status:'valide', dateTransaction:'16-03-2024'},
  {nfacture: 3, nom: 'toure',    prenom:'koffi',contact:'0101010101', service:'mtn',email:'mrtest@mail.com', montant: 25000, modePaiement:'wave', status:'invalide', dateTransaction:'04-04-2024'},
  {nfacture: 4, nom: 'belem',   prenom:'asaph',contact:'0101010101', service:'mtn',email:'test@mail.com', montant: 27000, modePaiement:'wave', status:'valide', dateTransaction:'16-02-2024'},
  {nfacture: 5, nom: 'tanoh',    prenom:'delmas',contact:'0101010101', service:'mtn',email:'rtest@mail.com', montant: 50000, modePaiement:'wave', status:'invalide', dateTransaction:'16-04-2024'},
  {nfacture: 6, nom: 'gaba',    prenom:'akemane',contact:'0101010101', service:'mtn',email:'mtst@mail.com', montant: 25000, modePaiement:'wave', status:'valide', dateTransaction:'16-01-2024'},
  {nfacture: 7, nom: 'kra',    prenom:'zoulou',contact:'0101010101', service:'mtn',email:'mest@mail.com', montant: 25000, modePaiement:'wave', status:'valide', dateTransaction:'26-03-2024'},
  {nfacture: 8, nom: 'kakou',    prenom:'kasa',contact:'0101010101', service:'mtn',email:'mrtst@mail.com', montant: 80000, modePaiement:'wave', status:'invalide', dateTransaction:'10-04-2024'},
  {nfacture: 9, nom: 'nguessan',    prenom:'daouda',contact:'0101010101', service:'mtn',email:'mrte@mail.com', montant: 25000, modePaiement:'wave', status:'valide', dateTransaction:'16-04-2024'},
  {nfacture: 10, nom: 'Neon',    prenom:'kanon',contact:'0101010101', service:'mtn',email:'mrtest@mail.com', montant: 27000, modePaiement:'wave', status:'valide',dateTransaction:'16-04-2024'},
];


@Component({
  selector: 'bgui-suivi-paiement',
  standalone: true,
  imports: [MatFormFieldModule, MatInputModule, MatTableModule],
  templateUrl: './suivi-paiement.component.html',
  styleUrl: './suivi-paiement.component.scss'
})
export class SuiviPaiementComponent {
  displayedColumns: string[] = ['nfacture', 'nom', 'prenom', 'contact','service', 'email', 'montant', 'modePaiement','status','dateTransaction'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
}
}