@extends('layouts.prestataire')

@section('title', 'Mes propositions')

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

@section('content')
<div class="my-responses-container">
    
    {{-- En-tête --}}
    <div class="page-header">
        <h1>Mes propositions</h1>
        <p class="page-subtitle">Suivez l'évolution de toutes vos propositions envoyées</p>
    </div>

    {{-- Stats --}}
    <div class="responses-stats">
        <div class="stat-card">
            <div class="stat-icon total">
                <i class="fas fa-paper-plane"></i>
            </div>
            <div class="stat-info">
                <span class="stat-value">{{ $responses->total() }}</span>
                <span class="stat-label">Total envoyées</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon pending">
                <i class="fas fa-clock"></i>
            </div>
            <div class="stat-info">
                <span class="stat-value">{{ $responses->where('status', 'pending')->count() }}</span>
                <span class="stat-label">En attente</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon viewed">
                <i class="fas fa-eye"></i>
            </div>
            <div class="stat-info">
                <span class="stat-value">{{ $responses->where('status', 'viewed')->count() }}</span>
                <span class="stat-label">Consulté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">{{ $responses->where('status', 'shortlisted')->count() }}</span>
                <span class="stat-label">Présélectionnées</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon accepted">
                <i class="fas fa-check-circle"></i>
            </div>
            <div class="stat-info">
                <span class="stat-value">{{ $responses->where('status', 'accepted')->count() }}</span>
                <span class="stat-label">Acceptées</span>
            </div>
        </div>
    </div>

    {{-- Filtres --}}
    <div class="responses-filters" x-data="{ status: '{{ request('status', 'all') }}' }">
        <div class="filter-tabs">
            <a href="{{ route('prestataire.tenders.my-responses') }}" 
               class="filter-tab {{ !request('status') || request('status') === 'all' ? 'active' : '' }}">
                Toutes
            </a>
            <a href="{{ route('prestataire.tenders.my-responses', ['status' => 'pending']) }}" 
               class="filter-tab {{ request('status') === 'pending' ? 'active' : '' }}">
                En attente
            </a>
            <a href="{{ route('prestataire.tenders.my-responses', ['status' => 'viewed']) }}" 
               class="filter-tab {{ request('status') === 'viewed' ? 'active' : '' }}">
                Consultées
            </a>
            <a href="{{ route('prestataire.tenders.my-responses', ['status' => 'shortlisted']) }}" 
               class="filter-tab {{ request('status') === 'shortlisted' ? 'active' : '' }}">
                <i class="fas fa-star"></i> Présélectionnées
            </a>
            <a href="{{ route('prestataire.tenders.my-responses', ['status' => 'accepted']) }}" 
               class="filter-tab {{ request('status') === 'accepted' ? 'active' : '' }}">
                <i class="fas fa-check"></i> Acceptées
            </a>
            <a href="{{ route('prestataire.tenders.my-responses', ['status' => 'rejected']) }}" 
               class="filter-tab {{ request('status') === 'rejected' ? 'active' : '' }}">
                Refusées
            </a>
        </div>
    </div>

    {{-- Liste des propositions --}}
    @if($responses->count() > 0)
        <div class="responses-list">
            @foreach($responses as $response)
                <div class="response-card">
                    <div class="response-status-bar {{ $response->status }}"></div>
                    
                    <div class="response-content">
                        <div class="response-main">
                            <div class="tender-info">
                                <h3>
                                    <a href="{{ route('prestataire.tenders.show', $response->tenderRequest) }}">
                                        {{ $response->tenderRequest->title }}
                                    </a>
                                </h3>
                                <div class="tender-meta">
                                    <span><i class="fas fa-map-marker-alt"></i> {{ $response->tenderRequest->city }}</span>
                                    <span><i class="fas fa-calendar"></i> {{ $response->tenderRequest->start_date ? $response->tenderRequest->start_date->format('d/m/Y') : 'Flexible' }}</span>
                                </div>
                            </div>

                            <div class="response-details">
                                <div class="response-price">
                                    @if($response->price_type === 'negotiable')
                                        <span class="price-value">À négocier</span>
                                    @else
                                        <span class="price-value">{{ number_format($response->proposed_price, 2) }} €</span>
                                        <span class="price-type">
                                            @switch($response->price_type)
                                                @case('hourly') /heure @break
                                                @case('daily') /jour @break
                                                @default prix fixe @break
                                            @endswitch
                                        </span>
                                    @endif
                                </div>

                                <div class="response-dates">
                                    <span class="sent-date">
                                        <i class="fas fa-paper-plane"></i>
                                        Envoyée {{ $response->created_at->diffForHumans() }}
                                    </span>
                                    @if($response->viewed_at)
                                        <span class="viewed-date">
                                            <i class="fas fa-eye"></i>
                                            Vue {{ $response->viewed_at->diffForHumans() }}
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="response-status-section">
                            <span class="status-badge {{ $response->status }}">
                                @switch($response->status)
                                    @case('pending')
                                        <i class="fas fa-clock"></i> En attente
                                        @break
                                    @case('viewed')
                                        <i class="fas fa-eye"></i> Consultée
                                        @break
                                    @case('shortlisted')
                                        <i class="fas fa-star"></i> Présélectionnée
                                        @break
                                    @case('accepted')
                                        <i class="fas fa-check-circle"></i> Acceptée
                                        @break
                                    @case('rejected')
                                        <i class="fas fa-times-circle"></i> Refusée
                                        @break
                                    @case('withdrawn')
                                        <i class="fas fa-undo"></i> Retirée
                                        @break
                                @endswitch
                            </span>

                            <div class="response-actions">
                                <a href="{{ route('prestataire.tenders.show', $response->tenderRequest) }}" 
                                   class="btn btn-sm btn-outline">
                                    <i class="fas fa-eye"></i>
                                    Voir
                                </a>
                                
                                @if(in_array($response->status, ['pending', 'viewed']))
                                    <a href="{{ route('prestataire.tenders.edit-response', [$response->tenderRequest, $response]) }}" 
                                       class="btn btn-sm btn-secondary">
                                        <i class="fas fa-edit"></i>
                                        Modifier
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>

                    {{-- Message du client si présélectionné ou accepté --}}
                    @if($response->client_message)
                        <div class="client-message">
                            <div class="message-header">
                                <i class="fas fa-comment"></i>
                                Message du client
                            </div>
                            <p>{{ $response->client_message }}</p>
                        </div>
                    @endif

                    {{-- Actions pour accepté --}}
                    @if($response->status === 'accepted')
                        <div class="accepted-actions">
                            <div class="success-banner">
                                <i class="fas fa-trophy"></i>
                                <span>Félicitations ! Votre proposition a été retenue.</span>
                            </div>
                            <div class="contact-options">
                                @if($response->tenderRequest->contact_phone)
                                    <a href="tel:{{ $response->tenderRequest->contact_phone }}" class="contact-btn phone">
                                        <i class="fas fa-phone"></i>
                                        Appeler le client
                                    </a>
                                @endif
                                <a href="{{ route('messaging.conversation', $response->tenderRequest->client_id) }}" class="contact-btn message">
                                    <i class="fas fa-comment"></i>
                                    Envoyer un message
                                </a>
                            </div>
                        </div>
                    @endif
                </div>
            @endforeach
        </div>

        {{-- Pagination --}}
        <div class="responses-pagination">
            {{ $responses->links() }}
        </div>
    @else
        {{-- État vide --}}
        <div class="empty-state">
            <div class="empty-icon">
                <i class="fas fa-inbox"></i>
            </div>
            <h3>Aucune proposition</h3>
            @if(request('status'))
                <p>Vous n'avez pas de proposition avec ce statut.</p>
                <a href="{{ route('prestataire.tenders.my-responses') }}" class="btn btn-secondary">
                    Voir toutes les propositions
                </a>
            @else
                <p>Vous n'avez pas encore envoyé de proposition.</p>
                <a href="{{ route('prestataire.tenders.index') }}" class="btn btn-primary">
                    <i class="fas fa-search"></i>
                    Parcourir les appels d'offres
                </a>
            @endif
        </div>
    @endif
</div>
@endsection

@section('styles')
<style>
/* My Responses Specific Styles */
.my-responses-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.page-header {
    margin-bottom: 2rem;
}

.page-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

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

/* Stats */
.responses-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (max-width: 992px) {
    .responses-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .responses-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stat-card {
    background: #fff;
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.stat-icon.total { background: #e0e7ff; color: #4f46e5; }
.stat-icon.pending { background: #fef3c7; color: #f59e0b; }
.stat-icon.viewed { background: #dbeafe; color: #3b82f6; }
.stat-icon.shortlisted { background: #fce7f3; color: #ec4899; }
.stat-icon.accepted { background: #d1fae5; color: #10b981; }

.stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
}

.stat-label {
    display: block;
    font-size: 0.8rem;
    color: #64748b;
}

/* Filter Tabs */
.responses-filters {
    margin-bottom: 1.5rem;
}

.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.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);
}

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

.response-card {
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    position: relative;
}

.response-status-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.response-status-bar.pending { background: #f59e0b; }
.response-status-bar.viewed { background: #3b82f6; }
.response-status-bar.shortlisted { background: #ec4899; }
.response-status-bar.accepted { background: #10b981; }
.response-status-bar.rejected { background: #ef4444; }
.response-status-bar.withdrawn { background: #94a3b8; }

.response-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.25rem 1.25rem 1.75rem;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .response-content {
        flex-direction: column;
        align-items: flex-start;
    }
}

.response-main {
    flex: 1;
    display: flex;
    gap: 2rem;
}

@media (max-width: 992px) {
    .response-main {
        flex-direction: column;
        gap: 1rem;
    }
}

.tender-info h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.tender-info h3 a {
    color: #1e293b;
    text-decoration: none;
}

.tender-info h3 a:hover {
    color: var(--primary-color, #8b5cf6);
}

.tender-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: #64748b;
}

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

.response-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.response-price {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.price-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color, #8b5cf6);
}

.price-type {
    font-size: 0.85rem;
    color: #64748b;
}

.response-dates {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: #94a3b8;
}

.response-dates span {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Status Section */
.response-status-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .response-status-section {
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }
}

.status-badge {
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-badge.pending { background: #fef3c7; color: #92400e; }
.status-badge.viewed { background: #dbeafe; color: #1e40af; }
.status-badge.shortlisted { background: #fce7f3; color: #9d174d; }
.status-badge.accepted { background: #d1fae5; color: #065f46; }
.status-badge.rejected { background: #fee2e2; color: #991b1b; }
.status-badge.withdrawn { background: #f1f5f9; color: #475569; }

.response-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-sm {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    border-radius: 0.5rem;
}

.btn-outline {
    background: transparent;
    border: 1px solid #e2e8f0;
    color: #64748b;
}

.btn-outline:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

/* Client Message */
.client-message {
    background: #f0f9ff;
    padding: 1rem 1.25rem 1rem 1.75rem;
    border-top: 1px solid #e0f2fe;
}

.message-header {
    font-size: 0.85rem;
    font-weight: 600;
    color: #0369a1;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.client-message p {
    color: #0c4a6e;
    font-size: 0.9rem;
}

/* Accepted Actions */
.accepted-actions {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(6, 182, 212, 0.1));
    padding: 1rem 1.25rem 1rem 1.75rem;
    border-top: 1px solid rgba(16, 185, 129, 0.2);
}

.success-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #065f46;
    font-weight: 500;
    margin-bottom: 1rem;
}

.success-banner i {
    color: #10b981;
    font-size: 1.25rem;
}

.contact-options {
    display: flex;
    gap: 0.75rem;
}

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

.contact-btn.phone {
    background: #10b981;
    color: #fff;
}

.contact-btn.phone:hover {
    background: #059669;
}

.contact-btn.message {
    background: #fff;
    color: #0369a1;
    border: 1px solid #bae6fd;
}

.contact-btn.message:hover {
    background: #f0f9ff;
}

/* 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;
}

.btn-primary {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    transition: all 0.2s;
}

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

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