{{-- resources/views/admin/analysis/_hth_result.blade.php --}}
@php
    $stat = $comparison['stats'];
    $disc = $comparison['discipline'];
    $isTime = in_array($disc->result_type, ['time']); 
    $unit = $disc->unit_symbol ?? '';
    
    $hasPasiRival = $comparison['pasiRival'] !== null;
    $hasCompetitor = $comparison['competitor'] !== null;

    $calcGap = function($ath, $rival) use ($isTime, $unit) {
        if ($ath == 0 || $rival == 0) {
            return ['status' => 'Data Kosong', 'diff' => '-', 'color' => 'text-muted', 'icon' => 'fa-minus'];
        }
        
        $diff = abs($ath - $rival);
        $fmtDiff = number_format($diff, 2) . ' ' . $unit;
        
        if ($ath == $rival) {
            return ['status' => 'SEIMBANG', 'diff' => '0 ' . $unit, 'color' => 'text-secondary', 'icon' => 'fa-equals'];
        }

        $athWins = $isTime ? ($ath < $rival) : ($ath > $rival);

        if ($athWins) {
            return ['status' => 'UNGGUL', 'diff' => '+' . $fmtDiff, 'color' => 'text-success', 'icon' => 'fa-arrow-up'];
        } else {
            return ['status' => 'TERTINGGAL', 'diff' => '-' . $fmtDiff, 'color' => 'text-danger', 'icon' => 'fa-arrow-down'];
        }
    };

    $gapPasiPB = $hasPasiRival ? $calcGap($stat['pb']['ath'], $stat['pb']['pasi']) : null;
    $gapPasiSB = $hasPasiRival ? $calcGap($stat['sb']['ath'], $stat['sb']['pasi']) : null;

    $gapCompPB = $hasCompetitor ? $calcGap($stat['pb']['ath'], $stat['pb']['comp']) : null;
    $gapCompSB = $hasCompetitor ? $calcGap($stat['sb']['ath'], $stat['sb']['comp']) : null;
@endphp

<div class="row mt-4 fade-in">
    <div class="col-md-12 mb-4">
        <div class="card bg-primary-gradient text-white shadow border-0">
            <div class="card-body p-4">
                <div class="text-center mb-4">
                    <span class="badge bg-white text-primary px-4 py-2 fs-6 shadow-sm rounded-pill">
                        <i class="fas fa-running me-2"></i> {{ $disc->name }}
                    </span>
                </div>

                <div class="row align-items-center text-center justify-content-center">
                    <div class="col-md-3 mb-3">
                        <div class="avatar avatar-xxl mb-3">
                            <img src="{{ $comparison['athlete']->photo_url }}" class="avatar-img rounded-circle border-4 border-primary shadow bg-white" style="width:100px; height:100px;">
                        </div>
                        <h4 class="fw-bold mb-1">{{ $comparison['athlete']->name }}</h4>
                        <span class="badge bg-light text-primary"><i class="fas fa-star text-warning"></i> Atlet Utama</span>
                    </div>

                    @if($hasPasiRival)
                    <div class="col-md-1 d-none d-md-block">
                        <h3 class="fw-bold opacity-50 mb-0">VS</h3>
                    </div>
                    <div class="col-md-3 mb-3">
                        <div class="avatar avatar-xxl mb-3">
                            <img src="{{ $comparison['pasiRival']->photo_url }}" class="avatar-img rounded-circle border-4 border-warning shadow bg-white" style="width:100px; height:100px;">
                        </div>
                        <h4 class="fw-bold mb-1 text-warning">{{ $comparison['pasiRival']->name }}</h4>
                        <span class="badge bg-warning text-dark"><i class="fas fa-user-friends"></i> Rival Internal</span>
                    </div>
                    @endif

                    @if($hasCompetitor)
                    <div class="col-md-1 d-none d-md-block">
                        <h3 class="fw-bold opacity-50 mb-0">VS</h3>
                    </div>
                    <div class="col-md-3 mb-3">
                        <div class="avatar avatar-xxl mb-3">
                            <img src="{{ $comparison['competitor']->photo_url }}" class="avatar-img rounded-circle border-4 border-danger shadow bg-white" style="width:100px; height:100px;">
                        </div>
                        <h4 class="fw-bold mb-1 text-danger">{{ $comparison['competitor']->name }}</h4>
                        <span class="badge bg-danger text-white"><i class="fas fa-globe"></i> Rival Internasional</span>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-12 mb-4">
        <div class="row g-3">
            @if($hasPasiRival)
            <div class="{{ $hasCompetitor ? 'col-md-6' : 'col-md-12' }}">
                <div class="card shadow-sm border-warning h-100" style="border-left: 4px solid #fdaf4b !important;">
                    <div class="card-header bg-white pb-0 border-0">
                        <h6 class="fw-bold text-warning mb-0" style="color: #d39e00 !important;"><i class="fas fa-exchange-alt me-1"></i> GAP vs RIVAL INTERNAL</h6>
                    </div>
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-3 border-bottom pb-2">
                            <span class="text-muted fw-bold small">Personal Best (PB)</span>
                            <div class="text-end">
                                <h5 class="fw-bold mb-0 {{ $gapPasiPB['color'] }}">{{ $gapPasiPB['status'] }}</h5>
                                <span class="{{ $gapPasiPB['color'] }} small fw-bold"><i class="fas {{ $gapPasiPB['icon'] }}"></i> {{ $gapPasiPB['diff'] }}</span>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="text-muted fw-bold small">Season Best (SB)</span>
                            <div class="text-end">
                                <h5 class="fw-bold mb-0 {{ $gapPasiSB['color'] }}">{{ $gapPasiSB['status'] }}</h5>
                                <span class="{{ $gapPasiSB['color'] }} small fw-bold"><i class="fas {{ $gapPasiSB['icon'] }}"></i> {{ $gapPasiSB['diff'] }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            @if($hasCompetitor)
            <div class="{{ $hasPasiRival ? 'col-md-6' : 'col-md-12' }}">
                <div class="card shadow-sm border-danger h-100" style="border-left: 4px solid #f3545d !important;">
                    <div class="card-header bg-white pb-0 border-0">
                        <h6 class="fw-bold text-danger mb-0"><i class="fas fa-exchange-alt me-1"></i> GAP vs RIVAL INTL.</h6>
                    </div>
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-3 border-bottom pb-2">
                            <span class="text-muted fw-bold small">Personal Best (PB)</span>
                            <div class="text-end">
                                <h5 class="fw-bold mb-0 {{ $gapCompPB['color'] }}">{{ $gapCompPB['status'] }}</h5>
                                <span class="{{ $gapCompPB['color'] }} small fw-bold"><i class="fas {{ $gapCompPB['icon'] }}"></i> {{ $gapCompPB['diff'] }}</span>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="text-muted fw-bold small">Season Best (SB)</span>
                            <div class="text-end">
                                <h5 class="fw-bold mb-0 {{ $gapCompSB['color'] }}">{{ $gapCompSB['status'] }}</h5>
                                <span class="{{ $gapCompSB['color'] }} small fw-bold"><i class="fas {{ $gapCompSB['icon'] }}"></i> {{ $gapCompSB['diff'] }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>

    <div class="col-md-12 mb-4">
        <div class="card shadow-sm border-0">
            <div class="card-header bg-white border-bottom">
                <h4 class="card-title fw-bold mb-0"><i class="fas fa-chart-pie me-2 text-primary"></i> Visualisasi Proporsi Performa (Doughnut)</h4>
            </div>
            <div class="card-body">
                @if($isTime)
                    <div class="small text-muted mb-4 bg-light p-3 rounded border text-center">
                        <i class="fas fa-info-circle text-primary me-1"></i> <b>Catatan Lomba Waktu (Lari):</b> Dalam grafik proporsi Donat, irisan yang <b>lebih kecil</b> justru merepresentasikan waktu yang <b>lebih cepat / lebih baik</b>.
                    </div>
                @endif
                
                <div class="row">
                    <div class="col-md-6 border-end-md mb-4 mb-md-0">
                        <h5 class="text-center fw-bold text-muted mb-3"><i class="fas fa-trophy text-warning me-1"></i> Proporsi Personal Best (PB)</h5>
                        <div style="position: relative; height:300px; width:100%; margin: 0 auto;">
                            <canvas id="doughnutChartPB"
                                data-ath-name="{{ $comparison['athlete']->name }}"
                                data-ath-pb="{{ $stat['pb']['ath'] }}"
                                
                                data-has-pasi="{{ $hasPasiRival ? '1' : '0' }}"
                                data-pasi-name="{{ $hasPasiRival ? $comparison['pasiRival']->name : '' }}"
                                data-pasi-pb="{{ $stat['pb']['pasi'] }}"
                                
                                data-has-comp="{{ $hasCompetitor ? '1' : '0' }}"
                                data-comp-name="{{ $hasCompetitor ? $comparison['competitor']->name : '' }}"
                                data-comp-pb="{{ $stat['pb']['comp'] }}">
                            </canvas>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <h5 class="text-center fw-bold text-muted mb-3"><i class="fas fa-calendar-check text-success me-1"></i> Proporsi Season Best (SB)</h5>
                        <div style="position: relative; height:300px; width:100%; margin: 0 auto;">
                            <canvas id="doughnutChartSB"
                                data-ath-name="{{ $comparison['athlete']->name }}"
                                data-ath-sb="{{ $stat['sb']['ath'] }}"
                                
                                data-has-pasi="{{ $hasPasiRival ? '1' : '0' }}"
                                data-pasi-name="{{ $hasPasiRival ? $comparison['pasiRival']->name : '' }}"
                                data-pasi-sb="{{ $stat['sb']['pasi'] }}"
                                
                                data-has-comp="{{ $hasCompetitor ? '1' : '0' }}"
                                data-comp-name="{{ $hasCompetitor ? $comparison['competitor']->name : '' }}"
                                data-comp-sb="{{ $stat['sb']['comp'] }}">
                            </canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-12 mb-4">
        <div class="card shadow-sm border-0">
            <div class="card-header bg-white border-bottom">
                <h4 class="card-title fw-bold mb-0"><i class="fas fa-table me-2 text-primary"></i> Tabel Perbandingan Statistik ({{ $unit }})</h4>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped align-middle text-center mb-0">
                        <thead class="bg-light">
                            <tr class="text-uppercase small">
                                <th width="20%" class="text-muted text-start ps-4">Indikator Performa</th>
                                <th width="26%" class="text-primary fw-bold">{{ $comparison['athlete']->name }} (Utama)</th>
                                
                                @if($hasPasiRival)
                                <th width="26%" class="text-warning text-dark fw-bold">{{ $comparison['pasiRival']->name }} (Internal)</th>
                                @endif
                                
                                @if($hasCompetitor)
                                <th width="28%" class="text-danger fw-bold">{{ $comparison['competitor']->name }} (Intl)</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="fw-bold text-start ps-4 text-muted"><i class="fas fa-trophy text-warning me-2"></i> Personal Best (PB)</td>
                                <td><h3 class="fw-bold mb-0 text-primary">{{ $stat['pb']['ath'] > 0 ? $stat['pb']['ath'] : '-' }}</h3></td>
                                @if($hasPasiRival)
                                <td><h3 class="fw-bold mb-0 text-dark">{{ $stat['pb']['pasi'] > 0 ? $stat['pb']['pasi'] : '-' }}</h3></td>
                                @endif
                                @if($hasCompetitor)
                                <td><h3 class="fw-bold mb-0 text-danger">{{ $stat['pb']['comp'] > 0 ? $stat['pb']['comp'] : '-' }}</h3></td>
                                @endif
                            </tr>
                            <tr>
                                <td class="fw-bold text-start ps-4 text-muted"><i class="fas fa-calendar-check text-success me-2"></i> Season Best (SB)</td>
                                <td><h4 class="fw-bold mb-0 text-primary">{{ $stat['sb']['ath'] > 0 ? $stat['sb']['ath'] : '-' }}</h4></td>
                                @if($hasPasiRival)
                                <td><h4 class="fw-bold mb-0 text-dark">{{ $stat['sb']['pasi'] > 0 ? $stat['sb']['pasi'] : '-' }}</h4></td>
                                @endif
                                @if($hasCompetitor)
                                <td><h4 class="fw-bold mb-0 text-danger">{{ $stat['sb']['comp'] > 0 ? $stat['sb']['comp'] : '-' }}</h4></td>
                                @endif
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            @if($hasCompetitor && $comparison['competitor']->notes)
            <div class="card-footer bg-white border-top-0 pt-0">
                <div class="alert alert-info py-3 px-3 small mt-3 border-0 shadow-sm mb-0" style="background-color: #f0f7fd; border-left: 4px solid #1572e8 !important;">
                    <div class="fw-bold mb-1 text-primary"><i class="fas fa-user-secret me-1"></i> Catatan Taktis Rival Internasional:</div>
                    <span class="fst-italic text-dark">"{{ $comparison['competitor']->notes }}"</span>
                </div>
            </div>
            @endif
        </div>
    </div>

</div>