{"size": 11295, "ext": "js", "max_stars_repo_path": "resources/js/components/OrderForm.js", "max_stars_repo_name": "newtronahmed/myinventory", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "resources/js/components/OrderForm.js", "max_issues_repo_name": "newtronahmed/myinventory", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "resources/js/components/OrderForm.js", "max_forks_repo_name": "newtronahmed/myinventory", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 33.9189189189, "max_line_length": 252, "alphanum_fraction": 0.5326250553}
import React,{useState,useEffect} from 'react';
import ReactDOM from 'react-dom';
import useError from './useError'

function OrderForm() {
    // const [formData,setFormData] = useState({

    // })
   const [formInput,setFormInput] = useState({ 
    customerName:'',
    products: [ {id:1,item:'',price:0,total:0,quantity:0,totalQuantity:0} ],
    subtotal:0,
    paid:0,
    netTotal:0,
    discount:0,
    due:0,
    address:'',
    phone:'',
    payment_method:'',
    // full_payment:false,
   })
   const [setErrors,renderErrorFor] = useError([])
   // const [errors,setErrors] = useState([])
   const [loading,setLoading] = useState(false)

  const [productSelection,setProductSelection] = useState([])
   useEffect(()=>{
     getProductsList()
   },[])
   
   const getProductsList=()=>{
     setLoading(true)
      axios.get('/products')
      .then(response=>{
      setProductSelection([...response.data])
      setLoading(false)
     
      })
      .catch(err=>{
        setErrors([...errors,err.message])
      })
   }


   useEffect(()=>{
      let subtotal = formInput.products.map(each=>{
          return each.total
         }).reduce((acc,ind)=>{
          return acc+ind
         },0)
         let netTotal = subtotal;
       let paid = formInput.paid
        if(discount){


          let discount = parseInt(formInput.discount)
         let perCentDiscount = discount / 100
          netTotal = subtotal - (subtotal*perCentDiscount)
          netTotal = parseFloat(netTotal)
        
         }

        let due = parseFloat(netTotal-paid)
      // let full_payment= due ===0 ? true : false;
      setFormInput({...formInput,subtotal,netTotal,discount,due})
         
   },[formInput.products,formInput.discount,formInput.paid])

  //  const handleTableChange = (e) =>{
        
  //   const {name,value} = e.target
  //       setFormInput({...formInput,[name]:value})   

  //  }
   const handleTableChange =  (e, id=null) =>{

    // e.preventDefault()
    // console.log(e.target.type)
 
    let {name,value} = e.target;
    // console.log(value)
    // parse to numbers before
    if(e.target.type==='number'){
      value = parseInt(value)
    }
    // if id is not null
    if(!id){
      const {name,value} = e.target
     setFormInput({...formInput,[name]:value}) 
    } else {
      // if id is null
      formInput.products.map( async (product,i)=>{
        // console.log(product.id , id)
        // const index = formInput.products.findIndex(each=>each.id===id)
        // if(index !== -1){
        //   let product = products[i]
        //   product.name = value
        // }
        if(product.id === id){
      
       let products = [...formInput.products]
       let product = {...products[i]}
       product[name]= value
       // setFormInput({...formInput,products: products})
           if(e.target.type==='select-one' && value !=='choose'){
            // console.log(products[i].item)
            // console.log('ama live')
            
            const response = await axios.get('/products/'+value) 
           
            product['price']= response.data.price
            product['totalQuantity']= parseInt(response.data.quantity) 
           }
           product['total'] = (product['price']* product['quantity'])
           products[i] = product
          setFormInput({...formInput,products})
      // setFormInput({...formInput,products: [products[i][name]:value ,...products] })  
        }
   
      })
    }
     

   
handleTableChange
    
   }

    const submitHandler = async(e)=>{
        e.preventDefault()
        // console.log(formInput)
        
        try{
          const res = await axios.post('/neworder',formInput)
            if(res.status===200) {
             let hashId = res.data.message
            //  console.log(res.data)
             window.location.href= `/download-pdf/${hashId}`
           }
          
        }
        catch(err){
          // setErrors([...errors,err])
          setErrors(err.response.data.errors)
        }
       

      
    }
    const add = ()=>{
      // add new empty product to products arrray 
      let newId = formInput.products.length + 1;
     setFormInput({...formInput,products: [...formInput.products,{id:newId,item:'',price:0,total:0,quantity:0,totalQuantity:0}]})
    }
    const remove =(e)=>{
        // e.preventDefault()
       // remove last product object from array
       if(formInput.products.length === 1 ) return;
        let products = [...formInput.products]
         products.pop()
        setFormInput({...formInput,products})
    }
    
   
    // const {orderDate,discount,customerName,item,totalQuantity,Quantity,price ,paid,netTotal,gst,subtotal} = formInput
    let {orderDate,discount,customerName,paid,netTotal,subtotal,due,address,phone} = formInput
 
     let details = 
    [
        {
            title:'Subtotal',
            name:'subtotal',
            value:subtotal,
        },
        // {
        //     title:'GST%',
        //     name:'gst'
        // },
        {
            title:'Discount',
            name:'discount',
            value:discount,
        },
        {
            title:'NetTotal',
            name:'netTotal',
            value:netTotal
        },
        {
            title:'Paid',
            name:'paid',
            value:paid,
        },
        {
            title:'Due',
            name:'due',
            value:due
        },
   
    ]
    
    // const {item,price,quantity,totalQuantity,id} = formInput.product
    // let total = price * Quantity

    // for (i=0,i<table.row.lenght)
    return (
      <>

    <form onSubmit={submitHandler} method='POST' >
      <div className="card w-100">
        <div className="card-header">
          Order Form
        </div>
      <div className='p-3'>
            <div className="form-group row">
              <label htmlFor="inputEmail3"  className="col-sm-2 col-form-label">Customer Name</label>
              <div className="col-sm-8">
                <input type="text" name='customerName' onChange={handleTableChange} value={customerName} className="form-control" id="inputEmail3" />
              {renderErrorFor('customerName')}
              </div>
            </div>
            <div className="form-group row">
              <label htmlFor="inputEmail3"  className="col-sm-2 col-form-label">Address</label>
              <div className="col-sm-8">
                <input type="text" name='address' onChange={handleTableChange} value={address} className="form-control" id="inputEmail3" />
                {renderErrorFor('address')}
              </div>
            </div>
            <div className="form-group row">
              <label htmlFor="inputEmail3"  className="col-sm-2 col-form-label">Phone Number</label>
              <div className="col-sm-8">
                <input type="text" name='phone' onChange={handleTableChange} value={phone} className="form-control" id="inputEmail3" />
                {renderErrorFor('phone')}
              </div>
            </div>
      <div class='table-responsive-md'>
      <table className="table" id='table'>
        <thead>
          <tr>
            <th scope="col">item </th>
            <th scope="col">Total Quantity</th>
            <th scope="col">Quantity</th>
            <th scope="col">Price</th>
            <th scope="col">Total</th>
          </tr>
        </thead>
        <tbody >
              {formInput.products.map((product,i)=>{
                const {item,price,quantity,totalQuantity,id,total} = product
               // total = price * quantity

               return (
            <tr key={i} >
            <td >
              <div className="form-group">
                 
                  { loading ? <div className="spinner-border text-info" role="status"><span className="sr-only">Loading...</span></div>: (<select className="form-control form-control-sm" value={item} name='item' onChange={(e)=>handleTableChange(e,id)} 
                  id="exampleFormControlSelect1">

                    {  productSelection.map(each=>{
                      return <option key={each.id}   value={each.id}>{each.name}</option>
                    })}
               </select>)}
        </div>
            </td>
            <td>
                  <input type="number" name='totalQuantity' readOnly onChange={(e)=>handleTableChange(e,id)} value={totalQuantity} 
                  className="form-control form-control-sm" id="inputEmail3" />
            </td> 
            <td>
                  <input type="number" name='quantity' max={totalQuantity}  onChange={(e)=>handleTableChange(e,id)} value={quantity} 
                  className="form-control form-control-sm" id="inputEmail3" />
            </td>
            <td className=''>
               <input type="number" readOnly  name='price'  onChange={(e)=>handleTableChange(e,id)} value={price}
                className="form-control form-control-sm" id="inputEmail3" />
            </td>
            <td>
               <input type="number" readOnly name='total' onChange={(e)=>handleTableChange(e,id)}
                value={total} className="form-control form-control-sm" id="inputEmail3" />
            </td>
          </tr>)

                })}

          
        </tbody>
      </table>
      </div>

      <p className='mx-auto  my-2'><button type='button' className='mx-2 btn btn-primary text-center' onClick={add}>Add</button>
      <button onClick={remove} type='button' className='w-30 btn btn-primary mx-2 text-center'>Remove</button></p>
          {
              details.map((detail,ind)=>{
                  return (
                      <div className="form-group row" key={ind}>
                      <label htmlFor="inputEmail3" className="col-sm-2 col-form-label">{detail.title}</label>
                      <div className="col-sm-8">
                        <input type="text" className="form-control" name={detail.name} onChange={handleTableChange} id="inputEmail3" value={detail.value} />
                        {renderErrorFor(detail.name)}
                      </div>
                    
                  </div>
                      )
              })
          }
          <div className="form-group row">
              <label htmlFor="inputEmail3"  className="col-sm-2 col-form-label">Payment Method</label>
              <div className="col-sm-8">
                 <label className="radio-inline mx-2"><input type="radio"  name="payment_method" onChange={handleTableChange}  value='cheque' />Cheque</label>
                <label className="radio-inline mx-2"><input type="radio"  name="payment_method" onChange={handleTableChange}  value='cash' />Cash</label>
               <label className="radio-inline mx-2"><input type="radio" name="payment_method" onChange={handleTableChange}  value='credit_card' />Credit Card</label>
              </div>
              {renderErrorFor('payment_method')}
            </div>
      </div>
      <div className='card-footer d-flex justify-content-center'>
        <button type='submit' className='btn btn-success'>submit</button>
      </div>
      </div>
      
</form> 
</>
        
    );
}

export default OrderForm;

if (document.getElementById('order-form')) {
    ReactDOM.render(<OrderForm />, document.getElementById('order-form'));
}
