@extends('website.layout')
@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">
<style>
    /* Page Specific Styles */
    .page-title-area {
        padding: 10px 20px 20px;
    }
    .earn-action-card {
        background: linear-gradient(135deg, #ffffff 0%, #f0f3ff 100%);
        border: 2px solid #e0e7ff;
    }
    .promo-type-badge {
        background: var(--primary-blue);
        color: white;
        padding: 5px 15px;
        border-radius: 50px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        margin-bottom: 10px;
        display: inline-block;
    }
    .step-number {
        width: 24px;
        height: 24px;
        background: var(--text-main);
        color: white;
        border-radius: 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 800;
        margin-right: 10px;
    }
    .instruction-item {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        font-size: 14px;
        color: #636e72;
    }
    .screenshot-upload-box {
        border: 2px dashed #cbd5e1;
        border-radius: 15px;
        padding: 15px;
        background: #f8fafc;
        transition: 0.3s;
    }
    .screenshot-upload-box:focus-within {
        border-color: var(--primary-blue);
        background: white;
    }
    .bonus-pill-light {
        background: #fff9db;
        color: #fab005;
        font-weight: 800;
        padding: 4px 12px;
        border-radius: 50px;
        font-size: 12px;
    }
</style>
<div class="page-title-area">
    <h2 class="fw-bolder">Earn Credits 💰</h2>
    <p class="text-muted small">Engage with users to grow your balance</p>
</div>
<div class="container">
    <div class="row">
        <div class="col-lg-7">
            <div class="app-card earn-action-card p-4 text-center">
                @if($promotion)
                    <span class="promo-type-badge">{{ $promotion->type }}</span>
                    <h4 class="fw-black mb-2">
                        @if($promotion->type === 'follow')
                            Follow <span class="text-primary">@ {{ $promotion->instagram_username }}</span>
                        @elseif($promotion->type === 'like')
                            Like <span>{{ $promotion->instagram_username }}</span>'s Instagram Post
                        @elseif($promotion->type === 'comment')
                            Comment on <span class="text-primary">@ {{ $promotion->instagram_username }}</span>'s post
                        @endif
                    </h4>
                    <p class="text-muted mb-4">Reward: <span class="text-success fw-bold">+{{ $promotion->credit_per_action }} Credits</span></p>
                    <div class="d-grid gap-3">
                        <button onclick="open_promotion({{ $promotion->id }})" class="btn btn-dark py-3 rounded-pill fw-bold" id="earnBtn">
                            <i class="fa-brands fa-instagram me-2"></i> OPEN INSTAGRAM
                        </button>
                        <div class="screenshot-upload-box mt-2">
                            <label class="form-label-custom mb-2">Upload Proof (Screenshot)</label>
                            <input type="file" id="screenshot" accept="image/*" class="form-control border-0 bg-transparent">
                        </div>
                        <button class="btn-app py-3" id="verifybtn" onclick="verify_promotion({{ $promotion->id }})" disabled>
                            VERIFY & EARN
                        </button>
                    </div>
                @else
                    <div class="py-5">
                        <i class="fa-solid fa-face-reveal fs-1 text-muted mb-3"></i>
                        <h5 class="fw-bold">All caught up!</h5>
                        <p class="text-muted small">No promotions available right now. Check back later.</p>
                    </div>
                @endif
            </div>
            <div class="app-card p-4">
                <h6 class="fw-bold mb-3">How to earn correctly:</h6>
                <div class="instruction-item">
                    <span class="step-number">1</span>
                    <span>Click <b>Open Instagram</b> to view the target.</span>
                </div>
                <div class="instruction-item">
                    <span class="step-number">2</span>
                    <span>Complete the required action (Like/Follow).</span>
                </div>
                <div class="instruction-item">
                    <span class="step-number">3</span>
                    <span>Take a <b>screenshot</b> and upload it here.</span>
                </div>
            </div>
        </div>
        <div class="col-lg-5">
            <div class="app-card p-4 text-center">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="fw-bold m-0">Daily Bonus</h5>
                    <span class="bonus-pill-light">READY IN {{ 25 - $user->daily_actions > 0 ? 25 - $user->daily_actions : 0 }} ACTIONS</span>
                </div>
                <div class="progress mb-3" style="height: 12px; border-radius: 10px; background: #eee;">
                    @php $percent = ($user->daily_actions / 25) * 100; @endphp
                    <div class="progress-bar bg-success" role="progressbar" style="width: {{ $percent > 100 ? 100 : $percent }}%"></div>
                </div>
                <p class="small text-muted mb-4">
                    Current Progress: <b>{{ $user->daily_actions }}/25</b>
                </p>
                <div class="p-3 bg-light rounded-4 mb-3">
                    <span class="small text-muted d-block">Resets in:</span>
                    <span class="fw-black fs-5 text-danger" id="bonusTimer">--h --m --s</span>
                </div>
                <button id="claimBonusBtn" onclick="claimBonus()" class="btn btn-outline-success w-100 rounded-pill fw-bold"
                    {{ $user->daily_actions < 25 || $user->bonus_claimed ? 'disabled' : '' }}>
                    CLAIM DAILY REWARD
                </button>
            </div>
        </div>
    </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const screenshotInput = document.getElementById('screenshot');
    const verifyBtn = document.getElementById('verifybtn');
    if (screenshotInput && verifyBtn) {
        screenshotInput.addEventListener('change', function () {
            verifyBtn.disabled = !this.files.length;
        });
    }
});
function open_promotion(id) {
    let url = "{{ route('action.promotion', ':id') }}".replace(':id', id);
    fetch(url)
        .then(res => res.json())
        .then(promo => {
            let promoUrl = promo.type === 'follow'
                ? `https://www.instagram.com/${promo.instagram_username}/`
                : promo.post_url;
            window.open(promoUrl, '_blank');
        });
}
async function verify_promotion(id) {
    const fileInput = document.getElementById('screenshot');
    const verifyBtn = document.getElementById('verifybtn');
    if (!fileInput || !fileInput.files.length) {
        alert('Please upload a screenshot first');
        return;
    }
    verifyBtn.innerText = "VERIFYING...";
    verifyBtn.disabled = true;
    let formData = new FormData();
    formData.append('promotion_id', id);
    formData.append('screenshot', fileInput.files[0]);
    try {
        let res = await fetch('{{ route("action.verify") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: formData
        });
        let data = await res.json();
        if (data.success) {
            alert(`Success! You earned ${data.credits_earned} credits.`);
            window.location.reload();
        } else {
            alert(data.error || 'Verification failed');
            verifyBtn.innerText = "VERIFY & EARN";
            verifyBtn.disabled = false;
        }
    } catch (e) {
        alert('Network error. Please try again.');
        verifyBtn.innerText = "VERIFY & EARN";
        verifyBtn.disabled = false;
    }
}
let resetTime = {{ $user->bonus_reset_at ? $user->bonus_reset_at->timestamp : '0' }} * 1000;
const timerEl = document.getElementById('bonusTimer');
function updateBonusTimer() {
    const now = new Date().getTime();
    let diff = resetTime - now;
    if (diff <= 0) {
        timerEl.innerText = 'Resetting...';
        resetTime += 24 * 60 * 60 * 1000;
        return;
    }
    const h = Math.floor(diff / 3600000);
    const m = Math.floor((diff % 3600000) / 60000);
    const s = Math.floor((diff % 60000) / 1000);
    timerEl.innerText = `${h}h ${m}m ${s}s`;
}
setInterval(updateBonusTimer, 1000);
updateBonusTimer();
function claimBonus() {
    fetch("{{ url('/claim-bonus') }}", {
            method: "POST",
            headers: {
                "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content,
                "Accept": "application/json"
            }
        })
        .then(res => res.json())
        .then(data => {
            alert(data.message);
            location.reload();
        })
        .catch(() => alert("Something went wrong"));
}
</script>
@endsection