@extends('layouts.userapp')

@section('content')

<style>
    /* Adjust padding and font size for smaller devices */
    @media (max-width: 768px) {
        .table-responsive table {
            font-size: 12px; /* Smaller font for smaller screens */
        }
        .table-responsive td, .table-responsive th {
            padding: 8px; /* Reduce padding */
        }
    }
</style>

            @php
                use Carbon\Carbon;
            @endphp


                @if(session('success'))
                    <div class="alert alert-success">
                        {{ session('success') }}
                    </div>
                @endif

<div class="card" style="border-radius: 20px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
    <div class="card-header">
        <h5>Overtime to Approve</h5>
    </div>
    <div class="card-body">
        <div class="table-responsive" style="overflow-x: auto;">
            <table class="table table-hover table-bordered">
                <thead class="thead-dark">
                    <th>Employee Name</th>
                    <th>OT Type</th>
                    <th>Hours</th>
                    <th>Total Hours</th>
                    <th>Date</th>
                    <th>Status</th>
                    <th>Action</th>
                </thead>

                @if($toapprovelist->isEmpty())
                <tbody>
                    <tr>
                        <td colspan="7" class="text-center">NO OVERTIME NEED TO APPROVE YET</td>
                    </tr>
                </tbody>
                @else
                @foreach($toapprovelist as $toapprovelist)
                <tbody>
                    <td>{{ $toapprovelist->employee_first_name }}</td>
                    <td>{{ $toapprovelist->overtime_for }}</td>
                    <td>{{ \Carbon\Carbon::parse($toapprovelist->start_hours)->format('g:i A') }} - {{ \Carbon\Carbon::parse($toapprovelist->end_hours)->format('g:i A') }}</td>
                    <td>{{ $toapprovelist->total_hours }}</td>
                    <td>{{ \Carbon\Carbon::parse($toapprovelist->date)->format('l, d M Y') }}</td>
                    <td>{{ $toapprovelist->status_text}}</td>
                    <td>
                        <a href="{{ route('action.overtime', $toapprovelist->overtime_id)}}">View</a>
                    </td>
                </tbody>
                @endforeach
                @endif
            </table>
        </div>
    </div>
</div>


  






      


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
@endsection