@extends('admin.layouts.app')

@section('title', __('Team Details'))

@section('content')
<x-admin.page-header
    title="{{ __('Team Details') }}"
    :breadcrumbs="[__('Teams') => route('admin.championship-teams.index'), __('Details') => '']"
/>

<div class="card border-0 shadow-sm">
    <div class="card-body">
        <div class="row">

            {{-- Basic Info --}}
            <x-view-col label="{{ __('dashboard.name') }}" :value="$team->name" />
            <x-view-col label="{{ __('Championship') }}" :value="$team->championship?->name" />
            <x-view-col label="{{ __('Group') }}" :value="$team->group?->name ?? '-'" />
            <x-view-col label="{{ __('Players') }}" :value="$team->members->count()" />
            <x-view-col label="{{ __('Confirmation') }}" :value="$team->is_confirmed ? __('Confirmed') : __('Pending approvals')" />

            {{-- Logo --}}
            @if($team->logo)
                <div class="col-md-6 mb-3">
                    <label class="fw-semibold">{{ __('Logo') }}</label>
                    <div>
                        <img src="{{ asset('storage/' . $team->logo) }}"
                             class="img-thumbnail shadow-sm rounded-3"
                             style="max-width: 180px;">
                    </div>
                </div>
            @endif

            <div class="col-md-12"><hr></div>

            {{-- Members --}}
            <div class="col-md-12">
                <h5 class="mb-4">{{ __('Members') }}</h5>

                <div class="row g-4">
                    @forelse($team->members as $member)
                        @php $st = (int)($member->pivot->status ?? 1); @endphp
                        @php $isCreator = (int)$member->id === (int)$team->created_by_member_id; @endphp

                        <div class="col-md-6 col-xl-4">
                            <div class="card member-card border-0 shadow-sm h-100 position-relative">

                                {{-- ⭐ Creator --}}
                                @if($isCreator)
                                    <div class="position-absolute top-0 end-0 p-2">
                                        <i class="ri-star-fill text-warning fs-4" title="Team Creator"></i>
                                    </div>
                                @endif

                                <div class="card-body d-flex align-items-center gap-3">

                                    {{-- Avatar --}}
                                    <div class="member-avatar">
                                        @if($member->image)
                                            <img src="{{ asset('storage/' . $member->image) }}" alt="{{ $member->name }}">
                                        @else
                                            <div class="avatar-placeholder">
                                                <i class="ri-user-3-line"></i>
                                            </div>
                                        @endif
                                    </div>

                                    {{-- Info --}}
                                    <div class="flex-grow-1">
                                        <h6 class="mb-1 fw-semibold">
                                            {{ $member->name }}
                                        </h6>

                                        <div class="text-muted small mb-2">
                                            <i class="ri-phone-line me-1"></i>
                                            {{ $member->phone ?? '-' }}
                                        </div>

                                        {{-- Status --}}
                                        <span class="badge px-3 py-2 fw-medium
                                            {{ $st === 2 ? 'bg-success-subtle text-success' : 'bg-warning-subtle text-warning' }}">
                                            <i class="ri-checkbox-circle-line me-1"></i>
                                            {{ $st === 2 ? __('Accepted') : __('Pending') }}
                                        </span>
                                    </div>

                                </div>
                            </div>
                        </div>

                    @empty
                        <div class="col-12 text-center text-muted py-5">
                            <i class="ri-user-search-line fs-2 mb-2"></i>
                            <div>{{ __('No members found.') }}</div>
                        </div>
                    @endforelse
                </div>
            </div>

        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.member-card {
    border-radius: 16px;
    transition: all 0.25s ease;
}

.member-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.member-avatar img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #f1f1f1;
}

.avatar-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #999;
}
</style>
@endpush
