@extends('layouts.parent')

@section('title', 'Attendance History - Kidscholl')

@section('styles')
<style>
    .attendance-header {
        background: linear-gradient(135deg, #ECFDF5 0%, #F9FAF5 100%);
        border-radius: 24px;
        padding: 30px;
        margin-bottom: 30px;
        border-bottom: 4px solid var(--secondary);
    }

    .percent-circle-box {
        width: 140px;
        height: 140px;
        border-radius: 50%;
        background: radial-gradient(circle, #ffffff 60%, transparent 61%), 
                    conic-gradient(var(--secondary) calc(var(--percentage) * 1%), #f1f5f9 0);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px auto;
        box-shadow: 0 8px 20px rgba(78, 205, 196, 0.1);
    }

    .percent-text {
        font-family: 'Fredoka', sans-serif;
        font-size: 2.2rem;
        font-weight: 700;
        color: var(--dark);
    }

    .stats-card-item {
        padding: 14px 18px;
        border-radius: 16px;
        background-color: #f8fafc;
        border: 2px solid #f1f5f9;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: transform 0.2s ease;
    }

    .stats-card-item:hover {
        transform: translateY(-2px);
        background-color: #ffffff;
    }

    .log-table th {
        font-family: 'Fredoka', sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.8rem;
        letter-spacing: 0.5px;
        border-bottom: 2px solid #f1f5f9;
    }

    .status-badge-custom {
        font-family: 'Fredoka', sans-serif;
        font-weight: 700;
        font-size: 0.8rem;
        padding: 6px 16px;
        border-radius: 20px;
        text-transform: uppercase;
    }

    .status-present {
        background-color: #d1fae5;
        color: #065f46;
        border: 1px solid #a7f3d0;
    }

    .status-late {
        background-color: #fef3c7;
        color: #92400e;
        border: 1px solid #fde68a;
    }

    .status-absent {
        background-color: #fee2e2;
        color: #991b1b;
        border: 1px solid #fecaca;
    }
</style>
@endsection

@section('content')
<div class="attendance-header">
    <div class="row align-items-center">
        <div class="col-md-9">
            <h2 class="text-success mb-1"><i class="bi bi-calendar-check-fill me-2"></i> Attendance History</h2>
            <p class="text-secondary mb-0">Track your child's daily presence status and check overall attendance statistics.</p>
        </div>
        <div class="col-md-3 text-md-end mt-3 mt-md-0">
            <span class="badge bg-white text-success border border-2 border-success rounded-pill px-3 py-2 fw-bold font-monospace">
                Academic Progress
            </span>
        </div>
    </div>
</div>

<div class="row">
    <!-- Summary Cards -->
    <div class="col-lg-4 mb-4">
        <div class="portal-card h-100" style="border-bottom-color: var(--primary);">
            <h5 class="fw-bold text-dark mb-4 text-center text-lg-start"><i class="bi bi-pie-chart-fill text-danger me-2"></i> Attendance Rate</h5>
            
            <div class="text-center mb-4">
                <div class="percent-circle-box" style="--percentage: {{ $attendancePercentage }};">
                    <span class="percent-text">{{ $attendancePercentage }}%</span>
                </div>
                <span class="text-muted fw-bold small">Overall Presence Rate</span>
            </div>

            <hr class="dashed my-4">

            <div class="d-flex flex-column gap-3">
                <div class="stats-card-item" style="border-left: 4px solid #10b981;">
                    <span class="text-secondary fw-bold small"><i class="bi bi-check-circle-fill text-success me-2"></i> Present Days</span>
                    <strong class="text-dark fs-5">{{ $presentCount }}</strong>
                </div>
                <div class="stats-card-item" style="border-left: 4px solid #f59e0b;">
                    <span class="text-secondary fw-bold small"><i class="bi bi-clock-fill text-warning me-2"></i> Late Days</span>
                    <strong class="text-dark fs-5">{{ $lateCount }}</strong>
                </div>
                <div class="stats-card-item" style="border-left: 4px solid #ef4444;">
                    <span class="text-secondary fw-bold small"><i class="bi bi-x-circle-fill text-danger me-2"></i> Absent Days</span>
                    <strong class="text-dark fs-5">{{ $absentCount }}</strong>
                </div>
            </div>
        </div>
    </div>

    <!-- Details Logs -->
    <div class="col-lg-8 mb-4">
        <div class="portal-card h-100" style="border-bottom-color: var(--secondary);">
            <h5 class="fw-bold text-dark mb-4"><i class="bi bi-list-stars text-primary me-2"></i> Daily Log Records</h5>
            <div class="table-responsive">
                <table class="table align-middle log-table">
                    <thead>
                        <tr class="text-secondary">
                            <th>Date</th>
                            <th>Status</th>
                            <th>Remarks / Comments</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($attendances as $att)
                            @php
                                $statusClass = 'status-' . strtolower($att->status);
                            @endphp
                            <tr style="border-bottom: 1px solid #f1f5f9;">
                                <td class="fw-bold text-dark py-3">
                                    <i class="bi bi-calendar3 text-muted me-2"></i>
                                    {{ \Carbon\Carbon::parse($att->date)->format('d M Y - l') }}
                                </td>
                                <td>
                                    <span class="status-badge-custom {{ $statusClass }}">
                                        {{ $att->status }}
                                    </span>
                                </td>
                                <td class="text-secondary small">
                                    {{ $att->remarks ?: 'No remarks added' }}
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="3" class="text-center py-5 text-muted">
                                    <i class="bi bi-calendar-x fs-1 mb-2 d-block opacity-50"></i>
                                    No attendance logs available for this student profile yet.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection