{% extends '@EasyAdmin/crud/index.html.twig' %}

{% block content %}
    <label style="margin-top: 30px; margin-bottom: 30px;">
        {{ 'calendar.filter'| trans({}, 'admin') }}
        <select id="calendarFilter" onchange="onFilterChanged()">
            <option value="null">{{ 'calendar.noFilter'| trans({}, 'admin') }}</option>
            <option value="onGoing">{{ 'calendar.onGoing'| trans({}, 'admin') }}</option>
            <option value="canceled">{{ 'calendar.canceled'| trans({}, 'admin') }}</option>
            <option value="onHold">{{ 'calendar.onHold'| trans({}, 'admin') }}</option>
        </select>
    </label>

    <br />

    <div id="calendar"></div>

    <div class="modal fade" id="planningModal" tabindex="-1" aria-labelledby="planningModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="planningModalLabel">{{ 'calendar.addTitle'| trans({}, 'admin') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="planningForm">
                        <div class="mb-3">
                            <label for="fromDate" class="form-label">{{ 'calendar.fromDate'| trans({}, 'admin') }}</label>
                            <input type="datetime-local" class="form-control" id="fromDate" required>
                        </div>

                        <div class="mb-3">
                            <label for="nbPlayers" class="form-label">{{ 'calendar.numPlayers'| trans({}, 'admin') }}</label>
                            <input type="number" class="form-control" id="nbPlayers" required>
                        </div>
                        <div class="mb-3">
                            <label for="price" class="form-label">{{ 'calendar.price'| trans({}, 'admin') }}</label>
                            <input type="number" class="form-control" id="price" required>
                        </div>
                        <div class="mb-3">
                            <label for="playTime" class="form-label">{{ 'calendar.playTime'| trans({}, 'admin') }}</label>
                            <input type="text" class="form-control" id="playTime" required>
                        </div>
                        <div class="mb-3">
                            <label for="pitchSelect" class="form-label">{{ 'calendar.pitch'| trans({}, 'admin') }}</label>
                            <select class="form-select" id="pitchSelect" required>
                                <!-- Les options seront ajoutées dynamiquement -->
                            </select>
                        </div>
                        <input hidden type="text" class="form-control" id="planningId" />
                        <button type="submit" class="btn btn-primary d-flex m-auto w-25 justify-content-center" id="planning-submit-button">{{ 'calendar.add'| trans({}, 'admin') }}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}