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

{% block title %}Modifier le cabinet{% endblock %}

{% block body %}

    <ul class="nav nav-tabs" id="cabinetTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="coordonnees-tab" data-toggle="tab" href="#coordonnees" role="tab">Coordonnées</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="personnalisation-tab" data-toggle="tab" href="#personnalisation" role="tab">Personnalisation</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="api-tab" data-toggle="tab" href="#api" role="tab">Tierces parties & API</a>
        </li>
    </ul>
    <div class="tab-content bg-white p-3" id="cabinetTabContent">
        <div class="tab-pane fade show active" id="coordonnees" role="tabpanel">
            <div class="row">
                <div class="col-sm-6">
                    <div class="card h-100">
                        <div class="card-header">
                            <h3 class="card-title">Coordonnées</h3>
                        </div>
                        <div class="card-body">
                            {{ form_start(form_infos) }}

                    {% if form_errors(form_infos)|default %}
                        <div class="alert alert-danger">
                            {{ form_errors(form_infos) }}
                        </div>
                    {% endif %}
                    {% for message in app.flashes('success') %}
                        <div class="alert alert-success">
                            <i class="icon fas fa-check"></i> {{ message }}
                        </div>
                    {% endfor %}

                            <div class="form-group">
                                <label for="user_profile_nom" class="required">Nom du cabinet</label>
                                <input type="text" id="user_profile_nom" name="user_profile[nom]" required="required"
                                       maxlength="255" disabled="disabled" aria-describedby="user_profile_nom_help"
                                       class="form-control" value="{{ app.user.getNom() }}">
                                <small id="user_profile_nom_help" class="form-text text-muted">Pour modifier le nom du cabinet,
                                    merci de nous contacter à l'adresse support@pilotguard.xpert-ia.fr</small>
                            </div>
                            {{ form_row(form_infos.tel) }}
                            {{ form_row(form_infos.adresse) }}
                            <div class="row">
                                <div class="col-3">
                                    {{ form_row(form_infos.cp) }}
                                </div>
                                <div class="col-9">
                                    {{ form_row(form_infos.ville) }}
                                </div>
                            </div>

                            {{ form_row(form_infos._token) }}
                            <button class="btn btn-primary">{{ button_label|default('Enregistrer') }}</button>

                            {{ form_end(form_infos, {'render_rest': false}) }}
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Adresse e-mail</h3>
                        </div>
                        <div class="card-body show-login-warning">

                            {{ form_start(form_email_data) }}

                            {% if form_errors(form_email_data)|default %}
                                <div class="alert alert-danger">
                                    {{ form_errors(form_email_data) }}
                                </div>
                            {% endif %}
                            {% for message in app.flashes('success-email') %}
                                <div class="alert alert-success">
                                    <i class="icon fas fa-check"></i> {{ message }}
                                </div>
                            {% endfor %}

                            {{ form_row(form_email_data.email) }}

                            {{ form_row(form_email_data._token) }}
                            <button class="btn btn-primary">{{ button_label|default('Modifier l\'adresse e-mail') }}</button>

                            {{ form_end(form_email_data, {'render_rest': false}) }}


                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Mot de passe</h3>
                        </div>
                        <div class="card-body">

                            {{ form_start(form_password_data) }}

                            {% if form_errors(form_password_data)|default %}
                                <div class="alert alert-danger">
                                    {{ form_errors(form_password_data) }}
                                </div>
                            {% endif %}
                            {% for message in app.flashes('success-password') %}
                                <div class="alert alert-success">
                                    <i class="icon fas fa-check"></i> {{ message }}
                                </div>
                            {% endfor %}

                            {{ form_row(form_password_data.password) }}

                            {{ form_row(form_password_data._token) }}
                            <button class="btn btn-primary">{{ button_label|default('Modifier le mot de passe') }}</button>

                            {{ form_end(form_password_data, {'render_rest': false}) }}


                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="personnalisation" role="tabpanel">
            <div class="row">
                <div class="col-12">
                    <div class="mt-3 card">
                        <div class="card-header">
                            <h3 class="card-title">Personnalisation</h3>
                        </div>
                        <div class="card-body">

                            {% for message in app.flashes('success-media') %}
                                <div class="alert alert-success">
                                    <i class="icon fas fa-check"></i> {{ message }}
                                </div>
                            {% endfor %}

                            {{ form_start(form_media) }}

                            <div class="row mb-4">
                                <div class="col-md-4">
                                    <label class="form-label">Logo</label>
                                    {% if user.logo|default %}
                                        <div class="mb-2">
                                            <img src="{{ user.logoThumb }}" alt="Logo sélectionné" class="img-fluid img-thumbnail">
                                        </div>
                                    {% endif %}
                                    <div class="form-error mb-1">
                                        {{ form_errors(form_media.logo) }}
                                    </div>
                                    {{ form_help(form_media.logo) }}
                                    <div class="custom-file">
                                        <input type="file" name="{{ field_name(form_media.logo) }}"
                                               class="custom-file-input" accept="image/*" id="userLogo">
                                        <label class="custom-file-label" for="userLogo">Parcourir</label>
                                    </div>
                                </div>

                                <div class="col-md-8">
                                    {{ form_row(form_media.color_strong) }}
                                    {{ form_row(form_media.color_light) }}
                                </div>
                            </div>

                            <div class="row mb-4">
                                <div class="col-md-6">
                                    <label class="form-label">Photo page de garde</label>
                                    {% if user.photo|default %}
                                        <p class="text-bold d-block">Photo page de garde sélectionnée :</p>
                                        <img src="{{ user.photoThumb }}" alt="" class="mb-3 img-fluid img-employe-photo">
                                    {% else %}
                                        <label for="userPhoto">{{ field_label(form_media.photo) }}</label>
                                    {% endif %}
                                    {{ form_help(form_media.photo) }}
                                    <div class="custom-file mb-3">
                                        <input type="file" name="{{ field_name(form_media.photo) }}"
                                               class="custom-file-input" accept="image/*" id="userPhoto">
                                        <label class="custom-file-label" for="userPhoto">Parcourir</label>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Image de fond des pages</label>
                                    {% if user.getPbiPageBg()|default %}
                                        <p class="text-bold d-block">Image de fond des pages sélectionnée :</p>
                                        <img src="{{ user.getPbiPageBg() }}" alt="" class="mb-3 img-fluid">
                                    {% else %}
                                        <label for="userPbiPageBg">{{ field_label(form_media.pbi_page_bg) }}</label>
                                    {% endif %}
                                    <div class="form-error">
                                        {{ form_errors(form_media.pbi_page_bg) }}
                                    </div>
                                    {{ form_help(form_media.pbi_page_bg) }}
                                    <div class="custom-file mb-3">
                                        <input type="file" name="{{ field_name(form_media.pbi_page_bg) }}"
                                               class="custom-file-input" accept="image/*" id="userPbiPageBg">
                                        <label class="custom-file-label" for="userPbiPageBg">Parcourir</label>
                                    </div>
                                </div>
                            </div>

                            <button class="btn btn-primary">{{ button_label|default('Enregistrer') }}</button>

                            {{ form_end(form_media) }}

                        </div>

                    </div>

                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="api" role="tabpanel">
            <div class="row">
                <div class="col-sm-6 d-none">
                    <div class="mt-3 card">
                        <div class="card-header">
                            <h3 class="card-title">Compte Microsoft & Google</h3>
                        </div>
                        <div class="card-body">

                            {% for message in app.flashes('success-oauth') %}
                                <div class="alert alert-success">
                                    <i class="icon fas fa-check"></i> {{ message }}
                                </div>
                            {% endfor %}

                            <div class="card mb-3 shadow-sm">
                                <div class="card-header">
                                    <h5 class="card-title mb-0"><i class="fab fa-microsoft text-blue mr-1"></i> Microsoft</h5>
                                </div>
                                <div class="card-body">

                                    {% set microsoftToken = app.user.getOAuthTokens()|filter(t => t.type == 'microsoft')|first %}

                                    {% if microsoftToken and microsoftToken.accessToken is not null and microsoftToken.refreshToken is not null %}
                                        <div class="mb-2 text-success">
                                            ✅ Votre compte Microsoft est connecté.
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center flex-wrap">
                                            <div class="text-muted small">
                                                Vous pouvez désormais synchroniser vos e-mails, calendriers et contacts.
                                            </div>
                                            <a href="{{ path('microsoft_unlink', { target: user.id, type: 'user' }) }}" class="btn btn-outline-danger btn-sm mt-2 mt-md-0">
                                                Déconnecter Microsoft
                                            </a>
                                        </div>
                                    {% else %}
                                        <div class="mb-2 text-warning">
                                            ⚠️ Aucun compte Microsoft connecté.
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center flex-wrap">
                                            <div class="text-muted small">
                                                Connectez un compte Microsoft pour activer les intégrations (emails, calendrier, etc.).
                                            </div>
                                            <a href="{{ path('oauth_microsoft_link', { target: user.id, type: 'user' }) }}" class="btn btn-primary btn-sm mt-2 mt-md-0">
                                                <i class="fab fa-microsoft mr-1"></i> Connecter mon compte Microsoft
                                            </a>
                                        </div>
                                    {% endif %}


                                </div>
                            </div>

                            <div class="card mb-3 shadow-sm">
                                <div class="card-header">
                                    <h5 class="card-title mb-0"><i class="fab fa-google mr-1" style="color: #4285F4;"></i> Google</h5>
                                </div>
                                <div class="card-body">

                                    {% set googleToken = app.user.getOAuthTokens()|filter(t => t.type == 'google')|first %}

                                    {% if googleToken and googleToken.accessToken is not null and googleToken.refreshToken is not null %}
                                        <div class="mb-2 text-success fw-semibold">
                                            ✅ Votre compte Google est connecté.
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center flex-wrap">
                                            <div class="text-muted small">
                                                Votre compte est prêt à interagir avec Gmail.
                                            </div>
                                            <a href="{{ path('google_unlink', { target: user.id, type: 'user' }) }}" class="btn btn-outline-danger btn-sm mt-2 mt-md-0">
                                                Déconnecter Google
                                            </a>
                                        </div>
                                    {% else %}
                                        <div class="mb-2 text-warning fw-semibold">
                                            ⚠️ Aucun compte Google connecté.
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center flex-wrap">
                                            <div class="text-muted small">
                                                Connectez un compte Google pour activer les intégrations Gmail.
                                            </div>
                                            <a href="{{ path('oauth_google_link', { target: user.id, type: 'user' }) }}" class="btn btn-primary btn-sm mt-2 mt-md-0">
                                                <i class="fab fa-google mr-1"></i> Connecter mon compte Google
                                            </a>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="mt-3 card">
                        <div class="card-header">
                            <h3 class="card-title">Paramètres Tierces parties</h3>
                        </div>
                        <div class="card-body">

                            {% for message in app.flashes('success-api') %}
                                <div class="alert alert-success">
                                    <i class="icon fas fa-check"></i> {{ message }}
                                </div>
                            {% endfor %}
                            {{ form_start(form_third_parties) }}
                            <p><strong>HeyGen</strong></p>
                            {{ form_row(form_third_parties.api_key_heygen) }}
                            {{ form_row(form_third_parties.url_webhook_n8n) }}
                            {#
                            <hr>
                            <p><strong>Relève URSSAF</strong></p>
                            {{ form_row(form_third_parties.urssaf_login) }}
                            {{ form_row(form_third_parties.urssaf_pwd) }}
                            #}
                            {{ form_row(form_third_parties._token) }}
                            <button class="btn btn-primary">{{ button_label|default('Enregistrer') }}</button>
                            {{ form_end(form_third_parties, { render_rest:false }) }}

                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="mt-3 card">
                        <div class="card-header">
                            <h3 class="card-title">Paramètres API Comptables</h3>
                        </div>
                        <div class="card-body">
                            {% for message in app.flashes('success-api-comptable') %}
                                <div class="alert alert-success">
                                    <i class="icon fas fa-check"></i> {{ message }}
                                </div>
                            {% endfor %}

                            <div id="api-cards-container" class="row">
                                {% for api in apis %}
                                    <div class="col-md-3">
                                        <div class="card" data-api-id="{{ api.integrationid }}">
                                            <div class="card-header">
                                                <h5 class="card-title d-flex justify-content-between align-items-center w-100">
                                                    {{ api.name }}
                                                    {% if integrationIds[api.integrationid] is defined %}
                                                        <button class="btn btn-success btn-xs">
                                                            <i class="fas fa-check"></i> Connecté
                                                        </button>
                                                    {% endif %}
                                                </h5>
                                            </div>
                                            <div class="card-body text-center">
                                                <div class="img-api d-flex justify-content-center align-items-center img-api-{{ api.integrationid }} mb-3">
                                                    <img src="{{ api.logo_url }}" alt="{{ api.name }}">
                                                </div>

                                                {% if integrationIds[api.integrationid] is defined %}

                                                    <a href="{{ path('app_user_delete_api', { 'id': integrationIds[api.integrationid] }) }}"
                                                       class="text-danger text-sm btn-disconnect-api">
                                                        Déconnecter
                                                    </a>

                                                {% else %}
                                                    <button type="button"
                                                            class="btn btn-sm btn-primary btn-add-api"
                                                            data-api-id="{{ api.integrationid }}"
                                                            data-api-name="{{ api.name }}">
                                                        Connecter
                                                    </button>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}



                            </div>

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

{% endblock %}

{% block javascript %}
<script>
    $(document).ready(function () {
    $('#cabinetTab a').on('click', function (e) {
        e.preventDefault();
        $(this).tab('show');
    });

    $('.btn-add-api').on('click', function () {
    let that = this;
    $(this).html('<i class="fas fa-spinner fa-spin"></i>');
    const apiId = $(this).data('api-id');

    $.ajax({
    url: "/user/getChiftApiUrl/" + apiId,
    type: "GET",
    success: function (data) {
    window.location.href = data.url;
    $(that).html('Connecter');
},
    error: function () {
    alert('Une erreur est survenue. Merci de réessayer plus tard.');
    $(that).html('Connecter');
}
});
});

    $('.btn-disconnect-api').on('click', function () {
        return confirm('Êtes vous sûr de vouloir déconnecter cette API ?');
    })
});
</script>
{% endblock %}