@extends('layouts/ums_layout')
@section('title', '| Room')
@section('content')
@include('successMsg')

<div class="row">
  <div class="col-md-12">
      <div class="panel panel-default" style="background-color:#708090;">
        <div class="panel-heading" style="padding-bottom:0px">
          <div class="panel-options">
            <a href="{{url('ums/viewBookedAdTestRoom/')}}" target="_blank" class="btn btn-info pull-right addViewBtn" style=""><i class="fa fa-building-o"></i> Booked Room</a>
          </div>
          <h3  style=" text-align: center; font-family: Antiqua; letter-spacing: 2px; color: white;">Available Room for Admission Test</h3>          
        </div>
        <div class="panel-body panelBodyView"> 
          {!! Form::open(array('url' => '/ums/viewAvAdTestRoom', 'id' => 'form1', 'role' => 'form', 'class'=>'form-horizontal form-groups','method'=>'get')) !!}
          <div class="row"> 
            <div class="form-group">
                {!! Form::label('buildingId', 'Building:', ['class' => 'col-sm-3 control-label']) !!}
                <div class="col-sm-3">
                   <select class ="form-control" id = "searchbuildingId" name="buildingId">
                        <option value="">Select one</option>
                        @foreach($buildings as $building)
                        <option value="{{$building->id}}">{{$building->buildingNo}}-{{$building->buildingName}}</option>
                        @endforeach
                    </select>
                    <p id='buildingIde' style="max-height:3px;"></p>
                </div>
                {!! Form::label('floorId', 'Floor No.:', ['class' => 'col-sm-3 control-label']) !!}
                <div class="col-sm-3">
                   <select class ="form-control" id = "searchfloorId" name="floorId">
                        <option value="">Select one</option>
                    </select>
                    <p id='floorIde' style="max-height:3px;"></p>
                </div>
            </div>
          
            <div class="form-group">
                {!! Form::label('categoryId', 'Room Category.:', ['class' => 'col-sm-3 control-label']) !!}
                <div class="col-sm-3">
                   <select class ="form-control" id = "categoryId" name="categoryId">
                        <option value="">Select one</option>
                        @foreach($roomCategorys as $roomCategory)
                        <option value="{{$roomCategory->id}}">{{$roomCategory->name}}</option>
                        @endforeach
                    </select>
                    <p id='categoryIde' style="max-height:3px;"></p>
                </div>
            
                {!! Form::label('roomNo', 'Room No.:', ['class' => 'col-sm-3 control-label']) !!}
                <div class="col-sm-3">
                    {!! Form::text('roomNo', $value = null, ['class' => 'form-control', 'id' => 'roomNo', 'type' => 'text', 'placeholder' => 'Enter Room No.']) !!}
                    <p id='roomNoe' style="max-height:3px;"></p>
                </div>
            </div>
          
            <div class="form-group">
                {!! Form::label('name', 'Room Name:', ['class' => 'col-sm-3 control-label']) !!}
                <div class="col-sm-3">
                    {!! Form::text('name', $value = null, ['class' => 'form-control', 'id' => 'name', 'type' => 'text', 'placeholder' => 'Enter Room Name']) !!}
                    <p id='namee' style="max-height:3px;"></p>
                </div>
              {!! Form::label('capacity', 'Capacity:', ['class' => 'col-sm-3 control-label']) !!}
              <div class="col-sm-3">
                  {!! Form::text('capacity', $value = null, ['class' => 'form-control', 'id' => 'capacity', 'type' => 'text', 'placeholder' => 'Enter Capacity']) !!}
                  <p id='capacitye' 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::submit('Search', ['id' => 'add', 'class' => 'btn btn-success']) !!}
                    <span id="success" style="color:green; font-size:16px;" class="pull-right"></span>
                </div>
            </div>
          </div>
           
          {!! Form::close()  !!}  

            <table class="table table-striped table-bordered" id="umsRoomView">
              <thead>
                <tr>
                  <th>SL#</th>
                  <th>Building Name</th>
                  <th>Building No.</th>
                  <th>Floor No.</th>
                  <th>Category</th>
                  <th>Room No.</th>
                  <th>Capacity</th>
                  <th>Actions</th>
                </tr>
                {{ csrf_field() }}
              </thead>
              <tbody>
                                      @foreach($admissionTestRooms as $room) 
                      <tr class="item{{$room->id}}">
                          <td class="text-center slNo">{{++$no}}</td>
                          <td>{{$room->buildingName}}</td>
                          <td>{{$room->buildingNo}}</td>
                          <td>{{$room->floor}}</td>
                          <td>{{$room->categoryName}}</td>
                          <td>{{$room->roomNo}}-{{$room->name}}</td>
                          <td>{{$room->capacity}}</td>
                          <td class="text-center" width="80">
                             <a id="addIcone" href="./addAdmissionTestRoom/{{$room->id}}" class="add-modal" data-id="{{$room->id}}"><span class="glyphicon glyphicon-plus-sign"></span>
                            </a>&nbsp;
                            <!-- <a id="deleteIcone" href="javascript:;" class="delete-modal" data-id="{{$room->id}}">
                              <span class="glyphicon glyphicon-trash"></span> -->
                            </a>
                          </td>
                          
                      </tr>
                    @endforeach
              </tbody>
            </table>
            {{ $admissionTestRooms->links() }}
          </div>
          </div>
        </div>
  </div>
</div>

<div id="myModal" class="modal fade" style="margin-top:3%">
<div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
          <h4 class="modal-title" style="clear:both"></h4>
      </div>
      <div class="modal-body">
        {!! Form::open(array('url' => '', 'id' => 'form1', 'role' => 'form', 'class'=>'form-horizontal form-groups')) !!}
          <div class="form-group hidd hidden">
              {!! Form::label('id', 'ID:', ['class' => 'col-sm-2 control-label']) !!}
            <div class="col-sm-10">
              {!! Form::text('id', $value = null, ['class' => 'form-control', 'id' => 'id', 'type' => 'text', 'readonly']) !!}
              {!! Form::text('slno', $value = null, ['class' => 'form-control', 'id' => 'slno', 'type' => 'text', 'readonly']) !!}
            </div>
          </div>
                  <div class="form-group">
                      {!! Form::label('floorId', 'Floor No.:', ['class' => 'col-sm-3 control-label']) !!}
                      <div class="col-sm-9">
                         <select class ="form-control" id = "floorId" name="floorId">
                              <option value="">Select one</option>
                              @foreach($floors as $floor)
                              <option value="{{$floor->id}}">{{$floor->floor}}-{{$floor->buildingNo}}-{{$floor->buildingName}}</option>
                              @endforeach
                          </select>
                          <p id='floorIde' style="max-height:3px;"></p>
                      </div>
                  </div>
                  <div class="form-group">
                      {!! Form::label('categoryId', 'Room Category.:', ['class' => 'col-sm-3 control-label']) !!}
                      <div class="col-sm-9">
                         <select class ="form-control" id = "categoryId" name="categoryId">
                              <option value="">Select one</option>
                              @foreach($roomCategorys as $roomCategory)
                              <option value="{{$roomCategory->id}}">{{$roomCategory->name}}</option>
                              @endforeach
                          </select>
                          <p id='categoryIde' style="max-height:3px;"></p>
                      </div>
                  </div>
                  <div class="form-group">
                      {!! Form::label('roomNo', 'Room No.:', ['class' => 'col-sm-3 control-label']) !!}
                      <div class="col-sm-9">
                          {!! Form::text('roomNo', $value = null, ['class' => 'form-control', 'id' => 'roomNo', 'type' => 'text', 'placeholder' => 'Enter Room No.']) !!}
                          <p id='roomNoe' style="max-height:3px;"></p>
                      </div>
                  </div>
                  <div class="form-group">
                      {!! Form::label('name', 'Room Name:', ['class' => 'col-sm-3 control-label']) !!}
                      <div class="col-sm-9">
                          {!! Form::text('name', $value = null, ['class' => 'form-control', 'id' => 'name', 'type' => 'text', 'placeholder' => 'Enter Room Name']) !!}
                          <p id='namee' style="max-height:3px;"></p>
                      </div>
                  </div>
                  <div class="form-group">
            {!! Form::label('capacity', 'Capacity:', ['class' => 'col-sm-3 control-label']) !!}
            <div class="col-sm-9">
                {!! Form::text('capacity', $value = null, ['class' => 'form-control', 'id' => 'capacity', 'type' => 'text', 'placeholder' => 'Enter Capacity']) !!}
                <p id='capacitye' style="max-height:3px;"></p>
            </div>
        </div>
         
        {!! Form::close()  !!}
          <div class="deleteContent" style="padding-bottom:20px;">
            <h4>You are about to delete this item this procedure is irreversible !</h4>
            <h4>Do you want to proceed ?</h4> 
            <span class="hidden id"></span>
          </div>
        <div class="modal-footer">
            <p id="MSGE" class="pull-left" style="color:red"></p>
            <p id="MSGS" class="pull-left" style="color:green"></p>
          {!! Form::button('<span id=""></span>', ['class' => 'btn actionBtn', 'id' => 'footer_action_button'] ) !!}
          {!! Form::button('<span id=""></span>', ['class' => 'btn actionBtn',  'data-dismiss' => 'modal', 'id' => 'footer_action_button2'] ) !!}
          
          {!! Form::button('<span id=""> Close</span>',['class' => 'btn btn-warning', 'data-dismiss' => 'modal' , 'id' => 'footer_action_button_dismis'] ) !!}
          
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

<script src="{{asset('js/jquery-1.11.1.min.js')}}"></script>
<script type="text/javascript">
$(document ).ready(function() {
  
$(document).on('click', '.edit-modal', function() {

    if(hasAccess('editRoomItem')){
        $('.errormsg').empty();
        $('#MSGE').empty();
        $('#MSGS').empty();
        $('#footer_action_button').text(" Update");
        $('#footer_action_button').addClass('glyphicon glyphicon-check');
        //$('#footer_action_button').removeClass('glyphicon-trash');
        $('#footer_action_button_dismis').text(" Close");
        $('#footer_action_button_dismis').addClass('glyphicon glyphicon-remove');
        $('.actionBtn').addClass('btn-success');
        $('.actionBtn').removeClass('btn-danger');
        $('.actionBtn').addClass('edit');
        $('.modal-title').text('Update Data');
        $('.modal-header').css({"background-color":"black", "color":"white", "padding":"10px"});
        $('.modal-dialog').css('width','50%');
        $('.deleteContent').hide();
        $('.form-horizontal').show();
        $('#id').val($(this).data('id'));
        $('#slno').val($(this).data('slno'));
        $('#roomNo').val($(this).data('roomno'));
        $('#capacity').val($(this).data('capacity'));
        $('#name').val($(this).data('name'));
        $('#categoryId').val($(this).data('categoryid'));
        $('#footer_action_button2').hide();
        $('#footer_action_button').show();
        $('.actionBtn').removeClass('delete');
        $('#myModal').modal('show');

        var floorIdValue  = $(this).data('floorid');
        var categoryIdValue  = $(this).data('categoryid');

        $('#floorId option[value='+floorIdValue+']').attr('selected',true);
        $('#categoryId option[value='+categoryIdValue+']').attr('selected',true);
    }
});
  
//delete function
$(document).on('click', '.delete-modal', function() {

  if(hasAccess('deleteRoomItem')){

      $('#MSGE').empty();
      $('#MSGS').empty();
      $('.actionBtn').removeClass('edit');
      $('#footer_action_button2').text(" Yes");
      $('#footer_action_button2').removeClass('glyphicon glyphicon-check');
      //$('#footer_action_button').addClass('glyphicon-trash');
      $('#footer_action_button_dismis').text(" No");
      $('#footer_action_button_dismis').removeClass('glyphicon glyphicon-remove');
      $('.actionBtn').removeClass('btn-success');
      $('.actionBtn').addClass('btn-danger');
      $('.actionBtn').addClass('delete');
      $('.modal-title').text('Delete');
      $('.modal-header').css({"background-color":"black", "color":"white", "padding":"10px"});
      $('.modal-dialog').css('width','30%');
      $('.id').text($(this).data('id'));
      $('.deleteContent').show();
      $('.form-horizontal').hide();
      $('#footer_action_button2').show();
      $('#footer_action_button').hide();
      $('.title').html($(this).data('uname'));
      $('#myModal').modal('show');
    }
    
});

$('.modal-footer').on('click', '.delete', function() {
  $.ajax({
    type: 'post',
    url: './deleteRoomItem',
    data: {
      '_token': $('input[name=_token]').val(),
      'id': $('.id').text()
    },
    success: function(data) {
      if (data.umsessDenied) {
    showAccessDeniedMessage();
    return false;
}
      $('.item' + $('.id').text()).remove();
    }
  });
});

$("input").keyup(function(){
            var name = $("#name").val();
            if(name){$('#namee').hide();}else{$('#namee').show();}
  
});



 $( "#searchbuildingId" ).change(function() {

            var buildingId    = $(this).val();
            var csrf            = "{{csrf_token()}}";
            $.ajax({
                type: 'post',
                url: '{{url('ums/getFloorByBuilding/')}}',
                data: { buildingId: buildingId, _token: csrf},
                dataType: 'json',
                success: function (data) {
                    //console.log(JSON.stringify(data));
                  if (data) {
                      $("#searchfloorId").empty();
                      $('#searchfloorId').append('<option value=0>Select One</option>');
                      $.each(data, function (index, value) {
                        $('#searchfloorId').append('<option value='+value.id+'>'+value.floor+'</option>');
                      }); 
                            
                  }
                },
                error: function(_response){
                    alert("Error");
                }
            });
  });

});//ready function end

</script>