@extends('layouts.mainlayout')
@section('title', 'Leave')
@section('main')
<style>
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
</style>    
<!-- Single item selection -->
<div class="card">
    <div class="card-header header-elements-inline">
        <h5 class="card-title icon-users4 font-weight-bold"> Leaves</h5>
        <a href="{{ route('leave.create')}}"><button class="icon-plus2 btn btn-success">Add New</button></a>
    </div>
        <table class="table datatable-select-single">
        <thead>
            <tr>
                <th>Leave</th>
                <th>Type</th>
                
                @if(auth()->user()->can('Edit define leaves'))
                <th>Action</th>
                @endif
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($leaves as $leave)
                <tr>
                    <td>{{ $leave->name}}</td>
                    <td>{{ $leave->type}}</td>
                    <td><div class="row">
                        @if(auth()->user()->can('Edit define leaves') && $leave->system_generated == 0)
                        <a href="{{ route('leave.edit',$leave->id) }}"><button class="icon-pencil7" style="color:#3699FF !important;"></button></a>
                        <form method="Post" action="{{route('leave.destroy',$leave->id)}}" onsubmit="return confirmDelete();">
                            @method('DELETE')
                            @csrf
                            &nbsp; &nbsp;<button type="submit" class="icon-bin" style="color:#dc3545 !important;"></button>
                                 
                        </form>
                        @endif
                        <!-- @if ($leave->system_generated == 1)
                        <a href="{{ route('leave-setting.create') }}">
                        <button class="icon-pencil7" style="color:#3699FF !important;"></button>
                        </a>
                        
                        <form method="Post" action="{{route('leave.destroy',$leave->id)}}" onsubmit="return confirmDelete();">
                            @method('DELETE')
                            @csrf
                            &nbsp; &nbsp;<button type="submit" class="icon-bin" style="color:#dc3545 !important;"></button>
                                 
                        </form>
                        @endif -->
                        </div>
                    </td>
                    <td class="toggle-container"> 
                        <label class="switch">
                        <input type="checkbox"  leaveid-value="{{$leave->id}}" class="toggleButton" value="">
                        <span class="slider round"></span>
                        </label>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>
<!-- /Single item selection -->
<script>
function confirmDelete() {
    var r = confirm("Are you sure, you want to delete this leave type?");
    if (r == false) {
        return false;
    } else {
        return true;
    }
}

document.addEventListener('DOMContentLoaded', function () {
  const toggleButtons = document.getElementsByClassName('toggleButton');
  leaveStatus = @json($leave_status);

  $.each(leaveStatus, function (index, leave) {
    const toggleButton = toggleButtons[index];
    toggleButton.checked = leave.status == '0';

    if (toggleButton.checked) {
      $('.toggleButton').val(toggleButton.checked);
      // Use jQuery change event on a single button
      $(toggleButton).change(function () {
        leave.status = toggleButton.checked ? '0' : '1';
      });
    }
  });
});

document.addEventListener('DOMContentLoaded', function () {
  const toggleButtons = document.getElementsByClassName('toggleButton');
  leaveStatus = @json($leave_status);

  $.each(leaveStatus, function (index, leave) {
    const toggleButton = toggleButtons[index];

    toggleButton.checked = leave.status == '0';

    // Change event on a single button
    $(toggleButton).change(function () {
        leave.status = toggleButton.checked ? '1' : '0';
        const leaveId = $(toggleButton).attr('leaveid-value');
        let newStatus = leave.status; 
        // Toggle the status
        if (newStatus === '1') {
            newStatus = '0';
        } else {
            newStatus = '1';
        }

        $.ajax({
            url: 'updateLeaveStatus',
            method: 'POST',
            data: {
            leaveId: leaveId,
            newStatus: newStatus,
            },
            success: function (response) {
            console.log(response);
            },
            error: function (error) {
            console.error(error);
            },
        });
    });
  });
});


</script>
@endsection