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

{% block title %}Configuration Paiement - Boutique{% endblock %}

{% block breadcrumb %}Boutique <i class="fas fa-chevron-right"></i> Configuration paiement{% endblock %}

{% block body %}
<div class="container-fluid mt-4">
    <div class="row mb-4">
        <div class="col">
            <h1>
                <i class="fas fa-credit-card"></i> Configuration des paiements
            </h1>
        </div>
    </div>

    {% for message in app.flashes('success') %}
        <div class="alert alert-success alert-dismissible fade show">
            <i class="fas fa-check-circle me-2"></i>{{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    {% endfor %}

    {{ form_start(form) }}

    <div class="row">
        <div class="col-lg-8">
            <!-- Stripe Configuration -->
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="fab fa-stripe"></i> Stripe (Cartes bancaires)</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        {{ form_row(form.stripeEnabled) }}
                    </div>

                    <div id="stripe-config" class="collapse {{ settings.stripeEnabled ? 'show' : '' }}">
                        <div class="alert alert-info">
                            <strong><i class="fas fa-info-circle"></i> Configuration Stripe :</strong>
                            <p class="mb-0 mt-2 small">
                                Les clés Stripe (publique et secrète) sont configurées dans les <strong>Paramètres généraux</strong>.
                                <br>
                                <a href="{{ path('bo-global-parameters') }}" class="btn btn-sm btn-outline-primary mt-2">
                                    <i class="fas fa-cog"></i> Configurer les clés Stripe
                                </a>
                            </p>
                        </div>

                        {% if site.stripePublicKey and site.stripeSecretKey %}
                            <div class="alert alert-success small">
                                <i class="fas fa-check-circle"></i> Clés Stripe configurées
                            </div>
                        {% else %}
                            <div class="alert alert-warning small">
                                <i class="fas fa-exclamation-triangle"></i> Clés Stripe non configurées - Configurez-les dans les paramètres du site
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- PayPal Configuration -->
            <div class="card mb-4">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0"><i class="fab fa-paypal"></i> PayPal</h5>
                </div>
                <div class="card-body">
                    <div class="mb-4">
                        {{ form_row(form.paypalEnabled) }}
                    </div>

                    <div id="paypal-config" class="collapse {{ settings.paypalEnabled ? 'show' : '' }}">
                        <div class="alert alert-info">
                            <strong><i class="fas fa-info-circle"></i> Obtenir vos identifiants PayPal :</strong>
                            <ol class="mb-0 mt-2 small">
                                <li>Créez un compte sur <a href="https://developer.paypal.com" target="_blank">developer.paypal.com</a></li>
                                <li>Créez une application dans <strong>My Apps & Credentials</strong></li>
                                <li>Copiez le <strong>Client ID</strong> et le <strong>Secret</strong></li>
                            </ol>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                {{ form_row(form.paypalClientId) }}
                            </div>
                            <div class="col-md-6 mb-3">
                                {{ form_row(form.paypalSecret) }}
                            </div>
                        </div>

                        <div class="mb-3">
                            {{ form_row(form.paypalSandboxMode) }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Bank Transfer Configuration -->
            <div class="card mb-4">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0"><i class="fas fa-university"></i> Virement bancaire</h5>
                </div>
                <div class="card-body">
                    <div class="mb-4">
                        {{ form_row(form.bankTransferEnabled) }}
                    </div>

                    <div id="bank-config" class="collapse {{ settings.bankTransferEnabled ? 'show' : '' }}">
                        <div class="alert alert-info small">
                            <i class="fas fa-info-circle"></i>
                            Ces informations seront envoyées par email aux clients qui choisissent le virement bancaire.
                        </div>

                        <div class="mb-3">
                            {{ form_row(form.bankName) }}
                        </div>

                        <div class="row">
                            <div class="col-md-8 mb-3">
                                {{ form_row(form.iban) }}
                            </div>
                            <div class="col-md-4 mb-3">
                                {{ form_row(form.bic) }}
                            </div>
                        </div>

                        <div class="mb-3">
                            {{ form_row(form.bankAccountOwner) }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Invoice Configuration -->
            <div class="card mb-4">
                <div class="card-header bg-secondary text-white">
                    <h5 class="mb-0"><i class="fas fa-file-invoice"></i> Configuration des factures</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            {{ form_row(form.invoicePrefix) }}
                        </div>
                        <div class="col-md-6 mb-3">
                            {{ form_row(form.invoiceNumberStart) }}
                        </div>
                    </div>

                    <div class="mb-3">
                        {{ form_row(form.invoiceLegalInfo) }}
                    </div>

                    <div class="alert alert-success small">
                        <i class="fas fa-lightbulb"></i>
                        <strong>Compteur actuel :</strong> {{ settings.invoiceCounter }}
                        <br>
                        <strong>Prochaine facture :</strong> {{ settings.nextInvoiceNumber }}
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <!-- Summary Card -->
            <div class="card mb-4 sticky-top" style="top: 20px;">
                <div class="card-header">
                    <h6 class="mb-0"><i class="fas fa-check-circle"></i> Méthodes actives</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3 p-2 bg-light rounded">
                        <div class="d-flex align-items-center justify-content-between">
                            <span><i class="fab fa-stripe me-2"></i> Stripe</span>
                            <span class="badge bg-{{ settings.stripeEnabled ? 'success' : 'secondary' }}">
                                {{ settings.stripeEnabled ? 'Actif' : 'Inactif' }}
                            </span>
                        </div>
                    </div>

                    <div class="mb-3 p-2 bg-light rounded">
                        <div class="d-flex align-items-center justify-content-between">
                            <span><i class="fab fa-paypal me-2"></i> PayPal</span>
                            <span class="badge bg-{{ settings.paypalEnabled ? 'success' : 'secondary' }}">
                                {{ settings.paypalEnabled ? 'Actif' : 'Inactif' }}
                            </span>
                        </div>
                    </div>

                    <div class="mb-3 p-2 bg-light rounded">
                        <div class="d-flex align-items-center justify-content-between">
                            <span><i class="fas fa-university me-2"></i> Virement</span>
                            <span class="badge bg-{{ settings.bankTransferEnabled ? 'success' : 'secondary' }}">
                                {{ settings.bankTransferEnabled ? 'Actif' : 'Inactif' }}
                            </span>
                        </div>
                    </div>

                    <hr>

                    {% set activeCount = (settings.stripeEnabled ? 1 : 0) + (settings.paypalEnabled ? 1 : 0) + (settings.bankTransferEnabled ? 1 : 0) %}

                    {% if activeCount == 0 %}
                        <div class="alert alert-warning py-2 px-3 mb-0 small">
                            <i class="fas fa-exclamation-triangle"></i> Aucune méthode active
                        </div>
                    {% else %}
                        <div class="alert alert-success py-2 px-3 mb-0 small">
                            <i class="fas fa-check"></i> {{ activeCount }} méthode(s) active(s)
                        </div>
                    {% endif %}
                </div>

                <div class="card-footer">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="fas fa-save"></i> Enregistrer
                    </button>
                </div>
            </div>

            <!-- Help Card -->
            <div class="card border-info">
                <div class="card-header bg-info text-white">
                    <h6 class="mb-0"><i class="fas fa-question-circle"></i> Documentation</h6>
                </div>
                <div class="card-body small">
                    <ul class="mb-0">
                        <li><a href="https://stripe.com/docs" target="_blank">Documentation Stripe</a></li>
                        <li><a href="https://developer.paypal.com/docs" target="_blank">Documentation PayPal</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    {{ form_end(form) }}
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Toggle visibility based on checkbox
    const checkboxes = ['stripeEnabled', 'paypalEnabled', 'bankTransferEnabled'];
    const targets = ['stripe-config', 'paypal-config', 'bank-config'];

    checkboxes.forEach((checkboxName, index) => {
        const checkbox = document.getElementById('payment_config_' + checkboxName);
        if (checkbox) {
            checkbox.addEventListener('change', function() {
                const target = document.getElementById(targets[index]);
                if (target) {
                    if (this.checked) {
                        target.classList.add('show');
                    } else {
                        target.classList.remove('show');
                    }
                }
            });
        }
    });
});
</script>
{% endblock %}