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

{% block body %}

    <!-- BEGIN PAGE BAR -->
    <div class="page-bar">
        
        <!-- BEGIN BREADCRUMB -->
        <ul class="page-breadcrumb">
            <li>
                <a href="{{ path('homepage') }}">Accueil</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <span>Rendez-vous</span>
            </li>
        </ul>
        <!-- END BREADCRUMB -->
    </div>

    <br/>

    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-calendar fa-lg font-green"></i>
                <span class="caption-subject bold uppercase">Rendez-vous</span>
                <span class="caption-helper hidden-print">Filtrer et lister</span>
            </div>
            <div class="actions hidden-print">
                <div class="btn-group">
                    <a href="{{ path('booking_new') }}" class="btn white"><i class="fa fa-plus"></i> Nouveau rendez-vous</a>
                    <button class="btn white" onclick="javascript:window.print();"><i class="fa fa-print"></i> Imprimer</button>
                </div>
            </div>
        </div>
        <div class="portlet-body">
            <!-- Filters -->
            <div class="ka-toolbar hidden-print">
                <div class="toolbar-left" style="flex:1 1 420px; min-width:320px;">
                    <div class="input-icon input-group" style="width:100%;">
                        <i class="fa fa-search font-red"></i>
                        <input type="text" class="form-control" name="motcles" id="motcles" placeholder="Rechercher par titre, client…" autocomplete="off">
                        <span class="input-group-addon" title="Inclure rendez-vous confirmés" data-toggle="tooltip">
                            <label style="margin:0; font-weight:normal; cursor:pointer;">
                                <input type="checkbox" class="tooltips" id="esthonore" checked="checked"> <span class="hidden-xs">Confirmés</span>
                            </label>
                        </span>
                    </div>
                </div>
                <div class="toolbar-right" style="flex:1 1 320px; min-width:280px;">
                    <div class="input-icon" style="width:100%;">
                        <i class="fa fa-calendar font-red"></i>
                        <input type="text" class="form-control" name="date_booking" id="date_booking" value="{{ 'now'|date('d/m/Y') }} au {{ 'tomorrow'|date('d/m/Y') }}" autocomplete="off" data-date-end-date="0d">
                        <input type="hidden" id="date_start" value="{{ 'now'|date('Y-m-d') }}">
                        <input type="hidden" id="date_end" value="{{ 'now'|date('Y-m-d') }}">
                    </div>
                </div>
            </div>

            <div class="ka-filter-quick hidden-print" aria-label="Périodes rapides" style="margin-top:10px;">
                <a href="javascript:;" class="btn btn-default btn-xs dates" data-value="{{ 'now'|date('d/m/Y') }} au {{ 'now'|date('d/m/Y') }}">Aujourd'hui</a>
                <a href="javascript:;" class="btn btn-default btn-xs dates" data-value="{{ 'now'|date_modify('-6 day')|date('d/m/Y') }} au {{ 'now'|date('d/m/Y') }}">7 jours</a>
                <a href="javascript:;" class="btn btn-default btn-xs dates" data-value="{{ 'now'|date('01/m/Y') }} au {{ 'now'|date('t/m/Y') }}">Ce mois</a>
                <a href="javascript:;" class="btn btn-default btn-xs dates hidden-xs" data-value="{{ 'now'|date_modify('first day of last month')|date('d/m/Y') }} au {{ 'now'|date_modify('last day of last month')|date('d/m/Y') }}">Mois dernier</a>
                <a href="javascript:;" class="btn btn-default btn-xs dates" data-value="{{ 'now'|date_modify('first day of january')|date('d/m/Y') }} au {{ 'now'|date_modify('last day of december')|date('d/m/Y') }}">Cette année</a>
            </div>

            <hr class="ka-section-sep" />

            <!-- Results -->
            <div class="table-responsive">
                <table class="table table-striped table-hover ka-table-tight" id="bookings-table">
                    <thead>
                        <tr>
                            <th>TITRE</th>
                            <th>CLIENT</th>
                            <th>DATE RDV</th>
                            <th>CONFIRMÉ</th>
                            <th class="text-right hidden-print">ACTIONS</th>
                        </tr>
                    </thead>
                    <tbody id="bookings-liste">
                        {% for booking in bookings %}
                            <tr>
                                <td>
                                    <a href="javascript:;" class="js-booking-show" data-id="{{ booking.id }}" title="Afficher">{{ booking.titre ?: booking.objet }}</a>
                                </td>
                                <td>
                                    {% if booking.client %}
                                        {{ booking.client }}
                                    {% elseif booking.nom or booking.prenom %}
                                        {{ [booking.nom, booking.prenom]|filter(v => v)|join(' ') }}
                                    {% else %}-{% endif %}
                                </td>
                                <td>{% if booking.dateTimeDebut %}{{ booking.dateTimeDebut|date('d/m/Y H:i') }}{% endif %}</td>
                                <td>{% if booking.estHonore %}<span class="badge badge-success badge-roundless">Oui</span>{% else %}<span class="badge badge-danger badge-roundless">Non</span>{% endif %}</td>
                                <td class="text-right hidden-print">
                                    <div class="btn-group pull-right hidden-print">
                                        <button class="btn btn-xs default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            Actions <i class="fa fa-angle-down"></i>
                                        </button>
                                        <ul class="dropdown-menu pull-right">
                                            <li><a href="javascript:;" class="js-booking-show" data-id="{{ booking.id }}"><i class="fa fa-mail-forward"></i> Afficher</a></li>
                                            <li><a href="{{ path('booking_edit', { 'id': booking.id }) }}" target="_blank"><i class="fa fa-edit"></i> Modifier</a></li>
                                            <li><a href="{{ path('booking_delete', { 'id': booking.id }) }}"><i class="fa fa-close"></i> Supprimer</a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
                <div class="ka-empty-state" id="booking-empty-hint" style="display:none;">
                    <div style="font-size:36px;color:#9aa0a6;line-height:1;margin-bottom:6px;"><i class="fa fa-calendar"></i></div>
                    <h4 style="margin-top:0;">Aucun rendez-vous trouvé</h4>
                    <p class="ka-muted">Ajustez votre période ou modifiez votre recherche.</p>
                    <a href="{{ path('booking_new') }}" class="btn btn-sm green"><i class="fa fa-plus"></i> Nouveau rendez-vous</a>
                </div>
            </div>
        </div>
    </div>
    
    {# Booking details modal #}
    <div class="modal fade" id="booking-modal" tabindex="-1" aria-labelledby="booking-modal-title" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="booking-modal-title">Détails du booking</h4>
                </div>
                <div class="modal-body" id="booking-modal-body" style="padding:0; max-height: 70vh; overflow:auto;"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" id="booking-modal-confirm" data-id="" data-confirmed="0"><i class="fa fa-check"></i> Confirmer</button>
                    <a href="#" class="btn btn-primary" id="booking-modal-edit" target="_blank"><i class="fa fa-edit"></i> Modifier</a>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        window.bookingFilterUrl = '{{ path('booking_filter') }}';
        window.bookingModalTemplate = '{{ path('booking_show_modal', {'id': 'ID_PLACEHOLDER'}) }}';
        window.bookingEditTemplate = '{{ path('booking_edit', {'id': 'ID_PLACEHOLDER'}) }}';
        window.bookingToggleTemplate = '{{ path('booking_toggle_confirm', {'id': 'ID_PLACEHOLDER'}) }}';
    </script>
    <script src="{{ asset('assets/global/scripts/booking.js') ~ '?' ~ random() }}" type="text/javascript"></script>
{% endblock %}