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

{% set block_title = 'Ticket #' ~ ticket_id %}

{% block boffice_content %}
<div class="row">
    {# Main content #}
    <div class="col-md-8">
        {# Ticket info (loaded by JS) #}
        <div class="box box-primary" id="boffice-ticket-box">
            <div class="box-header with-border">
                <h3 class="box-title" id="boffice-ticket-title">
                    <i class="fa fa-spinner fa-spin"></i> Chargement...
                </h3>
                <div class="box-tools pull-right">
                    <span id="boffice-ticket-type-badge"></span>
                    <span id="boffice-ticket-priority-badge"></span>
                    {% if boffice_is_global_admin %}
                    <span id="boffice-ticket-admin-actions" style="margin-left:8px;">
                        <button type="button" id="boffice-edit-btn" class="btn btn-xs btn-warning" title="Modifier le ticket" style="display:none;">
                            <i class="fa fa-pencil"></i> Modifier
                        </button>
                        <button type="button" id="boffice-delete-btn" class="btn btn-xs btn-danger" title="Supprimer le ticket" style="display:none;">
                            <i class="fa fa-trash"></i>
                        </button>
                        <button type="button" id="boffice-archive-btn" class="btn btn-xs btn-default" title="Archiver/Désarchiver" style="display:none;">
                            <i class="fa fa-archive"></i>
                        </button>
                    </span>
                    {% endif %}
                </div>
            </div>
            <div class="box-body" id="boffice-ticket-body">
                <div style="text-align:center;padding:30px;color:#999;">
                    <i class="fa fa-spinner fa-spin fa-2x"></i>
                </div>
            </div>
        </div>

        {# Comments #}
        <div class="box box-default">
            <div class="box-header with-border">
                <h3 class="box-title"><i class="fa fa-comments"></i> Commentaires</h3>
                <span class="badge" id="boffice-comment-count">0</span>
            </div>
            <div class="box-body" id="boffice-comments-list">
                <p style="color:#999;text-align:center;">Chargement des commentaires...</p>
            </div>
            <div class="box-footer">
                <form id="boffice-comment-form">
                    <div class="form-group" style="margin-bottom:10px;">
                        <textarea name="content" class="form-control" rows="3" placeholder="Ajouter un commentaire..." required></textarea>
                    </div>
                    <button type="submit" class="btn btn-sm btn-primary">
                        <i class="fa fa-paper-plane"></i> Commenter
                    </button>
                </form>
            </div>
        </div>

        {# History #}
        <div class="box box-default collapsed-box">
            <div class="box-header with-border" style="cursor:pointer;" data-widget="collapse">
                <h3 class="box-title"><i class="fa fa-history"></i> Historique des modifications</h3>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool"><i class="fa fa-plus"></i></button>
                </div>
            </div>
            <div class="box-body" id="boffice-history-list" style="display:none;">
                <p style="color:#999;text-align:center;">Chargement...</p>
            </div>
        </div>
    </div>

    {# Sidebar #}
    <div class="col-md-4">
        {# Ticket metadata #}
        <div class="box box-default">
            <div class="box-header with-border">
                <h3 class="box-title">Informations</h3>
            </div>
            <div class="box-body" id="boffice-ticket-meta">
                <dl class="dl-horizontal" style="font-size:13px;">
                    <dt>Colonne</dt>
                    <dd id="boffice-meta-status">-</dd>
                    <dt>Monnaie</dt>
                    <dd id="boffice-meta-installation">-</dd>
                    <dt>Zone</dt>
                    <dd id="boffice-meta-area">-</dd>
                    <dt>Catégorie</dt>
                    <dd id="boffice-meta-category">-</dd>
                    <dt>Financement</dt>
                    <dd id="boffice-meta-financing">-</dd>
                    <dt>Début</dt>
                    <dd id="boffice-meta-started-at">-</dd>
                    <dt>Échéance</dt>
                    <dd id="boffice-meta-due-date">-</dd>
                    <dt>Créé par</dt>
                    <dd id="boffice-meta-created-by">-</dd>
                    <dt>Créé le</dt>
                    <dd id="boffice-meta-created-at">-</dd>
                    <dt>Modifié le</dt>
                    <dd id="boffice-meta-updated-at">-</dd>
                </dl>
            </div>
        </div>

        {# Attachments #}
        <div class="box box-default">
            <div class="box-header with-border">
                <h3 class="box-title"><i class="fa fa-paperclip"></i> Pièces jointes</h3>
            </div>
            <div class="box-body" id="boffice-attachments-list">
                <p style="color:#999;font-size:13px;">Aucune pièce jointe</p>
            </div>
            {% if boffice_is_global_admin %}
            <div class="box-footer" id="boffice-upload-footer">
                <form id="boffice-upload-form" enctype="multipart/form-data">
                    <div class="input-group input-group-sm">
                        <input type="file" name="file" id="boffice-upload-file" accept=".jpg,.jpeg,.png,.gif,.pdf" style="display:none;">
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default" id="boffice-upload-btn">
                                <i class="fa fa-upload"></i> Ajouter une pièce jointe
                            </button>
                        </span>
                    </div>
                </form>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block boffice_js %}
<script>
    var BOFFICE_TICKET_ID = {{ ticket_id }};
    var BOFFICE_TICKET_IS_GLOBAL_ADMIN = {{ boffice_is_global_admin ? 'true' : 'false' }};
</script>
{{ encore_entry_script_tags('boffice-api') }}
{{ encore_entry_script_tags('boffice-ticket-show') }}
{% endblock %}