
import React,{Component} from 'react';
import axios from 'axios';
import {Link} from 'react-router-dom';
import { confirmAlert } from 'react-confirm-alert';
import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css

export default class UserDashboard extends Component{
    constructor(props){
        super(props);
         this.state={
            assetsLoaded:false,matchlist:[],page:0
         }
      }

      componentDidMount(){
        axios.get('http://localhost:8081/live_matches_api').then(res => {
            this.setState({matchlist:res.data});
        });
        
      }

      getFlags(ct){        
        axios.get('https://restcountries.com/v3.1/name/'+ct).then(res => {
            if(res.data.length>0){
            return res.data[0].flags.png;
            }
        });
      }

    render(){
        return (     
            <>
             <div className="breadcrumb-bettix schedule-page">
            <div className="container">
                <div className="row">
                    <div className="col-xl-7 col-lg-7">
                        <div className="breadcrumb-content">
                            <h2>Match Schedule</h2>
                            <ul>
                                <li>
                                    <a href="#">Home</a>
                                </li>
                                <li>
                                    <a href="#">Pages</a>
                                </li>
                                <li>
                                    Match Schedule
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
             </div>
             <div className="schedule">
            <div className="container">
                <div className="row">
                {this.state.matchlist.map(m => (
                    <div className="col-xl-6 col-lg-6 col-12">
                        <div className="single-match">
                            <div className="part-head">
                                <h5 className="match-title">{m.mtch_teams}</h5>
                            </div>
                            <div className="part-team row">
                                <div className="col-4">
                                    <div className="logo">
                                        <img src="/front/img/team-2.png" alt=""/>
                                    </div>
                                    <span className="team-name">{m.mteam1}</span>
                                    <small className='badge badge-warning'>Back {m.mteam1_back_rate}</small><br/>
                                    <small className='badge badge-danger'>Lay {m.mteam1_lay_rate}</small>
                                </div>
                                <div className="col-4">
                                    <div className="match-time">
                                        <span className="date">{m.mtch_start.replace("T"," ")}</span><br/>
                                        <span className="time text-danger">{m.mtch_type}</span>
                                    </div>
                                    {/* <span className="versase">vs</span> */}
                                    <div className="buttons">
                                        <Link to={'/match/'+m.match_id} className="buy-ticket bet-btn bet-btn-dark-light">Play Now</Link>
                                    </div>
                                </div>
                                <div className="col-4">
                                    <div className="logo">
                                        <img src="/front/img/team-2.png" alt=""/>
                                    </div>
                                    <span className="team-name">{m.mteam2}</span><br/>
                                    <small className='badge badge-warning'>Back {m.mteam2_back_rate}</small><br/>
                                    <small className='badge badge-danger'>Lay {m.mteam2_lay_rate}</small>
                                </div>
                            </div>
                        </div>
                    </div>))}
                </div>
            </div>
             </div>
            </> 
        );
    }
}


