<section>
  <div class="owner--information--wrap">
    <div class="col-12 title--wrapper d-flex align-items-center justify-content-between">
      <h2>소유주 정보</h2>
      <div class="bidding--count">
        <? if($ds_status_proc == "E0"){ ?>
          <span>입찰 마감 시간 : </span>
          <span><?=$time_limit_tender?></span>
        <? } ?>
      </div>
    </div>
    <div class="sch--modules--wrap">
      <div class="form--group user--info">
        <input type="text" placeholder="소유주명" value="<?=$nm_name_sale?>" />
      </div>
      <div class="form--group car--numb">
        <input type="text" placeholder="차량 번호" value="<?=$nm_number?>" />
      </div>
      <div class="form--group phone--numb">
        <input type="text" placeholder="휴대전화 번호" value="<?=$nm_hp_sale?>" />
      </div>
      <!-- <button type='button'>차량 조회<i class="sch--ic"></i></button> -->
    </div>
  </div>
</section>

<section>
  <div class="car--info--wrap">
    <h2>차량 정보 입력</h2>
    <div class="form--wrap">
      <div class="form--groups">
        <h2>제조사</h2>
        <div class="form--group">
          <select name="" id="" disabled>
            <option value="<?=$cd_brand?>"><?=$nm_brand?></option>
          </select>
        </div>
      </div>

      <div class="form--groups">
        <h2>모델</h2>
        <div class="form--group">
          <select name="" id="" disabled>
            <option value="<?=$cd_model?>"><?=$nm_model?></option>
          </select>
        </div>
      </div>

      <div class="form--groups">
        <h2>Trade-in</h2>
        <div class="form--group">
          <select id="ds_tradein" name="ds_tradein"></select>
        </div>
      </div>
      <div class="form--groups">
        <h2>변속기</h2>
        <div class="form--group">
          <select id="ds_transmission" name="ds_transmission"></select>
        </div>
      </div>

      <div class="form--groups">
        <h2>연식 (최초 등록일)</h2>
        <div class="form--group ty2">
          <select  name="nm_regdate_yyyy" id="nm_regdate_yyyy" style="max-width:134px;">
            <?php
              $cur_year = date("Y");
              $cur_year = (int)$cur_year;
              // echo $cur_year;
              // exit;
              for($i=1990; $i<=$cur_year; $i++){
                ?>
                <option value="<?=$i?>" <? if($i == $nm_regdate_yyyy){ ?>selected<? } ?>><?=$i?></option>
                <?php
              }
            ?>
          </select>
          <label for="nm_regdate_yyyy" class="ml10">년</label>

          <select name="nm_regdate_mm" id="nm_regdate_mm" style="max-width:134px; margin-left:20px;">
            <?php
              for($i=1; $i<=12; $i++){
                ?>
                <option value="<?=($i<10)?"0".$i:$i?>" <? if($i == $nm_regdate_mm){ ?>selected<? } ?>><?=($i<10)?"0".$i:$i?></option>
                <?php
              }
            ?>
          </select>

          <label for="" class="ml10">월</label>
        </div>
      </div>

      <div class="form--groups">
        <h2>형식 년도</h2>
        <div class="form--group ty2">
          <select id="ds_year" name="ds_year"></select>
          <label for="ds_year" class="ml10">년</label>
        </div>
      </div>



      <div class="form--groups">
        <h2>배기량</h2>
        <div class="form--group ty2">
          <input type="text" placeholder="배기량을 입력해주세요" value="<?=$nm_cc?>">
          <label for="" class="ml10">cc</label>
        </div>
      </div>

      <div class="form--groups">
        <h2>연료</h2>
        <div class="form--group">
          <input type="text" placeholder="연료를 입력해주세요" value="<?=$ds_oil?>">
          <!-- <select name="" id="">
            <option value="">선택</option>
          </select> -->
        </div>
      </div>

      <div class="form--groups">
        <h2>색상</h2>
        <div class="form--group ty2">
          <input type="text" placeholder="색상을 입력해주세요" value="<?=$nm_color?>">
        </div>
      </div>

      <div class="form--groups">
        <h2>주행거리</h2>
        <div class="form--group ty2">
          <input type="text" placeholder="주행거리를 입력해주세요" value="<?=number_format($nm_mileage)?>">
          <label for="" class="ml10">km</label>
        </div>
      </div>




      <div class="form--groups">
        <h2>사고 유무</h2>
        <div class="form--group">
          <select id="ds_accident" name="ds_accident"></select>
        </div>
      </div>

      <div class="form--groups">
        <h2>판매 희망 지역</h2>
        <div class="form--group">
          <select name="ds_area" id="ds_area">
            <option value="">판매희망 선택하세요</option>
          </select>
        </div>
      </div>

      <div class="form--groups">
        <h2>사업자 유,무</h2>
        <div class="form--group">
          <select name="ds_business_num" id="ds_business_num">
            <option value="">사업자 유,무를 선택하세요</option>
          </select>
        </div>
      </div>

      <div class="form--groups">
        <h2>추가 옵션 및 특이사 항</h2>
        <div class="form--group">
          <input type="text" placeholder="추가 옵션 및 특이사항을 입력해주세요" value="<?=$nm_cont_pac?>">
        </div>
      </div>


      <div class="form--groups">
        <h2>희망 AAP SA</h2>
        <div class="form--group">
          <input type="text" value="<?=$aap_nm_name?>">
        </div>
      </div>


      <div class="form--groups">
        <h2>판매 시기</h2>
        <div class="form--group">
          <select name="ds_sale_period" id="ds_sale_period"></select>
        </div>
      </div>

      <div class="form--groups">
        <h2>옵션정보</h2>
        <div class="form--group">
          <button type='button' class="btn  btn-outline-primary sch--btnz" style="height:53px; width:100%;" id="btn_car_option">옵션보기<i class="sch--ic"></i></button>
        </div>
      </div>
      <?php if($ds_status_sale == "D0") { ?>
        <div class="form--groups">
          <h2>반려사유</h2>
          <div class="form--group">
            <input type="text" value="<?=$nm_cont_return?>" disabled>
          </div>
        </div>
      <?php } ?>


      <!-- <div class="form--groups">
        <h2>수리부위</h2>
        <div class="form--group align-items-center d-flex fixed--positon" style=" width:100%;">
          <button data-bs-toggle="modal" data-bs-target="#exampleModal7" class="btn  btn-outline-primary" style="width:50%;height:53px;">외판</button>
          <button data-bs-toggle="modal" data-bs-target="#exampleModal8" class="btn  btn-outline-primary ml20" style="width:50%;height:53px;">주요골격</button>
        </div>
      </div> -->


      <div class="form--groups">
        <h2>구매방식</h2>
        <div class="form--group">
          <select name="ds_buy_method" id="ds_buy_method"></select>
        </div>
      </div>

      <div class="form--groups">
        <h2>경매시간</h2>
        <div class="form--group">
          <select name="ds_auction_time" id="ds_auction_time"></select>
        </div>
      </div>

      <div class="form--groups">
        <h2>사고부위 체크(판금,교환등)</h2>
        <div class="form--group">
          <input type="text" name="ds_accident_check" id="ds_accident_check" value="<?=$ds_accident_check?>" placeholder="사고부위를 입력해주세요">
        </div>



      </div>


      <div class="form--groups">
        <h2>데미지 체크(수리가 필요한곳 기재)</h2>
        <div class="form--group">
          <input type="text" name="ds_damage_check" id="ds_damage_check" value="<?=$ds_damage_check?>" placeholder="수리가 필요한곳을 입력해주세요">
        </div>
      </div>

      <div class="form--groups" style="">
        <h2>관리자 코멘트</h2>
        <div class="form--group">
          <input type="text" value="<?=$nm_guide?>" disabled>
        </div>
      </div>

    </div>

  </div>
</section>

<?php
  $car_history_sql = "SELECT * FROM car_history_master WHERE cd_car_history = '$cd_car_history' AND ds_delind = 'N' AND ds_type = 'user' LIMIT 1 ";
  // echo $car_history_sql;
  $car_history_res = mysql_query($car_history_sql);
  $car_history_col = mysql_fetch_array($car_history_res);
?>
<!-- 사고이력 -->
<section class="spacer--top mt-5">
  <div class="car--info--wrap">
    <div class="title--wrapper d-flex align-items-center justify-content-between">
      <h2>사고 이력 정보</h2>

      <!-- <button class="excid--btn btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal2">사고이력 정보 보기</button> -->
      <button type="button" class="excid--btn btn btn-primary" _data-bs-toggle="modal" _data-bs-target="#exampleModal2" id="btn_accident_view">사고이력 정보 보기</button>
    </div>

    <div class="table--mobile--wrap">
      <table class="mt25">
        <tbody>
        <tr>
          <th>차량번호 변경</th>
          <td><?=number_format($car_history_col['r201'])?> 회</td>
        </tr>
        <tr>
          <th>소유자 변경</th>
          <td><?=number_format($car_history_col['r204'])?> 회</td>
        </tr>
        <tr>
          <th>자동차 보험 특수 사고</th>
          <td>잔손 : <?=number_format($car_history_col['405'])?>회 / 침수전(분)손 : <?=number_format($car_history_col['407'])?>회 / 도난 : <?=number_format($car_history_col['r409'])?>회</td>
        </tr>
        <tr>
          <th>보험 사고 (내차 피해)</th>
          <td><?=number_format($car_history_col['r401'])?>회 (<?=number_format($car_history_col['r402'])?>원)</td>
        </tr>
        <tr>
          <th>보험 사고 (타차 가해)</th>
          <td><?=number_format($car_history_col['r403'])?>회 (<?=number_format($car_history_col['r404'])?>원)</td>
        </tr>
        </tbody>
      </table>
    </div>



  </div>
</section>


<!-- 추가사진 (필수사진) -->
<section class="spacer--top mt-5 pt30">
  <div class="options--wrapper">
    <h2>차량사진<span class="astc--text">(필수사진)</span></h2>
    <div class="pic--add--wrap mob--view--type">
      <?php
        $nm_file_front = getCarBasicThumbImage($cd_car, $nm_file_front, '차량전면', false, 'car_basic');
        preg_match_all("/<img[^>]*src=[\"']?([^>\"']+)[\"']?[^>]*>/i", $nm_file_front, $matches);
        $nm_file_front_href = $matches[1][0];

        $nm_file_back = getCarBasicThumbImage($cd_car, $nm_file_back, '차량후면', false, 'car_basic');
        preg_match_all("/<img[^>]*src=[\"']?([^>\"']+)[\"']?[^>]*>/i", $nm_file_back, $matches);
        $nm_file_back_href = $matches[1][0];

        $nm_file_side1 = getCarBasicThumbImage($cd_car, $nm_file_side1, '운전석 측면', false, 'car_basic');
        preg_match_all("/<img[^>]*src=[\"']?([^>\"']+)[\"']?[^>]*>/i", $nm_file_side1, $matches);
        $nm_file_side1_href = $matches[1][0];

        $nm_file_side2 = getCarBasicThumbImage($cd_car, $nm_file_side2, '조수석 측면', false, 'car_basic');
        preg_match_all("/<img[^>]*src=[\"']?([^>\"']+)[\"']?[^>]*>/i", $nm_file_side2, $matches);
        $nm_file_side2_href = $matches[1][0];

        $nm_file_dashboard = getCarBasicThumbImage($cd_car, $nm_file_dashboard, '계기판', false, 'car_basic');
        preg_match_all("/<img[^>]*src=[\"']?([^>\"']+)[\"']?[^>]*>/i", $nm_file_dashboard, $matches);
        $nm_file_dashboard_href = $matches[1][0];
      ?>
      <div class="add--box">
        <div class="thumb--wrap">
          <div class="thumb car--01">
            <!-- <a href="<?=$nm_file_front_href?>" data-lightbox="image-1" data-title="차량 전면"> -->
            <?=$nm_file_front?>
            <!-- </a> -->
          </div>
        </div>

        <div class="desc">차량 전면</div>

      </div>

      <div class="add--box">
        <div class="thumb--wrap">
          <div class="thumb car--01">
            <!-- <a href="<?=$nm_file_back_href?>" data-lightbox="image-1" data-title="차량 후면"> -->
            <?=$nm_file_back?>
            <!-- </a> -->
          </div>
        </div>

        <div class="desc">차량 후면</div>

      </div>

      <div class="add--box">
        <div class="thumb--wrap">
          <div class="thumb car--01">
            <!-- <a href="<?=$nm_file_side1_href?>" data-lightbox="image-1" data-title="운전석 측면"> -->
            <?=$nm_file_side1?>
            <!-- </a> -->
          </div>
        </div>

        <div class="desc">운전석 측면</div>

      </div>

      <div class="add--box">
        <div class="thumb--wrap">
          <div class="thumb car--01">
            <!-- <a href="<?=$nm_file_side2_href?>" data-lightbox="image-1" data-title="조수석 측면"> -->
            <?=$nm_file_side2?>
            <!-- </a> -->
          </div>
        </div>

        <div class="desc">조수석 측면</div>

      </div>

      <div class="add--box">
        <div class="thumb--wrap">
          <div class="thumb car--01">
            <!-- <a href="<?=$nm_file_dashboard_href?>" data-lightbox="image-1" data-title="계기판"> -->
            <?=$nm_file_dashboard?>
            <!-- </a> -->
          </div>
        </div>

        <div class="desc">계기판</div>

      </div>

    </div>
  </div>
</section>

<!-- 차량사진 (추가사진) -->
<section class="mt-5 pt30">
  <div class="options--wrapper">
    <h2>차량사진<span class="astc--text">(추가사진)</span></h2>
    <div class="pic--add--wrap mob--view--type">
      <?php
        if(!empty($cd_car)) {
          $sql = "SELECT *
								FROM car_file
									WHERE cd_car = '$cd_car'
										AND ds_delind='N'
								ORDER BY no_sort ASC, cd_car ASC ";

          // echo $sql;
          $r = mysql_query($sql, $connect);
          $i=1;
          while($imgs = mysql_fetch_assoc($r)) {
            $img_tag = getCarAddtionalImage($cd_car, $imgs['nm_file'], '추가사진'.$i, true, 'car_additional');
            // 정규식을 이용해서 img 태그 전체 / src 값만 추출하기
            preg_match_all("/<img[^>]*src=[\"']?([^>\"']+)[\"']?[^>]*>/i", $img_tag, $matches);
            // img 태그 전체 추출하기
            // print_r($matches[0]);
            // src 값만 추출하기
            // print_r($matches[1]);

            // $car_additional_img = UPLOAD_PATH_CAR.$imgs['cd_car']."_detail/".$imgs['nm_file'];
            ?>
            <div class="add--box">
              <div class="thumb--wrap">
                <div class="thumb car--01">
                  <!-- <a href="<?=$matches[1][0]?>" data-lightbox="image-2" data-title="추가사진<?=$i?>"> -->
                  <?=$img_tag?>
                  <!-- </a> -->
                </div>
              </div>
            </div>
            <?php
            $i++;
          }
        }
      ?>
    </div>
  </div>
</section>


<!-- 차량설명 -->
<section class="mt-5 pt30">
  <div class="options--wrapper">
    <h2>차량 설명하기</h2>
    <div class="editor--wrapper ty2">
      <div class="editor--inner col-12">
        <textarea rows="10" style="width:100%; padding:20px;" class="form-control"><?=$nm_desc?></textarea>
      </div>
    </div>
  </div>
</section>


<!-- 유찰하기 -->
<section class="mt-5 pt30">
  <div class="options--wrapper">
    <h2>유찰하기</h2>
    <div class="editor--wrapper ty2">
      <div class="editor--inner col-12">
        <textarea rows="10" style="width:100%; padding:20px;" class="form-control"></textarea>
      </div>
    </div>
  </div>
</section>


<!-- 레이어 팝업 -->
<?php include("../../common/inc/inc_layer_popup_m.php") ?>


<link  href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>

<style>
    .car_option_popup{
        width:100%;
        max-width:1200px;
        margin:0 auto;
    }
    .car_option_popup > h2{
        font-weight: 700;
        font-size: 18px;
        line-height: 100%;
        letter-spacing: -0.02em;
        color: #222222;
    }

    .car_option_popup > h2 .astc--text{
        font-weight: 700;
        font-size: 18px;
        letter-spacing: -0.02em;
        color: #1E75FF;
    }
    .car_option_popup > h2 .astc--text.ty2{
        color: #909EB5;
    }

    .car_option_popup .options--list{
        width:100%;
        border-top:1px solid #888;
        margin-top:20px;
        padding-top:40px;
    }
    .car_option_popup .options--list > h2{
        font-weight: 500;
        font-size: 14px;
        line-height: 100%;
        letter-spacing: -0.02em;
        color: #111111;
    }
    .car_option_popup .options--list > ul{
        display: flex;
        align-items: center;
        margin-top:30px;
        margin-bottom:50px;
    }
    .car_option_popup .options--list > ul >li{
        width:calc(100% / 4);
    }
    input[type="checkbox"] + label{
        font-weight: 350;
        font-size: 14px;
        line-height: 100%;
        color: #333333;
        display: flex;
        align-items:center;
        cursor: pointer;
    }

    input[type="checkbox"] + label:before{
        content:'';
        display: block;
        width:16px;
        height:16px;
        background:url(/design/staff/assets/img/check_off.svg) no-repeat center;
        margin-right:12px;
    }
    input[type="checkbox"]:checked + label:before{
        background:url(/design/staff/assets/img/check_on.svg) no-repeat center;
    }


    .car_option_popup .pic--add--wrap{
        display: flex;
        align-items: center;
        justify-content:space-between;
        width:100%;
        border-top:1px solid #888;
        margin-top:20px;
        padding-top:40px;
    }
    .car_option_popup .pic--add--wrap.bd-0{
        border:0px;
        padding-top:0px;
    }

    .car_option_popup .pic--add--wrap .add--box{
        width: 224px;
        height: 224px;
        display: flex;
        align-items: center;
        justify-content:center;
        flex-direction: column;

        background: #FFFFFF;
        border: 1px solid #EEEEEE;
        box-shadow: 0px 5px 5px rgba(239, 240, 241, 0.5);
        border-radius: 20px;
    }
    .car_option_popup .pic--add--wrap .add--box .thumb{
        width: 80px;
        height: 80px;
        border-radius: 80px;
        background: #F7F7F9;
        position: relative;
    }

    .car_option_popup .pic--add--wrap.view--type .add--box .thumb{
        width:200px;
        height:140px;
        border-radius:0px;
        margin:0 auto;
        overflow:hidden;
        background: transparent!important;
    }

    .car_option_popup .pic--add--wrap.view--type .add--box .thumb img{
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
        max-height:140px;
        max-width:200px;
        object-fit: cover;
    }

    .car_option_popup .pic--add--wrap.view--type .add--box.car--dashboard{
        position: relative;
    }
    .car_option_popup .pic--add--wrap.view--type .add--box.car--dashboard .thumb{
        height:204px;
        width:204px;
        position:absolute;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
    }
    .car_option_popup .pic--add--wrap.view--type .add--box.car--dashboard .thumb img{
        width:100%;
        height:100%;
        max-width:204px;
        max-height:204px;
    }
    .car_option_popup .pic--add--wrap.view--type .add--box.car--dashboard .desc{
        z-index: 2;
        position: absolute;
        bottom:20px;
    }



    .car_option_popup .pic--add--wrap .add--box .thumb .add--btn{
        width: 26px;
        height: 26px;
        border-radius:26px;
        border: 1px solid #EDEFF1;
        box-shadow: 0px 2px 2px #DDE1E8;
        background:#fff url(../img/add_ic.svg) no-repeat center;
        position: absolute;
        top:0px;
        right:0px;
        cursor: pointer;
    }

    .car_option_popup .pic--add--wrap .add--box .thumb.car--01{ background:#f7f7f9 url(/design/staff/assets/img/car_pic01.svg) no-repeat center;}
    .car_option_popup .pic--add--wrap .add--box .thumb.car--02{ background:#f7f7f9 url(/design/staff/assets/img/car_pic02.svg) no-repeat center;}
    .car_option_popup .pic--add--wrap .add--box .thumb.car--03{ background:#f7f7f9 url(/design/staff/assets/img/car_pic03.svg) no-repeat center;}
    .car_option_popup .pic--add--wrap .add--box .thumb.car--04{ background:#f7f7f9 url(/design/staff/assets/img/car_pic04.svg) no-repeat center;}
    .car_option_popup .pic--add--wrap .add--box .thumb.car--05{ background:#f7f7f9 url(/design/staff/assets/img/car_pic05.svg) no-repeat center;}


    .car_option_popup .pic--add--wrap .add--box .desc{
        font-weight: 350;
        font-size: 15px;
        line-height: 100%;
        text-align: center;
        letter-spacing: -0.02em;
        color: #000000;
        margin-top:10px;
    }


    .car_option_popup .pic--add--wrap.view--type .add--box .desc{
        background: #F3F5F8;
        border-radius: 50px;
        height:35px;
        display:inline-flex;
        align-items: center;
        padding:0 20px;

        font-weight: 350;
        font-size: 13px;
        text-align: center;
        letter-spacing: -0.02em;
        color: #000000;
    }

    .car_option_popup .pic--add--wrap .addition--box .thumb{
        background:#f7f7f9 url(../img/pic_ic.svg) no-repeat center;
    }

    .car_option_popup .pic--add--wrap .addition--box .add--btn{
        font-weight: 500;
        font-size: 12px;
        text-align: center;
        letter-spacing: -0.03em;
        color: #1E75FF;

        width: 100px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(30, 117, 255, 0.3);
        border-radius: 50px;
        cursor: pointer;
    }
</style>



<script>
    $('.fotorama').fotorama({
        width: 700,
        maxwidth: '100%',
        ratio: 5/5,
        allowfullscreen: true,
        nav: 'thumbs'
    });

    $(function() {

        // setCodeSelect("areacode","nm_hp1", "","","<?=$nm_hp_sale1?>","선택","");
        setCodeSelect("listcode","ds_area", "member_master","ds_area","<?=$ds_area_sale?>","선택하세요","");
        setCodeSelect("listcode","ds_business_num", "car_master","ds_business_num","<?=$ds_business_num?>","사업자 유,무를 선택하세요","");
        setCodeSelect("listcode","ds_sale_period", "sale_master","ds_sale_period","<?=$ds_sale_period?>","판매시기를 선택하세요","");
        setCodeSelect("listcode","ds_transmission", "car_master","ds_transmission","<?=$ds_transmission?>","선택하세요","");
        setCodeSelect("listcode","ds_year", "car_master","ds_year","<?=$ds_year?>","선택하세요","");
        setCodeSelect("listcode","ds_accident", "car_master","ds_accident","<?=$ds_accident?>","선택","");
        setCodeSelect("listcode","ds_tradein", "sale_master","ds_tradein","<?=$ds_tradein?>","선택하세요","");
        setCodeSelect("listcode","ds_buy_method", "sale_master","ds_buy_method","<?=$ds_buy_method?>","선택하세요","");
        setCodeSelect("listcode","ds_auction_time", "sale_master","ds_auction_time","<?=$ds_auction_time?>","선택하세요","");

        //차량이력정보 보기 팝업
        $("#btn_accident_view").on("click", function() {
            var custom_opts = {
                title : '',
                btn_close_show : false,
            }

            // $("#exampleModal2").modal("show");
            // return false;

            $.get("/sell/car_info_car_history_view.php", { mode: 'view', cd_car_history: "<?=$cd_car_history?>", device : 'm'},function(data) {
                $("#history_scr_cont").html(data);
                $("#historyModal").modal("show");
                // viewLayerPopup('car_history');
            });
        });

        $(".car_history_popup .close").on("click", function() {
            closeLayerPopup('car_history');
        });

        //차량이력정보 보기 팝업
        $("#btn_car_option").on("click", function() {
            var custom_opts = {
                title : '',
                btn_close_show : false,
            }

            $.get("/sell/car_option_view.php", { mode: 'view', cd_sale: <?=$cd_sale?>},function(data) {
                $("#car_option_cont").html(data);
                $("#carOptionModal").modal("show");
                // viewLayerPopup('car_option');
            });
        });

        $(".car_option_popup .close").on("click", function() {
            closeLayerPopup('car_option');
        });



    })
</script>
