@extends('layouts/ums_layout')
@section('title', '| New Registration Fee')
@section('content')

<style type="text/css">
@keyframes check {0% {height: 0;width: 0;}
25% {height: 0;width: 10px;}
50% {height: 20px;width: 10px;}
}
.checkbox{background-color:#fff;display:inline-block;height:20px;margin:0 .25em;width:25px;border-radius:4px;border:1px solid #ccc;float:right}
.checkbox span{display:block;height:28px;position:relative;width:28px;padding:0}
.checkbox span:after{-moz-transform:scaleX(-1) rotate(135deg);-ms-transform:scaleX(-1) rotate(135deg);-webkit-transform:scaleX(-1) rotate(135deg);transform:scaleX(-1) rotate(135deg);-moz-transform-origin:left top;-ms-transform-origin:left top;-webkit-transform-origin:left top;transform-origin:left top;border-right:4px solid #fff;border-top:4px solid #fff;content:'';display:block;height:20px;left:0px;position:absolute;top:10px;width:10px}
.checkbox span:hover:after{border-color:#999}
.checkbox input{display:none}
.checkbox input:checked + span:after{-webkit-animation:check .8s;-moz-animation:check .8s;-o-animation:check .8s;animation:check .8s;border-color:#555}
.checkbox input:checked + .default:after{border-color:#444}
.checkbox input:checked + .primary:after{border-color:#2196F3}
.checkbox input:checked + .success:after{border-color:#8bc34a}
.checkbox input:checked + .info:after{border-color:#3de0f5}
.checkbox input:checked + .warning:after{border-color:#FFC107}
.checkbox input:checked + .danger:after{border-color:#f44336}
.card-header{height: 20px;background: grey;color: white;text-align: center;padding: 1px;}
</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="{{url('ums/registrationFeeSettings/')}}" class="btn btn-info pull-right addViewBtn"><i class="glyphicon glyphicon-th-list viewIcon">
       </i>Registration Fee List</a>
     </div>
     <div class="panel panel-default panel-border">
      <div class="panel-heading">
        <div class="panel-title">Registration Fee 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' => 'addForm', 'role' => 'form', 'class'=>'form-horizontal form-groups')) !!}


           {{--   <div class="form-group">
            {!! Form::label('name', 'Select Trimester:', ['class' => 'col-sm-3 control-label']) !!}
            <div class="col-sm-9">
              <select class ="form-control" name="trimesterId" id="trimesterId">
                <option value="">Select Trimester</option>
                @foreach($trimesters as $trimester)
                <option  value="{{$trimester->id}}">{{$trimester->name}} {{$trimester->year}}</option>
                @endforeach
              </select>
              <p id='trimesterIde' style="display:none;max-height:3px;color:red"> Please Select Trimester</p>
            </div>
          </div> --}}
          <div class="form-group">
            {!! Form::label('programId', 'Program Name:', ['class' => 'col-sm-3 control-label']) !!}
            <div class="col-sm-9">
             <select class ="form-control" id = "programId" name="programId" required="required">
              <option value="">Select Program Name</option>
              @foreach($program as $programs)
              <option value="{{$programs->id}}">{{$programs->fullname}}</option>
              @endforeach
            </select>
            <p id='programIde' style="max-height:3px;"></p>
          </div>
        </div>
        {{--   <input type="hidden" id="id" name="id" value=""/> --}}

        <div class="form-group">
          {!! Form::label('name', 'Select Fee Type:', ['class' => 'col-sm-3 control-label']) !!}
          <div class="col-sm-9" style="display: none;"  id="feeTypetList">
            <div class="card-header">Select Fee Types</div>
            <ul class="list-group list-group-flush">
              @foreach($fees as $fee)
              <li id="1" class="list-group-item">{{$fee->name}}
                <label class="checkbox">
                  <input class="checkStudents" name="feeCheck[]" value="{{$fee->id}}" type="checkbox">
                  <span class="success"></span>
                </label> 
                <input data-rowid = "" style="float: right;padding-right: -5px;margin-right: 8px;text-align: center;" class="feeValues" id="{{$fee->id}}" name="feeValues[]" value="{{$fee->amount}}" type="text">


              </li>
              @endforeach
            </ul>
          </div>
        </div>


        <div class="form-group">
          {!! Form::label('description', 'Description:', ['class' => 'col-sm-3 control-label']) !!}
          <div class="col-sm-9">
            {!! Form::textarea('description', $value = null, ['class' => 'form-control','name' => 'description', 'id' => 'description', 'rows' => 2, 'cols' => 20, 'placeholder' => 'Enter Description']) !!}
            <p id='description' style="max-height:3px;"></p>
          </div>
        </div>

        <div class="form-group">
          {!! Form::label('submit', ' ', ['class' => 'col-sm-3 control-label']) !!}
          <div class="col-sm-9 text-right">
            {!! Form::button('submit', ['id' => 'add', 'class' => 'btn btn-info']) !!}
            {{ Form::reset('Reset', ['class' => 'btn btn-warning']) }}
            <a href="{{url('#')}}" 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 Registration Fee</a>
        <h3  style=" text-align: center; font-family: Antiqua; letter-spacing: 2px; color: white;">Registration Fee</h3>
      </div>
      <div class="panel-body panelBodyView"> 

        <table class="table table-striped table-bordered" id="regFeeList">
          <thead>
            <tr>
              <th width="32">SL#</th>
              <th>Program Name</th>
              <th>Total Fees</th>
              <th>Actions</th>
            </tr>

          </thead>
          <tbody>

          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

@endsection 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js" defer></script>



<script type="text/javascript">
  $(document).ready(function(){
    var regFeeList = $('#regFeeList').DataTable({
     processing: true,
     serverSide: true,
     ajax: '{{ url('ums/regFeeList/') }}',
     columns: [
     { data: null, "sortable": false,
     render: function (data, type, row, meta) {
      return meta.row + meta.settings._iDisplayStart + 1;
    }},
    {data: 'name', name: 'name' },
    {data: 'totalAmount', name: 'totalAmount' },
    {data: 'action', name: 'action', orderable: false, searchable: false}
    ]
  });
    var oldIds = [];
    $('#regFeeList').on("click",".edit",function(){
      oldIds.length = 0;
      //var programId = $(this).attr('data-programId');
      var programId = $(this).attr('id').split('-')[1];
      //alert(programId);
      // var trimesterId = $(this).attr('data-trimesterId');
      var description = $(this).attr('data-description');
      //alert(description);
      var input ='<input type="hidden" name="action" id="action" value="update">';
      $('#addForm').append(input);

      $('#footer_action_button_dismis').text(" Close");
      $('#footer_action_button_dismis').addClass('glyphicon glyphicon-remove');
      $('.deleteContent').hide();
      $('.form-horizontal').show();
      $.ajax({
        url: './getRegistrationFee/'+ programId,
        type: "GET",
        dataType: "json",
        success:function(data) {
          $('textarea[name="description"]').val(description);
          $('select[name="programId"]').val(programId);
          $.each(data, function( index, value ) {
            $(":checkbox[value='"+value.feeId+"']").prop("checked","true");

            $('#'+value.feeId).val(value.amount);
            $('#'+value.feeId).attr('data-rowid',value.id);
            oldIds.push(value.feeId);
          });

          $("#feeTypetList").show();
          $("#add").text('Update');
          $(".panel-title").html('Update Registration Fees');
          $("#addPanel").show();
          $("#tableData").hide();
        }
      });
    });

    // $('#regFeeList').on("click",".edit",function(){
    //   oldIds.length = 0;
    //   var editId = $(this).attr('data-programId');

    //   $.ajax({
    //     type: 'get',
    //     url:  '{{ url('ums/getRegistrationFee/') }}/'+editId,
    //     success: function(data) {
    //       //alert(programId);
    //       // var dataResult = JSON.parse(data);
    //       console.log(data);

    //       $('textarea[name="description"]').val(description);
    //       $('select[name="programId"]').val(programId);
    //       $.each(data, function( index, value ) {
    //         $(":checkbox[value='"+value.feeId+"']").prop("checked","true");

    //         $('#'+value.feeId).val(value.amount);
    //         $('#'+value.feeId).attr('data-rowid',value.id);
    //         oldIds.push(value.feeId);
    //       });

    //       $("#feeTypetList").show();
    //       $('input[name="programId"]').val(data.programId);

    //       $("#addForm").attr("action", "{{url('/ums/updateAcademicSchedule')}}");
    //       $("#saveButton").val('Update');
    //       $(".panel-title").html('Update Academic Schedule');
    //       $("#addPanel").show();
    //       $("#tableData").hide();
    //     }
    //   });
    // });


    $("#startDate").datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: 'yy-mm-dd',

    }); 

    $("#programId").on("change",function(){
      $("#feeTypetList").show();
    });

    $("#add").click(function(){
      console.log(oldIds);
      var feeTypeIds = [];
      var currentIdsOnly = [];
      $(".checkStudents:checked").each(function() {
        var tempId = {};
        tempId.id = $(this).val();
        tempId.editId = $('#'+tempId.id).attr('data-rowid') ||0;
        tempId.amount = $('#'+tempId.id).val();
        feeTypeIds.push(tempId);
        currentIdsOnly.push($(this).val());
      });

      if($('#programId').val()=="")
      {
        swal("Select Trimester","Please Select Trimester","error");
        $("#programIde").show();return false;
      }
      else
      {
        $("#programIde").hide();
      }

      var action = $('input[name=action]').val();
      console.log(oldIds);
      console.log(feeTypeIds);
      if(action=="update")
      {

        $.ajax({
          type: 'post',
          url: "./updateRegistrationFee",
          data: {
            '_token': $('input[name=_token]').val(),
            'oldFeeIds': oldIds,
            'currentFeeIds': feeTypeIds,
            'currentIdsOnly': currentIdsOnly,
            // 'trimesterId': $('#trimesterId').val(),
            'programId': $('#programId').val(),
            'description': $('#description').val(),
          },
          success: function(data) {
           var dataResult = JSON.parse(data);
           console.log(dataResult);
           if(dataResult.status===true)
           {
             swal("200",dataResult.message,"success");
             window.location.href = "./registrationFeeSettings";
           }
         }
       });
      }
      else
      {
        $.ajax({
          type: 'post',
          url: "./saveRegistrationFeeSettings",
          data: {
            '_token': $('input[name=_token]').val(),
            'data': feeTypeIds,
            //'trimesterId': $('#trimesterId').val(),
            'programId': $('#programId').val(),
            'description': $('#description').val(),
          },
          success: function(data) {
           var dataResult = JSON.parse(data);
           console.log(dataResult);

           if(dataResult=="success")
           {
            swal("Success","Course Registration Fee Added","success");
            window.location.href = "./registrationFeeSettings";
            // feeTypeIds.length = 0;
            // oldIds.length = 0;
            // $('textarea[name="description"]').val('');
            // $('input[name="trimesterId"]').val('');
            // $("input:checkbox").prop('checked', false);  
            // $("#add").text('Save');
            // $(".panel-title").html('Add Registration Fees');
            // $("#addPanel").hide();
            // $("#tableData").show();
          }
        }
      });
      }
      
    });


    $("#addViewBtn").click(function(){
      $("#tableData").hide();
      $("#addPanel").show();
      $("#addForm")[0].reset();
      $('#ActivitiesId').remove();
      $("#activitiesForm").attr("action", "{{url('/ums/saveActivitiesSchedule')}}");
      $("#saveButton").val('Submit');
      $(".panel-title").html('Save Registration Fee');
    });

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

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