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

export default class TradeBook extends Component{
    constructor(props){
        super(props);
         this.state={
            assetsLoaded:false,orders:[]
         }
      }

      componentDidMount(){
            const url='https://capitalsgrowth.in/Rest/all_trades_api/'+localStorage.getItem('userid');
            fetch(url).then((response)=>response.json())
            .then((responseJson)=>{
              console.log(responseJson)
               this.setState({orders:responseJson,spinner:false})
            }).catch((error)=>{
              console.log(error)
            })
      }

    render(){
        return (     
            <>
            

<div className="section mt-1">
    <div className="card">
        <div className="card-body pt-0">
            
            <div className="tab-content mt-2">
                <div className="tab-pane fade show active" id="overview2" role="tabpanel">
                {this.state.orders.map(m => (
                    <div className='row' style={{color:'red'}}>
                        <div className='col-4'>
                            <small>{m.type} {m.lotsize}</small>
                            <h4>{m.metal}</h4>
                            <small>{m.bsday}</small>
                        </div>
                        <div className='col-4 text-center'>
                            <small>LTP</small>
                            <h4>{m.last_live}</h4>
                            <small>LIMIT {m.setlimit}</small>
                        </div>
                        <div className='col-4 float-right text-right'>
                            <small>Profit/Loss</small>
                            {m.pro_loss>0 &&
                            <h4 className='text-success'>{m.pro_loss}</h4>}                            
                            {m.pro_loss<0 &&
                            <h4 className='text-danger'>{m.pro_loss}</h4>}
                        </div>
                    </div>))}
                </div>
                <div className="tab-pane fade" id="cards2" role="tabpanel">
                    
                </div>
                <div className="tab-pane fade" id="settings2" role="tabpanel">
                    
                </div>
            </div>
        </div>
    </div>
</div>

            </> 
        );
    }
}


