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

@push('page_css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
@endpush

@section('content')

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

<!-- Top Bar with Title and Buttons -->
<div class="campaigns-top-bar">
    <div class="campaigns-top-bar-left">
        <h1 class="campaigns-main-title">Sent Offers</h1>
        <p class="campaigns-subtitle">Manage sponsorship offers you've created and sent to athletes and teams.</p>
    </div>
    <div class="campaigns-top-bar-right">
        <button type="button" onclick="openSponsorshipModal()" class="btn-create-campaign">
            <i data-lucide="plus" class="btn-icon"></i>
            Create New Offer
        </button>
    </div>
</div>

<div class="sponsorships-container">
    <!-- Summary Statistics Cards -->
    <div class="stats">
        <div class="stat-card" style="background: #E0F2FE; border-left: 4px solid #0EA5E9;">
            <div class="stat-top-row">
                <div>
                    <div class="stat-value" style="color: #0C4A6E;">{{ $pendingOffers ?? 0 }}</div>
                    <div class="stat-label" style="color: #075985; font-weight: 600; margin-top: 8px;">Pending Offers</div>
                    <div class="stat-subtext" style="color: #0284C7; font-size: 13px; margin-top: 4px;">Awaiting response</div>
                </div>
                <div class="stat-icon" style="background: rgba(14, 165, 233, 0.2);">
                    <i data-lucide="send" style="color: #0EA5E9;"></i>
                </div>
            </div>
        </div>

        <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;">{{ $activePartnerships ?? 0 }}</div>
                    <div class="stat-label" style="color: #065F46; font-weight: 600; margin-top: 8px;">Active Partnerships</div>
                    <div class="stat-subtext" style="color: #059669; font-size: 13px; margin-top: 4px;">Accepted offers</div>
                </div>
                <div class="stat-icon" style="background: rgba(16, 185, 129, 0.2);">
                    <i data-lucide="check-circle" style="color: #10B981;"></i>
                </div>
            </div>
        </div>

        <div class="stat-card" style="background: #FEE2E2; border-left: 4px solid #EF4444;">
            <div class="stat-top-row">
                <div>
                    <div class="stat-value" style="color: #991B1B;">{{ $declinedOffers ?? 0 }}</div>
                    <div class="stat-label" style="color: #B91C1C; font-weight: 600; margin-top: 8px;">Declined Offers</div>
                    <div class="stat-subtext" style="color: #DC2626; font-size: 13px; margin-top: 4px;">Not accepted</div>
                </div>
                <div class="stat-icon" style="background: rgba(239, 68, 68, 0.2);">
                    <i data-lucide="x-circle" style="color: #EF4444;"></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($totalOfferValue ?? 0) !!}</div>
                    <div class="stat-label" style="color: #B45309; font-weight: 600; margin-top: 8px;">Total Offer Value</div>
                    <div class="stat-subtext" style="color: #D97706; font-size: 13px; margin-top: 4px;">All offers combined</div>
                </div>
                <div class="stat-icon" style="background: rgba(245, 158, 11, 0.2);">
                    <i data-lucide="dollar-sign" style="color: #F59E0B;"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter Buttons -->
    <div class="filter-buttons">
        <a href="{{ route('profile.sponsorships', ['status' => 'all']) }}" 
           class="filter-btn {{ ($statusFilter ?? 'all') === 'all' ? 'active' : '' }}">
            All Offers
        </a>
        <a href="{{ route('profile.sponsorships', ['status' => 'pending']) }}" 
           class="filter-btn {{ ($statusFilter ?? '') === 'pending' ? 'active' : '' }}">
            Pending
        </a>
        <a href="{{ route('profile.sponsorships', ['status' => 'accepted']) }}" 
           class="filter-btn {{ ($statusFilter ?? '') === 'accepted' ? 'active' : '' }}">
            Accepted
        </a>
        <a href="{{ route('profile.sponsorships', ['status' => 'declined']) }}" 
           class="filter-btn {{ ($statusFilter ?? '') === 'declined' ? 'active' : '' }}">
            Declined
        </a>
        <a href="{{ route('profile.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'));
                
                // Generate avatar initials
                $beneficiaryName = $sponsorship->beneficiary ? $sponsorship->beneficiary->full_name : 'Unknown';
                $initials = collect(explode(' ', $beneficiaryName))->map(function($word) {
                    return strtoupper(substr($word, 0, 1));
                })->take(2)->join('');
                
                // Random color for avatar
                $colors = ['#3b82f6', '#8b5cf6', '#10b981', '#f59e0b', '#ef4444', '#ec4899'];
                $avatarColor = $colors[($sponsorship->id % 6)];
                
                // Get beneficiary sport and organization
                $beneficiary = $sponsorship->beneficiary;
                $sport = 'N/A';
                $organization = $sponsorship->team_organization ?? 'Independent';
                
                if ($beneficiary) {
                    $primarySport = $beneficiary->sports->first();
                    $sport = $primarySport ? $primarySport->sport->title : 'N/A';
                    if ($sponsorship->beneficiary_type === 'team' && $sponsorship->team_organization) {
                        $organization = $sponsorship->team_organization;
                    } elseif ($beneficiary->teamProfile && $beneficiary->teamProfile->organization_name) {
                        $organization = $beneficiary->teamProfile->organization_name;
                    }
                }
                
                // Format duration
                $durationMonths = $sponsorship->duration ?? 12;
                $duration = $durationMonths . ' months';
                
                // 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];
                }
                
                // Main title from offer_title, fallback to offer type
                $offerTypeMainTitle = $sponsorship->offer_title ?? $offerTypeSubtitle;
                
                // Format dates
                $sentDate = $sponsorship->created_at ? \App\Helpers\Helper::showdate($sponsorship->created_at, false) : 'N/A';
                
                // Get expiration date - check both expires_at and offer_expire_in
                $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) 
                        ? \App\Helpers\Helper::showdate($sponsorship->offer_expire_in, false) 
                        : \App\Helpers\Helper::showdate(\Carbon\Carbon::parse($sponsorship->offer_expire_in), false);
                }
                
                // Get accepted/declined date from activities
                $acceptedDate = null;
                $declinedDate = null;
                if ($sponsorship->activities) {
                    $acceptedActivity = $sponsorship->activities->where('activity_type', 'offer_accepted')->first();
                    if ($acceptedActivity) {
                        $acceptedDate = \App\Helpers\Helper::showdate($acceptedActivity->created_at, false);
                    }
                    $declinedActivity = $sponsorship->activities->where('activity_type', 'offer_rejected')->first();
                    if ($declinedActivity) {
                        $declinedDate = \App\Helpers\Helper::showdate($declinedActivity->created_at, false);
                    }
                }
                
                // View count
                $viewCount = $sponsorship->view_count ?? 0;
            @endphp
            
            <div class="offer-card {{ $displayStatus === 'declined' ? 'declined-card' : '' }}">
                <!-- Card Header -->
                <div class="offer-card-header">
                    <div class="offer-card-avatar" style="background-color: {{ $avatarColor }};">
                        {{ $initials }}
                    </div>
                    <div class="offer-card-info">
                        <div class="offer-card-name">{{ $beneficiaryName }}</div>
                        <div class="offer-card-meta">{{ $sport }} • {{ $organization }}</div>
                    </div>
                    <div class="offer-card-status {{ $displayStatus }}">
                        @if($displayStatus === 'pending')
                            <i data-lucide="clock" class="offer-card-status-icon" style="color: #f59e0b;"></i>
                            <span class="offer-card-status-text">Pending</span>
                        @elseif($displayStatus === 'withdrawn')
                            <i data-lucide="x-circle" class="offer-card-status-icon" style="color: #EF4444;"></i>
                            <span class="offer-card-status-text">Withdrawn</span>
                        @elseif($displayStatus === 'active')
                            <i data-lucide="check-circle" class="offer-card-status-icon" style="color: #10b981;"></i>
                            <span class="offer-card-status-text">Accepted</span>
                        @elseif($displayStatus === 'declined')
                            <i data-lucide="x-circle" class="offer-card-status-icon" style="color: #EF4444;"></i>
                            <span class="offer-card-status-text">Declined</span>
                        @elseif($displayStatus === 'expired')
                            <i data-lucide="clock" class="offer-card-status-icon" style="color: #6b7280;"></i>
                            <span class="offer-card-status-text">Expired</span>
                        @endif
                    </div>
                </div>
                
                <!-- Offer Type -->
                <div class="offer-card-type">
                    <div class="offer-card-type-title">{{ $offerTypeMainTitle }}</div>
                    <div class="offer-card-type-subtitle">{{ $offerTypeSubtitle }}</div>
                </div>
                
                <!-- Offer Details Row (Value, Duration, Views) -->
                <div class="offer-card-details">
                    <div class="offer-card-detail-item">
                        <i data-lucide="dollar-sign" class="detail-icon"></i>
                        <span class="offer-card-detail-value">{!! \App\Helpers\Helper::price($sponsorship->funding_amount, $sponsorship->currency ?? 'USD') !!}</span>
                    </div>
                    <div class="offer-card-detail-item">
                        <i data-lucide="clock" class="detail-icon"></i>
                        <span class="offer-card-detail-value">{{ $duration }}</span>
                    </div>
                    <div class="offer-card-detail-item">
                        <i data-lucide="eye" class="detail-icon"></i>
                        <span class="offer-card-detail-value">{{ $viewCount }} views</span>
                    </div>
                </div>
                
                <!-- Dates Row (Sent and Expires) -->
                <div class="offer-card-meta-row">
                    <div class="offer-card-sent-date">
                        Sent: {{ $sentDate }}
                    </div>
                    @if($expiresDate)
                        <div class="offer-card-status-date expires">
                            @if($displayStatus === 'expired')
                                Expired: {{ $expiresDate }}
                            @else
                                Expires: {{ $expiresDate }}
                            @endif
                        </div>
                    @elseif($acceptedDate && $displayStatus === 'active')
                        <div class="offer-card-status-date accepted">
                            Accepted: {{ $acceptedDate }}
                        </div>
                    @elseif($declinedDate && $displayStatus === 'declined')
                        <div class="offer-card-status-date declined">
                            Declined: {{ $declinedDate }}
                        </div>
                    @endif
                </div>
                
                <!-- Action Buttons -->
                <div class="offer-card-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" onclick="openEditSponsorshipModal({{ $sponsorship->id }})" class="btn-edit">
                            <i data-lucide="pencil" class="btn-edit-icon"></i>
                        </button>
                    @elseif(($displayStatus === 'declined' || $displayStatus === 'expired') && !$sponsorship->is_withdrawal)
                        <a href="{{ route('profile.sponsorships.create', ['resend' => $sponsorship->id]) }}" class="btn-resend">
                            <i data-lucide="refresh-cw" class="btn-resend-icon"></i>
                        </a>
                    @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;">Create your first sponsorship offer to get started!</p>
                    <button type="button" onclick="openSponsorshipModal()" class="btn-create-campaign" style="margin-top: 12px;">
                        <i data-lucide="plus" class="btn-icon"></i>
                        Create New Offer
                    </button>
                </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>

<!-- Create Sponsorship Offer Modal -->
@include('front.accounts.sponsorships.add-edit-modal')

@endsection

@push('page_script')
<script src="https://cdn.jsdelivr.net/npm/lucide@latest/dist/umd/lucide.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
@if(\Config::get('settings.authorize_client_key') && \Config::get('settings.authorize_login_id'))
<script src="https://{{ (\Config::get('settings.authorize_env') == 'sandbox' || \Config::get('settings.authorize_env') == 1) ? 'jstest' : 'js' }}.authorize.net/v1/Accept.js"></script>
@endif
<script>
// Set configuration for sponsorship-offer.js
window.SPONSORSHIP_CONFIG = {
    autocompleteUrl: '{{ route("profile.sponsorships.autocomplete") }}',
    clientKey: '{{ \Config::get("settings.authorize_client_key") }}',
    apiLoginID: '{{ \Config::get("settings.authorize_login_id") }}'
};
</script>
<script src="{{ asset('front/assets/js/sponsorship-offer.js') }}"></script>
@endpush