@extends('layouts.app2')

@section('dynamic_css')
        <link href="{!! asset('css/dataTables.bootstrap4.min.css') !!}" media="all" rel="stylesheet" type="text/css"/>
        <link href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.bootstrap4.min.css" media="all" rel="stylesheet" type="text/css"/>
        <link href="{!! asset('/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css') !!}" rel="stylesheet" />
    <style>
/*        body {
            font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
            font-size: 14px;
        }*/

        #calendar {
            max-width: 1050px;
            margin: 0 auto;
            background-color: white;
            width: 100%;
        }

        .h2,
        h2 {
            font-size: 1.5rem !important;
        }
        
        .table td.accordion_dv {
            padding: 0rem 0rem 0rem 0rem;
            vertical-align: top;
            border-top: 1px solid #dee2e6;
        }
        .table td {
            padding: .7rem .7rem .7rem .7rem;
            vertical-align: top;
            border-top: 1px solid #dee2e6;
        }
        
        
        
        
        
        
            /*==========================================
            * CUSTOM UTIL CLASSES
            * ==========================================
            *
            */

            /* Timeline holder */
            ul.timeline {
                list-style-type: none;
                position: relative;
                padding-left: 1.5rem;
            }

             /* Timeline vertical line */
            ul.timeline:before {
                content: ' ';
                background: #fff;
                display: inline-block;
                position: absolute;
                left: 16px;
                width: 4px;
                height: 100%;
                z-index: 400;
                border-radius: 1rem;
            }

            li.timeline-item {
                margin: 20px 5px;
            }

            /* Timeline item arrow */
            .timeline-arrow {
                border-top: 0.5rem solid transparent;
                border-right: 0.5rem solid #fff;
                border-bottom: 0.5rem solid transparent;
                display: block;
                position: absolute;
                left: 2rem;
            }

            /* Timeline item circle marker */
            li.timeline-item::before {
                content: ' ';
                background: #ddd;
                display: inline-block;
                position: absolute;
                border-radius: 50%;
                border: 3px solid #fff;
                left: 11px;
                width: 14px;
                height: 14px;
                z-index: 400;
                box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
            }


            /*
            *
            * ==========================================
            * FOR DEMO PURPOSES
            * ==========================================
            *
            */
            /*body {
                background: #E8CBC0;
                background: -webkit-linear-gradient(to right, #E8CBC0, #636FA4);
                background: linear-gradient(to right, #E8CBC0, #636FA4);
                min-height: 100vh;
            }*/

            .text-gray {
                color: #999;
            }


            ul.timeline {        
                list-style-type: none;
                position: relative;
                padding-left: 1.5rem;       

            }
        .display-block{
            display: block;
        }
        
        
       .dtp div.dtp-date, .dtp div.dtp-time {
            padding: 0px !important; 
        }
        
        #applyResignationValidationErrors{
            background-color: #eee;
            list-style: disc;
            border: 2px solid red;
            padding: 5px 20px;
            color: darkred;
        }
@media only screen and (max-width: 768px) {        

    #no-more-tables td.no-table {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 0%;
        white-space: normal;
        text-align: left;
        overflow-wrap: break-word;
        word-wrap: break-word;
        min-height: 20px;
   }
}
    </style>
@endsection 

@section('content')

<div class="container">
    <div class="row container_layout">
        <div class="col-md-12 pl0 pr0 mobile_view">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{{ route('adminhome')}}">
                            <i class="material-icons">home</i>
                        </a>
                    </li>
                     <li class="breadcrumb-item"><a href="{{ route('servicemanagement') }}">Service</a></li>
                    <li class="breadcrumb-item active"><a href="{{ route('displaypendingresignation') }}">Pending Resignation</a></li>
                </ol>
            </nav>
        </div>
        <div class="col-md-12  p10 bg-white" id="no-more-tables">
            <table class="table table-hover  table-responsive table-striped" id="pendingResignationTable">
                <thead>
                    <th>#</th>
                    <th>Emp Code</th>
                    <th>Emp Name</th>
                    <th>Designation</th>
                    <th>Resignation Date</th>
                    <th>Released Date</th>
                    <th>Status</th>
                    <th>Action</th>
                </thead>

                <tbody style="overflow: hidden" id="accordion">
                 @if(!empty($serviceData))
                    @php $i=1; @endphp
                   @foreach($serviceData as $service)  
                      
                        <tr>
                          
                            <td data-toggle="collapse" data-target="#accordion{{$service['id']}}" class="clickable">
                                {{$i}}
                            </td>
                            <td data-toggle="collapse" data-target="#accordion{{$service['id']}}" class="clickable">{{$service['employee_code']}}
                            </td>
                            <td data-toggle="collapse" data-target="#accordion{{$service['id']}}" class="clickable">{{$service['name']}}
                            </td>
                            <td data-toggle="collapse" data-target="#accordion{{$service['id']}}" class="clickable">{{$service['designation_name']}}
                            </td>
                            <td data-toggle="collapse" data-target="#accordion{{$service['id']}}" class="clickable">{{ \Carbon\Carbon::parse($service['service_initiate_date'])->format('d-m-Y')}}
                            </td>
                            <td data-toggle="collapse" data-target="#accordion{{$service['id']}}" class="clickable">{{ \Carbon\Carbon::parse($service['service_final_date'])->format('d-m-Y')}}
                            </td>
                            <td data-toggle="collapse" data-target="#accordion{{$service['id']}}" class="clickable">{{$service['status']}}
                            </td>
                            <td> 
                                @if($service['permission']) 
                                
                                  @if($service['level_id']>=$service['user_level'])
                                    <a href="" data-id="{{$service['id']}}" data-released_date="{{ \Carbon\Carbon::parse($service['service_final_date'])->format('Y-m-d')}}" data-higher_level="{{$service['higher_level']}}" data-resigned_date="{{ \Carbon\Carbon::parse($service['service_initiate_date'])->format('Y-m-d')}}" data-prop_released_date="@if($service['proposed_released_date']){{ \Carbon\Carbon::parse($service['proposed_released_date'])->format('Y-m-d')}}@endif" class="btn btn-xsm btn-info manage_btn" > Manage</a> 
                                  @endif
                                @endif
                            </td>
                        </tr>
                        <tr>
                             <td style="display: none;">{{$i=$i+.5}}</td>
                            <td colspan="8" class="accordion_dv no-table">
                                <div id="accordion{{$service['id']}}" class="collapse" style="background-color: #e6e6e6;" data-parent="#accordion">
                                   <div class="row">
                                        <div class="col-lg-7 mx-auto">
                                           <!--  Timeline -->
                                            <ul class="timeline">
                                             @if(!empty($service['logs']))
                                                @foreach($service['logs'] as $log)  

                                                    <li class="timeline-item bg-white rounded ml-3 p-4 shadow">
                                                        <div class="timeline-arrow"></div>
                                                        <h2 class="h5 mb-0">Resignation {{$log->status}}</h2>
                                                        <span class="small text-gray">
                                                            <i class="fa fa-clock-o mr-1"></i>
                                                        {{ \Carbon\Carbon::parse($log->created_at)->format('d M, Y g:i:s a')}}</span>
                                                        
                                                        <span class="small text-gray display-block">
                                                             Created By : @if($log->created_by_name)
                                                                               {{$log->created_by_name}}
                                                                          @else
                                                                               {{$log->created_by}}
                                                                          @endif
                                                        </span>
                                                        <hr>
                                                        @if($log->initiate_date)
                                                            <span class="text-gray display-block">
                                                                <i class="fa fa-clock-o mr-1"></i> Resignation Date : {{ \Carbon\Carbon::parse($log->initiate_date)->format('d M, Y ')}}
                                                            </span>
                                                        @endif
                                                        @if($log->final_date)
                                                            <span class="text-gray display-block">
                                                                <i class="fa fa-clock-o mr-1"></i> Released Date : {{ \Carbon\Carbon::parse($log->final_date)->format('d M, Y ')}}
                                                            </span>
                                                         @endif
                                                        @if($log->file_url)
                                                            <span class="text-gray display-block">
                                                                <i class="fa fa-file mr-1"></i> Document : <a href="{{ $global_data['config']->image_url}}{{$log->file_url}}" target="_blank"><i class="fa fa-eye fa-lg" aria-hidden="true"></i></a>
                                                            </span>
                                                        @endif
                                                        <p class="text-small mt-2 font-weight-light">  Remarks : {{$log->remarks}}</p>
                                                    </li>
                                                @endforeach
                                              @endif
                                            </ul>

                                        </div>
                                    </div>
                                
                                </div>
                            </td>
                            
                            <td style="display: none;"></td>
                            <td style="display: none;"></td>
                            <td style="display: none;"></td>
                            <td style="display: none;"></td>
                            <td style="display: none;"></td>
                            <td style="display: none;"></td>
                        </tr>
                    @php $i=$i+.5; @endphp
                   @endforeach
                 @endif   
                </tbody>
            </table>
        </div>
        <div class="col-md-12">
        

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




<div class="modal fade" id="manageModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Manage Resignation Request</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
    <form id="manageFormId" >
      <div class="modal-body">
            <div id="applyResignationValidation"></div>
              {{ csrf_field() }}
            <div class="form-group">
                <label>Released Date : <span id="released_date_text"></span> <span><a class="btn btn-xsm btn-info" id="change_released_date_btn"> Change Released Date</a><a class="btn btn-xsm btn-warning " id="cancel_change_released_date_btn" style="display:none;"> Cancel Change Released Date</a></span> </label>
               
            </div>
            <div class="form-group display_none" id="released_date_date_piker">
                <label>Released Date to Be :</label>
                <input type="text" class="form-control" name="released_date" id="released_date"/>
            </div>
            <div class="form-group">
                <label>Document( if any)</label>
                <input type="file" class="form-control" name="resign_doc" id="resign_doc"/>
            </div>

            <div class="form-group">
                <label>Remarks ( if any)</label>
                <textarea class="form-control" name="resign_remarks" id="resign_remarks" rows="4"></textarea>
            </div>
            <input type="hidden" class="form-control" name="service_init_id" id="service_init_id"/>
           <input type="hidden" class="form-control" name="service_action" id="service_action"/>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-danger btn-sm" id="btn_reject">Reject</button>
        <button type="submit" class="btn btn-primary btn-sm" id="btn_forward">Approve & Forwared</button>
        <button type="submit" class="btn btn-primary btn-sm" id="btn_confirm">Approve & Confirm</button>
      </div>
     </form>
    </div>
  </div>
</div>


@endsection

@section('dynamic_js')
<script src="{{ asset('js/lib/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('js/lib/dataTables.bootstrap4.min.js') }}"></script>
<script type="text/javascript" src="http://momentjs.com/downloads/moment-with-locales.min.js"></script>
<script type="text/javascript" src="{{asset('js/lib/bootstrap-material-datetimepicker.js') }}"></script>
<script>
    
 /* pendingResignationTable  */
  $('#pendingResignationTable').DataTable();
    
    
    
    
  $(document).on('click','.manage_btn',function(e){
     e.preventDefault();
     var id=$(this).data('id');
     var released_date=$(this).data('released_date');
     var higher_level=$(this).data('higher_level');
     var resigned_date=$(this).data('resigned_date');
      var prop_released_date=$(this).data('prop_released_date');
     if(higher_level==0){
         $('#btn_confirm').show();
         $('#btn_forward').hide();
     }else{
         $('#btn_forward').show();
         $('#btn_confirm').hide();
     }
     $('#released_date_text').empty();
     if(prop_released_date){
         $('#released_date_text').append(prop_released_date); 
         $("#released_date").val(prop_released_date);
     }else{
         $('#released_date_text').append(released_date); 
         $("#released_date").val(released_date);
     }
        
     
     $('#service_init_id').val('');
     $('#service_init_id').val(id); 
     
     $("#released_date").bootstrapMaterialDatePicker({weekStart:0, time:false, minDate:resigned_date});
      
     $('#manageModal').modal({
             backdrop: 'static',
             keyboard: false
     });
})
    
$(document).on('click','#change_released_date_btn',function(e){
    e.preventDefault();
    $('#released_date_date_piker').show();
    $('#cancel_change_released_date_btn').show();
    $('#change_released_date_btn').hide();
})
    
$(document).on('click','#cancel_change_released_date_btn',function(e){
    e.preventDefault();
    $('#released_date_date_piker').hide();
    $('#cancel_change_released_date_btn').hide();
    $('#change_released_date_btn').show();
})
    
$("#manageFormId").validate({
    rules: {
        released_date: {
            required: true,
        },
        resign_doc: {
            extension: "jpg,pdf,jpeg,png,doc,docx",
            filesize: 500,
        }
    },
    messages: {
        resign_doc: {
            extension: "Select only jpg, jpeg, png, pdf or doc file",
        }
    }
}); 
$.validator.addMethod('filesize', function (value, element, param) {
    param = param * 1024;
    return this.optional(element) || (element.files[0].size <= param)
}, 'File size must be less than {0} KB');
    
    
$(document).on('click','#btn_confirm',function(e){
    e.preventDefault();
    $('#service_action').val('');
    $('#service_action').val(3);
     submitResponse();
})
    
$(document).on('click','#btn_forward',function(e){
    e.preventDefault();
    $('#service_action').val('');
    $('#service_action').val(7);
     submitResponse();
})
    
$(document).on('click','#btn_reject',function(e){
    e.preventDefault();
    $('#service_action').val('');
    $('#service_action').val(5);
     submitResponse();
})   
    
function submitResponse(){
    if($("#manageFormId").valid()){ 
                var form=document.getElementById("manageFormId");
                $('.page-loader-wrapper').fadeIn();
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    type: "POST",
                    url: "{{ route('submitresignationresponse') }}",
                    dataType: "json",
                    data: new FormData(form),
                    contentType: false,
                    cache: false,
                    processData: false,
                    success: function (data) {
                        if (data.msgType == true) {
                            Swal.fire({
                              title: 'Success',
                              text: data.msg,
                              type: 'success',
                              showCancelButton: false,
                              confirmButtonColor: '#3085d6',
                              cancelButtonColor: '#d33',
                              confirmButtonText: 'Ok'
                            }).then((result) => {
                              if (result.value) {
                                location.reload();
                              }
                            })
                            
                        }else{

                            if(data.msg=="VE"){
                                $('#applyResignationValidation').append('<ul class="form-group f-600 f-13 red-color" id="applyResignationValidationErrors"></ul>');

                                $.each(data.errors, function( index, value ) {
                                    $('#applyResignationValidationErrors').append('<li>'+value+'</li>');
                                });
                            }else{
                       
                               Swal.fire({
                                  title: 'Error',
                                  text: data.msg,
                                  type: 'error',
                                  showCancelButton: false,
                                  confirmButtonColor: '#3085d6',
                                  cancelButtonColor: '#d33',
                                  confirmButtonText: 'Ok'
                                }).then((result) => {
                                  if (result.value) {
                                    
                                  }
                                })
                            }
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        callAjaxErrorFunction(jqXHR, textStatus, errorThrown);
                    },
                    complete: function (data) {
                        $('.page-loader-wrapper').fadeOut();
                    }
                });
    
    }  
}
    
    
</script>
@endsection