text: import React from "react";
  import axios from "axios";
  import { css } from '@emotion/css'
  
  class Reservation extends React.Component {
    constructor(props){
      super(props);
      this.state= this.initialState;
      //this.handleChange = this.handleChange.bind(this);
      //this.loginChange = this.loginChange.bind(this);
      //this.submitlogin = this.submitlogin.bind(this); 
      
  }
  fermer(){
    document.getElementById("reserv").style.display="none";
    document.getElementsByClassName("wrapper")[0].style.opacity="1";
      document.getElementsByClassName("wrapper")[0].style.zIndex="1";
  }
  initialState ={
    //Le nombre de résultat de la recherche
      reservation: this.props.reservation
  };
      render(){
                      return (
                          <div style={{backgroundColor: "rgba(240,240,240)",boxShadow: "0 0 40px black"}} className={css`
                          @font-face {
                              font-family: SourceSansPro;
                              src: url(SourceSansPro-Regular.ttf);
                            }
                            
                            .clearfix:after {
                              content: "";
                              display: table;
                              clear: both;
                            }
                            
                            a {
                              color: #0087C3;
                              text-decoration: none;
                            }
                            
                            body {
                              position: relative;
                              width: 21cm;
                              height: 29.7cm;
                              margin: 0 auto;
                              color: #555555;
                              background: #FFFFFF;
                              font-family: Arial, sans-serif;
                              font-size: 14px;
                              font-family: SourceSansPro;
                            }
                            
                            header {
                              padding: 10px 0;
                              margin-bottom: 20px;
                              border-bottom: 1px solid #AAAAAA;
                            }
                            
                            #logo {
                              float: left;
                              margin-top: 8px;
                            }
                            
                            #logo img {
                              height: 70px;
                            }
                            
                            #company {
                              float: right;
                              text-align: right;
                            }
                            
                            
                            #details {
                              margin-bottom: 50px;
                            }
                            
                            #client {
                              padding-left: 6px;
                              border-left: 6px solid #0087C3;
                              float: left;
                            }
                            
                            #client .to {
                              color: #777777;
                            }
                            
                            h2.name {
                              font-size: 1.4em;
                              font-weight: normal;
                              margin: 0;
                              padding-right: 100%;
                            }
                            
                            #invoice {
                              float: right;
                              text-align: right;
                            }
                            
                            #invoice h1 {
                              color: #0087C3;
                              font-size: 2.4em;
                              line-height: 1em;
                              font-weight: normal;
                              margin: 0  0 10px 0;
                            }
                            
                            #invoice .date {
                              font-size: 1.1em;
                              color: #777777;
                            }
                            
                            table {
                              width: 100%;
                              border-collapse: collapse;
                              border-spacing: 0;
                              margin-bottom: 20px;
                            }
                            
                            table th,
                            table td {
                              padding: 20px;
                              background: #EEEEEE;
                              text-align: center;
                              border-bottom: 1px solid #FFFFFF;
                            }
                            
                            table th {
                              white-space: nowrap;
                              font-weight: normal;
                            }
                            
                            table td {
                              text-align: right;
                            }
                            
                            table td h3{
                              color: #28609B;
                              font-size: 1.2em;
                              font-weight: normal;
                              margin: 0 0 0.2em 0;
                            }
                            
                            table .no {
                              color: #FFFFFF;
                              font-size: 1.6em;
                              background: #F05921;
                            }
                            
                            table .desc {
                              text-align: left;
                            }
                            
                            table .unit {
                              background: #DDDDDD;
                            }
                            
                            table .qty {
                            }
                            
                            table .total {
                              background: #F05921;
                              color: #FFFFFF;
                            }
                            
                            table td.unit,
                            table td.qty,
                            table td.total {
                              font-size: 1.2em;
                            }
                            
                            table tbody tr:last-child td {
                              border: none;
                            }
                            
                            table tfoot td {
                              padding: 10px 20px;
                              background: #FFFFFF;
                              border-bottom: none;
                              font-size: 1.2em;
                              white-space: nowrap;
                              border-top: 1px solid #AAAAAA;
                            }
                            
                            table tfoot tr:first-child td {
                              border-top: none;
                            }
                            
                            table tfoot tr:last-child td {
                              color: #57B223;
                              font-size: 1.4em;
                              border-top: 1px solid #57B223;
                            
                            }
                            
                            table tfoot tr td:first-child {
                              border: none;
                            }
                            
                            #thanks{
                              font-size: 2em;
                              margin-bottom: 50px;
                            }
                            
                            #notices{
                              padding-left: 6px;
                              border-left: 6px solid #0087C3;
                            }
                            
                            #notices .notice {
                              font-size: 1.2em;
                            }
                            
                            footer {
                              color: #777777;
                              width: 100%;
                              height: 30px;
                              margin-top:80%; 
                              bottom: 0;
                              border-top: 1px solid #AAAAAA;
                              padding: 8px 0;
                              text-align: center;
                            }
                            
                        `}>
                          <header className={"clearfix"}>
                          <div id="logo">
                            <img style={{marginLeft: "30%"}} src={require("assets/img/logo.png").default}></img>
                          </div>
                          
                          <i style={{marginTop: "1%",marginBottom: "2%",marginLeft: '86%', color: 'red',fontSize: "20px"}} onClick={this.fermer} className="tim-icons icon-simple-remove" />
                          
                    
                          <div id="company">
                            <h2 className={"name"}>Imputations: </h2>
                            <div id="num_ordre">N° d'ordre: </div>
                            <div id="type_intervention"></div>
                            <div  id="centre_cout">Centre de coût:</div>
                          </div>
                    
                        </header>
  
                        <main>
                          <div id="details" className={"clearfix"}>
                            <div id="client">
                              <div className={"to"}>BON DE RÉSERVATION</div>
                              <h1 className={"name"} style={{color: "gray"}} id="num_bon">000144511</h1>
                    
                            </div>
                            <div id="invoice">
                              <h1 id="entreprise">DÉPANNAGE</h1>
                              <div className={"date"} id="date_res">Date de réservation: </div>
                              <div className={"date"} id="date_bes">Date du besoin: </div>
                            </div>
                          </div>
                          <table border={"0"} cellSpacing={"0"} cellPadding={"0"}>
                            <thead>
                              <tr>
                                <th className={"no"}>#</th>
                                <th className={"desc"}>N° ARTICLE<br/>LIBELLÉ</th>
                                <th className={"unit"}>QUANTITÉ<br/>UNITÉ</th>
                                <th className={"qty"}>DIVISION<br/>MAGASIN<br/>EMPLACEMENT</th>
                                <th className={"total"}>LOT</th>
                              </tr>
                            </thead>
                            <tbody style={{height: "3%"}} id="articles">
                              <tr>
                                <td className={"no"} id="num_ligne">01</td>
                                <td className={"desc"} id="num_art_lib"><h3>Website Design</h3>Creating a recognizable design solution based on the company's existing visual identity</td>
                                <td className={"unit"} id="quantite">$40.00</td>
                                <td className={"qty"} id="div_mag_emp">30</td>
                                <td className={"total"}  id="lot">$1,200.00</td>
                              </tr>
                              <tr>
                                <td className={"no"} id="num_ligne">01</td>
                                <td className={"desc"} id="num_art_lib"><h3>Website Design</h3>Creating a recognizable design solution based on the company's existing visual identity</td>
                                <td className={"unit"} id="quantite">$40.00</td>
                                <td className={"qty"} id="div_mag_emp">30</td>
                                <td className={"total"}  id="lot">$1,200.00</td>
                              </tr>
                            </tbody>
                          </table>
                        </main>
                        </div>
                      );
      }
  }
  
  export default Reservation;