@extends('website.layout')

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <style>
        /* Page Specific Styles */
        .page-title-area {
            padding: 10px 20px 20px;
        }

        /* Modern Promo Card */
        .promo-card {
            background: white;
            border-radius: 24px;
            padding: 20px;
            margin-bottom: 20px;
            border: 1px solid #f1f5f9;
            box-shadow: var(--card-shadow);
            position: relative;
            transition: 0.3s;
        }

        .promo-card.boosted {
            border: 2px solid #fab005;
            background: linear-gradient(135deg, #ffffff 0%, #fffdf5 100%);
        }

        .status-pill {
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            padding: 4px 12px;
            border-radius: 50px;
            letter-spacing: 0.5px;
        }

        .status-running {
            background: #dcfce7;
            color: #166534;
        }

        .status-completed {
            background: #f1f5f9;
            color: #475569;
        }

        .promo-icon-box {
            width: 45px;
            height: 45px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin-right: 15px;
        }

        /* Colors for icons based on type */
        .icon-like {
            background: #fff0f6;
            color: #f06595;
        }

        .icon-follow {
            background: #f0f3ff;
            color: #5c7cfa;
        }

        .icon-comment {
            background: #f3f0ff;
            color: #845ef7;
        }

        .progress-minimal {
            height: 6px;
            border-radius: 10px;
            background: #f1f5f9;
            margin: 15px 0;
        }

        .info-card-app {
            background: #f8fafc;
            border-radius: 20px;
            padding: 20px;
            border: 1px solid #e2e8f0;
        }

        .boost-btn-sm {
            background: #fab005;
            color: #000;
            border: none;
            border-radius: 12px;
            padding: 8px 15px;
            font-size: 12px;
            font-weight: 800;
            transition: 0.2s;
        }

        .boost-btn-sm:hover {
            background: #f59f00;
        }
    </style>

    <div class="page-title-area">
        <h2 class="fw-bolder">Your Promotions 📊</h2>
        <p class="text-muted small">Track and manage your growth campaigns</p>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <h6 class="section-title">Active & Past Campaigns</h6>

                @forelse($promotions as $promo)
                    <div class="promo-card {{ $promo->is_boosted ? 'boosted' : '' }}" id="promo-{{ $promo->id }}">
                        <div class="d-flex justify-content-between align-items-start mb-3">
                            <div class="d-flex align-items-center">
                                <div
                                    class="promo-icon-box icon-{{ $promo->type === 'like' ? 'like' : ($promo->type === 'follow' ? 'follow' : 'comment') }}">
                                    <i
                                        class="fa-solid {{ $promo->type === 'like' ? 'fa-heart' : ($promo->type === 'follow' ? 'fa-user-plus' : 'fa-comment') }}"></i>
                                </div>
                                <div>
                                    <h6 class="fw-bold m-0">{{ ucfirst($promo->type) }}</h6>
                                    <small class="text-muted">
                                        @if ($promo->type === 'follow')
                                            @ {{ $promo->instagram_username }}
                                        @else
                                            <a href="{{ $promo->post_url }}" target="_blank"
                                                class="text-decoration-none">View Post <i
                                                    class="fa-solid fa-arrow-up-right-from-square"
                                                    style="font-size: 10px;"></i></a>
                                        @endif
                                    </small>
                                </div>
                            </div>
                            <span class="status-pill {{ $promo->remaining_actions ? 'status-running' : 'status-completed' }}">
                                {{ $promo->remaining_actions ? 'Running' : 'Completed' }}
                            </span>
                        </div>


                        <div class="d-flex justify-content-between small fw-bold">
                            <span>Progress</span>
                            <span>
                                {{ $promo->total_actions - $promo->remaining_actions }} / {{ $promo->total_actions }} Done
                            </span>
                        </div>

                        <div class="progress progress-minimal">
                            @php
                                $done = $promo->total_actions - $promo->remaining_actions;
                                $percentage = $promo->total_actions > 0 ? ($done / $promo->total_actions) * 100 : 0;
                                $percentage = min(max($percentage, 0), 100);
                            @endphp
                            <div class="progress-bar bg-primary" role="progressbar" style="width: {{ $percentage }}%"
                                aria-valuenow="{{ $percentage }}" aria-valuemin="0" aria-valuemax="100">
                            </div>
                        </div>

                        <div class="d-flex justify-content-between align-items-center mt-2">
                            <small class="text-muted">{{ $promo->created_at->diffForHumans() }}</small>

                            <div class="boost-cell">
                                @if ($promo->is_active && !$promo->is_boosted)
                                    <button class="boost-btn-sm" onclick="confirmBoost({{ $promo->id }})">
                                        ⚡ BOOST (100)
                                    </button>
                                @elseif($promo->is_boosted)
                                    <span class="badge bg-warning text-dark rounded-pill fw-bold" style="font-size: 10px;">⚡
                                        BOOSTED 5X</span>
                                @endif
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="app-card p-5 text-center">
                        <img src="https://cdn-icons-png.flaticon.com/512/7486/7486744.png" width="80"
                            class="opacity-25 mb-3">
                        <h6 class="fw-bold text-muted">No promotions yet</h6>
                        <a href="{{ route('boost_profile') }}" class="btn btn-primary btn-sm rounded-pill mt-2">Start First
                            Campaign</a>
                    </div>
                @endforelse
            </div>

            <div class="col-lg-4">
                <h6 class="section-title">Help Center</h6>

                <div class="info-card-app mb-4">
                    <div class="mb-4">
                        <h6 class="fw-bold text-primary"><i class="fa-solid fa-bolt me-2"></i> Why Boost?</h6>
                        <p class="small text-muted mb-0">Boosted promotions are prioritized in the earn list, completing up
                            to 5x faster than normal campaigns.</p>
                    </div>

                    <div class="mb-4">
                        <h6 class="fw-bold text-success"><i class="fa-solid fa-circle-check me-2"></i> Running</h6>
                        <p class="small text-muted mb-0">Your promotion is active. Ensure your profile stays <b>Public</b>
                            to avoid delivery issues.</p>
                    </div>

                    <div class="">
                        <h6 class="fw-bold text-secondary"><i class="fa-solid fa-rotate-left me-2"></i> Refunds</h6>
                        <p class="small text-muted mb-0">If you delete an active promotion, unused credits are instantly
                            returned to your balance.</p>
                    </div>
                </div>

                <div class="app-card p-3" style="background: var(--text-main); color: white;">
                    <div class="d-flex align-items-center">
                        <i class="fa-solid fa-headset fs-3 me-3 opacity-50"></i>
                        <div>
                            <h6 class="fw-bold mb-0">Need Help?</h6>
                            <small class="opacity-75">Contact support for issues</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="boostConfirmModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow" style="border-radius: 25px;">
                <div class="modal-body text-center p-4">
                    <div class="mb-3">
                        <i class="fa-solid fa-bolt fs-1 text-warning"></i>
                    </div>
                    <h4 class="fw-black">Enable 5x Speed?</h4>
                    <p class="text-muted">Boosting this promotion will cost <b>100 credits</b>. This action cannot be
                        undone.</p>

                    <div class="d-grid gap-2 mt-4">
                        <button type="button" class="btn-app py-3" id="confirmBoostBtn">YES, BOOST NOW</button>
                        <button type="button" class="btn btn-link text-muted text-decoration-none fw-bold"
                            data-bs-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let currentPromoId = null;

        function confirmBoost(promoId) {
            currentPromoId = promoId;
            const modal = new bootstrap.Modal(document.getElementById('boostConfirmModal'));
            modal.show();
        }

        document.getElementById('confirmBoostBtn').addEventListener('click', function() {
            if (!currentPromoId) return;
            const promoId = currentPromoId;

            // UI Loading State
            const confirmBtn = this;
            confirmBtn.innerText = "PROCESSING...";
            confirmBtn.disabled = true;

            fetch("{{ url('/promotion') }}/" + promoId + "/boost", {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json'
                    }
                })
                .then(res => res.json())
                .then(data => {
                    const modalEl = bootstrap.Modal.getInstance(document.getElementById('boostConfirmModal'));
                    modalEl.hide();

                    if (data.success) {
                        // Update the UI
                        const card = document.querySelector(`#promo-${promoId}`);
                        card.classList.add('boosted');
                        card.querySelector('.boost-cell').innerHTML =
                            '<span class="badge bg-warning text-dark rounded-pill fw-bold" style="font-size: 10px;">⚡ BOOSTED 5X</span>';

                        // Assuming #user_credits exists in your layout's top bar or elsewhere
                        const creditDisplay = document.querySelector('#user_credits');
                        if (creditDisplay) creditDisplay.innerText = data.new_credits;

                        alert('Promotion Boosted! 🚀');
                    } else {
                        alert(data.error);
                    }
                })
                .catch(err => {
                    alert('Something went wrong');
                })
                .finally(() => {
                    confirmBtn.innerText = "YES, BOOST NOW";
                    confirmBtn.disabled = false;
                });
        });
    </script>
@endsection