@extends('frontend.frontend-page-master')

@section('site-title')
{{ $seller->name }} - {{ __('Prestataire') }} | {{ get_static_option('site_title') }}
@endsection

@section('page-meta-data')
@php
    $metaTitle = $seller->name . ' - ' . __('Prestataire professionnel');
    $metaDescription = Str::limit(strip_tags($seller->about ?? __('Prestataire professionnel sur') . ' ' . get_static_option('site_title')), 160);
    $canonicalUrl = route('about.seller.profile', $seller->username);
    $ogImage = $seller->image ? (get_attachment_image_by_id($seller->image)['img_url'] ?? '') : '';
@endphp
<title>{{ $metaTitle }}</title>
<meta name="description" content="{{ $metaDescription }}">
{{-- Robots tag géré globalement par header.blade.php via ALLOW_INDEXING --}}
<link rel="canonical" href="{{ $canonicalUrl }}">
<meta property="og:type" content="profile">
<meta property="og:url" content="{{ $canonicalUrl }}">
<meta property="og:title" content="{{ $metaTitle }}">
<meta property="og:description" content="{{ $metaDescription }}">
@if($ogImage)
<meta property="og:image" content="{{ $ogImage }}">
@endif
<meta property="og:site_name" content="{{ get_static_option('site_title') }}">
{{-- Schema.org JSON-LD for Seller Profile --}}
@include('frontend.partials.seo.schema-seller')
@endsection

@section('content')
<div class="seller-profile-page">
    <!-- Hero Section -->
    <div class="profile-hero">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-8">
                    <div class="profile-header">
                        <div class="profile-avatar-wrapper">
                            <div class="profile-avatar">
                                @if($seller->image)
                                    {!! render_image_markup_by_attachment_id($seller->image, '', 'profile-img') !!}
                                @else
                                    <div class="avatar-placeholder">
                                        <i class="las la-user"></i>
                                    </div>
                                @endif
                            </div>
                            @if(optional($seller->sellerVerify)->status == 1)
                            <span class="verified-badge" title="{{ __('Profil verifie') }}">
                                <i class="las la-check"></i>
                            </span>
                            @endif
                        </div>
                        <div class="profile-info">
                            <h1 class="profile-name">{{ $seller->name }}</h1>

                            <!-- Location -->
                            @if($seller->city || $seller->address)
                            <p class="profile-location">
                                <i class="las la-map-marker"></i>
                                {{ optional($seller->city)->service_city }}{{ $seller->address ? ', ' . $seller->address : '' }}
                            </p>
                            @endif

                            <!-- Rating -->
                            <div class="profile-rating">
                                <div class="stars">
                                    @for($i = 1; $i <= 5; $i++)
                                        @if($i <= round($seller_rating ?? 0))
                                            <i class="las la-star filled"></i>
                                        @else
                                            <i class="las la-star"></i>
                                        @endif
                                    @endfor
                                </div>
                                <span class="rating-text">
                                    {{ number_format($seller_rating ?? 0, 1) }}
                                    <span class="reviews-count">({{ $reviews_count }} {{ __('avis') }})</span>
                                </span>
                            </div>

                            <!-- Categories -->
                            @if($categories->count() > 0)
                            <div class="profile-categories">
                                @foreach($categories as $category)
                                <a href="{{ route('service.list.category', $category->slug) }}" class="category-tag">
                                    {{ $category->name }}
                                </a>
                                @endforeach
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="profile-cta-card">
                        @if($seller->hourly_rate)
                        <div class="price-info">
                            <span class="price-label">{{ __('Tarif horaire') }}</span>
                            <span class="price-amount">{{ amount_with_currency_symbol($seller->hourly_rate) }}/h</span>
                        </div>
                        @endif
                        <a href="{{ route('buyer.service-requests.create', ['seller' => $seller->id]) }}" class="cmn-btn btn-bg-1 btn-block">
                            <i class="las la-paper-plane"></i> {{ __('Demander un service') }}
                        </a>

                        @if(moduleExists('LiveChat'))
                            @if(Auth::check() && Auth::user()->user_type == 1)
                            <a href="{{ route('buyer.live.chat') }}?user_id={{ $seller->id }}" class="cmn-btn btn-outline-1 btn-block mt-3">
                                <i class="las la-comment"></i> {{ __('Envoyer un message') }}
                            </a>
                            @elseif(!Auth::check())
                            <a href="{{ route('user.login') }}?redirect={{ urlencode(route('buyer.live.chat') . '?user_id=' . $seller->id) }}" class="cmn-btn btn-outline-1 btn-block mt-3">
                                <i class="las la-comment"></i> {{ __('Envoyer un message') }}
                            </a>
                            @endif
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Stats Section -->
    <div class="profile-stats">
        <div class="container">
            <div class="stats-grid">
                <div class="stat-item">
                    <div class="stat-icon"><i class="las la-calendar-check"></i></div>
                    <div class="stat-content">
                        <span class="stat-value">{{ Carbon\Carbon::parse($seller_since->created_at)->diffForHumans(null, true) }}</span>
                        <span class="stat-label">{{ __('sur Servylo') }}</span>
                    </div>
                </div>
                <div class="stat-item">
                    <div class="stat-icon"><i class="las la-tasks"></i></div>
                    <div class="stat-content">
                        <span class="stat-value">{{ $completed_order + $accepted_offers }}</span>
                        <span class="stat-label">{{ __('missions realisees') }}</span>
                    </div>
                </div>
                <div class="stat-item">
                    <div class="stat-icon"><i class="las la-star"></i></div>
                    <div class="stat-content">
                        <span class="stat-value">{{ ceil($seller_rating_percentage_value ?? 0) }}%</span>
                        <span class="stat-label">{{ __('satisfaction') }}</span>
                    </div>
                </div>
                <div class="stat-item">
                    <div class="stat-icon"><i class="las la-comment-dots"></i></div>
                    <div class="stat-content">
                        <span class="stat-value">{{ $reviews_count }}</span>
                        <span class="stat-label">{{ __('avis clients') }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="profile-content padding-top-50 padding-bottom-100">
        <div class="container">
            <div class="row">
                <!-- Left Column - About & Details -->
                <div class="col-lg-8">
                    <!-- About Section -->
                    <div class="profile-section">
                        <h2 class="section-title"><i class="las la-user"></i> {{ __('A propos') }}</h2>
                        <div class="about-content">
                            @if($seller->about)
                                {!! nl2br(e($seller->about)) !!}
                            @else
                                <p class="text-muted">{{ __('Ce prestataire n\'a pas encore ajoute de description.') }}</p>
                            @endif
                        </div>
                    </div>

                    <!-- Availability Section -->
                    @php
                        $availability = $seller->availability;
                        $hasAvailability = !empty($availability) && is_array($availability) && count($availability) > 0;
                        $daysMap = [
                            'monday' => 'Lundi',
                            'tuesday' => 'Mardi',
                            'wednesday' => 'Mercredi',
                            'thursday' => 'Jeudi',
                            'friday' => 'Vendredi',
                            'saturday' => 'Samedi',
                            'sunday' => 'Dimanche',
                            'lundi' => 'Lundi',
                            'mardi' => 'Mardi',
                            'mercredi' => 'Mercredi',
                            'jeudi' => 'Jeudi',
                            'vendredi' => 'Vendredi',
                            'samedi' => 'Samedi',
                            'dimanche' => 'Dimanche',
                        ];
                    @endphp
                    @if($hasAvailability)
                    <div class="profile-section">
                        <h2 class="section-title"><i class="las la-clock"></i> {{ __('Disponibilites') }}</h2>
                        <div class="availability-grid">
                            @foreach($availability as $day)
                                @if(is_string($day))
                                <span class="availability-day">
                                    <i class="las la-check-circle"></i> {{ $daysMap[strtolower($day)] ?? ucfirst($day) }}
                                </span>
                                @endif
                            @endforeach
                        </div>
                    </div>
                    @endif

                    <!-- Reviews Section -->
                    <div class="profile-section">
                        <h2 class="section-title"><i class="las la-star"></i> {{ __('Avis clients') }} ({{ $reviews_count }})</h2>

                        @if($reviews->count() > 0)
                        <div class="reviews-list">
                            @foreach($reviews as $review)
                            <div class="review-card">
                                <div class="review-header">
                                    <div class="reviewer-avatar">
                                        @if(optional($review->buyer)->image)
                                            {!! render_image_markup_by_attachment_id(optional($review->buyer)->image, '', 'reviewer-img') !!}
                                        @else
                                            <div class="avatar-placeholder-sm">
                                                <i class="las la-user"></i>
                                            </div>
                                        @endif
                                    </div>
                                    <div class="reviewer-info">
                                        <h4 class="reviewer-name">{{ $review->name ?? optional($review->buyer)->name ?? __('Client') }}</h4>
                                        <div class="review-meta">
                                            <div class="review-stars">
                                                @for($i = 1; $i <= 5; $i++)
                                                    @if($i <= $review->rating)
                                                        <i class="las la-star filled"></i>
                                                    @else
                                                        <i class="las la-star"></i>
                                                    @endif
                                                @endfor
                                            </div>
                                            <span class="review-date">{{ optional($review->created_at)->diffForHumans() }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="review-content">
                                    <p>{{ $review->message }}</p>
                                </div>
                            </div>
                            @endforeach
                        </div>

                        @if($reviews->hasPages())
                        <div class="pagination-wrapper margin-top-30">
                            {!! $reviews->links() !!}
                        </div>
                        @endif
                        @else
                        <div class="no-reviews">
                            <i class="las la-comment-slash"></i>
                            <p>{{ __('Aucun avis pour le moment.') }}</p>
                        </div>
                        @endif
                    </div>
                </div>

                <!-- Right Column - Sidebar -->
                <div class="col-lg-4">
                    <!-- Contact Card -->
                    <div class="sidebar-card">
                        <h3 class="card-title">{{ __('Contacter ce prestataire') }}</h3>
                        <a href="{{ route('buyer.service-requests.create', ['seller' => $seller->id]) }}" class="cmn-btn btn-bg-1 btn-block">
                            <i class="las la-paper-plane"></i> {{ __('Demander un service') }}
                        </a>
                        <p class="card-note">{{ __('Decrivez votre besoin et recevez une offre personnalisee.') }}</p>
                    </div>

                    <!-- Info Card -->
                    <div class="sidebar-card">
                        <h3 class="card-title">{{ __('Informations') }}</h3>
                        <ul class="info-list">
                            @if($seller->city)
                            <li>
                                <i class="las la-map-marker"></i>
                                <span>{{ optional($seller->city)->service_city }}</span>
                            </li>
                            @endif
                            @if($seller->phone)
                            <li>
                                <i class="las la-phone"></i>
                                <a href="tel:{{ preg_replace('/[^0-9+]/', '', $seller->phone) }}" class="info-link">{{ $seller->phone }}</a>
                            </li>
                            @endif
                            <li>
                                <i class="las la-calendar"></i>
                                <span>{{ __('Membre depuis') }} {{ Carbon\Carbon::parse($seller_since->created_at)->format('M Y') }}</span>
                            </li>
                            @if($seller->experience)
                            <li>
                                <i class="las la-briefcase"></i>
                                <span>{{ $seller->experience }} {{ __('ans d\'experience') }}</span>
                            </li>
                            @endif
                        </ul>
                    </div>

                    <!-- Social Links -->
                    @if($seller->fb_url || $seller->tw_url || $seller->li_url || $seller->in_url)
                    <div class="sidebar-card">
                        <h3 class="card-title">{{ __('Reseaux sociaux') }}</h3>
                        <div class="social-links">
                            @if($seller->fb_url)<a href="{{ $seller->fb_url }}" target="_blank" class="social-link facebook"><i class="lab la-facebook-f"></i></a>@endif
                            @if($seller->tw_url)<a href="{{ $seller->tw_url }}" target="_blank" class="social-link twitter"><i class="lab la-twitter"></i></a>@endif
                            @if($seller->li_url)<a href="{{ $seller->li_url }}" target="_blank" class="social-link linkedin"><i class="lab la-linkedin-in"></i></a>@endif
                            @if($seller->in_url)<a href="{{ $seller->in_url }}" target="_blank" class="social-link instagram"><i class="lab la-instagram"></i></a>@endif
                            @if($seller->yo_url)<a href="{{ $seller->yo_url }}" target="_blank" class="social-link youtube"><i class="lab la-youtube"></i></a>@endif
                        </div>
                    </div>
                    @endif

                    <!-- Categories Card -->
                    @if($categories->count() > 0)
                    <div class="sidebar-card">
                        <h3 class="card-title">{{ __('Domaines d\'intervention') }}</h3>
                        <div class="categories-list">
                            @foreach($categories as $category)
                            <a href="{{ route('service.list.category', $category->slug) }}" class="category-link">
                                <i class="las la-angle-right"></i> {{ $category->name }}
                            </a>
                            @endforeach
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('style')
<style>
/* Profile Hero */
.profile-hero {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 3rem 0;
}

.profile-header {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

.profile-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
}

.profile-avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.profile-avatar img,
.profile-avatar .profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #8B1538 0%, #c62828 100%);
    color: #fff;
    font-size: 4rem;
}

.verified-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: #8B1538;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    border: 3px solid #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.profile-info {
    flex-grow: 1;
}

.profile-name {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
}

.profile-location {
    color: #666;
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.profile-location i {
    color: #8B1538;
    margin-right: 5px;
}

.profile-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
}

.profile-rating .stars {
    display: flex;
    gap: 2px;
}

.profile-rating .stars i {
    color: #ddd;
    font-size: 1.2rem;
}

.profile-rating .stars i.filled {
    color: #ffc107;
}

.rating-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}

.reviews-count {
    font-weight: 400;
    color: #666;
}

.profile-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.category-tag {
    display: inline-block;
    padding: 6px 14px;
    background: #fff;
    border-radius: 20px;
    font-size: 0.85rem;
    color: #8B1538;
    text-decoration: none;
    border: 1px solid #8B1538;
    transition: all 0.3s ease;
}

.category-tag:hover {
    background: #8B1538;
    color: #fff;
}

/* CTA Card */
.profile-cta-card {
    background: #fff;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.price-info {
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
}

.price-label {
    display: block;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 0.25rem;
}

.price-amount {
    font-size: 1.75rem;
    font-weight: 700;
    color: #8B1538;
}

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

/* Stats Section */
.profile-stats {
    background: #fff;
    padding: 1.5rem 0;
    border-bottom: 1px solid #eee;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #8B1538 0%, #c62828 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #333;
}

.stat-label {
    font-size: 0.85rem;
    color: #666;
}

/* Profile Content */
.profile-section {
    background: #fff;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
    margin-bottom: 1.5rem;
}

.section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-title i {
    color: #8B1538;
}

.about-content {
    color: #555;
    line-height: 1.8;
}

/* Availability */
.availability-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.availability-day {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #fdf2f4;
    border-radius: 8px;
    color: #8B1538;
    font-size: 0.9rem;
}

.availability-day i {
    font-size: 1rem;
}

/* Reviews */
.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.review-card {
    padding: 1.25rem;
    background: #f8f9fa;
    border-radius: 10px;
}

.review-header {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.reviewer-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.reviewer-avatar img,
.reviewer-avatar .reviewer-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder-sm {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ddd;
    color: #888;
    font-size: 1.5rem;
}

.reviewer-name {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.25rem;
}

.review-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.review-stars i {
    color: #ddd;
    font-size: 0.9rem;
}

.review-stars i.filled {
    color: #ffc107;
}

.review-date {
    font-size: 0.8rem;
    color: #888;
}

.review-content p {
    color: #555;
    line-height: 1.6;
    margin: 0;
}

.no-reviews {
    text-align: center;
    padding: 2rem;
    color: #888;
}

.no-reviews i {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

/* Sidebar Cards */
.sidebar-card {
    background: #fff;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
    margin-bottom: 1.5rem;
}

.card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #eee;
}

.card-note {
    font-size: 0.85rem;
    color: #666;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 0;
}

.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f0f0f0;
    color: #555;
}

.info-list li:last-child {
    border-bottom: none;
}

.info-list li i {
    color: #8B1538;
    font-size: 1.2rem;
    width: 24px;
}

.info-link {
    color: #8B1538;
    text-decoration: none;
    transition: all 0.3s ease;
}

.info-link:hover {
    color: #6b1029;
    text-decoration: underline;
}

/* Social Links */
.social-links {
    display: flex;
    gap: 0.75rem;
}

.social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.social-link:hover {
    transform: translateY(-3px);
    color: #fff;
}

.social-link.facebook { background: #1877f2; }
.social-link.twitter { background: #1da1f2; }
.social-link.linkedin { background: #0a66c2; }
.social-link.instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.social-link.youtube { background: #ff0000; }

/* Categories List */
.categories-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.category-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.5rem 0;
    color: #555;
    text-decoration: none;
    transition: all 0.3s ease;
}

.category-link:hover {
    color: #8B1538;
    padding-left: 5px;
}

.category-link i {
    color: #8B1538;
}

/* Responsive */
@media (max-width: 991px) {
    .profile-header {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .profile-categories {
        justify-content: center;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .profile-cta-card {
        margin-top: 2rem;
    }
}

@media (max-width: 575px) {
    .profile-avatar {
        width: 120px;
        height: 120px;
    }

    .profile-name {
        font-size: 1.5rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .stat-item {
        justify-content: center;
    }
}
</style>
@endsection