@extends('index')

@section('content')
<style>
    .menu-item {
        background: linear-gradient(to bottom,rgb(134, 103, 171), #0e0721);
        color: white;
        text-align: center;
        border-radius: 18px;
        padding: 20px 20px;
        transition: transform 0.2s ease;
        margin-bottom: 8px;
    }

    .menu-item:hover {
        transform: translateY(-4px);
    }

    .menu-icon {
        font-size: 14px;
    }

    .menu-text {
        font-size: 9px;
        color: #333;
        margin-bottom: 10px;
        line-height: 1.3;
        text-align: center;
    }

    .mood-card {
        background: linear-gradient(to bottom right,rgb(134, 103, 171), #0e0721); /* Gradasi ungu */
        border-radius: 20px;
        padding: 20px;
        color: white;
        position: relative;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    
    .mood-card .icon {
        font-size: 24px;
        background: white;
        color: #8376f5;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        margin-bottom: 10px;
    }

    .mood-card .title {
        font-weight: 600;
        font-size: 1rem;
    }
    
    .mood-card .coins {
        position: absolute;
        bottom: 10px;
        left: 20px;
        font-size: 0.9rem;
        color: #eee;
    }
</style>

<div class="container" style="margin-top: -60px">
    <div class="card">
        <div class="card-body">
            <h6>Hi {{ auth()->user()->name }},</h6>
            @if(!empty($ego))
                <p class="text-muted fs-8">Dark ego kamu adalah</p>
                <div class="display-5 text-success fw-bold text-center">{{ $ego->top_1 }}</div>
                <div class="display-6 text-success fw-bold text-center">{{ round(($ego->top_1_score/$total)*100) }}%</div>
                <!-- <a href="{{ route('quiz.reset') }}" class="btn btn-primary btn-sm col-12 rounded-pill mt-4">Test Ulang</a> -->
            @else
                <p class="text-muted fs-8">Kamu belum melakukan test, silahkan klik link dibawah ini</p>
                <a href="{{ route('quiz') }}" class="btn btn-persani-primary btn-sm col-12 rounded-pill">Mulai Test</a>
            @endif
        </div>
    </div>
</div>

<div class="container">
    @if(!empty($ego))
    <div class="row mt-3">
        <div class="col-6">
            <div class="mood-card">
                <img src="{{ asset('media/dark-ego/' . $ego->icon) }}" alt="">

                <div class="title mb-3">{{ $ego->top_2 }}</div>
                <div class="coins">{{ round(($ego->top_2_score/$total)*100) }}%</div>
            </div>
        </div>

        <div class="col-6">
            <div class="mood-card">
                <img src="{{ asset('media/dark-ego/' . $ego->icon) }}" alt="">

                <div class="title mb-3">{{ $ego->top_3 }}</div>
                <div class="coins">{{ round(($ego->top_3_score/$total)*100) }}%</div>
            </div>
        </div>
    </div>
    @endif

    <div class="row mt-4">
        <div class="col-12">
            <h6 class="mb-3">Kenali Dark Ego Kamu Yuks!</h6>
        </div>

        @foreach($list_ego as $item)
            <div class="col-3">
                <a href="{{ route('home.detail', $item->id) }}" class="menu-item">
                    <div class="menu-icon">
                        <img src="{{ asset('media/dark-ego/'. $item->icon) }}" class="img-fluid">
                    </div>
                </a>
                <div class="menu-text">{{ $item->name }}</div>
            </div>
        @endforeach
    </div>

    <a href="{{ route('logout') }}" class="btn btn-persani-primary col-12 mt-5">Logout</a>
</div>
@endsection


@push('scripts')
@endpush