@extends('layouts.app')

@section('title', 'Proposals')
@section('page-title', 'Proposals')
@section('page-subtitle', 'Applications from influencers across all campaigns')

@push('styles')
<style>
    .ib {
        --ink:      #0f172a;
        --ink-soft: #64748b;
        --ink-mute: #94a3b8;
        --line:     #e8ecf1;
        --line-2:   #f1f5f9;
        --brand:    #34BDEB;
        --brand-dk: #0b6f92;
        --good:     #16a34a;
        --good-bg:  #f0fdf4;
        --warn:     #b45309;
        --warn-bg:  #fffbeb;
        --bad:      #dc2626;
        --bad-bg:   #fef2f2;
    }

    .ib-tabs {
        display: flex;
        gap: 4px;
        border-bottom: 1px solid var(--line);
        margin-bottom: 20px;
        flex-wrap: wrap;
    }

    .ib-tab {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 11px 16px;
        font-size: 13.5px;
        font-weight: 600;
        color: var(--ink-soft);
        text-decoration: none;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
    }

    .ib-tab:hover { color: var(--ink); }

    .ib-tab.on {
        color: var(--ink);
        border-bottom-color: var(--brand);
    }

    .ib-tab-n {
        font-size: 12px;
        font-weight: 700;
        background: #f1f5f9;
        color: var(--ink-soft);
        padding: 2px 8px;
        border-radius: 999px;
    }

    .ib-tab.on .ib-tab-n { background: #e8f7fd; color: var(--brand-dk); }

    .ib-row {
        display: grid;
        grid-template-columns: auto 1.4fr 1.2fr auto auto auto;
        gap: 18px;
        align-items: center;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 13px;
        padding: 15px 18px;
        margin-bottom: 10px;
    }

    @media (max-width: 1000px) {
        .ib-row { grid-template-columns: auto 1fr auto; row-gap: 12px; }
        .ib-when { display: none; }
    }

    .ib-avatar {
        width: 40px;
        height: 40px;
        border-radius: 11px;
        background: linear-gradient(140deg, #34BDEB, #1d7fa8);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 700;
        flex-shrink: 0;
    }

    .ib-name { font-size: 14.5px; font-weight: 700; color: var(--ink); }

    .ib-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }

    .ib-camp {
        font-size: 13.5px;
        font-weight: 600;
        color: var(--brand-dk);
        text-decoration: none;
    }

    .ib-camp:hover { text-decoration: underline; }

    .ib-brand { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }

    .ib-num { text-align: right; }

    .ib-num-n {
        font-size: 15px;
        font-weight: 700;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
    }

    .ib-num-l { font-size: 11.5px; color: var(--ink-soft); margin-top: 1px; }

    .ib-when { font-size: 12.5px; color: var(--ink-mute); white-space: nowrap; }

    .ib-status {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 12.5px;
        font-weight: 600;
        padding: 7px 13px;
        border-radius: 9px;
        white-space: nowrap;
        border: 1px solid transparent;
    }

    .ib-status::before {
        content: '';
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
    }

    .ib-status.pending   { background: var(--warn-bg); color: var(--warn); border-color: #fde68a; }
    .ib-status.approved  { background: var(--good-bg); color: var(--good); border-color: #bbf7d0; }
    .ib-status.rejected  { background: var(--bad-bg);  color: var(--bad);  border-color: #fecaca; }
    .ib-status.withdrawn { background: #f1f5f9;        color: var(--ink-soft); border-color: #e2e8f0; }

    .ib-go {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--brand-dk);
        text-decoration: none;
        white-space: nowrap;
        border: 1px solid #cbe9f7;
        border-radius: 9px;
        padding: 8px 14px;
        background: #f5fcfe;
    }

    .ib-go:hover { background: #e8f7fd; }

    .ib-empty {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 56px 24px;
        text-align: center;
    }

    .ib-empty h3 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 5px; }
    .ib-empty p  { font-size: 13.5px; color: var(--ink-soft); margin: 0; }
</style>
@endpush

@section('content')
<div class="ib">

    <div class="ib-tabs">
        @foreach (['pending' => 'Waiting on you', 'approved' => 'Approved', 'rejected' => 'Rejected', 'all' => 'Everything'] as $key => $label)
            <a href="{{ route('proposals.inbox', ['status' => $key]) }}"
               class="ib-tab {{ $status === $key ? 'on' : '' }}">
                {{ $label }}
                <span class="ib-tab-n">{{ $counts[$key] ?? 0 }}</span>
            </a>
        @endforeach
    </div>

    @forelse ($proposals as $p)
        <div class="ib-row">

            <div class="ib-avatar">{{ strtoupper(mb_substr($p->user->name ?? '?', 0, 1)) }}</div>

            <div>
                <div class="ib-name">{{ $p->user->name ?? 'Unknown' }}</div>
                <div class="ib-sub">{{ $p->platform }} · {{ $p->channel_name }}</div>
            </div>

            <div>
                @if ($p->campaign)
                    <a href="{{ route('campaigns.show', $p->campaign) }}" class="ib-camp">
                        {{ $p->campaign->name }}
                    </a>
                    <div class="ib-brand">{{ $p->campaign->brand_name }}</div>
                @else
                    <span class="ib-sub">Campaign removed</span>
                @endif
            </div>

            <div class="ib-num">
                <div class="ib-num-n">{{ number_format($p->follower_count) }}</div>
                <div class="ib-num-l">followers</div>
            </div>

            <div class="ib-when">{{ $p->created_at->diffForHumans() }}</div>

            <span class="ib-status {{ $p->status }}">{{ $p->statusLabel() }}</span>

            @if ($p->campaign)
                <a href="{{ route('campaigns.proposals.index', $p->campaign) }}" class="ib-go">
                    {{ $p->isPending() ? 'Review' : 'Open' }}
                </a>
            @endif

        </div>
    @empty
        <div class="ib-empty">
            <h3>Nothing here</h3>
            <p>
                @if ($status === 'pending')
                    Every proposal has been dealt with.
                @else
                    No proposals with this status yet.
                @endif
            </p>
        </div>
    @endforelse

    <div style="margin-top:16px">
        {{ $proposals->links() }}
    </div>

</div>
@endsection