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

{% block title %}Edit Event Page{% endblock %}

{% block body %}

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Usuń wydarzenie</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>
        Wydarzenie zostanie trwale usunięte wraz z zapisanymi uczestnikami.
        </p>
        <p>
        Czy jesteś pewny?
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">zamknij</button>
        <form action='' method='POST'>
        <input type="hidden" value="{{ event.id }}" name="event_id">
        <input type="submit" class="btn btn-danger" name="delete_event" value="usuń">
        </form>
      </div>
    </div>
  </div>
</div>


<div class='container'>
    <div class='row'>
        <div class='col-12'>
        {% if event.EventStatus ==0 %}
        <!-- Button trigger modal -->
            <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#exampleModal">
                usuń wydarzenie
            </button>
        {% endif %}
        </div>
    </div>
    <div class='row'>
        <form action='' method="post">
        <div class='col-12' style='border:0px solid grey; padding: 10px; box-shadow: 0px 0px 0px black;'>
            <input type='hidden' name='eventId' value='{{ event.id }}'>
            <label for='eventTitle'>Nazwa</label>
            <input type='text' class='form-control' name='eventTitle' value='{{ event.title }}'></input>
            <label for='eventDate'>Data</label>
            <input type='date' class='form-control' name='eventDate' value='{{ event.eventDate|date('Y-m-d') }}'></input>
            <label for='limitation'>Limit uczestników</label>
            <input type='number' class='form-control' name='limitation' value='{{ event.limitation }}'></input>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" name='eventStatus' id="flexCheckChecked" {% if event.EventStatus %}checked{% endif %}>
                <label class="form-check-label" for="flexCheckChecked">
                    Event {% if event.EventStatus %}aktywny{% else %}nieaktywny {% endif %}
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" name='eventOpenForBooking' id="flexCheckChecked" {% if event.OpenForBooking %}checked{% endif %}>
                <label class="form-check-label" for="flexCheckChecked">
                    Zapisy {% if event.OpenForBooking %}aktywne{% else %}nieaktywne {% endif %}
                </label>
            </div>
            <div class='row'>
                <div class='col-12'>
                    <label for='eventInfo'>Opis</label>
                    <textarea id="test" name='eventInfo'>{{ event.info }}</textarea>
                    
                </div>
            </div>
            <div class='row' style='margin-top:20px;'>
                <div class='col-12'>
                <input type='submit' class='btn btn-primary' name='makeUpdate' value='Aktualizuj'>
                </div>
            </div>
        </div>
        </form>
    </div>
    <hr />
    <div class='row'>
        <div class='col-12'>
            
          
            <p>
            <a class="btn btn-secondary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                Dodaj uczestników
            </a>
            
            </p>
            <p>
            <div class="collapse" id="collapseExample">
            <div class="card card-body">
                
                {% if event.OpenForBooking %}
                    <h4>Zapisy On-Line <small>(bez rejestracji)</small></h4>
                    <form action='{{ path('app_booking') }}' method='POST'>
                    <input type='hidden' name='eventId' value='{{ event.id }}'>
                    <div class='mb-3'>
                        <label class='form-label'>Imię i Nazwisko</label>
                        <input class='form-control form-control-sm' name='person' type='text' required>
                    </div>
                    <div class='mb-3'>
                        <label class='form-label'>E-Mail</label>
                        <input class='form-control form-control-sm' name='email' type='email' required>
                    </div>
                    <div class='mb-3'>
                        <label class='form-label'>Ilosc osób</label>
                        <input class='form-control form-control-sm' name='howmanyMates' type='number' min='1' value='1' required>
                    </div>
                    <div class='mb-3'>
                        <label class='form-label'>dodatkowe informacje (m.in. dane zapisanych osób)</label>
                        <textarea class='form-control' name='infotext' rows='3'></textarea>
                    </div>
                    <div class='mb-3'>
                        <input class='btn btn-info btn-sm' type='submit' name='saveBooking' value='Zapisz'>
                    </div>
                    </form>
                {% else %}
                    <h4 style='text-align:center;color:lightblue;'>Zapisy online zostały zamknięte</h4>
                {% endif %}

            </div>
            </div>
        </div>
    </div>
    <div class='row' style='margin-bottom: 125px;'>
        <div class='col-12'>
        <h2>Lista Uczestników</h2>
        <p>
            <div class="progress">
            
                <div class="progress-bar 
                            {% if fillLevel<50 %} bg-warning {% endif %}
                            {% if fillLevel>50 and fillLevel<90 %} bg-info {% endif %}
                            {% if fillLevel>=90 %} bg-success {% endif %}
                " role="progressbar" 
                    style="width: {{ fillLevel }}%;" 
                    aria-valuenow="{{ fillLevel }}" 
                    aria-valuemin="0" 
                    aria-valuemax="100">{{ eventDetailsArray['howmanyBooked'] }}/{{ eventDetailsArray['limitation'] }} uczestników</div>
            </div>
        </p>
        </div>
        <div class='col-12'>
            {% if bookings %}
            <div class="table-responsive">
                <table class='table table-striped'>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Data</th>
                        <th>Liczba osób</th>
                        <th>Uczestnik</th>
                        <th>Adres E-Mail</th>
                        <th>Uwagi</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {% for booking in bookings %}
                    <tr>
                        <td>{{ loop.index }}</td>
                        <td>{{ booking.CreatedAt|date('d.m.Y H:i:s') }}</td>
                        <td>{{ booking.howmanyMates }}</td>
                        <td>{{ booking.person }}</td>
                        <td>{{ booking.email }}</td>
                        <td>{{ booking.infotext }}</td>
                        <td><a href="{{ path("app_booking_edit", {eventid: event.id, bookingid: booking.id}) }}">edytuj</a></td>
                    </tr>
                    {% endfor %}
                </tbody>
                </table>
            </div>
            {% else %}
            <p>nie ma jeszcze chętnych</p>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}