@extends('front.layouts.app-auth')

@section('content')

<!-- Breadcrumbs -->
@include('front.components.breadcrumbs', [
    'currentPage' => 'Received Offers',
    'breadcrumbs' => []
])

<!-- Top Bar with Title -->
<div class="campaigns-top-bar">
    <div class="campaigns-top-bar-left">
        <h1 class="campaigns-main-title">Received Offers</h1>
        <p class="campaigns-subtitle">Review and accept sponsorship offers from brands and sponsors.</p>
    </div>
        </div>
        
<div class="sponsorships-container">
    <!-- Summary Statistics Cards -->
    <div class="stats">
        <div class="stat-card" style="background: #D1FAE5; border-left: 4px solid #10B981;">
            <div class="stat-top-row">
                <div>
                    <div class="stat-value" style="color: #064E3B;">{{ $pendingOffers ?? 0 }}</div>
                    <div class="stat-label" style="color: #065F46; font-weight: 600; margin-top: 8px;">Pending Offers</div>
                    <div class="stat-subtext" style="color: #059669; font-size: 13px; margin-top: 4px;">Awaiting your response</div>
                </div>
                <div class="stat-icon" style="background: rgba(16, 185, 129, 0.2);">
                    <i data-lucide="clock" style="color: #10B981;"></i>
                </div>
            </div>
        </div>

        <div class="stat-card" style="background: #DBEAFE; border-left: 4px solid #3B82F6;">
            <div class="stat-top-row">
                <div>
                    <div class="stat-value" style="color: #1E3A8A;">{{ $activePartnerships ?? 0 }}</div>
                    <div class="stat-label" style="color: #1E40AF; font-weight: 600; margin-top: 8px;">Active Partnerships</div>
                    <div class="stat-subtext" style="color: #2563EB; font-size: 13px; margin-top: 4px;">Currently active</div>
    </div>
                <div class="stat-icon" style="background: rgba(59, 130, 246, 0.2);">
                    <i data-lucide="handshake" style="color: #3B82F6;"></i>
            </div>
            </div>
            </div>
            
        <div class="stat-card" style="background: #FCE7F3; border-left: 4px solid #EC4899;">
            <div class="stat-top-row">
                <div>
                    <div class="stat-value" style="color: #831843;">{!! \App\Helpers\Helper::price($potentialValue ?? 0) !!}</div>
                    <div class="stat-label" style="color: #9F1239; font-weight: 600; margin-top: 8px;">Potential Value</div>
                    <div class="stat-subtext" style="color: #BE185D; font-size: 13px; margin-top: 4px;">From pending offers</div>
                </div>
                <div class="stat-icon" style="background: rgba(236, 72, 153, 0.2);">
                    <i data-lucide="dollar-sign" style="color: #EC4899;"></i>
            </div>
            </div>
        </div>

        <div class="stat-card" style="background: #FEF3C7; border-left: 4px solid #F59E0B;">
            <div class="stat-top-row">
                <div>
                    <div class="stat-value" style="color: #92400E;">{!! \App\Helpers\Helper::price($totalEarnings ?? 0) !!}</div>
                    <div class="stat-label" style="color: #B45309; font-weight: 600; margin-top: 8px;">Total Earnings</div>
                    <div class="stat-subtext" style="color: #D97706; font-size: 13px; margin-top: 4px;">From active partnerships</div>
                </div>
                <div class="stat-icon" style="background: rgba(245, 158, 11, 0.2);">
                    <i data-lucide="trending-up" style="color: #F59E0B;"></i>
                </div>
            </div>
                </div>
            </div>
            
    <!-- Filter Buttons -->
    <div class="filter-buttons">
        <a href="{{ route('profile.sponsorships.my_sponsorships', ['status' => 'all']) }}" 
           class="filter-btn {{ ($statusFilter ?? 'all') === 'all' ? 'active' : '' }}">
            All Offers
        </a>
        <a href="{{ route('profile.sponsorships.my_sponsorships', ['status' => 'pending']) }}" 
           class="filter-btn {{ ($statusFilter ?? '') === 'pending' ? 'active' : '' }}">
            Pending
        </a>
        <a href="{{ route('profile.sponsorships.my_sponsorships', ['status' => 'accepted']) }}" 
           class="filter-btn {{ ($statusFilter ?? '') === 'accepted' ? 'active' : '' }}">
            Accepted
        </a>
        <a href="{{ route('profile.sponsorships.my_sponsorships', ['status' => 'declined']) }}" 
           class="filter-btn {{ ($statusFilter ?? '') === 'declined' ? 'active' : '' }}">
            Declined
        </a>
        <a href="{{ route('profile.sponsorships.my_sponsorships', ['status' => 'expired']) }}" 
           class="filter-btn {{ ($statusFilter ?? '') === 'expired' ? 'active' : '' }}">
            Expired
        </a>
                </div>

    <!-- Offer Cards Grid -->
    <div class="offers-grid">
        @forelse($sponsorships as $sponsorship)
            @php
                // Determine display status
                $displayStatus = $sponsorship->is_expired ? 'expired' : (($sponsorship->is_withdrawal == 1) ? 'withdrawn' : ($sponsorship->status ?? 'pending'));
                
                // Get sponsor info
                $sponsor = $sponsorship->sponsor;
                $sponsorName = $sponsor ? $sponsor->full_name : 'Unknown Sponsor';
                $sponsorInitials = collect(explode(' ', $sponsorName))->map(function($word) {
                    return strtoupper(substr($word, 0, 1));
                })->take(2)->join('');
                
                // Get sponsor profile
                $sponsorProfile = $sponsor && $sponsor->sponsorProfile ? $sponsor->sponsorProfile : null;
                $companyName = $sponsorProfile && $sponsorProfile->company_name ? $sponsorProfile->company_name : $sponsorName;
                $industryName = $sponsorProfile && $sponsorProfile->industry_name ? $sponsorProfile->industry_name : 'Sports';
                
                // Generate logo color
                $colors = ['#3b82f6', '#8b5cf6', '#10b981', '#f59e0b', '#ef4444', '#ec4899'];
                $logoColor = $colors[($sponsorship->id % 6)];
                
                // Format offer type
                $offerTypeMap = [
                    1 => 'Endorsement Deal',
                    2 => 'Brand Ambassador',
                    3 => 'Team Partnership',
                    4 => 'Product Sponsorship',
                    5 => 'Event Sponsor',
                    6 => 'Media Partnership',
                ];
                $offerTypeSubtitle = 'Partnership';
                if ($sponsorship->offer_type && isset($offerTypeMap[$sponsorship->offer_type])) {
                    $offerTypeSubtitle = $offerTypeMap[$sponsorship->offer_type];
                }
                
                // Format duration
                $durationMonths = $sponsorship->duration ?? 12;
                $duration = $durationMonths . ' months';
                
                // Format dates
                $receivedDate = $sponsorship->created_at ? \App\Helpers\Helper::showdate($sponsorship->created_at, false) : 'N/A';
                $expiresDate = null;
                if (isset($sponsorship->expires_at) && $sponsorship->expires_at) {
                    $expiresDate = \App\Helpers\Helper::showdate($sponsorship->expires_at, false);
                } elseif ($sponsorship->offer_expire_in) {
                    $expiresDate = is_string($sponsorship->offer_expire_in) 
                        ? $sponsorship->offer_expire_in 
                        : \App\Helpers\Helper::showdate($sponsorship->offer_expire_in, false);
                }
                
                // Get accepted date from activities
                $acceptedDate = null;
                if ($sponsorship->activities) {
                    $acceptedActivity = $sponsorship->activities->where('activity_type', 'offer_accepted')->first();
                    if ($acceptedActivity) {
                        $acceptedDate = \App\Helpers\Helper::showdate($acceptedActivity->created_at, false);
                    }
                }
            @endphp
            
            <div class="received-offer-card {{ $displayStatus === 'declined' || $displayStatus === 'expired' ? 'declined-card' : '' }}">
                <!-- Card Header -->
                <div class="received-offer-header">
                    <div class="sponsor-logo-square" style="background: linear-gradient(135deg, {{ $logoColor }} 0%, {{ $colors[($sponsorship->id % 6 + 1) % 6] }} 100%);">
                        @if($sponsorship->offer_type == 1)
                            <i data-lucide="check-circle" style="width: 24px; height: 24px; color: white;"></i>
                        @elseif($sponsorship->offer_type == 2)
                            <i data-lucide="zap" style="width: 24px; height: 24px; color: white;"></i>
                        @elseif($sponsorship->offer_type == 3)
                            <i data-lucide="target" style="width: 24px; height: 24px; color: white;"></i>
                        @elseif($sponsorship->offer_type == 4)
                            <i data-lucide="package" style="width: 24px; height: 24px; color: white;"></i>
                        @elseif($sponsorship->offer_type == 5)
                            <i data-lucide="calendar" style="width: 24px; height: 24px; color: white;"></i>
                        @elseif($sponsorship->offer_type == 6)
                            <i data-lucide="tv" style="width: 24px; height: 24px; color: white;"></i>
                        @else
                            <span style="color: white; font-weight: 600; font-size: 16px;">{{ $sponsorInitials }}</span>
                        @endif
                            </div>
                    <div class="sponsor-info">
                        <div class="sponsor-name-row">
                            <span class="sponsor-name">{{ $companyName }}</span>
                            <span class="verified-badge-small">
                                <i data-lucide="check-circle" style="width: 14px; height: 14px;"></i>
                                Verified Sponsor
                            </span>
                        </div>
                        <div class="sponsor-industry">{{ $industryName }}</div>
                            </div>
                    <div class="offer-status-badge status-{{ $displayStatus }}">
                        @if($displayStatus === 'pending')
                            <span>Pending</span>
                        @elseif($displayStatus === 'active')
                            <span>Accepted</span>
                        @elseif($displayStatus === 'declined')
                            <span>Declined</span>
                        @elseif($displayStatus === 'expired')
                            <span>Expired</span>
                        @endif
                </div>
            </div>
            
                <!-- Offer Details -->
                <div class="received-offer-details">
                    <div class="offer-title-main">{{ $sponsorship->offer_title ?? 'Sponsorship Offer' }}</div>
                    <div class="offer-type-tag">{{ $offerTypeSubtitle }}</div>
        </div>
                
                <!-- Offer Metrics -->
                <div class="received-offer-metrics">
                    <div class="metric-item">
                        <i data-lucide="dollar-sign" class="metric-icon"></i>
                        <span class="metric-value">{!! \App\Helpers\Helper::price($sponsorship->funding_amount, $sponsorship->currency ?? 'USD') !!}</span>
                                    </div>
                    <div class="metric-item">
                        <i data-lucide="clock" class="metric-icon"></i>
                        <span class="metric-value">{{ $duration }}</span>
                                    </div>
                                </div>
                
                <!-- Offer Dates -->
                <div class="received-offer-dates">
                    <div class="date-item">Received: {{ $receivedDate }}</div>
                    @if($expiresDate)
                        <div class="date-item date-expires">
                            @if($displayStatus === 'expired')
                                Expired: {{ $expiresDate }}
                            @else
                                Expires: {{ $expiresDate }}
                            @endif
                        </div>
                    @elseif($acceptedDate && $displayStatus === 'active')
                        <div class="date-item date-accepted">Accepted: {{ $acceptedDate }}</div>
                                    @endif
                </div>
                
                <!-- Action Buttons -->
                <div class="received-offer-actions">
                    <a href="{{ route('profile.sponsorships.show', ['id' => $sponsorship->id]) }}" class="btn-view-details">
                        View Details
                    </a>
                    @if($displayStatus === 'pending' && !$sponsorship->is_expired)
                        <button type="button" class="btn-review-offer" onclick="openAcceptModal({{ $sponsorship->id }})">
                            Review Offer
                                    </button>
                                    @endif
                                </div>
            </div>
                        @empty
            <div style="grid-column: 1 / -1; text-align: center; padding: 3rem; color: #6b7280;">
                <div style="display: flex; flex-direction: column; align-items: center; gap: 12px;">
                    <i data-lucide="inbox" style="width: 48px; height: 48px; color: #d1d5db;"></i>
                    <p style="margin: 0; font-weight: 500;">No offers found</p>
                    <p style="margin: 0; font-size: 13px;">You haven't received any sponsorship offers yet.</p>
                            </div>
            </div>
                        @endforelse
    </div>
                
                <!-- Pagination -->
                @if($sponsorships->hasPages())
        <div style="margin-top: 32px; padding: 20px 0; border-top: 1px solid #f3f4f6;">
            {{ $sponsorships->appends(request()->query())->links() }}
                </div>
                @endif
            </div>

@endsection

<!-- Accept Sponsorship Modal -->
<div id="acceptSponsorshipModal" class="accept-sponsorship-modal" style="display: none;">
    <div class="accept-modal-overlay" onclick="closeAcceptModal()"></div>
    <div class="accept-modal-content">
        <div class="accept-modal-header">
            <h2 class="accept-modal-title">Accept Sponsorship Offer</h2>
            <button type="button" class="accept-modal-close" onclick="closeAcceptModal()">
                <i data-lucide="x"></i>
            </button>
        </div>
        
        <div class="accept-modal-body">
            <!-- Sponsor Info Card -->
            <div class="accept-sponsor-card">
                <div class="accept-sponsor-logo" id="modal-sponsor-logo">
                    <i data-lucide="building" class="sponsor-logo-icon"></i>
                </div>
                <div class="accept-sponsor-info">
                    <div class="accept-sponsor-name" id="modal-company-name">Loading...</div>
                    <div class="accept-sponsor-type" id="modal-offer-type">Loading...</div>
                </div>
            </div>
            
            <!-- Sponsorship Value -->
            <div class="accept-value-section">
                <div class="accept-value-label">Sponsorship Value</div>
                <div class="accept-value-amount" id="modal-funding-amount">$0</div>
                <div class="accept-value-duration" id="modal-duration">for 0 months</div>
                            </div>
            
            <!-- Terms and Conditions -->
            <div class="accept-terms-section">
                <div class="accept-terms-title">By accepting this offer, you agree to:</div>
                <ul class="accept-deliverables-list" id="modal-deliverables">
                    <li>Loading...</li>
                </ul>
            </div>
            
            <!-- Agreement Checkbox -->
            <div class="accept-agreement-box">
                <label class="accept-checkbox-label">
                    <input type="checkbox" id="accept-terms-checkbox" class="accept-terms-checkbox">
                    <span class="accept-checkbox-text">I have read and agree to the sponsorship terms and conditions</span>
                </label>
            </div>
        </div>
        
        <div class="accept-modal-footer">
            <button type="button" class="accept-btn-cancel" onclick="closeAcceptModal()">Cancel</button>
            <button type="button" class="accept-btn-confirm" id="confirm-accept-btn" onclick="confirmAcceptOffer()">
                <i data-lucide="check" class="accept-btn-icon"></i>
                Confirm Acceptance
            </button>
        </div>
    </div>
</div>

@push('page_script')
<script>
    var currentSponsorshipId = null;
    
    // Initialize Lucide icons
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }
    
    // Open accept modal
    window.openAcceptModal = function(sponsorshipId) {
        currentSponsorshipId = sponsorshipId;
        var $modal = $('#acceptSponsorshipModal');
        $modal.fadeIn(200);
        
        // Load sponsorship data
        loadSponsorshipModalData(sponsorshipId);
        
        // Reinitialize icons
        if (typeof lucide !== 'undefined') {
            setTimeout(function() {
                lucide.createIcons();
            }, 100);
        }
    };
    
    // Close accept modal
    window.closeAcceptModal = function() {
        var $modal = $('#acceptSponsorshipModal');
        $modal.fadeOut(200);
        currentSponsorshipId = null;
        $('#accept-terms-checkbox').prop('checked', false);
    };
    
    // Load sponsorship data for modal
    function loadSponsorshipModalData(sponsorshipId) {
        $.ajax({
            url: '/profile/sponsorships/' + sponsorshipId + '/modal-data',
            method: 'GET',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'Accept': 'application/json'
            },
            success: function(response) {
                if (response.status === 200 && response.data && response.data.data) {
                    var data = response.data.data;
                    
                    // Update sponsor info
                    $('#modal-company-name').text(data.company_name || 'Unknown Sponsor');
                    $('#modal-offer-type').text(data.offer_type || 'Partnership');
                    
                    // Update logo based on offer type
                    var logoHtml = '';
                    var colors = ['#3b82f6', '#8b5cf6', '#10b981', '#f59e0b', '#ef4444', '#ec4899'];
                    var logoColor = colors[(data.offer_type_id % 6) || 0];
                    var nextColor = colors[((data.offer_type_id % 6) + 1) % 6];
                    
                    var iconMap = {
                        1: 'check-circle',
                        2: 'zap',
                        3: 'target',
                        4: 'package',
                        5: 'calendar',
                        6: 'tv'
                    };
                    var icon = iconMap[data.offer_type_id] || 'building';
                    
                    logoHtml = '<i data-lucide="' + icon + '" class="sponsor-logo-icon"></i>';
                    $('#modal-sponsor-logo').css('background', 'linear-gradient(135deg, ' + logoColor + ' 0%, ' + nextColor + ' 100%)').html(logoHtml);
                    
                    // Update value
                    var amount = parseFloat(data.funding_amount) || 0;
                    var currency = data.currency || 'USD';
                    var formattedAmount = new Intl.NumberFormat('en-US', {
                        style: 'currency',
                        currency: currency,
                        minimumFractionDigits: 0,
                        maximumFractionDigits: 0
                    }).format(amount);
                    $('#modal-funding-amount').text(formattedAmount);
                    $('#modal-duration').text('for ' + (data.duration || '0 months'));
                    
                    // Update deliverables
                    var deliverables = data.deliverables || [];
                    var deliverablesHtml = '';
                    if (deliverables.length > 0) {
                        deliverables.forEach(function(deliverable) {
                            deliverablesHtml += '<li>' + deliverable + '</li>';
                        });
                    } else {
                        deliverablesHtml = '<li>No specific deliverables listed</li>';
                    }
                    $('#modal-deliverables').html(deliverablesHtml);
                    
                    // Reinitialize icons
                    if (typeof lucide !== 'undefined') {
                        lucide.createIcons();
                    }
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: response.message || 'Failed to load sponsorship data',
                        confirmButtonColor: '#dc2626'
                    });
                    closeAcceptModal();
                }
            },
            error: function(xhr, status, error) {
                console.error('Error loading sponsorship data:', error);
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'An error occurred while loading sponsorship data',
                    confirmButtonColor: '#dc2626'
                });
                closeAcceptModal();
            }
        });
    }
    
    // Confirm accept offer
    window.confirmAcceptOffer = function() {
        if (!currentSponsorshipId) {
            return;
        }
        
        // Check if terms are accepted
        if (!$('#accept-terms-checkbox').is(':checked')) {
    Swal.fire({
        icon: 'warning',
                title: 'Terms Required',
                text: 'Please accept the sponsorship terms and conditions to continue',
                confirmButtonColor: '#f59e0b'
            });
            return;
        }
        
        // Call the existing confirmAction function
        if (typeof confirmAction === 'function') {
            closeAcceptModal();
            // Use setTimeout to ensure modal is closed before opening SweetAlert
            setTimeout(function() {
                confirmAction(currentSponsorshipId, 'approve');
            }, 300);
        } else {
            // Fallback: direct AJAX call
            updateSponsorshipStatusDirect(currentSponsorshipId, 'approve');
        }
    };
    
    // Direct update status (fallback)
    function updateSponsorshipStatusDirect(sponsorshipId, action) {
        var newStatus = action === 'approve' ? 'active' : 'declined';
        
    Swal.fire({
        title: 'Processing...',
        text: 'Please wait while we update the sponsorship status.',
        allowOutsideClick: false,
            didOpen: function() {
            Swal.showLoading();
        }
    });
    
        $.ajax({
            url: '/profile/sponsorships/' + sponsorshipId + '/update-status',
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'Accept': 'application/json'
        },
            data: JSON.stringify({
            status: newStatus
            }),
            success: function(data) {
                if (data.status === 200 || (data.data && data.data.success)) {
            Swal.fire({
                icon: 'success',
                title: 'Success!',
                        text: 'Sponsorship has been approved successfully.',
                confirmButtonColor: '#059669'
                    }).then(function() {
                window.location.reload();
            });
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Error!',
                text: data.message || 'An error occurred while updating the sponsorship status.',
                confirmButtonColor: '#dc2626'
            });
        }
            },
            error: function(xhr, status, error) {
        console.error('Error:', error);
        Swal.fire({
            icon: 'error',
            title: 'Error!',
                    text: 'An error occurred while updating the sponsorship status.',
            confirmButtonColor: '#dc2626'
                });
            }
        });
    }
    
    // Close modal on ESC key
    $(document).on('keydown', function(e) {
        if (e.key === 'Escape') {
            closeAcceptModal();
        }
    });
</script>
@endpush