@extends('layouts.app')

@section('content')
<section id="dom">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between">
                    <div class="card-title-wrap bar-teal">
                        <h4 class="card-title">Leave Requests</h4>
                        <p class="card-text">Here you can see the list of existing Leave.</p>
                    </div>
                    
                </div>
                <input type="hidden" id="sizeOf" value="{{sizeof($leaves)}}">
                <div class="card-body collapse show">
                    <div class="card-block card-dashboard table-responsive">
                        <table class="table table-striped table-bordered" id="dTable">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Start Date</th>
                                    <th>End Date</th>
                                    <th>Reason</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($leaves as $leave)
                                <tr>
                                    <td>{{$leave->user->name}}</td>
                                    <td>{{$leave->start_date}}</td>
                                    <td>{{$leave->end_date}}</td>
                                    <td>{{$leave->reason}}</td>
                                    <td><span class="badge {{$leave->is_approved==1? 'bg-success' : 'bg-danger'}} white">{{$leave->is_approved==1? 'Approved' : 'Pending'}}</span></td>
                                    <td>
                                        <a href="{{$leave->is_approved==0 ? 'leaveApproval/'.$leave->id : 'javascript:;'}}"  class="success p-0 mr-2 align-items-center d-flex mb-1" >
                                            <i class="ft-check-circle font-medium-3 mr-1"></i> Approve
                                        </a>
                                        {{-- <a href="leaveReject/{{$leave->id}}" class="danger p-0 mr-2 align-items-center d-flex" >
                                            <i class="ft-x font-medium-3 mr-1"></i>  Reject
                                        </a> --}}
                                    </td>
                                </tr>
                                    
                                @empty
                                    <tr>
                                        <td colspan="6">No record Found</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@section('afterScript')

    <script>
        $(document).ready(function(){
            if($('#sizeOf').val()>0)
            {
                $('#dTable').DataTable();
            }
        });
    </script>
@endsection