@extends('website.layout')

@section('content')
<style>
    /* Page Specific Styles - UNCHANGED */
    .page-title-area {
        padding: 10px 20px 20px;
    }
    
    .app-card-header {
        padding: 20px 20px 0;
        font-weight: 800;
        font-size: 13px;
        color: #b2bec3;
        text-transform: uppercase;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .form-label-custom {
        font-size: 13px;
        font-weight: 700;
        color: var(--text-main);
        margin-bottom: 8px;
        display: block;
    }

    .form-control-app {
        border-radius: 15px;
        padding: 12px 18px;
        border: 1px solid #edf2f7;
        background-color: #fcfcfc;
        font-size: 15px;
    }

    .form-control-app:focus {
        border-color: var(--primary-blue);
        box-shadow: 0 0 0 4px rgba(92, 124, 250, 0.1);
        background: white;
    }

    .credit-badge-container {
        background: #f0f3ff;
        border-radius: 18px;
        padding: 12px;
        text-align: center;
        border: 1px dashed var(--primary-blue);
    }

    .bonus-progress-box {
        background: #2d3436;
        color: white;
        border-radius: 20px;
        padding: 15px;
        margin-bottom: 15px;
    }

    .timer-text {
        font-weight: 800;
        color: #ff4757;
    }

    .info-box {
        background: #fff9db;
        border-radius: 20px;
        padding: 15px;
        border-left: 5px solid #fab005;
    }
</style>

<div class="page-title-area">
    <h2 class="fw-bolder">Boost Profile 🚀</h2>
    <p class="text-muted small">Configure your campaign below</p>
</div>

<div class="container">
    <div class="row">
        <div class="col-lg-7">
            <div class="app-card">
                <div class="app-card-header">
                    <span>Campaign Details</span>
                    <span class="badge rounded-pill bg-light text-primary border">
                        <span id="unitCredit">1</span> Credit / <span id="unitType">LIKE</span>
                    </span>
                </div>
                
                <div class="card-body p-4">
                    <form method="POST" action="{{ route('promotion.store') }}" id="add_promotion_form">
                        @csrf

                        <div class="mb-4">
                            <label class="form-label-custom">What do you need?</label>
                            <select class="form-select form-control-app" id="type" name="type" required>
                                <option value="follow">Instagram Followers</option>
                                <option value="like" selected>Instagram Likes</option>
                            </select>
                        </div>

                        <div class="mb-4">
                            <label class="form-label-custom">Instagram Username</label>
                            <input type="text" class="form-control form-control-app" value="{{ auth()->user()->instagram_username }}" disabled>
                            <input type="hidden" name="username" value="{{ auth()->user()->instagram_username }}">
                        </div>

                        <div class="mb-4" id="link_box">
                            <label class="form-label-custom" id="link_label">Target Post Link</label>
                            <input type="url" class="form-control form-control-app" name="link" placeholder="https://www.instagram.com/p/...">
                        </div>

                        <div class="row g-3 mb-4">
                            <div class="col-7">
                                <label class="form-label-custom" id="countLabel">How many?</label>
                                <input type="number" class="form-control form-control-app" name="count" id="count" min="1" value="10" required>
                            </div>
                            <div class="col-5">
                                <label class="form-label-custom">Total Cost</label>
                                <div class="credit-badge-container">
                                    <span class="fw-black fs-5 text-primary" id="creditsNeeded">10</span>
                                    <small class="d-block text-muted" style="font-size: 9px;">CREDITS</small>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-center mb-4">
                            <div class="g-recaptcha" data-sitekey="6Ldpiv8qAAAAAFZ-jko6gREHuWajE0QCPMcwbvCO"></div>
                        </div>

                        <button type="submit" class="btn-app py-3 fs-6 w-100">START PROMOTION</button>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-5">
            <div class="app-card p-4 text-center">
                <h5 class="fw-bold mb-3">Daily Rewards</h5>
                <div class="bonus-progress-box">
                    <small class="text-uppercase opacity-75 d-block mb-1" style="letter-spacing: 1px;">Progress</small>
                    <h3 class="mb-0 fw-black">{{ min($user->daily_actions, 25) }} / 25</h3>
                </div>
                
                <p class="small text-muted mb-3">Reach 25 actions today to claim your free bonus credits!</p>
                
                <div class="mb-4">
                    <span class="small text-muted">Time remaining until reset:</span><br>
                    <span class="timer-text fs-5" id="bonusTimer">--h --m --s</span>
                </div>

                <button id="claimBonusBtn" onclick="claimBonus()" class="btn btn-dark w-100 rounded-pill fw-bold"
                    {{ ($user->daily_actions < 25 || $user->bonus_claimed) ? 'disabled' : '' }}>
                    {{ $user->bonus_claimed ? 'CLAIMED TODAY' : 'CLAIM BONUS' }}
                </button>
            </div>

            <div class="info-box shadow-sm mb-4 mt-4">
                <div class="d-flex gap-3">
                    <i class="fa-solid fa-circle-exclamation fs-4 text-warning"></i>
                    <div>
                        <h6 class="fw-bold mb-1">Before you start</h6>
                        <ul class="small mb-0 ps-3 text-secondary">
                            <li>Profile must be <b>Public</b></li>
                            <li>Do not change username during campaign</li>
                            <li>Results usually start within 30 mins</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // --- CAMPAIGN LOGIC ---
    const typeSelect = document.getElementById('type');
    const linkBox = document.getElementById('link_box');
    const countInput = document.getElementById('count');
    const creditsNeeded = document.getElementById('creditsNeeded');
    const unitCredit = document.getElementById('unitCredit');
    const unitType = document.getElementById('unitType');
    const countLabel = document.getElementById('countLabel');

    function updateCredits() {
        let type = typeSelect.value;
        let qty = parseInt(countInput.value) || 0;
        let rate = (type === 'follow') ? 2 : 1;
        let labelSuffix = (type === 'follow') ? 'followers' : 'likes';
        let unitSuffix = (type === 'follow') ? 'FOLLOW' : 'LIKE';
        
        unitCredit.innerText = rate;
        unitType.innerText = unitSuffix;
        if(countLabel) countLabel.innerText = `How many ${labelSuffix}?`;
        creditsNeeded.innerText = qty * rate;
        linkBox.style.display = (type === 'follow') ? 'none' : 'block';
    }

    typeSelect.addEventListener('change', updateCredits);
    countInput.addEventListener('input', updateCredits);
    updateCredits();

    // --- AUTOMATIC RESET TIMER LOGIC (12 AM) ---
    function getNextMidnight() {
        const now = new Date();
        const midnight = new Date(now);
        midnight.setHours(24, 0, 0, 0); // Sets time to 00:00:00 of the next day
        return midnight.getTime();
    }

    function updateBonusTimer() {
        const timerElement = document.getElementById('bonusTimer');
        if(!timerElement) return;

        const now = new Date().getTime();
        const resetTime = getNextMidnight();
        let diff = resetTime - now;
        
        if (diff <= 0) {
            timerElement.innerText = '0h 0m 0s';
            location.reload(); // Refresh page to reset the UI at midnight
            return;
        }
        
        const h = Math.floor(diff / 3600000);
        const m = Math.floor((diff % 3600000) / 60000);
        const s = Math.floor((diff % 60000) / 1000);
        timerElement.innerText = `${h}h ${m}m ${s}s`;
    }

    setInterval(updateBonusTimer, 1000);
    updateBonusTimer();

    // --- AJAX CLAIM LOGIC ---
    function claimBonus() {
        const btn = document.getElementById('claimBonusBtn');
        btn.disabled = true;
        btn.innerText = "PROCESSING...";

        fetch("{{ url('/claim-bonus') }}", {
            method: "POST",
            headers: { 
                "X-CSRF-TOKEN": "{{ csrf_token() }}", 
                "Accept": "application/json",
                "Content-Type": "application/json"
            }
        })
        .then(res => res.json())
        .then(data => { 
            if(data.success) {
                alert(data.message || "Bonus claimed successfully!");
            } else {
                alert(data.message || "Could not claim bonus.");
            }
            location.reload(); 
        })
        .catch(() => {
            alert("Something went wrong");
            btn.disabled = false;
            btn.innerText = "CLAIM BONUS";
        });
    }
</script>
@endsection