@extends('layouts.app')

@section('content')
<div class="container my-5">

    {{-- Header --}}
    <div class="text-center mb-5">
        <h2 class="fw-bold text-success mb-2">📋 My Assignments</h2>
        <p class="text-muted fs-5">Track your progress and payments in one place</p>
    </div>

    @php
        $assignments = Auth::user()->assignments()->with(['classRoom', 'center'])->get();
    @endphp

    @if($assignments->isEmpty())
        <div class="alert alert-info text-center shadow-sm rounded-4 py-4">
            <h5 class="fw-semibold mb-1">No assignments available yet</h5>
            <p class="mb-0 text-muted">Once you’re assigned a class, it will appear here.</p>
        </div>
    @else
        {{-- Desktop Table View --}}
        <div class="d-none d-md-block">
            <div class="table-responsive shadow-sm rounded-4 overflow-hidden">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-success">
                        <tr>
                            <th>Class</th>
                            <th>Center</th>
                            <th>Duration</th>
                            <th>Days</th>
                            <th>Total</th>
                            <th>Paid</th>
                            <th>Due</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($assignments as $a)
                            @php
                                $today = now();
                                $statusClass = $a->amount_due == 0 ? 'bg-success' :
                                               ($a->amount_paid > 0 ? 'bg-warning text-dark' : 'bg-secondary');
                                $statusText = $a->amount_due == 0 ? 'Completed' :
                                              ($a->amount_paid > 0 ? 'Partial' : 'Pending');
                            @endphp
                            <tr>
                                <td>{{ $a->classRoom->class_number ?? '—' }}</td>
                                <td>{{ $a->center->name ?? '—' }}</td>
                                <td>{{ \Carbon\Carbon::parse($a->start_date)->format('d M') }} - {{ \Carbon\Carbon::parse($a->end_date)->format('d M Y') }}</td>
                                <td>{{ $a->number_of_days }}</td>
                                <td>Ksh {{ number_format($a->total_amount, 2) }}</td>
                                <td>Ksh {{ number_format($a->amount_paid ?? 0, 2) }}</td>
                                <td>Ksh {{ number_format($a->amount_due ?? 0, 2) }}</td>
                                <td><span class="badge rounded-pill fs-6 {{ $statusClass }}">{{ $statusText }}</span></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Mobile Card View --}}
        <div class="d-md-none">
            <div class="row g-4">
                @foreach($assignments as $a)
                    @php
                        $today = now();
                        $statusClass = $a->amount_due == 0 ? 'bg-success' :
                                       ($a->amount_paid > 0 ? 'bg-warning text-dark' : 'bg-secondary');
                        $statusText = $a->amount_due == 0 ? 'Completed' :
                                      ($a->amount_paid > 0 ? 'Partial' : 'Pending');
                    @endphp
                    <div class="col-12">
                        <div class="assignment-card p-4 shadow-sm rounded-4 bg-light">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <h5 class="fw-bold text-success mb-0">Class {{ $a->classRoom->class_number ?? '—' }}</h5>
                                <span class="badge {{ $statusClass }} rounded-pill px-3">{{ $statusText }}</span>
                            </div>
                            <p class="mb-1"><i class="bi bi-geo-alt text-success me-1"></i> {{ $a->center->name ?? '—' }}</p>
                            <p class="mb-1"><strong>Duration:</strong> {{ \Carbon\Carbon::parse($a->start_date)->format('d M') }} - {{ \Carbon\Carbon::parse($a->end_date)->format('d M Y') }}</p>
                            <p class="mb-1"><strong>Days:</strong> {{ $a->number_of_days }}</p>
                            <hr>
                            <div class="small">
                                <p class="mb-1"><strong>Total:</strong> Ksh {{ number_format($a->total_amount, 2) }}</p>
                                <p class="mb-1"><strong>Paid:</strong> Ksh {{ number_format($a->amount_paid ?? 0, 2) }}</p>
                                <p class="mb-0"><strong>Due:</strong> Ksh {{ number_format($a->amount_due ?? 0, 2) }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif
</div>

{{-- Styles --}}
<style>
.assignment-card {
    background: #ffffff;
    border-left: 5px solid #198754;
    transition: all 0.3s ease;
}
.assignment-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.75rem 1.5rem rgba(0,0,0,0.1);
}
.table {
    border-radius: 0.75rem;
    overflow: hidden;
}
.badge {
    font-weight: 600;
}
</style>
@endsection