{% extends '@kohinos/common/layout.html.twig' %}

{% block header %}
	<div class="header-placeholder"></div>
{% endblock header %}

{% block content %}
<div class='container' style='max-width: 800px;'>
	{% if validation != true %}
		<div class="mt-3 payment-page-header">
			<a href='{{ path('index') }}'>
				<i class="fas fa-chevron-circle-left"></i> {{ 'Retour'|trans }}
			</a>
			<b>{{ prestataire }}</b>
		</div>

		<h2 class='text-center w-100 mt-4 mb-4'>{{ "Encaisser un adhérent"|trans }}</h2>
	{% else %}
		<div class="mt-3 payment-page-header">
			<a href='{{ path('encaissement') }}'>
				<i class="fas fa-chevron-circle-left"></i> {{ 'Retour'|trans }}
			</a>
			<b>{{ prestataire }}</b>
		</div>

		<div class='text-center w-100 mt-4 mb-3 payment-recap'>
			{% if adherent_name is defined and montant is defined %}
				<h3>{{ adherent_name }}</h3>
				<h2>Valider le paiement de <strong>{{ montant }} {{ KOH_MLC_SYMBOL|default('eMlc') }}</strong></h2>
				<h4>Prestataire : {{ prestataire }}</h4>
			{% endif %}
		</div>
	{% endif %}

	{# SHOW BALANCE MODALE#}
	{% if insufficientBalance is not null %}
		{% set modal_id = 'showbalancemodal' %}
		{% set modal_title = 'Mon solde'|trans %}
		{% set modal_content %}
			<div>
				{{ "Solde restant :"|trans }} {{ insufficientBalance }} {{ KOH_MLC_SYMBOL|default('eMlc') }}
			</div>
		{% endset %}
		{% include '@kohinos/block/modal.html.twig' with {'btn_primary' : null, 'btn_secondary' : 'Ok'} %}
		<div id="display-balance-text-container">
			<div>
				Votre solde est insuffisant, voulez-vous consulter votre solde ?
			</div>
			<a class='btn btn-primary' data-bs-toggle="modal" data-bs-target="#{{ modal_id }}" data-toggle="modal" data-target="#{{ modal_id }}" title='{{ 'Mon solde'|trans }}' href="#">{{ 'Oui'|trans }}</a>
			<a class='btn btn-primary' id="display-balance-button-no" href="#">{{ 'Non'|trans }}</a>
		</div>
	{% endif %}
	<br/>

    <div class='text-center mb-5'>
		{{ form_start(form, {'attr': {'autocomplete': 'off'}}) }}
			{% if validation == true %}
                <!-- Account selection container - shown in Step 2 -->
                <div id="account-selection-container" class="mb-4">
                    <label class="form-label required fw-bold mb-3">{{ 'Compte à débiter'|trans }} : </label>
                    <div id="account-options-container" class="account-options-grid">
                        <!-- Account options will be loaded via JavaScript -->
                        <div class="text-center">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <p>{{ 'Chargement des comptes...'|trans }}</p>
                        </div>
                    </div>
                </div>

				<div class="text-center">{{ "Veuillez entrer votre code de validation"|trans }}</div>
				<div id="code-visual"></div>
				<div id="code-digits-container">
					<button type="button" class="payment-code-button" data-value="1">1</button>
					<button type="button" class="payment-code-button" data-value="2">2</button>
					<button type="button" class="payment-code-button" data-value="3">3</button>
					<button type="button" class="payment-code-button" data-value="4">4</button>
					<button type="button" class="payment-code-button" data-value="5">5</button>
					<button type="button" class="payment-code-button" data-value="6">6</button>
					<button type="button" class="payment-code-button" data-value="7">7</button>
					<button type="button" class="payment-code-button" data-value="8">8</button>
					<button type="button" class="payment-code-button" data-value="9">9</button>
					<button type="button" class="payment-code-correction-button">
						<i class="fa fa-backspace"></i>
					</button>
					<button type="button" class="payment-code-button" data-value="0">0</button>
					<div class="payment-code-button-placeholder"></div>
				</div>

				<div style="display:none;">
					{{ form_row(form.adherent, {'attr': {'data-adherent-name': form.adherent.vars.data ? form.adherent.vars.data.name : ''}}) }}
					{{ form_row(form.montant) }}
					{{ form_widget(form.account_type) }}
					{{ form_widget(form.payment_code) }}
				</div>
			{% else %}
				{{ form_row(form.adherent) }}
				{{ form_row(form.montant) }}
                {{ form_widget(form.account_type, {'attr': {'style': 'display:none;', 'class': 'account-type-input'}}) }}
                <input type="hidden" id="prestataire_id" value="{{ prestataire.id }}" />
				<br/>
			{% endif %}
			<br/>

		{{ form_end(form) }}
	</div>
</div>
<script type="text/javascript">
	// Pass variables to the encaissement.js script
	window.formEncaissementValidation = '{{ validation }}';
	window.KOH_MLC_NAME_SMALL = "{{ KOH_MLC_NAME_SMALL|default('') }}";
	// Pass transaction details for the payment recap
	window.adherentName = "{{ form.adherent.vars.data ? form.adherent.vars.data.name : '' }}";
	window.montantValue = "{{ form.montant.vars.data }}";
	window.prestataireNom = "{{ prestataire ? prestataire : '' }}";
</script>

<style>
    /* Mobile-friendly styles for the encaissement page */
    @media (max-width: 576px) {
        .container {
            padding-left: 20px;
            padding-right: 20px;
        }

        .form-control, .form-select, .select2-container {
            font-size: 1.1rem;
            height: auto;
            padding: 12px;
        }

        .form-label {
            font-size: 1.1rem;
        }

        .btn {
            padding: 12px 20px;
            font-size: 1.1rem;
        }

        /* Larger payment code buttons for mobile */
        #code-digits-container button {
            width: 70px;
            height: 70px;
            font-size: 1.5rem;
            margin: 5px;
        }
    }

    /* Account options grid layout for larger screens */
    @media (min-width: 768px) {
        .account-options-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
    }
</style>

{# Include the encaissement.js file #}
{% block javascripts %}
	{{ parent() }}
	{{ encore_entry_script_tags('encaissement') }}
{% endblock %}

{% endblock %}

{% block footer %}{% endblock footer %}