import React,{Component} from 'react';
import axios from 'axios';
import { useState,useEffect } from "react";
import { useParams,Link } from 'react-router-dom';
import { Helmet } from 'react-helmet';

export default class Deposite extends Component{
    constructor(props){
        super(props);
         this.state={
            assetsLoaded:false,page:0,deps:[],banks:[],amt:0,qr1:'',qr2:'',upi1:'',upi2:''
         }
      }

      componentDidMount(){
        axios.get('https://capitalsgrowth.in/Rest/banks_api').then(res => {
            this.setState({banks:res.data});
        });
        axios.get('https://capitalsgrowth.in/Rest/pay_api').then(res => {
            //console.log(res)
            this.setState({qr1:res.data.qr1,qr2:res.data.qr2,upi1:res.data.upi1,upi2:res.data.upi2});
        });
        axios.get('https://capitalsgrowth.in/Rest/deposite_api').then(res => {
            this.setState({deps:res.data});
        });
      }

      update_amt(at){
          this.setState({amt:at})
      }

      submitForm(){
        
        var formData = new FormData();
        formData.append("amt", this.state.amt);
        formData.append("user", localStorage.getItem('userid'));
        const config = {
            headers: {
              'content-type': 'multipart/form-data',
            },
          };
      
        axios.post('https://capitalsgrowth.in/Rest/web_deposite_submit_api', formData,config)
            .then((res) => {
            console.log(res.data.msg);
        }).catch((err) => alert("File Upload Error"));    
    }


    render(){
        return (     
            <div>
            <Helmet>
            <title>MCX Trading</title>
            <link rel="stylesheet" href="/site/css/style.css"/>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/> 
            <script src="/site/js/lib/bootstrap.bundle.min.js"></script>
            <script src="/site/js/plugins/splide/splide.min.js"></script>
            
            </Helmet>
            <div className="appHeader no-border">
                <div className="left">
                    <Link to="/dashboard" className="headerButton goBack">
                        <i className="fa fa-arrow-left"></i> 
                    </Link>
                </div>
                <div className="pageTitle">Deposite</div>
                <div className="right"> </div>
            </div>

            <div id="appCapsule">    
                <div className="section pt-1">
                <div className="wallet-card text-center">
                {this.state.qr1!='' &&
                <img style={{border:'2px solid grey'}} className='img img-responsive'
                 src={this.state.qr1} width="200px"/>}
                <hr/>
                {this.state.qr2!='' &&
                <img style={{border:'2px solid grey'}} className='img img-responsive' 
                src={this.state.qr2} width="200px"/>}
                
                <hr/>
                {this.state.upi1!='' &&
                <span className='badge badge-primary'>{this.state.upi1}</span>}&nbsp;{this.state.upi2!='' &&
                <span className='badge badge-primary'>{this.state.upi2}</span>}
                <div className="balance">
                        <input type="number" value={this.state.amt} onChange={(e)=>this.setState({amt:e.target.value})}
                        className="form-control" placeholder='Enter Amount' required />
                        <button type="button" onClick={()=>this.submitForm()} className="btn btn-primary">DEPOSITE</button>
                    
                </div>
                
                <div className="wallet-footer">
                    <div className="balance">
                        <button type="button" onClick={()=>this.update_amt(1000)} className="btn btn-outline-primary">₹1000</button>&nbsp;&nbsp;
                        <button type="button" onClick={()=>this.update_amt(5000)} className="btn btn-outline-primary">₹5000</button>&nbsp;&nbsp;
                        <button type="button" onClick={()=>this.update_amt(10000)} className="btn btn-outline-primary">₹10000</button>

                    </div>
                </div>
            </div>
            <div className="section inset mt-2 mb-2">
            <div className="section-title">Our Bank Details</div>
                    <div className="accordion" id="accordionExample5">
                        {this.state.banks.map(m => (
                            <div className="accordion-item">
                                <h2 className="accordion-header bg-primary">
                                    <button className="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#accordiond1">
                                        {m.bank_name}
                                    </button>
                                </h2>
                                <div id="accordiond1" className="accordion-collapse collapse" data-bs-parent="#accordionExample5">
                                    <div className="accordion-body">
                                      <table>
                                        <tr><th>Bank</th><th>{m.bank_name}</th></tr>
                                        <tr><th>Name</th><th>{m.acc_name}</th></tr>
                                        <tr><th>Ac. No.</th><th>{m.acc_number}</th></tr>
                                        <tr><th>IFSC </th><th>{m.ifsc_code}</th></tr>
                                      </table>
                                    </div>
                                </div>
                            </div>))}
                    </div>
            </div>  
                </div>
                
            </div>
            
            </div>
        )}
}


