@extends('layouts/gnr_layout')
@section('title', '|Signature Setting')
@section('content')

<div class="row">

  <div class="col-md-12">

    <div class="" style="">

      <div class="">

        <div class="panel panel-default" style="background-color:#708090;">
      
          <div class="panel-heading" style="padding-bottom:0px;">
              <div class="panel-options">
                      <a href="{{url('gnr/addSignatureSetting/')}}" class="btn btn-info pull-right addViewBtn"><i class="glyphicon glyphicon-plus-sign addIcon"></i>Add Signature Setting</a>
              </div>

              <h1 align="center" style="font-family: Antiqua;letter-spacing:2px;"><font color="white"> SIGNATURE SETTING</font></h1>
          </div>
  
          <div class="panel-body panelBodyView">       
            
              <div>
                <script type="text/javascript">

                  jQuery(document).ready(function($) {
                      $("#AdvReg").dataTable({              
                        "oLanguage": {
                            "sEmptyTable": "No Records Available",
                            "sLengthMenu": "Show _MENU_ "

                        }

                      });
                  });
                </script>
              </div>

              <table class="table table-striped table-bordered" id="AdvReg" style="color:black;">
                  
                  <thead>
                      <tr>
                          <th width="30">SL#</th>
                          <th>Module Name</th>
                          <th>Applicable For</th>
                          <th>Action</th>
                      </tr>
                  </thead>

                  <tbody>
                      @foreach ($gnrSignatureSettings as $index => $gnrSignatureSettings)
                          <tr style:"float:left;">
                              <td>{{ $index+1 }}</td>
                              <td>{{ $gnrSignatureSettings->gnr_module->name }}</td>
                              <td>{{ ($gnrSignatureSettings->isHeadOffice == 1) ? 'Head Office' : 'Branch' }}</td>
                              <td width="80"><a href="javascript:;" class="view-modal" signatureSetting="{{$gnrSignatureSettings->id}}"><i class="fa fa-eye" aria-hidden="true"></i>
                                </a>&nbsp; 
                                <a href="javascript:;" class="delete-modal" signatureSetting="{{$gnrSignatureSettings->id}}"><span class="glyphicon glyphicon-trash"></span>
                                </a>
                              </td>
                          </tr>
                      @endforeach
                  </tbody>

              </table>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>

<!-- - - - - - - - - - - -View Model- - - - - - - - - - - - - -->

  <div id="viewModal" class="modal fade" style="margin-top:3%">

    <div class="modal-dialog modal-sm">

      <div class="modal-content">

        <div class="modal-header">
          <h4 class="modal-title" style="clear:both;background-color:black;color:white; padding:10px;text-align:center">View Signature Setting Info</h4>
        </div>

        <div class="modal-body">

          <div class="row" style="padding-bottom: 20px;"> 

            <div class="col-md-12">

              <div class="col-md-12" style="padding-right:2%;">
                
                <div class="form-horizontal form-groups">

                  <input id="VMsignature" type="hidden" name="signature" value="">

                  <div class="form-group">
                    {!! Form::label('module','Module Name', ['class' => 'col-sm-3 control-label']) !!}
                    <div class="col-sm-1 control-label">: </div>
                    <div class="col-sm-8">                                     
                        {!! Form::text('module', null,['id'=>'VMmodule','class'=>'form-control','type' => 'text','autocomplete'=>'off','readonly']) !!}
                        <p id='modulee' class="error" style=color: red;"></p>
                    </div>
                  </div>
                  
                  <div class="form-group">
                    {!! Form::label('branch','Branch', ['class' => 'col-sm-3 control-label']) !!}
                    <div class="col-sm-1 control-label">: </div>
                    <div class="col-sm-8">                                               
                      {!! Form::text('branch', null,['id'=>'VMbranch','class'=>'form-control','type' => 'text','autocomplete'=>'off','readonly']) !!}
                      <p id='branch' class="error" style=color: red;"></p>
                    </div>
                  </div>

                  <table style="width:100%; margin-left:15px;padding-top: 10px;" class="table table-striped table-bordered dataTable no-footer"  id="table1">
                    <thead>
                      <th>No.</th>
                      <th>Sigtnature Role</th>
                      <th>Employee Position</th>
                      <th>Employee Id</th>
                      <th>Employee Name</th>
                    </thead> 
                    <tbody>
                    
                    </tbody>
                  </table>

                  <div class="modal-footer">
                    <button type="button" class="btn btn-danger " data-dismiss="modal"><span class="glyphicon glyphicon-remove" style="padding-right:4px;"></span>Close</button>
                  </div>

                </div>
                                         
              </div>
                                     
            </div>
                                  
          </div>
                               
        </div>
                          
        <div class="col-md-3"></div>
                      
      </div>
                  
    </div>
              
  </div>

<!-- - - - - - - - - - - -View Model- - - - - - - - - - - - - -->

<!-- - - - - - - - - - - -Delete Model- - - - - - - - - - - - - -->

<div id="deleteModal" class="modal fade" style="margin-top:3%;">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
          <div class="modal-header">
              <h4 class="modal-title" style="clear:both;background-color:black;color:white; padding:10px;text-align:center;">Delete Signature Setting</h4>
          </div>
          <div class="modal-body ">
          <div class="row" style="padding-bottom:20px;"> </div>

          <h2>Are You Confirm to Delete This Record?</h2>

            <div class="modal-footer">

                <input id="DMsignatureSettingId" type="hidden" name="houseOwnerReg" value=""/>
                <button type="button" class="btn btn-danger"  id="DMsignatureSetting"  data-dismiss="modal">confirm</button>

                <button type="button" class="btn btn-warning"  data-dismiss="modal"><span class="glyphicon glyphicon-remove" style="padding-right:4px;"></span>Close</button>

            </div>
          </div>
      </div>
    </div>
</div>

<!-- - - - - - - - - - - -Delete Model- - - - - - - - - - - - - -->

  <script>   
        
      // Delete Operation
      $(document).ready(function()
      { 

        $(document).on('click', '.delete-modal', function()
        {
          $("#DMsignatureSettingId").val($(this).attr('signatureSetting'));
          $("#deleteModal").find('.modal-dialog').css('width', '60%');
          $('#deleteModal').modal('show');

        });
      
        $("#DMsignatureSetting").on('click',  function()
        { 
            var signatureSetting= $("#DMsignatureSettingId").val();
            var csrf = "{{csrf_token()}}";
            $.ajax({
                url: './deleteDMsignatureSetting',
                type: 'POST',
                dataType: 'json',
                data: {id:signatureSetting, _token:csrf},
            })
            .done(function(data)
            { 
              toastr.success(data.responseText, data.responseTitle, opts);                        
              setTimeout(function(){
                  location.reload();
              }, 1000);

            })
            .fail(function()
            { 
              alert("Something went wrong, try again");
            })
            .always(function()
            {
              console.log("complete");
            });

        });

      });   
      // Delete Operation 

      // View Operation
      $(document).ready(function() 
      { 
          $(document).on('click', '.view-modal', function()  
          {
              var signatureSetting = $(this).attr('signatureSetting');
              var csrf = "{{csrf_token()}}";

              $("#viewModal").find('.modal-dialog').css('width', '60%');
              $("#viewModal").modal('show');
              $("#VMsignature").val(signatureSetting);

              $.ajax({
                    url: './viewSignatureSetting',
                    type: 'POST',
                    dataType: 'json',
                    async: false,
                    data: {id:signatureSetting , _token: csrf},
                    success: function(data) 
                    {   
                        $("#VMmodule").val(data['module']);
                        $("#VMbranch").val(data['branch']);
                        $('#table1 tbody').empty();

                        if(data['signatureConfig'].length != 0)
                        {
                          for(i=0;i<data['signatureConfig'].length;i++)
                          { 
                            employeeId = (!data['signatureConfig'][i]['employee_id']) ? 'Default' : data['signatureConfig'][i]['employee_id'];
                            employeeName = (!data['signatureConfig'][i]['employee_name']) ? 'Default' : data['signatureConfig'][i]['employee_name'];

                            $('#table1 tbody').append('<tr><td>'+(i+1)+'</td><td>'+ data['signatureConfig'][i]['signature'] +' </td><td>'+ data['signatureConfig'][i]['emp_position'] +'</td><td>'+ employeeId +'</td><td>'+ employeeName +'</td></tr>');
                          }
                        }
                      },
                      error: function(argument) 
                      {
                          alert('response error');
                      }

              });
                
          });

      });
      // View Operation

  </script> 

@include('dataTableScript')
@endsection