@extends('layouts.app')

@section('content')
<style>
    body {
        background-color: #f4fdf6;
    }

    .attendance-container {
        background-color: #fff;
        border-radius: 15px;
        box-shadow: 0 6px 20px rgba(46, 125, 50, 0.15);
        padding: 30px;
        margin-top: 30px;
        transition: all 0.3s ease-in-out;
    }

    h2 {
        color: #2e7d32;
        font-weight: 700;
    }

    .card {
        border: none;
        border-radius: 12px;
        transition: transform 0.2s ease;
    }

    .card:hover {
        transform: translateY(-3px);
    }

    .card h5 {
        color: #2e7d32;
        font-weight: 600;
    }

    .btn-success {
        background-color: #2e7d32;
        border-color: #2e7d32;
    }

    .btn-success:hover {
        background-color: #256a28;
        border-color: #256a28;
    }

    .btn-warning {
        background-color: #ffb300;
        border-color: #ffb300;
        color: #000;
    }

    .btn-warning:hover {
        background-color: #e6a000;
        border-color: #e6a000;
    }

    table {
        border-radius: 10px;
        overflow: hidden;
    }

    .table thead {
        background-color: #a5d6a7;
        color: #1b5e20;
        font-weight: 600;
    }

    .badge {
        padding: 0.5em 0.9em;
        font-size: 0.9em;
    }
</style>

<div class="container attendance-container">

    <h2 class="mb-4">
        <i class="bi bi-person-check-fill me-2"></i>My Attendance
    </h2>

    {{-- ✅ Summary Cards --}}
    <div class="row g-4 mb-5 text-center">
        <div class="col-md-4">
            <div class="card shadow-sm h-100 py-3 border-0 bg-light">
                <h5>Present</h5>
                <p class="display-6 text-success fw-bold">{{ $totalPresent ?? 0 }}</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card shadow-sm h-100 py-3 border-0 bg-light">
                <h5>Absent</h5>
                <p class="display-6 text-danger fw-bold">{{ $totalAbsent ?? 0 }}</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card shadow-sm h-100 py-3 border-0 bg-light">
                <h5>Late</h5>
                <p class="display-6 text-warning fw-bold">{{ $totalLate ?? 0 }}</p>
            </div>
        </div>
    </div>

    {{-- ✅ Check-In / Check-Out --}}
    <div class="mb-4 text-center">
        @if(!isset($todayAttendance))
            <form action="{{ route('trainee.attendance.checkin') }}" method="POST">
                @csrf
                <button class="btn btn-success btn-lg shadow-sm">
                    <i class="bi bi-box-arrow-in-right me-2"></i> Check In
                </button>
            </form>
        @elseif(!$todayAttendance->check_out_time)
            <form action="{{ route('trainee.attendance.checkout') }}" method="POST">
                @csrf
                <button class="btn btn-warning btn-lg shadow-sm">
                    <i class="bi bi-box-arrow-right me-2"></i> Check Out
                </button>
            </form>
        @else
            <div class="alert alert-success d-inline-block shadow-sm py-2 px-4 mt-3">
                <i class="bi bi-check-circle-fill me-2"></i>You’ve completed attendance for today.
            </div>
        @endif
    </div>

    {{-- ✅ Attendance Table --}}
    <div class="table-responsive mt-5">
        <table class="table table-bordered text-center table-hover align-middle shadow-sm">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Date</th>
                    <th>Class</th>
                    <th>Trainer</th>
                    <th>Check In</th>
                    <th>Check Out</th>
                    <th>Status</th>
                    <th>Code</th>
                </tr>
            </thead>
            <tbody>
                @forelse($attendances as $index => $att)
                    <tr>
                        <td>{{ $attendances->firstItem() + $index }}</td>
                        <td>{{ \Carbon\Carbon::parse($att->attendance_date)->format('d M Y') }}</td>
                        <td>{{ $att->classRoom->name ?? 'N/A' }}</td>
                        <td>{{ $att->trainer->name ?? 'N/A' }}</td>
                        <td>{{ $att->check_in_time ?? '-' }}</td>
                        <td>{{ $att->check_out_time ?? '-' }}</td>
                        <td>
                            <span class="badge 
                                @if($att->status == 'present') bg-success
                                @elseif($att->status == 'late') bg-warning text-dark
                                @else bg-danger @endif">
                                {{ ucfirst($att->status) }}
                            </span>
                        </td>
                        <td>{{ $att->attendance_code ?? '-' }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="text-center text-muted py-4">
                            <i class="bi bi-emoji-frown me-2"></i>No attendance records found.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>

        <div class="d-flex justify-content-center mt-3">
            {{ $attendances->links('pagination::bootstrap-5') }}
        </div>
    </div>
</div>
@endsection