@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 d-flex justify-content-between align-items-center">
        <h5>Leaves to Approve</h5>
        <!-- History button -->
        <button type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#historyModal">View History</button>
    </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>Leave Type</th>
                    <th>Date Leaves</th>
                    <th>Status</th>
                    <th>Action</th>
                </thead>

                @if($approveleave->isEmpty())
                <tbody>
                    <tr>
                        <td colspan="5" class="text-center">NO LEAVES NEED TO APPROVE YET</td>
                    </tr>
                </tbody>
                @else
                @foreach($approveleave as $leave)
                <tbody>
                    <tr>
                        <td>{{ $leave->employee_first_name }}</td>
                        <td>{{ $leave->leavetype_code }}</td>
                        <td>{{ \Carbon\Carbon::parse($leave->start_date)->format('l, d M Y') }} - {{ \Carbon\Carbon::parse($leave->end_date)->format('l, d M Y') }}</td>
                        <td>{{ $leave->display_status }}</td>
                        <td>
                            <a href="{{ route('action.leaves', $leave->leave_apply_id) }}" class="text-primary">Action</a>
                        </td>
                    </tr>
                </tbody>
                @endforeach
                @endif
            </table>
        </div>
    </div>
</div>

<!-- Modal -->
<!-- Modal -->
<div class="modal fade" id="historyModal" tabindex="-1" aria-labelledby="historyModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="historyModalLabel">Leave History</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Employee</th>
                                <th>Leave Type</th>
                                <th>Action By</th>
                                <th>Action</th>
                                <th>Comments</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($leaveHistory as $history)
                                <tr>
                                    <td>{{ \Carbon\Carbon::parse($history->created_date)->format('d M Y, h:i A') }}</td>
                                    <td>{{ $history->employee_name }}</td>
                                    <td>{{ $history->leave_type }}</td>
                                    <td>{{ $history->action_by_name }}</td>
                                    <td>
                                        <span class="badge badge-{{ 
                                            strtolower($history->action) === 'approved' ? 'success' : 
                                            (strtolower($history->action) === 'rejected' ? 'danger' : 
                                            (strtolower($history->action) === 'cancelled' ? 'warning' : 'info'))
                                        }}">
                                            {{ $history->action }}
                                        </span>
                                    </td>
                                    <td>{{ $history->comments }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center">No history records found</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </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