
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 AdminOrders extends Component{
    constructor(props){
        super(props);
         this.state={
            assetsLoaded:false,orders:[],page:1
         }
      }

      componentDidMount(){
        axios.get('https://drkushwahindore.com/admin/Rest/orders_api').then(res => {
            console.log(res.data);
            this.setState({orders:res.data});
        });
      }
      

      loadmore(){
          this.setState({page:this.state.page+1});
          this.componentDidMount();
      }

    deleteAss(id){
        confirmAlert({
            title: 'Confirm Delete',
            message: 'Are you sure to do delete?.',
            buttons: [
              {
                label: 'Yes',
                onClick: () => {
                    axios.post("https://drkushwahindore.com/admin/Rest/delete_record", {
                        tbl: "orders",
                        col: "oid",
                        val: id
                    })
                    .then(response => {
                        console.log(response);
                    })
                }
              },
              {
                label: 'No',
              }
            ]
          });        
    }

    render(){
        return (     
            <div className="container-fluid">
                <div className='row'>        
                    <div className='col-md-12'>
                    <div className='widget-area-2 proclinic-box-shadow'>
                        <h3 className="widget-title">Listed Orders</h3>
                                    <table className='table table-bordered table-striped table-condensed'>
                                        <thead><tr><th>OrderId</th><th>OrderDate</th><th>Name</th><th>Amount</th>
                                            <th>Total Items</th><th>Address</th><th>Action</th></tr></thead>
                                        <tbody>
                                        {this.state.orders.map(p=>
                                        <tr  key={p.oid}>
                                        <td>{p.oid}</td>
                                        <td>{p.odate}</td>
                                        <td>{p.name}</td>
                                        <td>{p.ototal}</td>
                                        <td>{p.total_items}</td>
                                        <td>{p.street} {p.landmark} {p.city} {p.state} {p.zip}</td>
                                        <td>
                                        <button className='btn btn-danger btn-sm' 
                                        onClick={()=>this.deleteAss(p.oid)}>Delete</button></td></tr>)}
                                        </tbody>
                                    </table>
                            </div>
                        </div>
                </div>
            </div> 
        );
    }
}


