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

export default function DesignRequestPop(){
    return(
        <div className="modal-popup">
            <div className="modal-dialog big">
                <div className="modal-content">
                    <div className="modal-header">
                        <h1 className="title">設計依頼のインポート </h1>
                        <button className="modal-close">닫기</button>
                    </div>
                    <div className="modal-body">
                        <div className="modal-body-inner">
                            <div className="design-request-table">
                                <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="select-wrap">
                                                        <select className="select-light" name="" id="" >
                                                            <option>All</option>
                                                        </select>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>期間検索</th>
                                                <td colSpan={5}>
                                                    <div className="form-flex-wrap">
                                                        <div className="radio-wrap mr10">
                                                            <div className="d-check-radio light mr10">
                                                                <input type="radio" name="radio04" id="ra07" />
                                                                <label htmlFor="ra07">提出日</label>
                                                            </div>
                                                            <div className="d-check-radio light">
                                                                <input type="radio" name="radio04" id="ra08" />
                                                                <label htmlFor="ra08">受付日</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>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div className="design-request-grid">
                                <div className="design-request-grid-tit">Plan List</div>
                            </div>
                        </div>
                        <div className="footer-btn-wrap">
                            <button className="btn-origin grey mr5">閉じる</button>
                            <button className="btn-origin navy ">選択の適用</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}