@extends('layouts.app')
@section('title','My Promotions')

@section('content')
<div class="page-header">
    <h2>📣 My Promotions</h2>
    <p>Manage and track your campaigns</p>
</div>

<div class="section">
    <a href="{{ route('promotions.create') }}" class="btn btn-primary btn-block btn-lg" style="margin-bottom:16px;">
        <i class="fa fa-plus"></i> Create New Promotion
    </a>

    @forelse($promotions as $promo)
    @php $info = $promo->platform_info; @endphp
    <div class="card" style="margin-bottom:12px;overflow:hidden;">
        {{-- Header --}}
        <div style="padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;">
            <div style="width:38px;height:38px;border-radius:8px;background:{{ $info['color'] }}18;color:{{ $info['color'] }};display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;">{{ $info['icon'] }}</div>
            <div style="flex:1;">
                <div style="font-weight:700;font-size:14px;">{{ $promo->title }}</div>
                <div style="font-size:11px;color:var(--text-muted);">{{ $info['label'] }} • Created {{ $promo->created_at->diffForHumans() }}</div>
            </div>
            <span class="badge {{ match($promo->status){'active'=>'badge-success','pending'=>'badge-warning','paused'=>'badge-muted','rejected'=>'badge-danger','depleted'=>'badge-danger','completed'=>'badge-primary',default=>'badge-muted'} }}">
                {{ ucfirst($promo->status) }}
            </span>
        </div>

        {{-- Stats --}}
        <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-bottom:1px solid var(--border);">
            @foreach(['Views'=>number_format($promo->total_views),'Clicks'=>number_format($promo->total_clicks),'CTR'=>$promo->ctr.'%','Pts Left'=>number_format($promo->points_remaining)] as $label => $val)
            <div style="padding:12px 8px;text-align:center;{{ !$loop->last?'border-right:1px solid var(--border);':'' }}">
                <div style="font-size:16px;font-weight:800;color:var(--text);">{{ $val }}</div>
                <div style="font-size:10px;color:var(--text-muted);">{{ $label }}</div>
            </div>
            @endforeach
        </div>

        {{-- Progress Bar --}}
        <div style="padding:10px 16px;border-bottom:1px solid var(--border);">
            <div style="display:flex;justify-content:space-between;margin-bottom:5px;font-size:11px;color:var(--text-muted);">
                <span>Budget Used</span>
                <span>{{ $promo->progress_percent }}%</span>
            </div>
            <div style="height:6px;background:#E2E8F0;border-radius:3px;overflow:hidden;">
                <div style="height:100%;width:{{ $promo->progress_percent }}%;background:{{ $promo->progress_percent>=90?'var(--danger)':($promo->progress_percent>=70?'var(--warning)':'var(--primary)') }};border-radius:3px;"></div>
            </div>
            <div style="display:flex;justify-content:space-between;margin-top:4px;font-size:10px;color:var(--text-muted);">
                <span>{{ number_format($promo->points_spent) }} spent</span>
                <span>{{ number_format($promo->points_budget) }} total</span>
            </div>
        </div>

        {{-- Actions --}}
        <div style="padding:12px 16px;display:flex;gap:8px;flex-wrap:wrap;">
            @if($promo->status === 'active')
            <form method="POST" action="{{ route('promotions.toggle', $promo) }}" style="display:inline;">@csrf
                <button class="btn btn-sm btn-outline"><i class="fa fa-pause"></i> Pause</button>
            </form>
            @elseif($promo->status === 'paused')
            <form method="POST" action="{{ route('promotions.toggle', $promo) }}" style="display:inline;">@csrf
                <button class="btn btn-sm btn-success"><i class="fa fa-play"></i> Resume</button>
            </form>
            @endif

            {{-- Top Up --}}
            @if(in_array($promo->status, ['active','paused','depleted']))
            <button class="btn btn-sm btn-primary" onclick="showTopup({{ $promo->id }}, '{{ addslashes($promo->title) }}')">
                <i class="fa fa-plus"></i> Add Budget
            </button>
            @endif

            {{-- View URL --}}
            <a href="{{ $promo->url }}" target="_blank" class="btn btn-sm btn-outline"><i class="fa fa-external-link"></i> View Content</a>

            @if($promo->status === 'rejected')
            <div style="width:100%;font-size:12px;color:var(--danger);margin-top:4px;">
                <i class="fa fa-circle-exclamation"></i> Rejected: {{ $promo->rejection_reason }}
            </div>
            @endif
        </div>
    </div>
    @empty
    <div class="card card-body text-center" style="padding:48px 20px;">
        <div style="font-size:48px;margin-bottom:12px;">📣</div>
        <div style="font-weight:700;font-size:16px;">No promotions yet</div>
        <div style="color:var(--text-muted);font-size:13px;margin-top:6px;">Promote your YouTube, TikTok, Facebook, website & more!</div>
        <a href="{{ route('promotions.create') }}" class="btn btn-primary" style="margin-top:16px;">Create Promotion</a>
    </div>
    @endforelse
    {{ $promotions->links() }}
</div>

{{-- Top Up Modal --}}
<div id="topup-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;align-items:center;justify-content:center;padding:20px;">
    <div style="background:#fff;border-radius:20px;padding:24px;width:100%;max-width:360px;">
        <div style="font-weight:800;font-size:16px;margin-bottom:4px;">💰 Add Budget</div>
        <div style="font-size:13px;color:var(--text-muted);margin-bottom:16px;" id="topup-promo-name"></div>
        <form method="POST" id="topup-form">
            @csrf
            <div class="form-group">
                <label class="form-label">Points to Add</label>
                <input type="number" name="points" class="form-control" placeholder="Min 100 pts" min="100" required>
                <div style="font-size:11px;color:var(--text-muted);margin-top:4px;">Your balance: <strong>{{ number_format($user->points) }} pts</strong></div>
            </div>
            <div style="display:flex;gap:10px;margin-top:16px;">
                <button type="submit" class="btn btn-primary flex-1">Add Budget</button>
                <button type="button" onclick="closeTopup()" class="btn btn-outline flex-1">Cancel</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
function showTopup(id, name) {
    document.getElementById('topup-modal').style.display = 'flex';
    document.getElementById('topup-promo-name').textContent = name;
    document.getElementById('topup-form').action = `/promotions/${id}/topup`;
}
function closeTopup() {
    document.getElementById('topup-modal').style.display = 'none';
}
</script>
@endpush