@extends('layouts/ums_layout')
@section('title', '| New Activities')
@section('content')
<style type="text/css">
  .sectionRequiredColor{border: 1px solid red;}
  .capacityRequiredColor{border: 1px solid red;}
</style>

<div class="row add-data-form" id="addPanel" style="padding-bottom: 1%;display: none;">
  <div class="col-md-12">
    <div class="col-md-2"></div>
    <div class="col-md-8 fullbody">
      <div class="viewTitle" style="border-bottom: 1px solid white;">
        <a href="#" id="sectionListButton" class="btn btn-info pull-right sectionListButton"><i class="glyphicon glyphicon-th-list viewIcon">
        </i>Section List</a>
      </div>
      <div class="panel panel-default panel-border">
        <div class="panel-heading">
          <div class="panel-title">Section Settings</div>
        </div>
        <div class="panel-body">
          <div class="row">
            <div class="col-md-12">
              <div class="col-md-8">
                {!! Form::open(array('url' => '', 'id' => 'sectionSettingsFrom', 'role' => 'form', 'class'=>'form-horizontal form-groups')) !!}
                
                {{--   <div class="form-group">
                  {!! Form::label('employeeId', 'Select Trimester:', ['class' => 'col-sm-3 control-label']) !!}
                  <div class="col-sm-9">
                    <select class ="form-control" id = "trimesterId" name="trimesterId">
                      <option value="">Select one</option>
                      @foreach($trimesters as $trimester)
                      <option value="{{$trimester->id}}">{{$trimester->name}}  {{$trimester->year}}</option>
                      @endforeach
                    </select>
                    <p id='employeeIde' style="max-height:3px;"></p>
                  </div>
                </div> --}}

                <div class="form-group">
                  {!! Form::label('employeeId', 'Select program', ['class' => 'col-sm-3 control-label']) !!}
                  <div class="col-sm-9">
                    <select class ="form-control" id ="programtId" name="programId">
                      <option value="">Select one</option>
                      @foreach($programs as $program)
                      <option value="{{$program->id}}">{{$program->fullname}}</option>
                      @endforeach
                    </select>
                    <p id='employeeIde' style="max-height:3px;"></p>
                  </div>
                </div>

                <div class="form-group">
                  {!! Form::label('courseId', 'Course:', ['class' => 'col-sm-3 control-label']) !!}
                  <div class="col-sm-9">
                   <select class ="form-control" id = "courseId" name="courseId" required="required">
                    <option value="0">Please Choose Your Course</option>

                  </select>
                  <p id='programId' style="max-height:3px;"></p>
                </div>
              </div>

              <div class="form-group">
                {!! Form::label('Total Students', 'Total Students:', ['class' => 'col-sm-3 control-label']) !!}
                <div class="col-sm-9">
                  {!! Form::text('totalProgramStudent', $value = null, ['class' => 'form-control', 'id' => 'totalProgramStudent', 'disabled'=>'true','type' => 'text', 'placeholder' => 'Total Students']) !!}
                  <p id='namee' style="max-height:3px;"></p>
                </div>
              </div>

              <div class="form-group sectionPart">
                {!! Form::label('Add Section Name', 'Add Section Name:', ['class' => 'col-sm-3 control-label']) !!}
                <div class="col-sm-4">
                  {!! Form::text('sectionName[]', $value = null, ['class' => 'form-control','type' => 'text', 'required'=>'true', 'placeholder' => 'Section Name']) !!}
                  {!! Form::hidden('sectionId[]', $value = null, ['class' => 'form-control','type' => 'text', 'required'=>'true', 'placeholder' => 'Section Name']) !!}
                  <p class='sectionRequiredClass' style="max-height:3px;color:red;display: none;">Please give correct input</p>
                </div>
                <div class="col-sm-4">
                  {!! Form::number('sectionCapacity[]', $value = null, ['class' => 'form-control', 'id' => 'minCgpa', 'type' => 'text', 'placeholder' => 'Total Capacity']) !!}
                  <p class='sectionCapacityRequiredClass' style="max-height:3px;color:red;display: none;">Please give correct input</p>
                </div>
              </div>

              <div class="col-sm-3 AddBefore" style="float: right;">
                <a id="addSectionButton" class="btn btn-info">Add More Section</a>
              </div> 
              <div class="form-group">
                {!! Form::label('submit', ' ', ['class' => 'col-sm-3 control-label']) !!}
                <div class="col-sm-9 text-right">
                  {!! Form::button('Save', ['id' => 'addStudentSettings', 'class' => 'btn btn-info']) !!}
                  {{ Form::reset('Reset', ['class' => 'btn btn-warning']) }}
                  <a href="#" class="btn btn-danger closeBtn">Close</a>
                  <span id="success" style="color:green; font-size:16px;" class="pull-right"></span>
                </div>
              </div>
              {!! Form::close()  !!}
            </div>
            <div class="col-md-4 emptySpace vert-offset-top-4"><img src="{{ URL::to('/') }}/images/image15.png" width="90%" height="" style="float:right"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="footerTitle" style="border-top:1px solid white"></div>
  </div>
  <div class="col-md-2"></div>
</div>
</div>


<div class="row" id="tableData">                        
  <div class="col-md-12">
    <div class="panel panel-default" style="background-color:#708090;">
      <div class="panel-heading" style="padding-bottom:0px">
        <a href="#" id="addViewBtn" class="btn btn-info pull-right addViewBtn"><i class="glyphicon glyphicon-th-list viewIcon">
        </i>Add Section Settings </a>
        <h3  style=" text-align: center; font-family: Antiqua; letter-spacing: 2px; color: white;">Section Settings</h3>
      </div>
      <div class="panel-body panelBodyView"> 
        <div>
          <script type="text/javascript">
            jQuery(document).ready(function($)
            {
              $("#umsActivityView").dataTable().yadcf([

                ]);
            });
          </script>
        </div>
        <table class="table table-striped table-bordered" id="umsActivityView">
          <thead>
            <tr>
              <th width="32">SL#</th>
              <th>Trimester Names</th>
              <th>Course Name</th>
              <th>Section Total Students</th>
              <th>Sections</th>
              <th>Sub Sections</th>
              <th class="" width="80">Actions</th>
            </tr>
            {{ csrf_field() }}
          </thead>
          <tbody>
                        @foreach($sectionLists as $section) 
            <tr class="item{{$section->id}}">
              <td class="text-center slNo">{{++$no}}</td>
              <td style="text-align: left; padding-left: 5px;">{{$section->trimesterName}}({{$section->year}})</td>
              <td style="text-align: left; padding-left: 5px;">{{$section->title}}</td>
              <td>
                @php
                if($section->sectionName)
                {
                  $sectionNameArray = explode(",", $section->sectionName);
                  $sectionCapacityArray = explode(",", $section->sectionCapacity);
                  if(count($sectionNameArray)>1)
                  {
                    for($i=0;$i<count($sectionNameArray);$i++)
                    {
                      echo $sectionNameArray[$i].'='.$sectionCapacityArray[$i].'<br>';
                    }
                  }
                  else
                  {
                    echo $section->sectionName;
                  }
                }
                else
                {
                  echo 'No Section Found';
                }
                @endphp
              </td>
              <td style="text-align: left; padding-left: 5px;">{{$section->totalCapacity}}</td>
              <td>
                @php
                $subSections = json_decode($section->subSectionIds);
                if($subSections)
                {
                  foreach ($subSections as $value) 
                  {
                    echo $value->sectionName.'='.$value->sectionCapacity.'<br>';
                  }
                }
                else
                {
                  echo 'No Sub Section Found';
                }
                @endphp
              </td>
              <td class="text-center" width="80">
                <a data-courseid="{{$section->courseId}}" {{-- data-trimesterId="{{$section->trimesterId}}" --}} href="javascript:;" class="edit-modal">
                  <span class="glyphicon glyphicon-edit"></span>
                </a>&nbsp;
                <a id="deleteIcone" href="javascript:;" class="delete-modal" data-programId="{{$section->programId}}"{{--  data-trimesterId="{{$section->trimesterId}}" --}}>
                  <span class="glyphicon glyphicon-trash"></span>
                </a>
              </td>
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

@include('dataTableScript')
@endsection

<script src="{{asset('js/jquery-1.11.1.min.js')}}"></script>

<script type="text/javascript">
  $(document).ready(function(){
    $("#courseId").change(function(){
     $.ajax({
      url: './getCourseStudents/'+ $(this).val(),
      type: "GET",
      dataType: "json",
      success:function(data) {
       $("#totalProgramStudent").val(data);
     }
   });
   });

    var sectionArray = {
      sections :[],
      details:{}
    };
    var deleteIds = [];
    $("#addSectionButton").click(function(){
      checkValidation();
    });

    function checkValidation()
    {
      var found = true;
      var totalStudent = $("#totalProgramStudent").val();
      var tempTotalStudent = 0;

      $('input[name="sectionName[]"]').map(function () {
        if(this.value=="")
        {
          $(this).addClass("sectionRequiredColor");
          $(this).next('p').show();
          found = false;
          return false;
        }
        else
        {
         $(this).removeClass("sectionRequiredColor");
         $(this).next('p').hide();
         found = true;
         $('input[name="sectionCapacity[]"]').map(function () {
          if(this.value=="")
          {
            $(this).addClass("capacityRequiredColor");
            $(this).next('p').show();
            found = false;
            return false;
          }
          else
          {
            $(this).removeClass("capacityRequiredColor");
            $(this).next('p').hide();
            found = true;
          }
        }).get();
       }
     }).get();

      if(found === true)
      {
        $('input[name="sectionCapacity[]"]').map(function () {
          tempTotalStudent = parseInt(tempTotalStudent)+ parseInt(this.value);
        }).get();

        if(tempTotalStudent>totalStudent)
        {
          swal("Students Exceed","Section Exceeds Total Students","error");
          return false;
        }
        else
        {
          var html = '<div class="form-group sectionPart"><label for="Add Section Name" class="col-sm-3 control-label"></label><div class="col-sm-4"><input class="form-control sectionControll" type="text" placeholder="Section Name" name="sectionName[]"> <input type="hidden" name="sectionId[]"> <p class="sectionRequiredClass" style="max-height:3px;color:red;display: none;">Please give correct input</p></div><div class="col-sm-4"><input class="form-control capacityControl" id="minCgpa" type="number" placeholder="Total Capacity" name="sectionCapacity[]"> <p class="sectionCapacityRequiredClass" style="max-height:3px;color:red;display: none;">Please give correct input</p></div><div class="col-sm-1" style="margin-top: 8px;"><a style="color:red" class="deleteIcone" href="#"><span data-deleteId="" data-id="2" class="glyphicon glyphicon-trash"></span></a></div></div>';
          $(html).insertBefore(".AddBefore");
          return true;
        }       
      }
    }

    $("#sectionSettingsFrom").on('click', 'span', function(event) 
    {
      var deleteId = $(this).attr('data-deleteId');
      deleteIds.push(deleteId);
      $(this).closest('.form-group').remove();
    });

    $(".edit-modal").click(function(){
      var html= '';
      $("#tableData").hide();
      $("#addPanel").show();
      $("#sectionSettingsFrom")[0].reset();
      var input = '';
      input +='<input type="hidden" name="action" id="action" value="update">';
      $('#sectionSettingsFrom').append(input);
      $(".panel-title").html('Update Section Settings');
      // $("#sectionSettingsFrom").attr("action", "{{url('/ums/updateSectionSetting')}}");
      $("#addStudentSettings").text('Update');
      $(".panel-title").html('Update');
      //var sectionProgramId = $(this).attr('data-programid');
      var sectionProgramId = $(this).attr('data-courseid');
      //var sectionTrimesterId = $(this).attr('data-trimesterId');

      $.ajax({
        // url: './getProgramSections/'+ sectionProgramId+'/'+sectionTrimesterId,
        url: './getProgramSections/'+ sectionProgramId,
        type: "GET",
        dataType: "json",
        success:function(data) {

          //$('select[name="trimesterId"]').val(sectionTrimesterId);
          //$('select[name="programId"]').val(sectionProgramId);
          $('select[name="courseId"]').val(sectionProgramId);
          $('input[name="totalProgramStudent"]').val(data.programTotalStudents);

          $.each(data.programSections, function(index, val) {
            if(index==0)
            {
             $('input[name="sectionName[]"]').val(val.sectionName);
             $('input[name="sectionCapacity[]"]').val(val.sectionCapacity);
             $('input[name="sectionId[]"]').val(val.id);
           }
           else
           {
            var html = '<div class="form-group sectionPart"><label for="Add Section Name" class="col-sm-3 control-label"></label><div class="col-sm-4"><input class="form-control sectionControll" id="minCgpa" type="text" placeholder="Section Name" name="sectionName[]" value="'+val.sectionName+'"><input type="hidden" name="sectionId[]" value="'+val.id+'"> <p class="sectionRequiredClass" style="max-height:3px;color:red;display: none;">Please give correct input</p></div><div class="col-sm-4"><input class="form-control capacityControl" id="minCgpa" type="number" placeholder="Total Capacity" name="sectionCapacity[]" value="'+val.sectionCapacity+'"> <p class="sectionCapacityRequiredClass" style="max-height:3px;color:red;display: none;">Please give correct input</p></div><div class="col-sm-1" style="margin-top: 8px;"><a style="color:red" class="deleteIcone" href="#"><span data-deleteId="'+val.id+'" data-id="2" class="glyphicon glyphicon-trash"></span></a></div></div>';
            $(html).insertBefore(".AddBefore");
          }
        });
        }
      });
    });

    $("#addStudentSettings").click(function(){
     sectionArray['sections'].length = 0 ;
     sectionArray.length = 0;
     $('input[name="sectionName[]"]').each(function(index,val) {
      var tempArray = {};
      tempArray.sectionName = $(this).val();
      tempArray.sectionCapacity = $('input[name="sectionCapacity[]"]').eq(index).val();
      tempArray.sectionId = $('input[name="sectionId[]"]').eq(index).val();
      sectionArray['sections'].push(tempArray);
    });
     sectionArray.courseId = $('select[name="courseId"]').val();
     //sectionArray.trimesterId = $('select[name="trimesterId"]').val();
     sectionArray.programId = $('select[name="programId"]').val();
     var action = $('input[name="action"]').val();
      // console.log(action);return false;

      if(action=="update")
      {
        console.log(sectionArray);
        console.log(deleteIds);
        $.ajax({
          type: 'post',
          url: './udpateSectionSetting',
          data:  {
            'data':sectionArray,
            'deleteIds':deleteIds
          },
          success: function(data){
           var dataResult = JSON.parse(data);
           console.log(dataResult.status);
           if(dataResult.status===true)
           {
            swal("200",dataResult.message,"success");
            location.reload();
          }
          else
          {
            swal(dataResult.heading,dataResult.message,"warning");
          }
        } 
      });
      }
      else
      {
        $.ajax({
          type: 'post',
          url: './saveSectionSetting',
          data:  {
            'data':sectionArray
          },
          success: function(data){
           var dataResult = JSON.parse(data);
           if(dataResult=="success")
           {
            swal("Success","Section Added Successfully","success");
            location.reload();
          }
        } 
      });
      }
    });

    $("#addViewBtn").click(function(){
      $("#tableData").hide();
      $("#addPanel").show();
      $("#sectionSettingsFrom")[0].reset();
      // $("#sectionSettingsFrom").attr("action", "{{url('/ums/saveSectionSetting')}}");
      $("#addStudentSettings").text('Submit');
      $(".panel-title").html('Submit');
    });

    // $("#programtId").change(function(event){
    //   var programId = $("#programtId").val();
    //   var trimesterId = $("#trimesterId").val();
    //   $.ajax({
    //     type: 'post',
    //     url: "./courseFilteringByProgram",
    //     data: {programId: programId,trimesterId: trimesterId},
    //     success: function(data) {
    //       console.log(data);
    //       $('#courseId').empty();
    //       $("#courseId").append("<option value=''>Please Select Course</option>");
    //       $.each(data, function(key,value){                   
    //         $("#courseId").append("<option value='"+value.id+"'>"+value.title+"</option>");
    //       });
    //     },
    //     error: function(argument) {
    //     }
    //   });
    // });



    $("#programtId").change(function(event){
      var programId = $("#programtId").val();
      //var trimesterId = $("#trimesterId").val();
      $.ajax({
        type: 'post',
        url: "./courseFilteringByProgramName",
        //data: {programId: programId,trimesterId: trimesterId},
        data: {programId: programId},
        success: function(data) {
          console.log(data);
          $('#courseId').empty();
          $("#courseId").append("<option value=''>Please Select Course</option>");
          $.each(data, function(key,value){                   
            $("#courseId").append("<option value='"+value.id+"'>"+value.title+"</option>");
          });
        },
        error: function(argument) {
        }
      });
    });


    $("#sectionListButton").click(function(){
      $("#tableData").show();
      $("#addPanel").hide();
    });

    $(".closeBtn").click(function(){
     $("#tableData").show();
     $("#addPanel").hide();
   });

  });
</script>