@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">Annual Holidays 2020</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 Holiday</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>Date</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 class="date">{{ date('l, d-M-Y',strtotime($item->date))}}</td>
                <td>Active</td>
                <td class="text-right">
                   @if( auth()->user()->role_id == 1 || auth()->user()->role_id == 2 )
                    <a href="javascript:;"  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>

<!-- /Page Content -->

<!-- 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 Holiday</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> You can custom holiday.</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>Date <span class="text-danger">*</span></label>
                        <div class="cal-icon">
                          <input class="form-control holiday_date commonDatepicker"  type="text" name="holiday_date" placeholder="dd-mm-yyyy">
                        </div>
                        <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">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 Holiday</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="editHolidayForm">
                @csrf
                <div class="form-header">               
                  <div class="add-client-tip" style="border: 1px solid #0083d9;padding: 12px;text-align: justify;">
                     <p> Edit holiday's title and date.</p>                    
                  </div>
                </div>
                <div class="form-group">                        
                    <label><b>Name:</b> <span class="old_name"></span></label>                   
                </div> 
                 <div class="form-group">                        
                    <label><b>Date:</b> <span class="old_date"></span></label>                     
                </div>  

                <div class="form-group">                        
                    <label>New title <span class="text-danger">*</span></label>
                    <input type="text" class="form-control " name="name">
                    <span class="errorDiv"></span>
                </div>  
               
                <div class="form-group ">                        
                    <label>New date <span class="text-danger">*</span></label>
                    <div class="cal-icon">
                      <input class="form-control holiday_date commonDatepicker"  type="text" name="holiday_date" placeholder="dd-mm-yyyy">
                    </div>
                    <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/holiday/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);
  $('#editHolidayForm')[0].reset();
  $('#editHolidaykModal').modal();

  if( rowID != 'undefined'){
  $.ajax({
        type: 'get',
        url: "{{route('/holiday/update')}}",
        data: {'id':rowID},        
        success: function (data) {
            console.log(data);
            $('#editHolidayForm')[0].reset();
            
            if(data.result !=null)
            {                              
                //check if primary data               
                $('.old_name').text(data.result.name);
                $('.old_date').text(moment(data.result.date).format('DD-MM-YYYY'));                
            }
        },
        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,                
          }, 
          holiday_date:{
              required: true,                
          },         
      },
      highlight: function (element) {
        $(element).closest('.form-group').addClass('errorDiv');
      },
      messages:{
          assign_user:{
              required: "Please seelct an user",                
          },
      },
      submitHandler: function(form) { 
            $.ajax({
              url:'/holiday/save',
              type:'POST',
              data:$('#aaddHolidayForm').serialize(),
              success: function(data) {
                  console.log(data);
                  // var obj = JSON.parse(data);
                  if(data.fail==false){
                    location.reload(true);                    
                  }
                  else
                  {
                    alert("Something went wrong!");
                  }
              }
           });
           return false; // required to block normal submit since you used ajax
       }
});

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

//
});
</script>     

@endsection