@extends('layouts.prestataire')

@section('title', 'Invitations personnalisées')

@section('styles')
<link rel="stylesheet" href="{{ asset('css/tender-prestataire.css') }}">
@endsection

@section('content')
<div class="invitations-container">
    
    {{-- En-tête --}}
    <div class="page-header">
        <div class="header-content">
            <h1><i class="fas fa-envelope-open-text"></i> Invitations personnalisées</h1>
            <p class="page-subtitle">Appels d'offres correspondant à votre profil et vos compétences</p>
        </div>
        
        @if($unreadCount > 0)
            <div class="unread-badge">
                <span class="badge">{{ $unreadCount }}</span>
                nouvelles
            </div>
        @endif
    </div>

    {{-- Explication --}}
    <div class="info-banner">
        <i class="fas fa-magic"></i>
        <div>
            <strong>Comment ça marche ?</strong>
            <p>Notre algorithme analyse automatiquement les nouvelles demandes et vous invite lorsqu'elles correspondent à vos catégories, votre localisation et vos compétences.</p>
        </div>
    </div>

    {{-- Filtres --}}
    <div class="invitations-filters">
        <a href="{{ route('prestataire.tenders.invitations') }}" 
           class="filter-tab {{ !request('filter') || request('filter') === 'all' ? 'active' : '' }}">
            Toutes
        </a>
        <a href="{{ route('prestataire.tenders.invitations', ['filter' => 'unread']) }}" 
           class="filter-tab {{ request('filter') === 'unread' ? 'active' : '' }}">
            <span class="badge small">{{ $unreadCount }}</span>
            Non lues
        </a>
        <a href="{{ route('prestataire.tenders.invitations', ['filter' => 'high-match']) }}" 
           class="filter-tab {{ request('filter') === 'high-match' ? 'active' : '' }}">
            <i class="fas fa-star"></i>
            Haute correspondance (80%+)
        </a>
    </div>

    {{-- Liste des invitations --}}
    @if($invitations->count() > 0)
        <div class="invitations-list">
            @foreach($invitations as $invitation)
                <div class="invitation-card {{ !$invitation->read_at ? 'unread' : '' }}"
                     data-id="{{ $invitation->id }}">
                    
                    {{-- Indicateur nouveau --}}
                    @if(!$invitation->read_at)
                        <div class="new-indicator">
                            <span class="pulse"></span>
                            Nouveau
                        </div>
                    @endif

                    {{-- Score de match --}}
                    <div class="match-score-circle" style="--score: {{ $invitation->match_score }}%">
                        <svg viewBox="0 0 36 36">
                            <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                                  fill="none" stroke="#e2e8f0" stroke-width="3"/>
                            <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                                  fill="none" 
                                  stroke="{{ $invitation->match_score >= 80 ? '#10b981' : ($invitation->match_score >= 60 ? '#3b82f6' : '#f59e0b') }}"
                                  stroke-width="3"
                                  stroke-dasharray="{{ $invitation->match_score }}, 100"/>
                        </svg>
                        <span>{{ $invitation->match_score }}%</span>
                    </div>

                    {{-- Contenu principal --}}
                    <div class="invitation-content">
                        <div class="invitation-header">
                            <h3>{{ $invitation->tenderRequest->title }}</h3>
                            <span class="invitation-date">
                                <i class="fas fa-clock"></i>
                                {{ $invitation->created_at->diffForHumans() }}
                            </span>
                        </div>

                        <div class="invitation-meta">
                            <span><i class="fas fa-map-marker-alt"></i> {{ $invitation->tenderRequest->city }}</span>
                            <span><i class="fas fa-calendar"></i> {{ $invitation->tenderRequest->start_date ? $invitation->tenderRequest->start_date->format('d/m/Y') : 'Flexible' }}</span>
                            @if($invitation->tenderRequest->budget_visible)
                                <span><i class="fas fa-euro-sign"></i> {{ $invitation->tenderRequest->budget_display }}</span>
                            @endif
                        </div>

                        <div class="invitation-categories">
                            @foreach($invitation->tenderRequest->categories->take(3) as $category)
                                <span class="category-tag">{{ $category->name }}</span>
                            @endforeach
                            @if($invitation->tenderRequest->categories->count() > 3)
                                <span class="category-more">+{{ $invitation->tenderRequest->categories->count() - 3 }}</span>
                            @endif
                        </div>

                        {{-- Raisons du match --}}
                        <div class="match-reasons">
                            <span class="reason-label"><i class="fas fa-lightbulb"></i> Pourquoi cette invitation :</span>
                            <div class="reasons-list">
                                @if(array_intersect($invitation->tenderRequest->categories->pluck('id')->toArray(), auth()->user()->prestataire->categories->pluck('id')->toArray()))
                                    <span class="reason"><i class="fas fa-check"></i> Catégories correspondantes</span>
                                @endif
                                @if($invitation->match_score >= 60)
                                    <span class="reason"><i class="fas fa-check"></i> Localisation compatible</span>
                                @endif
                                @if($invitation->match_score >= 80)
                                    <span class="reason"><i class="fas fa-check"></i> Profil hautement recherché</span>
                                @endif
                            </div>
                        </div>
                    </div>

                    {{-- Actions --}}
                    <div class="invitation-actions">
                        <a href="{{ route('prestataire.tenders.show', $invitation->tenderRequest) }}" 
                           class="btn btn-primary"
                           @if(!$invitation->read_at)
                               onclick="markAsRead({{ $invitation->id }})"
                           @endif>
                            <i class="fas fa-eye"></i>
                            Voir la demande
                        </a>
                        
                        @if($invitation->tenderRequest->canReceiveResponse() && !$invitation->tenderRequest->responses()->where('prestataire_id', auth()->user()->prestataire->id)->exists())
                            <a href="{{ route('prestataire.tenders.respond', $invitation->tenderRequest) }}" 
                               class="btn btn-success"
                               @if(!$invitation->read_at)
                                   onclick="markAsRead({{ $invitation->id }})"
                               @endif>
                                <i class="fas fa-paper-plane"></i>
                                Répondre
                            </a>
                        @elseif($invitation->tenderRequest->responses()->where('prestataire_id', auth()->user()->prestataire->id)->exists())
                            <span class="already-responded">
                                <i class="fas fa-check-circle"></i>
                                Déjà répondu
                            </span>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Pagination --}}
        <div class="invitations-pagination">
            {{ $invitations->links() }}
        </div>
    @else
        {{-- État vide --}}
        <div class="empty-state">
            <div class="empty-icon">
                <i class="fas fa-envelope-open"></i>
            </div>
            <h3>Aucune invitation</h3>
            @if(request('filter') === 'unread')
                <p>Vous avez lu toutes vos invitations.</p>
                <a href="{{ route('prestataire.tenders.invitations') }}" class="btn btn-secondary">
                    Voir toutes les invitations
                </a>
            @elseif(request('filter') === 'high-match')
                <p>Aucune invitation à haute correspondance pour le moment.</p>
                <a href="{{ route('prestataire.tenders.invitations') }}" class="btn btn-secondary">
                    Voir toutes les invitations
                </a>
            @else
                <p>Vous n'avez pas encore d'invitation personnalisée.</p>
                <div class="empty-tips">
                    <h4>Conseils pour recevoir plus d'invitations :</h4>
                    <ul>
                        <li><i class="fas fa-check"></i> Complétez votre profil à 100%</li>
                        <li><i class="fas fa-check"></i> Ajoutez plus de catégories de services</li>
                        <li><i class="fas fa-check"></i> Précisez votre zone d'intervention</li>
                        <li><i class="fas fa-check"></i> Obtenez des avis positifs</li>
                    </ul>
                </div>
                <a href="{{ route('prestataire.profile.edit') }}" class="btn btn-primary">
                    <i class="fas fa-user-edit"></i>
                    Améliorer mon profil
                </a>
            @endif
        </div>
    @endif
</div>
@endsection

@section('scripts')
<script>
function markAsRead(invitationId) {
    fetch(`{{ url('prestataire/tenders/invitation') }}/${invitationId}/read`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        }
    });
}

// Marquer automatiquement comme lu après 3 secondes de visibilité
document.addEventListener('DOMContentLoaded', function() {
    const unreadCards = document.querySelectorAll('.invitation-card.unread');
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const card = entry.target;
                const id = card.dataset.id;
                
                setTimeout(() => {
                    if (card.classList.contains('unread')) {
                        markAsRead(id);
                        card.classList.remove('unread');
                        card.querySelector('.new-indicator')?.remove();
                    }
                }, 3000);
            }
        });
    }, { threshold: 0.5 });

    unreadCards.forEach(card => observer.observe(card));
});
</script>
@endsection

@section('styles')
<style>
/* Invitations Page Styles */
.invitations-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.page-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.page-header h1 i {
    color: var(--primary-color, #8b5cf6);
}

.page-subtitle {
    color: #64748b;
    font-size: 1rem;
    margin-top: 0.25rem;
}

.unread-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #64748b;
}

.unread-badge .badge {
    background: linear-gradient(135deg, #ef4444, #f97316);
    color: #fff;
    padding: 0.25rem 0.6rem;
    border-radius: 1rem;
    font-weight: 600;
    font-size: 0.85rem;
}

/* Info Banner */
.info-banner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    padding: 1.25rem;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.info-banner i {
    font-size: 1.5rem;
    color: var(--primary-color, #8b5cf6);
    margin-top: 0.25rem;
}

.info-banner strong {
    display: block;
    color: #4f46e5;
    margin-bottom: 0.25rem;
}

.info-banner p {
    color: #475569;
    font-size: 0.9rem;
    margin: 0;
}

/* Filter Tabs */
.invitations-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.5rem;
    background: #f8fafc;
    border-radius: 0.75rem;
}

.filter-tab {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    color: #64748b;
    text-decoration: none;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-tab:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.filter-tab.active {
    background: #fff;
    color: var(--primary-color, #8b5cf6);
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.filter-tab .badge.small {
    background: #ef4444;
    color: #fff;
    padding: 0.15rem 0.4rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
}

/* Invitation Cards */
.invitations-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.invitation-card {
    background: #fff;
    border-radius: 1rem;
    padding: 1.5rem;
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 1.5rem;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    position: relative;
    transition: all 0.2s;
}

.invitation-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.invitation-card.unread {
    border: 2px solid var(--primary-color, #8b5cf6);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.02), rgba(99, 102, 241, 0.02));
}

@media (max-width: 768px) {
    .invitation-card {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.new-indicator {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-color, #8b5cf6);
}

.new-indicator .pulse {
    width: 8px;
    height: 8px;
    background: var(--primary-color, #8b5cf6);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(139, 92, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
}

/* Match Score Circle */
.match-score-circle {
    width: 80px;
    height: 80px;
    position: relative;
}

@media (max-width: 768px) {
    .match-score-circle {
        margin: 0 auto;
    }
}

.match-score-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.match-score-circle > span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
}

/* Invitation Content */
.invitation-content {
    flex: 1;
}

.invitation-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.invitation-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.invitation-date {
    font-size: 0.8rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.invitation-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 0.75rem;
}

.invitation-meta span {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.invitation-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.category-tag {
    background: #f1f5f9;
    color: #475569;
    padding: 0.25rem 0.6rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
}

.category-more {
    background: #e2e8f0;
    color: #64748b;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
}

/* Match Reasons */
.match-reasons {
    padding-top: 0.75rem;
    border-top: 1px solid #f1f5f9;
}

.reason-label {
    font-size: 0.8rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
}

.reasons-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.reason {
    font-size: 0.75rem;
    color: #10b981;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Invitation Actions */
.invitation-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (max-width: 768px) {
    .invitation-actions {
        flex-direction: row;
    }
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: #fff;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.btn-success {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-secondary {
    background: #f1f5f9;
    color: #475569;
}

.btn-secondary:hover {
    background: #e2e8f0;
}

.already-responded {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #10b981;
    padding: 0.5rem;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: #fff;
    border-radius: 1rem;
}

.empty-icon {
    width: 80px;
    height: 80px;
    background: #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.empty-icon i {
    font-size: 2rem;
    color: #94a3b8;
}

.empty-state h3 {
    font-size: 1.25rem;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.empty-state p {
    color: #64748b;
    margin-bottom: 1.5rem;
}

.empty-tips {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
    text-align: left;
    display: inline-block;
}

.empty-tips h4 {
    font-size: 0.95rem;
    color: #1e293b;
    margin-bottom: 0.75rem;
}

.empty-tips ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.empty-tips li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #475569;
    padding: 0.35rem 0;
}

.empty-tips li i {
    color: #10b981;
}

/* Pagination */
.invitations-pagination {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}
</style>
@endsection