@extends('layouts.user.survey')
@section('content')
<link rel="stylesheet" href="{{asset('admin/lib/select2/css/select2.min.css')}}">
<style>
  .datatable-cell span{color:white;}.datatable-row th,td{width:auto}.paginate_button {padding: 5px;
    background: #172e43;color: white;margin: 5px;padding-left: 10px;padding-right: 10px;}.previous {padding: 5px;background: #172e43;color: white;margin: 5px;}.next{padding: 5px;background: #172e43;color: white;margin: 5px;}.dataTables_paginate{float:right} .current{background:#68541a;}.ellipsis{font-size: 25px;}.dataTables_filter{float:right}.border-r-0{border-radius:0px}.btn.btn-primary{ background-color: #897230fa; border-color: #897230fa;}.btn.btn-primary.focus:not(.btn-text), .btn.btn-primary:focus:not(.btn-text), .btn.btn-primary:hover:not(.btn-text):not(:disabled):not(.disabled){background-color: #68541a;border-color: #68541a;}.btn-style2{border-radius: 0px;color: white;border: 1px solid white;background: #27283d;}.select2-container--default .select2-selection--single{background:#fff; border: 1px solid #aaa;}.select2-container--default .select2-selection--single .select2-selection__rendered{color:black}.form-control{border: 1px solid #b5b5b5;}
</style>

<div class="d-flex flex-column-fluid">
<div class="container">
      <div class="card card-custom mt-5">
        <div class="card-body text-center">
          <h1 class="title">Use Profile Survey </h1>
        </div>
      </div>  
    <br>
    <div class="card card-custom">
        <div class="card-body">
        <form id="myform" class="form" method="post" action="{{route('useprofile.store')}}">
        @csrf @method('post')
        <input type="hidden" name="company_id" value="{{$cas->id}}">
        <input type="hidden" name="region_id" value="{{$cas->region_id}}">
       <div class="row form-group">
      
        <div class="col-md-12">
          <div class="row">
               <div class="col-md-3">
                 <label>Substance Name:<br>Madde Adı: </label>
               </div>
               <div class="col-md-9">
                <input type="text" name="substance_name" class="form-control" value="{{$cas->cas_name}}" readonly>
                <input type="hidden" name="preregistration_no" class="form-control" value="{{$cas->preregistration_no}}" readonly>
               </div>
          </div>
        </div>
         
         <div class="col-md-12">
           <div class="row">
              <div class="col-md-3">
                <label>CAS no: <span class="text-danger">*</span></label>
              </div>
              <div class="col-md-9">
                <input type="text" name="cas_no" class="form-control" value="{{$cas->cas_no}}" readonly>
              </div>
         </div>
       </div>
       <div class="col-md-12">
          <div class="row">
               <div class="col-md-3">
                 <label>Name of the Company:<br>Şirket Adı: <span class="text-danger">*</span></label>
               </div>
               <div class="col-md-9">
                <input type="text" name="company_name" class="form-control" value="{{ $cas->company_name }}" readonly>
                <input type="hidden" class="form-control" name="uuid" value="{{$cas->uuid}}">
               </div>
          </div>
        </div>
      </div>
       <div class="row form-group">
         <div class="col-md-12"><h6 class="title">Identified Use Name<br>Tanımlanmış Kullanım Adı</h6></div>
         <table class="table" style="border-color: #172e43;border: 1px solid #172e43;margin: 10px;">
            <thead>
              <tr >
                <th style="width:20%">Identified Use Name<br>Tanımlanmış Kullanım Adı </th>
                <th class="text-center" style="width:40%">Use Code<br>Kullanım Kodu</th>
                <th class="text-center" style="width:40%;" >Remark<br>Notlar</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                  <td><label>Sector of Use : <br> Kullanım Türü :<span class="text-danger">*</span></label></td>
                  <td>
                    <select id="sectorname_0"  name="sectorname_0[]" class="select2-show-search  form-control @error('sectorname_0') is-invalid @enderror" data-validate-field="email">
                      <option value="">Select / Seçiniz</option>
                      @foreach($sectornames as $key => $n)
                        <option value="{{$n->id}}">{{$n->name}}</option>
                      @endforeach
                    </select>
                    @error('sectorname_0')<div class="text-danger">{{ $message }}</div>@enderror
                  </td>
                <td class="text-center" ><a href="#"  class="addmore btn btn-primary"><i class="fas fa-plus-circle"></i></a>
                <input id="mycount" type="hidden" name="count" value="0"> 
              </td>
                
              </tr>
                    <tr>
                      <td><label>Sector of Use(Please select options)<br>Kullanım Sektörü(Lütfen Seçiniz)<span class="text-danger">*</span></label></td>
                      <td>
                        <select  id="sectoruse_0"  name="sectoruse_0[]" class="sectorofuse select2-show-search  form-control  @error('sectoruse_0') is-invalid @enderror"data-validate-field="email" multiple>
                        <option value="">Select / Seçiniz</option>
                        @foreach($sectors as $key => $n)
                        <option value="{{$n->id}}" data-srno="{{$n->srno}}">{{$n->srno}} - {{$n->description}}</option>
                        @endforeach
                      </select>
                      @error('sectoruse_0')<div class="text-danger">{{ $message }}</div>@enderror
                      <input id="sectorofuseother_0" type="hidden" name="sectorofuseother_0" class="sectorofuseother form-control mt-2" placeholder="Enter Details of Others manufacturing of chemical products" >
                      <input id="sectorofuseotherservice_0" type="hidden" name="sectorofuseotherservice_0" class="sectorofuseotherservice form-control mt-2" placeholder="Enter Details of Others manufacture of service" >
                    </td>
                    <td>
                    <textarea name="sector_remark_0" class="form-control" placeholder="Remark/Notlar"></textarea>
                    </td>
                    </tr>
                    <tr>
                      <td> <label>Product category (Please select options)<br>Ürün Kategorisi (Lütfen Seçiniz)<span class="text-danger">*</span></label></td>
                      <td>
                        <select id="productcat_0" name="productcat_0[]" class="productcat select2-show-search  form-control @error('productcat_0') is-invalid @enderror" data-validate-field="email" multiple>
                      <option value="">Select / Seçiniz</option>
                      @foreach($products as $key => $n)
                        <option value="{{$n->id}}">{{$n->srno}} - {{$n->description}}</option>
                        @endforeach
                    </select>
                    @error('productcat_0')<div class="text-danger">{{ $message }}</div>@enderror
                    <input id="productcatother_0" type="hidden" name="productcatother_0" class="productcatother form-control mt-2" placeholder="Enter Details of Others products categories" >
                    
                  </td>
                    <td>
                    <textarea name="product_category_remark_0" class="form-control" placeholder="Remark/Notlar"></textarea>
                    </td>
                    </tr>
                    <tr>
                      <td><label>Process Category (Please select options)<br>Süreç Kategorisi (Lütfen Seçiniz)<span class="text-danger">*</span></label></td>
                      <td> 
                        <select id="processcat_0" name="processcat_0[]" class="processcat select2-show-search  form-control @error('processcat_0') is-invalid @enderror" data-validate-field="email" multiple>
                        <option value="">Select / Seçiniz</option>
                         @foreach($process as $key => $n)
                        <option value="{{$n->id}}" title="{{$n->explanation}}">{{$n->srno}} - {{$n->description}}</option>
                        @endforeach
                    </select>
                    @error('processcat_0')<div class="text-danger">{{ $message }}</div>@enderror
                    <input id="processcatother_0" type="hidden" name="processcatother_0" class="processcatother form-control mt-2" placeholder="Enter Details of Others Process Categories" >
                  </td>
                    <td>
                    <textarea name="process_category_remark_0" class="form-control" placeholder="Remark/Notlar"></textarea>
                    </td>
                    </tr>
                    <tr>
                      <td> <label>Substance in article (Please select options)<br>Eşyanın İçindeki Madde (Lütfen seçiniz)<span class="text-danger">*</span></label></td>
                      <td> 
                        <select id="article_0"  name="article_0[]" class="article select2-show-search  form-control @error('article_0') is-invalid @enderror"  data-validate-field="email" multiple>
                        <option value="">Select / Seçiniz</option>
                        @foreach($articles as $key => $n)
                        <option value="{{$n->id}}">{{$n->srno}} - {{$n->description}}</option>
                        @endforeach
                    </select>
                    @error('article_0')<div class="text-danger">{{ $message }}</div>@enderror
                    <input id="articleother_0" name="articleother_0" type="hidden" class="articleother form-control mt-2" placeholder="Enter Details of Others" >
                  </td>
                    <td>
                    <textarea name="sub_article_remark_0" class="form-control" placeholder="Remark/Notlar"></textarea>
                    </td>
                    </tr>
                    <tr>
                      <td> <label>Environmental Release Categories (Please select options)<br>Çevresel Salınım Kategorisi (Lütfen seçiniz.)<span class="text-danger">*</span></label></td>
                      <td>
                        <select id="envcat_0" name="envcat_0[]" class="envcat select2-show-search  form-control @error('envcat_0') is-invalid @enderror"  data-validate-field="email" multiple>
                        <option value="">Select / Seçiniz</option>
                        @foreach($enviroments as $key => $n)
                        <option value="{{$n->id}}" title="{{$n->explanation}}">{{$n->srno}} - {{$n->description}}</option>
                        @endforeach
                      </select>
                      @error('envcat_0')<div class="text-danger">{{ $message }}</div>@enderror
                    <input id="envcatother_0" type="hidden" name="envcatother_0" class="envcatother form-control mt-2" placeholder="Enter Details of Others" >
                  </td>
                    <td>
                    <textarea name="env_remark_0" class="form-control" placeholder="Remark/Notlar"></textarea>
                    </td>
                    </tr>
                    <tr>
                      <td><label>Technical function of the substance (Please select options)<br>Eşyanın Teknik Fonksiyonu (Lütfen Seçiniz)<span class="text-danger">*</span></label></td>
                      <td>
                        <select id="techfun_0" name="techfun_0[]" class="techfun select2-show-search  form-control @error('techfun_0') is-invalid @enderror" data-validate-field="email" multiple>
                        <option value="">Select / Seçiniz</option>
                        @foreach($technicals as $key => $n)
                        <option value="{{$n->id}}">{{$n->srno}} - {{$n->description}}</option>
                        @endforeach
                      </select>
                      @error('techfun_0')<div class="text-danger">{{ $message }}</div>@enderror
                    <input id="techfunother_0" type="hidden" name="techfunother_0" class="techfunother form-control mt-2" placeholder="Enter Details of Others" >
                  </td>
                    <td>
                    <textarea name="tech_remark_0" class="form-control" placeholder="Remark/Notlar"></textarea>
                    </td>
                    </tr>
                    <tr>
                      <td><label>Use Description (any additional information)<br>Açıklama için (Ek bilgi) </label></td>
                      <td>
                        <textarea name="desc_use_0" class="form-control"></textarea>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <div id="multipletext">

                </div>
              </div>
              <button type="submit" class="btn btn-style1 text-white">Submit</button>
      </form>
      </div>
     </div>
   </div>
  </div>
 </div>
</div>
@endsection
@section('scripts')
<script src="{{asset('admin/lib/select2/js/select2.min.js')}}"></script>
<script type="text/javascript">
    $.ajaxSetup({
  _headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  },
  get headers() {
    return this._headers;
  },
  set headers(value) {
    this._headers = value;
  },
});

function counttotalrow()
{
  var count = $('#mycount').val();
  return count;
}
function checkinarray(data, value)
  {
    for(var i=0; i<data.length; i++){
          var name = data[i];
          if(name == value)
          {
            status = 'Exist';
            return status;
          }
    }
  }
$(document).ready(function() {
  var i = -1;
  var count = counttotalrow();
  $('.addmore').on('click', function(){
      var count = $('#mycount').val();
      $.ajax({
      type: "Post",
      dataType: "json",
      url: '/addmore/'+ count,
      success: function(response){
        console.clear()
        $('#multipletext').append(response.html);
        $('#mycount').val(response.count);
        selectRefresh();
        count = counttotalrow();
        otherinputs(count);
      }
      });
    });
    otherinputs(count);
    $("#multipletext").on("click", ".remove", function() {
        $(this).closest("table").remove();
    });
    $('.select2-show-search').select2({
    tags: true,
    placeholder: "Select / Seçiniz",
    allowClear: true,
  });
  

  })
  function otherinputs(mycount)
  {
    for (let index = 0; index <= mycount; index++) 
    {
      $(document).on("change", "#sectoruse_"+index, function(){
      var data = $(this).val();
      var dataid = $(this).attr('id');
      var status;
      status = checkinarray(data, 1);
      if(status == 'Exist')
      {
          if(dataid == 'sectoruse_'+index)
          {
            $('#sectorofuseother_'+index).prop('type', 'text');
          }
      }
      else{
        if(dataid == 'sectoruse_'+index)
          {
            $('#sectorofuseother_'+index).prop('type', 'hidden');
          }
         
      }
      status = checkinarray(data, 2);
      if(status == 'Exist')
      {
        $('#sectorofuseotherservice_'+index).prop('type', 'text');
      }
      else
      {
        $('#sectorofuseotherservice_'+index).prop('type', 'hidden');
      }
  });
  $(document).on("change", "#productcat_"+index, function(){
      var data = $(this).val();
      var status;
      status = checkinarray(data, 1);
      if(status == 'Exist')
      {
        $('#productcatother_'+index).prop('type', 'text');
      }
      else{
        $('#productcatother_'+index).prop('type', 'hidden');
      }
  })
  $(document).on("change", "#processcat_"+index, function(){
    var data = $(this).val();
      var status;
      status = checkinarray(data, 1);
      if(status == 'Exist')
      {
        $('#processcatother_'+index).prop('type', 'text');
      }
      else{
        $('#processcatother_'+index).prop('type', 'hidden');
      }
  })
  $(document).on("change", "#article_"+index, function(){
    var data = $(this).val();
      var status;
      status = checkinarray(data, 1);
      if(status == 'Exist')
      {
        $('#articleother_'+index).prop('type', 'text');
      }
      else{
        $('#articleother_'+index).prop('type', 'hidden');
      }
  })
  $(document).on("change", "#techfun_"+index, function(){
    var data = $(this).val();
      var status;
      status = checkinarray(data, 1);
      if(status == 'Exist')
      {
        $('#techfunother_'+index).prop('type', 'text');
      }
      else{
        $('#techfunother_'+index).prop('type', 'hidden');
      }
  })

 
}
  }
  function selectRefresh() {
  $('#multipletext .select2-show-search').select2({
    tags: true,
    placeholder: "Select / Seçiniz",
    allowClear: true,
  });
}
</script>
@endsection