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

{% block stylesheets %}
	<link href="/assets/selectize-bootstrap-4-style-master/dist/css/selectize.bootstrap4.css" rel="stylesheet">
	<style>
	.text-error {
		color: #dc3545;
		font-size: 80%;
	}

	</style>
{% endblock %}

{% block title %}Mes compétences{% endblock %}

{% block body %}

<div class="container">
<div class="row">
	<div class="col-md-4">


<div class="card border-0 shadow-sm rounded-4 my-4">
  <div class="card-body p-4">
    <div class="d-flex align-items-center justify-content-between mb-4">
      <h5 class="fw-bold mb-0 d-flex align-items-center text-dark">
        <i data-feather="briefcase" class="me-2 text-primary"></i> Mes compétences
      </h5>

      <a href="{{ path('app_setting_competence') }}" class="btn btn-sm btn-primary rounded-pill d-flex align-items-center gap-1">
        <i data-feather="plus"></i> Ajouter
      </a>
    </div>

    {% if app.user.profile and app.user.profile.categories|length > 0 %}
      <div class="list-group list-group-flush">
        {% for category in app.user.profile.categories %}
          <div class="list-group-item border-0 px-0 py-3 d-flex justify-content-between align-items-center flex-wrap">
            <div class="d-flex align-items-center">
              {% if category.lang %}
                <img 
                  src="https://www.tutorify.io/flags/{{ category.lang }}.svg" 
                  alt="{{ category.lang }}" 
                  width="34" 
                  height="24" 
                  class="me-3 rounded shadow-sm"
                />
              {% endif %}
              <div>
                <h6 class="mb-1 fw-semibold text-dark">
                  {{ category.category ? category.category.name : 'Compétence non spécifiée' }}
                </h6>
                <span class="badge {% if category.status %}bg-success-subtle text-success{% else %}bg-secondary-subtle text-secondary{% endif %}">
                  {% if category.status %}Annonce publiée{% else %}Annonce inactive{% endif %}
                </span>
              </div>
            </div>

            <a href="{{ path('app_setting_competence_edit', {'id': category.id }) }}" 
               class="btn btn-outline-primary btn-sm rounded-pill d-flex align-items-center gap-1">
              <i data-feather="edit"></i> Modifier
            </a>
          </div>
        {% endfor %}
      </div>
    {% else %}
      <div class="text-center py-5 text-muted">
        <i data-feather="info" class="mb-2 text-secondary" style="width: 32px; height: 32px;"></i>
        <p class="mb-1">Vous n’avez encore ajouté aucune compétence.</p>
        <a href="{{ path('app_setting_competence') }}" class="btn btn-outline-primary rounded-pill mt-2">
          <i data-feather="plus"></i> Ajouter une compétence
        </a>
      </div>
    {% endif %}
  </div>
</div>



    </div>


	<div class="col-md-8">

<div class="card border-0 shadow-sm rounded-4 my-4">
  <div class="card-body p-4">
    <div class="d-flex align-items-center justify-content-between mb-4">
      <h5 class="fw-bold mb-0 d-flex align-items-center text-dark">
        <i data-feather="plus-circle" class="me-2 text-success"></i> Ajouter une compétence
      </h5>
    </div>

    <form method="POST" action="" {{ form_enctype(form) }} novalidate>
      {{ form_widget(form._token) }}

      <div class="row g-4">
        <!-- Compétence -->
        <div class="col-md-6">
          <label class="form-label fw-semibold">Compétence</label>
          {{ form_row(form.category, {'attr': {'class': 'chosen-select', 'placeholder': 'Matière'}}) }}
        </div>

        <!-- Langue -->
        <div class="col-md-6">
          <label class="form-label fw-semibold">Langue du cours</label>
          {{ form_row(form.lang, {'attr': {'class': 'form-control'}}) }}
          <div class="invalid-feedback">{{ form_errors(form.lang) }}</div>
        </div>

        <!-- Prix -->
        <div class="col-md-6">
          <label class="form-label fw-semibold">Prix / Heure</label>
          {{ form_row(form.pricePerHour, {'attr': {'class': 'form-control'}}) }}
          <div class="invalid-feedback">{{ form_errors(form.pricePerHour) }}</div>
        </div>

        <!-- Première heure gratuite -->
        <div class="col-md-6 d-flex align-items-end">
          <div class="form-check">
            {{ form_widget(form.firstHour) }}
            <label class="form-check-label ms-1">Première heure offerte</label>
          </div>
        </div>

        <!-- Description -->
        <div class="col-12">
          <label class="form-label fw-semibold">Description</label>
          {{ form_row(form.content, { 'attr': {'class': 'form-control', 'rows': '5', 'placeholder': 'Décrivez votre compétence, vos méthodes, vos atouts…'} }) }}
          <div class="invalid-feedback">{{ form_errors(form.content) }}</div>
        </div>
      </div>

      <!-- Section : Lieux du cours -->
      <div class="mt-5">
        <h6 class="fw-bold border-bottom pb-2 mb-3">
          <i data-feather="map-pin" class="me-1 text-primary"></i> Lieux du cours
        </h6>
        <div class="row">
          <div class="col-md-4 form-check">{{ form_widget(form.webcam) }} <label class="form-check-label ms-1">En ligne</label></div>
          <div class="col-md-4 form-check">{{ form_widget(form.inPlace) }} <label class="form-check-label ms-1">Chez moi</label></div>
          <div class="col-md-4 form-check">{{ form_widget(form.outPlace) }} <label class="form-check-label ms-1">Chez l’élève</label></div>
        </div>
      </div>

      <!-- Section : Niveaux -->
      <div class="mt-5">
        <h6 class="fw-bold border-bottom pb-2 mb-3">
          <i data-feather="layers" class="me-1 text-primary"></i> Niveaux enseignés
        </h6>
        <div class="row">
          <div class="col-md-3 form-check">{{ form_widget(form.primaire) }} <label class="form-check-label ms-1">Primaire</label></div>
          <div class="col-md-3 form-check">{{ form_widget(form.college) }} <label class="form-check-label ms-1">Collège</label></div>
          <div class="col-md-3 form-check">{{ form_widget(form.lycee) }} <label class="form-check-label ms-1">Lycée</label></div>
          <div class="col-md-3 form-check">{{ form_widget(form.superieur) }} <label class="form-check-label ms-1">Supérieur</label></div>
        </div>
      </div>

      <!-- Section : Paramètres -->
      <div class="mt-5">
        <h6 class="fw-bold border-bottom pb-2 mb-3">
          <i data-feather="settings" class="me-1 text-primary"></i> Paramètres
        </h6>
        <div class="form-check">
          {{ form_widget(form.status) }}
          <label class="form-check-label ms-1">Annonce en ligne</label>
        </div>
      </div>

      <!-- Bouton -->
      <div class="text-end mt-5">
        <button type="submit" class="btn btn-lg btn-success rounded-pill shadow-sm px-5">
          <i data-feather="check-circle" class="me-2"></i> Ajouter
        </button>
      </div>
    </form>
  </div>
</div>



</div>
</div>
{% endblock body %}

{% block javascripts %}



{% endblock %}