@extends('layouts.app')

@section('content')
<div class="container py-4">

    {{-- Header --}}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h3 class="fw-bold text-success mb-0">
            <i class="bi bi-people-fill me-2"></i> Trainees (Student) Assignments
        </h3>
        <a href="{{ route('assignments.create') }}" class="btn btn-success shadow-sm px-3">
            <i class="bi bi-plus-circle me-1"></i> New Assignment
        </a>
    </div>

    {{-- Success Message --}}
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show shadow-sm">
            <i class="bi bi-check-circle-fill me-1"></i> {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    {{-- Table --}}
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-success text-white fw-semibold">
            <i class="bi bi-list-task me-1"></i> Assignment Overview
        </div>

        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light text-success text-center">
                    <tr>
                        <th>#</th>
                        <th>Student</th>
                        <th>National ID</th>
                        <th>County</th>
                        <th>Center</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>

                <tbody>
                    @forelse ($assignments as $index => $assignment)
                        @php
                            $student = $assignment->student;
                            $status = $assignment->end_date < now() ? 'Completed' : 'Active';
                        @endphp
                        <tr class="text-center">
                            <td>{{ $index + 1 }}</td>
                            <td class="text-start fw-semibold text-success">{{ $student->name ?? 'N/A' }}</td>
                            <td>{{ $student->id_number ?? '—' }}</td>
                            <td>{{ $student->county->name ?? '—' }}</td>
                            <td>{{ $assignment->center->name ?? '—' }}</td>
                            <td>
                                <span class="badge rounded-pill {{ $status === 'Completed' ? 'bg-success-subtle text-success' : 'bg-light text-success border border-success' }}">
                                    {{ $status }}
                                </span>
                            </td>
                            <td>
                                <button class="btn btn-sm btn-outline-success"
                                        data-bs-toggle="modal"
                                        data-bs-target="#assignmentModal{{ $assignment->id }}">
                                    <i class="bi bi-eye"></i> View
                                </button>
                            </td>
                        </tr>

                        {{-- Modal --}}
                        <div class="modal fade" id="assignmentModal{{ $assignment->id }}" tabindex="-1"
                             aria-labelledby="assignmentModalLabel{{ $assignment->id }}" aria-hidden="true">
                            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                                <div class="modal-content">
                                    <div class="modal-header bg-success text-white">
                                        <h5 class="modal-title" id="assignmentModalLabel{{ $assignment->id }}">
                                            <i class="bi bi-person-badge me-1"></i> {{ $student->name ?? 'Student Details' }}
                                        </h5>
                                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                    </div>
                                    <div class="modal-body">

                                        <div class="row g-3">
                                            <div class="col-md-6">
                                                <h6 class="text-success fw-bold">Personal Info</h6>
                                                <p><strong>National ID:</strong> {{ $student->id_number ?? '—' }}</p>
                                                <p><strong>Phone:</strong> {{ $student->phone ?? '—' }}</p>
                                                <p><strong>Email:</strong> {{ $student->email ?? '—' }}</p>
                                                <p><strong>County:</strong> {{ $student->county->name ?? '—' }}</p>
                                                <p><strong>Sub-county:</strong> {{ $student->subCounty->name ?? '—' }}</p>
                                            </div>
                                            <div class="col-md-6">
                                                <h6 class="text-success fw-bold">Assignment Info</h6>
                                                <p><strong>Center:</strong> {{ $assignment->center->name ?? '—' }}</p>
                                                <p><strong>Class:</strong> {{ $assignment->classRoom->class_number ?? '—' }}</p>
                                                <p><strong>Start Date:</strong> {{ \Carbon\Carbon::parse($assignment->start_date)->format('d M Y') }}</p>
                                                <p><strong>End Date:</strong> {{ \Carbon\Carbon::parse($assignment->end_date)->format('d M Y') }}</p>
                                                <p><strong>Days:</strong> {{ $assignment->number_of_days }}</p>
                                            </div>
                                        </div>

                                        <hr>

                                        <div class="row g-3">
                                            <div class="col-md-6">
                                                <h6 class="text-success fw-bold">Payment Info</h6>
                                                <p><strong>Rate/Day:</strong> Ksh {{ number_format($assignment->payment_rate_per_day, 2) }}</p>
                                                <p><strong>Total Amount:</strong> Ksh {{ number_format($assignment->total_amount, 2) }}</p>
                                                <p><strong>Paid:</strong> Ksh {{ number_format($assignment->amount_paid, 2) }}</p>
                                                <p><strong>Due:</strong> Ksh {{ number_format($assignment->amount_due, 2) }}</p>
                                            </div>
                                            <div class="col-md-6 d-flex flex-column justify-content-center text-center">
                                                <span class="badge fs-6 px-4 py-2 rounded-pill {{ $status === 'Completed' ? 'bg-success text-white' : 'bg-warning text-dark' }}">
                                                    {{ $status }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="modal-footer">
                                        <a href="{{ route('assignments.edit', $assignment->id) }}" class="btn btn-outline-warning">
                                            <i class="bi bi-pencil"></i> Edit
                                        </a>
                                        <form action="{{ route('assignments.destroy', $assignment->id) }}" method="POST" class="d-inline"
                                              onsubmit="return confirm('Delete this assignment?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-outline-danger">
                                                <i class="bi bi-trash"></i> Delete
                                            </button>
                                        </form>
                                        <button type="button" class="btn btn-success" data-bs-dismiss="modal">Close</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    @empty
                        <tr>
                            <td colspan="7" class="text-center text-muted py-4">
                                <i class="bi bi-emoji-frown"></i> No assignments found.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- Styling --}}
<style>
    .table-hover tbody tr:hover {
        background-color: #f6fff6 !important;
    }
    .btn-success {
        background-color: #2e7d32;
        border: none;
    }
    .btn-success:hover {
        background-color: #1b5e20;
    }
    .badge.bg-success-subtle {
        background-color: #e6f4ea !important;
    }
</style>
@endsection