@extends('layouts.prestataire')

@section('title', 'Appels d\'Offres Disponibles')

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

@section('content')
<div class="tenders-prestataire-container" x-data="tendersIndex()">
    
    {{-- Avertissement si pas de catégories --}}
    @if(isset($noCategoriesWarning) && $noCategoriesWarning)
        <div class="warning-banner" style="background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border: 2px solid #f59e0b; border-radius: 16px; padding: 24px; margin-bottom: 24px; display: flex; align-items: center; gap: 20px;">
            <div style="width: 60px; height: 60px; background: #f59e0b; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                <i class="fas fa-exclamation-triangle" style="font-size: 28px; color: white;"></i>
            </div>
            <div style="flex: 1;">
                <h3 style="font-size: 18px; font-weight: 700; color: #92400e; margin-bottom: 8px;">Complétez votre profil</h3>
                <p style="color: #a16207; margin-bottom: 12px;">Vous n'avez pas encore sélectionné de catégories de services. Ajoutez vos spécialités pour voir les appels d'offres correspondants.</p>
                <a href="{{ route('prestataire.profile.edit') }}" class="btn btn-primary" style="background: #f59e0b; border: none;">
                    <i class="fas fa-user-edit"></i>
                    Modifier mon profil
                </a>
            </div>
        </div>
    @endif
    
    {{-- Header --}}
    <div class="page-header">
        <div class="header-content">
            <div class="header-icon">
                <i class="fas fa-search-dollar"></i>
            </div>
            <div class="header-text">
                <h1>Appels d'Offres</h1>
                <p>Trouvez des missions correspondant à vos compétences</p>
            </div>
        </div>
        <div class="header-actions">
            <a href="{{ route('prestataire.tenders.my-responses') }}" class="btn btn-secondary">
                <i class="fas fa-paper-plane"></i>
                Mes propositions
            </a>
            <a href="{{ route('prestataire.tenders.invitations') }}" class="btn btn-outline">
                <i class="fas fa-bell"></i>
                Invitations
                @if($invitations->count() > 0)
                    <span class="badge">{{ $invitations->count() }}</span>
                @endif
            </a>
        </div>
    </div>

    {{-- Statistiques --}}
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon available">
                <i class="fas fa-bullhorn"></i>
            </div>
            <div class="stat-info">
                <span class="stat-value">{{ $stats['available'] }}</span>
                <span class="stat-label">Disponibles</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon responded">
                <i class="fas fa-paper-plane"></i>
            </div>
            <div class="stat-info">
                <span class="stat-value">{{ $stats['responded'] }}</span>
                <span class="stat-label">Propositions envoyées</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon shortlisted">
                <i class="fas fa-star"></i>
            </div>
            <div class="stat-info">
                <span class="stat-value">{{ $stats['shortlisted'] }}</span>
                <span class="stat-label">Présélections</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon accepted">
                <i class="fas fa-trophy"></i>
            </div>
            <div class="stat-info">
                <span class="stat-value">{{ $stats['accepted'] }}</span>
                <span class="stat-label">Missions obtenues</span>
            </div>
        </div>
    </div>

    {{-- Invitations récentes --}}
    @if($invitations->count() > 0)
        <div class="invitations-banner">
            <div class="banner-icon">
                <i class="fas fa-envelope-open-text"></i>
            </div>
            <div class="banner-content">
                <h3>{{ $invitations->count() }} nouvelle(s) invitation(s)</h3>
                <p>Des clients vous ont sélectionné pour leurs appels d'offres</p>
            </div>
            <div class="banner-tenders">
                @foreach($invitations as $invitation)
                    <a href="{{ route('prestataire.tenders.show', $invitation->tender) }}" class="mini-tender-card">
                        <span class="match-badge">{{ $invitation->match_score }}%</span>
                        <span class="tender-title">{{ Str::limit($invitation->tender->title, 30) }}</span>
                    </a>
                @endforeach
            </div>
        </div>
    @endif

    {{-- Filtres --}}
    <div class="filters-section">
        <div class="filters-row">
            <div class="filter-group">
                <label><i class="fas fa-map-marker-alt"></i> Ville</label>
                <input type="text" 
                       x-model="filters.city" 
                       @input.debounce.300ms="applyFilters"
                       placeholder="Rechercher une ville..."
                       class="filter-input">
            </div>
            <div class="filter-group">
                <label><i class="fas fa-tag"></i> Catégorie</label>
                <select x-model="filters.category" @change="applyFilters" class="filter-select">
                    <option value="">Toutes les catégories</option>
                    @if(isset($categories))
                        @foreach($categories as $cat)
                            <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                        @endforeach
                    @elseif(isset($prestataireCategories) && count($prestataireCategories) > 0)
                        @foreach(\App\Models\Category::whereIn('id', $prestataireCategories)->get() as $cat)
                            <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                        @endforeach
                    @endif
                </select>
            </div>
            <div class="filter-group">
                <label><i class="fas fa-euro-sign"></i> Budget min</label>
                <input type="number" 
                       x-model="filters.budget_min" 
                       @input.debounce.300ms="applyFilters"
                       placeholder="0 €"
                       class="filter-input">
            </div>
            <div class="filter-group">
                <label><i class="fas fa-fire"></i> Urgence</label>
                <select x-model="filters.urgency" @change="applyFilters" class="filter-select">
                    <option value="">Toutes</option>
                    <option value="urgent">Urgent</option>
                    <option value="high">Prioritaire</option>
                    <option value="normal">Normal</option>
                    <option value="low">Pas pressé</option>
                </select>
            </div>
        </div>

        <div class="sort-row">
            <span class="results-count">{{ method_exists($tenders, 'total') ? $tenders->total() : $tenders->count() }} appel(s) d'offre trouvé(s)</span>
            <div class="sort-options">
                <label>Trier par :</label>
                <select x-model="sort" @change="applyFilters" class="sort-select">
                    <option value="match">Meilleur match</option>
                    <option value="recent">Plus récent</option>
                    <option value="deadline">Deadline proche</option>
                    <option value="budget">Budget élevé</option>
                </select>
            </div>
        </div>
    </div>

    {{-- Liste des appels d'offres --}}
    @if($tenders->count() > 0)
        <div class="tenders-grid">
            @foreach($tenders as $tender)
                <div class="tender-card" 
                     data-urgency="{{ $tender->urgency }}"
                     x-data="{ matchScore: {{ $tender->match_score ?? 0 }} }">
                    
                    <div class="card-header">
                        <div class="match-score" :style="'--score: ' + matchScore + '%'">
                            <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="url(#gradient)"
                                      stroke-width="3"
                                      :stroke-dasharray="matchScore + ', 100'"/>
                                <defs>
                                    <linearGradient id="gradient">
                                        <stop offset="0%" stop-color="#10b981"/>
                                        <stop offset="100%" stop-color="#3b82f6"/>
                                    </linearGradient>
                                </defs>
                            </svg>
                            <span class="score-text" x-text="matchScore + '%'"></span>
                        </div>

                        <div class="card-badges">
                            @if($tender->urgency === 'urgent')
                                <span class="urgency-badge urgent">
                                    <i class="fas fa-exclamation-triangle"></i> Urgent
                                </span>
                            @elseif($tender->urgency === 'high')
                                <span class="urgency-badge high">
                                    <i class="fas fa-bolt"></i> Prioritaire
                                </span>
                            @endif
                            
                            @if($tender->responses_count >= $tender->max_responses * 0.8)
                                <span class="slots-badge warning">
                                    <i class="fas fa-users"></i> Peu de places
                                </span>
                            @endif
                        </div>
                    </div>

                    <div class="card-body">
                        <h3 class="tender-title">
                            <a href="{{ route('prestataire.tenders.show', $tender) }}">
                                {{ $tender->title }}
                            </a>
                        </h3>

                        <p class="tender-description">
                            {{ Str::limit($tender->description, 120) }}
                        </p>

                        <div class="tender-meta">
                            <div class="meta-item">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>{{ $tender->city }}</span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-calendar"></i>
                                <span>{{ $tender->start_date ? $tender->start_date->format('d/m') : 'Flexible' }}</span>
                            </div>
                            @if($tender->budget_visible && $tender->budget_max)
                                <div class="meta-item budget">
                                    <i class="fas fa-euro-sign"></i>
                                    <span>{{ number_format($tender->budget_max, 0) }} €</span>
                                </div>
                            @endif
                        </div>

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

                    <div class="card-footer">
                        <div class="footer-info">
                            <span class="time-ago">
                                <i class="fas fa-clock"></i>
                                {{ $tender->published_at ? $tender->published_at->diffForHumans() : '' }}
                            </span>
                            <span class="responses-info">
                                <i class="fas fa-comments"></i>
                                {{ $tender->responses_count }}/{{ $tender->max_responses }}
                            </span>
                        </div>
                        
                        <a href="{{ route('prestataire.tenders.show', $tender) }}" class="btn btn-primary btn-sm">
                            Voir détails
                            <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>

                    {{-- Indicateur d'expiration --}}
                    @if($tender->expires_at && $tender->expires_at->diffInDays() < 3)
                        <div class="expiring-soon">
                            <i class="fas fa-hourglass-half"></i>
                            Expire dans {{ $tender->expires_at->diffForHumans() }}
                        </div>
                    @endif
                </div>
            @endforeach
        </div>

        {{-- Pagination --}}
        @if(method_exists($tenders, 'links'))
        <div class="pagination-container">
            {{ $tenders->links() }}
        </div>
        @endif
    @else
        {{-- État vide --}}
        <div class="empty-state">
            <div class="empty-icon">
                <i class="fas fa-search"></i>
            </div>
            <h2>Aucun appel d'offre trouvé</h2>
            <p>Il n'y a pas d'appel d'offre correspondant à vos critères pour le moment.</p>
            <div class="empty-tips">
                <h4>Conseils :</h4>
                <ul>
                    <li>Élargissez vos critères de recherche</li>
                    <li>Ajoutez plus de catégories à votre profil</li>
                    <li>Activez les notifications pour être alerté</li>
                </ul>
            </div>
        </div>
    @endif
</div>

{{-- Alpine.js Component - MUST be defined BEFORE Alpine starts --}}
<script>
    // Define tendersIndex globally before Alpine initializes
    window.tendersIndex = function() {
        return {
            filters: {
                city: '{{ request('city', '') }}',
                category: '{{ request('category', '') }}',
                budget_min: '{{ request('budget_min', '') }}',
                urgency: '{{ request('urgency', '') }}'
            },
            sort: '{{ request('sort', 'match') }}',
            
            applyFilters() {
                const params = new URLSearchParams();
                
                if (this.filters.city) params.set('city', this.filters.city);
                if (this.filters.category) params.set('category', this.filters.category);
                if (this.filters.budget_min) params.set('budget_min', this.filters.budget_min);
                if (this.filters.urgency) params.set('urgency', this.filters.urgency);
                if (this.sort) params.set('sort', this.sort);
                
                window.location.href = '{{ route('prestataire.tenders.index') }}?' + params.toString();
            }
        }
    }
    // Also define without window prefix for direct x-data access
    function tendersIndex() {
        return window.tendersIndex();
    }
</script>
@endsection