@extends('layouts.app')

@section('title', 'Rekapitulasi Nilai')
@section('page-title', 'Rekapitulasi Nilai')

@section('content')
@php
    $formatNilai = fn($value) => $value === null ? '—' : number_format((float) $value, 2, ',', '.');
    $query = request()->query();
@endphp

@php
    $formatNilai = fn($value) => $value === null ? '-' : number_format((float) $value, 2, ',', '.');
@endphp

<style>
    .rekap-table th,
    .rekap-table td {
        vertical-align: top;
        font-size: 13px;
        white-space: normal;
    }
    .rekap-table .col-no { width: 54px; }
    .rekap-table .col-nim { width: 110px; }
    .rekap-table .col-score { width: 94px; text-align: center; }
    .rekap-table .col-status { width: 150px; }
    .rekap-wrap {
        overflow-x: auto;
        max-width: 100%;
    }
    .rekap-mobile-card {
        border: 1px solid #e5ddff;
        border-radius: 10px;
        padding: 14px;
        background: #fff;
        box-shadow: 0 6px 18px rgba(49, 33, 94, .06);
    }
    .rekap-mobile-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .rekap-label {
        color: #6b7280;
        font-size: 12px;
        margin-bottom: 2px;
    }
    .rekap-value {
        color: #1f2937;
        font-size: 14px;
        font-weight: 600;
        overflow-wrap: anywhere;
    }
    @media (max-width: 767.98px) {
        .rekap-desktop { display: none !important; }
        .rekap-mobile { display: grid !important; gap: 12px; }
        .rekap-mobile-grid { grid-template-columns: 1fr; }
    }
    @media (min-width: 768px) {
        .rekap-mobile { display: none !important; }
    }
</style>

<div class="card p-4 mb-4">
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3">
        <div>
            <h6 class="student-card-title mb-1">Rekapitulasi Nilai Mahasiswa</h6>
            <div class="text-muted small">Data read-only dari nilai yang sudah tersimpan. Halaman ini tidak mengubah data penilaian.</div>
        </div>
        <div class="student-action-buttons">
            <a href="{{ route('admin.rekapitulasi-nilai.export.csv', $query) }}" class="btn btn-sm btn-outline-primary">
                <i class="bi bi-filetype-csv me-1"></i> Export CSV
            </a>
            <a href="{{ route('admin.rekapitulasi-nilai.export.xlsx', $query) }}" class="btn btn-sm btn-outline-success">
                <i class="bi bi-file-earmark-spreadsheet me-1"></i> Export XLSX
            </a>
        </div>
    </div>
</div>

<div class="card p-4 mb-4">
    <form method="GET" action="{{ route('admin.rekapitulasi-nilai.index') }}" class="row g-3 align-items-end">
        <div class="col-md-3">
            <label class="form-label">Cari Nama/NIM</label>
            <input type="text" name="search" class="form-control" value="{{ request('search') }}" placeholder="Nama mahasiswa atau NIM">
        </div>
        <div class="col-md-3">
            <label class="form-label">Instansi/Mitra</label>
            <input type="text" name="instansi" class="form-control" value="{{ request('instansi') }}" placeholder="Nama instansi atau mitra">
        </div>
        <div class="col-md-3">
            <label class="form-label">Status Penilaian</label>
            <select name="status" class="form-select">
                <option value="">Semua Status</option>
                @foreach($statusOptions as $key => $label)
                    <option value="{{ $key }}" @selected(request('status') === $key)>{{ $label }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-2">
            <label class="form-label">Baris</label>
            <select name="per_page" class="form-select">
                @foreach($perPageOptions as $option)
                    <option value="{{ $option }}" @selected((int) request('per_page', 10) === $option)>{{ $option }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-1 d-grid">
            <button type="submit" class="btn btn-primary">Filter</button>
        </div>
        @if(request()->hasAny(['search', 'instansi', 'status']))
            <div class="col-12">
                <a href="{{ route('admin.rekapitulasi-nilai.index') }}" class="btn btn-sm btn-outline-secondary">Reset Filter</a>
            </div>
        @endif
    </form>
</div>

<div class="card p-4">
    <div class="rekap-wrap rekap-desktop">
        <table class="table table-hover align-top student-table rekap-table">
            <thead class="table-light">
                <tr>
                    <th class="col-no">No.</th>
                    <th>Nama Mahasiswa</th>
                    <th class="col-nim">NIM</th>
                    <th>Instansi/Mitra</th>
                    <th>Dosen Pembimbing</th>
                    <th>Pembimbing Lapangan</th>
                    <th class="col-score">Nilai Dosen</th>
                    <th class="col-score">Nilai Pembimbing</th>
                    <th class="col-score">Total</th>
                    <th class="col-score">Nilai Akhir</th>
                    <th class="col-status">Status Penilaian</th>
                </tr>
            </thead>
            <tbody>
                @forelse($rekap as $row)
                    <tr>
                        <td>{{ $rekap->firstItem() + $loop->index }}</td>
                        <td class="fw-semibold">{{ $row['nama_mahasiswa'] }}</td>
                        <td>{{ $row['nim'] }}</td>
                        <td>{{ $row['instansi'] }}</td>
                        <td>{{ $row['dosen_pembimbing'] }}</td>
                        <td>{{ $row['pembimbing_lapangan'] }}</td>
                        <td class="text-center">{{ $formatNilai($row['nilai_dosen']) }}</td>
                        <td class="text-center">{{ $formatNilai($row['nilai_pembimbing']) }}</td>
                        <td class="text-center">{{ $formatNilai($row['total_nilai']) }}</td>
                        <td class="text-center">{{ $formatNilai($row['nilai_akhir']) }}</td>
                        <td>
                            <span class="badge bg-{{ $row['status_key'] === 'lengkap' ? 'success' : ($row['status_key'] === 'belum_ada' ? 'secondary' : 'warning text-dark') }} student-badge">
                                {{ $row['status_label'] }}
                            </span>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="11" class="text-center text-muted">Data rekapitulasi nilai belum tersedia.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="rekap-mobile">
        @forelse($rekap as $row)
            <div class="rekap-mobile-card">
                <div class="d-flex justify-content-between gap-2 align-items-start mb-3">
                    <div>
                        <div class="fw-semibold">{{ $row['nama_mahasiswa'] }}</div>
                        <div class="text-muted small">{{ $row['nim'] }}</div>
                    </div>
                    <span class="badge bg-{{ $row['status_key'] === 'lengkap' ? 'success' : ($row['status_key'] === 'belum_ada' ? 'secondary' : 'warning text-dark') }} student-badge">
                        {{ $row['status_label'] }}
                    </span>
                </div>
                <div class="rekap-mobile-grid">
                    <div><div class="rekap-label">Instansi/Mitra</div><div class="rekap-value">{{ $row['instansi'] }}</div></div>
                    <div><div class="rekap-label">Dosen Pembimbing</div><div class="rekap-value">{{ $row['dosen_pembimbing'] }}</div></div>
                    <div><div class="rekap-label">Pembimbing Lapangan</div><div class="rekap-value">{{ $row['pembimbing_lapangan'] }}</div></div>
                    <div><div class="rekap-label">Nilai Dosen</div><div class="rekap-value">{{ $formatNilai($row['nilai_dosen']) }}</div></div>
                    <div><div class="rekap-label">Nilai Pembimbing</div><div class="rekap-value">{{ $formatNilai($row['nilai_pembimbing']) }}</div></div>
                    <div><div class="rekap-label">Total Nilai</div><div class="rekap-value">{{ $formatNilai($row['total_nilai']) }}</div></div>
                    <div><div class="rekap-label">Nilai Akhir</div><div class="rekap-value">{{ $formatNilai($row['nilai_akhir']) }}</div></div>
                </div>
            </div>
        @empty
            <div class="text-center text-muted">Data rekapitulasi nilai belum tersedia.</div>
        @endforelse
    </div>

    <div class="mt-3">
        {{ $rekap->links() }}
    </div>
</div>
@endsection