import kaartStyle from "./index.pcss";
import {render, defineElement, CustomElement, Host, state, prop, ShadowDOM} from "../../packages/csx";

// Style
document.head.appendChild(render(<style>{kaartStyle}</style>));

// Kaart
@defineElement("pasta-buffet-kaart")
class PastaBuffetKaart extends CustomElement{
    
    @prop() eigenExemplaar;
    
    render(){
        return <div className="kaart">
            <div className="header">
                <img src="assets/logo.svg" alt={"logo"} className="logo"/>
                <div className="header-info">
                    <div className="title">Pastabuffet</div>
                    <div className="sub-title">Zondag 02/02/2020 vanaf 17u</div>
                    <div className="sub-title">O.C De Link, Linkhoutstraat 194</div>
                </div>
            </div>
            <div className="content">
                <h3>Bestelling</h3>
                <table className="order">
                    <tr>
                        <td className="product-name">Volwassenen</td>
                        <td className="product-amount"><input type="text"/></td>
                        <td className="product-multiplier">x</td>
                        <td className="product-price">14,00€ =</td>
                        <td className="product-total"><input type="text"/></td>
                    </tr>
                    <tr>
                        <td className="product-name">Kinderen</td>
                        <td className="product-amount"><input type="text"/></td>
                        <td className="product-multiplier">x</td>
                        <td className="product-price">8,00€ =</td>
                        <td className="product-total"><input type="text"/></td>
                    </tr>
                    <tr>
                        <td colSpan={3}/>
                        <td className="total-label">Totaal =</td>
                        <td className="order-total"><input type="text"/></td>
                    </tr>
                </table>
        
                <table className="account">
                    <tr>
                        <td className="product-name">Naam</td>
                        <td className="product-input"><input type="text"/></td>
                    </tr>
                </table>
        
                <div className="payment-options">
                    <div className="option">
                        Cash betaald
                        <input type="checkbox"/>
                    </div>
                    <div className="option">
                        Overschrijving
                        <input type="checkbox"/>
                        BE50 9731 5197 8018
                    </div>
                </div>
            </div>
            <div className="footer">
                {this.eigenExemplaar ? ([
                    <div className="form-for">Eigen exemplaar</div>,
                    <div className="contact">Contactpersoon: Peter Aerts 0499 26 54 99</div>
                ]) : ([
                    <div className="form-for">Exemplaar voor Groen Lummen</div>
                ])}
            </div>
        </div>
    }
}

// Kaarten
document.body.appendChild(render(<div className="kaarten-print">
    <div className="kaarten-pair">
        <PastaBuffetKaart eigenExemplaar={true}/>
        <PastaBuffetKaart/>
    </div>
    <div className="kaarten-pair">
        <PastaBuffetKaart eigenExemplaar={true}/>
        <PastaBuffetKaart/>
    </div>
</div>));