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

{% block title %}Réglages — Rendez-vous{% endblock %}
{% block breadcrumb %}Rendez-vous{% endblock %}

{% block body %}
{% include 'admin/booking/_nav.html.twig' %}
<style>
    .st-q { display: grid; grid-template-columns: 1fr 10rem auto auto; gap: .5rem; align-items: center; padding: .5rem 0; border-bottom: 1px dashed var(--line); }
    .st-q input[type=text], .st-q select { padding: .45rem .6rem; border: 1px solid var(--line-strong); border-radius: var(--radius-md); font: inherit; font-size: 16px; width: 100%; }
    .st-q .st-opts { grid-column: 1 / -1; }
    @media (max-width: 640px) { .st-q { grid-template-columns: 1fr; } }
</style>

<div class="bk-head"><h1>Réglages des rendez-vous</h1></div>

<form method="post" class="bk-form" novalidate id="st-form">
    <input type="hidden" name="_token" value="{{ csrf_token('booking-admin') }}">

    <div class="bk-card">
        <h2>Créneaux proposés</h2>
        <div class="bk-grid-2" style="margin-top:.75rem">
            <div class="bk-field">
                <label for="st-step">Un créneau toutes les</label>
                <select id="st-step" name="slot_step">
                    {% for m in [5, 10, 15, 20, 30, 45, 60, 90, 120] %}<option value="{{ m }}" {{ settings.slotStep == m ? 'selected' }}>{{ m < 60 ? m ~ ' minutes' : (m // 60) ~ ' h' ~ (m % 60 ? ' ' ~ m % 60 : '') }}</option>{% endfor %}
                </select>
                <small>Avec 15 min, une prestation de 45 min peut commencer à 9 h, 9 h 15, 9 h 30…</small>
            </div>
            <div class="bk-field">
                <label for="st-notice">Pas de réservation à moins de</label>
                <select id="st-notice" name="min_notice_hours">
                    {% for h, label in {'0': 'Aucun délai', '0.5': '30 minutes', '1': '1 heure', '2': '2 heures', '4': '4 heures', '12': '12 heures', '24': '24 heures (la veille)', '48': '48 heures', '72': '3 jours', '168': '1 semaine'} %}
                        <option value="{{ h }}" {{ (settings.minNoticeMinutes / 60) == h ? 'selected' }}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="bk-field">
                <label for="st-horizon">Réservable jusqu'à</label>
                <select id="st-horizon" name="max_advance_days">
                    {% for d, label in {'7': '1 semaine', '14': '2 semaines', '30': '1 mois', '60': '2 mois', '90': '3 mois', '180': '6 mois', '365': '1 an'} %}
                        <option value="{{ d }}" {{ settings.maxAdvanceDays == d ? 'selected' }}>{{ label }} à l'avance</option>
                    {% endfor %}
                    {% if settings.maxAdvanceDays not in [7, 14, 30, 60, 90, 180, 365] %}<option value="{{ settings.maxAdvanceDays }}" selected>{{ settings.maxAdvanceDays }} jours</option>{% endif %}
                </select>
            </div>
            <div class="bk-field">
                <label for="st-tz">Fuseau horaire</label>
                <select id="st-tz" name="timezone">
                    {% for tz, label in timezones %}<option value="{{ tz }}" {{ settings.timezone == tz ? 'selected' }}>{{ label }}</option>{% endfor %}
                </select>
            </div>
        </div>
    </div>

    <div class="bk-card">
        <h2>Confirmation et annulation</h2>
        <div class="bk-field" style="margin-top:.75rem">
            <span class="bk-label">Les réservations en ligne sont</span>
            <label class="bk-check"><input type="radio" name="confirmation_mode" value="auto" {{ not settings.manualConfirmation ? 'checked' }}> confirmées tout de suite <span class="bk-muted">(recommandé)</span></label>
            <label class="bk-check" style="margin-top:.35rem"><input type="radio" name="confirmation_mode" value="manual" {{ settings.manualConfirmation ? 'checked' }}> des demandes que je confirme une par une <span class="bk-muted">(le créneau est retenu en attendant)</span></label>
        </div>
        <div class="bk-grid-2" style="margin-top:1rem">
            <div class="bk-field">
                <label for="st-cancel">Le client peut annuler ou déplacer en ligne jusqu'à</label>
                <select id="st-cancel" name="cancel_limit_hours">
                    {% for h, label in {'0': 'le début du rendez-vous', '2': '2 h avant', '12': '12 h avant', '24': '24 h avant', '48': '48 h avant', '72': '3 jours avant', '168': '1 semaine avant'} %}
                        <option value="{{ h }}" {{ settings.cancelLimitHours == h ? 'selected' }}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="bk-field">
                <label for="st-email">Nouveaux rendez-vous envoyés à</label>
                <input type="email" id="st-email" name="notify_email" maxlength="180" value="{{ settings.notifyEmail }}" placeholder="Vide = les administrateurs du site">
            </div>
        </div>
        <div class="bk-field" style="margin-top:1rem">
            <span class="bk-label">Rappels par e-mail au client</span>
            <div style="display:flex; flex-wrap:wrap; gap:.5rem 1.4rem">
                {% for h, label in {'72': '3 jours avant', '48': '2 jours avant', '24': 'la veille (24 h)', '2': '2 h avant'} %}
                    <label class="bk-check"><input type="checkbox" name="reminders[]" value="{{ h }}" {{ h in settings.reminderHours ? 'checked' }}> {{ label }}</label>
                {% endfor %}
            </div>
            <small>Un rendez-vous pris moins de 24 h à l'avance ne reçoit pas le rappel de la veille.</small>
        </div>
        <div class="bk-field" style="margin-top:1rem">
            <label for="st-policy">Conditions affichées au client <span class="bk-muted">(facultatif)</span></label>
            <textarea id="st-policy" name="policy_text" rows="3" maxlength="4000" placeholder="Ex. : Merci de prévenir au moins 24 h à l'avance en cas d'empêchement. Au-delà de 15 minutes de retard, le rendez-vous pourra être écourté.">{{ settings.policyText }}</textarea>
        </div>
    </div>

    <div class="bk-card">
        <h2>Questions au client</h2>
        <p class="bk-muted">En plus du nom, de l'e-mail, du téléphone et du message. Ex. : « Première visite ? », « Motif de la consultation », « Modèle du véhicule ».</p>
        <div id="st-questions">
            {% for q in settings.questions %}
                <div class="st-q">
                    <input type="hidden" name="questions[{{ loop.index0 }}][id]" value="{{ q.id }}">
                    <input type="text" name="questions[{{ loop.index0 }}][label]" value="{{ q.label }}" aria-label="Question" maxlength="160">
                    <select name="questions[{{ loop.index0 }}][type]" aria-label="Type de réponse">
                        {% for t, l in {'text': 'Texte court', 'textarea': 'Texte long', 'select': 'Liste de choix', 'checkbox': 'Case à cocher'} %}<option value="{{ t }}" {{ q.type == t ? 'selected' }}>{{ l }}</option>{% endfor %}
                    </select>
                    <label class="bk-check"><input type="checkbox" name="questions[{{ loop.index0 }}][required]" value="1" {{ q.required ? 'checked' }}> Obligatoire</label>
                    <button type="button" class="bk-btn is-sm is-danger" data-remove-q aria-label="Retirer la question"><i class="fas fa-trash" aria-hidden="true"></i></button>
                    <input type="text" class="st-opts" name="questions[{{ loop.index0 }}][options]" value="{{ q.options|join('; ') }}" placeholder="Choix séparés par ; (pour une liste)" {{ q.type != 'select' ? 'hidden' }} aria-label="Choix proposés">
                </div>
            {% endfor %}
        </div>
        <button type="button" class="bk-btn is-sm" id="st-add-q" style="margin-top:.6rem"><i class="fas fa-plus" aria-hidden="true"></i> Ajouter une question</button>
    </div>

    <div class="bk-card">
        <h2>Acomptes en ligne</h2>
        {% if paymentsReady %}
            <label class="bk-check" style="margin-top:.5rem"><input type="checkbox" name="deposit_enabled" value="1" {{ settings.depositEnabled ? 'checked' }}> Demander un acompte à la réservation pour les prestations qui en ont un</label>
            <small class="bk-help">Payé par carte sur votre compte Stripe (celui de la boutique). Le créneau est retenu {{ constant('App\\Service\\Booking\\BookingManager::HOLD_MINUTES') }} minutes le temps du paiement ; remboursé si vous annulez, ou si le client annule dans les délais.</small>
        {% else %}
            <p class="bk-muted" style="margin:.5rem 0 0">Pour encaisser des acomptes, renseignez d'abord les clés de votre compte Stripe {% if can_use_ecommerce(site) %}dans <a href="{{ path('admin_shop_settings', {siteId: site.id}) }}">Boutique → Paramètres</a>{% else %}dans les paramètres de paiement{% endif %}. L'argent est versé sur votre compte, pas sur celui d'Izibrick.</p>
            <input type="hidden" name="deposit_enabled" value="0">
        {% endif %}
    </div>

    <div class="bk-card">
        <h2>Données des clients</h2>
        <div class="bk-field" style="max-width: 420px; margin-top:.5rem">
            <label for="st-ret">Coordonnées effacées après le rendez-vous</label>
            <select id="st-ret" name="retention_months">
                {% for m, label in {'6': '6 mois', '12': '1 an', '24': '2 ans', '36': '3 ans', '60': '5 ans'} %}<option value="{{ m }}" {{ settings.retentionMonths == m ? 'selected' }}>{{ label }}</option>{% endfor %}
            </select>
            <small>Le rendez-vous reste dans vos statistiques, sans le nom ni les coordonnées (RGPD).</small>
        </div>
    </div>

    <div class="bk-actions">
        <button type="submit" class="btn-gradient"><i class="fas fa-check me-1" aria-hidden="true"></i> Enregistrer les réglages</button>
    </div>
</form>

<div class="bk-card" style="margin-top:1.5rem">
    <h2>Tous les rendez-vous dans votre agenda</h2>
    <p class="bk-muted">Abonnez l'agenda de votre téléphone ou de votre ordinateur à cette adresse (« S'abonner à un calendrier ») : tous les rendez-vous du site s'y affichent et se mettent à jour seuls. Gardez-la pour vous.</p>
    <div class="bk-copy"><input type="text" readonly value="{{ feedUrl }}" aria-label="Adresse d'abonnement" onclick="this.select()"></div>
    <form method="post" style="margin-top:.6rem"
          data-izi-confirm="L'ancienne adresse cessera de fonctionner : les agendas déjà abonnés ne recevront plus les rendez-vous tant que vous ne les aurez pas réabonnés à la nouvelle."
          data-izi-confirm-title="Changer l'adresse d'abonnement ?"
          data-izi-confirm-action="Changer d'adresse"
          data-izi-confirm-cancel="Garder l'adresse actuelle">
        <input type="hidden" name="_token" value="{{ csrf_token('booking-admin') }}">
        <input type="hidden" name="regenerate_feed" value="1">
        <button class="bk-btn is-sm" type="submit">Changer d'adresse</button>
    </form>
</div>

{% if googleConfigured %}
<div class="bk-card">
    <h2><i class="fab fa-google me-1" aria-hidden="true"></i> Google Agenda</h2>
    {% if googleConnected %}
        <p>Relié au compte <strong>{{ settings.googleAccountEmail ?: 'Google' }}</strong>{% if settings.googleConnectedAt %} depuis le {{ settings.googleConnectedAt|date('d/m/Y') }}{% endif %}. Activez la synchronisation sur chaque fiche de l'<a href="{{ path('admin_booking_team', {siteId: site.id}) }}">équipe</a>.</p>
        {% if settings.googleLastError %}<div class="bk-callout is-warn"><i class="fas fa-triangle-exclamation" aria-hidden="true"></i><p>{{ settings.googleLastError }}</p></div>{% endif %}
        <form method="post" action="{{ path('admin_booking_google_disconnect', {siteId: site.id}) }}">
            <input type="hidden" name="_token" value="{{ csrf_token('booking-admin') }}">
            <button class="bk-btn is-danger" type="submit">Déconnecter Google Agenda</button>
        </form>
    {% else %}
        <p class="bk-muted">Vos événements Google (rendez-vous personnels, réunions) bloqueront les créneaux, et chaque rendez-vous pris sur le site s'ajoutera à votre agenda Google.</p>
        <form method="post" action="{{ path('admin_booking_google_connect', {siteId: site.id}) }}">
            <input type="hidden" name="_token" value="{{ csrf_token('booking-admin') }}">
            <button class="bk-btn is-primary" type="submit"><i class="fab fa-google" aria-hidden="true"></i> Relier Google Agenda</button>
        </form>
    {% endif %}
</div>
{% endif %}

<script>
    (function () {
        var list = document.getElementById('st-questions');
        var n = 1000;
        list.addEventListener('click', function (e) {
            if (e.target.closest('[data-remove-q]')) e.target.closest('.st-q').remove();
        });
        list.addEventListener('change', function (e) {
            if (e.target.matches('select[name$="[type]"]')) {
                e.target.closest('.st-q').querySelector('.st-opts').hidden = e.target.value !== 'select';
            }
        });
        document.getElementById('st-add-q').addEventListener('click', function () {
            var i = n++;
            list.insertAdjacentHTML('beforeend',
                '<div class="st-q">' +
                '<input type="text" name="questions[' + i + '][label]" aria-label="Question" maxlength="160" placeholder="Votre question">' +
                '<select name="questions[' + i + '][type]" aria-label="Type de réponse"><option value="text">Texte court</option><option value="textarea">Texte long</option><option value="select">Liste de choix</option><option value="checkbox">Case à cocher</option></select>' +
                '<label class="bk-check"><input type="checkbox" name="questions[' + i + '][required]" value="1"> Obligatoire</label>' +
                '<button type="button" class="bk-btn is-sm is-danger" data-remove-q aria-label="Retirer la question"><i class="fas fa-trash" aria-hidden="true"></i></button>' +
                '<input type="text" class="st-opts" name="questions[' + i + '][options]" placeholder="Choix séparés par ; (pour une liste)" hidden aria-label="Choix proposés">' +
                '</div>');
            list.lastElementChild.querySelector('input').focus();
        });
    })();
</script>
{% endblock %}