@extends('layouts.app')

@section('title', 'Transfer Market')

@section('content')
<div class="container-fluid px-4 py-4" data-reveal>
    <div class="mb-4">
        <h1 class="display-md mb-1" style="color: var(--arena-text-primary);">Transfer Market</h1>
        <p class="fs-sm text-white">Professional player trading, free agency, and roster draft listings.</p>
    </div>

    <!-- Market Navigation Tabs -->
    <div class="tabs-arena mb-4" data-tabs="market-tabs">
        <button class="tab-btn active" data-tab="free-agents">Free Agents</button>
        <button class="tab-btn" data-tab="transfer-listed">Transfer Listed</button>
    </div>

    <!-- Tab Panes -->
    <div class="row g-4">
        <div class="col-12">
            <!-- Free Agents Pane -->
            <div class="tab-pane active" id="free-agents">
                <div class="row g-4">
                    @foreach($market['free_agents'] as $player)
                    <div class="col-md-6 col-lg-4">
                        <div class="card-arena p-4 h-100 d-flex flex-column justify-content-between">
                            <div>
                                <div class="d-flex justify-content-between align-items-start mb-3">
                                    <span class="badge-arena badge-green" style="font-size: 0.6rem;">Free Agent</span>
                                    <span class="fs-xs text-white">{{ $player['flag'] }} {{ $player['country_name'] }}</span>
                                </div>
                                <div class="d-flex align-items-center gap-3 mb-3">
                                    <img src="{{ asset($player['avatar']) }}" alt="Avatar" style="width: 48px; height: 48px; border-radius: var(--r-full); object-fit: cover;">
                                    <div>
                                        <div class="fw-800 text-white fs-sm">{{ $player['username'] }}</div>
                                        <div class="fs-xs text-white">Primary Role: <span class="text-white">{{ $player['games'][0]['role'] ?? 'Athlete' }}</span></div>
                                    </div>
                                </div>
                                <p class="fs-xs text-white mb-4" style="line-height: 1.5;">{{ $player['bio'] }}</p>
                            </div>
                            <div class="d-flex gap-2">
                                <a href="/preview/players/{{ $player['slug'] }}" class="btn-arena btn-secondary w-100 btn-sm text-center">Profile</a>
                                <button class="btn-arena btn-primary w-100 btn-sm">Make Offer</button>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            <!-- Transfer Listed Pane -->
            <div class="tab-pane" id="transfer-listed">
                <div class="row g-4">
                    @foreach($market['transfer_listed'] as $player)
                    <div class="col-md-6 col-lg-4">
                        <div class="card-arena p-4 h-100 d-flex flex-column justify-content-between">
                            <div>
                                <div class="d-flex justify-content-between align-items-start mb-3">
                                    <span class="badge-arena badge-warm" style="font-size: 0.6rem;">Contract Listed</span>
                                    <span class="fs-xs text-white">{{ $player['flag'] }} {{ $player['country_name'] }}</span>
                                </div>
                                <div class="d-flex align-items-center gap-3 mb-3">
                                    <img src="{{ asset($player['avatar']) }}" alt="Avatar" style="width: 48px; height: 48px; border-radius: var(--r-full); object-fit: cover;">
                                    <div>
                                        <div class="fw-800 text-white fs-sm">{{ $player['username'] }}</div>
                                        <div class="fs-xs text-white">Current Team: <span class="text-white">{{ $player['current_team']['name'] ?? 'None' }}</span></div>
                                    </div>
                                </div>
                                <p class="fs-xs text-white mb-4" style="line-height: 1.5;">{{ $player['bio'] }}</p>
                            </div>
                            <div class="d-flex gap-2">
                                <a href="/preview/players/{{ $player['slug'] }}" class="btn-arena btn-secondary w-100 btn-sm text-center">Profile</a>
                                <button class="btn-arena btn-primary w-100 btn-sm">Inquire</button>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
