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

@php
    $campaign = $campaign ?? null;
    $user = $campaign->createdBy ?? null;
    
    // For days calculation, we'll use JavaScript to calculate based on browser timezone
    // But for initial display, calculate server-side (will be updated by JS)
    if ($campaign && $campaign->campaign_finished_at) {
        // Calculate days left using UTC (will be corrected by JavaScript)
        $daysLeft = now()->diffInDays(\Carbon\Carbon::parse($campaign->campaign_finished_at), false);
    } else {
        $daysLeft = 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;
    $remaining = $remaining > 0 ? $remaining : 0;
    $avatar = $user ? $user->avatar : asset('front/assets/images/placeholder-avatar.png');
    
    // Get UTC date in ISO format for JavaScript countdown
    $campaignFinishedAtUTC = $campaign && $campaign->campaign_finished_at 
        ? \Carbon\Carbon::parse($campaign->campaign_finished_at, 'UTC')->toIso8601String() 
        : null;
@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> -->

      <div class="breadcum-wrap">
        <div class="container-fluid">
            <ul class="breadcum-list">
                <li><a href="/" class="home"><i data-lucide="house"></i></a></li>
                <li><a href="{{ route('front.campaigns.index') }}" class="active">Athlete</a> <img src="../../front/assets/images/arrow-right.svg"
                        alt=""></li>
                <li>{{ $user->full_name ?? 'Campaign' }}</li>
            </ul>
        </div>
    </div>

    

    <div class="campaign-layout">
        <!-- Main Content -->
        <div class="campaign-main-content">
            
            <!-- Athlete Information Card -->
            <div class="campaign-info-card">
                <!-- Campaign Header -->
    <div class="campaign-header">
        <div class="campaign-status-badge">
            <span class="status-tag status-active">Active</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6" fill="none">
  <circle cx="3" cy="3" r="3" fill="#888888"/>
</svg>
            <span class="days-left">{{ round($daysLeft) }} days left</span>
        </div>
        <h1 class="campaign-title">{{ $campaign->title ?? 'Campaign Title' }}</h1>
    </div>
                <div class="athlete-profile-section athelete-new">
                    <div class="athlete-image-wrapper">
                        <img src="{{ $avatar['thumb'] }}" alt="{{ $user->full_name ?? 'Athlete' }}" class="athlete-profile-image">
                    </div>
                    <div class="athlete-details">
                        <div><h2 class="athlete-name">{{ $user->full_name ?? 'Athlete Name' }}</h2>
                        <p class="athlete-role">{{ $user->roles->pluck('title')->implode(', ') }} - {{ $campaign->category->title ?? 'Sport' }}, Point Guard</p>
                        <div class="athlete-achievements">
                            <span class="achievement-badge d-none"><img src="{{ asset('front/assets/images/vec1.png') }}"> 15 Gold Medals</span>
                            <span class="achievement-badge d-none"><img src="{{ asset('front/assets/images/vec2.png') }}"> National Champion</span>
                        </div>
</div>
                         <div class="campaign-meta-info">
                   <div class="meta-sec"> 
                    <div class="meta-item" style="width: 100% !important;">
                       <div> <i data-lucide="volleyball" class="meta-icon"></i>
                       Sports</div>

                       <div> <p> <span>{{ $campaign->category->title ?? 'Basketball' }}</span> </p></div>
                    </div>
                    {{-- <div class="meta-item d-none">
                       <div> <i data-lucide="map-pin" class="meta-icon"></i>
                        Location</div>

                        <div> <p><span>{{ $campaign->location ?? 'Woodstock, Ontario, Canada' }}</span> </p></div>
                    </div> --}}

</div>

      <div class="meta-sec">
                    <div class="meta-item">
                       <div> <i data-lucide="globe" class="meta-icon"></i>
                        <span>Goal</span></div>
                        <div> <p>{!! \App\Helpers\Helper::price($campaign->fund_target) !!}</p></div>
                    </div>
                    <div class="meta-item">
                       <div> <i data-lucide="users" class="meta-icon"></i>
                        <span>Supporters</span> </div>

                        <div> <p>{{ $totalContributors }}</p></div>
                    </div>
                </div>
                    </div>
                </div>
                </div>
                
               
            </div>

            <!-- Campaign Progress -->
            <div class="campaign-progress-section">
               <div class="heading-camp"> <h3 class="section-title">Campaign Progress</h3> 
                <div class="goal-amount">{!! \App\Helpers\Helper::price($campaign->fund_raised) !!}</div></div>
                <div class="progress-container">
                    
                    <div class="progress-bar-wrapper">
                        <div class="progress-bar-fill" style="width: {{ $progress }}%"></div>
                    </div>
                    <div class="progress-amounts">
                        
                       <div class="progress-info">
                        <span class="progress-percentage">{{ number_format($progress, 0) }}% funded</span>
                    </div>

                        <div class="remaining-amount">{!! \App\Helpers\Helper::price($remaining) !!} to go</div>
                    </div>
                </div>
            </div>

            <!-- Campaign Story -->
            <div class="campaign-story-section">
                <h3 class="section-title">Campaign Story</h3>
                <div class="story-content">
                    @php
                        $fullText = $campaign->summary ?? '';
                        $truncatedLength = 200; // Characters to show initially
                        $isLong = strlen($fullText) > $truncatedLength;
                        $truncatedText = $isLong ? substr($fullText, 0, $truncatedLength) . '...' : $fullText;
                    @endphp
                    <p class="story-text">
                        <span class="story-text-short">{{ $isLong ? $truncatedText : $fullText }}</span>
                        <span class="story-text-full" style="display: none;">{{ $fullText }}</span>
                        @if($isLong)
                            <a href="#" class="read-more-link" id="readMoreToggle">Read More</a>
                        @endif
                    </p>
                </div>
            </div>

            <!-- Gallery -->
            @if(!empty($campaignImages ?? []))
            <div class="campaign-gallery-section d-none">
                <h3 class="section-title">Gallery</h3>
                <div class="{{ $galleryClass ?? 'gallery-grid' }}">
                    @foreach($campaignImages as $index => $image)
                        <div class="gallery-item">
                            <img src="{{ $image }}" alt="Campaign Image {{ $index + 1 }}" onerror="this.src='{{ asset('front/assets/images/placeholder-campaign.jpg') }}'">
                        </div>
                    @endforeach
                </div>
            </div>
            @endif

            <!-- Recent Contributors -->
             @include('front.campaigns.partials.recent-contributors')
            
 
        </div>

        <!-- Sidebar -->
        <div class="campaign-sidebar">
            <!-- Contribute Now -->
             @include('front.campaigns.partials.contribute-now')

            <!-- 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="sharethis-inline-share-buttons" data-url="{{ url()->current() }}" data-title="{{ $campaign->title }}" data-description="{{ $campaign->summary }}" data-image="{{ $campaign->image }}"></div>
                    

                    {{-- <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>
@push('page_script')
{{-- COMMENTED: Accept.js now loaded conditionally in contribute-now partial modal --}}
{{-- <script src="https://jstest.authorize.net/v1/Accept.js"></script> --}}
<script type='text/javascript' src='https://platform-api.sharethis.com/js/sharethis.js#property=6968b890b2161027cb1b288c&product=sop' async='async'></script>
<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');
        });
    });

    // Read More/Less functionality for campaign story
    const readMoreToggle = document.getElementById('readMoreToggle');
    if (readMoreToggle) {
        const storyTextShort = document.querySelector('.story-text-short');
        const storyTextFull = document.querySelector('.story-text-full');
        let isExpanded = false;
        
        readMoreToggle.addEventListener('click', function(e) {
            e.preventDefault();
            isExpanded = !isExpanded;
            
            if (isExpanded) {
                storyTextShort.style.display = 'none';
                storyTextFull.style.display = 'inline';
                readMoreToggle.textContent = 'Read Less';
            } else {
                storyTextShort.style.display = 'inline';
                storyTextFull.style.display = 'none';
                readMoreToggle.textContent = 'Read More';
            }
        });
    }

    // Campaign Countdown Timer - Using browser's local timezone
    @if($campaign && $campaignFinishedAtUTC)
        (function() {
            // Parse UTC date from server (ISO format)
            const utcDateStr = '{{ $campaignFinishedAtUTC }}';
            // JavaScript will automatically convert UTC to browser's local timezone
            const endDate = new Date(utcDateStr).getTime();
            let countdownInterval;
            
            function updateCountdown() {
                // Get current time in browser's local timezone
                const now = new Date().getTime();
                const distance = endDate - now;
                
                if (distance < 0) {
                    // Campaign has ended
                    const daysEl = document.getElementById('days');
                    const hoursEl = document.getElementById('hours');
                    const minutesEl = document.getElementById('minutes');
                    if (daysEl) daysEl.textContent = '00';
                    if (hoursEl) hoursEl.textContent = '00';
                    if (minutesEl) minutesEl.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));
                
                // 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');
                
                // Also update days left in the header if element exists
                const daysLeftEl = document.querySelector('.days-left');
                if (daysLeftEl && days >= 0) {
                    daysLeftEl.textContent = days + ' days left';
                }
            }
            
            // Initial update
            updateCountdown();
            
            // Update every second
            countdownInterval = setInterval(updateCountdown, 1000);
        })();
    @else
        // Fallback for static display
        const daysEl = document.getElementById('days');
        const hoursEl = document.getElementById('hours');
        const minutesEl = document.getElementById('minutes');
        if (daysEl) daysEl.textContent = '00';
        if (hoursEl) hoursEl.textContent = '00';
        if (minutesEl) minutesEl.textContent = '00';
    @endif
    });
    </script>
    <script src="https://unpkg.com/lucide@latest"></script>
    <script>
        lucide.createIcons();
    </script>
    @endpush
@endsection