@extends('layouts.app')

@section('title', 'Recruitment Board — Scouting HUD')

@section('content')
<div class="container-fluid px-4 py-4" data-reveal>

    {{-- Page Hero --}}
    <div class="page-hero mb-4" style="background: radial-gradient(ellipse 50% 60% at 5% 50%, rgba(34,212,126,0.05) 0%, transparent 70%), radial-gradient(ellipse 40% 50% at 95% 50%, rgba(0,212,255,0.04) 0%, transparent 70%), var(--grid-pattern); background-size: auto, auto, 32px 32px;">
        <div class="page-hero-content d-flex align-items-start justify-content-between flex-wrap gap-3">
            <div class="page-hero-inner" style="padding:4px 8px;">
                <h1 class="page-heading-pixel mb-1">
                    <span style="color:var(--arena-green); text-shadow: 0 0 12px rgba(34,212,126,0.5);">//</span> Recruitment
                </h1>
                <p class="page-subheading">Browse Looking for Team (LFT) and Looking for Players (LFP) posts.</p>
            </div>
            <button class="btn-arena btn-primary btn-sm" style="background: linear-gradient(135deg, #22D47E, #00A85A) !important; box-shadow: 0 2px 12px rgba(34,212,126,0.25) !important; border-color: rgba(34,212,126,0.3) !important;">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                Post Recruitment
            </button>
        </div>
    </div>

    {{-- Quick Type Filter (HUD style) --}}
    <div class="d-flex gap-2 mb-4 flex-wrap">
        <a href="{{ route('preview.recruitment') }}" class="filter-chip {{ !request('type') ? 'active' : '' }}">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3"/></svg>
            All Posts
        </a>
        <a href="{{ request()->fullUrlWithQuery(['type' => 'lft']) }}" class="filter-chip {{ request('type') === 'lft' ? 'active' : '' }}" style="{{ request('type') === 'lft' ? 'background:rgba(0,212,255,0.1); border-color:rgba(0,212,255,0.4); color:var(--arena-accent);' : '' }}">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
            Looking for Team
        </a>
        <a href="{{ request()->fullUrlWithQuery(['type' => 'lfp']) }}" class="filter-chip {{ request('type') === 'lfp' ? 'active' : '' }}" style="{{ request('type') === 'lfp' ? 'background:rgba(124,92,252,0.1); border-color:rgba(124,92,252,0.4); color:var(--arena-violet);' : '' }}">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
            Recruiting Players
        </a>
    </div>

    {{-- Recruitment Feed --}}
    <div class="row g-4">
        @foreach($posts as $post)
        <div class="col-md-6">
            @php
                $isLft = $post['type'] === 'lft';
                $borderColor = $isLft ? 'rgba(0,212,255,0.35)' : 'rgba(124,92,252,0.35)';
                $bgColor = $isLft ? 'rgba(0,212,255,0.03)' : 'rgba(124,92,252,0.03)';
                $accentColor = $isLft ? 'var(--arena-accent)' : 'var(--arena-violet)';
            @endphp
            <div class="card-arena h-100 d-flex flex-column position-relative"
                 style="border-top: 2px solid {{ $borderColor }}; background: {{ $bgColor }}, var(--arena-surface-01); padding: 0; overflow:hidden;">

                {{-- Left edge bar --}}
                <div style="position:absolute; top:0; left:0; width:3px; height:100%; background: linear-gradient(180deg, {{ $accentColor }}, transparent); opacity:0.6;"></div>

                <div class="p-4 d-flex flex-column flex-grow-1" style="padding-left: calc(var(--sp-4) + 6px) !important;">
                    {{-- Header --}}
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div class="d-flex align-items-center gap-2">
                            <span class="badge-arena {{ $isLft ? 'badge-accent' : 'badge-violet' }}" style="font-size:0.6rem; letter-spacing:0.1em;">
                                {{ $isLft ? 'LFT' : 'LFP' }}
                            </span>
                            <span class="badge-arena badge-muted" style="font-size:0.6rem; letter-spacing:0.08em;">{{ $post['game_name'] }}</span>
                        </div>
                        <span style="font-family:var(--font-hud); font-size:0.65rem; color:var(--arena-text-muted);">
                            {{ \Carbon\Carbon::parse($post['posted_at'])->diffForHumans() }}
                        </span>
                    </div>

                    {{-- Main Title --}}
                    <h3 style="font-family:var(--font-hud); font-weight:800; font-size:0.95rem; color:var(--arena-text-primary); line-height:1.4; margin-bottom:16px;">
                        {{ $post['title'] }}
                    </h3>

                    {{-- Poster Profile --}}
                    @if(isset($post['player']))
                    <div class="d-flex align-items-center gap-3 mb-4" style="background:rgba(0,0,0,0.25); border-radius:6px; padding:12px; border:1px solid rgba(0,212,255,0.08);">
                        <img src="{{ asset($post['player']['avatar']) }}" alt="Avatar"
                             style="width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(0,212,255,0.35); box-shadow: 0 0 10px rgba(0,212,255,0.2);"
                             onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2244%22 height=%2244%22><rect width=%2244%22 height=%2244%22 rx=%2222%22 fill=%22%221D2030%22/></svg>'">
                        <div>
                            <div style="font-family:var(--font-hud); font-weight:700; color:var(--arena-text-primary); font-size:0.85rem;">{{ $post['player']['username'] }}</div>
                            <div style="font-family:var(--font-hud); font-size:0.68rem; color:var(--arena-text-muted);">
                                Rank: <span style="color:var(--arena-accent);">{{ $post['rank'] }}</span> · Region: <span style="color:var(--arena-text-primary);">{{ $post['region'] }}</span>
                            </div>
                        </div>
                    </div>
                    @elseif(isset($post['team']))
                    <div class="d-flex align-items-center gap-3 mb-4" style="background:rgba(0,0,0,0.25); border-radius:6px; padding:12px; border:1px solid rgba(124,92,252,0.08);">
                        <img src="{{ asset($post['team']['logo']) }}" alt="Logo"
                             style="width: 44px; height: 44px; border-radius: 8px; object-fit: contain; background: rgba(15,17,23,0.9); padding: 5px; border: 1px solid rgba(124,92,252,0.25); box-shadow: 0 0 10px rgba(124,92,252,0.15);"
                             onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2244%22 height=%2244%22><rect width=%2244%22 height=%2244%22 rx=%228%22 fill=%22%221D2030%22/></svg>'">
                        <div>
                            <div style="font-family:var(--font-hud); font-weight:700; color:var(--arena-text-primary); font-size:0.85rem;">{{ $post['team']['name'] }}</div>
                            <div style="font-family:var(--font-hud); font-size:0.68rem; color:var(--arena-text-muted);">
                                Min Rank: <span style="color:var(--arena-violet);">{{ $post['min_rank'] }}+</span> · Region: <span style="color:var(--arena-text-primary);">{{ $post['region'] }}</span>
                            </div>
                        </div>
                    </div>
                    @endif

                    {{-- Description --}}
                    <p style="font-size:0.8rem; color:var(--arena-text-muted); line-height:1.7; margin-bottom:16px;">
                        {{ $post['description'] }}
                    </p>

                    {{-- Tags & Actions --}}
                    <div class="mt-auto">
                        <div class="d-flex flex-wrap gap-2 mb-3">
                            @foreach($post['tags'] as $tag)
                                <span class="game-tag" style="font-size: 0.62rem; padding: 3px 8px; border-radius:3px;">{{ $tag }}</span>
                            @endforeach
                        </div>
                        <div class="d-flex gap-2">
                            @if(isset($post['player']))
                                <a href="/preview/players/{{ $post['player']['slug'] }}" class="btn-arena btn-secondary w-100 btn-sm text-center">
                                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                                    Profile
                                </a>
                            @elseif(isset($post['team']))
                                <a href="/preview/teams/{{ $post['team']['slug'] }}" class="btn-arena btn-secondary w-100 btn-sm text-center">
                                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                                    Roster
                                </a>
                            @endif
                            <button class="btn-arena btn-primary btn-sm px-4">
                                Apply
                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>
@endsection
