@extends('layouts.appv2')

@section('content')


   


            

                <div class="card" style="border-radius: 20px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
                <div class="card-header" >
                    <div class="d-flex justify-content-between align-items-center mb-0">
                        <h5>Update Leave Entitled History</h5>
                        <div class="btn-toolbar mb-2 mb-md-0">
                            <a href="{{ route('admins.leavestaff') }}" class="btn btn-sm btn-secondary mt-1 mb-1" style="width:70px; text-align: center; border-radius: 50px;">
                                Back
                            </a>
                        </div>
                    </div> 
                </div>

                <div class="card-body" >
              
                         <div class="no-gutters mb-3">
                           <div class="row">
                             <div class="col-sm-2">NEW UPDATE</div>
                             <div class="col-sm-1"><i class="fas fa-circle text-success"></i></div>
                             <div class="w-100"></div>
                             <div class="col-sm-2">OLD DATA</div>
                             <div class="col-sm-1"><i class="fas fa-circle text-danger"></i></div>
                           </div>
                         </div>

                         <div class="dt-responsive table-responsive">
                            <table class="table table-sm table-hover results table-bordered" style="font-size: 0.75rem; width: 100%;">
                                <thead class="text-center thead-dark">
                                    <tr>
                                        <th style="padding: 0.3rem; white-space: nowrap;">No</th>
                                        <th style="padding: 0.3rem; white-space: nowrap;">Updated Date</th>
                                        <th style="padding: 0.3rem; white-space: nowrap;">Change Title</th>
                                        <th style="padding: 0.3rem; white-space: nowrap;">Name</th>    
                                        <th style="padding: 0.3rem; white-space: nowrap;">AL</th>
                                        <th style="padding: 0.3rem; white-space: nowrap;">EL</th>
                                        <th style="padding: 0.3rem; white-space: nowrap;">ML</th>
                                        <th style="padding: 0.3rem; white-space: nowrap;">RL</th>
                                        <th style="padding: 0.3rem; white-space: nowrap;">Attachment</th>
                                        <th style="padding: 0.3rem; white-space: nowrap;">Remark</th>
                                    </tr>
                                </thead>
                                
                                @php $counter = 1 @endphp
                                @foreach ($leaves as $leave)
                                <tbody>
                                    <tr>
                                        <td class="align-middle text-center" style="padding: 0.3rem;">{{ $counter++ }}</td>
                                        <td class="align-middle text-center" style="padding: 0.3rem;">    {{ $leave->created_date ? \Carbon\Carbon::parse($leave->created_date)->format('d M Y') : 'N/A' }}</td>
                                        <td class="align-middle text-center" style="padding: 0.3rem;">{{ $leave->change_title }}</td>
                                        <td class="align-middle text-center" style="padding: 0.3rem;">{{ $leave->employee_first_name }}</td>
                                        <td style="padding: 0.3rem;">
                                            <div class="text-success font-weight-bold align-middle text-center" style="font-size: 0.7rem;">{{ $leave->new_al }}</div>
                                            <div class="text-danger font-weight-bold align-middle text-center" style="font-size: 0.7rem;">{{ $leave->old_al }}</div>
                                        </td>
                                        <td style="padding: 0.3rem;">
                                            <div class="text-success font-weight-bold align-middle text-center" style="font-size: 0.7rem;">{{ $leave->new_el }}</div>
                                            <div class="text-danger font-weight-bold align-middle text-center" style="font-size: 0.7rem;">{{ $leave->old_el }}</div>
                                        </td>
                                        <td style="padding: 0.3rem;">
                                            <div class="text-success font-weight-bold align-middle text-center" style="font-size: 0.7rem;">{{ $leave->new_ml }}</div>
                                            <div class="text-danger font-weight-bold align-middle text-center" style="font-size: 0.7rem;">{{ $leave->old_ml }}</div>
                                        </td>
                                        <td style="padding: 0.3rem;">
                                            <div class="text-success font-weight-bold align-middle text-center" style="font-size: 0.7rem;">{{ $leave->new_rl }}</div>
                                            <div class="text-danger font-weight-bold align-middle text-center" style="font-size: 0.7rem;">{{ $leave->old_rl }}</div>
                                        </td>
                                        <td style="padding: 0.3rem;">
                                            @if($leave->attachment)
                                                <a href="{{ asset('documentstaff/' . $leave->attachment) }}" class="btn btn-primary btn-sm " style="font-size: 0.7rem; padding: 0.2rem 0.4rem;">Download</a>
                                            @else
                                                <button class="btn btn-secondary btn-sm align-middle text-center" style="font-size: 0.7rem; padding: 0.2rem 0.4rem;" onclick="alert('There is no file uploaded.');">Download</button>
                                            @endif
                                        </td>
                                        <td class="align-middle" style="padding: 0.3rem;">{{ $leave->remark }}</td>
                                    </tr>
                                </tbody>
                                @endforeach
                            </table>
                        </div>
                </div>
                </div>
                




    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
    <!-- Bootstrap DatePicker JS -->
    <script src="https://cdn.jsdelivr.net/npm/bs5-datepicker@1.2.0/dist/js/bootstrap-datepicker.min.js"></script>
@endsection