@extends('adminlte::page')
@section('content_header')
    @notifyCss
    @notifyJs
@stop
@section('content')
    <div class="row">
      <div class="col-12">
        <div class="card card-primary">
          <div class="card-header">
              <h3 class="card-title">Assign Content</h3>
          </div>
          @include('notify::messages')
          <!-- /.card-header -->
          <div class="card-body">
            <ul class="nav nav-tabs">
                <li class="nav-item"><a class="nav-link active" data-toggle="pill" href="#organisation_form"><b>Assign Content</b></a></li>
                <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#listorgdata"><b>View Assigned Contents</b></a></li>
            </ul>
            <div class="tab-content">
              <div id="organisation_form" class="tab-pane fade active show">
                <!-- form start -->
                <form id="userregform" class="form-horizontal" action="{{URL::to('/assign_content_post')}}" method="post" autocomplete="off" enctype="multipart/form-data">
                    {{ csrf_field() }}
                    <div class="card-body">
                        <div class="col-12">
                            <div class="form-group row">
                                <div class="col-4">
                                    <label for="exampleInputEmail1">Content Type</label><br>
                                    {{$contents->content_type->content_type_name}}
                                    <input type="hidden" name="content_id" id="content_id" value="{{$contents->id}}">
                                </div>
                                <div class="col-4">
                                    <label for="exampleInputEmail1">Content Name</label><br>
                                    {{$contents->content_subject}}
                                </div>
                                <div class="col-4">
                                    <label for="exampleInputEmail1">Description</label><br>
                                    {{$contents->description}}
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-4">
                                    <label for="exampleInputEmail1">Organisation</label>
                                    <select name="organisation_id" id="organisation_id" class="form-control" required onchange="load_department(this.value);load_material_type(this.value);load_content_type(this.value);">
                                        <option value="">Select Organisation</option>
                                        @foreach($organisations as $organisation)
                                            <option value="{{$organisation->id}}">{{$organisation->organisation_name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-4">
                                    <label for="exampleInputEmail1">Department</label>
                                    <select name="department_id" id="department_id" class="form-control" required onchange="load_section(this.value)">
                                        <option value="">Select Department</option>
                                    </select>
                                </div>
                                <div class="col-4">
                                    <label for="exampleInputEmail1">Section</label>
                                    <select name="section_id" id="section_id" class="form-control" required>
                                        <option value="">Select Section</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-4">
                                    <label for="exampleInputEmail1">Material Type</label>
                                    <select name="material_type_id" id="material_type_id" class="form-control" required onchange="load_material_subtype(this.value)">
                                        <option value=""> Select Material Type</option>
                                    </select>
                                </div>
                                <div class="col-4">
                                    <label for="exampleInputEmail1">Material Sub Type</label>
                                    <select name="material_subtype_id" id="material_subtype_id" class="form-control" required onchange="load_topic(this.value)">
                                        <option value=""> Select Material Sub Type</option>
                                    </select>
                                </div>
                                <div class="col-4">
                                    <label for="exampleInputEmail1">Topic</label>
                                    <select name="topic_id" id="topic_id" class="form-control" required>
                                        <option value="">Select Topic</option>
                                    </select>
                                </div>
                            </div>
                            <!--<div class="form-group row">
                                <div class="col-4">
                                    <label for="exampleInputEmail1">Remarks</label>
                                    <textarea name="remarks" id="remarks" class="form-control" required></textarea>
                                </div>
                            </div>-->
                            
                        </div>
                    </div>
                    <!-- /.card-body -->

                    <div class="card-footer">
                      <button type="submit" class="btn btn-primary">Submit</button> &nbsp;&nbsp;&nbsp;
                      <a href="{{URL::to('/assign_content')}}" class="btn btn-danger">Back</a>
                    </div>
                </form>
              </div>
              <div id="listorgdata" class="tab-pane fade style="padding: 10px;">
                <table class="table table-hover table-bordered table-striped datatable" id="dept_details" width="100%">
                    <thead>
                        <tr class="success">
                          <th>Slno</th>
                          <th>Organisation</th>
                          <th>Department</th>
                          <th>Section</th>
                          <th>Material Type</th>
                          <th>Material Subtype</th>
                          <th>Topic</th>
                        </tr>
                    </thead>
                    <tbody>
                      @php
                        $n= 0;
                      @endphp
                      @if(isset($content_assignments))
                        @foreach($content_assignments as $content_assignment)
                          @php
                            $n++;
                          @endphp
                          <tr>
                            <td>{{$n}}</td>
                            <td>{{$content_assignment->organisation->organisation_name}}</td>
                            <td>{{$content_assignment->department->department_name}}</td>
                            <td>{{$content_assignment->section->section_name}}</td>
                            <td>{{$content_assignment->materialtype->material_type_name}}</td>
                            <td>{{$content_assignment->materialsubtype->material_subtype_name}}</td>
                            <td>{{$content_assignment->topic->topic_name}}</td>
                          </tr>
                        @endforeach
                      @else
                        <tr>
                          <td colspan="7">
                              <span style="color: red;">This Content is not assigned yet !!!</span>
                          </td>
                        </tr>
                      @endif
                    </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>        
    </div>
    <script type="text/javascript">
        function load_department(organisation_id)
        {
            $.ajax({
               type:'GET',
               url: "{!! url('get_department/"+organisation_id+"') !!}",
               success:function(data)
               {
                  $('#department_id').empty();
                  $('#department_id').append("<option value=''>Select Department</option>");
                  $.each(data, function(key, element) {
                      $('#department_id').append("<option value='" + key +"'>" + element + "</option>");
                  }); 
               }
            });
        }
        function load_section(department_id)
        {
            $.ajax({
               type:'GET',
               url: "{!! url('get_section/"+department_id+"') !!}",
               success:function(data)
               {
                  $('#section_id').empty();
                  $('#section_id').append("<option value=''>Select Section</option>");
                  $.each(data, function(key, element) {
                      $('#section_id').append("<option value='" + key +"'>" + element + "</option>");
                  }); 
               }
            });
        }
        function load_material_type(organisation_id)
        {
            $.ajax({
               type:'GET',
               url: "{!! url('get_materialtype/"+organisation_id+"') !!}",
               success:function(data)
               {
                  $('#material_type_id').empty();
                  $('#material_type_id').append("<option value=''>Select Material Type</option>");
                  $.each(data, function(key, element) {
                      $('#material_type_id').append("<option value='" + key +"'>" + element + "</option>");
                  }); 
               }
            });
        }
        function load_material_subtype(material_type_id)
        {
            $.ajax({
               type:'GET',
               url: "{!! url('get_materialsubtype/"+material_type_id+"') !!}",
               success:function(data)
               {
                  $('#material_subtype_id').empty();
                  $('#material_subtype_id').append("<option value=''>Select Material Sub Type</option>");
                  $.each(data, function(key, element) {
                      $('#material_subtype_id').append("<option value='" + key +"'>" + element + "</option>");
                  }); 
               }
            });
        }
        function load_topic(material_subtype_id)
        {
            $.ajax({
               type:'GET',
               url: "{!! url('get_topic/"+material_subtype_id+"') !!}",
               success:function(data)
               {
                  $('#topic_id').empty();
                  $('#topic_id').append("<option value=''>Select Topic</option>");
                  $.each(data, function(key, element) {
                      $('#topic_id').append("<option value='" + key +"'>" + element + "</option>");
                  }); 
               }
            });
        }        
    </script>
@stop