@extends('layouts.app')

@section('title', 'Common Settings |')

@section('content')

<!-- Page Content -->
<div class="content container-fluid">
                           
    <div class="row">
      <div class="col-sm-4 col-md-4 col-lg-4 col-xl-3">
      <h3 class="page-title m-t-20">Common Settings</h3>
        @include('setting.left-sidebar')         
      </div>
      <div class="col-sm-8 col-md-8 col-lg-8 col-xl-9">       
         <div class="page-header">
          <div class="row align-items-center">
            <div class="col">
              <h3 class="page-title">Designation/Job Profile <small>(Manage Job Profile)</small> </h3>          
            </div>
            <div class="col-auto float-right ml-auto">
                <a href="javascript:;" id="addHolidayBtn" class="btn add-btn"><i class="fa fa-plus"></i> Add </a>
            </div>
          </div>
        </div>
          <div class="m-b-30">
            <div class="row">
      <div class="col-md-12">
        <div class="table-responsive">
          <table class="table table-hover custom-table mb-0 rowsTable">
            <thead>
              <tr>                
                <th>Name </th>
                <th>Department/Team</th>
                <th>Status</th>
                <th class="text-right">Action</th>
              </tr>
            </thead>
            <tbody>
             
            @if( count($data) > 0 )
              @foreach($data as $item)
              <tr class="" data="{{ base64_encode($item->id)}}">
              
                <td class="name">{{$item->name}}</td>
                <td>{{$item->department_name}}</td>
                <td>Active</td>
                <td class="text-right">
                   @if( auth()->user()->role_id == 1 || auth()->user()->role_id == 2 )
                    <a href="javascript:;" id="updateRow" class="btn btn-sm btn-warning updateRow" data-id="{{ base64_encode($item->id)}}"><i class="fa fa-pencil"></i> Edit</a>
                    <a href="javascript:;" id="" class="btn btn-sm btn-danger deleteRow" data-id="{{ base64_encode($item->id)}}"><i class="fa fa-trash"></i> Remove</a>
                  @endif
                </td>
              </tr>
              @endforeach
            @endif
             
            </tbody>
          </table>
        </div>
      </div>
    </div>
              </div>        
           
            </div>
          </div>
        </div>



<!-- add Modal -->
<div class="modal custom-modal fade" id="addHolidaykModal" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
                <h5 class="modal-title">Add Job-Profile/Designation</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">×</span>
                </button>
              </div>
            <div class="modal-body">
              <form method="post" id="aaddHolidayForm">
                @csrf
                <div class="form-header">
               
                <div class="add-client-tip" style="border: 1px solid #0083d9;padding: 12px;text-align: justify;">
                   <p> Create a new Job-Profile/Designation.</p>                    
                </div>
                </div>
                <div class="form-group">                        
                        <label>Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control name" name="name">
                        <span class="errorDiv"></span>
                </div>  

                <div class="form-group">                        
                    <label>Department/Team <span class="text-danger">*</span></label>
                    <select class="form-control" name="department_name">
                      <option value="">-Select-</option>
                      @if(count($departments) > 0)
                        @foreach($departments as $item)
                          <option value="{{$item->id}}">{{$item->name}}</option>
                        @endforeach
                      @endif
                    </select>
                    
                    <p style="margin-bottom: 2px;" class="text-danger" id="error-name"></p> 
                </div>  

                <div class="modal-btn delete-action" style="margin-top: 25px;">
                    <div class="row">
                        <div class="col-6">                                                    
                            <button class="btn btn-primary submit-btn">Save</button>
                        </div>
                        <div class="col-6">
                            <a href="javascript:void(0);" data-dismiss="modal" class="btn btn-primary cancel-btn">Cancel</a>
                        </div>
                    </div>
                </div>
              </form>
            </div>
        </div>
    </div>
</div>     
<!--  -->

<!-- Edit Modal -->
<div class="modal custom-modal fade" id="editHolidaykModal" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
                <h5 class="modal-title">Edit Job Profile/Designation</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">×</span>
                </button>
              </div>
            <div class="modal-body">
              <form method="post" id="editProfileForm">
                @csrf
                <div class="form-header">               
                  <div class="add-client-tip" style="border: 1px solid #0083d9;padding: 12px;text-align: justify;">
                     <p> Edit Job Profile/Designation's title.</p>                    
                  </div>
                </div>
                
                <div class="form-group">                        
                    <label> <b>Name:</b> <span class="old_name"></span></label>                   
                </div> 

                <div class="form-group">                        
                    <label><b> Department/Team:</b> <span class="old_team"></span></label>                   
                </div> 

                <div class="form-group text-center" style="border-bottom: 1px #a5d9ab solid;">                        
                    <label>Update new </label>                                       
                </div> 
                <div class="form-group">                        
                        <label>Designation Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control name" name="name">
                        <span class="errorDiv"></span>
                </div> 
               <div class="form-group">                        
                    <label>Department/Team <span class="text-danger">*</span></label>
                    <select class="form-control department" name="department">
                      <option value="">-Select-</option>
                      @if(count($departments) > 0)
                        @foreach($departments as $item)
                          <option value="{{$item->id}}">{{$item->name}}</option>
                        @endforeach
                      @endif
                    </select>
                    <span class="errorDiv"></span>
                </div>  

                <div class="modal-btn delete-action" style="margin-top: 25px;">
                    <div class="row">
                        <div class="col-6">                                                      
                            <button class="btn btn-primary submit-btn">Update</button>
                            <input type="hidden" value="" id="rowID" name="rowID">
                        </div>
                        <div class="col-6">
                            <a href="javascript:void(0);" data-dismiss="modal" class="btn btn-primary cancel-btn">Cancel</a>
                        </div>
                    </div>
                </div>
              </form>
            </div>
        </div>
    </div>
</div>     
<!--  -->

<!-- Delete item Modal -->
<div class="modal custom-modal fade" id="deleteItemModal" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <div class="form-header">
                    <h3 class='itemName'></h3>
                    <p>Are you sure want to delete?</p>
                </div>
                <div class="modal-btn delete-action">
                    <div class="row">
                        <div class="col-6">
                            <a href="javascript:;" id="deleteBtn" data-id="" class="btn btn-primary continue-btn">Delete</a>
                        </div>
                        <div class="col-6">
                            <a href="javascript:void(0);" data-dismiss="modal" class="btn btn-primary cancel-btn">Cancel</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /Delete item Modal -->

<script type="text/javascript">

$(function(){

// delete Item
$(document).on('click','.deleteRow',function(){
var rowID = $(this).attr('data-id');
//set id
$("#deleteBtn").attr('data-id',rowID);
//open modal
var name    = $("table.rowsTable").find("[data='" + rowID + "']").find('td.name').text();  
var date    = $("table.rowsTable").find("[data='" + rowID + "']").find('td.date').text();    
$(".itemName").html(name+'-'+date);     
$('#deleteItemModal').modal();

});
// 
$(document).on('click', '#deleteBtn',function(){
var rowID = $(this).attr('data-id');
$("#overlay").fadeIn(300);　
$.ajax({
      type: 'post',
      url: "{{route('/setting/jobProfile/delete')}}",
      data: {'id':rowID,"_token": "{{ csrf_token() }}"},        
      success: function (data) {
          console.log(data);
          
          if(data.fail == false)
          {
              $("#overlay").fadeOut(300);　            
              location.reload(true);         
          }
      },
      error: function (xhr, textStatus, errorThrown) {
          alert("Error: " + errorThrown);
      }
  });
  return false;
});
// 

$(document).on('click', '.updateRow',function(){

  var rowID = $(this).attr('data-id');
  
  $('#rowID').val(rowID);
  $('#editProfileForm')[0].reset();
  $('#editHolidaykModal').modal();

  if( rowID != 'undefined'){
  $.ajax({
        type: 'get',
        url: "{{route('/jobProfile/update')}}",
        data: {'id':rowID},        
        success: function (data) {
            console.log(data);
            $('#editProfileForm')[0].reset();
            
            if(data.result !=null)
            {                              
                //check if primary data               
                $('.old_name').text(data.result.name);
                $('.name').val(data.result.name);
                $(".department").val(data.result.department_id).change();
            
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            alert("Error: " + errorThrown);
        }
    });
    return false;
  }
});


$(document).on('click','#addHolidayBtn',function(){
  $('#aaddHolidayForm')[0].reset();
  $('#addHolidaykModal').modal();
});

//add submit form
$("#aaddHolidayForm").validate({
      rules:{
        name:{
              required: true,                
          }, 
          department_name:{
              required: true,                
          },         
      },
      highlight: function (element) {
        $(element).closest('.form-group').addClass('errorDiv');
      },
      messages:{
          assign_user:{
              required: "Please seelct an user",                
          },
      },
      submitHandler: function(form) { 
            $.ajax({
              url:'/jobProfile/save',
              type:'POST',
              data:$('#aaddHolidayForm').serialize(),
              success: function(data) {
                  console.log(data);
                  $('.is-invalid').removeClass('is-invalid');
                  if (data.fail) {
                      for (control in data.errors) {                                                
                          //set
                          $('input[name=' + control + ']').addClass('is-invalid');
                          $('#error-' + control).html(data.errors[control]);
                      }
                  } else {
                      $('#create_task').modal('hide');
                      window.location.reload();
                  }
              }
           });
           return false; // required to block normal submit since you used ajax
       }
});

//
//add submit form
$("#editProfileForm").validate({
      rules:{
        name:{
              required: true,                
          }, 
        department:{
              required: true,                
          },         
      },
      highlight: function (element) {
        $(element).closest('.form-group').addClass('errorDiv');
      },
      messages:{
          assign_user:{
              required: "Please seelct an user",                
          },
      },
      submitHandler: function(form) { 
        $("#overlay").fadeIn(300);　
            $.ajax({
              url:'/jobProfile/update',
              type:'POST',
              data:$('#editProfileForm').serialize(),
              success: function(data) {
                  console.log(data);
                  // var obj = JSON.parse(data);
                  if(data.fail==false){
                    $("#overlay").fadeOut(300);　
                    location.reload(true);                    
                  }
                  else
                  {
                    alert("Something went wrong!");
                  }
              }
           });
           return false; // required to block normal submit since you used ajax
       }
});

//
});
//
</script>             

@endsection