@extends('layouts.member')
@section('body')
@if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

<div class="table-responsive">
    <h2>ขนาดเสื้อใน</h2>
    <form action="/admin/createRecord" method="post">
        {{csrf_field()}}
        <div class="form-group">
            <label for="name">top bust</label>
            <select class="form-control s1"    name="s1" id="s1" >
              @foreach($floorset as $row)
                  <option value="{{$row->data1}}">{{$row->data1}}</option>
              @endforeach
            </select>
            <label for="name">Under bust</label>
            <select class="form-control s2" name="s2" id='s2'>
            </select>
            <label for="name">Size</label>
            <input class="form-control" type="text" name="size" id='size' value="" readonly>
        </div>
        <button type="submit" name="submit" class="btn btn-success">เพิ่มรายการ</button>
    </form>



</div>
<div class="table-responsive my-2">
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th scope="col">No.</th>
        <th scope="col">ประเภท</th>
        <th scope="col">size</th>
        <th scope="col">value 1</th>
        <th scope="col">value 2่</th>
        
      </tr>
    </thead>
@if($errors->count()>0)
    <tbody>
      @foreach($errors as $records)
      <tr>
        <td></td>
      </tr>
      @endforeach
    </tbody>
  </table>
{{$errors->links()}}
</div>
@endif


<script type="application/javascript">

    $('.s1').change(function(){
      if($(this).val()!=''){
        var select=$(this).val();
        var _token=$('input[name="_token"]').val();
        $.ajax({
                  url:"{{route('dropdown.floorset')}}",
                  method:"POST",
                  data:{select:select,_token},
                  success:function(result){
                    $('.s2').html(result);
                  },
                  error: function(jqXHR, textStatus, errorThrown) {
                      alert('An error occurred... Look at the console (F12 or Ctrl+Shift+I, Console tab) for more information!');

                      $('#result').html('<p>status code: '+jqXHR.status+'</p><p>errorThrown: ' + errorThrown + '</p><p>jqXHR.responseText:</p><div>'+jqXHR.responseText + '</div>');
                      console.log('jqXHR:');
                      console.log(jqXHR);
                      console.log('textStatus:');
                      console.log(textStatus);
                      console.log('errorThrown:');
                      console.log(errorThrown);
                  }
                })
      }
  })


  $('.s2').change(function(){
    if($(this).val()!=''){
      document.getElementById("size").value = $(this).val();
    }
  })

</script>

@endsection