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

@section('content')
@php
    $isSponsor = $sponsorship->sponsor_user_id === $user->id;
    $isBeneficiary = $sponsorship->beneficiary_user_id === $user->id;
    
    // Determine display status - check for expired first
    $isExpired = false;
    if ($sponsorship->status === 'pending' && $sponsorship->offer_expire_in) {
        $expireDate = is_string($sponsorship->offer_expire_in) 
            ? \Carbon\Carbon::parse($sponsorship->offer_expire_in) 
            : $sponsorship->offer_expire_in;
        $isExpired = $expireDate->isPast();
    }
    
    $displayStatus = ($sponsorship->is_withdrawal == 1) ? 'withdrawn' : ($isExpired ? 'expired' : ($sponsorship->status ?? 'pending'));
    
    // Generate avatar initials
    if ($isSponsor) {
        $profileUser = $sponsorship->beneficiary;
        $profileName = $profileUser ? $profileUser->full_name : 'Unknown';
    } else {
        $profileUser = $sponsorship->sponsor;
        $profileName = $profileUser ? $profileUser->full_name : 'Unknown';
    }
    $initials = collect(explode(' ', $profileName))->map(function($word) {
        return strtoupper(substr($word, 0, 1));
    })->take(2)->join('');
    
    $colors = ['#3b82f6', '#8b5cf6', '#10b981', '#f59e0b', '#ef4444', '#ec4899'];
    $avatarColor = $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';
    
    // Calculate payment progress
    $totalCommitted = $sponsorship->funding_amount;
    $totalPaid = $sponsorship->installments()
        ->whereIn('payment_status', [\App\Models\Users\SponsorshipInstallment::STATUS_PAID, \App\Models\Users\SponsorshipInstallment::STATUS_APPROVED_AND_RELEASED])
        ->sum('installment_amount');
    $totalAuthorized = 0; // Authorized payments (if any evidence submitted but not paid)
    $completedMilestones = $sponsorship->installments()
        ->whereIn('payment_status', [\App\Models\Users\SponsorshipInstallment::STATUS_PAID, \App\Models\Users\SponsorshipInstallment::STATUS_APPROVED_AND_RELEASED])
        ->count();
    $totalMilestones = $sponsorship->installments()->count() ?: 1;
    $progressPercentage = $totalCommitted > 0 ? ($totalPaid / $totalCommitted) * 100 : 0;
@endphp

<div class="sponsorship-details-page">
    <!-- Breadcrumbs -->
    @include('front.components.breadcrumbs', [
        'currentPage' => $isSponsor ? 'Sent Offers' : 'Received Offers',
        'breadcrumbs' => [
            ['label' => $isSponsor ? 'Sent Offers' : 'Received Offers', 'url' => $isSponsor ? route('profile.sponsorships') : route('profile.sponsorships.my_sponsorships')]
        ]
    ])

    <!-- Back Link -->
    <div class="sponsorship-back-link">
        <a href="{{ $isSponsor ? route('profile.sponsorships') : route('profile.sponsorships.my_sponsorships') }}" class="back-link">
            <i data-lucide="arrow-left" style="width: 16px; height: 16px;"></i>
            Back to {{ $isSponsor ? 'Sent Offers' : 'Received Offers' }}
        </a>
    </div>

    @if($isSponsor)
        <!-- SPONSOR VIEW: Show Beneficiary Profile -->
        <div class="sponsorship-profile-card">
            <div class="profile-card-header">
                <div class="profile-avatar" style="background-color: {{ $avatarColor }};">
                    {{ $initials }}
                </div>
                <div class="profile-info">
                    <div class="profile-name">{{ $beneficiaryProfile['full_name'] ?? 'N/A' }}</div>
                    <div class="profile-meta">
                        {{ $beneficiaryProfile['sport'] ?? 'N/A' }} • {{ $beneficiaryProfile['organization'] ?? 'Independent' }}
                    </div>
                    <div class="profile-followers">89K followers</div>
                </div>
                <div class="profile-status-badge status-{{ $displayStatus }}">
                    @if($displayStatus === 'withdrawn')
                        <i data-lucide="x-circle" style="width: 16px; height: 16px;"></i>
                        <span>Withdrawn</span>
                    @elseif($displayStatus === 'pending')
                        <i data-lucide="clock" style="width: 16px; height: 16px;"></i>
                        <span>Pending</span>
                    @elseif($displayStatus === 'active')
                        <i data-lucide="check-circle" style="width: 16px; height: 16px;"></i>
                        <span>Accepted</span>
                    @elseif($displayStatus === 'declined')
                        <i data-lucide="x-circle" style="width: 16px; height: 16px;"></i>
                        <span>Declined</span>
                    @elseif($displayStatus === 'expired')
                        <i data-lucide="clock" style="width: 16px; height: 16px;"></i>
                        <span>Expired</span>
                    @endif
                </div>
            </div>
            
            <!-- Achievements Section (for athletes/teams) -->
            @if(isset($beneficiaryProfile) && $beneficiaryProfile['role'] === 'Athlete')
            <div class="profile-achievements">
                <div class="achievements-title">ACHIEVEMENTS</div>
                <div class="achievements-list">
                    <div class="achievement-item">
                        <i data-lucide="check-circle" style="width: 16px; height: 16px; color: #10b981;"></i>
                        <span>NCAA All-American</span>
                    </div>
                    <div class="achievement-item">
                        <i data-lucide="check-circle" style="width: 16px; height: 16px; color: #10b981;"></i>
                        <span>National Record Holder</span>
                    </div>
                </div>
            </div>
            @endif
        </div>
    @else
        <!-- BENEFICIARY VIEW: Show Sponsor Profile -->
        <div class="sponsorship-profile-card sponsor-card">
            <div class="profile-card-header">
                <div class="sponsor-logo">
                    <div class="logo-placeholder">
                        <i data-lucide="building-2" style="width: 24px; height: 24px; color: white;"></i>
                    </div>
                </div>
                <div class="profile-info">
                    <div class="profile-name-row">
                        <span class="profile-name">{{ $sponsorProfile['company_name'] ?? 'N/A' }}</span>
                        <span class="verified-badge">
                            <i data-lucide="check-circle" style="width: 16px; height: 16px;"></i>
                            Verified Sponsor
                        </span>
                    </div>
                    <div class="profile-meta">{{ $sponsorProfile['industry_name'] ?? 'Sports' }}</div>
                    @if($sponsorProfile['website'] ?? false)
                    <div class="profile-website">
                        <a href="{{ $sponsorProfile['website'] }}" target="_blank">
                            {{ $sponsorProfile['website'] }}
                            <i data-lucide="external-link" style="width: 14px; height: 14px;"></i>
                        </a>
                    </div>
                    @endif
                </div>
                <div class="profile-status-badge status-{{ $displayStatus }}">
                    @if($displayStatus === 'pending')
                        <i data-lucide="clock" style="width: 16px; height: 16px;"></i>
                        <span>Pending Review</span>
                    @elseif($displayStatus === 'active')
                        <i data-lucide="check-circle" style="width: 16px; height: 16px;"></i>
                        <span>Accepted</span>
                    @elseif($displayStatus === 'declined')
                        <i data-lucide="x-circle" style="width: 16px; height: 16px;"></i>
                        <span>Declined</span>
                    @elseif($displayStatus === 'expired')
                        <i data-lucide="clock" style="width: 16px; height: 16px;"></i>
                        <span>Expired</span>
                    @endif
                </div>
            </div>
        </div>
    @endif

    <!-- Offer Details Section -->
    <div class="sponsorship-section-card">
        <div class="section-header">
            <i data-lucide="file-text" style="width: 20px; height: 20px; color: #6b7280;"></i>
            <h3 class="section-title">Offer Details</h3>
        </div>
        <div class="section-content">
            <div class="offer-type-main">{{ $sponsorship->offer_title ?? 'Sponsorship Offer' }}</div>
            <div class="offer-type-subtitle">{{ $offerTypeSubtitle }}</div>
            <div class="offer-metrics">
                <div class="metric-item">
                    <i data-lucide="dollar-sign" style="width: 16px; height: 16px;"></i>
                    <span>Offer Value {!! \App\Helpers\Helper::price($sponsorship->funding_amount, $sponsorship->currency ?? 'USD') !!}</span>
                </div>
                <div class="metric-item">
                    <i data-lucide="clock" style="width: 16px; height: 16px;"></i>
                    <span>Duration {{ $duration }}</span>
                </div>
                <div class="metric-item">
                    <i data-lucide="eye" style="width: 16px; height: 16px;"></i>
                    <span>Views {{ $viewCount ?? 0 }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Deliverables Section -->
    <div class="sponsorship-section-card">
        <div class="section-header">
            <i data-lucide="clipboard-check" style="width: 20px; height: 20px; color: #6b7280;"></i>
            <h3 class="section-title">{{ $isSponsor ? 'Deliverables Required' : 'Your Deliverables' }}</h3>
        </div>
        <div class="section-content">
            @if($sponsorship->deliverables && $sponsorship->deliverables->count() > 0)
                <ul class="deliverables-list">
                    @foreach($sponsorship->deliverables as $deliverable)
                        <li class="deliverable-item">
                            <i data-lucide="check" style="width: 16px; height: 16px; color: #10b981;"></i>
                            <span>{{ $deliverable->description }}</span>
                        </li>
                    @endforeach
                </ul>
            @else
                <ul class="deliverables-list">
                    <li class="deliverable-item">
                        <i data-lucide="check" style="width: 16px; height: 16px; color: #10b981;"></i>
                        <span>No deliverables specified</span>
                    </li>
                </ul>
            @endif
        </div>
    </div>

    <!-- Benefits Section -->
    <div class="sponsorship-section-card">
        <div class="section-header">
            <i data-lucide="gift" style="width: 20px; height: 20px; color: #6b7280;"></i>
            <h3 class="section-title">{{ $isSponsor ? 'Benefits Offered' : 'Benefits You Receive' }}</h3>
        </div>
        <div class="section-content">
            @if($sponsorship->benefits && $sponsorship->benefits->count() > 0)
                <ul class="benefits-list">
                    @foreach($sponsorship->benefits as $benefit)
                        <li class="benefit-item">
                            <i data-lucide="check-circle" style="width: 16px; height: 16px; color: #10b981;"></i>
                            <span>{{ $benefit->description }}</span>
                        </li>
                    @endforeach
                </ul>
            @else
                <ul class="benefits-list">
                    <li class="benefit-item">
                        <i data-lucide="check-circle" style="width: 16px; height: 16px; color: #10b981;"></i>
                        <span>No benefits specified</span>
                    </li>
                </ul>
            @endif
        </div>
    </div>

    @if($isBeneficiary && $sponsorProfile)
    <!-- Contact Information (for beneficiary view) -->
    <div class="sponsorship-section-card">
        <div class="section-header">
            <i data-lucide="user" style="width: 20px; height: 20px; color: #6b7280;"></i>
            <h3 class="section-title">Contact Information</h3>
        </div>
        <div class="section-content">
            <div class="contact-item">
                <i data-lucide="user" style="width: 16px; height: 16px;"></i>
                <span>{{ $sponsorship->sponsor->full_name ?? 'N/A' }}</span>
            </div>
            <div class="contact-item">
                <i data-lucide="mail" style="width: 16px; height: 16px;"></i>
                <a href="mailto:{{ $sponsorship->sponsor->email ?? '#' }}">{{ $sponsorship->sponsor->email ?? 'N/A' }}</a>
            </div>
        </div>
    </div>
    @endif

    <!-- Payment Milestones Section -->
    @if($sponsorship->installments && $sponsorship->installments->count() > 0)
    <div class="sponsorship-section-card payment-milestones-card">
        <div class="section-header">
            <i data-lucide="dollar-sign" style="width: 20px; height: 20px; color: #6b7280;"></i>
            <h3 class="section-title">{{ $isSponsor ? 'Payment Milestones' : 'Your Earnings Progress' }}</h3>
        </div>
        <div class="section-content">
            <!-- Progress Bar -->
            <div class="payment-progress-section">
                <div class="progress-bar-container">
                    <div class="progress-bar" style="width: {{ $progressPercentage }}%;"></div>
                </div>
                <div class="progress-stats">
                    <div class="progress-amount">
                        {!! \App\Helpers\Helper::price($totalPaid, $sponsorship->currency ?? 'USD') !!} / {!! \App\Helpers\Helper::price($totalCommitted, $sponsorship->currency ?? 'USD') !!}
                    </div>
                </div>
            </div>
            <div class="progress-details">
                <div class="progress-detail-item">
                    <span>Completed: {{ $completedMilestones }}/{{ $totalMilestones }} milestones</span>
                </div>
                @if($isSponsor && $totalAuthorized > 0)
                <div class="progress-detail-item">
                    <span>Authorized: {!! \App\Helpers\Helper::price($totalAuthorized, $sponsorship->currency ?? 'USD') !!}</span>
                </div>
                @elseif($isBeneficiary && $totalPaid < $totalCommitted)
                <div class="progress-detail-item">
                    <span>Pending Payment: {!! \App\Helpers\Helper::price($totalCommitted - $totalPaid, $sponsorship->currency ?? 'USD') !!}</span>
                </div>
                @endif
            </div>

            <!-- Milestones List -->
            <div class="milestones-list">
                @foreach($sponsorship->installments as $index => $installment)
                    @php
                        $milestoneNumber = $index + 1;
                        $isCompleted = $installment->isPaid();
                        $isPending = $installment->payment_status === \App\Models\Users\SponsorshipInstallment::STATUS_PENDING;
                        $isSubmittedForApproval = $installment->payment_status === \App\Models\Users\SponsorshipInstallment::STATUS_SUBMITTED_FOR_APPROVAL;
                        $isDisputed = $installment->payment_status === \App\Models\Users\SponsorshipInstallment::STATUS_DISPUTE;
                        $hasEvidence = !empty($installment->fund_description) || !empty($installment->installment_notes);
                        $isAwaiting = ($isSubmittedForApproval || ($isPending && $hasEvidence)) && $isSponsor;
                        
                        // Check if previous milestone is approved (for sequential approval)
                        $canSubmitForApproval = false;
                        if ($isPending && $isBeneficiary && $displayStatus === 'active') {
                            if ($index === 0) {
                                // First milestone can always be submitted
                                $canSubmitForApproval = true;
                            } else {
                                // Check if previous milestone is approved
                                $previousInstallment = $sponsorship->installments[$index - 1];
                                $isPreviousApproved = in_array($previousInstallment->payment_status, [
                                    \App\Models\Users\SponsorshipInstallment::STATUS_APPROVED_AND_RELEASED,
                                    \App\Models\Users\SponsorshipInstallment::STATUS_PAID,
                                ]);
                                $canSubmitForApproval = $isPreviousApproved;
                            }
                        }
                        
                        $milestoneStatus = 'pending';
                        if ($isCompleted) {
                            $milestoneStatus = 'completed';
                        } elseif ($isDisputed) {
                            $milestoneStatus = 'disputed';
                        } elseif ($isSubmittedForApproval) {
                            $milestoneStatus = 'submitted';
                        } elseif ($isAwaiting) {
                            $milestoneStatus = 'awaiting';
                        }
                        
                        $percentage = $totalCommitted > 0 ? ($installment->installment_amount / $totalCommitted) * 100 : 0;
                        $dueDate = $installment->installment_date ? \App\Helpers\Helper::showdate($installment->installment_date, false) : 'N/A';
                        $paidDate = $installment->approval_release_date ? \App\Helpers\Helper::showdate($installment->approval_release_date, false) : null;
                        $approvedDate = $installment->updated_at && $isCompleted ? \App\Helpers\Helper::showdate($installment->updated_at, false) : null;
                        $submittedDate = $installment->approval_request_date ? \App\Helpers\Helper::showdate($installment->approval_request_date, false) : null;
                        $disputeDate = $installment->dispute_date ? \App\Helpers\Helper::showdate($installment->dispute_date, false) : null;
                        $adminDisputeResolvedAt = $installment->admin_disput_resolved_at ? \App\Helpers\Helper::showdate($installment->admin_disput_resolved_at, false) : null;
                    @endphp
                    
                    <div class="milestone-item milestone-{{ $milestoneStatus }}">
                        <div class="milestone-header">
                            <div class="milestone-number {{ $milestoneStatus }}">
                                @if($isCompleted)
                                    <i data-lucide="check" style="width: 16px; height: 16px;"></i>
                                @else
                                    <span>{{ $milestoneNumber }}</span>
                                @endif
                            </div>
                            <div class="milestone-info">
                                <div class="milestone-title">{{ $installment->fund_purpose ?? 'Milestone ' . $milestoneNumber }}</div>
                                <div class="milestone-amount">
                                    {!! \App\Helpers\Helper::price($installment->installment_amount, $sponsorship->currency ?? 'USD') !!} 
                                    ({{ number_format($percentage, 0) }}%)
                                </div>
                                <div class="milestone-due">Due: {{ $dueDate }}</div>
                            </div>
                            <div class="milestone-status-badge status-{{ $milestoneStatus }}">
                                @if($isCompleted)
                                    <span>COMPLETED</span>
                                @elseif($isDisputed)
                                    <span>DISPUTED</span>
                                @elseif($isSubmittedForApproval)
                                    <span>SUBMITTED FOR APPROVAL</span>
                                @elseif($isAwaiting)
                                    <span>AWAITING APPROVAL</span>
                                @else
                                    <span>PENDING</span>
                                @endif
                            </div>
                        </div>
                        
                        @if($isCompleted && $approvedDate && $paidDate)
                        <div class="milestone-dates">
                            <span>Approved: {{ $approvedDate }}</span>
                            <span>Paid: {{ $paidDate }}</span>
                        </div>
                        @elseif($isDisputed)
                        <div class="milestone-dates milestone-dispute-info">
                            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
                                <i data-lucide="alert-circle" style="width: 16px; height: 16px; color: #991b1b;"></i>
                                <span class="dispute-date" style="font-weight: 600; color: #991b1b;">Milestone Disputed</span>
                            </div>
                            <span class="dispute-date">Disputed on: {{ $disputeDate ?? 'N/A' }}</span>
                            @if($installment->disput_reason)
                                <div style="margin-top: 8px; padding: 8px; background-color: #fef2f2; border-left: 3px solid #991b1b; border-radius: 4px;">
                                    <div style="font-weight: 600; color: #991b1b; margin-bottom: 4px;">Dispute Reason:</div>
                                    <div style="color: #7f1d1d;">{{ $installment->disput_reason }}</div>
                                </div>
                            @endif
                            @if($adminDisputeResolvedAt)
                                <span class="admin-dispute-date">Admin Response: {{ $adminDisputeResolvedAt }}</span>
                            @else
                                <span class="admin-dispute-pending">Awaiting admin response</span>
                            @endif
                        </div>
                        @elseif($isSubmittedForApproval && $submittedDate)
                        <div class="milestone-dates">
                            <span>Submitted: {{ $submittedDate }}</span>
                        </div>
                        @endif
                        
                        @if(($isAwaiting || $isSubmittedForApproval) && $isSponsor)
                        
                        <div class="milestone-evidence">
                            <div class="evidence-label">Completion Evidence:</div>
                            <div class="evidence-text">{{ $installment->fund_description ?? $installment->installment_notes ?? 'Evidence submitted' }}</div>
                        </div>
                        <div class="milestone-actions">
                            <button type="button" class="btn-approve-payment" data-installment-id="{{ $installment->id }}">
                                <i data-lucide="check" style="width: 16px; height: 16px;"></i>
                                Approve & Release Payment
                            </button>
                            <button type="button" class="btn-dispute" data-installment-id="{{ $installment->id }}">
                                <i data-lucide="x" style="width: 16px; height: 16px;"></i>
                                Dispute
                            </button>
                        </div>
                        @elseif($canSubmitForApproval)
                        <div class="milestone-actions">
                            <button type="button" class="btn-submit-approval" data-installment-id="{{ $installment->id }}">
                                Submit for Approval
                            </button>
                        </div>
                        @elseif($isDisputed)
                        <div class="milestone-message" style="background: #fee2e2; color: #991b1b; border: 1px solid #fecaca;">
                            <i data-lucide="alert-circle" style="width: 16px; height: 16px;"></i>
                            <span>This milestone has been disputed. Awaiting admin review.</span>
                        </div>
                        @elseif($isSubmittedForApproval && $isBeneficiary)
                        <div class="milestone-message">
                            <i data-lucide="clock" style="width: 16px; height: 16px;"></i>
                            <span>Awaiting sponsor approval</span>
                        </div>
                        @elseif($isPending && $isBeneficiary && $displayStatus === 'active' && !$canSubmitForApproval && $index > 0)
                        <div class="milestone-message">
                            <i data-lucide="lock" style="width: 16px; height: 16px;"></i>
                            <span>Previous milestone must be approved first</span>
                        </div>
                        @endif
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    @endif

    <!-- Notes Section -->
    @if($sponsorship->notes)
    <div class="sponsorship-section-card">
        <div class="section-header">
            <i data-lucide="sticky-note" style="width: 20px; height: 20px; color: #6b7280;"></i>
            <h3 class="section-title">Notes</h3>
        </div>
        <div class="section-content">
            <p class="notes-text">{{ $sponsorship->notes }}</p>
        </div>
    </div>
    @endif

    <!-- Offer Dates -->
    <div class="sponsorship-dates">
        <div class="date-item">
            <span class="date-label">{{ $isSponsor ? 'Offer Sent' : 'Offer Received' }}:</span>
            <span class="date-value">{{ $sponsorship->created_at ? \App\Helpers\Helper::showdate($sponsorship->created_at, false) : 'N/A' }}</span>
        </div>
        @if($sponsorship->offer_expire_in && ($displayStatus === 'pending' || $displayStatus === 'expired'))
        <div class="date-item">
            <span class="date-label">{{ $displayStatus === 'expired' ? 'Expired On' : 'Expires On' }}:</span>
            <span class="date-value expires">{{ $sponsorship->offer_expire_in ? \App\Helpers\Helper::showdate($sponsorship->offer_expire_in, false) : 'N/A' }}</span>
        </div>
        @endif
        @if($acceptedDate)
        <div class="date-item">
            <span class="date-label">{{ $isSponsor ? 'Accepted On' : 'Accepted On' }}:</span>
            <span class="date-value accepted">{{ $acceptedDate }}</span>
        </div>        
        @elseif($declinedDate)
        <div class="date-item">
            <span class="date-label">Declined On:</span>
            <span class="date-value declined">{{ $declinedDate }}</span>
        </div>
        @endif
    </div>

    <!-- Decline Reason (if declined) - Show only to sponsor -->
    @if($isSponsor && $displayStatus === 'declined')
    <div class="decline-reason-box">
        <div class="decline-reason-header">
            <i data-lucide="x-circle" style="width: 20px; height: 20px; color: #EF4444;"></i>
            <span>Decline Reason</span>
        </div>
        @if($declineReason)
            <div class="decline-reason-text">{{ $declineReason }}</div>
        @else
            <div class="decline-reason-text" style="color: #9ca3af; font-style: italic;">No reason provided</div>
        @endif
    </div>
    @endif

    <!-- Action Buttons -->
    <div class="sponsorship-actions">
        @if($isSponsor)
            @if($displayStatus === 'pending' && !$sponsorship->is_withdrawal)
                <a href="{{ route('profile.sponsorships.edit', ['id' => $sponsorship->id]) }}" class="btn-action btn-edit-resend">
                    <i data-lucide="pencil" style="width: 16px; height: 16px;"></i>
                    Edit
                </a>
                <button type="button" class="btn-action btn-withdraw" onclick="withdrawOffer({{ $sponsorship->id }})" data-withdraw-url="{{ route('profile.sponsorships.withdraw', ['id' => $sponsorship->id]) }}">
                    <i data-lucide="x-circle" style="width: 16px; height: 16px;"></i>
                    Withdraw Offer
                </button>
            
            @elseif(($displayStatus === 'declined' || $displayStatus === 'expired') && !$sponsorship->is_withdrawal)
                <a href="{{ route('profile.sponsorships.create', ['resend' => $sponsorship->id]) }}" class="btn-action btn-resend">
                    <i data-lucide="refresh-cw" style="width: 16px; height: 16px;"></i>
                    Resend Offer
                </a>
                <a href="{{ route('profile.sponsorships.edit', ['id' => $sponsorship->id]) }}" class="btn-action btn-edit-resend">
                    <i data-lucide="pencil" style="width: 16px; height: 16px;"></i>
                    Edit & Resend
                </a>
            @endif
        @elseif($isBeneficiary)
            @if($displayStatus === 'pending' && !$sponsorship->is_withdrawal)
                <button type="button" class="btn-action btn-accept-large" onclick="confirmAction({{ $sponsorship->id }}, 'approve')">
                    <i data-lucide="check" style="width: 20px; height: 20px;"></i>
                    Accept Offer
                </button>
                <button type="button" class="btn-action btn-decline-large" onclick="confirmAction({{ $sponsorship->id }}, 'decline')">
                    <i data-lucide="x" style="width: 20px; height: 20px;"></i>
                    Decline Offer
                </button>
            @endif
        @endif
    </div>

    <!-- Partnership Active Banner -->
    @if($displayStatus === 'active')
    <div class="partnership-active-banner">
        <i data-lucide="check-circle" style="width: 20px; height: 20px;"></i>
        <div class="banner-content">
            <div class="banner-title">Partnership Active</div>
            <div class="banner-text">
                @if($isSponsor)
                    This offer was accepted on {{ $acceptedDate ?? 'N/A' }}
                @else
                    You accepted this sponsorship on {{ $acceptedDate ?? 'N/A' }}
                @endif
            </div>
        </div>
    </div>
    @endif

    <!-- Messages Section (Hidden) -->
    <div class="comments-card" id="messages-section">
        <div class="comments-header">
            <h2 class="card-title" style="margin: 0;">
                Messages
            </h2>
            <button type="button" class="btn-receive-updates" id="toggle-notifications" style="position: relative;">
                <i data-lucide="bell" style="width: 16px; height: 16px;"></i>
                Receive updates on new messages
                @if(isset($unreadCount) && $unreadCount > 0)
                <span class="bell-notification-dot" id="bell-notification-dot"></span>
                @endif
            </button>
        </div>

        <!-- Messages Container -->
        <div class="messages-container" id="messages-container">
            @forelse($messages ?? [] as $message)
            <div class="comment-item message-item {{ $message->sender_user_id === $user->id ? 'message-sent' : 'message-received' }}" data-message-id="{{ $message->id }}">
                <div class="comment-avatar">{{ substr($message->sender->full_name ?? 'U', 0, 2) }}</div>
                <div class="comment-content">
                    <div class="comment-author">
                        <div class="comment-author-name">
                            {{ $message->sender->full_name ?? 'Unknown' }}
                            @if($message->sender_user_id === $user->id)
                                @if($message->is_read)
                                    <i data-lucide="check-check" style="width: 14px; height: 14px; color: #059669; margin-left: 6px;" class="read-indicator"></i>
                                @else
                                    <i data-lucide="check" style="width: 14px; height: 14px; color: #6b7280; margin-left: 6px;" class="read-indicator"></i>
                                @endif
                            @endif
                        </div>
                        <div class="message-time">{{ $message->created_at->format('M d, h:i A') }}</div>
                    </div>
                    @if($message->message)
                    <div class="comment-text">{{ $message->message }}</div>
                    @endif
                    @if($message->file)
                    <div class="message-file">
                        <a href="{{ \App\Models\Masters\File::getFile($message->file) ?? '#' }}" target="_blank" class="file-link">
                            <i data-lucide="paperclip" style="width: 16px; height: 16px;"></i>
                            {{ $message->file->file_name_original ?? 'Attachment' }}
                        </a>
                    </div>
                    @endif
                </div>
            </div>
            @empty
            <div class="no-messages">
                <p>No messages yet. Start the conversation!</p>
            </div>
            @endforelse
        </div>

        <!-- Typing Indicator -->
        <div class="typing-indicator" id="typing-indicator" style="display: none;">
            <div class="comment-item">
                <div class="comment-avatar">{{ substr($otherUser->full_name ?? 'U', 0, 2) }}</div>
                <div class="comment-content">
                    <div class="typing-dots">
                        <span></span><span></span><span></span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Message Input Form -->
        <div class="comment-reply-form">
            <input type="file" id="message-file-input" style="display: none;" accept="image/*,application/pdf,.doc,.docx,.txt">
            <textarea class="comment-input" id="message-input" rows="4" placeholder="Type your message..." style="min-height: 100px;"></textarea>
            <button class="btn-attach" id="attach-file-btn">
                <i data-lucide="paperclip" style="width: 20px; height: 20px;"></i>
            </button>
            <div class="file-preview" id="file-preview" style="display: none;">
                <span id="file-name"></span>
                <button type="button" id="remove-file" style="background: none; border: none; color: #dc2626; cursor: pointer;">
                    <i data-lucide="x" style="width: 16px; height: 16px;"></i>
                </button>
            </div>
            <button class="btn-send-message" id="send-message-btn">
                <i data-lucide="send" style="width: 16px; height: 16px;"></i>
                Send Message
            </button>
        </div>
    </div>
</div>

<!-- Report Modal -->
<div class="modal fade" id="reportModal" tabindex="-1" aria-labelledby="reportModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="reportModalLabel">Sponsorship Activity Report</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="report-actions mb-3">
                    <button type="button" class="btn btn-primary" id="exportReportBtn" onclick="exportReport()">
                        <i data-lucide="download" style="width: 16px; height: 16px;"></i>
                        Export as CSV
                    </button>
                </div>
                <div class="table-responsive">
                    <table class="table table-striped table-hover" id="activitiesTable">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Activity Type</th>
                                <th>Performed By</th>
                                <th>User Type</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody id="activitiesTableBody">
                            <tr>
                                <td colspan="5" class="text-center">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@endsection


@push('page_script')
<script>
    // Make function globally accessible
    window.withdrawOffer = function(sponsorshipId) {
        // Show confirmation dialog using SweetAlert2
        Swal.fire({
            title: 'Withdraw Offer?',
            text: 'Are you sure you want to withdraw this offer? This action cannot be undone.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc2626',
            cancelButtonColor: '#6b7280',
            confirmButtonText: 'Yes, Withdraw',
            cancelButtonText: 'Cancel',
            showClass: {
                popup: 'animate__animated animate__fadeInDown'
            },
            hideClass: {
                popup: 'animate__animated animate__fadeOutUp'
            }
        }).then(function(result) {
            if (result.isConfirmed) {
                // Show loading state
                var $btn = $('.btn-withdraw');
                if (!$btn.length) {
                    $btn = $('.btn-withdrawal');
                }
                if (!$btn.length) return;
                
                var originalHtml = $btn.html();
                $btn.prop('disabled', true);
                $btn.html('<i data-lucide="loader-2" style="width: 16px; height: 16px;" class="animate-spin"></i> Withdrawing...');

                // Get URL from data attribute or build it
                var withdrawUrl = $btn.attr('data-withdraw-url');
                if (!withdrawUrl) {
                    withdrawUrl = '/profile/sponsorships/' + sponsorshipId + '/withdraw';
                }
                
                $.ajax({
                    url: withdrawUrl,
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    success: function(data, textStatus, xhr) {
                        var status = xhr.status;
                        
                        // Check if successful: HTTP 200 status OR data.status === 200 OR data.data.success === true
                        var isSuccess = status === 200 || data.status === 200 || (data.data && data.data.success === true);
                        
                        if (isSuccess) {
                            // Show success message
                            Swal.fire({
                                title: 'Success!',
                                text: data.message || 'Offer withdrawn successfully',
                                icon: 'success',
                                timer: 2000,
                                showConfirmButton: false,
                                confirmButtonColor: '#059669'
                            }).then(function() {
                                // Reload page to show updated status
                                window.location.reload();
                            });
                        } else {
                            // Show error message
                            Swal.fire({
                                title: 'Error!',
                                text: data.message || 'Failed to withdraw offer. Please try again.',
                                icon: 'error',
                                confirmButtonColor: '#dc2626'
                            });
                            $btn.prop('disabled', false);
                            $btn.html(originalHtml);
                            if (typeof lucide !== 'undefined') {
                                lucide.createIcons();
                            }
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('Error:', error);
                        Swal.fire({
                            title: 'Error!',
                            text: 'An error occurred while withdrawing the offer. Please try again.',
                            icon: 'error',
                            confirmButtonColor: '#3085d6'
                        });
                        $btn.prop('disabled', false);
                        $btn.html(originalHtml);
                        if (typeof lucide !== 'undefined') {
                            lucide.createIcons();
                        }
                    }
                });
            }
        });
    }

    // Accept/Reject functionality
    window.confirmAction = function(sponsorshipId, action) {
        if (action === 'approve') {
            // Approve action - simple confirmation
            Swal.fire({
                title: 'Approve Sponsorship?',
                text: 'Are you sure you want to approve this sponsorship offer?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#059669',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'Yes, Approve',
                cancelButtonText: 'Cancel'
            }).then(function(result) {
                if (result.isConfirmed) {
                    updateSponsorshipStatus(sponsorshipId, action, null);
                }
            });
        } else {
            // Decline action - show textarea for reason
            Swal.fire({
                title: 'Decline Sponsorship?',
                html: '<div style="text-align: left; margin-bottom: 20px; color: #374151; line-height: 1.5; padding: 0 4px;">Are you sure you want to decline this sponsorship offer?</div>' +
                      '<div style="text-align: left; margin-bottom: 12px; font-weight: 500; color: #111827; font-size: 14px; padding: 0 4px;">Please provide a reason (optional):</div>' +
                      '<textarea id="decline-reason" class="swal2-textarea" placeholder="Enter your reason for declining this offer..." style="width: 100%; min-height: 100px; max-height: 150px; padding: 12px; border: 1px solid #d1d5db; border-radius: 8px; font-family: inherit; font-size: 14px; resize: none; overflow-y: auto; box-sizing: border-box; margin: 0 4px 0 4px;"></textarea>',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc2626',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'Yes, Decline',
                cancelButtonText: 'Cancel',
                width: '500px',
                customClass: {
                    popup: 'swal2-popup-no-scroll',
                    htmlContainer: 'swal2-html-container-no-scroll'
                },
                didOpen: function() {
                    // Focus on textarea when modal opens
                    setTimeout(function() {
                        var textarea = document.getElementById('decline-reason');
                        if (textarea) {
                            textarea.focus();
                        }
                    }, 100);
                },
                preConfirm: function() {
                    var reason = document.getElementById('decline-reason').value.trim();
                    return reason || null; // Return null if empty (optional field)
                }
            }).then(function(result) {
                if (result.isConfirmed) {
                    var declineReason = result.value || null;
                    updateSponsorshipStatus(sponsorshipId, action, declineReason);
                }
            });
        }
    }

    function updateSponsorshipStatus(sponsorshipId, action, declineReason) {
        var newStatus = action === 'approve' ? 'active' : 'declined';
        var requestData = {
            status: newStatus
        };
        
        // Add decline reason if provided
        if (action === 'decline' && declineReason) {
            requestData.decline_reason = declineReason;
        }
        
        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': '{{ csrf_token() }}',
                'Accept': 'application/json'
            },
            data: JSON.stringify(requestData),
            success: function(data) {
                if (data.status === 200 || (data.data && data.data.success)) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: action === 'approve' 
                            ? 'Sponsorship has been approved successfully.' 
                            : 'Sponsorship has been declined 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'
                });
            }
        });
    }

    // Scroll to messages function
    function scrollToMessages() {
        var $messagesSectionEl = $('#messages-section');
        if ($messagesSectionEl.length) {
            $messagesSectionEl.css('display', 'block');
            $('html, body').animate({
                scrollTop: $messagesSectionEl.offset().top
            }, 500);
            // Focus on message input
            setTimeout(function() {
                $('#message-input').focus();
            }, 500);
        }
    }

    // Generic function to update installment status
    function updateInstallmentStatus(installmentId, status, options) {
        if (!installmentId || installmentId <= 0) {
            return false;
        }
        
        var defaultOptions = {
            title: 'Update Status?',
            text: 'Are you sure you want to update this milestone status?',
            icon: 'question',
            confirmButtonColor: '#10b981',
            cancelButtonColor: '#6b7280',
            confirmButtonText: 'Yes, Update',
            cancelButtonText: 'Cancel',
            successText: 'Status updated successfully.',
            successIcon: 'success',
            showInput: false,
            inputPlaceholder: '',
            inputLabel: '',
            inputValidator: null
        };
        
        var config = Object.assign({}, defaultOptions, options);
        
        // Prepare text/html content
        var contentText = config.text;
        if (config.showInput && config.inputLabel) {
            contentText = config.text + '<div style="margin-top: 16px; margin-bottom: 8px;"><label style="display: block; font-weight: 600; color: #374151; margin-bottom: 6px;">' + config.inputLabel + '</label></div>';
        }
        
        var swalConfig = {
            title: config.title,
            icon: config.icon,
            showCancelButton: true,
            confirmButtonColor: config.confirmButtonColor,
            cancelButtonColor: config.cancelButtonColor,
            confirmButtonText: config.confirmButtonText,
            cancelButtonText: config.cancelButtonText,
            showLoaderOnConfirm: true,
            allowOutsideClick: () => !Swal.isLoading(),
            // Use html if we have input label, otherwise use text
            [config.showInput && config.inputLabel ? 'html' : 'text']: contentText,
            preConfirm: function() {
                return new Promise(function(resolve, reject) {
                    var requestData = {
                        status: status
                    };
                    
                    // Add dispute reason if input is provided
                    if (config.showInput && Swal.getInput().value) {
                        requestData.disput_reason = Swal.getInput().value;
                    }
                    
                    $.ajax({
                        url: '/profile/sponsorships/installments/' + installmentId + '/update-status',
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json'
                        },
                        data: JSON.stringify(requestData),
                        success: function(data) {
                            if (data.status === 200) {
                                resolve(data);
                            } else {
                                var errorMessage = data.message || 'Failed to update status';
                                Swal.showValidationMessage(errorMessage);
                                reject(new Error(errorMessage));
                            }
                        },
                        error: function(xhr) {
                            var errorMessage = 'Request failed';
                            if (xhr.responseJSON) {
                                if (xhr.responseJSON.message) {
                                    errorMessage = xhr.responseJSON.message;
                                } else if (xhr.responseJSON.data && xhr.responseJSON.data.message) {
                                    errorMessage = xhr.responseJSON.data.message;
                                }
                            } else if (xhr.statusText) {
                                errorMessage = xhr.statusText;
                            }
                            Swal.showValidationMessage(errorMessage);
                            reject(new Error(errorMessage));
                        }
                    });
                }).catch(function(error) {
                    // Ensure loader is hidden on error
                    Swal.hideLoading();
                    throw error;
                });
            }
        };
        
        // Add input field if showInput is true
        if (config.showInput) {
            swalConfig.input = 'textarea';
            swalConfig.inputPlaceholder = config.inputPlaceholder;
            swalConfig.inputAttributes = {
                rows: 4,
                placeholder: config.inputPlaceholder,
                style: 'margin-top: 8px; width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; font-family: inherit; resize: vertical; box-sizing: border-box;'
            };
            if (config.inputValidator) {
                swalConfig.inputValidator = config.inputValidator;
            }
            // Add custom styling after modal opens
            swalConfig.didOpen = function() {
                var textarea = Swal.getInput();
                if (textarea) {
                    textarea.style.marginLeft = '16px';
                    textarea.style.marginRight = '16px';
                    textarea.style.width = 'calc(100% - 32px)';
                    textarea.style.maxWidth = 'calc(100% - 32px)';
                }
            };
        }
        
        Swal.fire(swalConfig).then(function(result) {
            if (result.isConfirmed) {
                Swal.fire({
                    title: 'Success!',
                    text: config.successText,
                    icon: config.successIcon,
                    confirmButtonText: 'OK'
                }).then(function() {
                    window.location.reload();
                });
            }
        }).catch(function(error) {
            // Handle any errors - hide loader and show error
            Swal.hideLoading();
            Swal.fire({
                title: 'Error!',
                text: error.message || 'An error occurred',
                icon: 'error',
                confirmButtonText: 'OK'
            });
        });
        
        return false;
    }

    // Payment approval function
    window.approvePayment = function(installmentId) {
        updateInstallmentStatus(installmentId, 3, { // STATUS_APPROVED_AND_RELEASED
            title: 'Approve Payment?',
            text: 'Are you sure you want to approve and release this payment?',
            confirmButtonText: 'Yes, Approve',
            successText: 'Payment approved and released successfully.'
        });
    }

    window.disputeMilestone = function(installmentId) {
        updateInstallmentStatus(installmentId, 4, { // STATUS_DISPUTE
            title: 'Dispute Milestone?',
            text: 'Are you sure you want to dispute this milestone?',
            icon: 'warning',
            confirmButtonColor: '#ef4444',
            confirmButtonText: 'Yes, Dispute',
            successText: 'Milestone has been disputed successfully.',
            successIcon: 'info',
            showInput: true,
            inputLabel: 'Dispute Reason <span style="color: #dc2626;">*</span>',
            inputPlaceholder: 'Please provide a reason for disputing this milestone...',
            inputValidator: function(value) {
                if (!value || value.trim() === '') {
                    return 'Please provide a reason for disputing this milestone';
                }
            }
        });
    }

    window.submitForApproval = function(installmentId) {
        updateInstallmentStatus(installmentId, 2, { // STATUS_SUBMITTED_FOR_APPROVAL
            title: 'Submit for Approval?',
            text: 'Submit this milestone for sponsor approval?',
            confirmButtonText: 'Yes, Submit',
            successText: 'Milestone submitted for approval successfully.'
        });
    }

    // Use jQuery event delegation to prevent auto-triggering
    $(document).ready(function() {
        // Handle submit for approval button clicks
        $(document).on('click', '.btn-submit-approval', function(e) {
            e.preventDefault();
            e.stopPropagation();
            var installmentId = $(this).data('installment-id');
            if (installmentId) {
                submitForApproval(installmentId);
            }
            return false;
        });
        
        // Handle approve payment button clicks
        $(document).on('click', '.btn-approve-payment', function(e) {
            e.preventDefault();
            e.stopPropagation();
            var installmentId = $(this).data('installment-id');
            if (installmentId && typeof approvePayment === 'function') {
                approvePayment(installmentId);
            }
            return false;
        });
        
        // Handle dispute button clicks
        $(document).on('click', '.btn-dispute', function(e) {
            e.preventDefault();
            e.stopPropagation();
            var installmentId = $(this).data('installment-id');
            if (installmentId && typeof disputeMilestone === 'function') {
                disputeMilestone(installmentId);
            }
            return false;
        });
    });

    // Messaging functionality with Pusher (keeping existing code)
    (function() {
        var entityType = 'sponsorship';
        var entityId = {{ $sponsorship->id }};
        var currentUserId = {{ $user->id }};
        var $messagesContainer = $('#messages-container');
        var $messageInput = $('#message-input');
        var $sendBtn = $('#send-message-btn');
        var $attachBtn = $('#attach-file-btn');
        var $fileInput = $('#message-file-input');
        var $filePreview = $('#file-preview');
        var $fileName = $('#file-name');
        var $removeFileBtn = $('#remove-file');
        var $typingIndicator = $('#typing-indicator');
        
        var selectedFile = null;
        var typingTimeout = null;
        var pusher = null;
        var channel = null;
        var unreadCount = {{ $unreadCount ?? 0 }};

        // Initialize Pusher
        @if(config('broadcasting.default') === 'pusher')
        try {
            var pusherKey = '{{ config('broadcasting.connections.pusher.key') }}';
            var pusherCluster = '{{ config('broadcasting.connections.pusher.options.cluster') }}';
            
            if (!pusherKey || pusherKey === '') {
                console.warn('Pusher key is not configured. Real-time messaging will not work.');
            } else {
                pusher = new Pusher(pusherKey, {
                    cluster: pusherCluster || 'mt1',
                    encrypted: true,
                    authEndpoint: '/broadcasting/auth',
                    auth: {
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        }
                    }
                });

                var channelName = 'private-messages.' + entityType + '.' + entityId;
                console.log('Subscribing to channel:', channelName);
                
                channel = pusher.subscribe(channelName);
                
                channel.bind('pusher:subscription_succeeded', function() {
                    console.log('✅ Successfully subscribed to channel:', channelName);
                });
                
                channel.bind('pusher:subscription_error', function(status) {
                    console.error('❌ Subscription error:', status);
                });
                
                channel.bind('message.sent', function(data) {
                    console.log('📨 Message received via Pusher:', data);
                    
                    var $existingMessage = $('[data-message-id="' + data.id + '"]');
                    if ($existingMessage.length) {
                        console.log('Message already exists in UI, skipping duplicate');
                        return;
                    }
                    
                    addMessageToUI(data);
                    
                    if (data.receiver_user_id === currentUserId && data.sender_user_id !== currentUserId) {
                        console.log('New message received - updating unread count');
                        unreadCount++;
                        updateUnreadBadge();
                    }
                });
                
                pusher.connection.bind('connected', function() {
                    console.log('✅ Pusher connected');
                });
                
                pusher.connection.bind('error', function(err) {
                    console.error('❌ Pusher connection error:', err);
                });
            }

            if (channel) {
                channel.bind('typing.status', function(data) {
                    if (data.user_id !== currentUserId) {
                        if (data.is_typing) {
                            $typingIndicator.css('display', 'block');
                            scrollToBottom();
                        } else {
                            $typingIndicator.css('display', 'none');
                        }
                    }
                });
            }
        } catch (e) {
            console.error('Pusher initialization error:', e);
        }
        @endif

        // Auto-resize textarea
        if ($messageInput.length) {
            $messageInput.on('input', function() {
                $(this).css('height', 'auto');
                $(this).css('height', this.scrollHeight + 'px');
                
                updateTypingStatus(true);
                clearTimeout(typingTimeout);
                typingTimeout = setTimeout(function() {
                    updateTypingStatus(false);
                }, 1000);
            });

            $messageInput.on('keydown', function(e) {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    sendMessage();
                }
            });
        }

        // File attachment
        if ($attachBtn.length) {
            $attachBtn.on('click', function() {
                $fileInput.click();
            });
        }

        if ($fileInput.length) {
            $fileInput.on('change', function(e) {
                var file = e.target.files[0];
                if (file) {
                    selectedFile = file;
                    $fileName.text(file.name);
                    $filePreview.css('display', 'flex');
                }
            });
        }

        if ($removeFileBtn.length) {
            $removeFileBtn.on('click', function() {
                selectedFile = null;
                $fileInput.val('');
                $filePreview.css('display', 'none');
            });
        }

        // Send message
        if ($sendBtn.length) {
            $sendBtn.on('click', sendMessage);
        }

        function sendMessage() {
            var messageText = $messageInput.val().trim();
            
            if (!messageText && !selectedFile) {
                return;
            }

            $sendBtn.prop('disabled', true);
            $sendBtn.html('<i data-lucide="loader-2" style="width: 16px; height: 16px;" class="animate-spin"></i> Sending...');

            var formData = new FormData();
            formData.append('entity_type', entityType);
            formData.append('entity_id', entityId);
            if (messageText) {
                formData.append('message', messageText);
            }
            if (selectedFile) {
                formData.append('file', selectedFile);
            }

            $.ajax({
                url: '{{ route('profile.messages.send') }}',
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                data: formData,
                processData: false,
                contentType: false,
                success: function(data) {
                    if (data.status === 200 || (data.data && data.data.success)) {
                        addMessageToUI(data.data.message);
                        $messageInput.val('');
                        $messageInput.css('height', 'auto');
                        selectedFile = null;
                        $fileInput.val('');
                        $filePreview.css('display', 'none');
                        updateTypingStatus(false);
                        scrollToBottom();
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error!',
                            text: data.message || 'Failed to send message.',
                            confirmButtonColor: '#dc2626'
                        });
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                    Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: 'An error occurred while sending the message.',
                        confirmButtonColor: '#dc2626'
                    });
                },
                complete: function() {
                    $sendBtn.prop('disabled', false);
                    $sendBtn.html('<i data-lucide="send" style="width: 16px; height: 16px;"></i> Send Message');
                    if (typeof lucide !== 'undefined') {
                        lucide.createIcons();
                    }
                }
            });
        }

        function addMessageToUI(messageData) {
            var $existingMessage = $('[data-message-id="' + messageData.id + '"]');
            if ($existingMessage.length) {
                console.log('Message already exists in UI, skipping duplicate');
                return;
            }
            
            var senderInitials = (messageData.sender && messageData.sender.full_name) ? messageData.sender.full_name.substring(0, 2).toUpperCase() : 'U';
            var senderName = (messageData.sender && messageData.sender.full_name) || 'Unknown';
            var messageTime = new Date(messageData.created_at).toLocaleString('en-US', {
                month: 'short',
                day: 'numeric',
                hour: 'numeric',
                minute: '2-digit',
                hour12: true
            });
            
            var readIndicator = '';
            if (messageData.sender_user_id === currentUserId) {
                if (messageData.is_read) {
                    readIndicator = '<i data-lucide="check-check" style="width: 14px; height: 14px; color: #059669; margin-left: 6px;" class="read-indicator"></i>';
                } else {
                    readIndicator = '<i data-lucide="check" style="width: 14px; height: 14px; color: #6b7280; margin-left: 6px;" class="read-indicator"></i>';
                }
            }
            
            var fileHtml = '';
            if (messageData.file) {
                // Handle file URL - could be file_url, original, or getFile result
                var fileUrl = '#';
                if (messageData.file.file_url) {
                    fileUrl = messageData.file.file_url;
                } else if (messageData.file.original) {
                    fileUrl = messageData.file.original;
                } else if (typeof messageData.file === 'object' && messageData.file.id) {
                    // If file is a File model object, we need to construct URL
                    // This will be handled server-side, but as fallback use file_id
                    fileUrl = '/files/' + messageData.file.id;
                }
                
                var fileName = messageData.file.file_name_original || messageData.file.file_name || 'Attachment';
                fileHtml = '<div class="message-file">' +
                    '<a href="' + fileUrl + '" target="_blank" class="file-link">' +
                    '<i data-lucide="paperclip" style="width: 16px; height: 16px;"></i> ' +
                    fileName +
                    '</a>' +
                    '</div>';
            }
            
            var messageClass = 'comment-item message-item ' + (messageData.sender_user_id === currentUserId ? 'message-sent' : 'message-received');
            var messageHtml = '<div class="comment-avatar">' + senderInitials + '</div>' +
                '<div class="comment-content">' +
                '<div class="comment-author">' +
                '<div class="comment-author-name">' +
                senderName +
                (readIndicator ? ' ' + readIndicator : '') +
                '</div>' +
                '<div class="message-time">' + messageTime + '</div>' +
                '</div>' +
                (messageData.message ? '<div class="comment-text">' + messageData.message + '</div>' : '') +
                fileHtml +
                '</div>';
            
            var $messageDiv = $('<div>').addClass(messageClass).attr('data-message-id', messageData.id).html(messageHtml);
            
            var $noMessages = $messagesContainer.find('.no-messages');
            if ($noMessages.length) {
                $noMessages.remove();
            }
            
            $messagesContainer.append($messageDiv);
            scrollToBottom();
            
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
        }

        function scrollToBottom() {
            if ($messagesContainer.length) {
                $messagesContainer.scrollTop($messagesContainer[0].scrollHeight);
            }
        }

        function updateTypingStatus(isTyping) {
            $.ajax({
                url: '{{ route('profile.messages.typing') }}',
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                data: JSON.stringify({
                    entity_type: entityType,
                    entity_id: entityId,
                    is_typing: isTyping
                }),
                error: function(err) {
                    console.error('Typing status error:', err);
                }
            });
        }

        function updateUnreadBadge() {
            var $bellDot = $('#bell-notification-dot');
            var $bellButton = $('#toggle-notifications');
            
            if (unreadCount > 0) {
                if (!$bellDot.length && $bellButton.length) {
                    var $newDot = $('<span>').addClass('bell-notification-dot').attr('id', 'bell-notification-dot');
                    $bellButton.append($newDot);
                } else if ($bellDot.length) {
                    $bellDot.css('display', 'block');
                }
            } else {
                if ($bellDot.length) {
                    $bellDot.css('display', 'none');
                }
            }
        }

        function markMessagesAsRead() {
            $.ajax({
                url: '{{ route('profile.messages.mark_read') }}',
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                data: JSON.stringify({
                    entity_type: entityType,
                    entity_id: entityId
                }),
                success: function(data) {
                    if (data.status === 200 || (data.data && data.data.success)) {
                        unreadCount = 0;
                        updateUnreadBadge();
                    }
                },
                error: function(err) {
                    console.error('Mark read error:', err);
                }
            });
        }

        updateUnreadBadge();
        setTimeout(scrollToBottom, 100);
    })();

    // View Report functionality
    var currentSponsorshipId = null;
    var currentExportUrl = null;

    window.viewReport = function(sponsorshipId) {
        currentSponsorshipId = sponsorshipId;
        var $btn = $('.btn-report');
        if ($btn.length) {
            currentExportUrl = $btn.attr('data-export-url');
        }
        var reportUrl = '{{ route('profile.sponsorships.report', ['id' => $sponsorship->id]) }}';
        
        var $modalElement = $('#reportModal');
        if (!$modalElement.length) {
            console.error('Report modal not found');
            return;
        }
        
        if (typeof bootstrap === 'undefined') {
            console.error('Bootstrap is not loaded');
            Swal.fire({
                title: 'Error!',
                text: 'Bootstrap is required for this feature',
                icon: 'error',
                confirmButtonColor: '#dc2626'
            });
            return;
        }
        
        var modal = new bootstrap.Modal($modalElement[0]);
        modal.show();
        
        $.ajax({
            url: reportUrl,
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            },
            success: function(result) {
                var status = result.status || 200;
                var data = result.data || result;
                
                if (status === 200 && data.success && data.activities) {
                    displayActivities(data.activities);
                } else {
                    showReportError(data.message || 'Failed to load activities');
                }
            },
            error: function(xhr, status, error) {
                console.error('Error:', error);
                showReportError('An error occurred while loading the report');
            }
        });
    };

    function displayActivities(activities) {
        var $tbody = $('#activitiesTableBody');
        if (!$tbody.length) return;
        
        $tbody.empty();
        
        if (activities.length === 0) {
            $tbody.html('<tr><td colspan="5" class="text-center">No activities found</td></tr>');
            return;
        }
        
        var activityTypeLabels = {
            'offer_created': 'Offer Created',
            'offer_viewed': 'Offer Viewed',
            'offer_accepted': 'Offer Accepted',
            'offer_rejected': 'Offer Rejected',
            'offer_withdrawn': 'Offer Withdrawn',
            'payment_released': 'Payment Released',
            'status_changed': 'Status Changed',
        };
        
        $.each(activities, function(index, activity) {
            var date = 'N/A';
            if (activity.created_at) {
                var dateObj = new Date(activity.created_at);
                date = dateObj.toLocaleDateString('en-US', { 
                    year: 'numeric', 
                    month: 'short', 
                    day: 'numeric',
                    hour: '2-digit',
                    minute: '2-digit'
                });
            }
            var activityType = activityTypeLabels[activity.activity_type] || activity.activity_type;
            var performedBy = activity.performed_by ? activity.performed_by.full_name : 'System';
            var userType = activity.performed_by_type ? activity.performed_by_type.charAt(0).toUpperCase() + activity.performed_by_type.slice(1) : 'N/A';
            var description = activity.description || '';
            
            var rowHtml = '<tr>' +
                '<td>' + date + '</td>' +
                '<td>' + activityType + '</td>' +
                '<td>' + performedBy + '</td>' +
                '<td>' + userType + '</td>' +
                '<td>' + description + '</td>' +
                '</tr>';
            
            $tbody.append(rowHtml);
        });
        
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    }

    function showReportError(message) {
        var $tbody = $('#activitiesTableBody');
        if ($tbody.length) {
            $tbody.html('<tr><td colspan="5" class="text-center text-danger">' + message + '</td></tr>');
        }
    }

    window.exportReport = function() {
        if (!currentExportUrl) {
            Swal.fire({
                title: 'Error!',
                text: 'Export URL not found',
                icon: 'error',
                confirmButtonColor: '#dc2626'
            });
            return;
        }
        
        var $link = $('<a>').attr('href', currentExportUrl).attr('download', '');
        $('body').append($link);
        $link[0].click();
        $link.remove();
        
        Swal.fire({
            title: 'Success!',
            text: 'Report exported successfully',
            icon: 'success',
            timer: 2000,
            showConfirmButton: false,
            confirmButtonColor: '#059669'
        });
    };
</script>
@endpush