{{-- resources/views/admin/analysis/head_to_head.blade.php --}}
@extends('admin.layouts.app')

@section('content')
<div class="page-inner">
    <div class="page-header">
        <h4 class="page-title">Analisis Head-to-Head</h4>
        <ul class="breadcrumbs">
            <li class="nav-home"><a href="{{ route('admin.dashboard') }}"><i class="icon-home"></i></a></li>
            <li class="separator"><i class="icon-arrow-right"></i></li>
            <li class="nav-item">Analisis</li>
            <li class="separator"><i class="icon-arrow-right"></i></li>
            <li class="nav-item">Head to Head</li>
        </ul>
    </div>

    <div class="row">
        <div class="col-md-12">
            @include('admin.analysis._hth_form')
        </div>
    </div>

    @if($comparison)
        @include('admin.analysis._hth_result')
    @else
        <div class="row mt-5">
            <div class="col-12 text-center text-muted">
                <i class="fas fa-filter fa-4x mb-3 text-light-gray"></i>
                <h4 class="mt-2 fw-bold">Mulai Analisis</h4>
                <p>Silakan pilih Kategori Utama terlebih dahulu untuk memulai.</p>
            </div>
        </div>
    @endif
</div>

<style>
    .fade-in { animation: fadeIn 0.8s; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    .bg-primary-gradient { background: linear-gradient(-45deg, #1572e8, #1f283e); }
    .bg-warning-gradient { background: linear-gradient(-45deg, #f39c12, #f1c40f); }
    .avatar-img { object-fit: cover; }
    .text-light-gray { color: #e0e0e0; }
</style>
@endsection

@push('scripts')
    @include('admin.analysis._hth_scripts')
@endpush