var React = require('react'),
    CartStore = require('../../stores/cartStore'),
    AddToCart = require('../cart/addToCart'),
    CartActions = require('../../actions/cartActions'),
    NavigationActions = require('../../actions/navigationActions'),
    SingleItem = require('../items/singleItem'),
    Globals = require('../../globals'),
    CartTotal = require('./cartTotal');
    

var Router = require('react-router');


var CheckoutPage = React.createClass({

    render: function() {
 
      return (
     
        <div className="checkout-page center">
         <form className="form-horizontal">
<fieldset>


<legend>Dostava</legend>


<div className="form-group">
  <label className="col-md-4 control-label" htmlFor="name">Prezime i Ime</label>  
  <div className="col-md-4">
  <input id="name" name="name" type="text" placeholder="Prezime Ime" className="form-control input-md" required="" />
  <span className="help-block">ime osobe koja prima pošiljku</span>  
  </div>
</div>


<div className="form-group">
  <label className="col-md-4 control-label" htmlFor="address">Adresa</label>  
  <div className="col-md-4">
  <input id="address" name="address" type="text" placeholder="Ulica i broj" className="form-control input-md" required="" />
  <span className="help-block">adresa na koju će roba biti isporučena</span>  
  </div>
</div>


<div className="form-group">
  <label className="col-md-4 control-label" htmlFor="place">Mjesto</label>
  <div className="col-md-4">
    <select id="place" name="place" className="form-control">
      <option value="1">Sarajevo</option>
      <option value="2">Zenica</option>
      <option value="3">Tuzla</option>
      <option value="4">Mostar</option>
      <option value="5">Banja Luka</option>
      <option value="6">Bihać</option>
    </select>
  </div>
</div>


<div className="form-group">
  <label className="col-md-4 control-label" htmlFor="phone">Telefon</label>
  <div className="col-md-4">
    <div className="input-group">
      <span className="input-group-addon">06</span>
      <input id="phone" name="phone" className="form-control" placeholder="1 222 333" type="text" required="" />
    </div>
    <p className="help-block">broj mobitela - mora biti sa jedne od mreža u BiH</p>
  </div> 
</div>


<div className="form-group">
  <label className="col-md-4 control-label" htmlFor="email">E - mail</label>  
  <div className="col-md-4">
  <input id="email" name="email" type="text" placeholder="ime@nekimail.com" className="form-control input-md" required="" />
  <span className="help-block">E - mail adresa na koju će vam biti poslano obavještenje o narudžbi</span>  
  </div>
</div> 


<div className="form-group">
  <label className="col-md-4 control-label" htmlFor="note">Napomena</label>
  <div className="col-md-4">                     
    <textarea className="form-control" id="note" name="note"></textarea>
  </div> 
</div>

<div className="form-group">
  <label className="col-md-4 control-label" htmlFor="order"></label>
  <div className="col-md-8">
    <CartTotal items={this.state.items} itemCounts={this.state.itemCounts} />  <button id="order" name="order" className="btn btn-success">Naruči</button>
  </div>
</div>

</fieldset>
</form>


        </div>
        );       

    },

    // Add change listeners to stores
    componentDidMount: function() {
      CartStore.addChangeListener(this._onChange);
      CartActions.load();
    },

    componentWillUnmount: function () {
      CartStore.removeChangeListener(this._onChange);
    },

    _onChange: function () {
         if (this.isMounted()) {
             this.setState(CartStore.getWholeCartState());
        }

    },
    _onOrderClick: function () {
      //NavigationActions.goToCheckout();
    },

    getInitialState: function () {
      return CartStore.getWholeCartState();
    }

});


module.exports = CheckoutPage;