@extends('layouts.app')

@section('title', 'Teacher Dashboard')

@section('content')

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

.teacher-wrap {
    font-family: 'Poppins', sans-serif;
    color: #2d2f45;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 2rem;
}

.stat-card {
    background: #fff;
    border: 1.5px solid #e2e5ef;
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all .2s;
}

.stat-card:hover {
    border-color: #f5a623;
    box-shadow: 0 4px 16px rgba(245,166,35,.12);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.stat-pending { background: #eff6ff; }
.stat-forwarded { background: #fffbeb; }
.stat-approved { background: #f0fdf4; }
.stat-rejected { background: #fef2f2; }
.stat-total { background: #f0f1f7; }

.stat-content h3 {
    font-size: 12px;
    color: #9099b8;
    margin: 0 0 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.stat-content p {
    font-size: 28px;
    font-weight: 700;
    color: #2d2f45;
    margin: 0;
}

.table-section {
    background: #fff;
    border-radius: 15px;
    border: 1.5px solid #e2e5ef;
    overflow: hidden;
}

.table-header {
    padding: 20px 24px;
    border-bottom: 1.5px solid #e2e5ef;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.table-title {
    font-size: 16px;
    font-weight: 700;
    color: #2d2f45;
    margin: 0;
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead {
    background: #f7f8fc;
}

th {
    padding: 14px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: #414662;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1.5px solid #e2e5ef;
}

td {
    padding: 14px 16px;
    border-bottom: 1px solid #f0f1f7;
    font-size: 13px;
    color: #2d2f45;
}

tbody tr:hover {
    background: #f7f8fc;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.badge-pending { background: #eff6ff; color: #2563eb; }
.badge-forwarded { background: #fffbeb; color: #d97706; }
.badge-approved { background: #f0fdf4; color: #16a34a; }
.badge-rejected { background: #fef2f2; color: #dc2626; }

.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #414662;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    transition: background .2s;
}

.action-btn:hover {
    background: #f5a623;
}

.no-data {
    text-align: center;
    padding: 40px 20px;
}

.no-data-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.no-data-text {
    font-size: 14px;
    color: #9099b8;
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding: 20px 0 0;
}

.pagination a,
.pagination span {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #e2e5ef;
    text-decoration: none;
    color: #414662;
    font-size: 12px;
    font-weight: 600;
}

.pagination a:hover {
    background: #414662;
    color: #fff;
    border-color: #414662;
}

.pagination .active span {
    background: #414662;
    color: #fff;
    border-color: #414662;
}

@media(max-width:768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    table {
        font-size: 12px;
    }

    th, td {
        padding: 10px;
    }
}
</style>

<div class="teacher-wrap">

    {{-- Header --}}
    <div style="margin-bottom: 2rem;">
        <h1 style="font-size: 28px; font-weight: 700; margin: 0 0 8px; color: #2d2f45;">Leave Overview</h1>
        <p style="font-size: 14px; color: #9099b8; margin: 0;">Monitor all student leave requests</p>
    </div>

    {{-- Stats Grid --}}
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon stat-pending">📋</div>
            <div class="stat-content">
                <h3>Pending</h3>
                <p>{{ $stats['pending'] ?? 0 }}</p>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon stat-forwarded">➡️</div>
            <div class="stat-content">
                <h3>Forwarded</h3>
                <p>{{ $stats['forwarded'] ?? 0 }}</p>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon stat-approved">✓</div>
            <div class="stat-content">
                <h3>Approved</h3>
                <p>{{ $stats['approved'] ?? 0 }}</p>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon stat-rejected">✕</div>
            <div class="stat-content">
                <h3>Rejected</h3>
                <p>{{ $stats['rejected'] ?? 0 }}</p>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon stat-total">📊</div>
            <div class="stat-content">
                <h3>Total</h3>
                <p>{{ $stats['total'] ?? 0 }}</p>
            </div>
        </div>
    </div>

    {{-- Leave Requests Table --}}
    <div class="table-section">
        <div class="table-header">
            <h2 class="table-title">All Leave Requests</h2>
        </div>

        @if($leaveRequests->count() > 0)
            <table>
                <thead>
                    <tr>
                        <th>Student</th>
                        <th>Type</th>
                        <th>Duration</th>
                        <th>Status</th>
                        <th>Applied On</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($leaveRequests as $request)
                    <tr>
                        <td>
                            <strong>{{ $request->student->name ?? 'N/A' }}</strong><br>
                            <span style="color: #9099b8; font-size: 11px;">{{ $request->student->roll_no ?? '-' }}</span>
                        </td>
                        <td>{{ $request->leave_type_label ?? '—' }}</td>
                        <td>
                            {{ $request->from_date->format('d M') }} -
                            {{ $request->to_date ? $request->to_date->format('d M') : $request->from_date->format('d M') }}
                        </td>
                        <td>
                            <span class="badge badge-{{ $request->status }}">
                                {{ ucfirst($request->status) }}
                            </span>
                        </td>
                        <td>{{ $request->created_at->format('d M Y') }}</td>
                        <td>
                            <a href="{{ route('leave.show', $request->id) }}" class="action-btn">
                                View
                            </a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>

            {{-- Pagination --}}
            <div style="padding: 20px;">
                {{ $leaveRequests->links() }}
            </div>
        @else
            <div class="no-data">
                <div class="no-data-icon">📭</div>
                <p class="no-data-text">No leave requests found</p>
            </div>
        @endif
    </div>

</div>

@endsection