@extends('website.layout')

@section('content')



    <div class="menu-grid">
        <a href="{{ route('dashboard') }}" class="menu-card">
            <div class="icon-wrapper bg-dash">📊</div>
            <span>Dashboard</span>
        </a>
        <a href="{{ route('earn_credits') }}" class="menu-card">
            <div class="icon-wrapper bg-earn">💰</div>
            <span>Earn Credits</span>
        </a>
        <a href="{{ route('boost_profile') }}" class="menu-card">
            <div class="icon-wrapper bg-boost">🚀</div>
            <span>Boost Profile</span>
        </a>
        <a href="{{ route('view_promotion') }}" class="menu-card">
            <div class="icon-wrapper bg-promo">🎁</div>
            <span>Promotions</span>
        </a>
    </div>

    <div class="credits-banner">
        <div class="credits-label">
            💸 Your Credits
        </div>
        <div class="credits-value" id="user_credits">
            {{ $user->user_credit }}
        </div>
    </div>

    <div class="section-title">Profile Information</div>
    
    <div class="mx-3 p-3 bg-white rounded-4 shadow-sm d-flex align-items-center mb-4">
        <img src="{{ Auth::user()->profile_image ? (Str::startsWith(Auth::user()->profile_image, 'http') ? Auth::user()->profile_image : asset('storage/' . Auth::user()->profile_image)) : asset('default-avatar.png') }}" 
             style="width: 50px; height: 50px; object-fit: cover;" class="rounded-circle me-3">
        <div>
            <div class="fw-bold">{{ $user->instagram_username }}</div>
            <div class="text-muted small">Active Member</div>
        </div>
    </div>



   

    <script>
        // Use server timestamp (UTC)
        let resetTime = {{ $user->bonus_reset_at ? $user->bonus_reset_at->timestamp : '0' }} * 1000;

        const claimBtn = document.getElementById('claimBonusBtn');
        const timerEl = document.getElementById('bonusTimer');

        function updateBonusTimer() {
            const now = new Date().getTime();
            let diff = resetTime - now;

            if (diff <= 0) {
                // Bonus reset
                timerEl.innerText = 'Resetting...';

                // Automatically set next day's reset
                resetTime += 24 * 60 * 60 * 1000;

                // Enable CLAIM button if actions are sufficient
                if ({{ $user->daily_actions }} >= 25) {
                    claimBtn.disabled = false;
                }

                diff = resetTime - now;
            }

            const hours = Math.floor(diff / (1000 * 60 * 60));
            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((diff % (1000 * 60)) / 1000);

            timerEl.innerText = `${hours}h ${minutes}m ${seconds}s`;
        }

        setInterval(updateBonusTimer, 1000);
        updateBonusTimer();

        function claimBonus() {
            fetch("{{ url('/claim-bonus') }}", {
                    method: "POST",
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}",
                        "Accept": "application/json"
                    }
                })
                .then(res => res.json())
                .then(data => {
                    alert(data.message);
                    location.reload();
                })
                .catch(() => alert("Something went wrong"));
        }
    </script>


    
@endsection