@extends('layouts.admin')

@section('title', 'Detail Hasil MOORA')
@section('page-title', 'Detail Perhitungan MOORA')

@section('header-actions')
    <a href="{{ route('admin.results.index') }}" class="btn btn-secondary">
        &larr; Kembali
    </a>
@endsection

@section('content')
<div class="grid grid-cols-3">
    <div style="grid-column: span 2;">
        <!-- Calculation Details -->
        <div class="card">
            <div class="card-header">
                <h2>Detail Perhitungan per Kriteria</h2>
            </div>
            <div class="card-body">
                <div class="table-container">
                    <table>
                        <thead>
                            <tr>
                                <th>Kriteria</th>
                                <th>Tipe</th>
                                <th>Nilai Awal</th>
                                <th>Normalisasi</th>
                                <th>Terbobot</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $benefitSum = 0;
                                $costSum = 0;
                            @endphp
                            @foreach($result->details as $detail)
                                @php
                                    if ($detail->criteria->type->value === 'benefit') {
                                        $benefitSum += $detail->weighted_value;
                                    } else {
                                        $costSum += $detail->weighted_value;
                                    }
                                @endphp
                                <tr>
                                    <td>
                                        <span class="badge badge-gray">{{ $detail->criteria->code }}</span>
                                        {{ $detail->criteria->name }}
                                    </td>
                                    <td>
                                        @if($detail->criteria->type->value === 'benefit')
                                            <span class="badge badge-green">Benefit</span>
                                        @else
                                            <span class="badge badge-red">Cost</span>
                                        @endif
                                    </td>
                                    <td class="font-medium">{{ $detail->raw_value }}</td>
                                    <td>{{ number_format($detail->normalized_value, 6) }}</td>
                                    <td class="font-medium">{{ number_format($detail->weighted_value, 6) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="4" class="text-right font-medium">Σ Benefit:</td>
                                <td class="font-medium text-success">{{ number_format($benefitSum, 6) }}</td>
                            </tr>
                            <tr>
                                <td colspan="4" class="text-right font-medium">Σ Cost:</td>
                                <td class="font-medium text-danger">{{ number_format($costSum, 6) }}</td>
                            </tr>
                            <tr style="background: var(--gray-100);">
                                <td colspan="4" class="text-right font-semibold">Yi (Benefit - Cost):</td>
                                <td class="font-semibold" style="color: var(--primary);">{{ number_format($result->yi_score, 6) }}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Sidebar -->
    <div>
        <!-- Student Info -->
        <div class="card mb-4">
            <div class="card-header">
                <h2>Informasi Siswa</h2>
            </div>
            <div class="card-body">
                <div class="info-item mb-2">
                    <span class="info-label">Nama</span>
                    <span class="info-value">{{ $result->submission->student->user->name ?? '-' }}</span>
                </div>
                <div class="info-item mb-2">
                    <span class="info-label">NIS</span>
                    <span class="info-value">{{ $result->submission->student->nis ?? '-' }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Periode</span>
                    <span class="info-value">{{ $result->period }}</span>
                </div>
            </div>
        </div>
        
        <!-- Result -->
        <div class="card">
            <div class="card-header">
                <h2>Hasil Akhir</h2>
            </div>
            <div class="card-body text-center">
                <div class="rank-display">
                    <span class="rank-number">{{ $result->rank }}</span>
                    <span class="rank-label">Peringkat</span>
                </div>
                <div class="yi-display mt-4">
                    <span class="yi-label">Skor Yi</span>
                    <span class="yi-value">{{ number_format($result->yi_score, 6) }}</span>
                </div>
                <p class="text-sm text-muted mt-4">
                    Dihitung: {{ $result->calculated_at->format('d M Y H:i') }}
                </p>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
    .info-item {
        display: flex;
        flex-direction: column;
    }
    
    .info-label {
        font-size: 0.75rem;
        color: var(--gray-500);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    
    .info-value {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--gray-800);
    }
    
    .rank-display {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .rank-number {
        font-size: 4rem;
        font-weight: 700;
        color: var(--primary);
        line-height: 1;
    }
    
    .rank-label {
        font-size: 0.875rem;
        color: var(--gray-500);
    }
    
    .yi-display {
        background: var(--gray-50);
        padding: 1rem;
        border-radius: 0.5rem;
    }
    
    .yi-label {
        display: block;
        font-size: 0.75rem;
        color: var(--gray-500);
        text-transform: uppercase;
    }
    
    .yi-value {
        display: block;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--gray-800);
    }
    
    .text-success {
        color: var(--success);
    }
    
    .text-danger {
        color: var(--danger);
    }
    
    tfoot td {
        border-top: 2px solid var(--gray-300);
    }
</style>
@endpush
@endsection