{% extends 'App::V2/base.html.twig' %}

{% set currentProfile = profileItem.profile is defined and profileItem.profile ? profileItem.profile : item.profile %}
{% set currentCategory = profileItem.category is defined and profileItem.category ? profileItem.category : item.category %}
{% set currentLocation = location|default(null) %}

{% set firstName %}
{% if currentProfile.user is defined and currentProfile.user and currentProfile.user.device == 'ANDROID' %}
{{ currentProfile.lastname|default('')|trim|upper }}
{% else %}
{{ currentProfile.firstname|default('')|trim|lower|capitalize }}
{% endif %}
{% endset %}

{% set lastName %}
{% if currentProfile.user is defined and currentProfile.user and currentProfile.user.device == 'ANDROID' %}
{{ currentProfile.firstname|default('')|trim|first|lower|capitalize }}
{% else %}
{{ currentProfile.lastname|default('')|trim|first|upper }}
{% endif %}
{% endset %}

{% set teacherName = (firstName ~ ' ' ~ lastName ~ '.')|trim %}
{% set city = currentProfile.city|default('') %}
{% set postalCode = currentProfile.department|default('') %}
{% set country = currentProfile.country|default('FR')|upper %}
{% set categoryName = currentCategory.name|default('Cours particuliers') %}
{% set categorySlug = currentCategory.slug|default('') %}
{% set isFormation = currentCategory.type is defined and currentCategory.type == 'formations' %}
{% set isCoach = categorySlug == 'coach-sportif' %}
{% set categoryKind = isFormation ? 'Formation' : (isCoach ? 'Séance' : 'Cours particuliers') %}
{% set dePrefix = categoryName|first|lower in ['a','e','i','o','u','h','é','è','ê','ë'] ? "d'" : 'de ' %}

{% set itemContent = item.content|default('')|trim %}
{% set profileContent = currentProfile.content|default('')|trim %}
{% set cleanContent = itemContent ?: profileContent %}
{% set bio = cleanContent ? (cleanContent|length > 220 ? cleanContent|slice(0, 220) ~ '...' : cleanContent) : 'Annonce de cours particuliers sur RueduProf.' %}
{% set longBio = cleanContent ?: 'Annonce de cours particuliers sur RueduProf.' %}

{% set avatar = (currentProfile.avatar is defined and currentProfile.avatar and currentProfile.avatar.path is defined and currentProfile.avatar.path)
    ? 'https://www.rueduprof.com/uploads/avatar/' ~ currentProfile.avatar.path
    : null
%}

{% set subjects = [] %}
{% set levels = [] %}
{% set modes = [] %}
{% set pricing = [] %}
{% set otherSubjects = [] %}
{% set priceFrom = null %}

{% for categoryItem in currentProfile.categories|default([]) %}
    {% if categoryItem.lang is not defined or categoryItem.lang == 'fr' %}
        {% if categoryItem.category is defined and categoryItem.category and categoryItem.category.name is defined and categoryItem.category.name and categoryItem.category.name not in subjects %}
            {% set subjects = subjects|merge([categoryItem.category.name]) %}
        {% endif %}

        {% if categoryItem.pricePerHour is defined and categoryItem.pricePerHour is not null %}
            {% if priceFrom is null or categoryItem.pricePerHour < priceFrom %}
                {% set priceFrom = categoryItem.pricePerHour %}
            {% endif %}
        {% endif %}

        {% if categoryItem.primaire is defined and categoryItem.primaire and 'Primaire' not in levels %}
            {% set levels = levels|merge(['Primaire']) %}
        {% endif %}
        {% if categoryItem.college is defined and categoryItem.college and 'Collège' not in levels %}
            {% set levels = levels|merge(['Collège']) %}
        {% endif %}
        {% if categoryItem.lycee is defined and categoryItem.lycee and 'Lycée' not in levels %}
            {% set levels = levels|merge(['Lycée']) %}
        {% endif %}
        {% if categoryItem.superieur is defined and categoryItem.superieur and 'Supérieur' not in levels %}
            {% set levels = levels|merge(['Supérieur']) %}
        {% endif %}

        {% if categoryItem.webcam is defined and categoryItem.webcam and 'En ligne' not in modes %}
            {% set modes = modes|merge(['En ligne']) %}
        {% endif %}
        {% if categoryItem.outPlace is defined and categoryItem.outPlace and 'À domicile' not in modes %}
            {% set modes = modes|merge(['À domicile']) %}
        {% endif %}
        {% if categoryItem.inPlace is defined and categoryItem.inPlace and 'Chez le professeur' not in modes %}
            {% set modes = modes|merge(['Chez le professeur']) %}
        {% endif %}

        {% set noteParts = [] %}
        {% if categoryItem.webcam is defined and categoryItem.webcam %}
            {% set noteParts = noteParts|merge(['En ligne']) %}
        {% endif %}
        {% if categoryItem.outPlace is defined and categoryItem.outPlace %}
            {% set noteParts = noteParts|merge(['À domicile']) %}
        {% endif %}
        {% if categoryItem.inPlace is defined and categoryItem.inPlace %}
            {% set noteParts = noteParts|merge(['Chez le professeur']) %}
        {% endif %}

        {% if categoryItem.category is defined and categoryItem.category and categoryItem.category.name is defined %}
            {% set pricing = pricing|merge([{
                'label': categoryItem.category.name,
                'slug': categoryItem.category.slug|default(''),
                'type': categoryItem.category.type|default(null),
                'price': (categoryItem.pricePerHour is defined and categoryItem.pricePerHour is not null) ? categoryItem.pricePerHour ~ '€ / h' : 'Sur demande',
                'description': categoryItem.content|default(''),
                'note': noteParts|join(' · '),
                'current': categoryItem.id is defined and profileItem.id is defined and categoryItem.id == profileItem.id
            }]) %}
        {% endif %}

        {% if categoryItem.id is defined and profileItem.id is defined and categoryItem.id != profileItem.id and categoryItem.category is defined and categoryItem.category %}
            {% set otherSubjects = otherSubjects|merge([categoryItem]) %}
        {% endif %}
    {% endif %}
{% endfor %}

{% set headline = categoryKind ~ ' ' ~ dePrefix ~ categoryName ~ (city ? ' à ' ~ city : '') %}
{% set heroTitle = categoryKind ~ ' ' ~ dePrefix ~ categoryName ~ ' avec ' ~ teacherName|trim %}
{% set heroMetaLocation = city ? (postalCode ? city ~ ' (' ~ postalCode ~ ')' : city) : postalCode %}

{% set zones = [] %}
{% if heroMetaLocation %}
    {% set zones = zones|merge([heroMetaLocation]) %}
{% endif %}
{% if currentLocation and currentLocation.slug is defined and currentLocation.slug == 'en-ligne' and 'En ligne' not in zones %}
    {% set zones = zones|merge(['En ligne']) %}
{% endif %}

{% set teacher = teacher|default({
    'first_name': firstName ?: 'Professeur',
    'last_name': lastName ?: '',
    'headline': headline,
    'city': heroMetaLocation,
    'price_from': priceFrom ?? 0,
    'rating': null,
    'reviews_count': 0,
    'students_count': 0,
    'response_time': null,
    'experience_years': null,
    'verified': false,
    'bio': bio,
    'long_bio': longBio,
    'avatar': avatar,
    'teaches': subjects,
    'levels': levels,
    'modes': modes,
    'zones': zones,
    'languages': country == 'FR' ? ['Français'] : [country],
    'badges': [],
    'highlights': [],
    'pricing': pricing,
    'availability': [],
    'reviews': [],
    'faq': []
}) %}

{% set seoTitle %}{{ categoryKind }} {{ dePrefix }}{{ categoryName }}{% if heroMetaLocation %} à {{ heroMetaLocation }}{% endif %} avec {{ teacherName|trim }}{% endset %}
{% set seoUrl %}https://www.rueduprof.com/{{ currentProfile.id ~ '/professeur-' ~ currentProfile.department ~ '-' ~ (currentProfile.firstname|myslugify) ~ '-' ~ (currentProfile.lastname|first|myslugify) ~ '/' }}{% endset %}
{% set seoDescription %}Découvrez la fiche {{ categoryKind|lower }} {{ dePrefix }}{{ categoryName }} de {{ teacherName|trim }}{% if item.pricePerHour is defined and item.pricePerHour is not null %}, à partir de {{ item.pricePerHour }}€ / h{% endif %}.{% endset %}

{% block title %}{{ seoTitle|trim }}{% endblock %}
{% block meta_title %}{{ seoTitle|trim|raw }}{% endblock %}
{% block meta_description %}{{ seoDescription|trim }}{% endblock %}
{% block canonical %}{{ seoUrl|trim }}{% endblock %}

{% block open_graph %}
    <meta property="og:title" content="{{ seoTitle|trim }} - RueduProf" />
    <meta property="og:description" content="{{ seoDescription|trim }}" />
    <meta property="og:url" content="{{ seoUrl|trim }}" />
    {% if teacher.avatar %}<meta property="og:image" content="{{ teacher.avatar }}" />{% endif %}
{% endblock %}

{% block twitter_card %}
    <meta name="twitter:title" content="{{ seoTitle|trim }} - RueduProf" />
    <meta name="twitter:description" content="{{ seoDescription|trim }}" />
    {% if teacher.avatar %}<meta name="twitter:image" content="{{ teacher.avatar }}" />{% endif %}
{% endblock %}

{% block snippet_json %}
    {% include 'App::schema/profile_category_show.html.twig' with {
        location: currentLocation,
        profileItem: profileItem,
        item: item
    } only %}
{% endblock %}

{% block body %}
<section class="prof-hero-section overflow-hidden">
    <div class="container-xxl py-4 py-lg-4">
        <nav aria-label="breadcrumb" class="mb-4">
            <ol class="breadcrumb small mb-0">
                <li class="breadcrumb-item"><a href="{{ app.request.getSchemeAndHttpHost() ~ path('homepage') }}" class="text-decoration-none">Accueil</a></li>
                <li class="breadcrumb-item"><a href="{{ app.request.getSchemeAndHttpHost() ~ path('app_home_page') }}" class="text-decoration-none">Cours particuliers</a></li>
                <li class="breadcrumb-item"><a href="{{ path('app_profile_user_show', { 'id': currentProfile.id, 'slug': 'professeur-' ~ currentProfile.department ~ '-' ~ currentProfile.firstname|myslugify ~ '-' ~ currentProfile.lastname|first|myslugify }) }}" class="text-decoration-none">{{ teacher.first_name }} {{ teacher.last_name|first }}.</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ categoryName }}</li>
            </ol>
        </nav>

        {% set flashes = app.session.flashbag.all() %}
        {% for type, messages in flashes %}
            {% for message in messages %}
                {% if type == 'success' %}
                    <section class="py-4 py-lg-5">
                        <div class="container">
                            <div class="success-message-card mx-auto text-center">
                                <div class="success-message-icon">
                                    <i class="bi bi-check2-circle"></i>
                                </div>
                                <span class="success-message-badge">Message envoyé</span>
                                <h2 class="h3 fw-bold mt-3 mb-2">Votre demande a bien été transmise</h2>
                                <p class="text-secondary mb-4 mx-auto success-message-text">{{ message }}</p>
                                <div class="success-message-points">
                                    <div class="success-message-point"><i class="bi bi-check-circle-fill"></i><span>Votre demande a été prise en compte</span></div>
                                    <div class="success-message-point"><i class="bi bi-chat-dots-fill"></i><span>Le professeur peut vous répondre rapidement</span></div>
                                    <div class="success-message-point"><i class="bi bi-shield-check"></i><span>Vos informations ont bien été transmises</span></div>
                                </div>
                            </div>
                        </div>
                    </section>
                {% else %}
                    <div class="alert alert-{{ type }} alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fermer"></button>
                    </div>
                {% endif %}
            {% endfor %}
        {% endfor %}

        <div class="row g-4 g-xl-5 align-items-start">
            <div class="col-lg-8">
                <div class="hero-shell p-3 p-md-4 p-xl-4">
                    <div class="d-flex flex-column flex-md-row gap-4 align-items-start">
                        <div class="teacher-avatar-wrap">
                            {% if teacher.avatar %}
                                <img src="{{ teacher.avatar }}" class="teacher-avatar" alt="{{ teacher.first_name }} {{ teacher.last_name|first }}.">
                            {% else %}
                                <div class="teacher-avatar teacher-avatar-fallback">
                                    <span>{{ teacher.first_name|slice(0,1) }}{{ teacher.last_name|slice(0,1) }}</span>
                                </div>
                            {% endif %}
                        </div>

                        <div class="flex-grow-1">
                            <div class="d-flex flex-wrap gap-2 mb-3">
                                <span class="badge text-bg-light border rounded-pill px-3 py-2 fw-semibold badge-soft">{{ categoryKind }}</span>
                                <span class="badge text-bg-light border rounded-pill px-3 py-2 fw-semibold badge-soft">{{ categoryName }}</span>
                                {% if teacher.verified %}
                                    <span class="badge rounded-pill badge-verified px-3 py-2"><i class="bi bi-patch-check-fill me-1"></i>Profil vérifié</span>
                                {% endif %}
                            </div>

                            <h1 class="display-5 fw-bold mb-2">{{ heroTitle }}</h1>
                            <p class="hero-headline fs-4 mb-3">{{ teacher.headline }}</p>

                            <div class="d-flex flex-wrap gap-3 meta-inline mb-4">
                                {% if teacher.city %}<span><i class="bi bi-geo-alt"></i>{{ teacher.city }}</span>{% endif %}
                                {% if item.pricePerHour is defined and item.pricePerHour is not null %}<span><i class="bi bi-cash-stack"></i>{{ item.pricePerHour }}€ / h</span>{% endif %}
                                <span><i class="bi bi-book"></i>{{ categoryName }}</span>
                            </div>

                            <p class="lead text-secondary-emphasis mb-4">{{ teacher.bio }}</p>

                            <div class="d-flex flex-wrap gap-2 mb-4">
                                {% for subject in teacher.teaches %}
                                    <span class="subject-pill {% if subject == categoryName %}subject-pill-muted{% endif %}">{{ subject }}</span>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <aside class="booking-card sticky-lg-top">
                    <div class="d-flex align-items-center justify-content-between mb-3">
                        <div>
                            <div class="small text-secondary">Tarif indicatif</div>
                            <div class="price-hero">{% if item.pricePerHour is defined and item.pricePerHour is not null %}{{ item.pricePerHour ~ '€ / h' }}{% else %}Sur demande{% endif %}</div>
                        </div>
                    </div>

                    <div class="row g-3 stats-row">
                        {% if item.pricePerHour is defined and item.pricePerHour is not null %}
                            <div class="col-6 col-md-4">
                                <div class="stat-card h-100">
                                    <div class="stat-value">{{ item.pricePerHour }}€</div>
                                    <div class="stat-label">pour cette matière</div>
                                </div>
                            </div>
                        {% endif %}
                        <div class="col-6 col-md-4">
                            <div class="stat-card h-100">
                                <div class="stat-value">{{ teacher.levels|length }}</div>
                                <div class="stat-label">niveaux couverts</div>
                            </div>
                        </div>
                        <div class="col-6 col-md-4">
                            <div class="stat-card h-100">
                                <div class="stat-value">{{ teacher.modes|length }}</div>
                                <div class="stat-label">modes de cours</div>
                            </div>
                        </div>
                    </div>

                    <div class="booking-trust mt-4 pt-4 border-top">
                        <div class="trust-item"><i class="bi bi-check2-circle"></i>Contact direct avec le professeur</div>
                        <div class="trust-item"><i class="bi bi-check2-circle"></i>Matière et besoin déjà contextualisés</div>
                    </div>
                </aside>
            </div>
        </div>
    </div>
</section>

<section class="py-4 py-lg-5" id="cours">
    <div class="container-xxl">
        <div class="row g-4 g-xl-5">
            <div class="col-lg-8">
                <div class="content-panel mb-4">
                    <div class="section-eyebrow">À propos</div>
                    <h2 class="section-title">{{ categoryKind }} {{ dePrefix }}{{ categoryName }}</h2>
                    <p class="mb-0 text-secondary">{{ longBio|raw|nl2br }}</p>
                </div>

                {% if profileContent and itemContent and itemContent != profileContent %}
                    <div class="content-panel mb-4">
                        <div class="section-eyebrow">Le professeur</div>
                        <h2 class="section-title">Présentation générale</h2>
                        <p class="mb-0 text-secondary">{{ profileContent|raw|nl2br }}</p>
                    </div>
                {% endif %}

                <div class="content-panel mb-4">
                    <div class="section-eyebrow">Informations clés</div>
                    <h2 class="section-title">Matière, niveaux et modalités</h2>
                    <div class="row g-3 mt-1">
                        <div class="col-md-6">
                            <div class="info-box h-100">
                                <div class="info-label">Matière principale</div>
                                <div class="d-flex flex-wrap gap-2">
                                    <span class="subject-pill subject-pill-muted">{{ categoryName }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-box h-100">
                                <div class="info-label">Niveaux</div>
                                <p class="mb-0">{{ teacher.levels is not empty ? teacher.levels|join(' · ') : 'Sur demande' }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-box h-100">
                                <div class="info-label">Lieu du cours</div>
                                <p class="mb-0">{{ teacher.modes is not empty ? teacher.modes|join(' · ') : 'À préciser' }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-box h-100">
                                <div class="info-label">Zones desservies</div>
                                <p class="mb-0">{{ teacher.zones is not empty ? teacher.zones|join(' · ') : 'À préciser' }}</p>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="info-box">
                                <div class="info-label">Autres matières</div>
                                <div class="d-flex flex-wrap gap-2">
                                    {% for subject in teacher.teaches %}
                                        <span class="subject-pill">{{ subject }}</span>
                                    {% else %}
                                        <span class="text-secondary">Aucune autre matière renseignée.</span>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="content-panel mb-4" id="tarifs-matieres">
                    <div class="section-eyebrow">Tarifs & matières</div>
                    <h2 class="section-title">Tarifs et autres matières de {{ teacher.first_name }} {{ teacher.last_name|first }}.</h2>

                    <div class="row g-3 mt-1">



                        {# Autres fiches matières #}
                        {% for otherItem in otherSubjects %}
                            <div class="col-12 col-md-6 col-xl-4">
                                <article class="pricing-card h-100 d-flex flex-column">
                                    <div class="d-flex justify-content-between align-items-start gap-3 mb-2">
                                        <div>
                                            <div class="pricing-name">{{ otherItem.category.name }}</div>
                                            <div class="pricing-price">
                                                {% if otherItem.pricePerHour %}
                                                    {{ otherItem.pricePerHour }}€ / h
                                                {% else %}
                                                    Sur demande
                                                {% endif %}
                                            </div>
                                        </div>

                                        <span class="subject-pill subject-pill-muted">
                                            {% if otherItem.category.type and otherItem.category.type == 'formations' %}
                                                Formation
                                            {% else %}
                                                Cours
                                            {% endif %}
                                        </span>
                                    </div>

                                    {% if otherItem.content %}
                                        <p class="text-secondary mb-3">
                                            {{ otherItem.content|length > 140 ? otherItem.content|slice(0, 140) ~ '...' : otherItem.content }}
                                        </p>
                                    {% endif %}

                                    <div class="d-flex flex-wrap gap-2 mb-3">
                                        {% if otherItem.primaire %}<span class="subject-pill">Primaire</span>{% endif %}
                                        {% if otherItem.college %}<span class="subject-pill">Collège</span>{% endif %}
                                        {% if otherItem.lycee %}<span class="subject-pill">Lycée</span>{% endif %}
                                        {% if otherItem.superieur %}<span class="subject-pill">Supérieur</span>{% endif %}
                                    </div>

                                    <div class="mt-auto">
                                        <a href="{{ path('app_profileCategory_show', {
                                            'profile': otherItem.profile.id,
                                            'slug': 'professeur-' ~ otherItem.profile.department ~ '-' ~ otherItem.profile.firstname|myslugify ~ '-' ~ otherItem.profile.lastname|first|myslugify,
                                            'skill': otherItem.category.slug,
                                            'id': otherItem.id,
                                            'from': app.request.query.get('from')
                                        }) }}" class="btn btn-sm btn-outline-dark btn-pill">
                                            Voir cette fiche
                                        </a>
                                    </div>
                                </article>
                            </div>
                        {% endfor %}

                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="side-stack" id="reserver">
                    {{ form_start(form_message, {'attr': {'class': 'vstack gap-3'}}) }}
                        {{ form_errors(form_message) }}
                        <div>
                            {{ form_label(form_message.email, 'Email', {'label_attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form_message.email, {'attr': {'class': 'form-control form-control-lg rounded-4','placeholder': 'Votre email'}}) }}
                            {{ form_errors(form_message.email) }}
                        </div>
                        <div>
                            {{ form_label(form_message.mobile, 'Téléphone', {'label_attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form_message.mobile, {'attr': {'id': 'inputError1','class': 'form-control form-control-lg rounded-4','placeholder': 'Votre numéro de mobile'}}) }}
                            {{ form_errors(form_message.mobile) }}
                        </div>
                        <div>
                            {{ form_label(form_message.category, 'Matière', {'label_attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form_message.category, {'attr': {'class': 'form-select form-select-lg rounded-4 ui-select'}}) }}
                            {{ form_errors(form_message.category) }}
                        </div>
                        <div>
                            {{ form_label(form_message.level, 'Niveau', {'label_attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form_message.level, {'attr': {'class': 'form-select form-select-lg rounded-4 ui-select'}}) }}
                            {{ form_errors(form_message.level) }}
                        </div>
                        <div>
                            {{ form_label(form_message.message, 'Votre besoin', {'label_attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form_message.message, {'attr': {'rows': 4,'class': 'form-control rounded-4','placeholder': 'Exemple : besoin en ' ~ categoryName|lower ~ ', 2 séances par semaine...'}}) }}
                            {{ form_errors(form_message.message) }}
                        </div>
                        <div>
                            {{ form_widget(form_message.recaptcha, {'attr': {'options': {'theme': 'light','type': 'image','size': 'normal'}}}) }}
                            {{ form_errors(form_message.recaptcha) }}
                        </div>

                        <button class="btn btn-primary btn-lg btn-pill w-100" type="submit">Envoyer une demande</button>
                        <a href="{{ path('search_booking', { 'id': item.id, 'from': app.request.query.get('from') }) }}" class="btn btn-outline-dark btn-lg btn-pill w-100">Contacter ce professeur</a>
                    {{ form_end(form_message) }}

                    <div class="booking-trust mt-4 pt-4 border-top">
                        <div class="trust-item"><i class="bi bi-check2-circle"></i>Demande contextualisée sur {{ categoryName }}</div>
                        <div class="trust-item"><i class="bi bi-check2-circle"></i>Contact direct et gratuit</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="mobile-cta-bar d-lg-none">
    <div>
        <div class="mobile-cta-price">{% if item.pricePerHour is defined and item.pricePerHour is not null %}{{ item.pricePerHour }}€<span>/h</span>{% else %}Sur demande{% endif %}</div>
        <div class="mobile-cta-meta">{{ categoryName }}</div>
    </div>
    <a href="#reserver" class="btn btn-primary btn-pill">Contacter</a>
</div>
{% endblock %}