import SingleDatePicker from "@/components/common/datepicker/SingleDatePicker";
import ReactSelect from "@/components/common/reactselect/ReactSelect";

export default function PropertyStatus(){
    return(
        <div className="sub-table-box">
            <div className="table-box-title-wrap">
                <div className="title-wrap">
                    <h3>物件状況</h3>
                </div>
                <div className="left-unit-box">
                    <button className="btn-origin navy mr5">新規物件登録</button>
                    <button className="btn-origin navy mr5">照会</button>
                    <button className="btn-origin grey">初期化</button>
                </div>
            </div>
            <div className="common-table">
                <table>
                    <colgroup>
                        <col style={{width : '160px'}}/>
                        <col />
                        <col style={{width : '160px'}}/>
                        <col />
                        <col style={{width : '160px'}}/>
                        <col />
                    </colgroup>
                    <tbody>
                        <tr>
                            <th>品番</th>
                            <td>
                                <div className="input-wrap">
                                    <input type="text" className="input-light" />
                                </div>
                            </td>
                            <th>販売代理店名</th>
                            <td>
                                <div className="input-wrap">
                                    <input type="text" className="input-light" />
                                </div>
                            </td>
                            <th>見積もり</th>
                            <td>
                                <div className="input-wrap">
                                    <input type="text" className="input-light" />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>商品名</th>
                            <td>
                                <div className="input-wrap">
                                    <input type="text" className="input-light" />
                                </div>
                            </td>
                            <th>担当者</th>
                            <td>
                                <div className="input-wrap">
                                    <input type="text" className="input-light" />
                                </div>
                            </td>
                            <th>商品アドレス</th>
                            <td>
                                <div className="input-wrap">
                                    <input type="text" className="input-light" />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>販売代理店を選択</th>
                            <td colSpan={3}>
                                <div className="form-flex-wrap">
                                    <div className="radio-wrap mr10">
                                        <div className="d-check-radio light mr10">
                                            <input type="radio" name="radio02" id="ra04" />
                                            <label htmlFor="ra04">更新日</label>
                                        </div>
                                        <div className="d-check-radio light">
                                            <input type="radio" name="radio02" id="ra05" />
                                            <label htmlFor="ra05">登録日</label>
                                        </div>
                                    </div>
                                    <div className="date-picker-wrap">
                                        <div className="date-picker" style={{flex: 1}}>
                                            <SingleDatePicker/>
                                        </div>
                                        <span> ~ </span>
                                        <div className="date-picker" style={{flex: 1}}>
                                            <SingleDatePicker/>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <th>一時保存物</th>
                            <td>
                                <div className="radio-wrap mr10">
                                    <div className="d-check-radio light mr10">
                                        <input type="radio" name="radio01" id="ra01" />
                                        <label htmlFor="ra01">含む</label>
                                    </div>
                                    <div className="d-check-radio light mr10">
                                        <input type="radio" name="radio01" id="ra02" />
                                        <label htmlFor="ra02">除外</label>
                                    </div>
                                    <div className="d-check-radio light">
                                        <input type="radio" name="radio01" id="ra03" />
                                        <label htmlFor="ra03">一時的なものだけを見る</label>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        
                        <tr>
                            <th>期間検索</th>
                            <td colSpan={5}>
                                <div className="form-flex-wrap">
                                    <div className="select-wrap mr5" style={{flex: 1}}>
                                        <ReactSelect/>
                                    </div>
                                    <div className="select-wrap mr10" style={{flex: 1}}>
                                        <ReactSelect/>
                                    </div>
                                    <div className="d-check-box light">
                                        <input type="checkbox" id="ch01" />
                                        <label htmlFor="ch01">虚偽販売店を含む</label>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    )
}