{% form_theme form 'form/checkbox.html.twig' %}
<div {{attributes.defaults(stimulus_controller('prestationFormComponent'))}} class="mx-auto">
    {{ form_start(form, {
    attr: {
    'data-action': 'change->live#action',
    'data-live-action-param': 'setDates'
    }
    }) }}

    {#
    page 1:
    forfait ou remise
    #}
    <div class="overflow-auto">
        {{form_widget(form.forfait)}}
    </div>

    {#
    page 2:
    recurence si forfait
    #}

    {% if form.reccurence is defined %}
    {{form_row(form.reccurence)}}
    {% endif %}

    {#
    page 3:
    options par passages !!!!
    {{ dump(dates) }}
    {{ dump(form.reccurenceDates) }}
    #} 
    {% if initialFormData.isReccurence %}
    <button type="button"  class="btn btn-primary rounded-4"  data-action="live#action:prevent" data-live-action-param="switchTokenDates">
        {% if wantSelect %}
            
        {{ 'dateChoice.now'|trans }}
        {% else %}
        {{ 'dateChoice.later'|trans }}

        {% endif %}
    </button>
        
    <p>{{ token }}&nbsp;{{ ux_icon('mingcute:coin-line', { width: 32, height: 32}) }}</p> 
    {% endif %} 


        {% for key, rdvForm in form.rendezVous %}
        <div class="">
            <p class="text-primary fs-3 fw-bold text-center">{{ dates[key].label }}</p>
            <p class="text-primary">{{ date(dates[key].value)|format_datetime('full', 'short', locale: app.session.get('_locale')) }}</p>
        </div>
        <div class="d-grid gap-2">
            <div class="{{  dates[key].type == 'restoration' ? 'd-none' : '' }}">
                {{ form_widget(rdvForm.options ) }}
            </div>
            <button type="button" class="btn btn-primary rounded-4"  data-bs-toggle="collapse" data-bs-target="#collapse_date_{{key}}" aria-expanded="false" aria-controls="collapse_date_{{key}}">{{ ux_icon('mdi:calendar', {width:32, height:32 })
            }}</button>
            <div class="collapse" id="collapse_date_{{key}}">
                <div class="card card-body"> 
                    {{ form_widget(rdvForm.date, {
                        label: false, 
                        value: dates[key].value, 
                        attr: {
                            class: 'd-none'
                        }
                    }) }}
                    
                    <twig:DateSelectorComponent dateField="{{dates[key]}}" dateKey="{{key}}" />
                </div>
            </div> 
        </div> 
        {% endfor %} 



    <ul class="list-group">
        <li class="list-group-item">TOTAL: 
        {% if discount %} <span class="badge bg-primary">DISCOUNT</span> {% endif %}<b class="float-end">{{ ( total / 100)|number_format(2, '.', ',') }} € TTC</b></li>
        <li class="list-group-item">{{'prestation.totaltime'|trans  }}: <b class="float-end">{{ totalTime }} {{ 'prestation.minutes'|trans }}</b></li>
    </ul>
    <div class="d-grid gap-2 my-4">
        <button class="btn btn-primary btn-rounded" data-action="live#action:prevent"
            data-live-action-param="save">{{"btn.reserve"|trans}}</button>
    </div>


    <section class="mt-2">
        <small><sup>*</sup>{{ "prestation.info.presta"|trans }}</small>
        <hr>
        <small><sup>**</sup>{{ "prestation.info.remise"|trans }}</small>
    </section>
</div>