{{-- ============================================================
     resources/views/user/promotions/create.blade.php
     ============================================================ --}}
@extends('layouts.app')
@section('title','Promote My Content')

@section('content')
<div class="page-header">
    <h2>📣 Promote My Content</h2>
    <p>Pay points → Get real views from ZURITYM users</p>
</div>

<div class="section">
    {{-- How it works --}}
    <div style="background:linear-gradient(135deg,#8B5CF615,#1A73E815);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:16px;">
        <div style="font-weight:700;font-size:13px;margin-bottom:10px;">How Promotions Work</div>
        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;">
            @foreach(['Set budget & URL'=>'💰','Users view content'=>'👁','You get real views'=>'📈'] as $step => $icon)
            <div>
                <div style="font-size:24px;margin-bottom:4px;">{{ $icon }}</div>
                <div style="font-size:11px;font-weight:600;">{{ $step }}</div>
            </div>
            @endforeach
        </div>
    </div>

    {{-- Balance --}}
    <div style="background:var(--primary-light);border-radius:10px;padding:12px 16px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;">
        <div style="font-size:13px;font-weight:600;color:var(--primary);">Your Balance</div>
        <div style="font-size:18px;font-weight:800;color:var(--primary);">{{ number_format($user->points) }} pts</div>
    </div>

    @if($errors->any())
    <div class="alert alert-danger"><i class="fa fa-circle-exclamation"></i> {{ $errors->first() }}</div>
    @endif

    <form method="POST" action="{{ route('promotions.store') }}" enctype="multipart/form-data">
        @csrf

        {{-- Platform --}}
        <div class="form-group">
            <label class="form-label">Platform / Content Type *</label>
            <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:8px;">
                @foreach($platforms as $key => $p)
                <label style="border:2px solid var(--border);border-radius:10px;padding:10px 6px;text-align:center;cursor:pointer;transition:.15s;" class="platform-opt" id="plt-{{ $key }}">
                    <input type="radio" name="type" value="{{ $key }}" style="display:none;" onchange="onPlatform('{{ $key }}')" {{ old('type')===$key?'checked':'' }}>
                    <div style="font-size:22px;">{{ $p['icon'] }}</div>
                    <div style="font-size:10px;font-weight:700;margin-top:3px;">{{ $p['label'] }}</div>
                </label>
                @endforeach
            </div>
        </div>

        {{-- URL --}}
        <div class="form-group">
            <label class="form-label">Content URL *</label>
            <input type="url" name="url" class="form-control" placeholder="https://youtube.com/watch?v=..." value="{{ old('url') }}" required>
            <div style="font-size:11px;color:var(--text-muted);margin-top:4px;" id="url-hint">Paste the full link to your content</div>
        </div>

        {{-- Title --}}
        <div class="form-group">
            <label class="form-label">Campaign Title *</label>
            <input type="text" name="title" class="form-control" placeholder="e.g. Check out my latest video!" maxlength="100" value="{{ old('title') }}" required>
        </div>

        {{-- Description --}}
        <div class="form-group">
            <label class="form-label">Description (optional)</label>
            <textarea name="description" class="form-control" rows="2" placeholder="Tell viewers what your content is about..." maxlength="500">{{ old('description') }}</textarea>
        </div>

        {{-- Thumbnail --}}
        <div class="form-group">
            <label class="form-label">Thumbnail Image (optional)</label>
            <input type="file" name="thumbnail" class="form-control" accept="image/*">
        </div>

        {{-- Points Budget --}}
        <div class="form-group">
            <label class="form-label">Points Budget *</label>
            <input type="number" name="points_budget" class="form-control" placeholder="Min {{ number_format($minBudget) }} pts"
                   min="{{ $minBudget }}" value="{{ old('points_budget') }}" max="{{ $user->points }}"
                   oninput="calcViews()" required>
            <div style="background:#F8FAFC;border-radius:8px;padding:10px;margin-top:8px;font-size:12px;">
                <div id="calc-output" style="color:var(--text-muted);">Enter budget to see estimated views</div>
            </div>
        </div>

        {{-- Rates Info --}}
        <div style="background:var(--primary-light);border-radius:10px;padding:12px;margin-bottom:16px;" id="rate-info" style="display:none;">
            <div style="font-weight:700;font-size:12px;color:var(--primary);margin-bottom:8px;">💡 Rate for selected platform</div>
            <div id="rate-detail" style="font-size:12px;color:var(--primary-dark);"></div>
        </div>

        <button type="submit" class="btn btn-primary btn-block btn-lg" onclick="return confirmSubmit()">
            <i class="fa fa-rocket"></i> Launch Promotion
        </button>
        <p style="font-size:11px;color:var(--text-muted);text-align:center;margin-top:8px;">
            A {{ \App\Models\Setting::get('promo_platform_fee_pct','10') }}% platform fee applies. Points are deducted immediately.
        </p>
    </form>
</div>
@endsection

@push('scripts')
<script>
const rates = @json($ratesPerPlatform);
const feePct = {{ \App\Models\Setting::get('promo_platform_fee_pct',10) }};
let currentPlatform = '{{ old('type','website') }}';

function onPlatform(key) {
    currentPlatform = key;
    document.querySelectorAll('.platform-opt').forEach(el => el.style.borderColor='var(--border)');
    document.getElementById('plt-'+key).style.borderColor = 'var(--primary)';
    document.getElementById('plt-'+key).style.background = 'var(--primary-light)';
    const hints = {youtube:'https://youtube.com/watch?v=...', tiktok:'https://tiktok.com/@user/video/...', facebook:'https://facebook.com/your-page', instagram:'https://instagram.com/p/...', twitter:'https://twitter.com/user/status/...', telegram:'https://t.me/yourchannel', website:'https://yourwebsite.com', custom:'https://...'};
    document.getElementById('url-hint').textContent = hints[key]||'Full link to your content';
    const r = rates[key];
    if (r) {
        document.getElementById('rate-info').style.display = 'block';
        document.getElementById('rate-detail').innerHTML = `Each viewer earns <strong>${r.view_points} pts</strong> for watching ${r.duration}s${r.read_points?` or <strong>${r.read_points} pts</strong> for reading 30s`:''}`;
    }
    calcViews();
}

function calcViews() {
    const budget = parseInt(document.getElementById('points_budget')?.value || document.querySelector('[name=points_budget]')?.value) || 0;
    const r = rates[currentPlatform] || {view_points:5};
    if (budget > 0) {
        const fee = Math.floor(budget * feePct / 100);
        const net = budget - fee;
        const estViews = Math.floor(net / r.view_points);
        document.getElementById('calc-output').innerHTML =
            `<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;text-align:center;">
                <div><div style="font-size:16px;font-weight:800;color:var(--primary);">${net.toLocaleString()}</div><div style="color:var(--text-muted);">Net budget</div></div>
                <div><div style="font-size:16px;font-weight:800;color:var(--success);">~${estViews.toLocaleString()}</div><div style="color:var(--text-muted);">Est. views</div></div>
                <div><div style="font-size:16px;font-weight:800;color:var(--warning);">${fee.toLocaleString()}</div><div style="color:var(--text-muted);">Platform fee</div></div>
            </div>`;
    }
}

function confirmSubmit() {
    const budget = parseInt(document.querySelector('[name=points_budget]')?.value)||0;
    return budget > 0 ? confirm(`Launch promotion with ${budget.toLocaleString()} points budget?`) : false;
}

// Set initial platform
onPlatform(currentPlatform);
</script>
@endpush