@extends('adminlte::page')
@section('content_header')
    <h1>File Routing</h1>
@stop
<script src="//code.jquery.com/jquery.js"></script>
@section('content')
@notifyCss
@notifyJs    
@if ($errors->any())
     <div class="alert alert-danger">
         <ul>
             @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
             @endforeach
        </ul>
    </div>
@endif
@if (session('status'))
    <div class="alert alert-success">
         {{ session('status') }}
    </div>
@endif
@include('notify::messages')
<div class="row">
  <!--row starts-->
  <div class="col-md-12">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">
          {{request()->session()->get('session_fname')}}Route Configuration
        </h3>
      </div>
      <div class="panel-body">
        <div class="container">
          <form class="form-horizontal"  action="{{ url('fileroute') }}" method="post" >
            {{ csrf_field() }}
            <div class="form-group">
              <div class="col-sm-2">
                <label for="filegroup">{{request()->session()->get('session_fname')}} Group <span style="color: red;">*</span> </label>
              </div>
              <div class="col-sm-5">
                <select class="form-control" name="filegroup" id="filegroup" required>
                  <option value="">Select</option> 
                  @foreach($file_group as $file_groups)
                    <option value="{{$file_groups->id}}">{{$file_groups->file_group}}</option> 
                  @endforeach 
                </select>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-2">
                <label for="frouteame">Route Name <span style="color: red;">*</span></label>
              </div>
              <div class="col-sm-5">
                <input class="form-control" id="froutename" type="text"name="froutename" required>
              </div>
            </div>
            <div id="optiondiv">
              <div class="col-md-12">
                <div class="form-group" >
                  <div class="col-sm-1"><b>LEVEL</b></div>
                  <div class="col-sm-3"> <b> DEPARTMENT</b></div>
                  <div class="col-sm-3"> <b> SECTION</b></div>
                  <div class="col-sm-3"> <b> SEAT</b></div>
                  <div class="col-sm-2">
                    <button type="button" class="btn btn-primary btn-xs" id="addmore">Add More</button>
                  </div>
                </div>
              </div>
              <div class="col-md-12">
                <div class="form-group" >
                  <input type="hidden" name="optioncount" id="optioncount" value="1">
                  <div class="col-sm-1">
                    1
                    <input type="hidden" name="level1" id="level1" class="form-control" placeholder="Enter the level" value="1">
                  </div> 
                  <div class="col-sm-3">
                      <select class="form-control" name="department1" id="department1" onchange="fetchsection(1);">
                        <option value="">Select</option>
                        @foreach($departments as $department)
                          <option value="{{$department->id}}">{{$department->dept_name}}</option>
                        @endforeach 
                     </select>
                  </div>
                  <div class="col-sm-3">
                      <select class="form-control" name="section1" id="section1" onchange="fetchseats(1);" >
                        <option value="">Select</option>
                     </select>
                  </div>
                  <div class="col-sm-3">
                      <select class="form-control" name="seat1" id="seat1" onchange="fetchuser(1);">
                        <option value="">Select</option>
                     </select>
                  </div>
                  <div class="col-sm-2">
                      <div id="userdiv1"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="form-group" >
              <button type="submit" name="submit" class="btn btn-primary mb-2 pull-right">Submit</button>
            </div>
          </form>
        </div>             
      </div>
    </div>
    <div class="panel panel-body">
      <table class="table table-bordered" id="froutetable">
        <thead>
            <tr>
                <th>Id</th>
                <th>File_Group</th>
                <th>Route Name</th>
                <th>Updated At</th>
                <th>Actions</th>
            </tr>
        </thead>
      </table>
    </div>
  </div>
</div>    
<script>
$(function() {

    $('#froutetable').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{!! url('froutedatatable') !!}',
        columns: [
            { data: 'id', name: 'id' },
            { data: 'file_group', name: 'file_group' },
            { data: 'froutename', name: 'froutename' },
            { data: 'updated_at', name: 'updated_at' },
            { data: 'action', name: 'action' },
        ],
       
    });
});

function fetchsection(cnt)
  {
    var departmentid=$("#department"+cnt).val();
    $.ajax({
           type:'GET',
           url: "{!! url('getdepartmentsection/"+departmentid+"') !!}",
           success:function(data)
           {
              $('#section'+cnt).empty();
              $('#section'+cnt).append("<option value=''>Select Sections</option>");
              $.each(data, function(key, element) {
                  $('#section'+cnt).append("<option value='" + key +"'>" + element + "</option>");
              }); 
           }
        });
  }

  function fetchseats(cnt)
  {
      var secid=$("#section"+cnt).val();
      $.ajax({
           type:'GET',
           url: "{!! url('getsectionseat/"+secid+"') !!}",
           success:function(data)
           {
              $('#seat'+cnt).empty();
              $('#seat'+cnt).append("<option value=''>Select Seat</option>");
              $.each(data, function(key, element) {
                  $('#seat'+cnt).append("<option value='" + key +"'>" + element + "</option>");
              }); 
           }
        });
  }
  
  function fetchuser(cnt)
  {
      var secid=$("#seat"+cnt).val();
      $.ajax({
           type:'GET',
           url: "{!! url('getseatuser/"+secid+"') !!}",
           success:function(data)
           {
              document.getElementById("userdiv"+cnt).innerHTML=data;
           }
        });
  }

$('#addmore').click(function(){
      var optioncount=$('#optioncount').val();
      optioncount++;
      var fieldHTML='<div class="col-sm-12"><div class="form-group" ><div class="col-sm-1">'+optioncount+'<input type="hidden" name="level'+optioncount+'" id="level'+optioncount+'" class="form-control" placeholder="enter the level" value='+optioncount+'></div><div class="col-sm-3"><select name="department'+optioncount+'" id="department'+optioncount+'" class="form-control" placeholder="department" onchange="fetchsection('+optioncount+');"><option value="">Select</option>@foreach($departments as $department) <option value="{{$department->id}}">{{$department->dept_name}}</option> @endforeach </select></div><div class="col-sm-3"><select name="section'+optioncount+'" id="section'+optioncount+'" class="form-control" placeholder="section"  onchange="fetchseats('+optioncount+');"><option value="">Select</option></select></div><div class="col-sm-3"><select name="seat'+optioncount+'" id="seat'+optioncount+'" class="form-control" placeholder="seat"  onchange="fetchuser('+optioncount+');"><option value="">Select</option></select> </div> <div class="col-sm-1"><div id="userdiv'+optioncount+'"></div></div> </div></div>';
      $('#optiondiv').append(fieldHTML);
      $('#optioncount').val(optioncount);
    }); 
</script>
@stop