@extends('adminlte::page')
@section('content_header')
    <h1>Tapal 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_tname')}}Route Configuration
                        </h3>
           </div>

                <div class="panel-body">
                    <div class="container">
                     <form class="form-horizontal"  action="{{ url('tapalroute') }}" method="post" >
                         {{ csrf_field() }}
                        <div class="form-group">
                            <label for="tapalsubject">{{request()->session()->get('session_tname')}} Subject </label>
                              <select class="form-control" name="tapalsubject" id="subject">
                                  <option value="0"placeholder="">Select Subject</option> 
                                    @foreach($sub as $subj)
                                    <option value="{{$subj->id}}"placeholder="">{{$subj->subject}}</option> 
                                    @endforeach  
                                    </select>
                               
                        </div>
                        <div class="form-group">
                              <label for="username">User Name:</label>
                                <input class="form-control" id="username"value="{{$name}}"type="text"name="username">
                              </div>
                                    
                          <div class="form-group">
                              <label for="username">Route Name:</label>
                                <input class="form-control" id="routename" type="text"name="routename">
                              </div>

                         
                              <div id="optiondiv">
                                <div class="col-md-12">
                                 <div class="form-group" >
                                    <div class="col-sm-4"><b>LEVEL</b></div>
                                    <div class="col-sm-4"><b>OFFICE</b></div>
                                    <div class="col-sm-4"> <b> SEAT</b></div>
                                     <button type="button" class="btn btn-primary btn-xs pull-right" id="addmore">Add More</button>
                                 </div>
                                </div>
                             <div class="col-md-12">
                               <div class="form-group" >
                                  <input type="hidden" name="optioncount" id="optioncount" value="1">
                                  <div class="col-sm-4">
                                     <input type="text" name="level1" id="level1" class="form-control" placeholder="Enter the level" >
                                  </div>
                                 @php print("<script>var officeidarray=[]; var officenamearray=[];</script>"); @endphp 
                                    @php $i=0; @endphp
                                   @foreach($offz as $off)

                                    @php 
                                   

                                    print("<script>officeidarray.push($off->id); officenamearray.push('$off->office_name');</script>");
                                    
                                   $i++; @endphp

                                    @endforeach
                                 <div class="col-sm-4">
                                     <select class="form-control" name="office1" id="office1" onchange="fetchseats(1)" >
                                        <option value="">Select an Office</option>
                                        @foreach($offz as $off)

                                       <option value="{{$off->id}}">{{$off->office_name}}</option>
                                       @endforeach
                                       
                                     </select>
                                </div>
                                <div class="col-sm-4">
                                    <select class="form-control" name="seat1" id="seat1">
                                       <option value=""placeholder="seat"></option>
                                   </select>
                                </div>
                              </div>
                                </div>
                            </div>
                                <button type="submit" class="btn btn-primary mb-2">Submit</button>
                          </form>
                       </div>             
            </div>
         </div>
     </div>
     </div>
            <!--md-12 ends-->
      <!--Table view for Tapal/File Forwarding Routes-->
<table class="table table-bordered" id="routetable">
        <thead>
            <tr>
                <th>Id</th>
                <th>Subject Name</th>
                <th>Route Name</th>
                <th>Updated At</th>
                <th>Actions</th>
            </tr>
        </thead>
    </table>

<script>
$(function() {

    $('#routetable').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{!! url('routetabledata') !!}',
        columns: [
            { data: 'id', name: 'id' },
            { data: 'subject', name: 'subject' },
            { data: 'routename', name: 'routename' },
            { data: 'updated_at', name: 'updated_at' },
            { data: 'action', name: 'action' }
        ],
        /*
        initComplete: function () {
            this.api().columns([1,2,3]).every( function () {
                var column = this;
                var select = $('<select><option value="">Select</option></select>')
                    .appendTo( $(column.header()))
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search( val ? val : '', true, false )
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) 
                {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        } */     
    });
});

</script>




<script type="text/javascript">
function fetchseats(cnt)
{

  var officeid=$("#office"+cnt).val();
        $.get("{{ url('getseat')}}",
        { option: officeid },
        function(data) {
            
            $('#seat'+cnt).empty();
            $('#seat'+cnt).append("<option value='0'>Select a seat</option>");
            $.each(data, function(key, element) {
             // alert(key);
                $('#seat'+cnt).append("<option value='" + key +"'>" + element + "</option>");
            });
        });
    
}

  $('#addmore').click(function(){
      var optioncount=$('#optioncount').val();
      optioncount++;
      var fieldHTML='<div class="col-sm-12"><div class="form-group" ><div class="col-sm-4"><input type="text" name="level'+optioncount+'" id="level'+optioncount+'" class="form-control" placeholder="enter the level" ></div><div class="col-sm-4"><select name="office'+optioncount+'" id="office'+optioncount+'" class="form-control" placeholder="office" onchange="fetchseats('+optioncount+')"><option value="">Select an Office</option>';
      for(i=0;i<officeidarray.length;i++)
      {
        fieldHTML=fieldHTML+'<option value='+officeidarray[i]+'>'+officenamearray[i]+'</option>';
      }
      fieldHTML=fieldHTML+'</select></div> <div class="col-sm-4"><select name="seat'+optioncount+'" id="seat'+optioncount+'" class="form-control" placeholder="seat" ></div> </div></div>';
      $('#optiondiv').append(fieldHTML);
      $('#optioncount').val(optioncount);
    }); 






</script>

@stop