@extends('layouts.master')
@section('content')
<div class="h">
    @include('inc.header-nav')
    <div class="mx-auto container-fluid align-items-center pt-150">
        @include('inc.header-profile')

        <div class="card px-0 pt-3 border-radius-xl p-5 mb-5 mb-xl-8 pb-5">
            <div class="card-header px-0 border-0">
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label px-6 fw-bolder fs-3 mb-1">Assessments</span>
                    <span class="text-muted px-6 fs-7">Published final assessments by academic period</span>
                </h3>
            </div>

            <div class="card-body px-7 pt-5">
                @if (is_array($assessments) && count($assessments) > 0)
                    <div class="assessment-list">
                        @foreach ($assessments as $item)
                            <section class="assessment-period">
                                <div class="assessment-period__heading">
                                    <span class="assessment-period__eyebrow">Academic period</span>
                                    <span class="assessment-period__name">{{ $item->name }}</span>
                                </div>

                                <div class="assessment-period__content">
                                    @if (count($item->subjects) > 0)
                                        <div class="assessment-period__title">Subjects</div>
                                        <div class="assessment-table-wrap">
                                            <table class="table assessment-table align-middle table-row-dashed mb-0">
                                                <colgroup>
                                                    <col class="assessment-subject-col">
                                                    <col class="assessment-code-col">
                                                    <col class="assessment-remarks-col">
                                                    <col class="assessment-status-col">
                                                </colgroup>
                                                <thead>
                                                    <tr class="fw-bold text-muted bg-light">
                                                        <th class="rounded-start">Subject</th>
                                                        <th>Code</th>
                                                        <th>Remarks</th>
                                                        <th class="rounded-end text-center">Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($item->subjects as $row)
                                                        <tr>
                                                            <td class="fw-bold">{{ $row->name }}</td>
                                                            <td class="text-nowrap">{{ $row->code }}</td>
                                                            <td class="assessment-remarks text-transform-none">
                                                                {{ $row->subject_remarks ?: '—' }}
                                                            </td>
                                                            <td class="text-center text-transform-none">
                                                                @if ($row->subject_status)
                                                                    <span class="badge badge-secondary
                                                                        @if (str_contains(strtolower($row->subject_status), 'fail')) badge-danger @endif
                                                                        @if (str_contains(strtolower($row->subject_status), 'pass')) badge-success @endif">
                                                                        {{ $row->subject_status }}
                                                                    </span>
                                                                @else
                                                                    <span class="text-muted">—</span>
                                                                @endif
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    @else
                                        <div class="assessment-empty text-muted">
                                            No published assessments for this academic period.
                                        </div>
                                    @endif
                                </div>
                            </section>
                        @endforeach
                    </div>
                @else
                    <div class="alert alert-dismissible bg-primary d-flex flex-column flex-sm-row p-5 mb-10">
                        <i class="ki-duotone ki-shield-tick fs-2hx text-white me-4"><span class="path1"></span><span class="path2"></span></i>
                        <div class="d-flex flex-column text-light pe-0 pe-sm-10">
                            <h4 class="mb-2 text-white">No active subject offerings</h4>
                            <span>You are not currently enrolled.</span>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

@include('modals.payment-proof-modal')
@endsection

@push('styles')
<style>
    .assessment-list {
        display: grid;
        gap: 16px;
    }

    .assessment-period {
        display: grid;
        grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
        overflow: hidden;
        border: 1px solid #e4e6ef;
        border-radius: 12px;
        background: #fff;
    }

    .assessment-period__heading {
        display: flex;
        min-height: 130px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: #049d60;
        color: #fff;
        text-align: center;
    }

    .assessment-period__eyebrow {
        margin-bottom: 8px;
        color: rgba(255, 255, 255, .75);
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .assessment-period__name {
        font-size: 15px;
        font-weight: 700;
        line-height: 1.5;
    }

    .assessment-period__content {
        min-width: 0;
        padding: 20px 24px 18px;
    }

    .assessment-period__title {
        margin-bottom: 10px;
        color: #181c32;
        font-size: 15px;
        font-weight: 700;
    }

    .assessment-table-wrap {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .assessment-table {
        width: 100%;
        min-width: 720px;
        table-layout: fixed;
    }

    .assessment-table th,
    .assessment-table td {
        padding: 13px 14px !important;
        vertical-align: middle;
    }

    .assessment-table thead th {
        border-bottom: 0;
        white-space: nowrap;
    }

    .assessment-subject-col {
        width: 58%;
    }

    .assessment-code-col {
        width: 12%;
    }

    .assessment-remarks-col {
        width: 20%;
    }

    .assessment-status-col {
        width: 10%;
    }

    .assessment-remarks {
        overflow-wrap: anywhere;
    }

    .assessment-empty {
        display: flex;
        min-height: 90px;
        align-items: center;
        justify-content: center;
        padding: 20px;
        border: 1px dashed #d8dbe5;
        border-radius: 8px;
        background: #fafafa;
        text-align: center;
    }

    @media (max-width: 991.98px) {
        .assessment-period {
            grid-template-columns: 1fr;
        }

        .assessment-period__heading {
            min-height: auto;
            align-items: flex-start;
            padding: 18px 20px;
            text-align: left;
        }

        .assessment-period__eyebrow {
            margin-bottom: 4px;
        }

        .assessment-period__content {
            padding: 18px;
        }
    }

    @media (max-width: 575.98px) {
        .assessment-period__content {
            padding: 14px;
        }
    }
</style>
@endpush

@push('scripts')
@endpush