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

{% block stylesheet %}{% endblock %}

{% block title %}Tableaux de bord{% endblock %}

{% block body %}


<div class="container my-2">
  <!-- En-tête utilisateur -->
  <div class="mb-2 p-4">
    <h5 class="pb-2 mb-2">
      👋 Bonjour {{ app.user.username }} !
    </h5>

    {% if app.user.profile == NULL %}
      <p class="mb-0 text-secondary">
        Ceci est votre <strong>guide de configuration personnel</strong>.  
        Nous allons vous aider à paramétrer votre compte étape par étape.
      </p>
    {% endif %}
  </div>

  <!-- Bloc premium -->
  <div class="row g-4 align-items-center">
    <!-- Colonne contenu -->
    <div class="col-12">
      {% if lastPremium %}
        <div class="alert alert-success border-0 shadow-sm py-4 text-center" role="alert">
          <h5 class="fw-semibold mb-2">
            🌟 Abonnement Premium actif
          </h5>
          <p class="mb-0">
            Votre abonnement actuel se termine le 
            <strong>{{ lastPremium.dateEnd|date('d/m/Y à H:i') }}</strong>.
          </p>
        </div>
      {% else %}
        <div class="text-center py-4 bg-body-tertiary rounded-4 shadow-sm">
          <h5 class="fw-semibold mb-3">
            Boostez la visibilité de votre profil ✨
          </h5>
          <a href="{{ path('app_setting_premium') }}" class="btn btn-success btn-lg px-4 rounded-pill shadow-sm">
            Passer Premium
          </a>
        </div>
      {% endif %}
    </div>
  </div>
</div>


<div class="container">


    <div class="row">
  <div class="col-12">
    {% if app.user.profile is null %}
      <div class="alert alert-warning my-3 p-3 shadow-sm rounded-3">
        <h6 class="mb-0">
          👋 Votre profil n’est pas encore configuré.
          <a href="{{ path('app_setting_profile') }}" class="fw-bold ms-2">→ Compléter mon profil</a>
        </h6>
      </div>

    {% else %}
      {% set countIncomplete = 0 %}
      {% set fields = {
        'role': 'profil',
        'civility': 'civilité',
        'firstname': 'prénom',
        'lastname': 'nom',
        'birthday': 'date de naissance',
        'content': 'description',
        'address': 'adresse',
        'city': 'ville',
        'department': 'code postal'
      } %}

      {% for field, label in fields %}
        {% if attribute(app.user.profile, field) is null %}
          {% set countIncomplete = countIncomplete + 1 %}
        {% endif %}
      {% endfor %}

      {% if countIncomplete > 0 %}
        <div class="alert alert-danger my-3 p-3 shadow-sm rounded-3">
          <h6 class="fw-bold mb-2">
            🚧 Votre profil est incomplet :
            <a href="{{ path('app_setting_profile') }}" class="text-white text-decoration-underline ms-1">Compléter mon profil</a>
          </h6>
          <ul class="small mb-0">
            {% for field, label in fields %}
              {% if attribute(app.user.profile, field) is null %}
                <li>Vous devez renseigner votre <b>{{ label }}</b>.</li>
              {% endif %}
            {% endfor %}
          </ul>
        </div>
      {% endif %}
    {% endif %}

    {# --- SECTION COMPÉTENCES --- #}
    {% if app.user.profile %}
      {% set total = app.user.profile.categories|length %}
      {% set active = 0 %}
      {% set inactive = 0 %}

      {% for cat in app.user.profile.categories %}
        {% if cat.status %}
          {% set active = active + 1 %}
        {% else %}
          {% set inactive = inactive + 1 %}
        {% endif %}
      {% endfor %}

      {% if total == 0 %}
        <div class="alert alert-info my-3 p-3 shadow-sm rounded-3">
          <h6>💡 Vous n’avez pas encore ajouté de compétence :
            <a href="{{ path('app_setting_competence') }}" class="fw-bold">Ajouter une compétence</a>
          </h6>
        </div>

      {% else %}
        <div class="alert alert-light border my-3 p-3 shadow-sm rounded-3">
          {% if active > 0 %}
            <h6 class="mb-1">✅ {{ active }} compétence{{ active > 1 ? 's' : '' }} en ligne</h6>
          {% endif %}
          {% if inactive > 0 %}
            {% if countIncomplete >= 1  %}<hr>{% endif %}
            <h6 class="text-warning mb-2">⚠️ {{ inactive }} compétence{{ inactive > 1 ? 's' : '' }} inactives :</h6>
            <p class="small text-muted mb-2">Pour activer une compétence, cochez <b>« Annonce en ligne »</b>.</p>
            <ul class="list-unstyled mb-0">
              {% for cat in app.user.profile.categories if not cat.status %}
                <li class="mb-1">
                  <a href="{{ path('app_setting_competence_edit', {'id': cat.id}) }}" class="text-decoration-none">
                    ✏️ Modifier <b>{{ cat.category.name }}</b>
                  </a>
                </li>
              {% endfor %}
            </ul>
          {% endif %}
        </div>
      {% endif %}
    {% endif %}
  </div>
</div>



{% if app.user.profile %}
    <div class="row">

    	<div class="col-md-8">
			<div class="container my-5">
			<div class="p-4 bg-body-tertiary rounded-4 shadow-sm">
				<h4 class="fw-semibold border-bottom border-secondary pb-3 mb-4">
				🎓 Les dernières demandes de cours particuliers
				</h4>

				{% for mess in messages %}
				<div class="mb-4 pb-4 border-bottom border-light-subtle">
					<div class="d-flex align-items-center justify-content-between flex-wrap">
					<div class="d-flex align-items-center gap-2">
						<img 
						src="{{ mess.profileCategory.category.parent.iosIcon }}" 
						alt="{{ mess.profileCategory.category.name }}"
						class="rounded-circle shadow-sm bg-body-secondary p-1"
						style="width:50px; height:50px; object-fit:cover;"
						>
						<h6 class="mb-0 fw-semibold">
						{{ mess.profileCategory.category.name }}
						{% if mess.isBoosted %}
							<span class="badge text-bg-info ms-1 d-inline-flex align-items-center gap-1">
							⚡ Premium
							</span>
						{% else %}
						
						{% endif %}
						</h6>
					</div>
					<small class="text-muted">
						📅 Reçu le 
						<i><time class="timeago" datetime="{{ mess.createdAt|date }}">{{ mess.createdAt|date('d/m/Y H:i') }}</time></i>
					</small>
					</div>

					<div class="mt-3">
					<p class="mb-1 fw-medium text-body">
						<a href="mailto:{{ mess.email }}" class="link-body-emphasis text-decoration-none">
						{{ mess.email }}
						</a> 
						· 
						<a href="tel:{{ mess.mobile }}" class="link-body-emphasis text-decoration-none">
						{{ mess.mobile }}
						</a>
					</p>
					<div class="text-secondary">
						{% autoescape %}
						{{ mess.message | raw | nl2br }}
						{% endautoescape %}
					</div>
					</div>
				</div>
				{% else %}
				<div class="text-center py-5 text-secondary">
					<p class="mb-1 fs-5">😕 Vous n’avez aucune nouvelle demande pour le moment.</p>
					<p class="small">Les nouvelles demandes apparaîtront ici dès qu’un élève vous contactera.</p>
				</div>
				{% endfor %}
			</div>
			</div>

    	</div>

		<div class="col-md-4">
			<div class="text-center my-5">
			<a 
				href="{{ path('app_profile_user_show', { 
				'id': app.user.profile.id, 
				'slug': 'professeur-' ~ app.user.profile.department ~ '-' ~ app.user.profile.firstname|myslugify ~ '-' ~ app.user.profile.lastname|first|myslugify 
				}) }}" 
				target="_blank"
				class="btn btn-primary btn-lg px-5 rounded-pill shadow-sm d-inline-flex align-items-center gap-2"
			>
				<i class="bi bi-person-badge"></i>
				Visualiser votre profil
			</a>
			</div>


		<div class="container my-5">
  <div class="p-4 bg-body-tertiary rounded-4 shadow-sm">
    <h4 class="fw-semibold mb-3">🧠 Vos compétences</h4>
    <hr class="border-secondary-subtle mb-4">

    {% if category is not empty %}
      <div class="accordion" id="accordionCompetences">
        {% for item in category %}
          <div class="accordion-item rounded-3 overflow-hidden mb-3 border-0 shadow-sm">
            
            <!-- Header -->
            <h2 class="accordion-header" id="heading-{{ item.id }}">
              <button 
                class="accordion-button d-flex align-items-center gap-3 collapsed" 
                type="button" 
                data-bs-toggle="collapse" 
                data-bs-target="#collapse{{ item.id }}" 
                aria-expanded="false" 
                aria-controls="collapse{{ item.id }}"
              >
                <img 
                  src="{{ item.category.parent.iosIcon }}" 
                  alt="{{ item.category.name }}" 
                  class="rounded-circle bg-body-secondary p-1 shadow-sm"
                  style="width:50px; height:50px; object-fit:cover;"
                >
                <div class="flex-grow-1">
                  <span class="fw-semibold">{{ item.category.name }}</span>
                  {% if item.status %}
                    <span class="badge bg-success-subtle text-success ms-2">En ligne</span>
                  {% else %}
                    <span class="badge bg-danger-subtle text-danger ms-2">Hors ligne</span>
                  {% endif %}
                </div>
              </button>
            </h2>

            <!-- Body -->
            <div 
              id="collapse{{ item.id }}" 
              class="accordion-collapse collapse" 
              aria-labelledby="heading-{{ item.id }}" 
              data-bs-parent="#accordionCompetences"
            >
              <div class="accordion-body">

                {% if not item.status %}
                  <div class="alert alert-danger py-2 small mb-3">
                    Cette compétence est actuellement <strong>inactive</strong>.
                  </div>
                {% endif %}

                <a href="{{ path('app_setting_competence_edit', {'id': item.id }) }}" class="btn btn-outline-primary btn-sm mb-3">
                  ✏️ Modifier
                </a>

                {% if item.messages is not empty %}
                  {% for message in item.messages %}
                    <div class="border-start border-4 border-primary ps-3 mb-4">
                      <p class="mb-1 fw-medium">
                        <a href="mailto:{{ message.email }}" class="link-body-emphasis text-decoration-none">
                          {{ message.email }}
                        </a><br>
                        <a href="tel:{{ message.mobile }}" class="link-body-emphasis text-decoration-none">
                          {{ message.mobile }}
                        </a>
                      </p>
                      <div class="text-secondary small">
                        {% autoescape %}
                          {{ message.message | raw | nl2br }}
                        {% endautoescape %}
                      </div>
                      <p class="text-muted small mb-0">
                        📅 Reçu le <i><time class="timeago" datetime="{{ message.createdAt|date }}">{{ message.createdAt|date('d/m/Y H:i') }}</time></i>
                      </p>
                    </div>
                  {% endfor %}
                {% else %}
                  <p class="text-secondary mb-0">Aucun message pour cette compétence.</p>
                {% endif %}
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
    {% else %}
      <div class="text-center py-5 text-secondary">
        <p class="fs-5 mb-1">🕓 Vous n’avez ajouté aucune compétence pour le moment.</p>
        <p class="small">Ajoutez-en depuis votre espace afin de recevoir des demandes de cours.</p>
      </div>
    {% endif %}
  </div>
</div>




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


    {% endif %}
    

{% endblock body %}

{% block javascripts %}

	<script src="/js/js/jquery.timeago.js" type="text/javascript"></script>
	<script>
		jQuery(document).ready(function() {
		  jQuery(".timeago").timeago();
		});
	</script>

{% endblock %}