import React from "react";
import Head from 'next/head';
import Image from 'next/image';

import Header from './components/Header';
import Footer from './components/Footer';

export default function TransactionPage() 
{
	return (
		<React.Fragment>
			<Head>
				<title>ЛК Эволюция автолизинга</title>
				<meta
					name="description"
					content="ЛК Эволюция автолизинга"
				/>
			</Head>
			<Header/>
			<main>
			<section>
      <div className="clear"></div>
      <div className="container">
        <div className="title_wrapper">
          <div className="left">
            <h1 className="section_title">Договор №1234/2021 от 10.01.2021</h1>
          </div>
          <div className="right">
           <p align="right">
            <b>ООО “Друзья и КО”</b><br />
            ИНН: 12345678765 КПП: 13432-02
           </p>
          </div>
        </div>
        

        <div className="aside_container about">
          <aside>
            <ul className="aside_nav">
              <li>
                <a href="#">График платежей</a>
              </li>
              <li>
                <a href="#">Дополнительные услуги</a>
              </li>
              <li>
                <a href="#">Договор</a>
              </li>
              <li>
                <a href="#" className="active">Документы по сделке</a>
              </li>
            </ul>
          </aside>
          <article>
            <div className="dropdown_blocks_list">
              <div className="dropdown_block">
                <div className="block_header">
                  <p>
                    УПД по очередным платежам
                  </p>
                  <button className="block_toggle"></button>
                </div>

                <div className="block_body">
                  <div className="transaction_detail">
                    <p>№ постановления: <b>3432434242334</b></p>
                    <ul>
                      <li>Сумма: <b>3 000,00 р.</b></li>
                      <li>Дата:  <b>01/01/2020</b></li>
                      <li>Статус: <b className="success">Оплачен</b></li>
                      <li>Штраф: п. 1.15 - Несоблюдение правил парковки </li>
                    </ul>
                </div>
                </div>
              </div>

              
              <div className="dosc_list medium-icon">
                <div className="row">
                  <p className="doc_name i-pdf i-medium"> 
                    Дополнительное  соглашение №1
                  </p>
                  <a href="#" className="button button-blue">Скачать</a>
                </div>
  
                <div className="row">
                  <p className="doc_name i-pdf i-medium">
                    Дополнительное  соглашение №2
                  </p>
                  <a href="#" className="button button-blue">Скачать</a>
                </div>
  
                <div className="row">
                  <p className="doc_name i-pdf i-medium">
                    Выкупные документы
                  </p>
                  <a href="#" className="button button-blue">Скачать</a>
                </div>
              </div>

              <hr />

              <div className="dropdown_block">
                <div className="block_header">
                  <p>
                    УПД по доп.услугам
                  </p>
                  <button className="block_toggle"></button>
                </div>

                <div className="block_body"></div>
              </div>

              </div>
          </article>
        </div>
      </div>
    </section>
	
				<section id="order">
					<div className="container wide">
						<h2 className="section_title">Купить в лизинг?</h2>
						<div className="order_form">
							<div className="order_email">
								<p>Напишите на <a href="mailto:">buy@domain.ru</a> или заполните форму</p>
							</div>
							<form>
								<div className="form_field">
								<input type="text" value="" placeholder="Имя" />
								</div>
								<div className="form_field">
								<input type="tel" value="" placeholder="Телефон" />
								</div>
								<div className="form_field">
								<input type="email" value="" placeholder="E-mail" />
								</div>
								<div className="form_field">
								<input type="text" value="" placeholder="Организация" />
								</div>
								<div className="policy">
								<input type="checkbox" name="policy" id="policy" hidden checked />
								<label for="policy">Даю свое согласие на обработку моих персональных данных</label>
								</div>
								<button className="button">Отправить</button>
							</form>
						</div>
					</div>
				</section>
			</main>
			<Footer authenticated={ true }/>
		</React.Fragment>
	)
}
