<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<form:form commandName="useRequestVO" name="frm" method="POST" action="/map/insertReq" id="insertFrm">
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
  <div class="section_title">
    <!-- <p>현장 지원 시스템</p> -->
  </div>
  <div class="section_content">
    <table class="detail_table">
    <tbody>
      <tr>
        <th colspan="2">작업명</th>
        <td><input type="text" class="form-control" id="title" name="title" autocomplete="off"/></td>
      </tr>
      <tr>
        <th colspan="2">기간</th>
        <td>
          <input type="text" class="form-control input-datepicker" readonly id="startDate" name= "s_date" onchange="dateChange('start');">  ~
          <input type="text" class="form-control input-datepicker" readonly id="endDate" name="e_date" onchange="dateChange('end');">
        </td>
      </tr>
      <tr>
        <th colspan="2">장소</th>
        <td id="area_select_td">
          <div>
            <select id="city" name="city" onchange="changeAreaList(this.value, this.name)" class="form-control input-area-select">
              <option value="0">::시/도::</option>
              <c:forEach var="item" items="${cityList}" varStatus="status">
                <option value="${item.code}"><c:out value="${item.area}"/></option>
              </c:forEach>
            </select>
            <select id="county" name="county" onchange="changeAreaList(this.value, this.name);" class="form-control input-area-select">
              <option value="0">::선택::</option>
            </select>
            <select id="town" name="town" class="form-control input-area-select">
              <option value="0">::선택::</option>
            </select>
            <span class="btn btn-outline-primary" onclick="addAreaBtn();">추가</span>
          </div>
          <div id="addedArea" class="addedArea">
          </div>
        </td>
      </tr>
      <tr>
        <th rowspan="3">레이어</th>
        <th><label>지하시설물</label></th>
        <td>
          <c:forEach var="item" items="${layersVO}" varStatus="status">
            <c:if test="${item.code eq  'facility'}">
              <label class="layer-label"><input type="checkbox" name="${item.code}" id="${item.code}" value="${item.layer}"/> ${item.name} </label>
            </c:if>
          </c:forEach>
        </td>
      </tr>
      <tr>
        <th><label>지하구조물</label></th>
        <td>
          <c:forEach var="item" items="${layersVO}" varStatus="status">
            <c:if test="${item.code eq  'structure'}">
              <label class="layer-label"><input type="checkbox" name="${item.code}" id="${item.code}" value="${item.layer}"/> ${item.name} </label>
            </c:if>
          </c:forEach>
        </td>
      </tr>
      <tr>
        <th><label>지반</label></th>
        <td>
          <c:forEach var="item" items="${layersVO}" varStatus="status">
            <c:if test="${item.code eq  'ground'}">
              <label class="layer-label"><input type="checkbox" name="${item.code}" id="${item.code}" value="${item.layer}"/> ${item.name} </label>
            </c:if>
          </c:forEach>
        </td>
      </tr>
      <tr>
        <th colspan="2">요청 내용</th>
        <td><textarea class="form-control" rows="3" style="resize:none;" name=user_msg></textarea></td>
      </tr>

    </tbody>
    </table>

    <input type="hidden" id="layers" name="layers"/>

    <input type="hidden" id="places" name="places"/>
    <div class="section_btn">
      <p class="search_p1">
        <input class="btn btn-secondary" type="button" value="닫기" data-bs-dismiss="modal"/>
      </p>
      <p class="search_p2">
        <input class="btn btn-success" type="button" value="요청" onclick="insertReqBtn(); return false;" />
      </p>
    </div>
  </div>
</form:form>
	
<script type="text/javascript">
  var areaAddCount = 0;


  $(function(){
    $("#startDate").datepicker({
      dateFormat: 'yy-mm-dd',
          monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
          monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
          dayNames: ['일', '월', '화', '수', '목', '금', '토'],
          dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],
          dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
          yearSuffix: '년',
          showMonthAfterYear:true,
      changeYear : true,
          changeMonth : true
     });

    $("#endDate").datepicker({
      dateFormat: 'yy-mm-dd',
          monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
          monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
          dayNames: ['일', '월', '화', '수', '목', '금', '토'],
          dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],
          dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
          yearSuffix: '년',
          showMonthAfterYear:true,
      changeYear : true,
          changeMonth : true
     });

    //전체선택 체크박스 클릭
    $("input[type=checkbox]").click(function() {
      var id = this.id;

      if(id.indexOf("facility") != -1){
        if(id == "facility_all"){
          if($("#facility_all").prop("checked")) {
            $("input[name=facility]").prop("checked", true);
          } else {
            $("input[name=facility]").prop("checked", false);
          }
        }else{
          $("#facility_all").prop("checked", false);
          if($(this).prop("checked")) {
            $(this).prop("checked", true);
          }else{
            $(this).prop("checked", false);
          }
        }
      }else if(id.indexOf("structure") !== -1){
        if(id === "structure_all"){
          if($("#structure_all").prop("checked")) {
            $("input[name=structure]").prop("checked", true);
          } else {
            $("input[name=structure]").prop("checked", false);
          }
        }else{
          $("#structure_all").prop("checked", false);

          if($(this).prop("checked")) {
            $(this).prop("checked", true);
          }else{
            $(this).prop("checked", false);
          }
        }
      }else if(id.indexOf("ground") !== -1){
        if(id === "ground_all"){
          if($("#ground_all").prop("checked")) {
            $("input[name=ground]").prop("checked", true);
          } else {
            $("input[name=ground]").prop("checked", false);
          }
        }else{
          $("#ground_all").prop("checked", false);
          if($(this).prop("checked")) {
            $(this).prop("checked", true);
          }else{
            $(this).prop("checked", false);
          }
        }
      }
    });
  });
</script>
