@extends('front.layouts.app')
@section('content')

@php
    $campaign = $campaign ?? null;
    $user = $campaign->createdBy ?? null;
    $daysLeft = $campaign && $campaign->campaign_finished_at ? now()->diffInDays(\Carbon\Carbon::parse($campaign->campaign_finished_at), false) : 0;
    $progress = $campaign && $campaign->fund_target > 0 ? ($campaign->fund_raised / $campaign->fund_target) * 100 : 0;
    $progress = min(100, max(0, $progress));
    $remaining = $campaign ? ($campaign->fund_target - $campaign->fund_raised) : 0;
    $avatar = $user ? $user->avatar : asset('front/assets/images/placeholder-avatar.png');
@endphp

<div class="campaign-show-container">
    <!-- Breadcrumbs -->
    <div class="campaign-breadcrumbs">
        <a href="{{ route('front.campaigns.index') }}">Active Campaign</a>
        <span class="breadcrumb-separator">></span>
        <span class="breadcrumb-current">{{ $user->full_name ?? 'Campaign' }}</span>
    </div>

    <!-- Campaign Header -->
    <div class="campaign-header">
        <div class="campaign-status-badge">
            <span class="status-tag status-active">Active</span>
            <span class="days-left">{{ round($daysLeft) }} days left</span>
        </div>
        <h1 class="campaign-title">{{ $campaign->title ?? 'Campaign Title' }}</h1>
    </div>

    <div class="campaign-layout">
        <!-- Main Content -->
        <div class="campaign-main-content">
            <!-- Athlete Information Card -->
            <div class="campaign-info-card">
                <div class="athlete-profile-section">
                    <div class="athlete-image-wrapper">
                        <img src="{{ $avatar['thumb'] }}" alt="{{ $user->full_name ?? 'Athlete' }}" class="athlete-profile-image">
                    </div>
                    <div class="athlete-details">
                        <h2 class="athlete-name">{{ $user->full_name ?? 'Athlete Name' }}</h2>
                        <p class="athlete-role">Athlete - {{ $campaign->category->title ?? 'Sport' }}, Point Guard</p>
                        <div class="athlete-achievements">
                            <span class="achievement-badge">15 Gold Medals</span>
                            <span class="achievement-badge">National Champion</span>
                        </div>
                    </div>
                </div>
                
                <div class="campaign-meta-info">
                    <div class="meta-item">
                        <i data-lucide="basketball" class="meta-icon"></i>
                        <span>{{ $campaign->category->title ?? 'Basketball' }}</span>
                    </div>
                    <div class="meta-item">
                        <i data-lucide="map-pin" class="meta-icon"></i>
                        <span>{{ $campaign->location ?? 'Woodstock, Ontario, Canada' }}</span>
                    </div>
                    <div class="meta-item">
                        <i data-lucide="globe" class="meta-icon"></i>
                        <span>Goal: ${{ number_format($campaign->fund_target ?? 2500, 0) }}</span>
                    </div>
                    <div class="meta-item">
                        <i data-lucide="users" class="meta-icon"></i>
                        <span>Supporters: 58</span>
                    </div>
                </div>
            </div>

            <!-- Campaign Progress -->
            <div class="campaign-progress-section">
                <h3 class="section-title">Campaign Progress</h3>
                <div class="progress-container">
                    <div class="progress-info">
                        <span class="progress-percentage">{{ number_format($progress, 0) }}% funded</span>
                    </div>
                    <div class="progress-bar-wrapper">
                        <div class="progress-bar-fill" style="width: {{ $progress }}%"></div>
                    </div>
                    <div class="progress-amounts">
                        <div class="goal-amount">${{ number_format($campaign->fund_target ?? 2500, 0) }}</div>
                        <div class="remaining-amount">${{ number_format($remaining, 0) }} to go</div>
                    </div>
                </div>
            </div>

            <!-- Campaign Story -->
            <div class="campaign-story-section">
                <h3 class="section-title">Campaign Story</h3>
                <div class="story-content">
                    <p class="story-text">{{ $campaign->summary ?? 'I\'ve been training year-round with my school team, and we\'ve qualified for the Georgia State Finals. This campaign will help cover travel, accommodation, and training gear costs for the tournament. Your contribution will bring me one step closer to my dream of playing college basketball.' }}</p>
                    <a href="#" class="read-more-link">Read More</a>
                </div>
            </div>

            <!-- Gallery -->
            <div class="campaign-gallery-section">
                <h3 class="section-title">Gallery</h3>
                <div class="gallery-grid">
                    <div class="gallery-item">
                        <img src="{{ asset('front/assets/images/gallery-1.jpg') }}" alt="Gallery Image 1" onerror="this.src='{{ asset('front/assets/images/placeholder-campaign.jpg') }}'">
                    </div>
                    <div class="gallery-item">
                        <img src="{{ asset('front/assets/images/gallery-2.jpg') }}" alt="Gallery Image 2" onerror="this.src='{{ asset('front/assets/images/placeholder-campaign.jpg') }}'">
                    </div>
                    <div class="gallery-item">
                        <img src="{{ asset('front/assets/images/gallery-3.jpg') }}" alt="Gallery Image 3" onerror="this.src='{{ asset('front/assets/images/placeholder-campaign.jpg') }}'">
                    </div>
                </div>
            </div>

            <!-- Recent Contributors -->
            <div class="contributors-section">
                <h3 class="section-title">Recent Contributors</h3>
                <div class="contributors-list">
                    <div class="contributor-item">
                        <img src="{{ asset('front/assets/images/contributor-1.jpg') }}" alt="John Davis" class="contributor-avatar" onerror="this.src='{{ asset('front/assets/images/placeholder-avatar.png') }}'">
                        <div class="contributor-info">
                            <div class="contributor-name">John Davis</div>
                            <div class="contributor-time">2 hours ago</div>
                        </div>
                        <div class="contributor-amount">$100</div>
                    </div>
                    <div class="contributor-item">
                        <img src="{{ asset('front/assets/images/contributor-2.jpg') }}" alt="Lisa Rodriguez" class="contributor-avatar" onerror="this.src='{{ asset('front/assets/images/placeholder-avatar.png') }}'">
                        <div class="contributor-info">
                            <div class="contributor-name">Lisa Rodriguez</div>
                            <div class="contributor-time">5 hours ago</div>
                        </div>
                        <div class="contributor-amount">$50</div>
                    </div>
                    <div class="contributor-item">
                        <img src="{{ asset('front/assets/images/contributor-3.jpg') }}" alt="David Park" class="contributor-avatar" onerror="this.src='{{ asset('front/assets/images/placeholder-avatar.png') }}'">
                        <div class="contributor-info">
                            <div class="contributor-name">David Park</div>
                            <div class="contributor-time">1 day ago</div>
                        </div>
                        <div class="contributor-amount">$25</div>
                    </div>
                </div>
            </div>

            <!-- Campaign Updates -->
            <div class="updates-section">
                <h3 class="section-title">Campaign Updates</h3>
                <div class="updates-list">
                    <div class="update-item">
                        <div class="update-indicator update-indicator-blue"></div>
                        <div class="update-content">
                            <div class="update-title">Training Update</div>
                            <div class="update-time">3 days ago</div>
                            <div class="update-description">Just completed an amazing training session! Times are improving and feeling strong heading into trials.</div>
                        </div>
                    </div>
                    <div class="update-item">
                        <div class="update-indicator update-indicator-green"></div>
                        <div class="update-content">
                            <div class="update-title">Milestone Reached</div>
                            <div class="update-time">1 week ago</div>
                            <div class="update-description">We've reached 70% of our goal! Thank you to everyone who has contributed so far.</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Encouragement & Comments -->
            <div class="comments-section">
                <h3 class="section-title">Encouragement & Comments</h3>
                <div class="comments-list">
                    <div class="comment-item">
                        <img src="{{ asset('front/assets/images/comment-1.jpg') }}" alt="Alex Thompson" class="comment-avatar" onerror="this.src='{{ asset('front/assets/images/placeholder-avatar.png') }}'">
                        <div class="comment-content">
                            <div class="comment-header">
                                <div class="comment-name">Alex Thompson</div>
                                <div class="comment-time">2 days ago</div>
                            </div>
                            <div class="comment-text">You've got this Jordan! Your dedication is inspiring. Can't wait to watch you at the Olympics!</div>
                        </div>
                    </div>
                    <div class="comment-item">
                        <img src="{{ asset('front/assets/images/comment-2.jpg') }}" alt="Emma Wilson" class="comment-avatar" onerror="this.src='{{ asset('front/assets/images/placeholder-avatar.png') }}'">
                        <div class="comment-content">
                            <div class="comment-header">
                                <div class="comment-name">Emma Wilson</div>
                                <div class="comment-time">4 days ago</div>
                            </div>
                            <div class="comment-text">Amazing progress! Your story motivated me to start Basketball again. Best of luck!</div>
                        </div>
                    </div>
                </div>
                
                <div class="comment-cta">
                    <span class="cta-text">Want to leave encouragement?</span>
                    <a href="{{ route('login') }}" class="btn-login-comment">Login to Comment</a>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="campaign-sidebar">
            <!-- Contribute Now -->
            <div class="sidebar-card">
                <h3 class="sidebar-title">Contribute Now</h3>
                <div class="contribute-form">
                    <div class="custom-amount-group">
                        <label for="customAmount">Custom Amount</label>
                        <div class="amount-input-wrapper">
                            <span class="currency-symbol">$</span>
                            <input type="number" id="customAmount" class="amount-input" value="0.00" min="0" step="0.01">
                            <div class="amount-controls">
                                <button type="button" class="amount-btn" data-action="increment">▲</button>
                                <button type="button" class="amount-btn" data-action="decrement">▼</button>
                            </div>
                        </div>
                    </div>
                    <div class="preset-amounts">
                        <button type="button" class="preset-btn" data-amount="25">$25</button>
                        <button type="button" class="preset-btn" data-amount="50">$50</button>
                        <button type="button" class="preset-btn" data-amount="100">$100</button>
                    </div>
                    <button type="button" class="btn-proceed-payment">Proceed to Payment</button>
                </div>
            </div>

            <!-- Campaign Deadline -->
            <div class="sidebar-card">
                <h3 class="sidebar-title">Campaign Deadline</h3>
                <div class="countdown-timer" id="campaignCountdown">
                    <div class="countdown-item">
                        <div class="countdown-value" id="days">12</div>
                        <div class="countdown-label">Days</div>
                    </div>
                    <div class="countdown-item">
                        <div class="countdown-value" id="hours">08</div>
                        <div class="countdown-label">Hours</div>
                    </div>
                    <div class="countdown-item">
                        <div class="countdown-value" id="minutes">34</div>
                        <div class="countdown-label">Mins</div>
                    </div>
                </div>
            </div>

            <!-- Share Campaign -->
            <div class="sidebar-card">
                <h3 class="sidebar-title">Share Campaign</h3>
                <div class="share-buttons">
                    <a href="#" class="share-btn share-facebook" title="Share on Facebook">
                        <i data-lucide="facebook"></i>
                    </a>
                    <a href="#" class="share-btn share-twitter" title="Share on Twitter">
                        <i data-lucide="twitter"></i>
                    </a>
                    <a href="#" class="share-btn share-instagram" title="Share on Instagram">
                        <i data-lucide="instagram"></i>
                    </a>
                    <a href="#" class="share-btn share-link" title="Copy Link">
                        <i data-lucide="link"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }

    // Amount input controls
    const amountInput = document.getElementById('customAmount');
    const amountControls = document.querySelectorAll('.amount-btn');
    const presetButtons = document.querySelectorAll('.preset-btn');

    amountControls.forEach(btn => {
        btn.addEventListener('click', function() {
            const action = this.getAttribute('data-action');
            let currentValue = parseFloat(amountInput.value) || 0;
            
            if (action === 'increment') {
                currentValue += 1;
            } else if (action === 'decrement') {
                currentValue = Math.max(0, currentValue - 1);
            }
            
            amountInput.value = currentValue.toFixed(2);
        });
    });

    // Preset amount buttons
    presetButtons.forEach(btn => {
        btn.addEventListener('click', function() {
            const amount = this.getAttribute('data-amount');
            amountInput.value = parseFloat(amount).toFixed(2);
            
            // Update active state
            presetButtons.forEach(b => b.classList.remove('active'));
            this.classList.add('active');
        });
    });

    // Campaign Countdown Timer
    @if($campaign && $campaign->campaign_finished_at)
        (function() {
            const endDateStr = '{{ $campaign->campaign_finished_at }}';
            const endDate = new Date(endDateStr.replace(/-/g, '/')).getTime();
            let countdownInterval;
            
            function updateCountdown() {
                const now = new Date().getTime();
                const distance = endDate - now;
                
                if (distance < 0) {
                    // Campaign has ended
                    document.getElementById('days').textContent = '00';
                    document.getElementById('hours').textContent = '00';
                    document.getElementById('minutes').textContent = '00';
                    if (countdownInterval) {
                        clearInterval(countdownInterval);
                    }
                    return;
                }
                
                // Calculate time units
                const days = Math.floor(distance / (1000 * 60 * 60 * 24));
                const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((distance % (1000 * 60)) / 1000);
                
                // Update display
                const daysEl = document.getElementById('days');
                const hoursEl = document.getElementById('hours');
                const minutesEl = document.getElementById('minutes');
                
                if (daysEl) daysEl.textContent = String(days).padStart(2, '0');
                if (hoursEl) hoursEl.textContent = String(hours).padStart(2, '0');
                if (minutesEl) minutesEl.textContent = String(minutes).padStart(2, '0');
            }
            
            // Initial update
            updateCountdown();
            
            // Update every second
            countdownInterval = setInterval(updateCountdown, 1000);
        })();
    @else
        // Fallback for static display
        document.getElementById('days').textContent = '12';
        document.getElementById('hours').textContent = '08';
        document.getElementById('minutes').textContent = '34';
    @endif
});
</script>

@endsection