import SingleDatePicker from "../common/datepicker/SingleDatePicker";

import FileDownOptionPop from "./estimatepop/FileDownOptionPop";
import ProductFeaturesPop from "./estimatepop/ProductFeaturesPop";

import ReactSelect from "../common/reactselect/ReactSelect";
import { useState } from "react";
import EstimateCopyPop from "./estimatepop/EstimateCopyPop";

export default function CanvasEstimate() {
    const [hidden, setHidden] = useState(false);
    return(
        <div className="sub-content estimate">
            <div className="sub-content-inner">
                <div className="sub-content-box">
                    <div className="sub-table-box">
                        <div className="estimate-list-wrap one">
                            <div className="estimate-box">
                                <div className="estimate-tit">品番</div>
                                <div className="estimate-name">RX524231020006 (Plan No: 1)</div>
                            </div>
                            <div className="estimate-box">
                                <div className="estimate-tit">見積書番号</div>
                                <div className="estimate-name">5242310200065242</div>
                            </div>
                            <div className="estimate-box">
                                <div className="estimate-tit">登録日</div>
                                <div className="estimate-name">2024.09.28</div>
                            </div>
                            <div className="estimate-box">
                                <div className="estimate-tit">変更日時</div>
                                <div className="estimate-name">2024.09.28 06:36</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="sub-content-box">
                    <div className="sub-table-box">
                        <div className="table-box-title-wrap">
                            <div className="title-wrap">
                                <h3>基本情報</h3>
                            </div>
                        </div>
                        <div className="common-table bt-able">
                            <table>
                                <colgroup>
                                    <col style={{width : '160px'}}/>
                                    <col />
                                    <col style={{width : '160px'}}/>
                                    <col />
                                </colgroup>
                                <tbody>
                                    <tr>
                                        <th>一次販売店名</th>
                                        <td>
                                            鈴与商事株式会社
                                        </td>
                                        <th>見積日 <span className="important">*</span></th>
                                        <td>
                                            <div className="date-picker" style={{width: '350px'}}>
                                                <SingleDatePicker/>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>二次販売店名</th>
                                        <td>
                                            2次店販売店名表示
                                        </td>
                                        <th>担当者 <span className="important">*</span></th>
                                        <td>
                                            <div className="input-wrap" style={{width: '350px'}}>
                                                <input type="text" className="input-light" defaultValue={'商品情報で入力した担当者名を表示'}/>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>案件名 <span className="important">*</span></th>
                                        <td colSpan={3}>
                                            <div className="form-flex-wrap">
                                                <div className="input-wrap mr5" style={{width: '610px'}}>
                                                    <input type="text" className="input-light" defaultValue={'三油商会PITステーション名東一社'}/>
                                                </div>
                                                <div className="input-wrap" style={{width: '200px'}}>
                                                    <input type="text" className="input-light" defaultValue={'案件'}/>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>メモ</th>
                                        <td colSpan={3}>
                                            商品情報から入力したメモを表示
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>注文分類  <span className="important">*</span></th>
                                        <td colSpan={3}>
                                            <div className="radio-wrap">
                                                <div className="d-check-radio light mr10">
                                                    <input type="radio" name="radio01" id="ra01" />
                                                    <label htmlFor="ra01">住宅PKG</label>
                                                </div>
                                                <div className="d-check-radio light">
                                                    <input type="radio" name="radio01" id="ra02" />
                                                    <label htmlFor="ra02">積上げ( YJOD )</label>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>屋根材・仕様施工 </th>
                                        <td colSpan={3}>
                                            <div className="form-flex-wrap mb5">
                                                <div className="input-wrap mr5" style={{width: '610px'}}>
                                                    <input type="text" className="input-light" defaultValue={'ハゼ式折板（角ハゼ)'} readOnly/>
                                                </div>
                                                <div className="input-wrap" style={{width: '200px'}}>
                                                    <input type="text" className="input-light" defaultValue={'標準施工'} readOnly/>
                                                </div>
                                            </div>
                                            <div className="form-flex-wrap mb5">
                                                <div className="input-wrap mr5" style={{width: '610px'}}>
                                                    <input type="text" className="input-light" defaultValue={'ハゼ式折板（角ハゼ)'} readOnly/>
                                                </div>
                                                <div className="input-wrap" style={{width: '200px'}}>
                                                    <input type="text" className="input-light" defaultValue={'標準施工'} readOnly/>
                                                </div>
                                            </div>
                                            <div className="form-flex-wrap mb5">
                                                <div className="input-wrap mr5" style={{width: '610px'}}>
                                                    <input type="text" className="input-light" defaultValue={'ハゼ式折板（角ハゼ)'} readOnly/>
                                                </div>
                                                <div className="input-wrap" style={{width: '200px'}}>
                                                    <input type="text" className="input-light" defaultValue={'標準施工'} readOnly/>
                                                </div>
                                            </div>
                                            <div className="form-flex-wrap">
                                                <div className="input-wrap mr5" style={{width: '610px'}}>
                                                    <input type="text" className="input-light" defaultValue={'ハゼ式折板（角ハゼ)'} readOnly/>
                                                </div>
                                                <div className="input-wrap" style={{width: '200px'}}>
                                                    <input type="text" className="input-light" defaultValue={'標準施工'} readOnly/>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>備考</th>
                                        <td colSpan={3}>
                                            <div className="input-wrap">
                                                <input type="text" className="input-light" />
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div className="table-box-title-wrap">
                            <div className="title-wrap">
                                <h3>ファイル添付</h3>
                                <div className="d-check-box light mr5">
                                    <input type="checkbox" id="ch99" />
                                    <label htmlFor="ch99" style={{color: '#101010'}}>後日資料提出</label>
                                </div>
                            </div>
                        </div>
                        <div className="common-table mb10">
                            <table>
                                <colgroup>
                                    <col style={{width: '160px'}}/>
                                    <col />
                                </colgroup>
                                <tbody>
                                    <tr>
                                        <th>ファイル添付</th>
                                        <td>
                                            <div className="drag-file-box">
                                                <div className="btn-area">
                                                    <label className="file-upload" htmlFor="img">ファイル選択</label>
                                                    <input type="file" name="" id="img" style={{display: 'none'}}/>
                                                </div>
                                                <div className="drag-file-area">
                                                    <p>Drag file here</p>
                                                    <ul className="file-list">
                                                        <li className="file-item"><span>選択したファイル名 <button className="delete"></button></span></li>
                                                        <li className="file-item"><span>選択したファイル名 <button className="delete"></button></span></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div className="common-table bt-able">
                            <table>
                                <colgroup>
                                    <col style={{width: '160px'}}/>
                                    <col />
                                </colgroup>
                                <tbody>
                                    <tr>
                                        <th>添付ファイル一覧</th>
                                        <td>
                                            <div className="drag-file-box">
                                                <ul className="file-list">
                                                    <li className="file-item"><span>保存した添付ファイル名 <button className="delete"></button></span></li>
                                                    <li className="file-item"><span>保存した添付ファイル名 <button className="delete"></button></span></li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div className="table-box-title-wrap">
                            <div className="title-wrap">
                                <h3 className="product">見積もりの具体的な</h3>
                                <div className="product_tit">製品情報</div>
                            </div>
                            <div className="left-unit-box">
                                <button className={`estimate-arr-btn down mr5 ${hidden ? '' : 'on'}`} onClick={() => setHidden(false)}></button>
                                <button className={`estimate-arr-btn up ${hidden ? 'on' : ''}`} onClick={() => setHidden(true)}></button>
                            </div>
                        </div>
                        <div className={`estimate-check-wrap ${hidden ? 'hide':''}`}>
                            <div className="estimate-check-inner">
                                <div className="special-note-check-wrap">
                                    <div className="special-note-check-item">
                                        <div className="d-check-box light">
                                            <input type="checkbox" id="ch01" />
                                            <label htmlFor="ch01">共通 </label>
                                        </div>
                                    </div>
                                    <div className="special-note-check-item">
                                        <div className="d-check-box light">
                                            <input type="checkbox" id="ch02" />
                                            <label htmlFor="ch02">積上げ(YJOD) </label>
                                        </div>
                                    </div>
                                    <div className="special-note-check-item">
                                        <div className="d-check-box light">
                                            <input type="checkbox" id="ch03" disabled checked/>
                                            <label htmlFor="ch03">出力制御の時 (中三電以外)</label>
                                        </div>
                                    </div>
                                    <div className="special-note-check-item">
                                        <div className="d-check-box light">
                                            <input type="checkbox" id="ch04" />
                                            <label htmlFor="ch04">北面設置 </label>
                                        </div>
                                    </div>
                                    <div className="special-note-check-item">
                                        <div className="d-check-box light">
                                            <input type="checkbox" id="ch05" />
                                            <label htmlFor="ch05">塩害地域 </label>
                                        </div>
                                    </div>
                                    <div className="special-note-check-item">
                                        <div className="d-check-box light">
                                            <input type="checkbox" id="ch06" />
                                            <label htmlFor="ch06">積雪地域 </label>
                                        </div>
                                    </div>
                                    <div className="special-note-check-item">
                                        <div className="d-check-box light">
                                            <input type="checkbox" id="ch07" />
                                            <label htmlFor="ch07">屋根材・寸法・レイアウト </label>
                                        </div>
                                    </div>
                                    <div className="special-note-check-item">
                                        <div className="d-check-box light">
                                            <input type="checkbox" id="ch08" />
                                            <label htmlFor="ch08">施工関連 </label>
                                        </div>
                                    </div>
                                    <div className="special-note-check-item act">
                                        <div className="d-check-box light">
                                            <input type="checkbox" id="ch09" />
                                            <label htmlFor="ch09">別途費用</label>
                                        </div>
                                    </div>
                                    <div className="special-note-check-item">
                                        <div className="d-check-box light">
                                            <input type="checkbox" id="ch10" />
                                            <label htmlFor="ch10">過積載</label>
                                        </div>
                                    </div>
                                    <div className="special-note-check-item">
                                        <div className="d-check-box light">
                                            <input type="checkbox" id="ch11" />
                                            <label htmlFor="ch11">パワコン・蓄電池   PCS  </label>
                                        </div>
                                    </div>
                                    <div className="special-note-check-item">
                                        <div className="d-check-box light">
                                            <input type="checkbox" id="ch12" />
                                            <label htmlFor="ch12">架台</label>
                                        </div>
                                    </div>
                                    <div className="special-note-check-item">
                                        <div className="d-check-box light">
                                            <input type="checkbox" id="ch13" />
                                            <label htmlFor="ch13">Q.SUPREME </label>
                                        </div>
                                    </div>
                                    <div className="special-note-check-item">
                                        <div className="d-check-box light">
                                            <input type="checkbox" id="ch14" />
                                            <label htmlFor="ch14">HEMS</label>
                                        </div>
                                    </div>
                                    {/* <div className="special-note-check-item">
                                        <div className="d-check-box light">
                                            <input type="checkbox" id="ch15" />
                                            <label htmlFor="ch15">概算見積概算見積</label>
                                        </div>
                                    </div> */}
                                </div>
                                <div className="calculation-estimate">
                                    <dl>
                                        <dt>ダイドハント (D Y 4)(DY5)</dt>
                                        <dd>・木製垂木の場合、幅38㎜×厚さ40㎜以上、間隔455㎜以下となります。  </dd>
                                        <dd>・本見積は概算見積です。詳細設計時、及び構造計算時に材料等の変更の可能性があります。 </dd>
                                        <dd>・金具が取付可能と仮定して積算しております。ご注文前に必ず現調シートをご提出頂けます様、お願い致します。  </dd>
                                        <dd>・設置基準を満たした屋根面と仮定して積算しております。屋根材固定強度等、施工マニュアルをご参照の上、ご確認ください。</dd>
                                    </dl>
                                    <dl>
                                        <dt>ワンカチ </dt>
                                        <dd>・風速は46ｍ/sを超える地域は設置不可となります。  </dd>
                                        <dd>・屋根材質は鋼板製（JIS A6514規格品の内）として御見積もり作成しております。  </dd>
                                        <dd>・屋根材板厚は0.6㎜以上として御見積もり作成しております。</dd>
                                        <dd>ピッチ外 ・若し現場で太陽電池モジュール 固定範囲から 両端の金具 がはみ出た 場合は、</dd>
                                        <dd>弊社システム保証対象外になりますので充分 ご注意下さい 。"</dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                        <div className="table-box-title-wrap">
                            <div className="title-wrap">
                                <h3>製品情報</h3>
                            </div>
                        </div>
                        <div className="esimate-wrap">
                            <div className="estimate-list-wrap one">
                                <div className="estimate-box">
                                    <div className="estimate-tit">数量 (PCS)</div>
                                    <div className="estimate-name blue">74</div>
                                </div>
                                <div className="estimate-box">
                                    <div className="estimate-tit">容量 (Kw)</div>
                                    <div className="estimate-name blue">8300</div>
                                </div>
                                <div className="estimate-box">
                                    <div className="estimate-tit">供給価格</div>
                                    <div className="estimate-name blue">6,798,900</div>
                                </div>
                                <div className="estimate-box">
                                    <div className="estimate-tit">税 (10％)</div>
                                    <div className="estimate-name blue">679,890</div>
                                </div>
                                <div className="estimate-box">
                                    <div className="estimate-tit">総額</div>
                                    <div className="estimate-name red">7,478,790</div>
                                </div>
                            </div>
                        </div>
                        <div className="common-table bt-able">
                            <table>
                                <colgroup>
                                    <col style={{width : '160px'}}/>
                                    <col />
                                    <col style={{width : '160px'}}/>
                                    <col />
                                    <col style={{width : '160px'}}/>
                                    <col />
                                </colgroup>
                                <tbody>
                                    <tr>
                                        <th>住宅PKG単価 (W)<span className="important">*</span></th>
                                        <td>
                                            <div className="input-wrap">
                                                <input type="text" className="input-light" />
                                            </div>
                                        </td>
                                        <th>PKG容量(Kw)</th>
                                        <td>
                                            (モジュール容量×数量)÷1000
                                        </td>
                                        <th>PKG金額</th>
                                        <td>
                                            PKG単価 (W)×PKG容量(W)
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div className="estimate-product-option">
                            <div className="product-price-wrap">
                                <div className="product-price-tit">価格表示</div>
                                <div className="select-wrap">
                                    <select className="select-light" name="" id="" >
                                        <option>定価</option>
                                    </select>
                                </div>
                                <button className="btn-origin grey ml5">Pricing</button>
                            </div>
                            <div className="product-edit-wrap">
                                <ul className="product-edit-explane">
                                    <li className="explane-item item01"><span className="ico"></span>製品価格 OPEN</li>
                                    <li className="explane-item item02"><span className="ico"></span>追加, 変更資材</li>
                                    <li className="explane-item item03"><span className="ico"></span>添付必須</li>
                                    <li className="explane-item item04"><span className="ico"></span>クリックして製品の特異性を確認する</li>
                                </ul>
                                <div className="product-edit-btn">
                                    <button className="btn-origin navy mr5"><span className='plus'></span> 製品を追加</button>
                                    <button className="btn-origin grey"><span className='minus'></span>製品削除</button>
                                </div>
                            </div>
                        </div>
                        <div className="esimate-table">
                            <table>
                                <colgroup>
                                    <col width={50}/>
                                    <col width={100}/>
                                    <col/>
                                    <col width={200}/>
                                    <col width={100}/>
                                    <col width={100}/>
                                    <col width={200}/>
                                    <col width={240}/>
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th>
                                            <div className="d-check-box pop no-text">
                                                <input type="checkbox" id="ch97" disabled/>
                                                <label htmlFor="ch97"></label>
                                            </div>
                                        </th>
                                        <th>アイテム</th>
                                        <th>品番</th>
                                        <th>型板</th>
                                        <th>数量</th>
                                        <th>単位</th>
                                        <th>単価</th>
                                        <th>金額 (税別別)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td className="al-c">
                                            <div className="d-check-box light no-text">
                                                <input type="checkbox" id="ch98" />
                                                <label htmlFor="ch98"></label>
                                            </div>
                                        </td>
                                        <td className="al-r">100</td>
                                        <td>
                                            <div className="form-flex-wrap">
                                                <div className="select-wrap mr5">
                                                    <ReactSelect/>
                                                </div>
                                                <div className="btn-area">
                                                    <span className="tb_ico change_check"></span>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div className="form-flex-wrap">
                                                <div className="name">HNW-MC4-CHN30</div>
                                                <div className="icon-wrap">
                                                    <span className="tb_ico file_check"></span>
                                                    <button className="grid-tip"></button>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div className="input-wrap" style={{width: '100%'}}>
                                                <input type="text" className="input-light al-r" defaultValue={'20'}/>
                                            </div>
                                        </td>
                                        <td>セット</td>
                                        <td>
                                        <div className="form-flex-wrap">
                                            <div className="input-wrap mr5">
                                                <input type="text" className="input-light al-r" defaultValue={'278,050'}/>
                                            </div>
                                            <div className="btn-area">
                                            <span className="tb_ico open_check"></span>
                                            </div>
                                        </div>
                                        </td>
                                        <td className="al-r">5,561,000</td>
                                    </tr>
                                    <tr>
                                        <td className="al-c">
                                            <div className="d-check-box light no-text">
                                                <input type="checkbox" id="ch98" />
                                                <label htmlFor="ch98"></label>
                                            </div>
                                        </td>
                                        <td className="al-r">100</td>
                                        <td>
                                            <div className="form-flex-wrap">
                                                <div className="select-wrap mr5">
                                                    <ReactSelect/>
                                                </div>
                                                <div className="btn-area">
                                                    <span className="tb_ico change_check"></span>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div className="form-flex-wrap">
                                                <div className="name">HNW-MC4-CHN30</div>
                                                <div className="icon-wrap">
                                                    <button className="grid-tip"></button>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div className="input-wrap" style={{width: '100%'}}>
                                                <input type="text" className="input-light al-r" defaultValue={'20'}/>
                                            </div>
                                        </td>
                                        <td>セット</td>
                                        <td>
                                        <div className="form-flex-wrap">
                                            <div className="input-wrap mr5">
                                                <input type="text" className="input-light al-r" defaultValue={'278,050'}/>
                                            </div>
                                            <div className="btn-area">
                                            <span className="tb_ico open_check"></span>
                                            </div>
                                        </div>
                                        </td>
                                        <td className="al-r">5,561,000</td>
                                    </tr>
                                    <tr>
                                        <td className="al-c">
                                            <div className="d-check-box light no-text">
                                                <input type="checkbox" id="ch98" />
                                                <label htmlFor="ch98"></label>
                                            </div>
                                        </td>
                                        <td className="al-r">100</td>
                                        <td>
                                            <div className="form-flex-wrap">
                                                <div className="select-wrap mr5">
                                                    <ReactSelect/>
                                                </div>
                                                <div className="btn-area">
                                                    <span className="tb_ico change_check"></span>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div className="form-flex-wrap">
                                                <div className="name">HNW-MC4-CHN30</div>
                                                
                                            </div>
                                        </td>
                                        <td>
                                            <div className="input-wrap" style={{width: '100%'}}>
                                                <input type="text" className="input-light al-r" defaultValue={'20'}/>
                                            </div>
                                        </td>
                                        <td>セット</td>
                                        <td>
                                        <div className="form-flex-wrap">
                                            <div className="input-wrap mr5">
                                                <input type="text" className="input-light al-r" defaultValue={'278,050'}/>
                                            </div>
                                            <div className="btn-area">
                                            <span className="tb_ico open_check"></span>
                                            </div>
                                        </div>
                                        </td>
                                        <td className="al-r">5,561,000</td>
                                    </tr>
                                    <tr>
                                        <td className="al-c">
                                            <div className="d-check-box light no-text">
                                                <input type="checkbox" id="ch98" />
                                                <label htmlFor="ch98"></label>
                                            </div>
                                        </td>
                                        <td className="al-r">100</td>
                                        <td>
                                            <div className="form-flex-wrap">
                                                <div className="select-wrap ">
                                                    <ReactSelect/>
                                                </div>
                                                
                                            </div>
                                        </td>
                                        <td>
                                            <div className="form-flex-wrap">
                                                <div className="name">HNW-MC4-CHN30</div>
                                                <div className="icon-wrap">
                                                    <span className="tb_ico file_check"></span>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div className="input-wrap" style={{width: '100%'}}>
                                                <input type="text" className="input-light al-r" defaultValue={'20'}/>
                                            </div>
                                        </td>
                                        <td>セット</td>
                                        <td>
                                        <div className="form-flex-wrap">
                                            <div className="input-wrap mr5">
                                                <input type="text" className="input-light al-r" defaultValue={'278,050'}/>
                                            </div>
                                            
                                        </div>
                                        </td>
                                        <td className="al-r">5,561,000</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            {/* 제품 특이사항 */}
            {/* <ProductFeaturesPop/> */}

            {/* 문서 다운로드 옵션 */}
            {/* <FileDownOptionPop/> */}

            {/* 견적복사 */}
            {/* <EstimateCopyPop/> */}
        </div>
    )
}