@extends('layouts.mainlayout')
@section('title', 'Applied Comp Off Leave Balance')
@section('main')
<!-- Single item selection -->
<div class="card">
    <div class="card-header header-elements-inline">
        <h5 class="card-title icon-users4 font-weight-bold">  Applied Comp Off Leave Balance Report</h5>
        {{-- <a href="{{ route('apply-comp-off-leave.create')}}"><button class="icon-plus2 btn btn-success">Apply Leave</button></a> --}}
    </div>
        <table class="table datatable-select-single">
        <thead>
            <tr>
                <th>Leave</th>
                <th>Date</th>
                <th>Status</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach($leave as $leave)
                @if(Auth::user()->id == $leave->user_id)
                    <tr>
                        <td><a href="#" data-toggle="tooltip" data-placement="right" title="{{$leave->reason}}">
                            {{$leave->Leave->name }}</a>
                        </td>
                        <td>{{Carbon\Carbon::parse($leave->date)->format(config('settings.php_date_format'))}}</td>
                        <td>{{ $leave->status }}</td>
                        
                        <td>
                       

                        @if($leave->status == "Pending")
                        <form action="{{ route('apply-comp-off-leave.update',$leave->id) }}" method="POST">
                            <input type="hidden" name="_method" value="PATCH"/>
                            @csrf
                            <div class="row">
                                <div class="col-md-6">
                                    <select type="text" name="status" id="userLeaveAction" class="form-control form-control-select2 required" @if(isset($leaves)) value="{{$leaves->status}}" data-fouc @endif>
                                        <option disabled selected></option>
                                        <option value="Cancel">Cancel</option>
                                    </select>
                                </div>
                                <div class ="field col md-6">
                                    <div class="control">
                                        @if(Carbon\Carbon::now()->between( Carbon\Carbon::parse($leave->from_date), Carbon\Carbon::parse($leave->to_date)) || Carbon\Carbon::now() >= ( Carbon\Carbon::parse($leave->from_date)))
                                            <button type="button" class="btn bg-primary disabled">Update</button>
                                        @else
                                            <button type="submit" id="updateStatus" class="btn bg-primary disabled" onclick="return confirm('Are you sure you want to cancel this leave?');">Update</button>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </form>
                        @endif
                        @if($leave->status == "Cancel") 
                        <form method="Post" action="{{ route('apply-comp-off-leave.destroy',$leave->id) }}">
                            @method('DELETE')
                            @csrf
                            
                            <div class ="field">
                                <div class="control">
                                    <button type="submit" class="btn btn-danger icon-bin"></button>
                                </div>
                            </div>   
                        </form>
                        @endif
                        </td>
                    </tr>
                @endif
            @endforeach
        </tbody>
    </table>
</div>
<!-- /Single item selection -->
@endsection
@section('js')
  <script>
    $(document).ready(function(){
            $('.datatable-select-single').DataTable({
                        "aLengthMenu": [25, 50, 75, 100],
                        "pageLength": 25,
                        "destroy": true,
                        buttons: {            
                            dom: {
                                button: {
                                    className: 'btn btn-light'
                                }
                            },
                            buttons: [
                                
                            ]
                        }
            });
        $('[data-toggle="tooltip"]').tooltip();

        $("#userLeaveAction").change(function(){
            if($("#userLeaveAction").val() == 'Cancel'){
                $('#updateStatus').removeClass('disabled');
            }
            
        });
    });
  </script>
@endsection