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

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

      componentDidMount(){
        axios.get('https://capitalsgrowth.in/Rest/banks_api').then(res => {
            this.setState({banks:res.data});
        });
        axios.get('https://capitalsgrowth.in/Rest/deposite_api').then(res => {
            this.setState({deps:res.data});
        });
      }

    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 className="section">
            <div className="section wallet-card-section pt-1">
            <div className="wallet-card">
                <div className="balance">
                    <div className="left">
                        <span className="title">Deposite Amount</span>
                        <input type="number" className="form-control" required />
                        <button type="button" className="btn btn-primary">DEPOSITE</button>
                    </div>
                </div>
                
                <div className="wallet-footer">
                    <div className="balance">
                        <button type="button" className="btn btn-outline-primary">1000</button>
                        <button type="button" className="btn btn-outline-primary">5000</button>
                        <button type="button" className="btn btn-outline-primary">10000</button>

                    </div>
                </div>
            </div>
        </div>
        <div class="section inset mt-2 mb-2">
            <div class="section-title">Our Bank Details</div>
                    <div class="accordion" id="accordionExample5">
                        {this.state.banks.map(m => (
                            <div class="accordion-item">
                                <h2 class="accordion-header bg-primary">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#accordiond1">
                                        {m.bank_name}
                                    </button>
                                </h2>
                                <div id="accordiond1" class="accordion-collapse collapse" data-bs-parent="#accordionExample5">
                                    <div class="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>
        );
    }
}


